Use property getter technique

GH-2

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}) =>
     <div
-        onMouseEnter={() => 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',

packages/simple-actions/hz-hoverable/src/index.js

@@ -32,6 +32,16 @@ class Hoverable extends Component<Props, State> {
     }
   }
 
+  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<Props, State> {
   };
 
   render() {
-    return this.props.render({
-      ...this.props,
-      ...this.state,
-      setHover: this.handleSetHover,
-    });
+    return this.props.render(this.getHoverableReturnProps());
   }
 }
 

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}) =>
     <div
-        onMouseDown={() => 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',
         }}

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<Props, State> {
   state = {...intialState};
@@ -44,6 +34,16 @@ class Pressible extends Component<Props, State> {
     }
   }
 
+  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<Props, State> {
   };
 
   render() {
-    return this.props.render({
-      ...this.props,
-      ...this.state,
-      setPress: this.handlePress,
-    });
+    return this.props.render(this.getPressibleReturnProps());
   }
 }
 

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}) =>
     <div
-        onMouseEnter={() => 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'}
     </div>;
 
 <Switch render={mySwitch} />
@@ -78,28 +78,28 @@ const textStyles = {
     fontFamily: 'Courier',
 }
 
-const mySwitch = ({isOn, hovered, pressed, setPress, setHover, setToggleSwitch}) =>
+const mySwitch = ({getSwitchProps}) =>
     <div
-        onMouseEnter={() => 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',
         }}
     >
         <div
             style={{
                 ...leverStyles,
-                backgroundColor: isOn ? '#00ab00' : '#333333',
-                transform: isOn ? 'translateX(100%)' : 'translateX(0)',
+                backgroundColor: getSwitchProps.on ? '#00ab00' : '#333333',
+                transform: getSwitchProps.on ? 'translateX(100%)' : 'translateX(0)',
             }}
         >
-            <span style={textStyles}>{isOn ? '1' : '0'}</span>
+            <span style={textStyles}>{getSwitchProps.on ? '1' : '0'}</span>
         </div>
     </div>;
 
@@ -138,31 +138,31 @@ const checkbox = {
     borderRadius: 2,
 };
 
-const mySwitch = ({isOn, hovered, pressed, setPress, setHover, setToggleSwitch}) =>
+const mySwitch = ({getSwitchProps}) =>
     <div
         style={checkboxWrapper}
     >
         <input
             type="checkbox"
-            onMouseEnter={() => 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}
         />
         <div
             style={{
                 ...checkbox,
-                backgroundColor: isOn ? 'green' : 'gray',
-                transform: pressed ? 'scale(0.9)' : 'scale(1)',
-                boxShadow: hovered ? 'inset rgba(0, 0, 0, 0.6) 0px 0px 10px 1px' : '',
+                backgroundColor: getSwitchProps.on ? 'green' : 'gray',
+                transform: getSwitchProps.pressed ? 'scale(0.9)' : 'scale(1)',
+                boxShadow: getSwitchProps.hovered ? 'inset rgba(0, 0, 0, 0.6) 0px 0px 10px 1px' : '',
             }}
         >
-            <span>{isOn ? '✔' : '✕'}</span>
+            <span>{getSwitchProps.on ? '✔' : '✕'}</span>
         </div>
         <span style={{paddingLeft: '10px', fontFamily: 'arial'}}>Sign Me Up!</span>
     </div>;

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<Props, State> {
     }
   }
 
-  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<Props, State> {
           render={pressibleProps => (
             <Hoverable
               render={hoverableProps =>
-                this.props.render({
-                  ...pressibleProps,
-                  ...hoverableProps,
-                  ...this.state,
-                  setToggleSwitch: this.handleToggleSwitch,
-                })
+                this.props.render(
+                  this.getSwitchReturnProps({
+                    ...pressibleProps.getPressibleProps,
+                    ...hoverableProps.getHoverableProps,
+                  }),
+                )
               }
             />
           )}