diff --git a/src/client/Containers/Calculation/Sections/index.js b/src/client/Containers/Calculation/Sections/index.js index fa3242d..3e8f2a6 100644 --- a/src/client/Containers/Calculation/Sections/index.js +++ b/src/client/Containers/Calculation/Sections/index.js @@ -10,9 +10,9 @@ export default [ title: 'FirstSection', elements: [ { - name: 'tbxPrice', Component: withTitle('Price')(InputNumber), props: { + name: 'tbxPrice', type: 'number', min: 0, max: 99999, @@ -24,9 +24,9 @@ export default [ } }, { - name: 'tbxOne', Component: withTitle('One')(InputNumber), props: { + name: 'tbxOne', type: 'number', placeholder: 'Enter one', valueName: 'one', @@ -34,9 +34,9 @@ export default [ } }, { - name: 'total', Component: withTitle('Total')(InputNumber), props: { + name: 'total', readonly: true, type: 'number', step: 0.01, @@ -44,24 +44,24 @@ export default [ } }, { - name: 'textarea', Component: withTitle('TextArea')(TextArea), props: { + name: 'textarea', readonly: true, computedValue: 'total' } }, { - name: 'cbx', Component: withTitle('Checkbox')(Checkbox), props: { + name: 'cbx', valueName: 'cbx' } }, { - name: 'switch', Component: withTitle('Switch')(Switch), props: { + name: 'switch', valueName: 'cbx' } } diff --git a/src/client/Elements/Checkbox.jsx b/src/client/Elements/Checkbox.jsx index a6821f1..a47ae44 100644 --- a/src/client/Elements/Checkbox.jsx +++ b/src/client/Elements/Checkbox.jsx @@ -1,18 +1,22 @@ import { Checkbox as AntCheckbox } from 'antd'; +import { useStatus } from 'client/hooks/useStatus'; import { useStoreValue } from 'client/hooks/useStoreValue'; -import React from 'react'; -import { observer } from 'mobx-react'; import { Box } from 'client/UIKit/grid'; +import { Status } from 'core/types/elements'; +import { observer } from 'mobx-react'; +import React from 'react'; -const Checkbox = ({ readonly, valueName, computedValue }) => { +const Checkbox = ({ name, readonly, valueName, computedValue }) => { const { value, setCurrentValue } = useStoreValue({ computedValue, valueName }); + const { status } = useStatus(name); return ( setCurrentValue(e.target.checked)} diff --git a/src/client/Elements/Input.jsx b/src/client/Elements/Input.jsx index df3dab5..6c53f78 100644 --- a/src/client/Elements/Input.jsx +++ b/src/client/Elements/Input.jsx @@ -1,9 +1,12 @@ import { Input as AntInput } from 'antd'; +import { useStatus } from 'client/hooks/useStatus'; import { useStoreValue } from 'client/hooks/useStoreValue'; +import { Status } from 'core/types/elements'; import { observer } from 'mobx-react'; import React from 'react'; const Input = ({ + name, readonly, type, pattern, @@ -17,9 +20,11 @@ const Input = ({ computedValue, valueName }); + const { status } = useStatus(name); return ( { + const { value, setCurrentValue } = useStoreValue({ + computedValue, + valueName + }); + const { status } = useStatus(name); + const { options, filter } = useOptions(name); + + return ( + setCurrentValue(value)} + > + {options.map((option, i) => ( + + {option.name} + + ))} + + ); +}; + +export default observer(Select); diff --git a/src/client/Elements/Switch.jsx b/src/client/Elements/Switch.jsx index 512fc60..b2fdd95 100644 --- a/src/client/Elements/Switch.jsx +++ b/src/client/Elements/Switch.jsx @@ -1,18 +1,22 @@ -import React from 'react'; import { Switch as AntSwitch } from 'antd'; +import { useStatus } from 'client/hooks/useStatus'; import { useStoreValue } from 'client/hooks/useStoreValue'; -import { observer } from 'mobx-react'; import { Box } from 'client/UIKit/grid'; +import { Status } from 'core/types/elements'; +import { observer } from 'mobx-react'; +import React from 'react'; -const Switch = ({ disabled, valueName, computedValue }) => { +const Switch = ({ name, valueName, computedValue }) => { const { value, setCurrentValue } = useStoreValue({ computedValue, valueName }); + const { status } = useStatus(name); + return ( { setCurrentValue(checked); diff --git a/src/client/Elements/TextArea.jsx b/src/client/Elements/TextArea.jsx index e8882f0..5c6ab5e 100644 --- a/src/client/Elements/TextArea.jsx +++ b/src/client/Elements/TextArea.jsx @@ -1,16 +1,26 @@ import { Input as AntInput } from 'antd'; +import { useStatus } from 'client/hooks/useStatus'; import { useStoreValue } from 'client/hooks/useStoreValue'; +import { Status } from 'core/types/elements'; import { observer } from 'mobx-react'; import React from 'react'; -const TextArea = ({ readonly, placeholder, valueName, computedValue }) => { +const TextArea = ({ + name, + readonly, + placeholder, + valueName, + computedValue +}) => { const { value, setCurrentValue } = useStoreValue({ computedValue, valueName }); + const { status } = useStatus(name); return ( { + const { calculationStore } = useStores(); + const options = calculationStore.options[elementName]; + const filter = calculationStore.filters[elementName]; + + return { + options, + filter + }; +}; diff --git a/src/client/hooks/useStatus.js b/src/client/hooks/useStatus.js new file mode 100644 index 0000000..44b7722 --- /dev/null +++ b/src/client/hooks/useStatus.js @@ -0,0 +1,8 @@ +import { useStores } from './useStores'; + +export const useStatus = ({ elementName }) => { + const { calculationStore } = useStores(); + const status = calculationStore.statuses[elementName]; + + return { status }; +}; diff --git a/src/client/stores/CalculationStore/Effects/index.js b/src/client/stores/CalculationStore/Effects/index.js deleted file mode 100644 index 949c0ab..0000000 --- a/src/client/stores/CalculationStore/Effects/index.js +++ /dev/null @@ -1,20 +0,0 @@ -import CommonStore from '../../CommonStore'; -import { autorun, reaction, when } from 'mobx'; -import CalculationStore from '..'; -import autorunEffects from './autorun'; -import reactionEffects from './reaction'; -import whenEffects from './when'; - -autorunEffects.map(autorunEffect => - autorun(autorunEffect(CalculationStore, CommonStore)) -); - -reactionEffects.map(reactionEffectBuilder => { - const reactionEffect = reactionEffectBuilder(CalculationStore); - return reaction(reactionEffect.expression, reactionEffect.effect); -}); - -whenEffects.map(whenEffectBuilder => { - const whenEffect = whenEffectBuilder(CalculationStore); - return when(whenEffect.predicate, whenEffect.effect); -}); diff --git a/src/client/stores/CalculationStore/index.ts b/src/client/stores/CalculationStore/index.ts index 296a47e..bcd79a8 100644 --- a/src/client/stores/CalculationStore/index.ts +++ b/src/client/stores/CalculationStore/index.ts @@ -1,16 +1,23 @@ import assignProperties from 'client/tools/assignProps'; +import initialOptions from 'core/config/initialOptions'; import initialStatuses from 'core/config/initialStatuses'; import initialValues from 'core/config/initialValues'; import { Status } from 'core/types/elements'; import { ValuesNames } from 'core/types/values'; -import { observable } from 'mobx'; +import { autorun, observable, reaction, when } from 'mobx'; +import CommonStore from '../CommonStore'; +import autorunEffects from './Effects/autorun'; import computedEffects from './Effects/computed'; +import reactionEffects from './Effects/reaction'; +import whenEffects from './Effects/when'; const CalculationStore = observable( assignProperties( { values: initialValues, + options: initialOptions, statuses: initialStatuses, + filters: {}, getValue(sourceValueName: ValuesNames) { return this.values[sourceValueName]; @@ -30,4 +37,18 @@ const CalculationStore = observable( ) ); +autorunEffects.map(autorunEffect => + autorun(autorunEffect(CalculationStore, CommonStore)) +); + +reactionEffects.map(reactionEffectBuilder => { + const reactionEffect = reactionEffectBuilder(CalculationStore); + return reaction(reactionEffect.expression, reactionEffect.effect); +}); + +whenEffects.map(whenEffectBuilder => { + const whenEffect = whenEffectBuilder(CalculationStore); + return when(whenEffect.predicate, whenEffect.effect); +}); + export default CalculationStore; diff --git a/src/client/stores/index.js b/src/client/stores/index.js index db8157c..608f894 100644 --- a/src/client/stores/index.js +++ b/src/client/stores/index.js @@ -1,6 +1,5 @@ import CalculationStore from './CalculationStore'; import CommonStore from './CommonStore'; -import './CalculationStore/Effects'; class RootStore { constructor() { diff --git a/src/core/config/initialOptions.ts b/src/core/config/initialOptions.ts new file mode 100644 index 0000000..7876799 --- /dev/null +++ b/src/core/config/initialOptions.ts @@ -0,0 +1,15 @@ +const initialOptions: any = { + carsList: [ + { + name: 'Audi', + value: '11111', + otherData: 'jldfksjodfj' + }, + { + name: 'BMW', + value: 55555 + } + ] +}; + +export default initialOptions; diff --git a/src/core/config/initialStatuses.ts b/src/core/config/initialStatuses.ts index 9cd529b..006f702 100644 --- a/src/core/config/initialStatuses.ts +++ b/src/core/config/initialStatuses.ts @@ -1,9 +1,11 @@ -import { Status } from "../types/elements"; +import { Status } from '../types/elements'; interface IInitialStatuses { [elementName: string]: Status; } -const initialStatuses: IInitialStatuses = {}; +const initialStatuses: IInitialStatuses = { + +}; export default initialStatuses;