intelicoreact 1.5.32 → 1.5.34

package/dist/src/Atomic/FormElements/NumericInput/NumericInput.js

@@ -0,0 +1,324 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _reactfeather = require("react-feather");
+const _indexconstants = require("../../../Constants/index.constants");
+const _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
+const _Spinner = /*#__PURE__*/ _interop_require_default(require("../../Layout/Spinner/Spinner"));
+require("./NumericInput.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const NumericInput = ({ disabled, withDelete, numStep = 1, min = 0, max, value, placeholder, className, testId = "numeric-input", name, fieldKey, id, onChange = ()=>{}, onBlur = ()=>{}, onFocus = ()=>{}, onKeyUp = ()=>{}, onKeyDown = ()=>{}, maskChar, formatChars, error, icon, isNotBlinkErrors, blinkTime, isPriceInput, isFocusDefault = false, isNotRenderButtons = false, isUseAutoSelect = true, isLoading = false, isAllowNullValue = false, onlyNumbers = {
+    type: "int"
+}, attributesOfNativeInput = {} })=>{
+    const DEFAULT_BLINK_TIME = 200;
+    //REFS
+    const inputRef = (0, _react.useRef)(null);
+    const decRef = (0, _react.useRef)(null);
+    const incRef = (0, _react.useRef)(null);
+    const wrapRef = (0, _react.useRef)(null);
+    // STATES
+    const initialMin = isAllowNullValue ? "" : min;
+    const [inputValue, setInputValue] = (0, _react.useState)(value || initialMin);
+    const [inputValueFormated, setInputValueFormated] = (0, _react.useState)(inputValue);
+    const [intMemoVal, setIntMemoVal] = (0, _react.useState)(0);
+    const [isFocused, setIsFocused] = (0, _react.useState)(false);
+    const [isAttemptToChange, setIsAttemptToChange] = (0, _react.useState)(false);
+    const [isToHighlightError, setIsToHighlightError] = (0, _react.useState)(false);
+    const [prevValue, setPreviousValue] = (0, _react.useState)(value || initialMin);
+    const setCursorToEnd = ()=>{
+        var _input_value;
+        const input = inputRef.current;
+        const cursor = input === null || input === void 0 ? void 0 : (_input_value = input.value) === null || _input_value === void 0 ? void 0 : _input_value.length;
+        if (input) setTimeout(()=>input.setSelectionRange(cursor, cursor), 10);
+    };
+    // HANDLES
+    const handle = {
+        change: (e)=>{
+            const inputValue = e.target ? (0, _fieldValueFormatters.filterNumeric)(e.target.value, onlyNumbers) : (0, _fieldValueFormatters.filterNumeric)(e, onlyNumbers);
+            setInputValue(inputValue.toString());
+        },
+        clear: ()=>{
+            handle.change(initialMin || "");
+        },
+        focus: (e)=>{
+            setIsFocused(true);
+            if (onFocus) onFocus(e);
+        },
+        blur: (e)=>{
+            setIsFocused(false);
+            if (Number.isNaN(inputValue) || inputValue < min) setInputValue(initialMin);
+            if (max && Number(max) < inputValue) setInputValue(max);
+            if (onBlur) onBlur(e);
+        },
+        keyDown: (e)=>{
+            var _e_target;
+            setPreviousValue(e === null || e === void 0 ? void 0 : (_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.value);
+            onKeyDown(e.keyCode, e);
+        },
+        keyUp: (e)=>{
+            if (!isNotBlinkErrors) {
+                const changedValue = String(value !== null && value !== void 0 ? value : "");
+                const previousValue = String(prevValue);
+                const short = previousValue.length <= changedValue.length ? previousValue : changedValue;
+                const long = previousValue.length > changedValue.length ? previousValue : changedValue;
+                const infoAboutDifferencesSameness = short.split("").reduce((acc, symbol, idx)=>{
+                    if (acc.countOn && symbol === long[idx]) acc.same.push(symbol);
+                    else {
+                        acc.countOn = false;
+                        acc.differences.push([
+                            idx,
+                            symbol
+                        ]);
+                    }
+                    return acc;
+                }, {
+                    same: [],
+                    countOn: true,
+                    differences: []
+                });
+                const samePart = infoAboutDifferencesSameness.same.join("");
+                const differencesLength = infoAboutDifferencesSameness.differences.length;
+                const currentSet = changedValue === null || changedValue === void 0 ? void 0 : changedValue.replace(samePart, "");
+                if (!_indexconstants.KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue) setIsAttemptToChange(!(!differencesLength && e.key === currentSet));
+            }
+            if (onKeyUp) onKeyUp(e.keyCode, e.target.value);
+        },
+        decrement: (e)=>{
+            let newValue = Number(intMemoVal) - Number(numStep);
+            if (newValue < min) newValue = min;
+            else if (newValue > max) newValue = max;
+            handle.change(newValue);
+            setTimeout(()=>{
+                var _inputRef_current;
+                inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+                setCursorToEnd();
+            }, 100);
+        },
+        increment: (e)=>{
+            let newValue = Number(intMemoVal) + Number(numStep);
+            if (newValue < min) newValue = min;
+            else if (newValue > max) newValue = max;
+            handle.change(newValue);
+            setTimeout(()=>{
+                var _inputRef_current;
+                inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+                setCursorToEnd();
+            }, 100);
+        }
+    };
+    //Check Outside Click
+    (0, _react.useEffect)(()=>{
+        const handleClickOutside = (event)=>{
+            if (!wrapRef.current.contains(event.target)) setIsFocused(false);
+        };
+        document.addEventListener("mousedown", handleClickOutside, true);
+        return ()=>document.removeEventListener("mousedown", handleClickOutside, true);
+    }, []);
+    (0, _react.useEffect)(()=>{
+        if (!isNotBlinkErrors && isAttemptToChange) {
+            setIsAttemptToChange(false);
+            setIsToHighlightError(true);
+            setTimeout(()=>{
+                setIsToHighlightError(false);
+            }, blinkTime || DEFAULT_BLINK_TIME);
+        }
+    }, [
+        isAttemptToChange
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (value && value !== inputValue) setInputValue(value);
+    }, [
+        value
+    ]);
+    //On Input Value Change
+    (0, _react.useEffect)(()=>{
+        if (inputValue !== value) setIsFocused(true);
+        setInputValueFormated(isPriceInput && (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > 0 ? isFocused ? (0, _fieldValueFormatters.formatToRemoveComa)(inputValue) : (0, _fieldValueFormatters.formatToAddBitDepthPoints)(inputValue) : inputValue);
+        setIntMemoVal((0, _fieldValueFormatters.formatToRemoveComa)(inputValue));
+        if (typeof onChange === "function" && value !== undefined && +inputValue !== +value) onChange(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString());
+    }, [
+        inputValue
+    ]);
+    //On Integer Value Change
+    (0, _react.useEffect)(()=>{
+        if (isNaN(intMemoVal)) setIntMemoVal(min || 0);
+    }, [
+        intMemoVal
+    ]);
+    //On Focuse Change
+    (0, _react.useEffect)(()=>{
+        let formatedValue = inputValue;
+        if (isPriceInput) formatedValue = isFocused ? (0, _fieldValueFormatters.formatToRemoveComa)(inputValue) : (0, _fieldValueFormatters.formatToAddBitDepthPoints)(inputValue);
+        setInputValueFormated(formatedValue);
+        if (isFocused) {
+            var _inputRef_current;
+            if (typeof onFocus === "function") onFocus({
+                target: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current
+            });
+            inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+        } else {
+            var _inputRef_current1;
+            if (typeof onBlur === "function") onBlur({
+                target: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current
+            });
+            inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current1 = inputRef.current) === null || _inputRef_current1 === void 0 ? void 0 : _inputRef_current1.blur();
+        }
+    }, [
+        isFocused
+    ]);
+    (0, _react.useEffect)(()=>{
+        if ((inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && typeof isFocusDefault === "boolean") setIsFocused(isFocusDefault);
+    }, [
+        inputRef,
+        isFocusDefault
+    ]);
+    function renderInput() {
+        const uniProps = {
+            name: name || fieldKey || id || testId || "",
+            className: `input ${className || ""}`,
+            placeholder,
+            value: inputValueFormated,
+            disabled,
+            onChange: handle.change,
+            onFocus: handle.focus,
+            onBlur: handle.blur,
+            onKeyDown: handle.keyDown,
+            onKeyUp: handle.keyUp,
+            min,
+            max,
+            ...maskChar ? {
+                maskChar
+            } : {},
+            ...formatChars ? {
+                formatChars
+            } : {}
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                    ...uniProps,
+                    "data-testid": `${testId}-input`,
+                    value: (value === null || value === void 0 ? void 0 : value.length) > 0 ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)((0, _fieldValueFormatters.formatToRemoveComa)(value)) : value,
+                    ref: inputRef,
+                    type: "text",
+                    onFocus: (...params)=>{
+                        if (isUseAutoSelect) inputRef.current.select();
+                        if (uniProps.onFocus) uniProps.onFocus(...params);
+                    },
+                    ...attributesOfNativeInput
+                }),
+                !isNotRenderButtons ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: "input__nums",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                            "data-testid": `${testId}-minus-btn`,
+                            ref: decRef,
+                            className: (0, _classnames.default)("input__num-btn", {
+                                "events-none": Number(value) <= min
+                            }),
+                            onMouseDown: (e)=>handle.decrement(e),
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Minus, {
+                                className: (0, _classnames.default)({
+                                    disabled: Number(value) <= min
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                            "data-testid": `-${testId}-plus-btn`,
+                            ref: incRef,
+                            className: (0, _classnames.default)("input__num-btn", {
+                                "events-none": Number(value) >= max
+                            }),
+                            onMouseDown: (e)=>handle.increment(e),
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Plus, {
+                                className: (0, _classnames.default)({
+                                    disabled: Number(value) >= max
+                                })
+                            })
+                        })
+                    ]
+                }) : null
+            ]
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": testId,
+        ref: wrapRef,
+        className: (0, _classnames.default)(`input__wrap`, {
+            [`input__wrap_focus`]: isFocused
+        }, {
+            [`input__wrap_error`]: error || isToHighlightError
+        }, {
+            [`input__wrap--disabled`]: disabled || isLoading
+        }),
+        children: [
+            renderInput(),
+            icon,
+            withDelete && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: (0, _classnames.default)(`input__close`, {
+                    hidden: !inputValue
+                }),
+                onClick: ()=>handle.clear()
+            }),
+            isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                size: "small"
+            })
+        ]
+    });
+};
+const _default = NumericInput;

