intelicoreact 1.5.32 → 1.5.34

package/dist/src/Molecular/FormWithDependOn/FormWithDependOn.stories.js

@@ -0,0 +1,301 @@
+"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, {
+    FormWithDependOnTemplate: function() {
+        return FormWithDependOnTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _utils = require("../../Functions/utils");
+const _FormWithDependOn = /*#__PURE__*/ _interop_require_default(require("./FormWithDependOn"));
+const _FormElement = /*#__PURE__*/ _interop_require_default(require("../FormElement/FormElement"));
+const _Dropdown = /*#__PURE__*/ _interop_require_default(require("../../Atomic/FormElements/Dropdown/Dropdown"));
+const _Input = /*#__PURE__*/ _interop_require_default(require("../../Atomic/FormElements/Input/Input"));
+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/Form With Depend On',
+    component: _FormWithDependOn.default,
+    argTypes: {
+        ref: {
+            description: 'The component is implemented as React.forwardRef and accepts refs'
+        },
+        form: {
+            description: 'Array of Objects. This is the target form, the component render it and mutated it with the passed methods'
+        },
+        formId: {
+            description: 'String, optional. If passed, it will be used as an id attribute for the topmost container from the returned JSX'
+        },
+        setForm: {
+            description: 'Function. The method of direct installation of the form. If it is not passed, then the dependOn system will not work correctly'
+        },
+        onChange: {
+            description: 'Function. The method to be called by the field when changing. If not passed, the form will be rendered, but it will be immutable'
+        },
+        renderField: {
+            description: 'Function. The method for drawing each element of the form. If not passed, the component will return an empty container'
+        },
+        getAnotherActions: {
+            description: 'Function, optional. The function should return an object with methods of the same name as the field keys or with the name "all". ' + 'When changing the field, the method of the same name will be called from this object. The all method will be called for any change to any field'
+        },
+        className: {
+            description: 'String, optional. If passed, it will be added additional to the className attribute of the upper container of the returned JSX'
+        },
+        isInitializeByDependOn: {
+            description: 'Boolean, optional. If true is passed, then useEffect will be triggered by zero dependence. ' + 'In this run, the dependOn logic will be run for each field without running onChange. ' + 'This is convenient when you need the described dependencies to work during initialization as part of initialization.'
+        },
+        isFormDisabled: {
+            description: 'Boolean, optional. If true is passed, the disabled: true property will be passed for each field'
+        },
+        typeOfUse: {
+            description: 'String, optional, default value - "default". Related to the dependOn logic. ' + 'Sometimes, to organize the logic of dependencies, it is important to understand which implementation of the form as a whole works.' + 'This value is passed for each dependOn callback in the object of "additional" property'
+        }
+    }
+};
+// ? Пример конструктора в проекте. В филдах прописаны зависимости
+// ?  - филды могут быть доминирующими, зависимыми и одновременно доминирующими и зависимыми (как email в примере)
+// ?  - филды могут быть зависимы от нескольких полей, как с одной реакцией,
+// ?    так и с разными реациями на каждую зависимость (как additionalInfo в примере)
+// ?  - филды могут быть зависимы от самих себя
+const fields = [
+    {
+        key: 'variants',
+        label: 'Test dropdown',
+        type: 'dropdown',
+        options: [
+            {
+                value: 'account',
+                label: 'Account'
+            },
+            {
+                value: 'email',
+                label: 'Email'
+            }
+        ],
+        isDominantField: true,
+        isNotUseInnerHandler: true,
+        value: 'account'
+    },
+    {
+        key: 'email',
+        label: 'Email',
+        isDominantField: true,
+        isNotUseInnerHandler: true,
+        dependOn: {
+            keys: [
+                'variants'
+            ],
+            callback: (dominantField, dependField, form, additional)=>{
+                const { onChange, assign } = additional;
+                const isNotRender = dominantField.value !== 'email';
+                if (!isNotRender) {
+                    setTimeout(()=>{
+                        onChange('', dependField.key, null, {
+                            updatedForm: form.map((field)=>field.key === dominantField.key ? dominantField : field)
+                        });
+                    }, 0);
+                }
+                return {
+                    isNotRender
+                };
+            }
+        }
+    },
+    {
+        key: 'additionalInfo',
+        label: 'Additional',
+        isNotUseInnerHandler: true,
+        dependOn: {
+            keys: [
+                'variants',
+                'email'
+            ],
+            callbacks: {
+                variants: (dominantField, dependField)=>{
+                    const isAccountCase = dominantField.value === 'account';
+                    const label = isAccountCase ? 'Account name' : 'Your name';
+                    return {
+                        label,
+                        value: '',
+                        disabled: isAccountCase ? false : dependField.disabled,
+                        placeholder: null
+                    };
+                },
+                email: (dominantField)=>{
+                    if (!dominantField.value) return {
+                        value: '',
+                        placeholder: 'first, enter your email',
+                        disabled: true
+                    };
+                    else return {
+                        disabled: false,
+                        placeholder: `${dominantField.value} owner name`
+                    };
+                }
+            }
+        }
+    }
+];
+// ? Это НЕ либовская логика. Это описывается на уровне проекта (даже на уровне конкретной реализации) и сводится к вызову для каждого филда FormItem.
+// ? Так же тут можно скорректировать пропы для FormItem, да и вообще).
+// ? Код частично взят из самого FormItem (в целом - без разницы какого проекта)
+const renderField = ({ field, onChange })=>{
+    const { fieldChangesMiddleware, isNotUseInnerHandler, isRequired, disclaimer, isNoFormElemLabel, label } = field;
+    const handle = {
+        change: (value, fieldKey, propKey)=>{
+            let newValue;
+            if (typeof fieldChangesMiddleware === 'function' && typeof value === 'string') {
+                newValue = fieldChangesMiddleware(value);
+            } else {
+                newValue = value;
+            }
+            // ! Специально прописал сюда этот кусок, т.к. он есть в КАЖДОЙ реализации FormItem (RenderField для админки)
+            // ! Если в конструкторе НЕ прописать КАЖДОМУ филду пропу isNotUseInnerHandler: true, то FormWithDependOn НЕ будет корректно работать
+            // ! (смотри код (*) в FormWithDependOn)
+            if (!isNotUseInnerHandler) {
+                field.error = '';
+                field.value = newValue;
+            }
+            // ! Есть реализации, в которых верхний onChange (самый верхний, базовый, который в примере generalOnChange)
+            // ! принимает 4-й аргумент! Это объект с чем угодно. Или НЕ добавляйте ТУТ 4-й аргумен, или добавляйте объектом.
+            onChange(newValue, fieldKey || field.key, propKey, {
+                isCleaningUpErrors: true
+            });
+        }
+    };
+    const getFieldJSX = (field)=>{
+        switch(field.type){
+            case 'dropdown':
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Dropdown.default, {
+                    ...field,
+                    value: field.value,
+                    onChange: (val)=>handle.change(val)
+                });
+            default:
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                    ...field,
+                    onChange: (val)=>handle.change(val)
+                });
+        }
+    };
+    if (field.isNotRender) return null;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FormElement.default, {
+        alert: disclaimer,
+        label: isNoFormElemLabel ? null : label,
+        required: isRequired,
+        children: getFieldJSX(field)
+    }, field.key);
+};
+// ? В целом система dependOn самодостаточна и решает широкий спектр организации зависимостей,
+// ? однако иногда может быть полезным отделить какую-то логику от dependOn и организовать отдельным персональным экшеном
+// ? (или же общим методом all, но отдельно от dependOn)
+// ? Для этого и существует данный метод.
+// ? Формат возврата данного метода - объект методов, либо одноименных ключу филда, либо с названием all (общий)
+// ? На вход getAnotherActions получает объект с методами установки - setForm и assign
+// ? Каждый метод из объекта методов при вызове на вход получит объект с пропами
+// ?  - newValue - новое значение изменившегося филда
+// ?  - fieldKey - ключ изменившегося филда
+// ?  - propKey - ключ изменяемой пропы изменившегося филда (будет undefined если меняется 'value')
+// ?  - field - целевой филд ДО применения нового значения
+// ?  - form - вся форма ДО применения нового значения к целевому филду
+// ?    (если только onChange не вызывали c updatedForm, тогда в этой пропе будет updatedForm, смотри generalOnChange из Template)
+// ?  - additional - объект с дополнительной информацией и методами
+// ! Важно !
+// ! Экшены запускает вызов onChange. Назначения через assing НЕ тригирят ни экшенов, ни логики dependOn
+const getAnotherActions = ({ setForm, assign })=>{
+    return {
+        additionalInfo: ({ newValue, fieldKey, propKey, field, form, additional })=>{
+            const { isInitilisation } = additional;
+            if (!isInitilisation && !newValue) alert('Стерли руками additionalInfo!');
+        }
+    };
+};
+const Template = (args)=>{
+    const [form, setForm] = (0, _react.useState)(fields);
+    const generalOnChange = (newValue, fieldKey, propKey, additionalOfOnChange)=>{
+        // ? additionalOfOnChange - возможность прописать какие-либо особенности чтобы реагировать на информацию с мест вызовов,
+        const { updatedForm, isCleaningUpErrors } = (0, _utils.getIsOnlyAnObject)(additionalOfOnChange) ? additionalOfOnChange : {};
+        // ! Для корректной работы важно в базовом setForm учитывать возможность updatedForm
+        // ! Это нужно если из dedpendOn-колбеков делаются повторные вызовы onChange
+        // ! (не return объекта изменений, не assign изменения, а именно вызов onChange, для триггера нового витка сработок зависимостей)
+        setForm((Array.isArray(updatedForm) ? updatedForm : form).map((field)=>field.key === fieldKey ? {
+                ...field,
+                [propKey || 'value']: newValue,
+                ...isCleaningUpErrors ? {
+                    error: ''
+                } : {}
+            } : field));
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FormWithDependOn.default, {
+        ...args,
+        className: "form-with-depend-on_example",
+        form: form,
+        setForm: setForm,
+        onChange: generalOnChange,
+        renderField: renderField,
+        getAnotherActions: getAnotherActions
+    });
+};
+const FormWithDependOnTemplate = Template.bind({});
+FormWithDependOnTemplate.args = {
+    isInitializeByDependOn: true,
+    isFormDisabled: false
+};

