intelicoreact 1.6.7 → 1.6.8

package/dist/Atomic/FormElements/InputWithAction/InputWithAction.js

@@ -0,0 +1,265 @@
+"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 _Spinner = /*#__PURE__*/ _interop_require_default(require("../../Layout/Spinner/Spinner"));
+const _Button = /*#__PURE__*/ _interop_require_default(require("../../UI/Button/Button"));
+const _Input = /*#__PURE__*/ _interop_require_default(require("../Input/Input"));
+require("./InputWithAction.scss");
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+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;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+const RC = "input-with-action";
+const InputWithAction = /*#__PURE__*/ _react.default.forwardRef((props, ref)=>{
+    const { className, inputClassName, isHideAction = false, actionLabel = "Generate", doAction, actionContent, actionProps, isNoChangeAfterAction = false, isWithCopy = true, copyLabel = "Copy", copy, copyIcon, isNoCopyIcon, isCopyIconRight, copyButtonVariant = "dark-outline", disabled, isInputZoneDisabled, isInputDisabled, isLodaing, onChange, value, testId } = props, inputProps = _object_without_properties(props, [
+        "className",
+        "inputClassName",
+        "isHideAction",
+        "actionLabel",
+        "doAction",
+        "actionContent",
+        "actionProps",
+        "isNoChangeAfterAction",
+        "isWithCopy",
+        "copyLabel",
+        "copy",
+        "copyIcon",
+        "isNoCopyIcon",
+        "isCopyIconRight",
+        "copyButtonVariant",
+        "disabled",
+        "isInputZoneDisabled",
+        "isInputDisabled",
+        "isLodaing",
+        "onChange",
+        "value",
+        "testId"
+    ]);
+    const [isLocalLoading, setIsLocalLoading] = (0, _react.useState)(false);
+    const handle = {
+        doAction: /*#__PURE__*/ _async_to_generator(function*() {
+            setIsLocalLoading(true);
+            const result = yield doAction === null || doAction === void 0 ? void 0 : doAction(value, actionProps);
+            if (!isNoChangeAfterAction) onChange(result);
+            setIsLocalLoading(false);
+            return result;
+        }),
+        copy: ()=>{
+            if (typeof copy === "function") copy(value);
+        }
+    };
+    (0, _react.useEffect)(()=>{
+        if (isLocalLoading !== isLodaing) setIsLocalLoading(isLodaing);
+    }, [
+        isLodaing
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)(RC, className, {
+            [`${RC}_disabled`]: disabled
+        }),
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(`${RC}__input-zone`, {
+                    [`${RC}__input-zone_disabled`]: isInputZoneDisabled,
+                    [`${RC}__input-zone_input-disabled`]: isInputDisabled
+                }),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, _object_spread_props(_object_spread({}, inputProps), {
+                        testId: `${testId}-input`,
+                        ref: ref,
+                        value: value,
+                        disabled: isInputDisabled,
+                        onChange: onChange,
+                        className: (0, _classnames.default)(`${RC}__input`, inputClassName)
+                    })),
+                    !isHideAction && actionContent,
+                    !isHideAction && !actionContent && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__action-container`),
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            className: (0, _classnames.default)(`${RC}__action-label`),
+                            onClick: ()=>handle.doAction(),
+                            testId: `${testId}-action-label`,
+                            children: actionLabel
+                        })
+                    }),
+                    isLocalLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                        size: "small"
+                    })
+                ]
+            }),
+            isWithCopy && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                testId: `${testId}-copy-button`,
+                className: `${RC}__coppy-button`,
+                onClick: ()=>handle.copy(),
+                icon: copyIcon,
+                noIcon: isNoCopyIcon,
+                isIconRight: isCopyIconRight,
+                variant: copyButtonVariant,
+                children: copyLabel
+            })
+        ]
+    });
+});
+const _default = InputWithAction;
+
+//# sourceMappingURL=InputWithAction.js.map

package/dist/Atomic/FormElements/InputWithAction/InputWithAction.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Atomic/FormElements/InputWithAction/InputWithAction.js"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport cn from \"classnames\";\n\nimport Spinner from \"../../Layout/Spinner/Spinner\";\nimport Button from \"../../UI/Button/Button\";\nimport Input from \"../Input/Input\";\n\nimport \"./InputWithAction.scss\";\n\nconst RC = \"input-with-action\";\n\nconst InputWithAction = React.forwardRef((props, ref) => {\n  const {\n    className,\n    inputClassName,\n\n    isHideAction = false,\n    actionLabel = \"Generate\",\n    doAction,\n    actionContent,\n    actionProps,\n    isNoChangeAfterAction = false,\n\n    isWithCopy = true,\n    copyLabel = \"Copy\",\n    copy,\n    copyIcon,\n    isNoCopyIcon,\n    isCopyIconRight,\n    copyButtonVariant = \"dark-outline\",\n\n    disabled,\n    isInputZoneDisabled,\n    isInputDisabled,\n\n    isLodaing,\n\n    onChange,\n    value,\n\n    testId,\n    ...inputProps\n  } = props;\n\n  const [isLocalLoading, setIsLocalLoading] = useState(false);\n\n  const handle = {\n    doAction: async () => {\n      setIsLocalLoading(true);\n      const result = await doAction?.(value, actionProps);\n      if (!isNoChangeAfterAction) onChange(result);\n      setIsLocalLoading(false);\n      return result;\n    },\n    copy: () => {\n      if (typeof copy === \"function\") copy(value);\n    },\n  };\n\n  useEffect(() => {\n    if (isLocalLoading !== isLodaing) setIsLocalLoading(isLodaing);\n  }, [isLodaing]);\n\n  return (\n    <div className={cn(RC, className, { [`${RC}_disabled`]: disabled })}>\n      <div\n        className={cn(`${RC}__input-zone`, {\n          [`${RC}__input-zone_disabled`]: isInputZoneDisabled,\n          [`${RC}__input-zone_input-disabled`]: isInputDisabled,\n        })}\n      >\n        <Input\n          {...inputProps}\n          testId={`${testId}-input`}\n          ref={ref}\n          value={value}\n          disabled={isInputDisabled}\n          onChange={onChange}\n          className={cn(`${RC}__input`, inputClassName)}\n        />\n        {!isHideAction && actionContent}\n\n        {!isHideAction && !actionContent && (\n          <div className={cn(`${RC}__action-container`)}>\n            <span\n              className={cn(`${RC}__action-label`)}\n              onClick={() => handle.doAction()}\n              testId={`${testId}-action-label`}\n            >\n              {actionLabel}\n            </span>\n          </div>\n        )}\n        {isLocalLoading && <Spinner size=\"small\" />}\n      </div>\n      {isWithCopy && (\n        <Button\n          testId={`${testId}-copy-button`}\n          className={`${RC}__coppy-button`}\n          onClick={() => handle.copy()}\n          icon={copyIcon}\n          noIcon={isNoCopyIcon}\n          isIconRight={isCopyIconRight}\n          variant={copyButtonVariant}\n        >\n          {copyLabel}\n        </Button>\n      )}\n    </div>\n  );\n});\n\nexport default InputWithAction;\n"],"names":["RC","InputWithAction","React","forwardRef","props","ref","className","inputClassName","isHideAction","actionLabel","doAction","actionContent","actionProps","isNoChangeAfterAction","isWithCopy","copyLabel","copy","copyIcon","isNoCopyIcon","isCopyIconRight","copyButtonVariant","disabled","isInputZoneDisabled","isInputDisabled","isLodaing","onChange","value","testId","inputProps","isLocalLoading","setIsLocalLoading","useState","handle","result","useEffect","div","cn","Input","span","onClick","Spinner","size","Button","icon","noIcon","isIconRight","variant"],"mappings":"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"}

package/dist/Atomic/FormElements/InputWithAction/InputWithAction.stories.js

@@ -0,0 +1,363 @@
+"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, {
+    InputWithActionTemplate: function() {
+        return InputWithActionTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _InputWithAction = /*#__PURE__*/ _interop_require_default(require("./InputWithAction"));
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+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;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+const _default = {
+    title: 'Form Elements/InputWithAction',
+    component: _InputWithAction.default,
+    argTypes: {
+        className: {
+            description: 'string - classes of component'
+        },
+        inputClassName: {
+            description: 'string - classes of inner component "Input"'
+        },
+        isHideAction: {
+            description: 'boolean - if false then render the action trigger'
+        },
+        actionContent: {
+            description: 'string or JSX or undefined - action trigger content (if isHideAction: false, but actionContent: undefinet then will be rendered actionLabel)'
+        },
+        actionLabel: {
+            description: 'string - action trigger text if actionContent: undefined'
+        },
+        doAction: {
+            description: 'function - action method if actionContent: undefined (await doAction?.(value, actionProps))'
+        },
+        actionProps: {
+            description: 'object - additional properties for doAction method'
+        },
+        isNoChangeAfterAction: {
+            description: 'boolean - if true then after the action, the onChange(actionResult) will not be called'
+        },
+        isWithCopy: {
+            description: 'boolean - if true then render the copy button'
+        },
+        copyLabel: {
+            description: 'text - copy button text, default "Coppy"'
+        },
+        copy: {
+            description: 'function - copy button method, copy(inputValue)'
+        },
+        copyIcon: {
+            description: 'JSX'
+        },
+        isNoCopyIcon: {
+            description: 'bolean - if true then copy icon is not render'
+        },
+        isCopyIconRight: {
+            description: 'bolean - enable position to right for copy icon'
+        },
+        copyButtonVariant: {
+            description: 'sting - see variants for "Button" component'
+        },
+        isLodaing: {
+            description: 'boolean - on|off inner spiner'
+        },
+        disabled: {
+            description: 'boolean'
+        },
+        isInputZoneDisabled: {
+            description: 'boolean'
+        },
+        isInputDisabled: {
+            description: 'boolean'
+        },
+        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'
+        },
+        onlyNumbers: {
+            description: 'object - only numbers'
+        },
+        softStringMode: {
+            description: 'boolean - only strings'
+        },
+        hardStringMode: {
+            description: 'boolean - soft or hard validation'
+        },
+        isTwoDigitAfterDot: {
+            description: 'boolean - only two digits after dot'
+        },
+        isFocusDefault: {
+            description: 'boolean - if true, input will be focused on mount'
+        },
+        isCropFirstNool: {
+            description: 'boolean - if true and isPriceInput - true,  crop first 0'
+        },
+        placeholder: {
+            description: 'text'
+        },
+        type: {
+            description: "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
+            control: {
+                type: 'select',
+                options: [
+                    'text',
+                    'number',
+                    'password',
+                    'color',
+                    'date',
+                    'datetime-local',
+                    'month',
+                    'time',
+                    'email',
+                    'range'
+                ]
+            }
+        },
+        icon: {
+            description: 'JSX'
+        },
+        value: {
+            description: '(* - required prop)'
+        },
+        mask: {
+            description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask'
+        },
+        symbolsLimit: {
+            description: 'Set limit of symbols in input, overhead will be ignored'
+        },
+        onBlur: {
+            description: 'custom callback on blur'
+        },
+        onFocus: {
+            description: 'custom callback on focus'
+        },
+        onKeyUp: {
+            description: 'custom callback on keyup, returns event keyCode'
+        },
+        isNumericMobileKeyboard: {
+            description: 'Enable Mobile Numeric Keyboard',
+            type: 'boolean',
+            default: false
+        }
+    }
+};
+const styles = {
+    with: '200px'
+};
+const doAction = /*#__PURE__*/ function() {
+    var _ref = _async_to_generator(function*(value, props) {
+        return new Promise((resolve)=>{
+            const { newValue, onChange } = props;
+            setTimeout(()=>{
+                resolve(newValue) //? if isNoChangeAfterAction: false
+                ;
+            //? or
+            // onChange(newValue) //? if actionProps has onChange
+            }, 1000);
+        });
+    });
+    return function doAction(value, props) {
+        return _ref.apply(this, arguments);
+    };
+}();
+const copy = (value)=>alert(value);
+const Template = (args)=>{
+    const [value, setValue] = (0, _react.useState)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputWithAction.default, _object_spread_props(_object_spread({}, args), {
+        value: value,
+        doAction: doAction,
+        copy: copy,
+        actionProps: {
+            newValue: 'test-test-test',
+            setValue
+        },
+        style: styles,
+        onChange: setValue
+    }));
+};
+const InputWithActionTemplate = Template.bind({});
+InputWithActionTemplate.args = {
+    testId: 'test',
+    className: 'test-class-name',
+    inputClassName: 'test-class-name__input',
+    isHideAction: false,
+    // actionContent,
+    // actionLabel: 'Generate',
+    isNoChangeAfterAction: false,
+    isWithCopy: true,
+    // copyLabel: 'Coppy this value',
+    // copy,
+    copyIcon: null,
+    isNoCopyIcon: true,
+    isCopyIconRight: false,
+    // copyButtonVariant: 'primary',
+    disabled: false,
+    isInputZoneDisabled: false,
+    isInputDisabled: false,
+    isLodaing: false,
+    type: 'text',
+    isFocusDefault: false,
+    // onlyNumbers: {type: 'float', decimalPlaces: 2, min: 0, max: 1000, isNoEmptyValues: true},
+    isOnlyString: false,
+    isPriceInput: false,
+    isTwoDigitAfterDot: false,
+    isReadOnly: false,
+    error: '',
+    mask: '',
+    softStringMode: false,
+    withDelete: false,
+    symbolsLimit: 255,
+    placeholder: 'Placeholder',
+    // icon: <User className="mr5" />,
+    isNumericMobileKeyboard: false,
+    isNotValidateASCII: false,
+    isCropFirstNool: false,
+    name: 'test-name',
+    fieldKey: 'test-fieldKey',
+    key: 'test-key',
+    id: 'test-id'
+};
+
+//# sourceMappingURL=InputWithAction.stories.js.map

package/dist/Atomic/FormElements/InputWithAction/InputWithAction.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Atomic/FormElements/InputWithAction/InputWithAction.stories.js"],"sourcesContent":["import React, {useState, useEffect} from 'react';\nimport {User} from 'react-feather';\nimport InputWithAction from './InputWithAction';\n\nexport default {\n  title: 'Form Elements/InputWithAction',\n  component: InputWithAction,\n  argTypes: {\n    className: {\n      description: 'string - classes of component',\n    },\n    inputClassName: {\n      description: 'string - classes of inner component \"Input\"',\n    },\n\n    isHideAction: {\n      description: 'boolean - if false then render the action trigger',\n    },\n    actionContent: {\n      description:\n        'string or JSX or undefined - action trigger content (if isHideAction: false, but actionContent: undefinet then will be rendered actionLabel)',\n    },\n    actionLabel: {\n      description: 'string - action trigger text if actionContent: undefined',\n    },\n    doAction: {\n      description: 'function - action method if actionContent: undefined (await doAction?.(value, actionProps))',\n    },\n    actionProps: {\n      description: 'object - additional properties for doAction method',\n    },\n    isNoChangeAfterAction: {\n      description: 'boolean - if true then after the action, the onChange(actionResult) will not be called',\n    },\n\n    isWithCopy: {\n      description: 'boolean - if true then render the copy button',\n    },\n    copyLabel: {\n      description: 'text - copy button text, default \"Coppy\"',\n    },\n    copy: {\n      description: 'function - copy button method, copy(inputValue)',\n    },\n    copyIcon: {\n      description: 'JSX',\n    },\n    isNoCopyIcon: {\n      description: 'bolean - if true then copy icon is not render',\n    },\n    isCopyIconRight: {\n      description: 'bolean - enable position to right for copy icon',\n    },\n    copyButtonVariant: {\n      description: 'sting - see variants for \"Button\" component',\n    },\n\n    isLodaing: {\n      description: 'boolean - on|off inner spiner',\n    },\n\n    disabled: {\n      description: 'boolean',\n    },\n    isInputZoneDisabled: {\n      description: 'boolean',\n    },\n    isInputDisabled: {\n      description: 'boolean',\n    },\n\n    error: {\n      description: 'text - coloring input if is errored',\n    },\n    isPriceInput: {\n      description: 'boolean - if true, the input will be styled as PriceInput',\n    },\n    withDelete: {\n      description: 'boolean - add clear-cross by hover',\n    },\n    onlyNumbers: {\n      description: 'object - only numbers',\n    },\n    softStringMode: {\n      description: 'boolean - only strings',\n    },\n    hardStringMode: {\n      description: 'boolean - soft or hard validation',\n    },\n    isTwoDigitAfterDot: {\n      description: 'boolean - only two digits after dot',\n    },\n    isFocusDefault: {\n      description: 'boolean - if true, input will be focused on mount',\n    },\n    isCropFirstNool: {\n      description: 'boolean - if true and isPriceInput - true,  crop first 0',\n    },\n    placeholder: {\n      description: 'text',\n    },\n    type: {\n      description: \"'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'\",\n      control: {\n        type: 'select',\n        options: ['text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'],\n      },\n    },\n    icon: {description: 'JSX'},\n    value: {description: '(* - required prop)'},\n    mask: {\n      description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask',\n    },\n    symbolsLimit: {\n      description: 'Set limit of symbols in input, overhead will be ignored',\n    },\n    onBlur: {description: 'custom callback on blur'},\n    onFocus: {description: 'custom callback on focus'},\n    onKeyUp: {description: 'custom callback on keyup, returns event keyCode'},\n\n    isNumericMobileKeyboard: {\n      description: 'Enable Mobile Numeric Keyboard',\n      type: 'boolean',\n      default: false,\n    },\n  },\n};\n\nconst styles = {\n  with: '200px',\n};\n\nconst doAction = async (value, props) => {\n  return new Promise(resolve => {\n    const { newValue, onChange } = props;\n    setTimeout(() => {\n      resolve(newValue) //? if isNoChangeAfterAction: false\n      //? or\n      // onChange(newValue) //? if actionProps has onChange\n    }, 1000);\n  });\n};\n\nconst copy = value => alert(value);\n\nconst Template = args => {\n  const [value, setValue] = useState();\n\n  return (\n    <InputWithAction \n      {...args}\n      value={value}\n      doAction={doAction}\n      copy={copy}\n      actionProps={({ newValue: 'test-test-test', setValue })}\n      style={styles}\n      onChange={setValue} \n    />\n  );\n};\n\nexport const InputWithActionTemplate = Template.bind({});\nInputWithActionTemplate.args = {\n  testId: 'test',\n  className: 'test-class-name',\n  inputClassName: 'test-class-name__input',\n\n  isHideAction: false,\n  // actionContent,\n  // actionLabel: 'Generate',\n  isNoChangeAfterAction: false,\n\n  isWithCopy: true,\n  // copyLabel: 'Coppy this value',\n  // copy,\n  copyIcon: null,\n  isNoCopyIcon: true,\n  isCopyIconRight: false,\n  // copyButtonVariant: 'primary',\n\n  disabled: false,\n  isInputZoneDisabled: false,\n  isInputDisabled: false,\n\n  isLodaing: false,\n\n  type: 'text',\n  isFocusDefault: false,\n  // onlyNumbers: {type: 'float', decimalPlaces: 2, min: 0, max: 1000, isNoEmptyValues: true},\n  isOnlyString: false,\n  isPriceInput: false,\n  isTwoDigitAfterDot: false,\n  isReadOnly: false,\n  error: '',\n  mask: '',\n  softStringMode: false,\n  withDelete: false,\n  symbolsLimit: 255,\n  placeholder: 'Placeholder',\n  // icon: <User className=\"mr5\" />,\n  isNumericMobileKeyboard: false,\n  isNotValidateASCII: false,\n  isCropFirstNool: false,\n  name: 'test-name',\n  fieldKey: 'test-fieldKey',\n  key: 'test-key',\n  id: 'test-id',\n};"],"names":["InputWithActionTemplate","title","component","InputWithAction","argTypes","className","description","inputClassName","isHideAction","actionContent","actionLabel","doAction","actionProps","isNoChangeAfterAction","isWithCopy","copyLabel","copy","copyIcon","isNoCopyIcon","isCopyIconRight","copyButtonVariant","isLodaing","disabled","isInputZoneDisabled","isInputDisabled","error","isPriceInput","withDelete","onlyNumbers","softStringMode","hardStringMode","isTwoDigitAfterDot","isFocusDefault","isCropFirstNool","placeholder","type","control","options","icon","value","mask","symbolsLimit","onBlur","onFocus","onKeyUp","isNumericMobileKeyboard","default","styles","with","props","Promise","resolve","newValue","onChange","setTimeout","alert","Template","args","setValue","useState","style","bind","testId","isOnlyString","isReadOnly","isNotValidateASCII","name","fieldKey","key","id"],"mappings":"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"}