Skip to content

Commit b878dfa

Browse files
jedwards1211jedwards1211
committed
feat: add TypeScript types 🎉
1 parent 9f04d1b commit b878dfa

File tree

10 files changed

+437
-146
lines changed

10 files changed

+437
-146
lines changed

‎.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
**
22
!**/*.js
33
!**/*.js.flow
4+
!**/*.d.ts
45
!/*.md
56
!yarn.lock
67
/demo

‎HoverMenu.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { MenuProps } from '@material-ui/core/Menu'
2+
3+
declare const HoverMenu: React.ComponentType<MenuProps>
4+
5+
export default HoverMenu

‎HoverPopover.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { PopoverProps } from '@material-ui/core/Popover'
2+
3+
declare const HoverPopover: React.ComponentType<PopoverProps>
4+
5+
export default HoverPopover

‎core.d.ts‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import { SyntheticEvent } from 'react'
2+
3+
export type Variant = 'popover' | 'popper'
4+
5+
export type PopupState = {
6+
open: (eventOrAnchorEl?: SyntheticEvent<any> | HTMLElement) => void
7+
close: () => void
8+
toggle: (eventOrAnchorEl?: SyntheticEvent<any> | HTMLElement) => void
9+
onMouseLeave: (event: SyntheticEvent<any>) => void
10+
setOpen: (
11+
open: boolean,
12+
eventOrAnchorEl?: SyntheticEvent<any> | HTMLElement
13+
) => void
14+
isOpen: boolean
15+
anchorEl: HTMLElement | null | undefined
16+
setAnchorEl: (anchorEl: HTMLElement) => any
17+
setAnchorElUsed: boolean
18+
popupId: string | null | undefined
19+
variant: Variant
20+
_childPopupState: PopupState | null | undefined
21+
_setChildPopupState: (popupState: PopupState | null | undefined) => void
22+
}
23+
24+
export type CoreState = {
25+
isOpen: boolean
26+
setAnchorElUsed: boolean
27+
anchorEl: HTMLElement | null | undefined
28+
hovered: boolean
29+
_childPopupState: PopupState | null | undefined
30+
}
31+
32+
export const initCoreState: CoreState
33+
34+
export function createPopupState(options: {
35+
state: CoreState
36+
setState: (state: Partial<CoreState>) => any
37+
popupId: string | null | undefined
38+
variant: Variant
39+
parentPopupState?: PopupState | null | undefined
40+
}): PopupState
41+
42+
/**
43+
* Creates a ref that sets the anchorEl for the popup.
44+
*
45+
* @param {object} popupState the argument passed to the child function of
46+
* `PopupState`
47+
*/
48+
export function anchorRef(
49+
popupState: PopupState
50+
): (popupState: HTMLElement | null | undefined) => any
51+
52+
/**
53+
* Creates props for a component that opens the popup when clicked.
54+
*
55+
* @param {object} popupState the argument passed to the child function of
56+
* `PopupState`
57+
*/
58+
export function bindTrigger(
59+
popupState: PopupState
60+
): {
61+
'aria-owns'?: string | null | undefined
62+
'aria-describedby'?: string | null | undefined
63+
'aria-haspopup': true | null | undefined
64+
onClick: (event: SyntheticEvent<any>) => void
65+
}
66+
67+
/**
68+
* Creates props for a component that toggles the popup when clicked.
69+
*
70+
* @param {object} popupState the argument passed to the child function of
71+
* `PopupState`
72+
*/
73+
export function bindToggle(
74+
popupState: PopupState
75+
): {
76+
'aria-owns'?: string | null | undefined
77+
'aria-describedby'?: string | null | undefined
78+
'aria-haspopup': true | null | undefined
79+
onClick: (event: SyntheticEvent<any>) => void
80+
}
81+
82+
/**
83+
* Creates props for a component that opens the popup while hovered.
84+
*
85+
* @param {object} popupState the argument passed to the child function of
86+
* `PopupState`
87+
*/
88+
export function bindHover(
89+
popupState: PopupState
90+
): {
91+
'aria-owns'?: string | null | undefined
92+
'aria-describedby'?: string | null | undefined
93+
'aria-haspopup': true | null | undefined
94+
onMouseEnter: (event: SyntheticEvent<any>) => any
95+
onMouseLeave: (event: SyntheticEvent<any>) => any
96+
}
97+
98+
/**
99+
* Creates props for a `Popover` component.
100+
*
101+
* @param {object} popupState the argument passed to the child function of
102+
* `PopupState`
103+
*/
104+
export function bindPopover(
105+
popupState: PopupState
106+
): {
107+
id: string | null | undefined
108+
anchorEl: HTMLElement | null | undefined
109+
open: boolean
110+
onClose: () => void
111+
onMouseLeave: (event: SyntheticEvent<any>) => void
112+
}
113+
114+
/**
115+
* Creates props for a `Menu` component.
116+
*
117+
* @param {object} popupState the argument passed to the child function of
118+
* `PopupState`
119+
*/
120+
export function bindMenu(
121+
popupState: PopupState
122+
): {
123+
id: string | null | undefined
124+
anchorEl: HTMLElement | null | undefined
125+
open: boolean
126+
onClose: () => void
127+
onMouseLeave: (event: SyntheticEvent<any>) => void
128+
}
129+
130+
/**
131+
* Creates props for a `Popper` component.
132+
*
133+
* @param {object} popupState the argument passed to the child function of
134+
* `PopupState`
135+
*/
136+
export function bindPopper(
137+
popupState: PopupState
138+
): {
139+
id: string | null | undefined
140+
anchorEl: HTMLElement | null | undefined
141+
open: boolean
142+
}

