intelicoreact 1.6.7 → 1.6.8

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

@@ -1,301 +0,0 @@
-"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

@@ -1,54 +0,0 @@
-"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(()=>{});
-                });
-            }
-        }
-    };
-};