useOptions, useStatus hooks

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'
         }
       }

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 (
     <Box>
       <AntCheckbox
+        disabled={status === Status.Disabled}
         readonly={readonly}
         checked={value}
         onChange={e => setCurrentValue(e.target.checked)}

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 (
     <AntInput
+      disabled={status === Status.Disabled}
       readOnly={readonly}
       type={type}
       placeholder={placeholder}

src/client/Elements/InputNumber.jsx

@@ -1,9 +1,12 @@
 import { InputNumber as AntInputNumber } 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 InputNumber = ({
+  name,
   readonly,
   min,
   max,
@@ -18,9 +21,11 @@ const InputNumber = ({
     computedValue,
     valueName
   });
+  const { status } = useStatus(name);
 
   return (
     <AntInputNumber
+      disabled={status === Status.Disabled}
       readOnly={readonly}
       placeholder={placeholder}
       style={{

src/client/Elements/Select.jsx

@@ -0,0 +1,35 @@
+import { Select as AntSelect } 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';
+import { useOptions } from 'client/hooks/useOptions';
+
+const Select = ({ name, showSearch, computedValue, valueName }) => {
+  const { value, setCurrentValue } = useStoreValue({
+    computedValue,
+    valueName
+  });
+  const { status } = useStatus(name);
+  const { options, filter } = useOptions(name);
+
+  return (
+    <AntSelect
+      disabled={status === Status.Disabled}
+      showSearch={showSearch}
+      optionFilterProp="children"
+      filterOption={filter}
+      value={value}
+      onChange={value => setCurrentValue(value)}
+    >
+      {options.map((option, i) => (
+        <AntSelect.Option key={i} value={option.value}>
+          {option.name}
+        </AntSelect.Option>
+      ))}
+    </AntSelect>
+  );
+};
+
+export default observer(Select);

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 (
     <Box>
       <AntSwitch
-        disabled={disabled}
+        disabled={status === Status.Disabled}
         checked={value}
         onChange={(checked, event) => {
           setCurrentValue(checked);

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 (
     <AntInput.TextArea
+      disabled={status === Status.Disabled}
       readOnly={readonly}
       placeholder={placeholder}
       value={value}

src/client/hooks/useOptions.js

@@ -0,0 +1,12 @@
+import { useStores } from './useStores';
+
+export const useOptions = ({ elementName }) => {
+  const { calculationStore } = useStores();
+  const options = calculationStore.options[elementName];
+  const filter = calculationStore.filters[elementName];
+
+  return {
+    options,
+    filter
+  };
+};

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 };
+};

src/client/stores/CalculationStore/Effects/index.js

@@ -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);
-});

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;

src/client/stores/index.js

@@ -1,6 +1,5 @@
 import CalculationStore from './CalculationStore';
 import CommonStore from './CommonStore';
-import './CalculationStore/Effects';
 
 class RootStore {
   constructor() {

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;

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;