Skip to content
This repository was archived by the owner on Dec 24, 2019. It is now read-only.

Commit 1360fe2

Browse files
author
Patrick Burtchaell
authored
Merge pull request #124 from corydeppen/ts-defs
Add initial TypeScript definitions
2 parents 707e0d9 + 1a99abd commit 1360fe2

File tree

7 files changed

+311
-0
lines changed

7 files changed

+311
-0
lines changed

‎.vscode/settings.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
// Use 'prettier-eslint' instead of 'prettier'. Other settings will only be fallbacks in case they could not be inferred from eslint rules.
3+
"prettier.eslintIntegration": true
4+
}

‎index.d.ts‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { Component, ReactElement } from 'react';
2+
3+
interface StyleFactoryFn {
4+
(index: number, style: object | void, notification: NotificationProps): object;
5+
}
6+
7+
interface NotificationProps {
8+
/** The name of the action, e.g., "close" or "undo". */
9+
action?: string;
10+
/** Custom action styles. */
11+
actionStyle?: object;
12+
/** Custom snackbar styles when the bar is active. */
13+
activeBarStyle?: object;
14+
/**
15+
* Custom class to apply to the top-level component when active.
16+
* @default 'notification-bar-active'
17+
*/
18+
activeClassName?: string;
19+
/** Custom snackbar styles. */
20+
barStyle?: object;
21+
/** Custom class to apply to the top-level component. */
22+
className?: string;
23+
/**
24+
* Timeout for onDismiss event.
25+
* @default 2000
26+
*/
27+
dismissAfter?: boolean | number;
28+
/**
29+
* If true, the notification is visible.
30+
* @default false
31+
*/
32+
isActive?: boolean;
33+
/** The message or component for the notification. */
34+
message: string | ReactElement<NotificationProps>;
35+
/** Setting this prop to `false` will disable all inline styles. */
36+
style?: boolean;
37+
/** The title for the notification. */
38+
title?: string | ReactElement<any>;
39+
/** Custom title styles. */
40+
titleStyle?: object;
41+
/**
42+
* Callback function to run when the action is clicked.
43+
* @param notification Notification currently being clicked
44+
* @param deactivate Function that can be called to set the notification to inactive.
45+
* Used to activate notification exit animation on click.
46+
*/
47+
onClick?(notification: NotificationProps, deactivate: () => void): void;
48+
/**
49+
* Callback function to run when dismissAfter timer runs out
50+
* @param notification Notification currently being dismissed.
51+
*/
52+
onDismiss?(notification: NotificationProps): void;
53+
}
54+
55+
interface NotificationStackProps {
56+
/** Create the style of the actions. */
57+
actionStyleFactory?: StyleFactoryFn;
58+
/** Create the style of the active notification. */
59+
activeBarStyleFactory?: StyleFactoryFn;
60+
/** Create the style of the notification. */
61+
barStyleFactory?: StyleFactoryFn;
62+
/**
63+
* If false, notification dismiss timers start immediately.
64+
* @default true
65+
*/
66+
dismissInOrder?: boolean;
67+
/** Array of notifications to render. */
68+
notifications: NotificationObject[];
69+
/**
70+
* Callback function to run when dismissAfter timer runs out
71+
* @param notification Notification currently being dismissed.
72+
*/
73+
onDismiss?(notification: NotificationObject): void;
74+
}
75+
76+
export interface NotificationObject extends NotificationProps {
77+
key: number | string;
78+
}
79+
80+
export class Notification extends Component<NotificationProps, {}> {}
81+
82+
export class NotificationStack extends Component<NotificationStackProps, {}> {}

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@
4141
"react": "^0.14.0 || ^15.0.0 || ^16.0.0"
4242
},
4343
"devDependencies": {
44+
"@types/react": "^16.0.10",
45+
"@types/react-dom": "^16.0.1",
4446
"babel-cli": "^6.24.1",
4547
"babel-core": "^6.25.0",
4648
"babel-eslint": "^7.2.2",
@@ -70,6 +72,8 @@
7072
"react-dom": "^15.6.1",
7173
"react-test-renderer": "^15.6.1",
7274
"sinon": "^2.2.0",
75+
"typescript": "^2.5.3",
76+
"typescript-definition-tester": "^0.0.5",
7377
"webpack": "^2.6.1",
7478
"webpack-dev-middleware": "^1.10.2",
7579
"webpack-dev-server": "^2.4.5"

‎test/ts-components/NotificationTree.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import * as React from 'react';
2+
import { OrderedSet } from 'immutable';
3+
import { NotificationObject, NotificationStack } from '../../index';
4+
5+
interface State {
6+
count: number;
7+
notifications: OrderedSet<NotificationObject>;
8+
}
9+
10+
class NotificationTree extends React.Component<{}, State> {
11+
constructor(props: any) {
12+
super(props);
13+
14+
this.state = {
15+
notifications: OrderedSet(),
16+
// This is just used for the sake of an example to make sure
17+
// notifications have unique keys. In production, you should have
18+
// a different system for UIDs.
19+
count: 0
20+
};
21+
22+
this.removeNotification = this.removeNotification.bind(this);
23+
}
24+
25+
addNotification() {
26+
const { notifications, count } = this.state;
27+
const id = notifications.size + 1;
28+
const newCount = count + 1;
29+
return this.setState({
30+
count: newCount,
31+
notifications: notifications.add({
32+
message: `Notification ${id}`,
33+
key: newCount,
34+
action: 'Dismiss',
35+
dismissAfter: 3400,
36+
onClick: () => this.removeNotification(newCount)
37+
})
38+
});
39+
}
40+
41+
removeNotification(count: number) {
42+
const { notifications } = this.state;
43+
// Immutable's filter has a nullable value param for some reason,
44+
// but the definition has been changed to non-nullable in 4.x.
45+
// TODO: Remove non-null assertion after upgrading Immutable to >= 4.x.
46+
// SEE: https://github.com/facebook/immutable-js/issues/1294
47+
this.setState({
48+
notifications: notifications.filter(n => n!.key !== count) as OrderedSet<NotificationObject>
49+
});
50+
}
51+
52+
render() {
53+
return (
54+
<div>
55+
<button onClick={this.addNotification.bind(this)}>Add notification</button>
56+
<NotificationStack
57+
notifications={this.state.notifications.toArray()}
58+
onDismiss={notification =>
59+
this.setState({
60+
notifications: this.state.notifications.delete(notification)
61+
})}
62+
/>
63+
</div>
64+
);
65+
}
66+
}
67+
68+
export default NotificationTree;

‎test/ts-components/SingleNotification.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import * as React from 'react';
2+
import { render } from 'react-dom';
3+
import { Notification } from '../../index';
4+
5+
interface State {
6+
isActive: boolean;
7+
permanentNotification: boolean;
8+
}
9+
10+
class SingleNotification extends React.Component<{}, State> {
11+
constructor(props: any) {
12+
super(props);
13+
14+
this.state = {
15+
isActive: false,
16+
permanentNotification: false
17+
};
18+
}
19+
20+
toggleNotification() {
21+
this.setState({
22+
isActive: !this.state.isActive
23+
});
24+
}
25+
26+
render() {
27+
const { isActive } = this.state;
28+
29+
return (
30+
<div>
31+
<button
32+
onClick={this.toggleNotification.bind(this)}
33+
children={!isActive ? 'Show notification' : 'Hide notification'}
34+
/>
35+
<br />
36+
<button
37+
onClick={() =>
38+
this.setState({
39+
permanentNotification: true
40+
})}
41+
children="Show permanent notification"
42+
/>
43+
<Notification
44+
isActive={this.state.isActive}
45+
message="Notification"
46+
action="Dismiss"
47+
title="Title!"
48+
onDismiss={this.toggleNotification.bind(this)}
49+
onClick={() => this.setState({ isActive: false })}
50+
/>
51+
<Notification
52+
isActive={this.state.permanentNotification}
53+
dismissAfter={false}
54+
message="Permanent Notification"
55+
title="Title!"
56+
/>
57+
</div>
58+
);
59+
}
60+
}
61+
62+
render(<SingleNotification />, document.querySelector('#mount'));

‎test/typescript.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import path from 'path';
2+
import ts from 'typescript';
3+
import * as tt from 'typescript-definition-tester';
4+
5+
const compilerOptions = {
6+
jsx: ts.JsxEmit.React,
7+
module: ts.ModuleKind.CommonJS,
8+
noEmitOnError: true,
9+
strict: true,
10+
target: ts.ScriptTarget.ES5
11+
};
12+
13+
describe('TypeScript definitions', () => {
14+
it('should compile against index.d.ts', (done) => {
15+
tt.compileDirectory(
16+
path.resolve(__dirname, 'ts-components'),
17+
fileName => fileName.match(/\.tsx?$/),
18+
compilerOptions,
19+
() => done()
20+
);
21+
});
22+
});

‎yarn.lock‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,25 @@
22
# yarn lockfile v1
33

44

5+
"@types/node@*":
6+
version "8.0.33"
7+
resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.33.tgz#1126e94374014e54478092830704f6ea89df04cd"
8+
59
"@types/node@^6.0.46":
610
version "6.0.73"
711
resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.73.tgz#85dc4bb6f125377c75ddd2519a1eeb63f0a4ed70"
812

13+
"@types/react-dom@^16.0.1":
14+
version "16.0.1"
15+
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.1.tgz#de159d00dd70050000f462e8bcff0c08ef803dee"
16+
dependencies:
17+
"@types/node" "*"
18+
"@types/react" "*"
19+
20+
"@types/react@*", "@types/react@^16.0.10":
21+
version "16.0.10"
22+
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.10.tgz#a24b630f5f1f170866a148a147d4fc8636ea88e0"
23+
924
abab@^1.0.3:
1025
version "1.0.3"
1126
resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
@@ -1537,6 +1552,13 @@ destroy@~1.0.4:
15371552
version "1.0.4"
15381553
resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
15391554

1555+
detect-indent@^0.2.0:
1556+
version "0.2.0"
1557+
resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-0.2.0.tgz#042914498979ac2d9f3c73e4ff3e6877d3bc92b6"
1558+
dependencies:
1559+
get-stdin "^0.1.0"
1560+
minimist "^0.1.0"
1561+
15401562
detect-indent@^4.0.0:
15411563
version "4.0.0"
15421564
resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
@@ -1616,6 +1638,14 @@ [email protected], domutils@^1.5.1:
16161638
dom-serializer "0"
16171639
domelementtype "1"
16181640

1641+
dts-bundle@^0.2.0:
1642+
version "0.2.0"
1643+
resolved "https://registry.yarnpkg.com/dts-bundle/-/dts-bundle-0.2.0.tgz#e165e494b00f81a3b6eb64385cbf6d1b486b7a99"
1644+
dependencies:
1645+
detect-indent "^0.2.0"
1646+
glob "^4.0.2"
1647+
mkdirp "^0.5.0"
1648+
16191649
ecc-jsbn@~0.1.1:
16201650
version "0.1.1"
16211651
resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
@@ -2226,6 +2256,10 @@ get-caller-file@^1.0.1:
22262256
version "1.0.2"
22272257
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
22282258

2259+
get-stdin@^0.1.0:
2260+
version "0.1.0"
2261+
resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-0.1.0.tgz#5998af24aafc802d15c82c685657eeb8b10d4a91"
2262+
22292263
getpass@^0.1.1:
22302264
version "0.1.6"
22312265
resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.6.tgz#283ffd9fc1256840875311c1b60e8c40187110e6"
@@ -2256,6 +2290,15 @@ [email protected], glob@^7.0.0, glob@^7.0.3, glob@^7.0.5:
22562290
once "^1.3.0"
22572291
path-is-absolute "^1.0.0"
22582292

2293+
glob@^4.0.2:
2294+
version "4.5.3"
2295+
resolved "https://registry.yarnpkg.com/glob/-/glob-4.5.3.tgz#c6cb73d3226c1efef04de3c56d012f03377ee15f"
2296+
dependencies:
2297+
inflight "^1.0.4"
2298+
inherits "2"
2299+
minimatch "^2.0.1"
2300+
once "^1.3.0"
2301+
22592302
globals@^9.0.0, globals@^9.2.0:
22602303
version "9.14.0"
22612304
resolved "https://registry.yarnpkg.com/globals/-/globals-9.14.0.tgz#8859936af0038741263053b39d0e76ca241e4034"
@@ -3016,6 +3059,10 @@ lodash.some@^4.4.0:
30163059
version "4.6.0"
30173060
resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d"
30183061

3062+
lodash@^3.6.0:
3063+
version "3.10.1"
3064+
resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
3065+
30193066
lodash@^4.0.0, lodash@^4.17.2, lodash@^4.2.0:
30203067
version "4.17.2"
30213068
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.2.tgz#34a3055babe04ce42467b607d700072c7ff6bf42"
@@ -3125,6 +3172,12 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
31253172
version "1.0.1"
31263173
resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
31273174

3175+
minimatch@^2.0.1:
3176+
version "2.0.10"
3177+
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-2.0.10.tgz#8d087c39c6b38c001b97fca7ce6d0e1e80afbac7"
3178+
dependencies:
3179+
brace-expansion "^1.0.0"
3180+
31283181
minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3:
31293182
version "3.0.3"
31303183
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
@@ -3135,6 +3188,10 @@ [email protected]:
31353188
version "0.0.8"
31363189
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
31373190

3191+
minimist@^0.1.0:
3192+
version "0.1.0"
3193+
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.1.0.tgz#99df657a52574c21c9057497df742790b2b4c0de"
3194+
31383195
minimist@^1.2.0:
31393196
version "1.2.0"
31403197
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
@@ -4472,6 +4529,18 @@ typedarray@~0.0.5:
44724529
version "0.0.6"
44734530
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
44744531

4532+
typescript-definition-tester@^0.0.5:
4533+
version "0.0.5"
4534+
resolved "https://registry.yarnpkg.com/typescript-definition-tester/-/typescript-definition-tester-0.0.5.tgz#91c574d78ea05b81ed81244d50ec30d8240c356f"
4535+
dependencies:
4536+
assertion-error "^1.0.1"
4537+
dts-bundle "^0.2.0"
4538+
lodash "^3.6.0"
4539+
4540+
typescript@^2.5.3:
4541+
version "2.5.3"
4542+
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.3.tgz#df3dcdc38f3beb800d4bc322646b04a3f6ca7f0d"
4543+
44754544
ua-parser-js@^0.7.9:
44764545
version "0.7.12"
44774546
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"

0 commit comments

Comments
 (0)