input component

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

@@ -9,6 +9,12 @@ export default [
         name: 'tbxPrice',
         Component: withTitle('Price')(Input),
         props: {
+          type: 'number',
+          min: 0,
+          max: 99999,
+          step: 100.0,
+          formatter: value => `% ${value}`,
+          parser: value => value.replace('%', '').trim(),
           placeholder: 'Enter price',
           bindedValueName: 'price'
         }
@@ -17,8 +23,10 @@ export default [
         name: 'tbxOne',
         Component: withTitle('One')(Input),
         props: {
+          type: 'number',
           placeholder: 'Enter one',
-          bindedValueName: 'one'
+          bindedValueName: 'one',
+          step: 10
         }
       },
       {
@@ -26,6 +34,9 @@ export default [
         Component: withTitle('Total')(Input),
         props: {
           readonly: true,
+          type: 'number',
+          step: 0.01,
+          addonBefore: 'addon',
           computedValue: 'total'
         }
       }

src/client/Containers/Calculation/index.jsx

@@ -3,9 +3,15 @@ import Background from 'client/Elements/Background';
 import { Box, Flex } from 'client/UIKit/grid';
 import React from 'react';
 import Sections from './Sections';
+import styled from 'styled-components';
 
 const { TabPane } = Tabs;
 
+const InputWrapper = styled(Box)`
+  width: 200px;
+  margin-horizontal: 10px;
+`;
+
 const Calculation = () => {
   return (
     <Flex flexWrap="wrap">
@@ -16,9 +22,9 @@ const Calculation = () => {
               <Flex>
                 {elements.map(({ Component, props }, ie) => {
                   return (
-                    <Box width="250px" my="10px" key={ie}>
+                    <InputWrapper key={ie}>
                       <Component {...props} />
-                    </Box>
+                    </InputWrapper>
                   );
                 })}
               </Flex>

src/client/Elements/Input.jsx

@@ -1,11 +1,24 @@
-import { Input as AntInput } from 'antd';
+import { Input as AntInput, InputNumber as AntInputNumber } from 'antd';
 import { useStores } from 'client/hooks/useStores';
 import { observer } from 'mobx-react';
 import React, { useEffect, useState } from 'react';
 import { useDebounce } from 'use-debounce';
 import { DEBOUNCE_DELAY } from '../../constants/debounce';
 
-const Input = ({ readonly, placeholder, bindedValueName, computedValue }) => {
+const Input = ({
+  readonly,
+  type,
+  min,
+  max,
+  step,
+  formatter,
+  parser,
+  placeholder,
+  addonBefore,
+  addonAfter,
+  bindedValueName,
+  computedValue
+}) => {
   const { calculationStore } = useStores();
   const [currentValue, setCurrentValue] = useState(undefined);
   const [debouncedValue] = useDebounce(currentValue, DEBOUNCE_DELAY);
@@ -26,16 +39,48 @@ const Input = ({ readonly, placeholder, bindedValueName, computedValue }) => {
     }
   }, [calculationStore, computedValue, debouncedValue, bindedValueName]);
 
+  function handleOnChange(value) {
+    setCurrentValue(value);
+  }
+
+  if (type === 'number') {
+    return (
+      <AntInputNumber
+        style={{
+          width: '100%'
+        }}
+        readOnly={readonly}
+        min={min}
+        max={max}
+        step={step}
+        formatter={formatter}
+        parser={parser}
+        onChange={handleOnChange}
+        value={computedValue ? calculationStore[computedValue]() : currentValue}
+      />
+    );
+  }
+
+  if (type === 'textarea') {
+    return (
+      <AntInput.TextArea
+        readOnly={readonly}
+        placeholder={placeholder}
+        value={computedValue ? calculationStore[computedValue]() : currentValue}
+        onChange={handleOnChange}
+      />
+    );
+  }
+
   return (
     <AntInput
-      disabled={readonly}
+      addonBefore={addonBefore}
+      addonAfter={addonAfter}
+      readOnly={readonly}
+      type={type}
       placeholder={placeholder}
       value={computedValue ? calculationStore[computedValue]() : currentValue}
-      onChange={e => {
-        if (!readonly) {
-          setCurrentValue(e.target.value);
-        }
-      }}
+      onChange={handleOnChange}
     />
   );
 };

src/client/hocs/withTitle.jsx

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 const Title = styled.h5`
   color: rgba(0, 0, 0, 0.85);
   font-weight: 600;
-  font-size: 16px;
+  font-size: 15px;
   line-height: 1.5;
   margin: 0 0 2px 0;
 `;

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

@@ -1,7 +1,7 @@
 const computedEffects = {
   total() {
-    const one = parseInt(this.values.one || 0);
-    const price = parseInt(this.values.price || 0);
+    const one = parseFloat(this.values.one || 0);
+    const price = parseFloat(this.values.price || 0);
     return one + price;
   }
 };

src/client/stores/CalculationStore/Effects/reaction.ts

@@ -3,7 +3,11 @@ import { IReactionEffect } from 'core/types/effect';
 const reactionEffects: IReactionEffect[] = [
   calculationStore => ({
     expression: () => calculationStore.values.one,
-    effect: value => console.log(value)
+    effect: one => console.log('one ', one)
+  }),
+  calculationStore => ({
+    expression: () => calculationStore.values.price,
+    effect: price => console.log('price: ', price)
   })
 ];