‎hooks.d.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { useState, useRef, useEffect } from 'react'
2+
3+
import {
4+
initCoreState,
5+
createPopupState,
6+
anchorRef,
7+
bindTrigger,
8+
bindToggle,
9+
bindHover,
10+
bindMenu,
11+
bindPopover,
12+
bindPopper,
13+
Variant,
14+
PopupState,
15+
} from './core'
16+
17+
export {
18+
anchorRef,
19+
bindTrigger,
20+
bindToggle,
21+
bindHover,
22+
bindMenu,
23+
bindPopover,
24+
bindPopper,
25+
Variant,
26+
PopupState,
27+
}
28+
29+
export function usePopupState(options: {
30+
parentPopupState?: PopupState | null | undefined
31+
popupId: string | null | undefined
32+
variant: Variant
33+
}): PopupState

‎hoverWorkaround.d.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Ref, CSSProperties } from 'react'
2+
import { PropInjector } from '@material-ui/types'
3+
import { Classes } from '@material-ui/styles/mergeClasses/mergeClasses'
4+
import { ClassNameMap } from '@material-ui/styles/withStyles'
5+
6+
export const hoverWorkaround: PropInjector<{
7+
ref: Ref<any>
8+
classes: ClassNameMap<'_modalRoot' | 'paper'>
9+
className: string
10+
style: CSSProperties
11+
}>

‎index.d.ts‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,39 @@
1-
declare module 'material-ui-popup-state'
1+
/* eslint-env browser */
2+
3+
import * as React from 'react'
4+
5+
import {
6+
initCoreState,
7+
createPopupState,
8+
anchorRef,
9+
bindTrigger,
10+
bindToggle,
11+
bindHover,
12+
bindMenu,
13+
bindPopover,
14+
bindPopper,
15+
Variant,
16+
CoreState,
17+
PopupState as InjectedProps,
18+
} from './core'
19+
20+
export {
21+
anchorRef,
22+
bindTrigger,
23+
bindToggle,
24+
bindHover,
25+
bindMenu,
26+
bindPopover,
27+
bindPopper,
28+
Variant,
29+
InjectedProps,
30+
}
31+
32+
export type Props = {
33+
popupId?: string
34+
children: (props: InjectedProps) => React.ReactNode | null | undefined
35+
variant: Variant
36+
parentPopupState?: InjectedProps | null | undefined
37+
}
38+
39+
export default class PopupState extends React.Component<Props, CoreState> {}

