diff --git a/packages/simple-actions/hz-hoverable/readme.md b/packages/simple-actions/hz-hoverable/readme.md index 0dc4313..b58cfb3 100644 --- a/packages/simple-actions/hz-hoverable/readme.md +++ b/packages/simple-actions/hz-hoverable/readme.md @@ -1,12 +1,12 @@ A component that manages a focused state for the children. ```js -const cardComponent = ({hovered, setHover}) => +const cardComponent = ({getHoverableProps}) =>
setHover(true)} - onMouseLeave={() => setHover(false)} + onMouseEnter={() => getHoverableProps.setHover(true)} + onMouseLeave={() => getHoverableProps.setHover(false)} style={{ - backgroundColor: hovered ? 'blue' : 'purple', + backgroundColor: getHoverableProps.hovered ? 'blue' : 'purple', color: 'white', padding: 10, display: 'inline-block', diff --git a/packages/simple-actions/hz-hoverable/src/index.js b/packages/simple-actions/hz-hoverable/src/index.js index ed96dbd..0e57ebe 100644 --- a/packages/simple-actions/hz-hoverable/src/index.js +++ b/packages/simple-actions/hz-hoverable/src/index.js @@ -32,6 +32,16 @@ class Hoverable extends Component { } } + getHoverableReturnProps() { + return { + getHoverableProps: { + ...this.props, + ...this.state, + setHover: this.handleSetHover, + }, + }; + } + handleSetHover = (hovered: boolean) => { this.setState((state: State): ?State => { if (hovered === state.hovered) return null; @@ -40,11 +50,7 @@ class Hoverable extends Component { }; render() { - return this.props.render({ - ...this.props, - ...this.state, - setHover: this.handleSetHover, - }); + return this.props.render(this.getHoverableReturnProps()); } } diff --git a/packages/simple-actions/hz-pressible/readme.md b/packages/simple-actions/hz-pressible/readme.md index 3132b4c..3b6ff50 100644 --- a/packages/simple-actions/hz-pressible/readme.md +++ b/packages/simple-actions/hz-pressible/readme.md @@ -2,12 +2,12 @@ A component that manages a pressed state for the children. ```js -const myPressible = ({pressed, setPress}) => +const myPressible = ({getPressibleProps}) =>
setPress(true)} - onMouseUp={() => setPress(false)} + onMouseDown={() => getPressibleProps.setPress(true)} + onMouseUp={() => getPressibleProps.setPress(false)} style={{ - backgroundColor: pressed ? 'pink' : 'gray', + backgroundColor: getPressibleProps.pressed ? 'pink' : 'gray', padding: 10, display: 'inline-block', }} diff --git a/packages/simple-actions/hz-pressible/src/index.js b/packages/simple-actions/hz-pressible/src/index.js index 2a346c8..6331c32 100644 --- a/packages/simple-actions/hz-pressible/src/index.js +++ b/packages/simple-actions/hz-pressible/src/index.js @@ -4,19 +4,10 @@ import {Component} from 'react'; // eslint-disable-next-line no-duplicate-imports import type {Element} from 'react'; -type RenderProps = {}; +type RenderProps = {any: any}; type Props = { - /** - * Something something - * @param {[type]} props [description] - * @return {[type]} [description] - */ render: (props: RenderProps) => Element<*>, - /** - * [value description] - * @type {[type]} - */ onPress?: (value: boolean) => void, }; @@ -30,7 +21,6 @@ const intialState = { /** * This is a basic pressible component - * @returns Component */ class Pressible extends Component { state = {...intialState}; @@ -44,6 +34,16 @@ class Pressible extends Component { } } + getPressibleReturnProps(): {_: {}} { + return { + getPressibleProps: { + ...this.props, + ...this.state, + setPress: this.handlePress, + }, + }; + } + handlePress = (pressed: boolean) => { this.setState((state: State): ?State => { if (pressed === state.pressed) return null; @@ -52,11 +52,7 @@ class Pressible extends Component { }; render() { - return this.props.render({ - ...this.props, - ...this.state, - setPress: this.handlePress, - }); + return this.props.render(this.getPressibleReturnProps()); } } diff --git a/packages/simple-actions/hz-switch/readme.md b/packages/simple-actions/hz-switch/readme.md index d02b53d..b2faa3e 100644 --- a/packages/simple-actions/hz-switch/readme.md +++ b/packages/simple-actions/hz-switch/readme.md @@ -16,23 +16,23 @@ const switchStyles = { borderRadius: 5, }; -const mySwitch = ({isOn, hovered, pressed, setPress, setHover, setToggleSwitch}) => +const mySwitch = ({getSwitchProps}) =>
setHover(true)} - onMouseLeave={() => setHover(false)} + onMouseEnter={() => getSwitchProps.setHover(true)} + onMouseLeave={() => getSwitchProps.setHover(false)} onMouseDown={() => { - setToggleSwitch(); - setPress(true); + getSwitchProps.setToggleSwitch(); + getSwitchProps.setPress(true); }} - onMouseUp={() => setPress(false)} + onMouseUp={() => getSwitchProps.setPress(false)} style={{ ...switchStyles, - backgroundColor: isOn ? '#00ab00' : '#ec4444', - border: hovered ? '3px solid rgba(0, 0, 0, 0.5)' : '3px solid rgba(0, 0, 0, 0.2)', - boxShadow: pressed ? 'rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px' : 'rgba(0, 0, 0, 0.3) 0px 2px 6px, rgba(0, 0, 0, 0.3) 0px 1px 4px', + backgroundColor: getSwitchProps.on ? '#00ab00' : '#ec4444', + border: getSwitchProps.hovered ? '3px solid rgba(0, 0, 0, 0.5)' : '3px solid rgba(0, 0, 0, 0.2)', + boxShadow: getSwitchProps.pressed ? 'rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px' : 'rgba(0, 0, 0, 0.3) 0px 2px 6px, rgba(0, 0, 0, 0.3) 0px 1px 4px', }} > - {isOn ? 'On' : 'Off'} + {getSwitchProps.on ? 'On' : 'Off'}
; @@ -78,28 +78,28 @@ const textStyles = { fontFamily: 'Courier', } -const mySwitch = ({isOn, hovered, pressed, setPress, setHover, setToggleSwitch}) => +const mySwitch = ({getSwitchProps}) =>
setHover(true)} - onMouseLeave={() => setHover(false)} + onMouseEnter={() => getSwitchProps.setHover(true)} + onMouseLeave={() => getSwitchProps.setHover(false)} onMouseDown={() => { - setToggleSwitch(); - setPress(true); + getSwitchProps.setToggleSwitch(); + getSwitchProps.setPress(true); }} - onMouseUp={() => setPress(false)} + onMouseUp={() => getSwitchProps.setPress(false)} style={{ ...trackStyles, - backgroundColor: isOn ? '#75dc75' : 'gray', + backgroundColor: getSwitchProps.on ? '#75dc75' : 'gray', }} >
- {isOn ? '1' : '0'} + {getSwitchProps.on ? '1' : '0'}
; @@ -138,31 +138,31 @@ const checkbox = { borderRadius: 2, }; -const mySwitch = ({isOn, hovered, pressed, setPress, setHover, setToggleSwitch}) => +const mySwitch = ({getSwitchProps}) =>
setHover(true)} - onMouseLeave={() => setHover(false)} + onMouseEnter={() => getSwitchProps.setHover(true)} + onMouseLeave={() => getSwitchProps.setHover(false)} onMouseDown={() => { - setToggleSwitch(); - setPress(true); + getSwitchProps.setToggleSwitch(); + getSwitchProps.setPress(true); }} - onMouseUp={() => setPress(false)} - checked={isOn} + onMouseUp={() => getSwitchProps.setPress(false)} + checked={getSwitchProps.on} style={shadowCheckbox} />
- {isOn ? '✔' : '✕'} + {getSwitchProps.on ? '✔' : '✕'}
Sign Me Up!
; diff --git a/packages/simple-actions/hz-switch/src/index.js b/packages/simple-actions/hz-switch/src/index.js index 82f5fc5..84d05c9 100644 --- a/packages/simple-actions/hz-switch/src/index.js +++ b/packages/simple-actions/hz-switch/src/index.js @@ -6,12 +6,8 @@ import Pressible from '../../hz-pressible/src/index'; // eslint-disable-next-line no-duplicate-imports import type {Element} from 'react'; -type RenderProps = { - setToggleSwitch: () => void, -}; - type Props = { - render: (props: RenderProps) => Element<*>, + render: (props: {any: any}) => Element<*>, defaultOn: boolean, /** * Provide optional default value @@ -43,16 +39,27 @@ class Switch extends Component { } } - handleToggleSwitch = () => { - this.setState((state: State): ?State => ({...state, isOn: !state.isOn})); getOn(state: State = this.state): boolean { return this.isOnControlled() ? this.props.on : state.on; } + getSwitchReturnProps(ancestorGetters: {}): {} { + return { + getSwitchProps: { + ...ancestorGetters, + ...this.props, + ...this.state, + setToggleSwitch: this.handleToggleSwitch, + }, + }; + } + isOnControlled(): boolean { return this.props.on !== undefined; } + handleToggleSwitch = (): void => { + this.setState((state: State): ?State => ({...state, on: !state.on})); }; render() { @@ -70,12 +77,12 @@ class Switch extends Component { render={pressibleProps => ( - this.props.render({ - ...pressibleProps, - ...hoverableProps, - ...this.state, - setToggleSwitch: this.handleToggleSwitch, - }) + this.props.render( + this.getSwitchReturnProps({ + ...pressibleProps.getPressibleProps, + ...hoverableProps.getHoverableProps, + }), + ) } /> )}