From 3229db22d5d4aee413865696f18cf0f16abb349a Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Wed, 2 Sep 2020 14:56:49 +0300
Subject: [PATCH] input component

---
 .../Sections/{index.ts => index.js}           | 13 +++-
 src/client/Containers/Calculation/index.jsx   | 10 ++-
 src/client/Elements/Input.jsx                 | 61 ++++++++++++++++---
 src/client/hocs/withTitle.jsx                 |  2 +-
 .../CalculationStore/Effects/computed.js      |  4 +-
 .../CalculationStore/Effects/reaction.ts      |  6 +-
 6 files changed, 81 insertions(+), 15 deletions(-)
 rename src/client/Containers/Calculation/Sections/{index.ts => index.js} (72%)

diff --git a/src/client/Containers/Calculation/Sections/index.ts b/src/client/Containers/Calculation/Sections/index.js
similarity index 72%
rename from src/client/Containers/Calculation/Sections/index.ts
rename to src/client/Containers/Calculation/Sections/index.js
index aa87d2f..dc1d3bc 100644
--- a/src/client/Containers/Calculation/Sections/index.ts
+++ b/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'
         }
       }
diff --git a/src/client/Containers/Calculation/index.jsx b/src/client/Containers/Calculation/index.jsx
index 4a27345..80a0bca 100644
--- a/src/client/Containers/Calculation/index.jsx
+++ b/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>
diff --git a/src/client/Elements/Input.jsx b/src/client/Elements/Input.jsx
index 7b5b4b6..ca1ad19 100644
--- a/src/client/Elements/Input.jsx
+++ b/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}
     />
   );
 };
diff --git a/src/client/hocs/withTitle.jsx b/src/client/hocs/withTitle.jsx
index 083cb24..be65ac9 100644
--- a/src/client/hocs/withTitle.jsx
+++ b/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;
 `;
diff --git a/src/client/stores/CalculationStore/Effects/computed.js b/src/client/stores/CalculationStore/Effects/computed.js
index 4810d71..ec4fc4f 100644
--- a/src/client/stores/CalculationStore/Effects/computed.js
+++ b/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;
   }
 };
diff --git a/src/client/stores/CalculationStore/Effects/reaction.ts b/src/client/stores/CalculationStore/Effects/reaction.ts
index cca65f4..cc8c21d 100644
--- a/src/client/stores/CalculationStore/Effects/reaction.ts
+++ b/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)
   })
 ];