diff --git a/.babelrc b/.babelrc index 940dbdd..3bf44b0 100644 --- a/.babelrc +++ b/.babelrc @@ -1,6 +1,7 @@ { "presets": ["@babel/preset-react", "@babel/env"], "plugins": [ + "@babel/plugin-transform-flow-strip-types", "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-object-rest-spread", "@babel/plugin-transform-runtime" diff --git a/package.json b/package.json index 1f75f6c..537c9ac 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@babel/core": "^7.4.3", "@babel/plugin-proposal-class-properties": "^7.4.0", "@babel/plugin-proposal-object-rest-spread": "^7.4.3", + "@babel/plugin-transform-flow-strip-types": "^7.4.4", "@babel/plugin-transform-runtime": "^7.4.3", "@babel/preset-env": "^7.4.3", "@babel/preset-react": "^7.0.0", diff --git a/src/OptimisticToggle.js b/src/OptimisticToggle.js index 91ec309..37a12c3 100644 --- a/src/OptimisticToggle.js +++ b/src/OptimisticToggle.js @@ -1,22 +1,36 @@ -import React, { Component } from 'react'; +// @flow +import React, { Component, SyntheticEvent } from 'react'; const noop = () => {}; -class OptimisticToggle extends Component { - static defaultProps = { +type Props = { + /** Initial Value of the Checkbox */ + initialValue?: boolean, + /** On-change handler that returns a Promise Object */ + action?: (toggleState: boolean, event: SyntheticEvent) => Promise, + /** UI Component that has been passed as children */ + children?: React.ReactNode, +}; + +type State = { + optimisticState: boolean, +}; + +class OptimisticToggle extends Component { + static defaultProps: Props = { initialValue: false, action: noop, children: noop, }; - currentPromise = null; + currentPromise: ?Promise = null; failedCount = 0; state = { optimisticState: this.props.initialValue, }; - handleToggle = event => { + handleToggle = (event: SyntheticEvent) => { const newToggled = !this.state.optimisticState; this.setState({ optimisticState: newToggled, diff --git a/src/useOptimisticToggle.js b/src/useOptimisticToggle.js index 27eaf84..f91d295 100644 --- a/src/useOptimisticToggle.js +++ b/src/useOptimisticToggle.js @@ -1,13 +1,20 @@ -import { useState, useRef } from 'react'; +import { useState, useRef, SyntheticEvent } from 'react'; const noop = () => {}; -function useOptimisticToggle({ initialValue = false, action = noop }) { +type Props = { + /** Initial Value of the Checkbox */ + initialValue?: boolean, + /** On-change handler that returns a Promise Object */ + action?: (toggleState: boolean, event: SyntheticEvent) => Promise, +}; + +function useOptimisticToggle({ initialValue = false, action = noop }: Props) { const [stateOptimistic, setStateOptimistic] = useState(initialValue); const refCurrentPromise = useRef(); const refFailedCount = useRef(0); - function handleToggle(event) { + function handleToggle(event: SyntheticEvent) { const newToggled = !stateOptimistic; setStateOptimistic(newToggled); diff --git a/yarn.lock b/yarn.lock index a370ad3..b53d435 100644 --- a/yarn.lock +++ b/yarn.lock @@ -371,6 +371,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-syntax-flow@^7.2.0": + version "7.2.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.2.0.tgz#a765f061f803bc48f240c26f8747faf97c26bf7c" + integrity sha512-r6YMuZDWLtLlu0kqIim5o/3TNRAlWb073HwT3e2nKf9I8IIvOggPrnILYPsrrKilmn/mYEMCf/Z07w3yQJF6dg== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-json-strings@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz#72bd13f6ffe1d25938129d2a186b11fd62951470" @@ -482,6 +489,14 @@ "@babel/helper-builder-binary-assignment-operator-visitor" "^7.1.0" "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-transform-flow-strip-types@^7.4.4": + version "7.4.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.4.4.tgz#d267a081f49a8705fc9146de0768c6b58dccd8f7" + integrity sha512-WyVedfeEIILYEaWGAUWzVNyqG4sfsNooMhXWsu/YzOvVGcsnPb5PguysjJqI3t3qiaYj0BR8T2f5njdjTGe44Q== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-flow" "^7.2.0" + "@babel/plugin-transform-for-of@^7.4.3": version "7.4.3" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.4.3.tgz#c36ff40d893f2b8352202a2558824f70cd75e9fe"