@alfalab/core-components 1.18.0 → 2.0.0-beta.3

package/amount-input/inverted.css

@@ -0,0 +1,17 @@
+/* hash: 1eq4v */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --amount-input-inverted-minor-part-and-currency-color: var(
+        --color-light-text-secondary-inverted
+    );
+}
+.amount-input__minorPartAndCurrency_1hst2 {
+    color: var(--amount-input-inverted-minor-part-and-currency-color);
+}

package/amount-input/modern/Component.d.ts

@@ -1,101 +1,89 @@
 /// <reference types="react" />
 import React from 'react';
-import { InputHTMLAttributes, ChangeEvent } from "react";
+import { InputProps } from "../../input";
 import { CurrencyCodes } from '@alfalab/data';
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "value" | "defaultValue" | "onChange"> & {
-    /**
-     * Значение поля ввода
-     */
-    value?: string;
-    /**
-     * Начальное значение поля
-     */
-    defaultValue?: string;
-    /**
-     * Растягивает компонент на ширину контейнера
-     */
-    block?: boolean;
-    /**
-     * Размер компонента
-     */
-    size?: "s" | "m" | "l";
-    /**
-     * Отображение ошибки
-     */
-    error?: string | boolean;
-    /**
-     * Текст подсказки
-     */
-    hint?: string;
-    /**
-     * Лейбл компонента
-     */
-    label?: React.ReactNode;
-    /**
-     * Атрибут type
-     */
-    type?: "number" | "card" | "email" | "money" | "password" | "tel" | "text";
+type AmountInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
     /**
-     * Ref для обертки input
+     * Денежное значение в минорных единицах
+     * Значение null - значит не установлено
      */
-    wrapperRef?: React.MutableRefObject<HTMLDivElement | null>;
+    value?: string | number | null;
     /**
-     * Слот слева
+     * Валюта
      */
-    leftAddons?: React.ReactNode;
+    currency?: CurrencyCodes;
     /**
-     * Слот справа
+     * Дополнительный закрепленный текст справа от основного значения. (по умолчанию — символ валюты)
      */
-    rightAddons?: React.ReactNode;
+    suffix?: string;
     /**
-     * Слот под инпутом
+     * Максимальное число знаков до запятой
      */
-    bottomAddons?: React.ReactNode;
+    integerLength?: number;
     /**
-     * Дополнительный класс
+     * Минорные единицы
      */
-    className?: string;
+    minority?: number;
     /**
-     * Дополнительный класс инпута
+     * Позволяет вводить только целые значения
      */
-    inputClassName?: string;
+    integersOnly?: boolean;
     /**
-     * Дополнительный класс для лейбла
+     * Жир
      */
-    labelClassName?: string;
+    bold?: boolean;
     /**
-     * Обработчик поля ввода
+     * Обработчик события изменения значения
      */
-    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
-        value: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>, payload: {
+        /**
+         * Денежное значение в минорных единицах
+         * Значение null - значит не установлено
+         */
+        value: number | null;
+        /**
+         * Значение инпута
+         */
+        valueString: string;
     }) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
 };
