feat/useToggleValue (#1019)

* Replace unsafe method with getDerivedStateFromProps

* added testing-library support for hooks unit tests

* add useToggleValue to easily replace useState of two value, works as toggle between any two values

* export useToggleValue hook

* fix test wrong import

* introduce Hooks type, contains useToggleValue custom hook

Author: mendyEdri

generatedTypes/commons/new.d.ts

@@ -3,4 +3,5 @@ export { default as asBaseComponent, BaseComponentInjectedProps } from './asBase
 export { default as forwardRef, ForwardRefInjectedProps } from './forwardRef';
 export { default as withScrollEnabler, WithScrollEnablerProps } from './withScrollEnabler';
 export { default as withScrollReached, WithScrollReachedProps } from './withScrollReached';
+export { default as useToggleValue } from './useToggleValue';
 export { ContainerModifiers, MarginModifiers, PaddingModifiers, TypographyModifiers, ColorsModifiers, BackgroundColorModifier } from './modifiers';

generatedTypes/commons/useToggleValue/index.d.ts

@@ -0,0 +1,2 @@
+declare const useToggleValue: (initial: any, second?: any) => any[];
+export default useToggleValue;

generatedTypes/index.d.ts

@@ -6,6 +6,7 @@
 export * from './style';
 export * from './services';
 export * as Incubator from './incubator';
+export * as Hooks from './hooks';
 export {
   asBaseComponent,
   withScrollEnabler,
@@ -19,7 +20,8 @@ export {
   PaddingModifiers,
   TypographyModifiers,
   ColorsModifiers,
-  BackgroundColorModifier
+  BackgroundColorModifier,
+  useToggleValue
 } from './commons/new';
 export {default as ActionBar, ActionBarProps} from './components/actionBar';
 export {default as Avatar, AvatarPropTypes} from './components/avatar';

package.json

@@ -69,6 +69,7 @@
     "@react-native-community/eslint-config": "^1.1.0",
     "@react-native-community/netinfo": "^5.6.2",
     "@react-native-community/picker": "^1.6.5",
+    "@testing-library/react-hooks": "^3.4.2",
     "@types/lodash": "^4.0.0",
     "@types/prop-types": "^15.5.3",
     "@types/react-native": "0.62.2",

src/commons/new.ts

@@ -4,6 +4,7 @@ export {default as asBaseComponent, BaseComponentInjectedProps} from './asBaseCo
 export {default as forwardRef, ForwardRefInjectedProps} from './forwardRef';
 export {default as withScrollEnabler, WithScrollEnablerProps} from './withScrollEnabler';
 export {default as withScrollReached, WithScrollReachedProps} from './withScrollReached';
+
 export {
   ContainerModifiers,
   MarginModifiers,

src/hooks/index.ts

@@ -0,0 +1 @@
+export {default as useToggleValue} from './useToggleValue';

src/hooks/useToggleValue/__tests__/useToggleValue.spec.js

@@ -0,0 +1,89 @@
+import {renderHook, act} from '@testing-library/react-hooks';
+import useToggleValue from '../index';
+
+describe('useOrientation hook tests', () => {
+  const makeSUT = (initial, secondary) => {
+    return renderHook(() => {
+      return useToggleValue(initial, secondary);
+    });
+  };
+
+  const getValue = (result) => {
+    return result.current[0];
+  };
+
+  const getToggle = (result) => {
+    return result.current[1]();
+  };
+
+  const expectValueToToggle = (a, b) => {
+    const {result} = makeSUT(a, b);
+    expect(getValue(result)).toEqual(a);
+  
+    act(() => getToggle(result));
+    expect(getValue(result)).toEqual(b);
+  };
+
+  it('Initial value should be set', () => {
+    const {result} = makeSUT(true, false);
+
+    expect(getValue(result)).toEqual(true);
+  });
+
+  it('Initial value can be undefined', () => {
+    const {result} = makeSUT(undefined, 'Sid');
+    expect(getValue(result)).toEqual(undefined);
+
+    act(() => getToggle(result));
+    expect(getValue(result)).toEqual('Sid');
+  });
+
+  it('Initial value can be change', () => {
+    const {result} = makeSUT(true, false);
+    act(() => getToggle(result));
+    
+    expect(getValue(result)).toEqual(false);
+  });
+
+  it('Allow toggle boolean without passing a second parameter', () => {
+    const {result} = makeSUT(true);
+    act(() => getToggle(result));
+    
+    expect(getValue(result)).toEqual(false);
+  });
+
+  it('Can toggle strings', () => {
+    const a = 'Ohio';
+    const b = 'Texas';
+
+    expectValueToToggle(a, b);
+  });
+
+  it('Can toggle numbers', () => {
+    const a = 30;
+    const b = 22;
+    
+    expectValueToToggle(a, b);
+  });
+
+  it('Can toggle arrays', () => {
+    const a = [1, 2, 3, 4];
+    const b = ['Booking', 'OneApp', 'Fed'];
+
+    expectValueToToggle(a, b);
+  });
+
+  it('Can toggle objects', () => {
+    const a = {};
+    const b = {name: 'Darth', occupation: 'Father'};
+
+    expectValueToToggle(a, b);
+  });
+
+  it('Can toggle different types', () => {
+    const a = 999;
+    const b = '999';
+
+    expectValueToToggle(a, b);
+  });
+});

src/hooks/useToggleValue/index.ts

@@ -0,0 +1,23 @@
+import {useState, useRef} from 'react';
+import _ from 'lodash';
+
+const useToggleValue = (initial: any, second?: any) => {
+  const initialValue = useRef(initial).current;
+  const secondValue = useRef(second).current;
+
+  const [value, setValue] = useState(initial);
+
+  const toggle = () => {
+    if (_.isBoolean(initialValue)) {
+      setValue(!initialValue);
+    } else if (value == initialValue) {
+      setValue(secondValue);
+    } else {
+      setValue(initialValue);
+    }
+  };
+
+  return [value, toggle, setValue];
+};
+
+export default useToggleValue;

src/index.js

@@ -291,6 +291,9 @@ export default {
   get AnimatableManager() {
     return require('./style').AnimatableManager;
   },
+  get Hooks() {
+    return require('./hooks');
+  },
 
   // Incubator
   get Incubator() {

src/index.ts

@@ -17,6 +17,7 @@ export {
   BackgroundColorModifier
 } from './commons/new';
 export * as Incubator from './incubator';
+export * as Hooks from './hooks';
 export {default as ActionBar, ActionBarProps} from './components/actionBar';
 export {default as Avatar, AvatarPropTypes} from './components/avatar';
 export {default as Badge, BadgeProps} from './components/badge';

typings/index.d.ts

@@ -9,3 +9,4 @@ export * from './nativeComponents';
 export * from './services';
 export * from './generatedTypes';
 export * from './globalTypes';
+export * from './hooks';