diff --git a/.size-snapshot.json b/.size-snapshot.json index 4a34c249..ea3af11c 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,18 +1,18 @@ { "dist/react-powerplug.umd.js": { - "bundled": 23769, - "minified": 9469, - "gzipped": 2596 + "bundled": 23707, + "minified": 9407, + "gzipped": 2594 }, "dist/react-powerplug.cjs.js": { - "bundled": 20833, - "minified": 10881, - "gzipped": 2485 + "bundled": 20771, + "minified": 10819, + "gzipped": 2483 }, "dist/react-powerplug.esm.js": { - "bundled": 20171, - "minified": 10321, - "gzipped": 2348, + "bundled": 20109, + "minified": 10259, + "gzipped": 2344, "treeshaked": { "rollup": { "code": 365, diff --git a/README.md b/README.md index 2edc6d04..59a336d4 100644 --- a/README.md +++ b/README.md @@ -79,11 +79,11 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents' | **\** | `{ initial, onChange }` | `{ values, add, clear, remove, has }` | [:point_down:](#set) [:books:](docs/components/Set.md) | | **\** | `{ initial, onChange }` | `{ list, first, last, push, pull, sort, set }` | [:point_down:](#list) [:books:](docs/components/List.md) | |
FEEDBACK CONTAINERS
| -| **\** | `{ onChange }` | `{ isHovered, bind }` | [:point_down:](#hover) [:books:](docs/components/Hover.md) | -| **\** | `{ onChange }` | `{ isActive, bind }` | [:point_down:](#active) [:books:](docs/components/Active.md) | -| **\** | `{ onChange }` | `{ isFocused, bind }` | [:point_down:](#focus) [:books:](docs/components/Focus.md) | -| **\** | `{ onChange }` | `{ isTouched, bind }` | [:point_down:](#touch) [:books:](docs/components/Touch.md) | -| **\** | `{ onChange }` | `{ isFocused, blur, bind }` | [:point_down:](#focusmanager) [:books:](docs/components/FocusManager.md) | +| **\** | `{ onChange }` | `{ hovered, bind }` | [:point_down:](#hover) [:books:](docs/components/Hover.md) | +| **\** | `{ onChange }` | `{ active, bind }` | [:point_down:](#active) [:books:](docs/components/Active.md) | +| **\** | `{ onChange }` | `{ focused, bind }` | [:point_down:](#focus) [:books:](docs/components/Focus.md) | +| **\** | `{ onChange }` | `{ touched, bind }` | [:point_down:](#touch) [:books:](docs/components/Touch.md) | +| **\** | `{ onChange }` | `{ focused, blur, bind }` | [:point_down:](#focusmanager) [:books:](docs/components/FocusManager.md) | |
FORM CONTAINERS
| | **\** | `{ initial, onChange }` | `{ set, value, bind }` | [:point_down:](#input) [:books:](docs/components/Input.md) | | **\
** | `{ initial, onChange }` | `{ input, values }` | [:point_down:](#form) [:books:](docs/components/Form.md) | @@ -209,9 +209,9 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents' ```jsx - {({ isHovered, bind }) => ( + {({ hovered, bind }) => (
- You are {isHovered ? 'hovering' : 'not hovering'} this div. + You are {hovered ? 'hovering' : 'not hovering'} this div.
)} @@ -221,9 +221,9 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents' ```jsx - {({ isActive, bind }) => ( + {({ active, bind }) => (
- You are {isActive ? 'clicking' : 'not clicking'} this div. + You are {active ? 'clicking' : 'not clicking'} this div.
)} @@ -233,9 +233,9 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents' ```jsx - {({ isTouched, bind }) => ( + {({ touched, bind }) => (
- You are {isTouched ? 'touching' : 'not touching'} this div. + You are {touched ? 'touching' : 'not touching'} this div.
)} @@ -245,10 +245,10 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents' ```jsx - {({ isFocused, bind }) => ( + {({ focused, bind }) => (
-
You are {isFocused ? 'focusing' : 'not focusing'} input.
+
You are {focused ? 'focusing' : 'not focusing'} input.
)} diff --git a/docs/components/Active.md b/docs/components/Active.md index bb936de5..ecdf72e1 100644 --- a/docs/components/Active.md +++ b/docs/components/Active.md @@ -9,9 +9,9 @@ import { Active } from 'react-powerplug' ```jsx - {({ isActive, bind }) => ( + {({ active, bind }) => (
- You are {isActive ? 'clicking' : 'not clicking'} this div. + You are {active ? 'clicking' : 'not clicking'} this div.
)} @@ -20,13 +20,13 @@ import { Active } from 'react-powerplug' ## Active Props **onChange** _(optional)_ -The onChange event of the Active is called whenever the isActive state changes. +The onChange event of the Active is called whenever the active state changes. ## Active Children Props -TL;DR: `{ isActive, bind }` +TL;DR: `{ active, bind }` -**isActive** +**active** `boolean` True if is activated (being clicked) the binded element diff --git a/docs/components/Focus.md b/docs/components/Focus.md index 60550268..d592582e 100644 --- a/docs/components/Focus.md +++ b/docs/components/Focus.md @@ -9,10 +9,10 @@ import { Focus } from 'react-powerplug' ```jsx - {({ isFocused, bind }) => ( + {({ focused, bind }) => (
-
You are {isFocused ? 'focusing' : 'not focusing'} the input.
+
You are {focused ? 'focusing' : 'not focusing'} the input.
)} @@ -21,13 +21,13 @@ import { Focus } from 'react-powerplug' ## Focus Props **onChange** _(optional)_ -The onChange event of the Focus is called whenever the isFocused state changes. +The onChange event of the Focus is called whenever the focused state changes. ## Focus Children Props -TL;DR: `{ isFocused, bind }` +TL;DR: `{ focused, bind }` -**isFocused** +**focused** `boolean` True if is focusing the binded element diff --git a/docs/components/Hover.md b/docs/components/Hover.md index e362899e..5c6f316c 100644 --- a/docs/components/Hover.md +++ b/docs/components/Hover.md @@ -9,9 +9,9 @@ import { Hover } from 'react-powerplug' ```jsx - {({ isHovered, bind }) => ( + {({ hovered, bind }) => (
- You are {isHovered ? 'hovering' : 'not hovering'} this div. + You are {hovered ? 'hovering' : 'not hovering'} this div.
)} @@ -20,13 +20,13 @@ import { Hover } from 'react-powerplug' ## Hover Props **onChange** _(optional)_ -The onChange event of the Hover is called whenever the isHovered state changes. +The onChange event of the Hover is called whenever the hovered state changes. ## Hover Children Props -TL;DR: `{ isHovered, bind }` +TL;DR: `{ hovered, bind }` -**isHovered** +**hovered** `boolean` True if is hovering the binded element diff --git a/docs/components/Touch.md b/docs/components/Touch.md index fdc6d051..95885c31 100644 --- a/docs/components/Touch.md +++ b/docs/components/Touch.md @@ -8,9 +8,9 @@ import { Touch } from 'react-powerplug' ```jsx - {({ isTouched, bind }) => ( + {({ touched, bind }) => (
- You are {isTouched ? 'touching' : 'not touching'} this div. + You are {touched ? 'touching' : 'not touching'} this div.
)} @@ -19,13 +19,13 @@ import { Touch } from 'react-powerplug' ## Touch Props **onChange** _(optional)_ -The onChange event of the Touch is called whenever the isTouched state changes. +The onChange event of the Touch is called whenever the touched state changes. ## Touch Children Props -TL;DR: `{ isTouched, bind }` +TL;DR: `{ touched, bind }` -**isTouched** +**touched** `boolean` True if is touching the binded element diff --git a/docs/utils/composeEvents.md b/docs/utils/composeEvents.md index d7ac58e5..a3adb487 100644 --- a/docs/utils/composeEvents.md +++ b/docs/utils/composeEvents.md @@ -7,11 +7,11 @@ import { Hover, composeEvents } from 'react-powerplug' const HoveredDiv = ({ children, onMouseEnter, onMouseLeave, ...restProps }) => ( - {({ isHover, bindHover }) => ( + {({ hovered, bindHover }) => (
)} diff --git a/src/components/Active.js b/src/components/Active.js index 3f186e12..bbcfc875 100644 --- a/src/components/Active.js +++ b/src/components/Active.js @@ -5,15 +5,15 @@ import onChangeProp from '../utils/onChangeProp' const Active = ({ onChange, ...props }) => ( {({ state, setState }) => renderProps(props, { - isActive: state.isActive, + active: state.active, bind: { - onMouseDown: () => setState({ isActive: true }), - onMouseUp: () => setState({ isActive: false }), + onMouseDown: () => setState({ active: true }), + onMouseUp: () => setState({ active: false }), }, }) } diff --git a/src/components/Focus.js b/src/components/Focus.js index 3892dd2b..64d480b6 100644 --- a/src/components/Focus.js +++ b/src/components/Focus.js @@ -5,15 +5,15 @@ import onChangeProp from '../utils/onChangeProp' const Focus = ({ onChange, ...props }) => ( {({ state, setState }) => renderProps(props, { - isFocused: state.isFocused, + focused: state.focused, bind: { - onFocus: () => setState({ isFocused: true }), - onBlur: () => setState({ isFocused: false }), + onFocus: () => setState({ focused: true }), + onBlur: () => setState({ focused: false }), }, }) } diff --git a/src/components/FocusManager.js b/src/components/FocusManager.js index 4917c658..590401e1 100644 --- a/src/components/FocusManager.js +++ b/src/components/FocusManager.js @@ -7,24 +7,24 @@ const FocusManager = ({ onChange, ...props }) => { let canBlur = true return ( {({ state, setState }) => renderProps(props, { - isFocused: state.isFocused, + focused: state.focused, blur: () => { - setState({ isFocused: false }) + setState({ focused: false }) }, bind: { tabIndex: -1, onBlur: () => { if (canBlur) { - setState({ isFocused: false }) + setState({ focused: false }) } }, onFocus: () => { - setState({ isFocused: true }) + setState({ focused: true }) }, onMouseDown: () => { canBlur = false diff --git a/src/components/Hover.js b/src/components/Hover.js index 046a9dfa..95caacff 100644 --- a/src/components/Hover.js +++ b/src/components/Hover.js @@ -5,15 +5,15 @@ import onChangeProp from '../utils/onChangeProp' const Hover = ({ onChange, ...props }) => ( {({ state, setState }) => renderProps(props, { - isHovered: state.isHovered, + hovered: state.hovered, bind: { - onMouseEnter: () => setState({ isHovered: true }), - onMouseLeave: () => setState({ isHovered: false }), + onMouseEnter: () => setState({ hovered: true }), + onMouseLeave: () => setState({ hovered: false }), }, }) } diff --git a/src/components/Touch.js b/src/components/Touch.js index 47e4c6bc..6583ac1a 100644 --- a/src/components/Touch.js +++ b/src/components/Touch.js @@ -5,15 +5,15 @@ import onChangeProp from '../utils/onChangeProp' const Touch = ({ onChange, ...props }) => ( {({ state, setState }) => renderProps(props, { - isTouched: state.isTouched, + touched: state.touched, bind: { - onTouchStart: () => setState({ isTouched: true }), - onTouchEnd: () => setState({ isTouched: false }), + onTouchStart: () => setState({ touched: true }), + onTouchEnd: () => setState({ touched: false }), }, }) } diff --git a/src/index.js.flow b/src/index.js.flow index 7e981344..48c288fb 100644 --- a/src/index.js.flow +++ b/src/index.js.flow @@ -8,10 +8,10 @@ type Updater = (value: ((updater: T) => T) | T) => void /* Active */ -type ActiveChange = (isActive: boolean) => void +type ActiveChange = (active: boolean) => void type ActiveRender = ({| - isActive: boolean, + active: boolean, bind: {| onMouseDown: () => void, onMouseUp: () => void |}, |}) => React.Node @@ -43,10 +43,10 @@ declare export var Counter: React.ComponentType< /* Focus */ -type FocusChange = (isFocused: boolean) => void +type FocusChange = (focused: boolean) => void type FocusRender = ({| - isFocused: boolean, + focused: boolean, bind: {| onFocus: () => void, onBlur: () => void |}, |}) => React.Node @@ -57,10 +57,10 @@ declare export var Focus: React.ComponentType< /* FocusManager */ -type FocusManagerChange = (isFocused: boolean) => void +type FocusManagerChange = (focused: boolean) => void type FocusManagerRender = ({| - isFocused: boolean, + focused: boolean, blur: () => void, bind: {| tabIndex: number, onFocus: () => void, onBlur: () => void |}, |}) => React.Node @@ -99,10 +99,10 @@ declare export class Form extends React.Component< /* Hover */ -type HoverChange = (isHovered: boolean) => void +type HoverChange = (hovered: boolean) => void type HoverRender = ({| - isHovered: boolean, + hovered: boolean, bind: {| onMouseEnter: () => void, onMouseLeave: () => void |}, |}) => React.Node @@ -243,10 +243,10 @@ declare export var Toggle: React.ComponentType< /* Touch */ -type TouchChange = (isTouched: boolean) => void +type TouchChange = (touched: boolean) => void type TouchRender = ({| - isTouched: boolean, + touched: boolean, bind: {| onTouchStart: () => void, onTouchEnd: () => void |}, |}) => React.Node diff --git a/tests/components/Active.test.js b/tests/components/Active.test.js index 3092cf2e..5a78d050 100644 --- a/tests/components/Active.test.js +++ b/tests/components/Active.test.js @@ -8,14 +8,14 @@ test('', () => { TestRenderer.create() expect(renderFn).toBeCalledTimes(1) - expect(renderFn).lastCalledWith(expect.objectContaining({ isActive: false })) + expect(renderFn).lastCalledWith(expect.objectContaining({ active: false })) lastCallArg(renderFn).bind.onMouseDown() expect(renderFn).toBeCalledTimes(2) - expect(renderFn).lastCalledWith(expect.objectContaining({ isActive: true })) + expect(renderFn).lastCalledWith(expect.objectContaining({ active: true })) lastCallArg(renderFn).bind.onMouseUp() - expect(renderFn).lastCalledWith(expect.objectContaining({ isActive: false })) + expect(renderFn).lastCalledWith(expect.objectContaining({ active: false })) }) test('', () => { diff --git a/tests/components/Focus.test.js b/tests/components/Focus.test.js index bbdca55f..fec6fb3c 100644 --- a/tests/components/Focus.test.js +++ b/tests/components/Focus.test.js @@ -8,14 +8,14 @@ test('', () => { TestRenderer.create() expect(renderFn).toBeCalledTimes(1) - expect(renderFn).lastCalledWith(expect.objectContaining({ isFocused: false })) + expect(renderFn).lastCalledWith(expect.objectContaining({ focused: false })) lastCallArg(renderFn).bind.onFocus() expect(renderFn).toBeCalledTimes(2) - expect(renderFn).lastCalledWith(expect.objectContaining({ isFocused: true })) + expect(renderFn).lastCalledWith(expect.objectContaining({ focused: true })) lastCallArg(renderFn).bind.onBlur() - expect(renderFn).lastCalledWith(expect.objectContaining({ isFocused: false })) + expect(renderFn).lastCalledWith(expect.objectContaining({ focused: false })) }) test('', () => { diff --git a/tests/components/FocusManager.test.js b/tests/components/FocusManager.test.js index 39809e96..f78953dd 100644 --- a/tests/components/FocusManager.test.js +++ b/tests/components/FocusManager.test.js @@ -52,12 +52,12 @@ test('keep focus when click on menu', async () => { const style = { width: 100, height: 100 } const App = () => ( - {({ isFocused, bind }) => { - window.renderFn({ isFocused }) + {({ focused, bind }) => { + window.renderFn({ focused }) return ( <>
- {isFocused &&
} + {focused &&
} ) }} @@ -67,15 +67,15 @@ test('keep focus when click on menu', async () => { window.render() }) - expect(renderFn).lastCalledWith({ isFocused: false }) + expect(renderFn).lastCalledWith({ focused: false }) await page.click('#rect-1') - expect(renderFn).lastCalledWith({ isFocused: true }) + expect(renderFn).lastCalledWith({ focused: true }) await page.click('#rect-2') - expect(renderFn).lastCalledWith({ isFocused: true }) + expect(renderFn).lastCalledWith({ focused: true }) // click outside await page.mouse.click(200, 50) await delay(100) - expect(renderFn).lastCalledWith({ isFocused: false }) + expect(renderFn).lastCalledWith({ focused: false }) }) test('restore focus after calling blur on inner component', async () => { @@ -91,8 +91,8 @@ test('restore focus after calling blur on inner component', async () => { const App = () => ( - {({ isFocused, blur, bind }) => { - window.renderFn({ isFocused }) + {({ focused, blur, bind }) => { + window.renderFn({ focused }) const stopPropagation = e => e.stopPropagation() return ( <> @@ -114,14 +114,14 @@ test('restore focus after calling blur on inner component', async () => { window.render() }) - expect(renderFn).lastCalledWith({ isFocused: false }) + expect(renderFn).lastCalledWith({ focused: false }) await page.click('#outer') - expect(renderFn).lastCalledWith({ isFocused: true }) + expect(renderFn).lastCalledWith({ focused: true }) expect(onChangeFn).lastCalledWith(true) await page.click('#inner') - expect(renderFn).lastCalledWith({ isFocused: false }) + expect(renderFn).lastCalledWith({ focused: false }) expect(onChangeFn).lastCalledWith(false) await page.click('#outer') - expect(renderFn).lastCalledWith({ isFocused: true }) + expect(renderFn).lastCalledWith({ focused: true }) expect(onChangeFn).lastCalledWith(true) }) diff --git a/tests/components/Hover.test.js b/tests/components/Hover.test.js index 3cf3f7a7..1257612d 100644 --- a/tests/components/Hover.test.js +++ b/tests/components/Hover.test.js @@ -8,14 +8,14 @@ test('', () => { TestRenderer.create() expect(renderFn).toBeCalledTimes(1) - expect(renderFn).lastCalledWith(expect.objectContaining({ isHovered: false })) + expect(renderFn).lastCalledWith(expect.objectContaining({ hovered: false })) lastCallArg(renderFn).bind.onMouseEnter() expect(renderFn).toBeCalledTimes(2) - expect(renderFn).lastCalledWith(expect.objectContaining({ isHovered: true })) + expect(renderFn).lastCalledWith(expect.objectContaining({ hovered: true })) lastCallArg(renderFn).bind.onMouseLeave() - expect(renderFn).lastCalledWith(expect.objectContaining({ isHovered: false })) + expect(renderFn).lastCalledWith(expect.objectContaining({ hovered: false })) }) test('', () => { diff --git a/tests/components/Touch.test.js b/tests/components/Touch.test.js index dd297784..f5fdc3ec 100644 --- a/tests/components/Touch.test.js +++ b/tests/components/Touch.test.js @@ -8,13 +8,13 @@ test('', () => { TestRenderer.create() expect(renderFn).toBeCalledTimes(1) - expect(renderFn).lastCalledWith(expect.objectContaining({ isTouched: false })) + expect(renderFn).lastCalledWith(expect.objectContaining({ touched: false })) lastCallArg(renderFn).bind.onTouchStart() - expect(renderFn).lastCalledWith(expect.objectContaining({ isTouched: true })) + expect(renderFn).lastCalledWith(expect.objectContaining({ touched: true })) lastCallArg(renderFn).bind.onTouchEnd() - expect(renderFn).lastCalledWith(expect.objectContaining({ isTouched: false })) + expect(renderFn).lastCalledWith(expect.objectContaining({ touched: false })) }) test('', () => { diff --git a/tests/test_flow.js b/tests/test_flow.js index c6670807..c853e3b1 100644 --- a/tests/test_flow.js +++ b/tests/test_flow.js @@ -24,22 +24,22 @@ const noop = () => null /* Active */ { - const render = ({ isActive, bind }) => { - ;(isActive: boolean) + const render = ({ active, bind }) => { + ;(active: boolean) ;(bind.onMouseDown: Function) ;(bind.onMouseUp: Function) // $FlowFixMe - ;(isActive: number) + ;(active: number) // $FlowFixMe ;(bind.onMouseDown: number) // $FlowFixMe ;(bind.onMouseUp: number) return null } - const onChange = isActive => { - ;(isActive: boolean) + const onChange = active => { + ;(active: boolean) // $FlowFixMe - ;(isActive: number) + ;(active: number) } ;[ , @@ -153,22 +153,22 @@ const noop = () => null /* Focus */ { - const render = ({ isFocused, bind }) => { - ;(isFocused: boolean) + const render = ({ focused, bind }) => { + ;(focused: boolean) ;(bind.onFocus: Function) ;(bind.onBlur: Function) // $FlowFixMe - ;(isFocused: number) + ;(focused: number) // $FlowFixMe ;(bind.onFocus: number) // $FlowFixMe ;(bind.onBlur: number) return null } - const onChange = isFocused => { - ;(isFocused: boolean) + const onChange = focused => { + ;(focused: boolean) // $FlowFixMe - ;(isFocused: number) + ;(focused: number) } ;[ , @@ -182,23 +182,23 @@ const noop = () => null /* FocusManager */ { - const render = ({ isFocused, blur, bind }) => { - ;(isFocused: boolean) + const render = ({ focused, blur, bind }) => { + ;(focused: boolean) ;(blur: Function) ;(bind.onFocus: Function) ;(bind.onBlur: Function) // $FlowFixMe - ;(isFocused: number) + ;(focused: number) // $FlowFixMe ;(bind.onFocus: number) // $FlowFixMe ;(bind.onBlur: number) return null } - const onChange = isFocused => { - ;(isFocused: boolean) + const onChange = focused => { + ;(focused: boolean) // $FlowFixMe - ;(isFocused: number) + ;(focused: number) } ;[ , @@ -256,22 +256,22 @@ const noop = () => null /* Hover */ { - const render = ({ isHovered, bind }) => { - ;(isHovered: boolean) + const render = ({ hovered, bind }) => { + ;(hovered: boolean) ;(bind.onMouseEnter: Function) ;(bind.onMouseLeave: Function) // $FlowFixMe - ;(isHovered: number) + ;(hovered: number) // $FlowFixMe ;(bind.onMouseEnter: number) // $FlowFixMe ;(bind.onMouseLeave: number) return null } - const onChange = isHovered => { - ;(isHovered: boolean) + const onChange = hovered => { + ;(hovered: boolean) // $FlowFixMe - ;(isHovered: number) + ;(hovered: number) } ;[ , @@ -499,22 +499,22 @@ const noop = () => null /* Touch */ { - const render = ({ isTouched, bind }) => { - ;(isTouched: boolean) + const render = ({ touched, bind }) => { + ;(touched: boolean) ;(bind.onTouchStart: Function) ;(bind.onTouchEnd: Function) // $FlowFixMe - ;(isTouched: number) + ;(touched: number) // $FlowFixMe ;(bind.onTouchStart: number) // $FlowFixMe ;(bind.onTouchEnd: number) return null } - const onChange = isTouched => { - ;(isTouched: boolean) + const onChange = touched => { + ;(touched: boolean) // $FlowFixMe - ;(isTouched: number) + ;(touched: number) } ;[ ,