-type AmountInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
+/**
+ * Компонент для ввода денежных значений
+ */
+declare const AmountInput: React.ForwardRefExoticComponent<Pick<InputProps, "className" | "dataTestId" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "children" | "leftAddons" | "rightAddons" | "size" | "block" | "colors" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "fieldClassName" | "labelClassName" | "addonsClassName" | "error" | "hint" | "bottomAddons" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "width" | "clear" | "success" | "inputClassName" | "focusedClassName" | "filledClassName" | "onClear" | "wrapperRef"> & {
     /**
      * Денежное значение в минорных единицах
      * Значение null - значит не установлено
      */
-    value?: number | null;
+    value?: string | number | null | undefined;
     /**
      * Валюта
      */
-    currency?: CurrencyCodes;
+    currency?: "ALL" | "AFN" | "ARS" | "AWG" | "AUD" | "AZN" | "BSD" | "BBD" | "BYN" | "BZD" | "BMD" | "BOB" | "BAM" | "BWP" | "BGN" | "BRL" | "BND" | "KHR" | "CAD" | "KYD" | "CLP" | "CNY" | "COP" | "CRC" | "HRK" | "CUP" | "CZK" | "DKK" | "DOP" | "XCD" | "EGP" | "SVC" | "EEK" | "EUR" | "FKP" | "FJD" | "FRF" | "GHC" | "GIP" | "GTQ" | "GGP" | "GYD" | "HNL" | "HKD" | "HUF" | "ISK" | "INR" | "IDR" | "IRR" | "IMP" | "ILS" | "JMD" | "JPY" | "JEP" | "KZT" | "KGS" | "LAK" | "LVL" | "LBP" | "LRD" | "LTL" | "MKD" | "MYR" | "MUR" | "MXN" | "MNT" | "MZN" | "NAD" | "NPR" | "ANG" | "NZD" | "NIO" | "NGN" | "KPW" | "NOK" | "OMR" | "PKR" | "PAB" | "PYG" | "PEN" | "PHP" | "PLN" | "QAR" | "RON" | "RUR" | "RUB" | "SHP" | "SAR" | "RSD" | "SCR" | "SGD" | "SBD" | "SOS" | "ZAR" | "KRW" | "LKR" | "SEK" | "CHF" | "SRD" | "SYP" | "TWD" | "THB" | "TTD" | "TRY" | "TRL" | "TVD" | "UAH" | "GBP" | "USD" | "UYU" | "UZS" | "VEF" | "VND" | "YER" | "ZWD" | undefined;
+    /**
+     * Дополнительный закрепленный текст справа от основного значения. (по умолчанию — символ валюты)
+     */
+    suffix?: string | undefined;
+    /**
+     * Максимальное число знаков до запятой
+     */
+    integerLength?: number | undefined;
     /**
      * Минорные единицы
      */
-    minority?: number;
+    minority?: number | undefined;
+    /**
+     * Позволяет вводить только целые значения
+     */
+    integersOnly?: boolean | undefined;
     /**
      * Жир
      */
-    bold?: boolean;
+    bold?: boolean | undefined;
     /**
      * Обработчик события изменения значения
      */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>, payload: {
+    onChange?: ((e: React.ChangeEvent<HTMLInputElement>, payload: {
         /**
          * Денежное значение в минорных единицах
          * Значение null - значит не установлено
@@ -105,10 +93,6 @@ type AmountInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
          * Значение инпута
          */
         valueString: string;
-    }) => void;
-};
-/**
- * Компонент для ввода денежных значений
- */
-declare const AmountInput: React.FC<AmountInputProps>;
+    }) => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
 export { AmountInputProps, AmountInput };

package/amount-input/modern/Component.js

@@ -1,46 +1,61 @@
 import cn from 'classnames';
-import React, { useState, useEffect, useCallback } from 'react';
-import { Input } from '../../input/modern';
-import { FormControl } from '../../form-control/modern';
+import React, { forwardRef, useCallback, useState, useEffect, Fragment } from 'react';
 import { getCurrencySymbol, formatAmount, THINSP } from '@alfalab/utils';
-import { getAmountValueFromStr, getFormatedValue } from './utils/index.js';
+import { Input } from '../../input/modern';
+import { withSuffix } from '../../with-suffix/modern';
+import { getAmountValueFromStr, getFormattedValue } from './utils/index.js';
 
-var styles = {"fakeValueWithCurrencyContainer":"amount-input__fakeValueWithCurrencyContainer_43mzk","majorPart":"amount-input__majorPart_43mzk","minorPartAndCurrency":"amount-input__minorPartAndCurrency_43mzk","bold":"amount-input__bold_43mzk","input":"amount-input__input_43mzk","filled":"amount-input__filled_43mzk","focused":"amount-input__focused_43mzk"};
+var styles = {"container":"amount-input__container_ydpb2","bold":"amount-input__bold_ydpb2","input":"amount-input__input_ydpb2","suffixContainer":"amount-input__suffixContainer_ydpb2","filled":"amount-input__filled_ydpb2"};
 require('./index.css');
 