package/dist/src/Molecular/FormWithDependOn/partials/_utils.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getDependOnStarter", {
+    enumerable: true,
+    get: function() {
+        return getDependOnStarter;
+    }
+});
+const _utils = require("../../../Functions/utils");
+const getDependOnStarter = (props)=>{
+    const { assign } = props;
+    return ({ newValue, fieldKey, propKey, field, form, additional })=>{
+        if (field.isDominantField) {
+            const dependFields = form.filter((f)=>{
+                var _f_dependOn_keys_includes, _f_dependOn_keys, _f_dependOn;
+                return (_f_dependOn = f.dependOn) === null || _f_dependOn === void 0 ? void 0 : (_f_dependOn_keys = _f_dependOn.keys) === null || _f_dependOn_keys === void 0 ? void 0 : (_f_dependOn_keys_includes = _f_dependOn_keys.includes) === null || _f_dependOn_keys_includes === void 0 ? void 0 : _f_dependOn_keys_includes.call(_f_dependOn_keys, fieldKey);
+            });
+            if (dependFields.length > 0) {
+                const { isNotResetErrors } = additional;
+                dependFields.forEach((dependField)=>{
+                    var _dependField_dependOn_callbacks;
+                    var _dependField_dependOn_callbacks_fieldKey;
+                    // ! Для звисимого филда есть 2 способа назначить обработчик
+                    // ?  - прописать в объекте dependOn callback, который будет вызываться для каждой зависимости,
+                    // ?    а уже внутри самого колбэка разбираться, для какой имменно зависимости вызван обработчик
+                    // ?  - прописать в объекте dependOn пропу callbacks, передать в нее объект в формате
+                    // ?    { ... [ключ_доминирующего_поля]: соответствующий_коллбэк, ... }
+                    // ?    таким образом для каждой зависимости будет вызван свой обработчик
+                    const execute = (_dependField_dependOn_callbacks_fieldKey = (_dependField_dependOn_callbacks = dependField.dependOn.callbacks) === null || _dependField_dependOn_callbacks === void 0 ? void 0 : _dependField_dependOn_callbacks[fieldKey]) !== null && _dependField_dependOn_callbacks_fieldKey !== void 0 ? _dependField_dependOn_callbacks_fieldKey : dependField.dependOn.callback;
+                    // ? Пытаемся получить объект изменений и если они приходят - назначаем.
+                    // ? Выбранная конструкция позволяет обрабатывать обычные и асинхронные колбеки вразнобой,
+                    // ? причем не ожидая выполнения предыдущих
+                    new Promise((resolve)=>{
+                        resolve(execute === null || execute === void 0 ? void 0 : execute({
+                            ...field,
+                            [propKey || "value"]: newValue,
+                            ...!isNotResetErrors ? {
+                                error: ""
+                            } : {}
+                        }, dependField, form, {
+                            ...additional,
+                            propKey
+                        }));
+                    }).then((changes)=>{
+                        if ((0, _utils.getIsOnlyAnObject)(changes)) assign(changes, dependField.key);
+                        return changes;
+                    }).catch(()=>{});
+                });
+            }
+        }
+    };
+};