From 47c0fde63b70d932779acfa74ba5eb952402a6ad Mon Sep 17 00:00:00 2001 From: Vu Tran Date: Wed, 16 Aug 2017 21:29:03 -0700 Subject: [PATCH] update ts defintiions --- index.d.ts | 105 ---------------------------- other/TYPESCRIPT_USAGE.md | 5 ++ package-scripts.js | 4 +- package.json | 142 +++++++++++++++++++------------------- test/basic.test.tsx | 75 ++++++++++++++++++++ tsconfig.json | 5 ++ typings/index.d.ts | 103 +++++++++++++++++++++++++++ 7 files changed, 263 insertions(+), 176 deletions(-) delete mode 100644 index.d.ts create mode 100644 other/TYPESCRIPT_USAGE.md create mode 100644 test/basic.test.tsx create mode 100644 tsconfig.json create mode 100644 typings/index.d.ts diff --git a/index.d.ts b/index.d.ts deleted file mode 100644 index 1e952f0c8..000000000 --- a/index.d.ts +++ /dev/null @@ -1,105 +0,0 @@ -declare namespace Downshift { - interface Props { - children: ChildrenFunction; - defaultHighlightedIndex?: number; - defaultSelectedItem?: any; - defaultInputValue?: string; - defaultIsOpen?: boolean; - getA11yStatusMessage?: (options: A11StatusMessageOptions) => any; - itemToString?: (item: any) => string; - onChange?: (options: ChangeOptions) => void; - onStateChange?: (options: StateChangeOptions) => void; - onClick?: Function; - selectedItem?: any; - isOpen?: boolean; - inputValue?: string; - highlightedIndex?: number; - } - - interface A11StatusMessageOptions { - highlightedIndex: number; - highlightedValue: any; - inputValue: string; - isOpen: boolean; - itemToString: (item: any) => string; - previousResultCount: number; - resultCount: number; - selectedItem: any; - } - - interface ChangeOptions { - selectedItem: any; - previousItem: any; - } - - interface StateChangeOptions { - highlightedIndex: number; - inputValue: string; - isOpen: boolean; - selectedItem: any; - } - - interface GetRootPropsOptions { - refKey: string; - } - - interface GetInputPropsOptions extends React.HTMLProps { } - - interface GetLabelPropsOptions extends React.HTMLProps { } - - interface GetButtonPropsOptions extends React.HTMLProps { - // actions - clearSelection: () => void; - closeMenu: () => void; - openMenu: () => void; - selectHighlightedItem: () => void; - selectItem: (item: any) => void; - selectItemAtIndex: (index: number) => void; - setHighlightedIndex: (index: number) => void; - toggleMenu: (state: boolean) => void; - - // state - highlightedIndex: number; - inputValue: string; - isOpen: boolean; - selectedItem: any; - } - - interface GetItemPropsOptions { - index: number; - item: any; - } - - interface ControllerStateAndHelpers { - // prop getters - getRootProps: (options: GetRootPropsOptions) => any; - getButtonProps: (options: GetButtonPropsOptions) => any; - getLabelProps: (options: GetLabelPropsOptions) => any; - getInputProps: (options: GetInputPropsOptions) => any; - getItemProps: (options: GetItemPropsOptions) => any; - - // actions - openMenu: () => void; - closeMenu: () => void; - toggleMenu: () => void; - selectItem: (item: any) => void; - selectItemAtIndex: (index: number) => void; - selectHighlightedItem: (index: number) => void; - setHighlightedItem: (index: number) => void; - clearSelection: () => void; - - // state - highlightedIndex: number; - inputValue: string; - isOpen: boolean; - selectedItem: any; - } - - type ChildrenFunction = (options: ControllerStateAndHelpers) => React.ReactNode; - interface Downshift extends React.ComponentClass { } -} - -declare module 'downshift' { - const Downshift: Downshift.Downshift; - export default Downshift; -} \ No newline at end of file diff --git a/other/TYPESCRIPT_USAGE.md b/other/TYPESCRIPT_USAGE.md new file mode 100644 index 000000000..bf7f98270 --- /dev/null +++ b/other/TYPESCRIPT_USAGE.md @@ -0,0 +1,5 @@ +# Typescript Usage + +The current bundled Typescript definitions are incomplete and based around the needs of the developers who contributed them. + +Pull requests to improve them are welcome and appreciated. If you've never contributed to open source before, then you may find [this free video course](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) helpful. diff --git a/package-scripts.js b/package-scripts.js index 1a190e847..b7abc103e 100644 --- a/package-scripts.js +++ b/package-scripts.js @@ -20,8 +20,10 @@ module.exports = { }, }, test: { - default: crossEnv('NODE_ENV=test jest --coverage'), + default: series.nps('test.jest', 'test.ts'), + jest: crossEnv('NODE_ENV=test jest --coverage'), update: crossEnv('NODE_ENV=test jest --coverage --updateSnapshot'), + ts: 'tsc --noEmit -p ./tsconfig.json', watch: crossEnv('NODE_ENV=test jest --watch'), build: { description: 'validates the built files', diff --git a/package.json b/package.json index 4ed9562eb..6520ab9b0 100644 --- a/package.json +++ b/package.json @@ -1,72 +1,74 @@ { - "name": "downshift", - "version": "1.0.0-rc.1", - "description": "A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete components", - "main": "dist/downshift.cjs.js", - "jsnext:main": "dist/downshift.es.js", - "module": "dist/downshift.es.js", - "scripts": { - "start": "nps", - "test": "nps test", - "precommit": "lint-staged && opt --in pre-commit --exec \"npm start validate\"" - }, - "files": ["dist"], - "keywords": [], - "author": "Kent C. Dodds (http://kentcdodds.com/)", - "license": "MIT", - "peerDependencies": { - "react": ">=15", - "prop-types": ">=15" - }, - "devDependencies": { - "@storybook/react": "^3.2.3", - "all-contributors-cli": "^4.3.0", - "babel-cli": "^6.24.1", - "babel-jest": "^20.0.3", - "babel-plugin-external-helpers": "^6.22.0", - "babel-plugin-transform-class-properties": "^6.24.1", - "babel-plugin-transform-inline-environment-variables": "^0.1.1", - "babel-plugin-transform-object-rest-spread": "^6.23.0", - "babel-plugin-transform-react-jsx": "^6.24.1", - "babel-preset-env": "^1.6.0", - "babel-preset-react": "^6.24.1", - "babel-register": "^6.24.1", - "enzyme": "^2.9.1", - "enzyme-to-json": "^1.5.1", - "eslint": "^4.2.0", - "eslint-config-kentcdodds": "^12.4.2", - "husky": "^0.14.3", - "jest": "^20.0.4", - "lint-staged": "^4.0.1", - "nps": "^5.4.0", - "nps-utils": "^1.2.0", - "opt-cli": "^1.5.1", - "preact": "^8.2.1", - "prettier-eslint-cli": "^4.1.1", - "prop-types": "^15.5.10", - "react": "^15.6.1", - "react-dom": "^15.6.1", - "react-test-renderer": "^15.6.1", - "rollup": "^0.45.2", - "rollup-plugin-alias": "^1.3.1", - "rollup-plugin-babel": "^2.7.1", - "rollup-plugin-commonjs": "^8.1.0", - "rollup-plugin-json": "^2.3.0", - "rollup-plugin-node-resolve": "^3.0.0", - "rollup-plugin-uglify": "^2.0.1" - }, - "lint-staged": { - "*.js": [ - "prettier-eslint --write --no-semi --single-quote --trailing-comma=all --no-bracket-spacing", - "git add" - ] - }, - "repository": { - "type": "git", - "url": "https://github.com/paypal/downshift.git" - }, - "bugs": { - "url": "https://github.com/paypal/downshift/issues" - }, - "homepage": "https://github.com/paypal/downshift#readme" + "name": "downshift", + "version": "1.0.0-rc.1", + "description": "A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete components", + "main": "dist/downshift.cjs.js", + "jsnext:main": "dist/downshift.es.js", + "module": "dist/downshift.es.js", + "typings": "typings/index.d.ts", + "scripts": { + "start": "nps", + "test": "nps test", + "precommit": "lint-staged && opt --in pre-commit --exec \"npm start validate\"" + }, + "files": ["dist"], + "keywords": [], + "author": "Kent C. Dodds (http://kentcdodds.com/)", + "license": "MIT", + "peerDependencies": { + "react": ">=15", + "prop-types": ">=15" + }, + "devDependencies": { + "@storybook/react": "^3.2.3", + "all-contributors-cli": "^4.3.0", + "babel-cli": "^6.24.1", + "babel-jest": "^20.0.3", + "babel-plugin-external-helpers": "^6.22.0", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-inline-environment-variables": "^0.1.1", + "babel-plugin-transform-object-rest-spread": "^6.23.0", + "babel-plugin-transform-react-jsx": "^6.24.1", + "babel-preset-env": "^1.6.0", + "babel-preset-react": "^6.24.1", + "babel-register": "^6.24.1", + "enzyme": "^2.9.1", + "enzyme-to-json": "^1.5.1", + "eslint": "^4.2.0", + "eslint-config-kentcdodds": "^12.4.2", + "husky": "^0.14.3", + "jest": "^20.0.4", + "lint-staged": "^4.0.1", + "nps": "^5.4.0", + "nps-utils": "^1.2.0", + "opt-cli": "^1.5.1", + "preact": "^8.2.1", + "prettier-eslint-cli": "^4.1.1", + "prop-types": "^15.5.10", + "react": "^15.6.1", + "react-dom": "^15.6.1", + "react-test-renderer": "^15.6.1", + "rollup": "^0.45.2", + "rollup-plugin-alias": "^1.3.1", + "rollup-plugin-babel": "^2.7.1", + "rollup-plugin-commonjs": "^8.1.0", + "rollup-plugin-json": "^2.3.0", + "rollup-plugin-node-resolve": "^3.0.0", + "rollup-plugin-uglify": "^2.0.1", + "typescript": "^2.4.2" + }, + "lint-staged": { + "*.js": [ + "prettier-eslint --write --no-semi --single-quote --trailing-comma=all --no-bracket-spacing", + "git add" + ] + }, + "repository": { + "type": "git", + "url": "https://github.com/paypal/downshift.git" + }, + "bugs": { + "url": "https://github.com/paypal/downshift/issues" + }, + "homepage": "https://github.com/paypal/downshift#readme" } diff --git a/test/basic.test.tsx b/test/basic.test.tsx new file mode 100644 index 000000000..1d47d0269 --- /dev/null +++ b/test/basic.test.tsx @@ -0,0 +1,75 @@ +import * as React from 'react'; +import Downshift, { ChangeOptions } from '../'; + +interface Props { } + +interface State { + items: Array; +} + +export default class App extends React.Component { + state: State = { + items: ['apple', 'orange', 'carrot'], + }; + + onChange = ({ selectedItem, previousItem }: ChangeOptions) => { + console.log('selectedItem', selectedItem); + console.log('previousItem', previousItem); + }; + + render() { + const items = this.state.items; + + return ( + + {({ + getInputProps, + getItemProps, + isOpen, + inputValue, + selectedItem, + highlightedIndex, + }) => +
+ + {isOpen + ?
+ {items + .filter( + (i: any) => + !inputValue || + i + .toLowerCase() + .includes( + inputValue.toLowerCase() + ) + ) + .map((item: any, index: number) => +
+ {item} +
+ )} +
+ : null} +
} + + ); + } +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 000000000..f06b6ff42 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,5 @@ +{ + "compilerOptions": { + "jsx": "react" + } +} \ No newline at end of file diff --git a/typings/index.d.ts b/typings/index.d.ts new file mode 100644 index 000000000..8a5437818 --- /dev/null +++ b/typings/index.d.ts @@ -0,0 +1,103 @@ +import * as React from 'react'; + +export interface DownshiftProps { + children: ChildrenFunction; + defaultHighlightedIndex?: number; + defaultSelectedItem?: any; + defaultInputValue?: string; + defaultIsOpen?: boolean; + getA11yStatusMessage?: (options: A11StatusMessageOptions) => any; + itemToString?: (item: any) => string; + onChange?: (options: ChangeOptions) => void; + onStateChange?: (options: StateChangeOptions) => void; + onClick?: Function; + selectedItem?: any; + isOpen?: boolean; + inputValue?: string; + highlightedIndex?: number; +} + +export interface A11StatusMessageOptions { + highlightedIndex: number; + highlightedValue: any; + inputValue: string; + isOpen: boolean; + itemToString: (item: any) => string; + previousResultCount: number; + resultCount: number; + selectedItem: any; +} + +export interface ChangeOptions { + selectedItem: any; + previousItem: any; +} + +export interface StateChangeOptions { + highlightedIndex: number; + inputValue: string; + isOpen: boolean; + selectedItem: any; +} + +export interface GetRootPropsOptions { + refKey: string; +} + +export interface GetInputPropsOptions extends React.HTMLProps { } + +export interface GetLabelPropsOptions extends React.HTMLProps { } + +export interface GetButtonPropsOptions extends React.HTMLProps { + // actions + clearSelection: () => void; + closeMenu: () => void; + openMenu: () => void; + selectHighlightedItem: () => void; + selectItem: (item: any) => void; + selectItemAtIndex: (index: number) => void; + setHighlightedIndex: (index: number) => void; + toggleMenu: (state: boolean) => void; + + // state + highlightedIndex: number; + inputValue: string; + isOpen: boolean; + selectedItem: any; +} + +export interface GetItemPropsOptions { + index: number; + item: any; +} + +export interface ControllerStateAndHelpers { + // prop getters + getRootProps: (options: GetRootPropsOptions) => any; + getButtonProps: (options: GetButtonPropsOptions) => any; + getLabelProps: (options: GetLabelPropsOptions) => any; + getInputProps: (options: GetInputPropsOptions) => any; + getItemProps: (options: GetItemPropsOptions) => any; + + // actions + openMenu: () => void; + closeMenu: () => void; + toggleMenu: () => void; + selectItem: (item: any) => void; + selectItemAtIndex: (index: number) => void; + selectHighlightedItem: (index: number) => void; + setHighlightedItem: (index: number) => void; + clearSelection: () => void; + + // state + highlightedIndex: number; + inputValue: string; + isOpen: boolean; + selectedItem: any; +} + +export type ChildrenFunction = (options: ControllerStateAndHelpers) => React.ReactNode; +export type DownshiftInterface = React.ComponentClass; + +declare const Downshift: DownshiftInterface; +export default Downshift; \ No newline at end of file