package/dist/src/Atomic/FormElements/NumericInput/NumericInput.scss

@@ -0,0 +1,174 @@
+.input {
+  position: relative;
+
+  width: 100%;
+  padding: 0 10px;
+
+  word-break: break-all;
+
+  border: none;
+  background: none;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    appearance: none;
+  }
+
+  &__wrap {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    box-sizing: border-box;
+    height: 28px;
+
+    border: 1px solid #e2e5ec;
+    border-radius: 4px;
+    background-color: #fff;
+
+    &_focus {
+      border-color: #6b81dd;
+      filter: drop-shadow(0 0 4px rgb(93 120 255 / 50%));
+    }
+
+    &_disabled {
+      pointer-events: none;
+
+      opacity: 0.5;
+      border-color: #a6acb1;
+      background: #f7f8fa;
+    }
+
+    &_error {
+      border-color: #f06d8d;
+    }
+
+    .lds-ring.lds-ring_small {
+      top: calc(50% - 18px);
+    }
+  }
+
+  &_disabled {
+    pointer-events: none;
+
+    opacity: 0.5;
+    border-color: #a6acb1;
+    background: #f7f8fa;
+  }
+
+  &_error {
+    border-color: #f06d8d;
+  }
+
+  svg {
+    margin-right: 4px;
+  }
+
+  &__input {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: 0 5px;
+
+    font-size: 13px;
+    font-weight: 400;
+
+    color: #1e1e2d;
+    border: none;
+    border-radius: 4px;
+  }
+
+  &__close {
+    position: relative;
+
+    visibility: hidden;
+
+    width: 14px;
+    height: 14px;
+    margin-right: 4px;
+
+    cursor: pointer;
+    pointer-events: none;
+
+    opacity: 0.6;
+    background: none;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+
+      width: 2px;
+      height: 14px;
+      margin: auto;
+
+      content: '';
+
+      background-color: #9aa0b9;
+    }
+
+    &::before {
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      transform: rotate(-45deg);
+    }
+  }
+
+  &__nums {
+    display: flex;
+    align-items: center;
+
+    height: 100%;
+  }
+
+  &__num-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 24px;
+    height: 100%;
+
+    font-size: 20px;
+    cursor: pointer;
+    user-select: none;
+
+    border-left: 1px solid #e2e5ec;
+    background: none;
+
+    &.disabled {
+      opacity: 0.3;
+    }
+
+    svg {
+      margin-right: 0;
+    }
+  }
+
+  &-label {
+    margin-bottom: 5px;
+  }
+
+  &--with-icon {
+    padding: 0 40px 0 10px;
+  }
+}
+
+.input__wrap:hover .input__close {
+  visibility: visible;
+
+  pointer-events: all;
+}
+
+.events-none {
+  pointer-events: none;
+}

