diff --git a/app/package.json b/app/package.json index 887cf96..50be095 100644 --- a/app/package.json +++ b/app/package.json @@ -13,6 +13,7 @@ "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", + "little-state-machine": "^2.11.3", "lodash": "^4.17.15", "react": "^16.12.0", "react-dom": "^16.12.0", diff --git a/app/src/devTool/devTool.tsx b/app/src/devTool/devTool.tsx index 243631a..0ccc18a 100644 --- a/app/src/devTool/devTool.tsx +++ b/app/src/devTool/devTool.tsx @@ -1,76 +1,26 @@ import * as React from 'react'; +import { + StateMachineProvider, + createStore, + setStorageType, +} from 'little-state-machine'; import { Control } from 'react-hook-form'; -import { Animate } from 'react-simple-animate'; -import Header from './header'; -import Panel from './panel'; -import colors from './colors'; -import Logo from './logo'; -import { PanelShadow } from './panelShadow'; -import { Button } from './styled'; +import { DevToolUI } from './devToolUI'; -export const DevTool = ({ control }: { control: Control }) => { - const [visible, setVisible] = React.useState(true); +setStorageType(window.localStorage); - return ( - <> - -
-
- -
- - +createStore({ + visible: true, + isCollapse: false, + filterName: '', +}, { + name: "__REACT_HOOK_FORM_DEVTOOLS__" +}); - {!visible && ( - - )} - +export const DevTool = ({ control }: { control: Control }) => { + return ( + + + ); }; diff --git a/app/src/devTool/devToolUI.tsx b/app/src/devTool/devToolUI.tsx new file mode 100644 index 0000000..e7591b1 --- /dev/null +++ b/app/src/devTool/devToolUI.tsx @@ -0,0 +1,78 @@ +import * as React from 'react'; +import { Control } from 'react-hook-form'; +import { Animate } from 'react-simple-animate'; +import Header from './header'; +import Panel from './panel'; +import colors from './colors'; +import Logo from './logo'; +import { PanelShadow } from './panelShadow'; +import { Button } from './styled'; +import { useStateMachine } from 'little-state-machine'; +import { setVisible } from './settingAction'; + +export const DevToolUI = ({ control }: { control: Control }) => { + const { state, action } = useStateMachine(setVisible); + + return ( + <> + +
+
+ +
+ + + + {!state.visible && ( + + )} + + ); +}; diff --git a/app/src/devTool/header.tsx b/app/src/devTool/header.tsx index 42f8b22..d53f812 100644 --- a/app/src/devTool/header.tsx +++ b/app/src/devTool/header.tsx @@ -4,7 +4,7 @@ import { Control } from 'react-hook-form'; import { CircleButton, paraGraphDefaultStyle } from './styled'; type Props = { - setVisible: (visible: boolean) => void; + setVisible: any; control: Control; }; diff --git a/app/src/devTool/logo.tsx b/app/src/devTool/logo.tsx index 03e6fa8..f0f3fc4 100644 --- a/app/src/devTool/logo.tsx +++ b/app/src/devTool/logo.tsx @@ -6,7 +6,7 @@ const Logo = ({ setVisible, }: { style?: Record; - setVisible: (visible: boolean) => void; + setVisible: any; }) => { return ( { + const { state, action } = useStateMachine(setCollapse); const [, setData] = React.useState({}); - const [collapseAll, setCollapseAll] = React.useState(true); const [showFormState, setShowFormState] = React.useState(false); const fieldsValues = getValues(); const { register, watch } = useForm(); const searchTerm = watch('search', ''); + console.log(state) + useEffect(() => { setData({}); }, []); @@ -58,9 +62,12 @@ export default ({ lineHeight: 1, }} title="Toggle entire fields" - onClick={() => setCollapseAll(!collapseAll)} + onClick={() => { + // @ts-ignore + action(!state.isCollapse); + }} > - {collapseAll ? '[-] COLLAPSE' : '[+] EXPAND'} + {state.isCollapse ? '[-] COLLAPSE' : '[+] EXPAND'}
-
- -
- - +createStore({ + visible: true, + isCollapse: false, + filterName: '', +}, { + name: "__REACT_HOOK_FORM_DEVTOOLS__" +}); - {!visible && ( - - )} - +export const DevTool = ({ control }: { control: Control }) => { + return ( + + + ); }; diff --git a/src/devToolUI.tsx b/src/devToolUI.tsx new file mode 100644 index 0000000..e7591b1 --- /dev/null +++ b/src/devToolUI.tsx @@ -0,0 +1,78 @@ +import * as React from 'react'; +import { Control } from 'react-hook-form'; +import { Animate } from 'react-simple-animate'; +import Header from './header'; +import Panel from './panel'; +import colors from './colors'; +import Logo from './logo'; +import { PanelShadow } from './panelShadow'; +import { Button } from './styled'; +import { useStateMachine } from 'little-state-machine'; +import { setVisible } from './settingAction'; + +export const DevToolUI = ({ control }: { control: Control }) => { + const { state, action } = useStateMachine(setVisible); + + return ( + <> + +
+
+ +
+ + + + {!state.visible && ( + + )} + + ); +}; diff --git a/src/header.tsx b/src/header.tsx index 42f8b22..d53f812 100644 --- a/src/header.tsx +++ b/src/header.tsx @@ -4,7 +4,7 @@ import { Control } from 'react-hook-form'; import { CircleButton, paraGraphDefaultStyle } from './styled'; type Props = { - setVisible: (visible: boolean) => void; + setVisible: any; control: Control; }; diff --git a/src/logo.tsx b/src/logo.tsx index 03e6fa8..f0f3fc4 100644 --- a/src/logo.tsx +++ b/src/logo.tsx @@ -6,7 +6,7 @@ const Logo = ({ setVisible, }: { style?: Record; - setVisible: (visible: boolean) => void; + setVisible: any; }) => { return ( ({ - default: () => {}, -})); - -describe('Panel', () => { - it('should toggle expand all button', () => { - const { getByTitle, getByText } = render( - {}, - fieldsRef: { - current: {}, - }, - formState: {}, - } as any - } - />, - ); - - getByText('[-] COLLAPSE'); - - fireEvent.click(getByTitle('Toggle entire fields')); - - getByText('[+] EXPAND'); - }); -}); diff --git a/src/panel.tsx b/src/panel.tsx index 9f2293c..c75cffb 100644 --- a/src/panel.tsx +++ b/src/panel.tsx @@ -1,24 +1,28 @@ import * as React from 'react'; import get from 'lodash/get'; import { Control, useForm } from 'react-hook-form'; +import { useStateMachine } from 'little-state-machine'; import { useEffect } from 'react'; import colors from './colors'; import PanelTable from './panelTable'; import FormStateTable from './formStateTable'; import { Button, Input } from './styled'; +import { setCollapse } from './settingAction'; export default ({ control: { fieldsRef, getValues, formState, errorsRef, readFormStateRef }, }: { control: Control; }) => { + const { state, action } = useStateMachine(setCollapse); const [, setData] = React.useState({}); - const [collapseAll, setCollapseAll] = React.useState(true); const [showFormState, setShowFormState] = React.useState(false); const fieldsValues = getValues(); const { register, watch } = useForm(); const searchTerm = watch('search', ''); + console.log(state) + useEffect(() => { setData({}); }, []); @@ -58,9 +62,12 @@ export default ({ lineHeight: 1, }} title="Toggle entire fields" - onClick={() => setCollapseAll(!collapseAll)} + onClick={() => { + // @ts-ignore + action(!state.isCollapse); + }} > - {collapseAll ? '[-] COLLAPSE' : '[+] EXPAND'} + {state.isCollapse ? '[-] COLLAPSE' : '[+] EXPAND'}