diff --git a/package.json b/package.json index 9d95f1a..9b51613 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", - "antd": "^4.6.2", + "antd": "^4.6.4", "axios": "^0.20.0", "body-parser": "^1.19.0", "class-validator": "^0.12.2", @@ -22,7 +22,7 @@ "http-errors": "^1.8.0", "lodash": "^4.17.20", "mobx": "^5.15.6", - "mobx-react": "^6.2.5", + "mobx-react": "^6.3.0", "morgan": "^1.10.0", "mssql": "^6.2.1", "nodemon": "^2.0.4", diff --git a/src/client/Containers/Calculation/Sections/index.jsx b/src/client/Containers/Calculation/Sections/index.jsx index 6c602b8..63a9872 100644 --- a/src/client/Containers/Calculation/Sections/index.jsx +++ b/src/client/Containers/Calculation/Sections/index.jsx @@ -1,12 +1,13 @@ import { Divider as AntDivider, Tabs } from 'antd'; import Background from 'client/Elements/Background'; -import { SecondaryText, SecondaryColoredText } from 'client/Elements/Text'; -import { Flex, Box } from 'client/UIKit/grid'; +import { SecondaryColoredText } from 'client/Elements/Text'; +import { withStoreValue } from 'client/hocs/withStore'; +import colors from 'client/UIKit/colors'; +import { Flex } from 'client/UIKit/grid'; +import mq from 'client/UIKit/mq'; import React from 'react'; import styled from 'styled-components'; import sectionsList from './list'; -import colors from 'client/UIKit/colors'; -import mq from 'client/UIKit/mq'; const ElementTitle = styled.h5` color: rgba(0, 0, 0, 0.75); @@ -20,27 +21,18 @@ const BreakLine = styled.div` width: 100%; `; -const VerticalDivider = styled.div` - ${mq.desktop` - width: 1px; - margin: 6px 2px; - background: rgb(0,0,0); - background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 20%, rgba(0,0,0,0.08) 80%, rgba(0,0,0,0) 100%); - // background: rgba(0,0,0,0.12); - `} -`; - -const BlockWrapper = styled.div` - border: 1px solid black; -`; - const renderElements = ({ elements }) => { return elements.map((element, ie) => { - const { title: elementTitle, Component, props: elementProps } = element; + const { + title: elementTitle, + Component: Element, + props: elementProps, + } = element; + const Component = withStoreValue(Element)(elementProps); return ( {elementTitle} - + ); }); @@ -91,7 +83,7 @@ const renderGroups = ({ groups }) => { return ( {blocksTitle && ( - + {blocksTitle} )} @@ -103,7 +95,7 @@ const renderGroups = ({ groups }) => { }); }; -const Sections = (props) => ( +const Sections = props => ( {sectionsList.map((section, is) => { diff --git a/src/client/Elements/Button.jsx b/src/client/Elements/Button.jsx index 17fe9c9..e8d515f 100644 --- a/src/client/Elements/Button.jsx +++ b/src/client/Elements/Button.jsx @@ -1,15 +1,11 @@ import { Button as AntButton } from 'antd'; -import { useStatus } from 'client/hooks/useStatus'; import { Status } from 'core/types/statuses'; import React from 'react'; -const Button = ({ type, size, name, text, onClick }) => { - const { status } = useStatus(name); - +const Button = ({ status, onClick, text, ...props }) => { return ( diff --git a/src/client/Elements/Checkbox.jsx b/src/client/Elements/Checkbox.jsx index d6a35e4..29dd123 100644 --- a/src/client/Elements/Checkbox.jsx +++ b/src/client/Elements/Checkbox.jsx @@ -1,24 +1,13 @@ import { Checkbox as AntCheckbox, Form } from 'antd'; -import { useStatus } from 'client/hooks/useStatus'; -import { useStoreValue } from 'client/hooks/useStoreValue'; -import { DEFAULT_DEBOUNCE_DELAY } from 'core/constants/debounce'; import { Status } from 'core/types/statuses'; -import { observer } from 'mobx-react'; import React from 'react'; -const Checkbox = ({ name, readonly, valueName, computedValue }) => { - const { value, setCurrentValue } = useStoreValue({ - computedValue, - valueName, - debounceDelay: DEFAULT_DEBOUNCE_DELAY, - }); - const { status } = useStatus(name); - +const Checkbox = ({ value, setCurrentValue, status, ...props }) => { return ( setCurrentValue(e.target.checked)} /> @@ -26,4 +15,4 @@ const Checkbox = ({ name, readonly, valueName, computedValue }) => { ); }; -export default observer(Checkbox); +export default Checkbox; diff --git a/src/client/Elements/Input.jsx b/src/client/Elements/Input.jsx index 0daeca8..cc797c1 100644 --- a/src/client/Elements/Input.jsx +++ b/src/client/Elements/Input.jsx @@ -1,60 +1,20 @@ import { Form, Input as AntInput } from 'antd'; -import { useStatus } from 'client/hooks/useStatus'; -import { useStoreValue } from 'client/hooks/useStoreValue'; -import { TEXT_INPUT_DEBOUNCE_DELAY } from 'core/constants/debounce'; import { Status } from 'core/types/statuses'; -import { observer } from 'mobx-react'; import React from 'react'; -import { useValidation } from 'client/hooks/useValidation'; const Input = ({ - name, - readonly, - type, - validation, - rules, - pattern, - prefix, - suffix, - placeholder, - addonBefore, - addonAfter, - valueName, - computedValue, + value, + setCurrentValue, + status, + validateStatus, + message, + ...props }) => { - const { value, setCurrentValue, debouncedValue } = useStoreValue({ - computedValue, - valueName, - debounceDelay: TEXT_INPUT_DEBOUNCE_DELAY, - }); - const { status } = useStatus(name); - - const { isValid, validateStatus, message } = useValidation({ - elementName: name, - value: debouncedValue, - validation: validation || { - errorMessage: '', - validator: () => {}, - }, - }); - return ( - + setCurrentValue(e.target.value)} /> @@ -62,4 +22,4 @@ const Input = ({ ); }; -export default observer(Input); +export default Input; diff --git a/src/client/Elements/InputNumber.jsx b/src/client/Elements/InputNumber.jsx index 277c224..447fa10 100644 --- a/src/client/Elements/InputNumber.jsx +++ b/src/client/Elements/InputNumber.jsx @@ -1,44 +1,14 @@ -import { InputNumber as AntInputNumber, Form } from 'antd'; -import { useStatus } from 'client/hooks/useStatus'; -import { useStoreValue } from 'client/hooks/useStoreValue'; +import { Form, InputNumber as AntInputNumber } from 'antd'; import { Status } from 'core/types/statuses'; -import { observer } from 'mobx-react'; import React from 'react'; -import { TEXT_INPUT_DEBOUNCE_DELAY } from 'core/constants/debounce'; - -const InputNumber = ({ - name, - readonly, - min, - max, - step, - formatter, - parser, - placeholder, - valueName, - computedValue, -}) => { - const { value, setCurrentValue } = useStoreValue({ - computedValue, - valueName, - debounceDelay: TEXT_INPUT_DEBOUNCE_DELAY, - }); - const { status } = useStatus(name); +const InputNumber = ({ value, setCurrentValue, status, ...props }) => { return ( setCurrentValue(value)} value={value} /> @@ -46,4 +16,8 @@ const InputNumber = ({ ); }; -export default observer(InputNumber); +const styles = { + width: '100%', +}; + +export default InputNumber; diff --git a/src/client/Elements/Label.jsx b/src/client/Elements/Label.jsx index efb9f74..4e09db9 100644 --- a/src/client/Elements/Label.jsx +++ b/src/client/Elements/Label.jsx @@ -1,16 +1,12 @@ import React from 'react'; import styled from 'styled-components'; -import { useStoreValue } from 'client/hooks/useStoreValue'; -import { observer } from 'mobx-react'; const TextWrapper = styled.div``; const Text = styled.span` font-size: 0.85rem; `; -const Label = ({ name, computedValue, valueName }) => { - const { value } = useStoreValue({ computedValue, valueName }); - +const Label = ({ value }) => { //TODO: Hide if no value return ( @@ -20,4 +16,4 @@ const Label = ({ name, computedValue, valueName }) => { ); }; -export default observer(Label); +export default Label; diff --git a/src/client/Elements/Radio.jsx b/src/client/Elements/Radio.jsx index 1c1541d..40ec2ea 100644 --- a/src/client/Elements/Radio.jsx +++ b/src/client/Elements/Radio.jsx @@ -1,24 +1,19 @@ -import { Radio as AntRadio, Form } from 'antd'; -import { useOptions } from 'client/hooks/useOptions'; -import { useStatus } from 'client/hooks/useStatus'; -import { useStoreValue } from 'client/hooks/useStoreValue'; -import { DEFAULT_DEBOUNCE_DELAY } from 'core/constants/debounce'; +import { Form, Radio as AntRadio } from 'antd'; import { Status } from 'core/types/statuses'; -import { observer } from 'mobx-react'; import React from 'react'; -const Radio = ({ name, style, computedValue, valueName }) => { - const { value, setCurrentValue } = useStoreValue({ - computedValue, - valueName, - debounceDelay: DEFAULT_DEBOUNCE_DELAY, - }); - const { status } = useStatus(name); - const { options } = useOptions(name); - +const Radio = ({ + value, + setCurrentValue, + status, + options, + style, + ...props +}) => { return ( { - const { value, setCurrentValue } = useStoreValue({ - computedValue, - valueName, - debounceDelay: DEFAULT_DEBOUNCE_DELAY, - }); - const { status } = useStatus(name); - const { options, filter } = useOptions(name); +const Select = ({ + value, + setCurrentValue, + status, + options, + filter, + ...props +}) => { return ( { ); }; -export default observer(Select); +export default Select; diff --git a/src/client/Elements/Switch.jsx b/src/client/Elements/Switch.jsx index 1f85cd4..c37b4a4 100644 --- a/src/client/Elements/Switch.jsx +++ b/src/client/Elements/Switch.jsx @@ -1,22 +1,12 @@ import { Form, Switch as AntSwitch } from 'antd'; -import { useStatus } from 'client/hooks/useStatus'; -import { useStoreValue } from 'client/hooks/useStoreValue'; -import { DEFAULT_DEBOUNCE_DELAY } from 'core/constants/debounce'; import { Status } from 'core/types/statuses'; -import { observer } from 'mobx-react'; import React from 'react'; -const Switch = ({ name, valueName, computedValue }) => { - const { value, setCurrentValue } = useStoreValue({ - computedValue, - valueName, - debounceDelay: DEFAULT_DEBOUNCE_DELAY, - }); - const { status } = useStatus(name); - +const Switch = ({ value, setCurrentValue, status, ...props }) => { return ( { @@ -27,4 +17,4 @@ const Switch = ({ name, valueName, computedValue }) => { ); }; -export default observer(Switch); +export default Switch; diff --git a/src/client/Elements/TextArea.jsx b/src/client/Elements/TextArea.jsx index c580fcd..907a5ba 100644 --- a/src/client/Elements/TextArea.jsx +++ b/src/client/Elements/TextArea.jsx @@ -1,35 +1,19 @@ -import { Input as AntInput } from 'antd'; -import { useStatus } from 'client/hooks/useStatus'; -import { useStoreValue } from 'client/hooks/useStoreValue'; +import { Form, Input as AntInput } from 'antd'; import { Status } from 'core/types/statuses'; -import { observer } from 'mobx-react'; import React from 'react'; -import { TEXT_INPUT_DEBOUNCE_DELAY } from 'core/constants/debounce'; - -const TextArea = ({ - name, - readonly, - placeholder, - valueName, - computedValue, -}) => { - const { value, setCurrentValue } = useStoreValue({ - computedValue, - valueName, - debounceDelay: TEXT_INPUT_DEBOUNCE_DELAY, - }); - const { status } = useStatus(name); +const TextArea = ({ value, setCurrentValue, status, ...props }) => { return ( - setCurrentValue(e.target.value)} - /> + + setCurrentValue(e.target.value)} + /> + ); }; -export default observer(TextArea); +export default TextArea; diff --git a/src/client/hocs/withStore.js b/src/client/hocs/withStore.js new file mode 100644 index 0000000..2de13a7 --- /dev/null +++ b/src/client/hocs/withStore.js @@ -0,0 +1,47 @@ +import { useOptions } from 'client/hooks/useOptions'; +import { useStatus } from 'client/hooks/useStatus'; +import { useStoreValue } from 'client/hooks/useStoreValue'; +import { useValidation } from 'client/hooks/useValidation'; +import { DEFAULT_DEBOUNCE_DELAY } from 'core/constants/debounce'; +import { observer } from 'mobx-react'; +import React from 'react'; + +export const withStoreValue = Component => ({ + name, + valueName, + computedValue, + validation, + ...params +}) => { + const ComponentWithStore = () => { + const { value, setCurrentValue, debouncedValue } = useStoreValue({ + computedValue, + valueName, + debounceDelay: DEFAULT_DEBOUNCE_DELAY, + }); + const { status } = useStatus(name); + const { isValid, validateStatus, message } = useValidation({ + elementName: name, + value: debouncedValue, + validation: validation || { + errorMessage: '', + validator: () => {}, + }, + }); + const { options, filter } = useOptions(name); + + return ( + + ); + }; + return observer(ComponentWithStore); +}; diff --git a/src/client/hocs/withStore.tsx b/src/client/hocs/withStore.tsx deleted file mode 100644 index 75d55f6..0000000 --- a/src/client/hocs/withStore.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { ComponentType } from "react"; -// import hoistNonReactStatics from "hoist-non-react-statics"; -import { useStores } from "../hooks/useStores"; -import { useObserver } from "mobx-react"; - -export type TWithStoreHOC =

( - Component: ComponentType

-) => (props: P) => JSX.Element; - -export const withStore: TWithStoreHOC = (WrappedComponent) => (props) => { - const ComponentWithStore = () => { - const stores = useStores(); - - return ; - }; - - ComponentWithStore.defaultProps = { ...WrappedComponent.defaultProps }; - ComponentWithStore.displayName = `WithStores(${ - WrappedComponent.name || WrappedComponent.displayName - })`; - - // hoistNonReactStatics(ComponentWithStore, WrappedComponent); - - return ; -}; diff --git a/src/core/constants/debounce.js b/src/core/constants/debounce.js index 0993b7e..aab9729 100644 --- a/src/core/constants/debounce.js +++ b/src/core/constants/debounce.js @@ -1,2 +1 @@ -export const TEXT_INPUT_DEBOUNCE_DELAY = 650; -export const DEFAULT_DEBOUNCE_DELAY = 0; +export const DEFAULT_DEBOUNCE_DELAY = 250;