Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions .size-snapshot.json
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
26 changes: 13 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,11 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'
| **\<Set>** | `{ initial, onChange }` | `{ values, add, clear, remove, has }` | [:point_down:](#set) [:books:](docs/components/Set.md) |
| **\<List>** | `{ initial, onChange }` | `{ list, first, last, push, pull, sort, set }` | [:point_down:](#list) [:books:](docs/components/List.md) |
| <h6>FEEDBACK CONTAINERS</h6> |
| **\<Hover>** | `{ onChange }` | `{ isHovered, bind }` | [:point_down:](#hover) [:books:](docs/components/Hover.md) |
| **\<Active>** | `{ onChange }` | `{ isActive, bind }` | [:point_down:](#active) [:books:](docs/components/Active.md) |
| **\<Focus>** | `{ onChange }` | `{ isFocused, bind }` | [:point_down:](#focus) [:books:](docs/components/Focus.md) |
| **\<Touch>** | `{ onChange }` | `{ isTouched, bind }` | [:point_down:](#touch) [:books:](docs/components/Touch.md) |
| **\<FocusManager>** | `{ onChange }` | `{ isFocused, blur, bind }` | [:point_down:](#focusmanager) [:books:](docs/components/FocusManager.md) |
| **\<Hover>** | `{ onChange }` | `{ hovered, bind }` | [:point_down:](#hover) [:books:](docs/components/Hover.md) |
| **\<Active>** | `{ onChange }` | `{ active, bind }` | [:point_down:](#active) [:books:](docs/components/Active.md) |
| **\<Focus>** | `{ onChange }` | `{ focused, bind }` | [:point_down:](#focus) [:books:](docs/components/Focus.md) |
| **\<Touch>** | `{ onChange }` | `{ touched, bind }` | [:point_down:](#touch) [:books:](docs/components/Touch.md) |
| **\<FocusManager>** | `{ onChange }` | `{ focused, blur, bind }` | [:point_down:](#focusmanager) [:books:](docs/components/FocusManager.md) |
| <h6>FORM CONTAINERS</h6> |
| **\<Input>** | `{ initial, onChange }` | `{ set, value, bind }` | [:point_down:](#input) [:books:](docs/components/Input.md) |
| **\<Form>** | `{ initial, onChange }` | `{ input, values }` | [:point_down:](#form) [:books:](docs/components/Form.md) |
Expand Down Expand Up @@ -209,9 +209,9 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'

```jsx
<Hover>
{({ isHovered, bind }) => (
{({ hovered, bind }) => (
<div {...bind}>
You are {isHovered ? 'hovering' : 'not hovering'} this div.
You are {hovered ? 'hovering' : 'not hovering'} this div.
</div>
)}
</Hover>
Expand All @@ -221,9 +221,9 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'

```jsx
<Active>
{({ isActive, bind }) => (
{({ active, bind }) => (
<div {...bind}>
You are {isActive ? 'clicking' : 'not clicking'} this div.
You are {active ? 'clicking' : 'not clicking'} this div.
</div>
)}
</Active>
Expand All @@ -233,9 +233,9 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'

```jsx
<Touch>
{({ isTouched, bind }) => (
{({ touched, bind }) => (
<div {...bind}>
You are {isTouched ? 'touching' : 'not touching'} this div.
You are {touched ? 'touching' : 'not touching'} this div.
</div>
)}
</Touch>
Expand All @@ -245,10 +245,10 @@ import { Pagination, Tabs, Checkbox } from './MyDumbComponents'

```jsx
<Focus>
{({ isFocused, bind }) => (
{({ focused, bind }) => (
<div>
<input {...bind} placeholder="Focus me" />
<div>You are {isFocused ? 'focusing' : 'not focusing'} input.</div>
<div>You are {focused ? 'focusing' : 'not focusing'} input.</div>
</div>
)}
</Focus>
Expand Down
10 changes: 5 additions & 5 deletions docs/components/Active.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import { Active } from 'react-powerplug'

```jsx
<Active>
{({ isActive, bind }) => (
{({ active, bind }) => (
<div {...bind}>
You are {isActive ? 'clicking' : 'not clicking'} this div.
You are {active ? 'clicking' : 'not clicking'} this div.
</div>
)}
</Active>
Expand All @@ -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

Expand Down
10 changes: 5 additions & 5 deletions docs/components/Focus.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import { Focus } from 'react-powerplug'

```jsx
<Focus>
{({ isFocused, bind }) => (
{({ focused, bind }) => (
<div>
<input {...bind} placeholder="Focus me" />
<div>You are {isFocused ? 'focusing' : 'not focusing'} the input.</div>
<div>You are {focused ? 'focusing' : 'not focusing'} the input.</div>
</div>
)}
</Focus>
Expand All @@ -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

Expand Down
10 changes: 5 additions & 5 deletions docs/components/Hover.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import { Hover } from 'react-powerplug'

```jsx
<Hover>
{({ isHovered, bind }) => (
{({ hovered, bind }) => (
<div {...bind}>
You are {isHovered ? 'hovering' : 'not hovering'} this div.
You are {hovered ? 'hovering' : 'not hovering'} this div.
</div>
)}
</Hover>
Expand All @@ -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

Expand Down
10 changes: 5 additions & 5 deletions docs/components/Touch.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import { Touch } from 'react-powerplug'

```jsx
<Touch>
{({ isTouched, bind }) => (
{({ touched, bind }) => (
<div {...bind}>
You are {isTouched ? 'touching' : 'not touching'} this div.
You are {touched ? 'touching' : 'not touching'} this div.
</div>
)}
</Touch>
Expand All @@ -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

Expand Down
4 changes: 2 additions & 2 deletions docs/utils/composeEvents.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import { Hover, composeEvents } from 'react-powerplug'

const HoveredDiv = ({ children, onMouseEnter, onMouseLeave, ...restProps }) => (
<Hover>
{({ isHover, bindHover }) => (
{({ hovered, bindHover }) => (
<div
{...composeEvents({ onMouseEnter, onMouseLeave }, bindHover)}
{...restProps}
children={children(isHover)}
children={children(hovered)}
/>
)}
</Hover>
Expand Down
10 changes: 5 additions & 5 deletions src/components/Active.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ import onChangeProp from '../utils/onChangeProp'

const Active = ({ onChange, ...props }) => (
<State
initial={{ isActive: false }}
onChange={onChangeProp(onChange, 'isActive')}
initial={{ active: false }}
onChange={onChangeProp(onChange, 'active')}
>
{({ 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 }),
},
})
}
Expand Down
10 changes: 5 additions & 5 deletions src/components/Focus.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ import onChangeProp from '../utils/onChangeProp'

const Focus = ({ onChange, ...props }) => (
<State
initial={{ isFocused: false }}
onChange={onChangeProp(onChange, 'isFocused')}
initial={{ focused: false }}
onChange={onChangeProp(onChange, 'focused')}
>
{({ 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 }),
},
})
}
Expand Down
12 changes: 6 additions & 6 deletions src/components/FocusManager.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,24 @@ const FocusManager = ({ onChange, ...props }) => {
let canBlur = true
return (
<State
initial={{ isFocused: false }}
onChange={onChangeProp(onChange, 'isFocused')}
initial={{ focused: false }}
onChange={onChangeProp(onChange, 'focused')}
>
{({ 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
Expand Down
10 changes: 5 additions & 5 deletions src/components/Hover.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ import onChangeProp from '../utils/onChangeProp'

const Hover = ({ onChange, ...props }) => (
<State
initial={{ isHovered: false }}
onChange={onChangeProp(onChange, 'isHovered')}
initial={{ hovered: false }}
onChange={onChangeProp(onChange, 'hovered')}
>
{({ 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 }),
},
})
}
Expand Down
10 changes: 5 additions & 5 deletions src/components/Touch.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ import onChangeProp from '../utils/onChangeProp'

const Touch = ({ onChange, ...props }) => (
<State
initial={{ isTouched: false }}
onChange={onChangeProp(onChange, 'isTouched')}
initial={{ touched: false }}
onChange={onChangeProp(onChange, 'touched')}
>
{({ 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 }),
},
})
}
Expand Down
Loading