(
50 |
5 |
6 | export const Props = ({ children }) => (
7 |
8 | {({ table: Table }) => (
9 |
10 |
11 |
12 | Prop
13 | Type
14 | Default
15 | Description
16 |
17 |
18 | {children}
19 |
20 | )}
21 |
22 | )
23 |
24 | export const Prop = ({
25 | name,
26 | type,
27 | default: _default,
28 | children,
29 | required = false,
30 | }) => (
31 |
32 |
33 |
34 | {name}
35 | {required ? ' *' : ''}
36 |
37 |
38 | {type}
39 |
40 | {typeof _default !== 'undefined' ? (
41 | {JSON.stringify(_default)}
42 | ) : (
43 | ''
44 | )}
45 |
46 | {children}
47 |
48 | )
49 |
50 | export const ChildrenProps = ({ children }) => (
51 |
52 | {({ table: Table }) => (
53 |
54 |
55 |
56 | Prop
57 | Type
58 | Description
59 |
60 |
61 | {children}
62 |
63 | )}
64 |
65 | )
66 |
67 | export const ChildrenProp = ({ name, type, children }) => (
68 |
69 |
70 | {name}
71 |
72 | {type}
73 | {children}
74 |
75 | )
76 |
--------------------------------------------------------------------------------
/docs/components/Active.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Active
3 | menu: 2. Feedback Containers
4 | ---
5 |
6 | import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
7 | import { Active } from '../../dist/react-powerplug.esm'
8 |
9 | # Active
10 |
11 | The Active component is used to known when user is clicking (holding) some element.
12 | It's the same as `:active` pseudo selector from css.
13 |
14 | ```js
15 | import { Active } from 'react-powerplug'
16 | ```
17 |
18 | ```jsx
19 |
20 | {({ active, bind }) => (
21 |
22 | You are {active ? 'clicking' : 'not clicking'} this div.
23 |
24 | )}
25 |
26 | ```
27 |
28 | ## Props
29 |
30 |
31 |
32 | The onChange event of the Active is called whenever the `active` state changes.
33 |
34 |
35 | Receive state as function. It can also be `render` prop.
36 |
37 |
38 |
39 | ## Children Props
40 |
41 |
42 |
43 | True if is holding the binded element
44 |
45 |
46 | There are the bind event functions.
49 |
50 |
--------------------------------------------------------------------------------
/docs/components/Compose.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Compose
3 | menu: 4. Utils Containers
4 | ---
5 |
6 | import { Props, Prop } from '../_ui/PropsTable'
7 | import { State } from '../../dist/react-powerplug.esm'
8 |
9 | # Compose
10 |
11 | The Compose component is a special component to you 'merge' two or more components functionalities.
12 | You can, for example, combine Toggle and Counter in a single component and use both power together.
13 |
14 | The components to compose do not necessarily have to be provided by this library, as long as they are render-props components, it works.
15 |
16 | ## Usage
17 |
18 | ```js
19 | import { Compose, Toggle, Counter } from 'react-powerplug'
20 | ```
21 |
22 | ```jsx
23 |
24 | {(counter, toggle) => (
25 |
35 | ```
36 |
37 | If you need to pass props, especially for `initial`, just pass a created element. Internals this will be cloned.
38 |
39 | ```jsx
40 |
49 | {(toggle, counter) => (
50 |
53 | ```
54 |
55 | Behind the scenes, that's what happens:
56 |
57 | ```jsx
58 |
59 | {counter => (
60 |
61 | {toggle => (
62 |
72 | )}
73 |
74 | ```
75 |
76 | ## Props
77 |
78 |
79 |
80 | Specifies the components to compose
81 |
82 |
83 | Receive state as function. It can also be `render` prop.
84 |
85 |
86 |
87 | ## Children Props
88 |
89 | The render props function provided will receive n arguments, each of them being
90 | the arguments provided by the corresponding component in the list.
91 |
--------------------------------------------------------------------------------
/docs/components/Counter.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Counter
3 | menu: 1. State Containers
4 | ---
5 |
6 | import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
7 | import { Counter } from '../../dist/react-powerplug.esm'
8 |
9 | # Counter
10 |
11 | The Counter component is used for when it's necessary to count something.
12 |
13 | ## Usage
14 |
15 | ```js
16 | import { Counter } from 'react-powerplug'
17 | ```
18 |
19 | ```jsx
20 |
21 | {({ count, inc, dec }) => (
22 |
31 | ```
32 |
33 | ## Props
34 |
35 |
36 |
37 | Specifies the initial `count` state.
38 |
39 |
40 | The onChange event of the Toggle is called whenever the on state changes.
41 |
42 |
43 | Receive state as function. It can also be `render` prop.
44 |
45 |
46 |
47 | ## Children Props
48 |
49 |
50 |
51 | Your `count` state value
52 |
53 |
54 | Increase your count state by 1.
55 |
56 |
57 | Decrease your count state by 1.
58 |
59 |
60 | Arbitrary increase your count state by provided value.
61 |
62 |
63 | Arbitrary decrease your count state by provided value.
64 |
65 |
66 | Arbitrary set a value to `count` state
67 |
68 |
69 | Reset `count` to initial state
70 |
71 |
72 |
--------------------------------------------------------------------------------
/docs/components/Field.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Field
3 | menu: 3. Form Containers
4 | ---
5 |
6 | import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
7 | import { State } from '../../dist/react-powerplug.esm'
8 |
9 | # Field
10 |
11 | The Field component is used for form fields like inputs, checkboxes, selects, etc.
12 |
13 | ## Usage
14 |
15 | ```js
16 | import { Field } from 'react-powerplug'
17 | ```
18 |
19 | ```jsx
20 |
21 | {({ value, set }) => (
22 | set(e.target.value)} />
23 | )}
24 |
25 | ```
26 |
27 | ```jsx
28 |
29 | {({ bind }) =>
31 | ```
32 |
33 | ```jsx
34 |
35 | {({ bind }) => (
36 |
37 | You accept the terms?
39 | )}
40 |
41 | ```
42 |
43 | ## Props
44 |
45 |
46 |
47 | Specifies the initial `value` state.
48 |
49 |
50 | The onChange event of the Value is called whenever the on state changes.
51 |
52 |
53 | Receive state as function. It can also be `render` prop.
54 |
55 |
56 |
57 | ## Children Props
58 |
59 |
60 |
61 | Your `value` state value
62 |
63 |
64 | Arbitrary set a value to `value` state
65 |
66 |
67 | There are the bind event functions.
70 |
71 | Reset `value` to initial state
72 |
73 |
74 |
--------------------------------------------------------------------------------
/docs/components/Focus.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Focus
3 | menu: 2. Feedback Containers
4 | ---
5 |
6 | import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
7 | import { Focus } from '../../dist/react-powerplug.esm'
8 |
9 | # Focus
10 |
11 | The Focus component is used to known when user is focusing some element.
12 | It's the same as `:focus` pseudo selector from css.
13 |
14 | ```js
15 | import { Focus } from 'react-powerplug'
16 | ```
17 |
18 | ```jsx
19 |
20 | {({ focused, bind }) => (
21 |
22 |
23 |
You are {focused ? 'focusing' : 'not focusing'} the input.
24 |
27 | ```
28 |
29 | ## Props
30 |
31 |
32 |
33 | The onChange event of the Focus is called whenever the `focused` state changes.
34 |
35 |
36 | Receive state as function. It can also be `render` prop.
37 |
38 |
39 |
40 | ## Children Props
41 |
42 |
43 |
44 | True if is focusing the binded element
45 |
46 |
47 | There are the bind event functions.
50 |
51 |
--------------------------------------------------------------------------------
/docs/components/Form.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Form
3 | menu: 3. Form Containers
4 | ---
5 |
6 | import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
7 | import { Form } from '../../dist/react-powerplug.esm'
8 |
9 | # Form
10 |
11 | The Form component is used for form with multiples fields and a submit handler
12 |
13 | ## Usage
14 |
15 | ```js
16 | import { Form } from 'react-powerplug'
17 | ```
18 |
19 | ```jsx
20 |
40 | )}
41 |
42 | ```
43 |
44 | ## Props
45 |
46 |
47 |
48 | Specifies the initial state for fields in the form (Object with keys is name of fields)
49 |
50 |
51 | The onChange event of the Value is called whenever the on state changes.
52 |
53 |
54 | Receive state as function. It can also be `render` prop.
55 |
56 |
57 |
58 | ## Children Props
59 |
60 |
--------------------------------------------------------------------------------
/docs/components/Hover.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Hover
3 | menu: 2. Feedback Containers
4 | ---
5 |
6 | import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
7 | import { Hover } from '../../dist/react-powerplug.esm'
8 |
9 | # Hover
10 |
11 | The Hover component is used to known when user is hovering some element.
12 | It's the same as `:hover` pseudo selector from css.
13 |
14 | ```js
15 | import { Hover } from 'react-powerplug'
16 | ```
17 |
18 | ```jsx
19 |
20 | {({ hovered, bind }) => (
21 |
22 | You are {hovered ? 'hovering' : 'not hovering'} this div.
23 |
24 | )}
25 |
26 | ```
27 |
28 | ## Props
29 |
30 |
31 |
32 | The onChange event of the Hover is called whenever the `hovered` state changes.
33 |
34 |
35 | Receive state as function. It can also be `render` prop.
36 |
37 |
38 |
39 | ## Children Props
40 |
41 |
42 |
43 | True if is hovering the binded element
44 |
45 |
46 | There are the bind event functions.
49 |
50 |
--------------------------------------------------------------------------------
/docs/components/Interval.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Interval
3 | menu: 4. Utils Containers
4 | ---
5 |
6 | import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
7 | import { Interval } from '../../dist/react-powerplug.esm'
8 |
9 | # Interval
10 |
11 | The Interval component is used for when it's necessary to re-render at regular intervals. Also known as Frame.
12 |
13 | ## Usage
14 |
15 | ```js
16 | import { Interval } from 'react-powerplug'
17 | ```
18 |
19 | ```jsx
20 |
21 | {({ start, stop }) => (
22 | <>
23 | The time is now {new Date().toLocaleTimeString()}
24 | stop()}>Stop interval
25 | resume()}>Start interval
26 |
27 | )}
28 |
29 | ```
30 |
31 | ## Props
32 |
33 |
34 |
35 | Specifies the delay (for `setInterval`) between re-renders in milliseconds.
40 |
41 | Receive state as function. It can also be `render` prop.
42 |
43 |
44 |
45 | ## Children Props
46 |
47 |
48 |
49 | Start (or resume) re-renders intervals at defined delay (if not passed delay arg it will be used from props).
52 |
53 | Stop (or pause) re-renders intervals
54 |
55 |
56 | Start or Stop re-renders intervals based on current status
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/docs/components/List.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: List
3 | menu: 1. State Containers
4 | ---
5 |
6 | import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
7 | import { List } from '../../dist/react-powerplug.esm'
8 |
9 | # List
10 |
11 | The List component is used to work with an array.
12 | *For unique arrays see Set.*
13 |
14 | ## Usage
15 |
16 | ```js
17 | import { List } from 'react-powerplug'
18 | ```
19 |
20 | ```jsx
21 |
22 | {({ list, pull, push }) => (
23 |
24 | pull(value => value === tag)}>
27 | {tag}
28 |
29 | ))}
30 |
31 | )}
32 |
33 | ```
34 |
35 | ## Props
36 |
37 |
38 |
39 | Specifies the initial `list` state.
40 |
41 |
42 | The onChange event of the List is called whenever the `list` state changes.
43 |
44 |
45 | Receive state as function. It can also be `render` prop.
46 |
47 |
48 |
49 | ## Children Props
50 |
51 |
52 |
53 | Your `list` state value
54 |
55 |
56 | Get first element of your `list` array
57 |
58 |
59 | Get last element of your `list` array
60 |
61 |
62 | Add one or more items to your `list` array
63 |
64 |
65 | Remove an item based on a predicate function.
68 |
69 | Use Array.prototype.sort {' '}
70 | to sort your `list` state.
71 |
72 |
73 | Set a new full `list` array to your state
74 |
75 |
76 | Reset `list` to initial state
77 |
78 |
79 |
--------------------------------------------------------------------------------
/docs/components/Map.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Map
3 | menu: 1. State Containers
4 | ---
5 |
6 | import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
7 | import { Map } from '../../dist/react-powerplug.esm'
8 |
9 | # Map
10 |
11 | The Map component is a generic used for a free key-value logics.
12 |
13 | ```js
14 | import { Map } from 'react-powerplug'
15 | ```
16 |
17 | ```jsx
18 |
19 | {({ set, get }) => (
20 |
21 | set('sounds', c)}>
22 | Game Sounds
23 |
24 | set('music', c)}>
25 | Bg Music
26 |
27 | set('graphics', value)}
32 | />
33 |
34 | )}
35 |
36 | ```
37 |
38 | ## Props
39 |
40 |
41 |
42 | Specifies the initial `values` state.
43 |
44 |
45 | The onChange event of the Map is called whenever the `values` state changes.
46 |
47 |
48 | Receive state as function. It can also be `render` prop.
49 |
50 |
51 |
52 | ## Map Children Props
53 |
54 |
55 |
56 | Your `values` state value
57 |
58 |
59 | Assigns `value` to `key`
60 |
61 |
62 | Takes a `key` and `function`, map a function over key's `value`
63 |
64 |
65 | Get assigned `value` from `key`
66 |
67 |
68 | Reset `values` to initial state
69 |
70 |
71 |
--------------------------------------------------------------------------------
/docs/components/Set.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Set
3 | menu: 1. State Containers
4 | ---
5 |
6 | import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
7 | import { Set } from '../../dist/react-powerplug.esm'
8 |
9 | # Set
10 |
11 | The Set component is used to work with an array of **unique** values.
12 |
13 | ## Usage
14 |
15 | ```js
16 | import { Set } from 'react-powerplug'
17 | ```
18 |
19 | ```jsx
20 |
21 | {({ values, remove, add }) => (
22 |
23 | remove(tag)}>{tag}
26 | ))}
27 |
28 | )}
29 |
30 | ```
31 |
32 | ## Props
33 |
34 |
35 |
36 | Specifies the initial `values` state.
37 |
38 |
39 | The onChange event of the Set is called whenever the `values` state changes.
40 |
41 |
42 | Receive state as function. It can also be `render` prop.
43 |
44 |
45 |
46 | ## Children Props
47 |
48 |
49 |
50 | Your `values` state value
51 |
52 |
53 | Add a unique `value` to your values array.
56 |
57 | Remove a `value` from your `values` array
58 |
59 |
60 | True if `values` array includes a `value`
61 |
62 |
63 | Set `values` state to an empty array
64 |
65 |
66 | Reset `values` to initial state
67 |
68 |
69 |
--------------------------------------------------------------------------------
/docs/components/State.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: State
3 | menu: 1. State Containers
4 | ---
5 |
6 | import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
7 | import { State } from '../../dist/react-powerplug.esm'
8 |
9 | # State
10 |
11 | A generic component for storing arbitrary object state.
12 | Equals to React.Component state/setState.
13 |
14 | ## Usage
15 |
16 | ```js
17 | import { State } from 'react-powerplug'
18 | ```
19 |
20 | ```jsx
21 |
22 | {({ state, setState }) => {
23 | const onStart = data => setState({ loading: true })
24 | const onFinish = data => setState({ data, loading: false })
25 |
26 | return (
27 |
31 | ```
32 |
33 | ## Props
34 |
35 |
36 |
37 | Specifies the initial `state`
38 |
39 |
40 | The onChange event of the State is called whenever the state changes
41 |
42 |
43 | Receive state as function. It can also be `render` prop.
44 |
45 |
46 |
47 | ## Children Props
48 |
49 |
50 |
51 | Your `state` value
52 |
53 |
54 | State setter. Acts equals to the{' '}
55 | setState from React.Component.
56 |
57 |
58 | Reset to initial state
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/docs/components/Toggle.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Toggle
3 | menu: 1. State Containers
4 | ---
5 |
6 | import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
7 | import { Toggle } from '../../dist/react-powerplug.esm'
8 |
9 | # Toggle
10 |
11 | The Toggle component is used to toggle a boolean. True/false.
12 |
13 |
14 | ## Usage
15 |
16 | ```js
17 | import { Toggle } from 'react-powerplug'
18 | ```
19 |
20 | ```jsx
21 |
22 | {({ on, toggle }) => (
23 |
26 | ```
27 |
28 | ## Props
29 |
30 |
31 |
32 | Specifies the initial `on` state.
33 |
34 |
35 | The onChange event of the Toggle is called whenever the on state changes.
36 |
37 |
38 | Receive state as function. It can also be `render` prop.
39 |
40 |
41 |
42 | ## Children Props
43 |
44 |
45 |
46 | Your `on` state value
47 |
48 |
49 | Toggle your `on` state value
50 |
51 |
52 | Arbitrary set a value to `on` state
53 |
54 |
55 | Set `on` value to true
56 |
57 |
58 | Set `on` value to false
59 |
60 |
61 | Reset `on` to initial state
62 |
63 |
64 |
--------------------------------------------------------------------------------
/docs/components/Touch.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Touch
3 | menu: 2. Feedback Containers
4 | ---
5 |
6 | import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
7 | import { Touch } from '../../dist/react-powerplug.esm'
8 |
9 | # Touch
10 |
11 | The Touch component is used to known when user is touching some element.
12 |
13 | ```js
14 | import { Touch } from 'react-powerplug'
15 | ```
16 |
17 | ```jsx
18 |
19 | {({ touched, bind }) => (
20 |
21 | You are {touched ? 'touching' : 'not touching'} this div.
22 |
23 | )}
24 |
25 | ```
26 |
27 | ## Props
28 |
29 |
30 |
31 | The onChange event of the Touch is called whenever the `touched` state changes.
32 |
33 |
34 | Receive state as function. It can also be `render` prop.
35 |
36 |
37 |
38 | ## Children Props
39 |
40 |
41 |
42 | True if is touching the binded element
43 |
44 |
45 | There are the bind event functions.
48 |
49 |
--------------------------------------------------------------------------------
/docs/components/Value.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Value
3 | menu: 1. State Containers
4 | ---
5 |
6 | import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
7 | import { Value } from '../../dist/react-powerplug.esm'
8 |
9 | # Value
10 |
11 | A generic component for storing raw data values.
12 |
13 | ## Usage
14 |
15 | ```js
16 | import { Value } from 'react-powerplug'
17 | ```
18 |
19 | ```jsx
20 |
21 | {({ value, set, reset }) => (
22 | <>
23 | Reset to initial
30 |
31 | )}
32 |
33 | ```
34 |
35 | ```jsx
36 |
37 | {({ value, set }) => {
38 | const bindRadio = radioValue => ({
39 | selected: value === radioValue,
40 | onClick: () => set(radioValue),
41 | })
42 |
43 | return (
44 |
49 | )
50 | }}
51 |
52 | ```
53 |
54 | ## Props
55 |
56 |
57 |
58 | Specifies the initial `value` state.
59 |
60 |
61 | The onChange event of the Value is called whenever the on state changes.
62 |
63 |
64 | Receive state as function. It can also be `render` prop.
65 |
66 |
67 |
68 | ## Children Props
69 |
70 |
71 |
72 | Your `value` state value
73 |
74 |
75 | Arbitrary set a value to `value` state
76 |
77 |
78 | Reset `value` to initial state
79 |
80 |
81 |
--------------------------------------------------------------------------------
/docs/utils/compose.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: compose
3 | menu: 5. Utils
4 | ---
5 |
6 | # compose
7 |
8 | The compose utility is a factory version of Compose component.
9 | You can read more about in Compose docs.
10 |
11 | ```js
12 | import { compose, Counter, Toggle } from 'react-powerplug' // note lowercased (c)ompose
13 |
14 | // the order matters
15 | const ToggleCounter = compose(
16 |
21 | {(counter, toggle) => {
22 | // counter.inc, counter.dec, counter.count
23 | // toggle.on, toggle.toggle, etc.
24 | }}
25 |
26 | ```
27 |
--------------------------------------------------------------------------------
/docs/utils/composeEvents.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: composeEvents
3 | menu: 5. Utils
4 | ---
5 |
6 | # composeEvents
7 |
8 | The composeEvents utility helps you when you need to pass the same callback more than once.
9 |
10 | ```jsx
11 | import { Hover, composeEvents } from 'react-powerplug'
12 |
13 | const HoveredDiv = ({ children, onMouseEnter, onMouseLeave, ...restProps }) => (
14 |
15 | {({ hovered, bind }) => (
16 |
21 | )}
22 |
23 | )
24 | ```
25 |
26 | It's just merge array of events object into single one.
27 |
28 | ```jsx
29 | const callbacks = composeEvents(
30 | {
31 | onMouseEnter: event => console.log('first call', event),
32 | onMouseLeave: event => console.log('first call', event),
33 | },
34 | {
35 | onMouseEnter: event => console.log('second call', event),
36 | }
37 | )
38 |
39 | /**
40 | * callbacks = {
41 | * onMouseEnter: Function,
42 | * onMouseLeave: Function
43 | * }
44 | */
45 |
46 |
47 |
48 |
49 | ```
50 |
--------------------------------------------------------------------------------
/doczrc.js:
--------------------------------------------------------------------------------
1 | import pkg from './package.json'
2 |
3 | export default {
4 | title: 'React PowerPlug',
5 | description: pkg.description,
6 | base: `/${pkg.name}/`,
7 | version: pkg.version,
8 | propsParser: false,
9 | hashRouter: true,
10 | themeConfig: {
11 | logo: {
12 | src:
13 | 'https://raw.githubusercontent.com/renatorib/react-powerplug/master/logo.png',
14 | width: 231,
15 | },
16 | colors: {
17 | primary: '#3E9DE1',
18 | },
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/renatorib/react-powerplug/8da1bdab0860b958893c7664a4d69616ea04f1d2/logo.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-powerplug",
3 | "version": "1.0.0",
4 | "description": "Give life to your dumb components",
5 | "author": "Renato Ribeiro (http://github.com/renatorib)",
6 | "license": "MIT",
7 | "main": "dist/react-powerplug.cjs.js",
8 | "module": "dist/react-powerplug.esm.js",
9 | "types": "types/index.d.ts",
10 | "files": [
11 | "dist",
12 | "src",
13 | "types"
14 | ],
15 | "scripts": {
16 | "build:flow": "echo \"// @flow\n\nexport * from '../src'\" > dist/react-powerplug.cjs.js.flow",
17 | "build:code": "rollup -c",
18 | "build": "npm run clean && npm run build:code && npm run build:flow",
19 | "clean": "rimraf dist",
20 | "typecheck:flow": "flow check --max-warnings=0",
21 | "typecheck:ts": "dtslint types",
22 | "lint": "eslint src tests",
23 | "test:only": "jest",
24 | "test:umd": "jest --setupTestFrameworkScriptFile ./tests/jestUMDSetup.js",
25 | "test:cjs": "jest --setupTestFrameworkScriptFile ./tests/jestCJSSetup.js",
26 | "test": "npm run build && npm run lint && jest && npm run test:umd && npm run test:cjs",
27 | "precommit": "lint-staged",
28 | "prepublishOnly": "npm run clean && npm run build",
29 | "contributors:add": "all-contributors add",
30 | "contributors:generate": "all-contributors generate",
31 | "docz:dev": "docz dev",
32 | "docz:build": "docz build",
33 | "docz:publish": "npm run docz:build && gh-pages -d .docz/dist"
34 | },
35 | "lint-staged": {
36 | "*.{js,md,ts,tsx}": [
37 | "prettier --write",
38 | "git add"
39 | ]
40 | },
41 | "jest": {
42 | "globalSetup": "jest-environment-puppeteer/setup",
43 | "globalTeardown": "jest-environment-puppeteer/teardown",
44 | "transformIgnorePatterns": [
45 | "/node_modules/",
46 | "/dist/"
47 | ]
48 | },
49 | "repository": {
50 | "type": "git",
51 | "url": "https://github.com/renatorib/react-powerplug.git"
52 | },
53 | "keywords": [
54 | "react",
55 | "reactjs",
56 | "components",
57 | "dumb",
58 | "state"
59 | ],
60 | "bugs": {
61 | "url": "https://github.com/renatorib/react-powerplug/issues"
62 | },
63 | "homepage": "https://github.com/renatorib/react-powerplug",
64 | "dependencies": {
65 | "@babel/runtime": "^7.0.0"
66 | },
67 | "devDependencies": {
68 | "@babel/core": "^7.0.0",
69 | "@babel/plugin-proposal-class-properties": "^7.0.0",
70 | "@babel/plugin-transform-runtime": "^7.0.0",
71 | "@babel/preset-env": "^7.0.0",
72 | "@babel/preset-react": "^7.0.0",
73 | "@types/react": "^16.3.13",
74 | "all-contributors-cli": "^4.11.2",
75 | "babel-core": "^7.0.0-bridge.0",
76 | "babel-eslint": "^9.0.0",
77 | "babel-jest": "^23.0.0",
78 | "cross-env": "^5.0.5",
79 | "docz": "0.11.2",
80 | "docz-core": "0.11.2",
81 | "docz-theme-default": "0.11.2",
82 | "dtslint": "^0.3.0",
83 | "eslint": "^5.3.0",
84 | "eslint-plugin-flowtype": "^2.50.0",
85 | "eslint-plugin-import": "^2.13.0",
86 | "eslint-plugin-react": "^7.10.0",
87 | "flow-bin": "^0.82.0",
88 | "gh-pages": "^2.0.0",
89 | "husky": "^0.14.3",
90 | "jest": "^23.0.0",
91 | "jest-environment-node": "^23.0.0",
92 | "jest-environment-puppeteer": "^2.4.0",
93 | "lint-staged": "^6.0.0",
94 | "prettier": "^1.10.2",
95 | "puppeteer": "^1.4.0",
96 | "react": "^16.4.2",
97 | "react-dom": "^16.4.2",
98 | "react-test-renderer": "^16.2.0",
99 | "rimraf": "^2.6.1",
100 | "rollup": "^0.65.0",
101 | "rollup-plugin-babel": "^4.0.1",
102 | "rollup-plugin-node-resolve": "^3.3.0",
103 | "rollup-plugin-replace": "^2.0.0",
104 | "rollup-plugin-size-snapshot": "^0.6.1",
105 | "rollup-plugin-uglify": "^4.0.0"
106 | },
107 | "peerDependencies": {
108 | "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0"
109 | }
110 | }
111 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import nodeResolve from 'rollup-plugin-node-resolve'
2 | import babel from 'rollup-plugin-babel'
3 | import replace from 'rollup-plugin-replace'
4 | import { uglify } from 'rollup-plugin-uglify'
5 | import { sizeSnapshot } from 'rollup-plugin-size-snapshot'
6 | import pkg from './package.json'
7 |
8 | const input = './src/index.js'
9 |
10 | const external = id => !id.startsWith('.') && !id.startsWith('/')
11 |
12 | const name = 'ReactPowerPlug'
13 |
14 | const globals = { react: 'React' }
15 |
16 | const getBabelOptions = ({ useESModules }) => ({
17 | exclude: '**/node_modules/**',
18 | runtimeHelpers: true,
19 | plugins: [['@babel/plugin-transform-runtime', { useESModules }]],
20 | })
21 |
22 | export default [
23 | {
24 | input,
25 | output: {
26 | file: 'dist/react-powerplug.umd.js',
27 | format: 'umd',
28 | name,
29 | globals,
30 | },
31 | external: Object.keys(globals),
32 | plugins: [
33 | nodeResolve(),
34 | babel(getBabelOptions({ useESModules: true })),
35 | replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
36 | sizeSnapshot(),
37 | ],
38 | },
39 |
40 | {
41 | input,
42 | output: {
43 | file: 'dist/react-powerplug.min.js',
44 | format: 'umd',
45 | name,
46 | globals,
47 | },
48 | external: Object.keys(globals),
49 | plugins: [
50 | nodeResolve(),
51 | babel(getBabelOptions({ useESModules: true })),
52 | replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
53 | uglify({
54 | compress: {
55 | pure_getters: true,
56 | unsafe: true,
57 | unsafe_comps: true,
58 | warnings: false,
59 | },
60 | }),
61 | ],
62 | },
63 |
64 | {
65 | input,
66 | output: { file: pkg.main, format: 'cjs' },
67 | external,
68 | plugins: [babel(getBabelOptions({ useESModules: false })), sizeSnapshot()],
69 | },
70 |
71 | {
72 | input,
73 | output: { file: pkg.module, format: 'es' },
74 | external,
75 | plugins: [babel(getBabelOptions({ useESModules: true })), sizeSnapshot()],
76 | },
77 | ]
78 |
--------------------------------------------------------------------------------
/src/components/Active.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Value from './Value'
3 | import renderProps from '../utils/renderProps'
4 |
5 | const Active = ({ onChange, ...props }) => (
6 |
7 | {({ value, set }) =>
8 | renderProps(props, {
9 | active: value,
10 | bind: {
11 | onMouseDown: () => set(true),
12 | onMouseUp: () => set(false),
13 | },
14 | })
15 | }
16 |
17 | )
18 |
19 | export default Active
20 |
--------------------------------------------------------------------------------
/src/components/Compose.js:
--------------------------------------------------------------------------------
1 | import compose from '../utils/compose'
2 |
3 | const Compose = ({ components, ...props }) => compose(...components)(props)
4 |
5 | export default Compose
6 |
--------------------------------------------------------------------------------
/src/components/Counter.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Value from './Value'
3 | import renderProps from '../utils/renderProps'
4 |
5 | const add = amount => value => value + amount
6 |
7 | const Counter = ({ initial = 0, onChange, ...props }) => (
8 |
9 | {({ value, set, reset }) =>
10 | renderProps(props, {
11 | count: value,
12 | inc: () => set(add(1)),
13 | dec: () => set(add(-1)),
14 | incBy: value => set(add(value)),
15 | decBy: value => set(add(-value)),
16 | set: value => set(value),
17 | reset,
18 | })
19 | }
20 |
21 | )
22 |
23 | export default Counter
24 |
--------------------------------------------------------------------------------
/src/components/Field.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Value from './Value'
3 | import renderProps from '../utils/renderProps'
4 |
5 | const isObject = value => typeof value === 'object' && value
6 |
7 | const Input = ({ initial = '', onChange, ...props }) => (
8 |
9 | {({ value, set, reset }) =>
10 | renderProps(props, {
11 | value,
12 | reset,
13 | set,
14 | bind: {
15 | value,
16 | onChange: event => {
17 | if (isObject(event) && isObject(event.target)) {
18 | set(event.target.value)
19 | } else {
20 | set(event)
21 | }
22 | },
23 | },
24 | })
25 | }
26 |
27 | )
28 |
29 | export default Input
30 |
--------------------------------------------------------------------------------
/src/components/Focus.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Value from './Value'
3 | import renderProps from '../utils/renderProps'
4 |
5 | const Focus = ({ onChange, ...props }) => (
6 |
7 | {({ value, set }) =>
8 | renderProps(props, {
9 | focused: value,
10 | bind: {
11 | onFocus: () => set(true),
12 | onBlur: () => set(false),
13 | },
14 | })
15 | }
16 |
17 | )
18 |
19 | export default Focus
20 |
--------------------------------------------------------------------------------
/src/components/FocusManager.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Value from './Value'
3 | import renderProps from '../utils/renderProps'
4 |
5 | const FocusManager = ({ onChange, ...props }) => {
6 | let canBlur = true
7 | return (
8 |
9 | {({ value, set }) =>
10 | renderProps(props, {
11 | focused: value,
12 | blur: () => {
13 | if (value) {
14 | document.activeElement.blur()
15 | }
16 | },
17 | bind: {
18 | tabIndex: -1,
19 | onBlur: () => {
20 | if (canBlur) {
21 | set(false)
22 | }
23 | },
24 | onFocus: () => {
25 | set(true)
26 | },
27 | onMouseDown: () => {
28 | canBlur = false
29 | },
30 | onMouseUp: () => {
31 | canBlur = true
32 | },
33 | },
34 | })
35 | }
36 |
37 | )
38 | }
39 |
40 | export default FocusManager
41 |
--------------------------------------------------------------------------------
/src/components/Form.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Value from './Value'
3 | import renderProps from '../utils/renderProps'
4 |
5 | const isObject = value => typeof value === 'object' && value
6 |
7 | const Form = ({ initial = {}, onChange, ...props }) => (
8 |
9 | {({ value: values, set, reset }) =>
10 | renderProps(props, {
11 | values,
12 |
13 | reset,
14 |
15 | setValues: nextValues =>
16 | set(prev => ({
17 | ...prev,
18 | ...(typeof nextValues === 'function'
19 | ? nextValues(prev)
20 | : nextValues),
21 | })),
22 |
23 | field: id => {
24 | const value = values[id]
25 | const setValue = updater =>
26 | typeof updater === 'function'
27 | ? set(prev => ({ ...prev, [id]: updater(prev[id]) }))
28 | : set({ ...values, [id]: updater })
29 |
30 | return {
31 | value,
32 | set: setValue,
33 | bind: {
34 | value,
35 | onChange: event => {
36 | if (isObject(event) && isObject(event.target)) {
37 | setValue(event.target.value)
38 | } else {
39 | setValue(event)
40 | }
41 | },
42 | },
43 | }
44 | },
45 | })
46 | }
47 |
48 | )
49 |
50 | export default Form
51 |
--------------------------------------------------------------------------------
/src/components/Hover.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Value from './Value'
3 | import renderProps from '../utils/renderProps'
4 |
5 | const Hover = ({ onChange, ...props }) => (
6 |
7 | {({ value, set }) =>
8 | renderProps(props, {
9 | hovered: value,
10 | bind: {
11 | onMouseEnter: () => set(true),
12 | onMouseLeave: () => set(false),
13 | },
14 | })
15 | }
16 |
17 | )
18 |
19 | export default Hover
20 |
--------------------------------------------------------------------------------
/src/components/Interval.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react'
2 | import renderProps from '../utils/renderProps'
3 |
4 | class Interval extends Component {
5 | state = {
6 | times: 0,
7 | }
8 |
9 | intervalId = undefined
10 |
11 | _clearIntervalIfNecessary = () => {
12 | if (this.intervalId) {
13 | this.intervalId = clearInterval(this.intervalId)
14 | }
15 | }
16 |
17 | _setIntervalIfNecessary = delay => {
18 | if (Number.isFinite(delay)) {
19 | this._clearIntervalIfNecessary()
20 | this.intervalId = setInterval(
21 | () => this.setState(s => ({ times: s.times + 1 })),
22 | delay
23 | )
24 | }
25 | }
26 |
27 | stop = () => {
28 | this._clearIntervalIfNecessary()
29 | }
30 |
31 | start = delay => {
32 | const _delay =
33 | typeof delay === 'number'
34 | ? delay
35 | : this.props.delay != null ? this.props.delay : 1000
36 | this._setIntervalIfNecessary(_delay)
37 | }
38 |
39 | toggle = () => {
40 | this.intervalId ? this.stop() : this.start()
41 | }
42 |
43 | componentDidMount() {
44 | this.start()
45 | }
46 |
47 | componentDidUpdate(prevProps) {
48 | if (prevProps.delay !== this.props.delay) {
49 | this.stop()
50 | this.start()
51 | }
52 | }
53 |
54 | componentWillUnmount() {
55 | this.stop()
56 | }
57 |
58 | render() {
59 | return renderProps(this.props, {
60 | start: this.start,
61 | stop: this.stop,
62 | toggle: this.toggle,
63 | })
64 | }
65 | }
66 |
67 | export default Interval
68 |
--------------------------------------------------------------------------------
/src/components/List.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Value from './Value'
3 | import renderProps from '../utils/renderProps'
4 |
5 | const complement = fn => (...args) => !fn(...args)
6 |
7 | const List = ({ initial = [], onChange, ...props }) => (
8 |
9 | {({ value, set, reset }) =>
10 | renderProps(props, {
11 | list: value,
12 | first: () => value[0],
13 | last: () => value[Math.max(0, value.length - 1)],
14 | set: list => set(list),
15 | push: (...values) => set(list => [...list, ...values]),
16 | pull: predicate => set(list => list.filter(complement(predicate))),
17 | sort: compareFn => set(list => [...list].sort(compareFn)),
18 | reset,
19 | })
20 | }
21 |
22 | )
23 |
24 | export default List
25 |
--------------------------------------------------------------------------------
/src/components/Map.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Value from './Value'
3 | import renderProps from '../utils/renderProps'
4 |
5 | const Map = ({ initial = {}, onChange, ...props }) => (
6 |
7 | {({ value: values, set, reset }) =>
8 | renderProps(props, {
9 | values,
10 | clear: () => set({}),
11 | reset,
12 | set: (key, updater) =>
13 | set(prev => ({
14 | ...prev,
15 | [key]: typeof updater === 'function' ? updater(prev[key]) : updater,
16 | })),
17 | get: key => values[key],
18 | has: key => values[key] != null,
19 | delete: key => set(({ [key]: deleted, ...prev }) => prev),
20 | })
21 | }
22 |
23 | )
24 |
25 | export default Map
26 |
--------------------------------------------------------------------------------
/src/components/Set.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Value from './Value'
3 | import renderProps from '../utils/renderProps'
4 |
5 | const unique = arr => arr.filter((d, i) => arr.indexOf(d) === i)
6 | const hasItem = (arr, item) => arr.indexOf(item) !== -1
7 | const removeItem = (arr, item) =>
8 | hasItem(arr, item) ? arr.filter(d => d !== item) : arr
9 | const addUnique = (arr, item) => (hasItem(arr, item) ? arr : [...arr, item])
10 |
11 | const Set = ({ initial = [], onChange, ...props }) => (
12 |
13 | {({ value, set, reset }) =>
14 | renderProps(props, {
15 | values: value,
16 | add: key => set(values => addUnique(values, key)),
17 | clear: () => set([]),
18 | remove: key => set(values => removeItem(values, key)),
19 | has: key => hasItem(value, key),
20 | reset,
21 | })
22 | }
23 |
24 | )
25 |
26 | export default Set
27 |
--------------------------------------------------------------------------------
/src/components/State.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Value from './Value'
3 | import renderProps from '../utils/renderProps'
4 |
5 | const State = ({ initial = {}, onChange, ...props }) => (
6 |
7 | {({ value, set, reset }) =>
8 | renderProps(props, {
9 | state: value,
10 | setState: (updater, cb) =>
11 | set(
12 | prev => ({
13 | ...prev,
14 | ...(typeof updater === 'function' ? updater(prev) : updater),
15 | }),
16 | cb
17 | ),
18 | resetState: reset,
19 | })
20 | }
21 |
22 | )
23 |
24 | export default State
25 |
--------------------------------------------------------------------------------
/src/components/Toggle.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Value from './Value'
3 | import renderProps from '../utils/renderProps'
4 |
5 | const Toggle = ({ initial = false, onChange, ...props }) => (
6 |
7 | {({ value, set, reset }) =>
8 | renderProps(props, {
9 | on: value,
10 | set: value => set(value),
11 | reset,
12 | toggle: () => set(on => !on),
13 | setOn: () => set(true),
14 | setOff: () => set(false),
15 | })
16 | }
17 |
18 | )
19 |
20 | export default Toggle
21 |
--------------------------------------------------------------------------------
/src/components/Touch.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Value from './Value'
3 | import renderProps from '../utils/renderProps'
4 |
5 | const Touch = ({ onChange, ...props }) => (
6 |
7 | {({ value, set }) =>
8 | renderProps(props, {
9 | touched: value,
10 | bind: {
11 | onTouchStart: () => set(true),
12 | onTouchEnd: () => set(false),
13 | },
14 | })
15 | }
16 |
17 | )
18 |
19 | export default Touch
20 |
--------------------------------------------------------------------------------
/src/components/Value.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react'
2 | import renderProps from '../utils/renderProps'
3 |
4 | const noop = () => {}
5 |
6 | class Value extends Component {
7 | state = {
8 | value: this.props.initial,
9 | }
10 |
11 | _set = (updater, cb = noop) => {
12 | const { onChange = noop } = this.props
13 |
14 | this.setState(
15 | typeof updater === 'function'
16 | ? state => ({ value: updater(state.value) })
17 | : { value: updater },
18 | () => {
19 | onChange(this.state.value)
20 | cb()
21 | }
22 | )
23 | }
24 | _reset = (cb = noop) => {
25 | this._set(this.props.initial, cb)
26 | }
27 |
28 | render() {
29 | return renderProps(this.props, {
30 | value: this.state.value,
31 | set: this._set,
32 | reset: this._reset,
33 | })
34 | }
35 | }
36 |
37 | export default Value
38 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as Active } from './components/Active'
2 | export { default as Compose } from './components/Compose'
3 | export { default as Counter } from './components/Counter'
4 | export { default as Field } from './components/Field'
5 | export { default as Focus } from './components/Focus'
6 | export { default as unstable_FocusManager } from './components/FocusManager'
7 | export { default as Form } from './components/Form'
8 | export { default as Hover } from './components/Hover'
9 | export { default as Interval } from './components/Interval'
10 | export { default as List } from './components/List'
11 | export { default as Map } from './components/Map'
12 | export { default as Set } from './components/Set'
13 | export { default as State } from './components/State'
14 | export { default as Toggle } from './components/Toggle'
15 | export { default as Touch } from './components/Touch'
16 | export { default as Value } from './components/Value'
17 |
18 | export { default as compose } from './utils/compose'
19 | export { default as composeEvents } from './utils/composeEvents'
20 | export { default as renderProps } from './utils/renderProps'
21 |
--------------------------------------------------------------------------------
/src/index.js.flow:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import * as React from 'react'
4 |
5 | /* Utils */
6 |
7 | type Updater = (updater: (T => T) | T) => void
8 |
9 | type Reset = (cb?: () => void) => void
10 |
11 | /* Active */
12 |
13 | type ActiveChange = (active: boolean) => void
14 |
15 | type ActiveRender = ({|
16 | active: boolean,
17 | bind: {| onMouseDown: () => void, onMouseUp: () => void |},
18 | |}) => React.Node
19 |
20 | declare export var Active: React.ComponentType<
21 | | {| onChange?: ActiveChange, render: ActiveRender |}
22 | | {| onChange?: ActiveChange, children: ActiveRender |}
23 | >
24 |
25 | /* Compose */
26 |
27 | declare export var Compose: React.ComponentType
28 |
29 | /* Counter */
30 |
31 | type CounterChange = (count: number) => void
32 |
33 | type CounterRender = ({|
34 | count: number,
35 | inc: () => void,
36 | dec: () => void,
37 | incBy: (step: number) => void,
38 | decBy: (step: number) => void,
39 | reset: Reset,
40 | |}) => React.Node
41 |
42 | declare export var Counter: React.ComponentType<
43 | | {| initial?: number, onChange?: CounterChange, render: CounterRender |}
44 | | {| initial?: number, onChange?: CounterChange, children: CounterRender |}
45 | >
46 |
47 | /* Focus */
48 |
49 | type FocusChange = (focused: boolean) => void
50 |
51 | type FocusRender = ({|
52 | focused: boolean,
53 | bind: {| onFocus: () => void, onBlur: () => void |},
54 | |}) => React.Node
55 |
56 | declare export var Focus: React.ComponentType<
57 | | {| onChange?: FocusChange, render: FocusRender |}
58 | | {| onChange?: FocusChange, children: FocusRender |}
59 | >
60 |
61 | /* FocusManager */
62 |
63 | type FocusManagerChange = (focused: boolean) => void
64 |
65 | type FocusManagerRender = ({|
66 | focused: boolean,
67 | blur: () => void,
68 | bind: {|
69 | tabIndex: number,
70 | onFocus: () => void,
71 | onBlur: () => void,
72 | onMouseDown: () => void,
73 | onMouseUp: () => void,
74 | |},
75 | |}) => React.Node
76 |
77 | declare export var unstable_FocusManager: React.ComponentType<
78 | | {| onChange?: FocusManagerChange, render: FocusManagerRender |}
79 | | {| onChange?: FocusManagerChange, children: FocusManagerRender |}
80 | >
81 |
82 | /* Form */
83 |
84 | type FormChange = T => void
85 |
86 | type FormRender = ({|
87 | values: T,
88 | setValues: ((T => $Shape) | $Shape) => void,
89 | reset: Reset,
90 | field: >(
91 | key: K
92 | ) => {|
93 | value: $ElementType,
94 | set: Updater<$ElementType>,
95 | bind: {|
96 | value: $ElementType,
97 | onChange: (
98 | event: { target: { value: $ElementType } } | $ElementType
99 | ) => void,
100 | |},
101 | |},
102 | |}) => React.Node
103 |
104 | type FormProps =
105 | | {| initial: T, onChange?: FormChange, render: FormRender |}
106 | | {| initial: T, onChange?: FormChange, children: FormRender |}
107 |
108 | declare export class Form extends React.Component<
109 | FormProps
110 | > {}
111 |
112 | /* Hover */
113 |
114 | type HoverChange = (hovered: boolean) => void
115 |
116 | type HoverRender = ({|
117 | hovered: boolean,
118 | bind: {| onMouseEnter: () => void, onMouseLeave: () => void |},
119 | |}) => React.Node
120 |
121 | declare export var Hover: React.ComponentType<
122 | | {| onChange?: HoverChange, render: HoverRender |}
123 | | {| onChange?: HoverChange, children: HoverRender |}
124 | >
125 |
126 | /* Field */
127 |
128 | type FieldChange = (value: T) => void
129 |
130 | type FieldRender = ({|
131 | value: T,
132 | set: Updater,
133 | reset: Reset,
134 | bind: {| value: T, onChange: (SyntheticInputEvent<*>) => void |},
135 | |}) => React.Node
136 |
137 | type FieldProps =
138 | | {| initial?: T, onChange?: FieldChange, render: FieldRender |}
139 | | {| initial?: T, onChange?: FieldChange, children: FieldRender |}
140 |
141 | declare export class Field extends React.Component> {}
142 |
143 | /* List */
144 |
145 | type ListValues = $ReadOnlyArray
146 |
147 | type ListChange = (list: ListValues) => void
148 |
149 | type ListRender = ({|
150 | list: ListValues,
151 | first: () => T | void,
152 | last: () => T | void,
153 | set: Updater>,
154 | push: (...values: ListValues) => void,
155 | pull: (predicate: (T) => boolean) => void,
156 | sort: (compare: (a: T, b: T) => -1 | 0 | 1) => void,
157 | reset: Reset,
158 | |}) => React.Node
159 |
160 | type ListProps =
161 | | {|
162 | initial: ListValues,
163 | onChange?: ListChange,
164 | render: ListRender,
165 | |}
166 | | {|
167 | initial: ListValues,
168 | onChange?: ListChange,
169 | children: ListRender,
170 | |}
171 |
172 | declare export class List extends React.Component> {}
173 |
174 | /* Set */
175 |
176 | type SetValues = $ReadOnlyArray
177 |
178 | type SetChange = (values: SetValues) => void
179 |
180 | type SetRender = ({|
181 | values: SetValues,
182 | add: (key: T) => void,
183 | clear: () => void,
184 | remove: (key: T) => void,
185 | has: (key: T) => boolean,
186 | reset: Reset,
187 | |}) => React.Node
188 |
189 | type SetProps =
190 | | {| initial: SetValues, onChange?: SetChange, render: SetRender |}
191 | | {| initial: SetValues, onChange?: SetChange, children: SetRender |}
192 |
193 | declare export class Set extends React.Component> {}
194 |
195 | /* Map */
196 |
197 | type MapValues = { [key: string]: T }
198 |
199 | type MapChange = (MapValues) => void
200 |
201 | type MapRender = ({|
202 | values: MapValues,
203 | clear: () => void,
204 | reset: Reset,
205 | set: (key: string, value: (T => T) | T) => void,
206 | get: (key: string) => T,
207 | has: (key: string) => boolean,
208 | delete: (key: string) => void,
209 | |}) => React.Node
210 |
211 | type MapProps =
212 | | {| initial: MapValues, onChange?: MapChange, render: MapRender |}
213 | | {| initial: MapValues, onChange?: MapChange, children: MapRender |}
214 |
215 | declare export class Map extends React.Component> {}
216 |
217 | /* State */
218 |
219 | type StateChange = T => void
220 |
221 | type StateRender = ({|
222 | state: T,
223 | setState: (updater: (T => $Shape) | $Shape, cb?: () => void) => void,
224 | resetState: Reset,
225 | |}) => React.Node
226 |
227 | type StateProps =
228 | | {| initial: T, onChange?: StateChange, render: StateRender |}
229 | | {| initial: T, onChange?: StateChange, children: StateRender |}
230 |
231 | declare export class State extends React.Component> {}
232 |
233 | /* Interval */
234 |
235 | type IntervalRender = ({|
236 | start: (delay?: number) => void,
237 | stop: () => void,
238 | toggle: () => void,
239 | |}) => React.Node
240 |
241 | type IntervalProps =
242 | | {| delay?: ?number, render: IntervalRender |}
243 | | {| delay?: ?number, children: IntervalRender |}
244 |
245 | declare export class Interval extends React.Component {}
246 |
247 | /* Toggle */
248 |
249 | type ToggleChange = (on: boolean) => void
250 |
251 | type ToggleRender = ({|
252 | on: boolean,
253 | toggle: () => void,
254 | set: Updater,
255 | setOn: () => void,
256 | setOff: () => void,
257 | reset: Reset,
258 | |}) => React.Node
259 |
260 | declare export var Toggle: React.ComponentType<
261 | | {| initial?: boolean, onChange?: ToggleChange, render: ToggleRender |}
262 | | {| initial?: boolean, onChange?: ToggleChange, children: ToggleRender |}
263 | >
264 |
265 | /* Touch */
266 |
267 | type TouchChange = (touched: boolean) => void
268 |
269 | type TouchRender = ({|
270 | touched: boolean,
271 | bind: {| onTouchStart: () => void, onTouchEnd: () => void |},
272 | |}) => React.Node
273 |
274 | declare export var Touch: React.ComponentType<
275 | | {| onChange?: TouchChange, render: TouchRender |}
276 | | {| onChange?: TouchChange, children: TouchRender |}
277 | >
278 |
279 | /* Value */
280 |
281 | type ValueChange = (value: T) => void
282 |
283 | type ValueRender = ({|
284 | value: T,
285 | set: Updater,
286 | reset: Reset,
287 | |}) => React.Node
288 |
289 | type ValueProps =
290 | | {| initial: T, onChange?: ValueChange, render: ValueRender |}
291 | | {| initial: T, onChange?: ValueChange, children: ValueRender |}
292 |
293 | declare export class Value extends React.Component> {}
294 |
295 | /* composeEvents */
296 |
297 | type Events = { [name: string]: Function }
298 |
299 | declare export function composeEvents(...Array): Events
300 |
--------------------------------------------------------------------------------
/src/utils/compose.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import renderProps from './renderProps'
3 |
4 | const isElement = element => typeof element.type === 'function'
5 |
6 | const compose = (...elements) => {
7 | const reversedElements = elements.reverse()
8 |
9 | return composedProps => {
10 | // Stack children arguments recursively and pass
11 | // it down until the last component that render children
12 | // with these stacked arguments
13 | function stackProps(i, elements, propsList = []) {
14 | const element = elements[i]
15 | const isTheLast = i === 0
16 |
17 | // Check if is latest component.
18 | // If is latest then render children,
19 | // Otherwise continue stacking arguments
20 | const renderFn = props =>
21 | isTheLast
22 | ? renderProps(composedProps, ...propsList.concat(props))
23 | : stackProps(i - 1, elements, propsList.concat(props))
24 |
25 | // Clone a element if it's passed created as
51 | {({ focused, bind }) => {
52 | window.renderFn({ focused })
53 | const props1 = Object.assign({ id: 'rect-1', style }, bind)
54 | const props2 = Object.assign({ id: 'rect-2', style }, bind)
55 | return (
56 | <>
57 |
58 | {focused &&
}
59 |
60 | )
61 | }}
62 |
63 | )
64 |
65 | window.render(
88 | {({ focused, blur, bind }) => {
89 | window.blurFocusManager = blur
90 | const style = { width: 100, height: 100 }
91 | const props1 = Object.assign({ id: 'item1', style }, bind)
92 | const props2 = Object.assign(
93 | { id: 'item2', style, onClick: blur },
94 | bind
95 | )
96 | return (
97 | <>
98 | {focused ? 'focused' : 'blured'}
99 |
100 |
101 |
102 |
103 | )
104 | }}
105 |
106 | )
107 |
108 | window.render({renderFn}
12 | )
13 |
14 | // Initial call
15 | expect(renderFn).toBeCalledTimes(1)
16 |
17 | jest.advanceTimersByTime(1000)
18 |
19 | renderer.update({renderFn} )
20 | expect(renderFn).toBeCalledTimes(4)
21 |
22 | jest.advanceTimersByTime(2000)
23 |
24 | expect(renderFn).toBeCalledTimes(6)
25 |
26 | lastCallArg(renderFn).stop()
27 | jest.advanceTimersByTime(2000)
28 | expect(renderFn).toBeCalledTimes(6)
29 |
30 | lastCallArg(renderFn).start()
31 | lastCallArg(renderFn).start()
32 | jest.advanceTimersByTime(2000)
33 | expect(renderFn).toBeCalledTimes(8)
34 |
35 | lastCallArg(renderFn).toggle()
36 | jest.advanceTimersByTime(2000)
37 | expect(renderFn).toBeCalledTimes(8)
38 |
39 | lastCallArg(renderFn).toggle()
40 | jest.advanceTimersByTime(2000)
41 | expect(renderFn).toBeCalledTimes(10)
42 | })
43 |
--------------------------------------------------------------------------------
/tests/components/List.test.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import TestRenderer from 'react-test-renderer'
3 | import { List } from '../../src'
4 | import { lastCallArg } from './utils'
5 |
6 | test('
', () => {
7 | const renderFn = jest.fn().mockReturnValue(null)
8 | const testRenderer = TestRenderer.create(
9 |
10 | )
11 |
12 | expect(renderFn).toBeCalledTimes(1)
13 | expect(renderFn).lastCalledWith(expect.objectContaining({ list: [1] }))
14 |
15 | lastCallArg(renderFn).push(8)
16 | expect(renderFn).lastCalledWith(expect.objectContaining({ list: [1, 8] }))
17 |
18 | lastCallArg(renderFn).set([9, 2, 3, 4])
19 | expect(renderFn).lastCalledWith(
20 | expect.objectContaining({ list: [9, 2, 3, 4] })
21 | )
22 |
23 | lastCallArg(renderFn).set(list => [...list, 5])
24 | expect(renderFn).lastCalledWith(
25 | expect.objectContaining({ list: [9, 2, 3, 4, 5] })
26 | )
27 |
28 | const listBeforeSort = lastCallArg(renderFn).list
29 | lastCallArg(renderFn).sort()
30 | expect(renderFn).lastCalledWith(
31 | expect.objectContaining({ list: [2, 3, 4, 5, 9] })
32 | )
33 | expect(listBeforeSort).toEqual([9, 2, 3, 4, 5])
34 |
35 | lastCallArg(renderFn).pull(d => d % 2)
36 | expect(renderFn).lastCalledWith(expect.objectContaining({ list: [2, 4] }))
37 |
38 | expect(lastCallArg(renderFn).first()).toEqual(2)
39 | expect(lastCallArg(renderFn).last()).toEqual(4)
40 |
41 | lastCallArg(renderFn).set([])
42 | expect(lastCallArg(renderFn).first()).toEqual(undefined)
43 | expect(lastCallArg(renderFn).last()).toEqual(undefined)
44 |
45 | // support pushing many array
46 | lastCallArg(renderFn).push(1, 2, 3)
47 | expect(renderFn).lastCalledWith(expect.objectContaining({ list: [1, 2, 3] }))
48 |
49 | testRenderer.update(
)
50 | expect(renderFn).lastCalledWith(expect.objectContaining({ list: [1, 2, 3] }))
51 |
52 | lastCallArg(renderFn).reset()
53 | expect(renderFn).lastCalledWith(expect.objectContaining({ list: [1] }))
54 | })
55 |
56 | test('
', () => {
57 | const renderFn = jest.fn().mockReturnValue(null)
58 | const onChangeFn = jest.fn()
59 | TestRenderer.create(
)
60 |
61 | expect(onChangeFn).toBeCalledTimes(0)
62 |
63 | lastCallArg(renderFn).set([1])
64 | expect(onChangeFn).toBeCalledTimes(1)
65 | expect(onChangeFn).lastCalledWith([1])
66 | })
67 |
--------------------------------------------------------------------------------
/tests/components/Map.test.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import TestRenderer from 'react-test-renderer'
3 | import { Map } from '../../src'
4 | import { lastCallArg } from './utils'
5 |
6 | test('{render} ,
47 | {noop} ,
49 | // $FlowFixMe
50 | {render} ,
84 | {noop} ,
86 | {render} ,
111 | {noop} ,
113 | {render} ,
155 | {noop} ,
157 | {render} ,
187 | {noop} ,
189 | // $FlowFixMe
190 | {render} ,
223 | {noop} ,
225 | // $FlowFixMe
226 | {render} ,
339 | {noop} ,
341 | // $FlowFixMe
342 | )
350 | ;(first(): string | number | void)
351 | ;(last(): string | number | void)
352 | set([])
353 | set([0])
354 | push(0)
355 | push(0, 1, 2)
356 | pull((d: number) => true)
357 | sort((a: number, b: number) => -1)
358 | // $FlowFixMe
359 | ;(list: $ReadOnlyArray)
360 | //$FlowFixMe
361 | set([''])
362 | //$FlowFixMe
363 | push('')
364 | //$FlowFixMe
365 | pull((d: string) => true)
366 | //$FlowFixMe
367 | sort((a: string, b: string) => -1)
368 |
369 | reset()
370 | reset(() => {})
371 | //$FlowFixMe
372 | reset(1)
373 | }
374 | const onChange = list => {
375 | ;(list: $ReadOnlyArray)
376 | // $FlowFixMe
377 | ;(list: $ReadOnlyArray)
378 | }
379 | ;[
380 | )} render={render} />,
381 | )}>{render}
,
382 | )}
384 | onChange={onChange}
385 | render={noop}
386 | />,
387 | )} onChange={onChange}>
388 | {noop}
389 |
,
390 | // $FlowFixMe
391 |
,
392 | // $FlowFixMe
393 |
,
394 | // $FlowFixMe
395 | {noop}
,
396 | // $FlowFixMe
397 |
,
398 | // $FlowFixMe
399 | {noop}
,
400 | ]
401 | }
402 |
403 | /* Set */
404 | {
405 | const render = ({ values, add, clear, remove, has, reset }) => {
406 | ;(values: $ReadOnlyArray)
407 | add(0)
408 | add('')
409 | remove(0)
410 | remove('')
411 | ;(has(0): boolean)
412 | ;(has(''): boolean)
413 | clear()
414 | // $FlowFixMe
415 | ;(values: $ReadOnlyArray)
416 | // $FlowFixMe
417 | add(true)
418 | // $FlowFixMe
419 | remove(true)
420 | // $FlowFixMe
421 | ;(has(true): boolean)
422 |
423 | reset()
424 | reset(() => {})
425 | // $FlowFixMe
426 | reset(1)
427 | return null
428 | }
429 | const onChange = values => {
430 | ;(values: $ReadOnlyArray)
431 | // $FlowFixMe
432 | ;(values: $ReadOnlyArray)
433 | }
434 | ;[
435 | )} render={render} />,
436 | )}>{render} ,
437 | )}
439 | onChange={onChange}
440 | render={noop}
441 | />,
442 | )} onChange={onChange}>
443 | {noop}
444 | ,
445 | ]
446 | }
447 |
448 | /* Map */
449 | {
450 | const render = ({
451 | values,
452 | clear,
453 | reset,
454 | set,
455 | get,
456 | has,
457 | delete: deleteItem,
458 | }) => {
459 | // unsafe access do not consider keys
460 | ;(values.a: number)
461 | ;(values.b: number)
462 | ;(get('a'): number)
463 | ;(get('b'): number)
464 | // $FlowFixMe
465 | ;(values.a: string)
466 | // $FlowFixMe
467 | ;(get('a'): string)
468 | set('a', 0)
469 | set('a', (value: number) => 0)
470 | // $FlowFixMe
471 | set('a', '')
472 | // $FlowFixMe
473 | set('a', (value: string) => 0)
474 | // $FlowFixMe
475 | set('a', (value: number) => '')
476 | ;(has('a'): boolean)
477 | ;(has('b'): boolean)
478 | // $FlowFixMe
479 | ;(get('a'): string)
480 |
481 | reset()
482 | reset(() => {})
483 | // $FlowFixMe
484 | reset(1)
485 | // $FlowFixMe
486 | ;(has('a'): number)
487 | deleteItem('a')
488 | // $FlowFixMe
489 | deleteItem(0)
490 | return null
491 | }
492 |
493 | const onChange = values => {
494 | ;(values.a: number)
495 | ;(values.b: number)
496 | }
497 | ;[
498 | {render} ,
500 |
502 | {noop}
503 | ,
504 | ]
505 | }
506 |
507 | /* State with inferred generic */
508 | {
509 | const render = ({ state, setState, resetState }) => {
510 | ;(state.v: number)
511 | setState({}, () => {})
512 | setState({ v: 1 })
513 | // $FlowFixMe
514 | ;(state.v: string)
515 | // $FlowFixMe
516 | setState({ v: '' })
517 | // $FlowFixMe
518 | setState({ t: 1 })
519 | // $FlowFixMe
520 | setState({ n: 2 })
521 |
522 | resetState()
523 | resetState(() => {})
524 |
525 | // $FlowFixMe
526 | resetState(1)
527 | }
528 | const onChange = state => {
529 | ;(state.v: number)
530 | // $FlowFixMe
531 | ;(state.v: string)
532 | }
533 | ;[
534 | {render} ,
536 |
538 | {noop}
539 | ,
540 | // $FlowFixMe
541 | {render1} ,
563 | ]
564 | }
565 |
566 | /* Toggle */
567 | {
568 | const render = ({ on, toggle, set, setOn, setOff, reset }) => {
569 | ;(on: boolean)
570 | toggle()
571 | set(true)
572 | set(v => !v)
573 | setOn()
574 | setOff()
575 | // $FlowFixMe
576 | ;(on: number)
577 | // $FlowFixMe
578 | toggle(true)
579 | // $FlowFixMe
580 | set(0)
581 |
582 | reset()
583 | reset(() => {})
584 | // $FlowFixMe
585 | reset(1)
586 | return null
587 | }
588 | const onChange = on => {
589 | ;(on: boolean)
590 | // $FlowFixMe
591 | ;(on: number)
592 | }
593 | ;[
594 | {render} ,
596 | {noop} ,
598 | {render} ,
628 | {noop} ,
630 | // $FlowFixMe
631 | {render} ,
663 |
665 | {noop}
666 | ,
667 | // $FlowFixMe
668 | {render1} ,
685 | ]
686 | }
687 |
--------------------------------------------------------------------------------
/tests/utils/compose.test.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import TestRenderer from 'react-test-renderer'
3 | import { compose, Counter, Toggle } from '../../src'
4 |
5 | test('rerender composed component', () => {
6 | const CounterToggle = compose(Counter, Toggle)
7 | const renderFn = jest.fn().mockReturnValue(null)
8 | let rerender = null
9 |
10 | TestRenderer.create(
11 |
12 | {({ on, toggle }) => {
13 | rerender = toggle
14 |
15 | return (
16 | // hard rerender
17 |
21 | )
22 |
23 | expect(renderFn).toBeCalledTimes(1)
24 | expect(renderFn).lastCalledWith(
25 | expect.objectContaining({ count: 0 }),
26 | expect.objectContaining({ on: false })
27 | )
28 |
29 | rerender()
30 |
31 | expect(renderFn).toBeCalledTimes(2)
32 | expect(renderFn).lastCalledWith(
33 | expect.objectContaining({ count: 0 }),
34 | expect.objectContaining({ on: false })
35 | )
36 | })
37 |
--------------------------------------------------------------------------------
/tests/utils/composeEvents.test.js:
--------------------------------------------------------------------------------
1 | import { composeEvents } from '../../src'
2 |
3 | test('composeEvents should call all events', () => {
4 | const arr = []
5 | const composed = composeEvents(
6 | {
7 | onMouseEnter: () => arr.push(1),
8 | },
9 | {
10 | onMouseEnter: () => arr.push(2),
11 | onMouseLeave: () => arr.push(3),
12 | },
13 | {
14 | onMouseEnter: () => arr.push(4),
15 | onMouseLeave: () => arr.push(5),
16 | },
17 | {
18 | onMouseLeave: () => arr.push(6),
19 | }
20 | )
21 |
22 | composed.onMouseEnter()
23 | composed.onMouseLeave()
24 |
25 | expect(arr).toEqual([1, 2, 4, 3, 5, 6])
26 | })
27 |
--------------------------------------------------------------------------------
/tests/utils/renderProps.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | import { renderProps } from '../../src'
4 |
5 | console.warn = jest.fn()
6 | console.trace = jest.fn()
7 |
8 | test('renderProps should use children prop when alone', () => {
9 | const props = { children: value => value + 1 }
10 |
11 | expect(renderProps(props, 1)).toBe(2)
12 | })
13 |
14 | test('renderProps should use render prop when alone', () => {
15 | const props = { render: value => value + 1 }
16 |
17 | expect(renderProps(props, 1)).toBe(2)
18 | })
19 |
20 | test('renderProps should use children when together and warns the user', () => {
21 | const props = { children: value => value + 1, render: value => value - 1 }
22 |
23 | expect(renderProps(props, 1)).toBe(2)
24 | expect(console.warn.mock.calls.length).toBe(1)
25 | expect(console.trace.mock.calls.length).toBe(1)
26 | })
27 |
--------------------------------------------------------------------------------
/types/index.d.ts:
--------------------------------------------------------------------------------
1 | // TypeScript Version: 2.4
2 |
3 | import * as React from 'react'
4 |
5 | /* Utils */
6 |
7 | export type SharedProps = {
8 | reset(cb?: () => void): void
9 | resetState(): void
10 | }
11 |
12 | export type Updater = (value: T | ((updater: T) => T)) => void
13 | export type Callback = (value: T) => void
14 | export type RenderFn = (value: T & SharedProps) => React.ReactNode
15 |
16 | /* Active */
17 |
18 | export type ActiveChange = (active: boolean) => void
19 |
20 | export type ActiveRender = (
21 | argument: {
22 | active: boolean
23 | bind: { onMouseDown: () => void; onMouseUp: () => void }
24 | }
25 | ) => React.ReactNode
26 |
27 | export const Active: React.ComponentType<
28 | | { onChange?: ActiveChange; render: ActiveRender }
29 | | { onChange?: ActiveChange; children: ActiveRender }
30 | >
31 |
32 | /* Compose */
33 |
34 | export const Compose: React.ComponentType
35 |
36 | /* Counter */
37 |
38 | export type CounterChange = Callback
39 |
40 | export type CounterRender = RenderFn<{
41 | count: number
42 | inc: () => void
43 | dec: () => void
44 | incBy: (step: number) => void
45 | decBy: (step: number) => void
46 | }>
47 |
48 | export const Counter: React.ComponentType<
49 | | { initial?: number; onChange?: CounterChange; render: CounterRender }
50 | | { initial?: number; onChange?: CounterChange; children: CounterRender }
51 | >
52 |
53 | /* Focus */
54 |
55 | export type FocusChange = Callback
56 |
57 | export type FocusRender = RenderFn<{
58 | focused: boolean
59 | bind: { onFocus: () => void; onBlur: () => void }
60 | }>
61 |
62 | export const Focus: React.ComponentType<
63 | | { onChange?: FocusChange; render: FocusRender }
64 | | { onChange?: FocusChange; children: FocusRender }
65 | >
66 |
67 | /* FocusManager */
68 |
69 | export type FocusManagerChange = Callback
70 |
71 | export type FocusManagerRender = RenderFn<{
72 | focused: boolean
73 | blur: () => void
74 | bind: {
75 | tabIndex: number
76 | onFocus: () => void
77 | onBlur: () => void
78 | onMouseDown: () => void
79 | onMouseUp: () => void
80 | }
81 | }>
82 |
83 | export const FocusManager: React.ComponentType<
84 | | { onChange?: FocusManagerChange; render: FocusManagerRender }
85 | | { onChange?: FocusManagerChange; children: FocusManagerRender }
86 | >
87 |
88 | /* Form */
89 |
90 | export type FormChange = Callback
91 |
92 | export type FormRender = RenderFn<{
93 | values: T
94 | setValues: (values: T | ((a: T) => T)) => void
95 | field: (
96 | key: K
97 | ) => {
98 | value: T[K]
99 | set: Updater
100 | bind: {
101 | value: T[K]
102 | onChange: (argument: React.ChangeEvent | T[K]) => void
103 | }
104 | }
105 | }>
106 |
107 | export type FormProps =
108 | | { initial: T; onChange?: FormChange; render: FormRender }
109 | | { initial: T; onChange?: FormChange; children: FormRender }
110 |
111 | export interface Hash {
112 | [key: string]: string
113 | }
114 |
115 | export class Form extends React.Component<
116 | FormProps,
117 | any
118 | > {}
119 |
120 | /* Hover */
121 |
122 | export type HoverChange = Callback
123 |
124 | export type HoverRender = RenderFn<{
125 | hovered: boolean
126 | bind: { onMouseEnter: () => void; onMouseLeave: () => void }
127 | }>
128 |
129 | export const Hover: React.ComponentType<
130 | | { onChange?: HoverChange; render: HoverRender }
131 | | { onChange?: HoverChange; children: HoverRender }
132 | >
133 |
134 | /* Field */
135 |
136 | export type FieldChange = Callback
137 |
138 | export type FieldRender = RenderFn<{
139 | value: T
140 | set: Updater
141 | bind: { value: T; onChange: (event: React.ChangeEvent) => void }
142 | }>
143 |
144 | export type FieldProps =
145 | | { initial?: T; onChange?: FieldChange; render: FieldRender }
146 | | { initial?: T; onChange?: FieldChange; children: FieldRender }
147 |
148 | export class Field extends React.Component> {}
149 |
150 | /* List */
151 |
152 | export type ListChange = Callback>
153 |
154 | export type ListRender = RenderFn<{
155 | list: ReadonlyArray
156 | first: () => T | void
157 | last: () => T | void
158 | set: Updater>
159 | push: (value: T) => void
160 | pull: (predicate: (flag: T) => boolean) => void
161 | sort: (compare: (a: T, b: T) => -1 | 0 | 1) => void
162 | }>
163 |
164 | export type ListProps =
165 | | {
166 | initial: ReadonlyArray
167 | onChange?: ListChange
168 | render: ListRender
169 | }
170 | | {
171 | initial: ReadonlyArray
172 | onChange?: ListChange
173 | children: ListRender
174 | }
175 |
176 | export class List extends React.Component, any> {}
177 |
178 | /* Set */
179 |
180 | export type SetChange = Callback>
181 |
182 | export type SetRender = RenderFn<{
183 | values: ReadonlyArray
184 | add: (key: T) => void
185 | clear: () => void
186 | remove: (key: T) => void
187 | has: (key: T) => boolean
188 | }>
189 |
190 | export type SetProps =
191 | | {
192 | initial: ReadonlyArray
193 | onChange?: SetChange
194 | render: SetRender
195 | }
196 | | {
197 | initial: ReadonlyArray
198 | onChange?: SetChange
199 | children: SetRender
200 | }
201 |
202 | export class Set extends React.Component> {}
203 |
204 | /* Map */
205 |
206 | export type MapValues = { [key: string]: T }
207 | export type MapChange = Callback
208 |
209 | export type MapRender = RenderFn<{
210 | values: MapValues
211 | set: (key: K, fn: T | ((value: T) => T)) => void
212 | get: (key: K) => T
213 | has: (key: K) => boolean
214 | delete: (key: K) => void
215 | clear: () => void
216 | }>
217 |
218 | export type MapProps =
219 | | { initial: T; onChange?: MapChange; render: MapRender }
220 | | { initial: T; onChange?: MapChange; children: MapRender }
221 |
222 | export class Map extends React.Component<
223 | MapProps,
224 | any
225 | > {}
226 |
227 | /* State */
228 |
229 | export type StateChange = Callback
230 |
231 | export type StateRender = RenderFn<{
232 | state: T
233 | setState: (
234 | updated: Partial | ((state: T) => Partial),
235 | cb?: () => void
236 | ) => void
237 | }>
238 |
239 | export type StateProps =
240 | | { initial: T; onChange?: StateChange; render: StateRender }
241 | | { initial: T; onChange?: StateChange; children: StateRender }
242 |
243 | export class State extends React.Component> {}
244 |
245 | /* Toggle */
246 |
247 | export type ToggleChange = Callback
248 |
249 | export type ToggleRender = RenderFn<{
250 | on: boolean
251 | toggle: () => void
252 | set: Updater
253 | }>
254 |
255 | export const Toggle: React.ComponentType<
256 | | { initial?: boolean; onChange?: ToggleChange; render: ToggleRender }
257 | | { initial?: boolean; onChange?: ToggleChange; children: ToggleRender }
258 | >
259 |
260 | /* Touch */
261 |
262 | export type TouchChange = Callback
263 |
264 | export type TouchRender = RenderFn<{
265 | touched: boolean
266 | bind: { onTouchStart: () => void; onTouchEnd: () => void }
267 | }>
268 |
269 | export const Touch: React.ComponentType<
270 | | { onChange?: TouchChange; render: TouchRender }
271 | | { onChange?: TouchChange; children: TouchRender }
272 | >
273 |
274 | /* Value */
275 |
276 | export type ValueChange = Callback
277 |
278 | export type ValueRender = RenderFn<{
279 | value: T
280 | set: Updater
281 | }>
282 |
283 | export type ValueProps =
284 | | { initial: T; onChange?: ValueChange; render: ValueRender }
285 | | { initial: T; onChange?: ValueChange; children: ValueRender }
286 |
287 | export class Value extends React.Component> {}
288 |
289 | /* composeEvents */
290 |
291 | export interface Events {
292 | [name: string]: (event: any) => void
293 | }
294 |
295 | export function composeEvents(...arguments: Events[]): Events
296 |
--------------------------------------------------------------------------------
/types/test.tsx:
--------------------------------------------------------------------------------
1 | /* tslint-disable */
2 | // TypeScript Version: 2.7
3 |
4 | import * as React from 'react'
5 | import {
6 | Active,
7 | Input,
8 | Counter,
9 | Focus,
10 | FocusManager,
11 | Form,
12 | Hover,
13 | List,
14 | Map,
15 | Set,
16 | State,
17 | Toggle,
18 | Touch,
19 | Value,
20 | ListRender,
21 | SetRender,
22 | MapRender,
23 | StateRender,
24 | ToggleRender,
25 | TouchRender,
26 | ValueRender,
27 | ActiveRender,
28 | InputRender,
29 | CounterRender,
30 | FocusRender,
31 | FocusManagerRender,
32 | FormRender,
33 | HoverRender,
34 | } from './index'
35 |
36 | const noop = () => null
37 |
38 | /* Active */
39 | {
40 | const render: ActiveRender = ({ active, bind }) => {
41 | return null
42 | }
43 | const onChange = (active: boolean) => {}
44 | ;[
45 | {render} ,
47 | {noop} ,
49 | // $ExpectError
50 | {render} ,
89 | {noop} ,
91 | {render} ,
108 | {noop} ,
110 | // $ExpectError
111 | {render} ,
124 | {noop} ,
126 | // $ExpectError
127 |
134 | const onChange = (data: {}) => {}
135 | ;[
136 | ,
137 | ,
138 | ,
139 | ,
142 | // $ExpectError
143 | ,
144 | // $ExpectError
145 | ,
146 | // $ExpectError
147 | ,
148 | // $ExpectError
149 | ,
150 | // $ExpectError
151 | ,
152 | ]
153 | }
154 |
155 | /* Hover */
156 | {
157 | const render: HoverRender = ({ hovered, bind }) => {
158 | return null
159 | }
160 | const onChange = (hovered: boolean) => {}
161 | ;[
162 | {render} ,
164 | {noop} ,
166 | // $ExpectError
167 | = ({
174 | list,
175 | first,
176 | last,
177 | set,
178 | push,
179 | pull,
180 | sort,
181 | }) =>
182 |
183 | const onChange = (list: number[]) => {}
184 | ;[
185 |
,
186 | {render}
,
187 |
,
188 |
189 | {noop}
190 |
,
191 | // $ExpectError
192 |
,
193 | // $ExpectError
194 |
,
195 | // $ExpectError
196 | {noop}
,
197 | // $ExpectError
198 |
,
199 | // $ExpectError
200 | {noop}
,
201 | ]
202 | }
203 |
204 | /* Set */
205 | {
206 | const render: SetRender = ({ values, add, clear, remove, has }) => {
207 | return null
208 | }
209 | const onChange = (values: number[]) => {}
210 | ;[
211 | {render} ,
213 |
215 | {noop}
216 | ,
217 | ]
218 | }
219 |
220 | /* Map */
221 | {
222 | const render: MapRender<{ a: number }, 'a'> = ({ values, set, get }) => {
223 | return null
224 | }
225 | const onChange = (values: { a: number }) => {}
226 | ;[
227 | {render} ,
229 |
231 | {noop}
232 | ,
233 | // $ExpectError
234 |
244 | const onChange = (state: { v: number; n?: null }) => {}
245 | ;[
246 | {render} ,
248 |
250 | {noop}
251 | ,
252 | {render} ,
269 | {noop} ,
271 | {render} ,
288 | {noop} ,
290 | // $ExpectError
291 | = ({ value, set }) =>
298 | const renderS: ValueRender = ({ value, set }) =>
299 | const onChangeN = (value: number) => {}
300 | const onChangeS = (value: string) => {}
301 | ;[
302 | {renderS} ,
304 |
306 | {noop}
307 | ,
308 |
309 | {({ set }) => +{set(42) && set(x => x + 1) && '1'}
}
310 | ,
311 | // $ExpectError
312 |
313 | {({ set }) => +{set('42') && set(x => x + 1) && '1'}
}
314 | ,
315 | // $ExpectError
316 |
317 | {({ set }) => +{set(42) && set(x => x + '1') && '1'}
}
318 | ,
319 | // $ExpectError
320 | {renderN} ,
327 | ]
328 | }
329 |
--------------------------------------------------------------------------------
/types/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "commonjs",
4 | "lib": ["es5"],
5 | "jsx": "react",
6 | "noImplicitAny": true,
7 | "noImplicitThis": true,
8 | "strictNullChecks": true,
9 | "noEmit": true,
10 | "strictFunctionTypes": false
11 | }
12 | }
--------------------------------------------------------------------------------
3 | 
8 |
9 |
10 | 
11 |
12 |
13 | 
14 |
15 | 
70 |
71 | 
