separate inputs

src/client/Containers/Calculation/Sections/index.js

@@ -1,6 +1,8 @@
 import Input from 'client/Elements/Input';
 import withTitle from 'client/hocs/withTitle';
 import Checkbox from 'client/Elements/Checkbox';
+import InputNumber from 'client/Elements/InputNumber';
+import TextArea from 'client/Elements/TextArea';
 
 export default [
   {
@@ -8,7 +10,7 @@ export default [
     elements: [
       {
         name: 'tbxPrice',
-        Component: withTitle('Price')(Input),
+        Component: withTitle('Price')(InputNumber),
         props: {
           type: 'number',
           min: 0,
@@ -22,7 +24,7 @@ export default [
       },
       {
         name: 'tbxOne',
-        Component: withTitle('One')(Input),
+        Component: withTitle('One')(InputNumber),
         props: {
           type: 'number',
           placeholder: 'Enter one',
@@ -32,12 +34,19 @@ export default [
       },
       {
         name: 'total',
-        Component: withTitle('Total')(Input),
+        Component: withTitle('Total')(InputNumber),
         props: {
           readonly: true,
           type: 'number',
           step: 0.01,
-          addonBefore: 'addon',
+          computedValue: 'total'
+        }
+      },
+      {
+        name: 'textarea',
+        Component: withTitle('TextArea')(TextArea),
+        props: {
+          readonly: true,
           computedValue: 'total'
         }
       },

src/client/Elements/Input.jsx

@@ -1,4 +1,4 @@
-import { Input as AntInput, InputNumber as AntInputNumber } from 'antd';
+import { Input as AntInput } from 'antd';
 import { useStoreValue } from 'client/hooks/useStoreValue';
 import { observer } from 'mobx-react';
 import React from 'react';
@@ -6,11 +6,7 @@ import React from 'react';
 const Input = ({
   readonly,
   type,
-  min,
-  max,
-  step,
-  formatter,
-  parser,
+  pattern,
   placeholder,
   addonBefore,
   addonAfter,
@@ -22,42 +18,14 @@ const Input = ({
     valueName
   });
 
-  if (type === 'number') {
-    return (
-      <AntInputNumber
-        style={{
-          width: '100%'
-        }}
-        readOnly={readonly}
-        min={min}
-        max={max}
-        step={step}
-        formatter={formatter}
-        parser={parser}
-        onChange={value => setCurrentValue(value)}
-        value={value}
-      />
-    );
-  }
-
-  if (type === 'textarea') {
-    return (
-      <AntInput.TextArea
-        readOnly={readonly}
-        placeholder={placeholder}
-        value={value}
-        onChange={e => setCurrentValue(e.target.value)}
-      />
-    );
-  }
-
   return (
     <AntInput
-      addonBefore={addonBefore}
-      addonAfter={addonAfter}
       readOnly={readonly}
       type={type}
       placeholder={placeholder}
+      pattern={pattern}
+      addonBefore={addonBefore}
+      addonAfter={addonAfter}
       value={value}
       onChange={e => setCurrentValue(e.target.value)}
     />

src/client/Elements/InputNumber.jsx

@@ -0,0 +1,40 @@
+import { InputNumber as AntInputNumber } from 'antd';
+import { useStoreValue } from 'client/hooks/useStoreValue';
+import { observer } from 'mobx-react';
+import React from 'react';
+
+const InputNumber = ({
+  readonly,
+  min,
+  max,
+  step,
+  formatter,
+  parser,
+  placeholder,
+  valueName,
+  computedValue
+}) => {
+  const { value, setCurrentValue } = useStoreValue({
+    computedValue,
+    valueName
+  });
+
+  return (
+    <AntInputNumber
+      readOnly={readonly}
+      placeholder={placeholder}
+      style={{
+        width: '100%'
+      }}
+      min={min}
+      max={max}
+      step={step}
+      formatter={formatter}
+      parser={parser}
+      onChange={value => setCurrentValue(value)}
+      value={value}
+    />
+  );
+};
+
+export default observer(InputNumber);

src/client/Elements/TextArea.jsx

@@ -0,0 +1,22 @@
+import { Input as AntInput } from 'antd';
+import { useStoreValue } from 'client/hooks/useStoreValue';
+import { observer } from 'mobx-react';
+import React from 'react';
+
+const TextArea = ({ readonly, placeholder, valueName, computedValue }) => {
+  const { value, setCurrentValue } = useStoreValue({
+    computedValue,
+    valueName
+  });
+
+  return (
+    <AntInput.TextArea
+      readOnly={readonly}
+      placeholder={placeholder}
+      value={value}
+      onChange={e => setCurrentValue(e.target.value)}
+    />
+  );
+};
+
+export default observer(TextArea);