‎package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"test:watch": "cross-env NODE_ENV=test BABEL_ENV=test mocha --watch $npm_package_config_mocha",
2020
"test:debug": "cross-env NODE_ENV=test BABEL_ENV=test mocha --inspect-brk $npm_package_config_mocha",
2121
"codecov": "nyc report --reporter=text-lcov > coverage.lcov; codecov",
22-
"prepublishOnly": "npm run clean && npm run prettier:check && npm run lint && flow && npm test && npm run build",
22+
"prepublishOnly": "npm run clean && npm run prettier:check && npm run lint && flow && tsc && npm test && npm run build",
2323
"open:coverage": "open coverage/lcov-report/index.html",
2424
"semantic-release": "semantic-release",
2525
"demo:dev": "webpack-dev-server",
@@ -29,7 +29,7 @@
2929
},
3030
"husky": {
3131
"hooks": {
32-
"pre-commit": "lint-staged && npm run lint && flow",
32+
"pre-commit": "lint-staged && npm run lint && flow && tsc",
3333
"commit-msg": "commitlint -e $GIT_PARAMS",
3434
"pre-push": "npm test"
3535
}
@@ -107,6 +107,8 @@
107107
"@jedwards1211/eslint-config-react": "^4.0.0",
108108
"@material-ui/core": "^4.0.2",
109109
"@material-ui/icons": "^4.0.1",
110+
"@types/classnames": "^2.2.9",
111+
"@types/prop-types": "^15.7.3",
110112
"babel-eslint": "^10.0.1",
111113
"babel-loader": "^8.0.5",
112114
"babel-plugin-istanbul": "^5.1.0",
@@ -140,12 +142,14 @@
140142
"rimraf": "^2.6.0",
141143
"semantic-release": "^15.13.3",
142144
"sinon": "^6.1.4",
145+
"typescript": "^3.7.3",
143146
"webpack": "^4.29.3",
144147
"webpack-cli": "^3.2.3",
145148
"webpack-dev-server": "^3.1.14"
146149
},
147150
"dependencies": {
148151
"@babel/runtime": "^7.1.5",
152+
"@material-ui/types": "^4.1.1",
149153
"classnames": "^2.2.6",
150154
"prop-types": "^15.0.0"
151155
},

‎tsconfig.json‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
{
2+
"compilerOptions": {
3+
/* Basic Options */
4+
// "incremental": true, /* Enable incremental compilation */
5+
"target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
6+
"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
7+
// "lib": [], /* Specify library files to be included in the compilation. */
8+
// "allowJs": true, /* Allow javascript files to be compiled. */
9+
// "checkJs": true, /* Report errors in .js files. */
10+
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
11+
// "declaration": true, /* Generates corresponding '.d.ts' file. */
12+
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
13+
// "sourceMap": true, /* Generates corresponding '.map' file. */
14+
// "outFile": "./", /* Concatenate and emit output to single file. */
15+
// "outDir": "./", /* Redirect output structure to the directory. */
16+
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
17+
// "composite": true, /* Enable project compilation */
18+
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
19+
// "removeComments": true, /* Do not emit comments to output. */
20+
"noEmit": true /* Do not emit outputs. */,
21+
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
22+
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
23+
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
24+
25+
/* Strict Type-Checking Options */
26+
"strict": true /* Enable all strict type-checking options. */,
27+
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
28+
// "strictNullChecks": true, /* Enable strict null checks. */
29+
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
30+
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
31+
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
32+
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
33+
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
34+
35+
/* Additional Checks */
36+
// "noUnusedLocals": true, /* Report errors on unused locals. */
37+
// "noUnusedParameters": true, /* Report errors on unused parameters. */
38+
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
39+
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
40+
41+
/* Module Resolution Options */
42+
// "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
43+
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
44+
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
45+
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
46+
// "typeRoots": [], /* List of folders to include type definitions from. */
47+
// "types": [], /* Type declaration files to be included in compilation. */
48+
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
49+
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
50+
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
51+
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
52+
53+
/* Source Map Options */
54+
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
55+
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
56+
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
57+
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
58+
59+
/* Experimental Options */
60+
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
61+
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
62+
63+
/* Advanced Options */
64+
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
65+
}
66+
}

0 commit comments

Comments
 (0)