feat(core-components-money-input): tune to latest requirements

core-ds · Jun 16, 2020 · 62fcaf4 · 62fcaf4
1 parent 251cb21
commit 62fcaf4
Show file tree

Hide file tree

Showing 6 changed files with 297 additions and 144 deletions.
diff --git a/packages/money-input/package.json b/packages/money-input/package.json
@@ -17,6 +17,7 @@
     },
     "dependencies": {
         "@alfalab/core-components-input": "^1.3.1",
+        "@alfalab/core-components-form-control": "^1.3.1",
         "text-mask-core": "^5.1.2"
     }
 }
diff --git a/packages/money-input/src/Component.stories.mdx b/packages/money-input/src/Component.stories.mdx
@@ -35,6 +35,7 @@ import { MoneyInput } from '@alfalab/core-components-money-input';
         value={number('value', 123456)}
         currency={text('currency', 'RUR')}
         minorUnits={number('minorUnits', 100)}
+        bold={boolean('bold', true)}
         block={boolean('block', false)}
         size={select('size', ['s', 'm', 'l'], 's')}
         disabled={boolean('disabled', false)}
@@ -54,6 +55,10 @@ import { MoneyInput } from '@alfalab/core-components-money-input';
 <Preview>
     {React.createElement(() => {
         const [value, setValue] = React.useState(10000);
+        const [suggests] = React.useState([
+            { currency: 'RUR', minorUnits: 100, value: 15600 },
+            { currency: 'RUR', minorUnits: 100, value: 500 },
+        ]);
         const handleChange = (event, payload) => {
             setValue(payload.value);
         };
@@ -69,6 +74,13 @@ import { MoneyInput } from '@alfalab/core-components-money-input';
                     <Col>
                         { value }
                     </Col>
+                    {suggests.map((s) => (
+                        <button
+                            onClick={() => { setValue(s.value) }}
+                        >
+                           Установить {s.value}
+                        </button>
+                    ))}
                 </Row>
             </Container>
         );

diff --git a/packages/money-input/src/Component.tsx b/packages/money-input/src/Component.tsx
@@ -1,8 +1,9 @@
 import cn from 'classnames';
 import React, { useState, useEffect } from 'react';
 import { Input, InputProps } from '@alfalab/core-components-input';
+import { FormControl } from '@alfalab/core-components-form-control';
 
-import { CURRENCY_CODES } from './utils/currencyCodes';
+import { CURRENCY_CODES, THINSP } from './utils/currencyCodes';
 import { getFormatedValue, getAmountValueFromStr, formatAmount } from './utils';
 import styles from './index.module.css';
 
@@ -22,6 +23,11 @@ export type MoneyInputProps = Omit<InputProps, 'onChange' | 'rightAddons'> & {
      */
     minorUnits?: number;
 
+    /**
+     * Жир
+     */
+    bold?: boolean;
+
     /**
      * Дополнительный класс
      */
@@ -59,6 +65,7 @@ export const MoneyInput: React.FC<MoneyInputProps> = ({
     minorUnits = 100,
     currency = 'RUR',
     label = 'Сумма',
+    bold = true,
     className,
     dataTestId,
     onChange,
@@ -141,31 +148,26 @@ export const MoneyInput: React.FC<MoneyInputProps> = ({
     };
 
     return (
-        <Input
-            {...restProps}
-            label={label}
-            value={inputValue}
-            rightAddons={<span className={styles.currency}>{currencySymbol}</span>}
-            className={className}
-            inputClassName={cn(styles.input)}
-            onChange={handleChange}
-            dataTestId={dataTestId}
-        />
-    );
-};
-
-/**
- * Заготовка если минорные единицы нужно красить иначп
- */
-export const ContentEditableMoneyInput = () => {
-    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {
-        console.log(e);
-    }
-
-    return (
-        <div contentEditable={true} onInput={handleInput}>
-            1234
-            <span>,56</span>
+        <div className={cn({ [styles.bold]: bold })}>
+            <FormControl {...restProps} label={label} className={cn(styles.fakeValueWithCurrency)}>
+                {inputValue}
+                {inputValue && (
+                    <span className={styles.currency}>
+                        {THINSP}
+                        {currencySymbol}
+                    </span>
+                )}
+            </FormControl>
+
+            <Input
+                {...restProps}
+                label={label}
+                value={inputValue}
+                className={cn(styles.component, className)}
+                inputClassName={styles.input}
+                onChange={handleChange}
+                dataTestId={dataTestId}
+            />
         </div>
     );
 };