package/dist/src/Atomic/FormElements/NumericInput/NumericInput.stories.js

@@ -0,0 +1,184 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    NumericInputTemplate: function() {
+        return NumericInputTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _NumericInput = /*#__PURE__*/ _interop_require_default(require("./NumericInput"));
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+global.lng = 'en';
+const _default = {
+    title: 'Form Elements/NumericInput',
+    component: _NumericInput.default,
+    argTypes: {
+        disabled: {
+            description: 'boolean'
+        },
+        isFocusDefault: {
+            description: 'boolean - if true, input will be focused on mount'
+        },
+        isInitialFocus: {
+            description: 'boolean - if true, the input will be focused on mount'
+        },
+        error: {
+            description: 'text - coloring input if is errored'
+        },
+        isPriceInput: {
+            description: 'boolean - if true, the input will be styled as PriceInput'
+        },
+        withDelete: {
+            description: 'boolean - add clear-cross by hover'
+        },
+        numStep: {
+            description: 'number/text - plus/minus buttons factor (default: 1)'
+        },
+        min: {
+            description: 'number/text - minimal number for numeric input'
+        },
+        max: {
+            description: 'number/text - maximal number for numeric input'
+        },
+        placeholder: {
+            description: 'text'
+        },
+        icon: {
+            description: 'JSX'
+        },
+        value: {
+            description: '(* - required prop)'
+        },
+        className: {
+            description: 'string'
+        },
+        onBlur: {
+            description: 'custom callback on blur'
+        },
+        onFocus: {
+            description: 'custom callback on focus'
+        },
+        onKeyUp: {
+            description: 'custom callback on keyup, returns event keyCode'
+        },
+        testId: {
+            description: 'string'
+        },
+        onlyNumbers: {
+            description: 'object - {type: "int" || "float", decimalPlaces: number}'
+        },
+        attributesOfNativeInput: {
+            description: 'Object. Optional. This is list of attributes to add in native input'
+        }
+    }
+};
+const buttonStyles = {
+    border: 'solid 1px #000',
+    padding: '5px',
+    margin: '20px 0'
+};
+const Template = (args)=>{
+    const [value, setValue] = (0, _react.useState)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_NumericInput.default, {
+                ...args,
+                value: value,
+                onChange: setValue
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                style: buttonStyles,
+                onClick: ()=>{
+                    // setIsDisabled(true);
+                    setTimeout(()=>{
+                        setValue('500');
+                    // setIsDisabled(false);
+                    }, 1000);
+                },
+                children: "start timeout"
+            })
+        ]
+    });
+};
+const NumericInputTemplate = Template.bind({});
+NumericInputTemplate.args = {
+    className: 'test-class',
+    testId: 'test-id',
+    disabled: false,
+    isLoading: false,
+    isFocusDefault: false,
+    error: '',
+    isPriceInput: false,
+    mask: '',
+    withDelete: true,
+    isNumeric: false,
+    numStep: 100,
+    // min: '0',
+    max: '15000',
+    symbolsLimit: 6,
+    placeholder: 'Placeholder',
+    isNotRenderButtons: false,
+    // icon: <User />
+    onlyNumbers: {
+        type: 'float',
+        decimalPlaces: 2
+    }
+};