+var defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_1rqya"};
+require('./default.css');
+
+var invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_1hst2"};
+require('./inverted.css');
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+/**
+ * Инпут, позволяющий закрепить значок валюты
+ */
+const SuffixInput = withSuffix(Input);
 /**
  * Компонент для ввода денежных значений
  */
-const AmountInput = ({ value = null, minority = 100, currency = 'RUR', placeholder = `0\u2009${getCurrencySymbol(currency) || ''}`, bold = true, className, dataTestId, onChange, onBlur, onFocus, ...restProps }) => {
-    const [focused, setFocused] = useState(false);
-    const [inputValue, setInputValue] = useState(formatAmount({
-        // TODO: поддержать nullable в utils
-        value: value,
-        currency,
-        minority,
-    }).formated);
-    const filled = Boolean(inputValue || focused);
+const AmountInput = forwardRef(({ value = null, integerLength = 9, minority = 100, currency = 'RUR', suffix = currency, placeholder = `0\u2009${suffix === currency ? getCurrencySymbol(currency) || '' : suffix}`, integersOnly = false, bold = true, colors = 'default', className, focusedClassName, dataTestId, clear = false, onChange, onClear, ...restProps }, ref) => {
+    const getFormattedAmount = useCallback(() => {
+        if (value === '' || value === null)
+            return '';
+        return formatAmount({
+            value: +value,
+            currency,
+            minority,
+            view: 'default',
+        }).formatted;
+    }, [currency, minority, value]);
+    const [inputValue, setInputValue] = useState(getFormattedAmount());
     const currencySymbol = getCurrencySymbol(currency);
     useEffect(() => {
         const currentAmountValue = getAmountValueFromStr(inputValue, minority);
         if (currentAmountValue !== value) {
-            return setInputValue(formatAmount({
-                // TODO: поддержать nullable в utils
-                value: value,
-                currency,
-                minority,
-            }).formated);
+            return setInputValue(getFormattedAmount());
         }
         return () => undefined;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value, currency, minority]);
+    }, [getFormattedAmount]);
     const handleChange = (e) => {
         const input = e.target;
-        const enteredValue = input.value.replace(/\s/g, '').replace('.', ',');
-        const isCorrectEnteredValue = /(^[0-9]{1,9}(,([0-9]+)?)?$|^\s*$)/.test(enteredValue);
+        let enteredValue = input.value.replace(/\s/g, '').replace('.', ',');
+        if (integersOnly) {
+            [enteredValue] = enteredValue.split(',');
+        }
+        const isCorrectEnteredValue = RegExp(`(^[0-9]{1,${integerLength}}(,([0-9]+)?)?$|^\\s*$)`).test(enteredValue);
         if (isCorrectEnteredValue) {
-            const newFormatedValue = getFormatedValue(enteredValue, currency, minority);
-            if (newFormatedValue === inputValue) {
+            const newFormattedValue = getFormattedValue(enteredValue, currency, minority);
+            if (newFormattedValue === inputValue) {
                 const caret = input.selectionStart;
                 window.requestAnimationFrame(() => {
                     input.selectionStart = caret;
@@ -58,20 +73,20 @@ const AmountInput = ({ value = null, minority = 100, currency = 'RUR', placehold
                 let notFormattedEnteredValueLength = head.length;
                 if (tail) {
                     notFormattedEnteredValueLength += 1; // запятая или точка
-                    notFormattedEnteredValueLength += tail.slice(0, 2).length; // только 2 символа в минорной части
+                    notFormattedEnteredValueLength += tail.slice(0, minority.toString().length - 1).length; // символы в минорной части
                 }
-                const diff = newFormatedValue.length - notFormattedEnteredValueLength;
+                const diff = newFormattedValue.length - notFormattedEnteredValueLength;
                 const caret = input.selectionStart + diff;
                 window.requestAnimationFrame(() => {
                     input.selectionStart = caret;
                     input.selectionEnd = caret;
                 });
             }
-            setInputValue(newFormatedValue);
+            setInputValue(newFormattedValue);
             if (onChange) {
                 onChange(e, {
-                    value: getAmountValueFromStr(newFormatedValue, minority),
-                    valueString: newFormatedValue,
+                    value: getAmountValueFromStr(newFormattedValue, minority),
+                    valueString: newFormattedValue,
                 });
             }
         }
@@ -84,32 +99,23 @@ const AmountInput = ({ value = null, minority = 100, currency = 'RUR', placehold
             });
         }
     };
-    const handleInputFocus = useCallback((e) => {
-        setFocused(true);
-        if (onFocus) {
-            onFocus(e);
+    const handleClear = useCallback((event) => {
+        setInputValue('');
+        if (onClear) {
+            onClear(event);
         }
-    }, [onFocus]);
-    const handleInputBlur = useCallback((e) => {
-        setFocused(false);
-        if (onBlur) {
-            onBlur(e);
-        }
-    }, [onBlur]);
+    }, [onClear]);
     const [majorPart, minorPart] = inputValue.split(',');
-    return (React.createElement("div", { className: cn({
+    return (React.createElement("div", { className: cn(styles.container, {
             [styles.bold]: bold,
-            [styles.focused]: focused,
-            [styles.filled]: filled,
+            [styles.filled]: Boolean(inputValue),
         }) },
-        React.createElement(FormControl, Object.assign({}, restProps, { className: cn(styles.fakeValueWithCurrencyContainer), focused: focused, filled: filled }),
-            React.createElement("div", null,
-                React.createElement("span", { className: styles.majorPart }, majorPart),
-                React.createElement("span", { className: styles.minorPartAndCurrency },
+        React.createElement(SuffixInput, Object.assign({}, restProps, { suffix: React.createElement(Fragment, null,
+                majorPart,
+                React.createElement("span", { className: colorStyles[colors].minorPartAndCurrency },
                     minorPart !== undefined && `,${minorPart}`,
                     THINSP,
-                    currencySymbol))),
-        React.createElement(Input, Object.assign({}, restProps, { placeholder: placeholder, value: inputValue, className: cn(styles.component, className), inputClassName: styles.input, onChange: handleChange, onFocus: handleInputFocus, onBlur: handleInputBlur, dataTestId: dataTestId }))));
-};
+                    suffix === currency ? currencySymbol : suffix)), suffixContainerClassName: styles.suffixContainer, clear: clear, placeholder: placeholder, value: inputValue, colors: colors, className: cn(styles.component, className), focusedClassName: focusedClassName, inputClassName: styles.input, onChange: handleChange, onClear: handleClear, inputMode: 'decimal', pattern: '[0-9\\s\\.,]*', dataTestId: dataTestId, ref: ref }))));
+});
 
 export { AmountInput };

package/amount-input/modern/default.css

@@ -0,0 +1,18 @@
+/* hash: 1y6vm */
+:root {
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --amount-input-minor-part-and-currency-color: var(--color-light-text-secondary);
+}
+.amount-input__minorPartAndCurrency_1rqya {
+    color: var(--amount-input-minor-part-and-currency-color);
+}

package/amount-input/modern/index.css

@@ -1,8 +1,11 @@
+/* hash: 12zz4 */
 :root {
-    --color-dark-indigo-60-flat: #6d7986;
-}
-:root {
-    --amount-input-minor-part-and-currency-color: var(--color-dark-indigo-60-flat);
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
 }
 /*
 * Задача:
@@ -16,33 +19,18 @@
 * Делаем скрытый текст где держим то же значение, добавляем символ валюты
 * Важно расположить этот текст ровно на месте инпута и чтобы он имел те же параметры что и текст в инпуте
 */
-.amount-input__fakeValueWithCurrencyContainer_43mzk {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 400;
-    position: absolute;
-    pointer-events: none;
-    visibility: hidden;
-    z-index: 1; /* Не понимаю почему в проекте без этого не работает. Женя помоги */
-}
-.amount-input__majorPart_43mzk {
-    visibility: visible;
+.amount-input__container_ydpb2 {
+    position: relative;
 }
-.amount-input__minorPartAndCurrency_43mzk {
-    color: var(--amount-input-minor-part-and-currency-color);
-}
-.amount-input__bold_43mzk .amount-input__fakeValueWithCurrencyContainer_43mzk,
-.amount-input__bold_43mzk .amount-input__input_43mzk {
+.amount-input__bold_ydpb2 .amount-input__input_ydpb2,
+.amount-input__bold_ydpb2 .amount-input__suffixContainer_ydpb2 {
     font-weight: bold;
 }
-.amount-input__filled_43mzk .amount-input__minorPartAndCurrency_43mzk {
-    visibility: visible;
-}
-.amount-input__filled_43mzk .amount-input__input_43mzk {
-    -webkit-text-fill-color: transparent; /* Для IE текст будет черным */
-    caret-color: black; /* Для IE каретка будет черной */
+/* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */
+.amount-input__suffixContainer_ydpb2 > *:first-child {
+    display: none;
 }
-.amount-input__focused_43mzk .amount-input__input_43mzk::placeholder {
-    color: transparent;
-    transition: none;
+.amount-input__filled_ydpb2 .amount-input__input_ydpb2,
+.amount-input__input_ydpb2:focus {
+    -webkit-text-fill-color: transparent;
 }

package/amount-input/modern/index.js

@@ -1,7 +1,7 @@
 import 'classnames';
 import 'react';
-import '../../input/modern';
-import '../../form-control/modern';
 import '@alfalab/utils';
+import '../../input/modern';
+import '../../with-suffix/modern';
 import './utils/index.js';
 export { AmountInput } from './Component.js';

package/amount-input/modern/inverted.css

@@ -0,0 +1,17 @@
+/* hash: 1eq4v */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --amount-input-inverted-minor-part-and-currency-color: var(
+        --color-light-text-secondary-inverted
+    );
+}
+.amount-input__minorPartAndCurrency_1hst2 {
+    color: var(--amount-input-inverted-minor-part-and-currency-color);
+}

package/amount-input/modern/utils/index.d.ts

@@ -5,6 +5,6 @@ import { CurrencyCodes } from '@alfalab/data';
  * @param currency валюта
  * @param minority количество минорных единиц
  */
-declare function getFormatedValue(enteredValue: string, currency: CurrencyCodes, minority: number): string;
+declare function getFormattedValue(enteredValue: string, currency: CurrencyCodes, minority: number): string;
 declare function getAmountValueFromStr(str: string, minority: number): number | null;
-export { getFormatedValue, getAmountValueFromStr };
+export { getFormattedValue, getAmountValueFromStr };

package/amount-input/modern/utils/index.js

@@ -10,7 +10,7 @@ import { formatAmount } from '@alfalab/utils';
  * @param currency валюта
  * @param minority количество минорных единиц
  */
-function getFormatedValue(enteredValue, currency, minority) {
+function getFormattedValue(enteredValue, currency, minority) {
     const [head, tail] = enteredValue.split(',');
     const { majorPart } = formatAmount({
         value: Number(head) * minority,
@@ -24,12 +24,14 @@ function getFormatedValue(enteredValue, currency, minority) {
         return majorPart.concat(',');
     }
     if (tail) {
-        return majorPart.concat(',', tail.slice(0, 2));
+        return majorPart.concat(',', tail.slice(0, minority.toString().length - 1));
     }
     return majorPart;
 }
 function getAmountValueFromStr(str, minority) {
-    return str === '' ? null : Number(str.replace(',', '.').replace(/[^0-9.]/g, '')) * minority;
+    return str === ''
+        ? null
+        : Math.round(Number(str.replace(',', '.').replace(/[^0-9.]/g, '')) * minority);
 }
 
-export { getAmountValueFromStr, getFormatedValue };
+export { getAmountValueFromStr, getFormattedValue };

package/amount-input/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "./esm/index.js"
+}

package/amount-input/send-stats.js

@@ -0,0 +1,82 @@
+const http = require('http');
+const fs = require('fs');
+const { promisify } = require('util');
+const path = require('path');
+
+const readFile = promisify(fs.readFile);
+
+async function main() {
+    const remoteHost = process.env.NIS_HOST || 'digital';
+    const remotePort = process.env.NIS_PORT || 80;
+    const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
+
+    try {
+        const [_, node, os, arch] =
+            /node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
+        const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
+        const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
+
+        let ownPackageJson, packageJson;
+
+        try {
+            const result = await Promise.all([
+                readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
+                readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
+            ]);
+
+            ownPackageJson = JSON.parse(result[0]);
+            packageJson = JSON.parse(result[1]);
+        } catch (err) {
+            ownPackageJson = '';
+            packageJson = '';
+        }
+
+        const data = {
+            node,
+            npm,
+            yarn,
+            os,
+            arch,
+            ownPackageJson: JSON.stringify(ownPackageJson),
+            packageJson: JSON.stringify(packageJson),
+        };
+
+        const body = JSON.stringify(data);
+
+        const options = {
+            host: remoteHost,
+            port: remotePort,
+            path: remotePath,
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Content-Length': body.length,
+            },
+        };
+
+        return new Promise((resolve, reject) => {
+            const req = http.request(options, res => {
+                res.on('end', () => {
+                    resolve();
+                });
+            });
+
+            req.on('error', () => {
+                reject();
+            });
+
+            req.write(body);
+            req.end();
+        });
+    } catch (error) {
+        throw error;
+    }
+}
+
+main()
+    .then(() => {
+        process.exit(0);
+    })
+    .catch(() => {
+        process.exit(0);
+    });

package/amount-input/utils/index.d.ts

@@ -5,6 +5,6 @@ import { CurrencyCodes } from '@alfalab/data';
  * @param currency валюта
  * @param minority количество минорных единиц
  */
-declare function getFormatedValue(enteredValue: string, currency: CurrencyCodes, minority: number): string;
+declare function getFormattedValue(enteredValue: string, currency: CurrencyCodes, minority: number): string;
 declare function getAmountValueFromStr(str: string, minority: number): number | null;
-export { getFormatedValue, getAmountValueFromStr };
+export { getFormattedValue, getAmountValueFromStr };

package/amount-input/utils/index.js

@@ -12,7 +12,7 @@ var utils = require('@alfalab/utils');
  * @param currency валюта
  * @param minority количество минорных единиц
  */
-function getFormatedValue(enteredValue, currency, minority) {
+function getFormattedValue(enteredValue, currency, minority) {
     var _a = enteredValue.split(','), head = _a[0], tail = _a[1];
     var majorPart = utils.formatAmount({
         value: Number(head) * minority,
@@ -26,13 +26,15 @@ function getFormatedValue(enteredValue, currency, minority) {
         return majorPart.concat(',');
     }
     if (tail) {
-        return majorPart.concat(',', tail.slice(0, 2));
+        return majorPart.concat(',', tail.slice(0, minority.toString().length - 1));
     }
     return majorPart;
 }
 function getAmountValueFromStr(str, minority) {
-    return str === '' ? null : Number(str.replace(',', '.').replace(/[^0-9.]/g, '')) * minority;
+    return str === ''
+        ? null
+        : Math.round(Number(str.replace(',', '.').replace(/[^0-9.]/g, '')) * minority);
 }
 
 exports.getAmountValueFromStr = getAmountValueFromStr;
-exports.getFormatedValue = getFormatedValue;
+exports.getFormattedValue = getFormattedValue;