@antscorp/antsomi-ui 1.3.5-beta.993 → 1.3.5-beta.994

package/es/components/molecules/CodeStructure/CodeStructure.d.ts

@@ -2,7 +2,10 @@ import React from 'react';
 import { CodeStructureData } from './type';
 interface CodeStructureProps {
     initialData: CodeStructureData;
-    onChange: (data: CodeStructureData) => void;
+    onChange: ({ data, isError }: {
+        data: CodeStructureData;
+        isError: boolean;
+    }) => void;
 }
 export declare const CodeStructure: React.FC<CodeStructureProps>;
 export {};

package/es/components/molecules/CodeStructure/CodeStructure.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 import { Form, InputNumber, Radio, Select, Typography, Flex, Input, Row, Col } from 'antd';
 import { useImmer } from 'use-immer';
 import { translate, translations } from '@antscorp/antsomi-locales';
@@ -18,12 +18,10 @@ export const CodeStructure = ({ initialData, onChange }) => {
     const [state, setState] = useImmer({
         codeSample: '',
         maxCodes: 0,
-        refillThreshold: 0,
         refillInterval: 'auto',
-        refillUnit: 'codes',
         codeWithPrefixAndSuffix: '',
     });
-    const { codeSample, maxCodes, refillThreshold, refillUnit } = state;
+    const { codeSample, maxCodes } = state;
     const setCodeSample = (value) => {
         setState(draft => {
             draft.codeSample = value;
@@ -43,37 +41,24 @@ export const CodeStructure = ({ initialData, onChange }) => {
             draft.codeWithPrefixAndSuffix = value;
         });
     };
-    const setRefillThreshold = useCallback((value) => {
-        setState(draft => {
-            draft.refillThreshold = value;
-        });
-    }, [setState]);
-    const setRefillUnit = useCallback((value) => {
-        if (value === RefillUnitType.PERCENT) {
-            setRefillThreshold(1);
-        }
-        else {
-            setRefillThreshold(0);
-        }
-        setState(draft => {
-            draft.refillUnit = value;
-        });
-    }, [setState, setRefillThreshold]);
     const debouncedOnChange = useDebouncedCallbackV2(onChange, 350);
-    const updateFormValues = (data) => {
+    const updateFormValues = async (fieldKeyChange, isError) => {
+        // Get all values from the form
         const allValues = form.getFieldsValue();
         const numLetters = form.getFieldValue('alphabetLetters');
         const numDigits = form.getFieldValue('digitalNumbers');
         const type = form.getFieldValue('characterType');
         form.setFieldsValue(allValues);
         let totalPredicted = maxCodes;
-        const isRelevantChangeMaxCode = Object.keys(data).some(key => key === 'alphabetLetters' || key === 'digitalNumbers' || key === 'characterType');
-        const isRelevantChangeCodeKey = Object.keys(data).some(key => key !== 'quantity' &&
-            key !== 'suffix' &&
-            key !== 'prefix' &&
-            key !== 'refillInterval' &&
-            key !== 'separator');
-        const isChangePrefix = Object.keys(data).some(key => key === 'suffix' || key === 'prefix' || key === 'separator');
+        const isRelevantChangeMaxCode = fieldKeyChange === 'alphabetLetters' ||
+            fieldKeyChange === 'digitalNumbers' ||
+            fieldKeyChange === 'characterType';
+        const isRelevantChangeCodeKey = fieldKeyChange !== 'quantity' &&
+            fieldKeyChange !== 'suffix' &&
+            fieldKeyChange !== 'prefix' &&
+            fieldKeyChange !== 'refillInterval' &&
+            fieldKeyChange !== 'separator';
+        const isChangePrefix = fieldKeyChange === 'suffix' || fieldKeyChange === 'prefix' || fieldKeyChange === 'separator';
         if (isRelevantChangeMaxCode) {
             const total = calculateTotalCodes(numLetters, numDigits, type);
             totalPredicted = total;
@@ -88,29 +73,46 @@ export const CodeStructure = ({ initialData, onChange }) => {
         const dataOnChange = {
             ...allValues,
             totalPredicted,
-            ...(allValues.refillInterval === 'auto' ? { refillThreshold, refillUnit } : {}),
         };
-        debouncedOnChange(dataOnChange);
+        debouncedOnChange({
+            data: dataOnChange,
+            isError,
+        });
     };
-    // Effects
-    useEffect(() => {
-        setRefillThreshold(initialData.refillThreshold || 0);
-    }, [initialData.refillThreshold, setRefillThreshold]);
-    useEffect(() => {
-        setRefillUnit(initialData.refillUnit || RefillUnitType.CODES);
-    }, [initialData.refillUnit, setRefillUnit]);
     useEffect(() => {
         setCodeSample(generateRandomCodeWithConfig(form.getFieldsValue()));
         setMaxCodes(calculateTotalCodes(form.getFieldValue('alphabetLetters'), form.getFieldValue('digitalNumbers'), form.getFieldValue('characterType')));
-    }, []);
+    }, [initialData]);
     useEffect(() => {
         form.setFieldsValue(initialData);
     }, [initialData, form]);
-    return (_jsx(CodeStructureWrapper, { children: _jsxs(Form, { form: form, layout: "horizontal", labelCol: { span: 6 }, colon: false, wrapperCol: { span: 24 }, labelAlign: "left", initialValues: initialData, onValuesChange: updateFormValues, children: [_jsx(Title, { level: 5, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE, 'Code Structure') }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_PREFIX, 'Prefix'), name: "prefix", children: _jsx(Input, { placeholder: "", style: {
+    return (_jsx(CodeStructureWrapper, { children: _jsxs(Form, { form: form, layout: "horizontal", labelCol: { span: 6 }, colon: false, wrapperCol: { span: 24 }, labelAlign: "left", initialValues: initialData, onFieldsChange: (changedFields, _allFields) => {
+                const fieldKeyChange = changedFields[0].name[0];
+                const isValidate = form.getFieldsError().some(field => field.errors.length > 0);
+                updateFormValues(fieldKeyChange, isValidate);
+            }, children: [_jsx(Title, { level: 5, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE, 'Code Structure') }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_PREFIX, 'Prefix'), name: "prefix", children: _jsx(Input, { placeholder: "", style: {
                             maxWidth: 465,
                         } }) }), _jsxs(Row, { children: [_jsx(Col, { span: 6, offset: 0, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_INFIX, 'Infix') }), _jsx(Col, { span: 16, offset: 0, children: _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: _jsx(Col, { offset: 0, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE, 'Character Type') }) }), _jsx(Form.Item, { name: "characterType", children: _jsx(Radio.Group, { options: CHARACTER_TYPE_OPTIONS }) })] }) })] }), _jsx(Row, { children: _jsx(Col, { offset: 6, children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Form.Item, { name: "digitalNumbers", children: _jsx(InputNumber, { min: 1, max: 50, style: { width: '40px' } }) }), _jsx("div", { style: { marginBottom: '15px' }, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_DIG_NO, 'digital numbers') })] }) }) }), _jsx(Row, { children: _jsx(Col, { offset: 6, children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Form.Item, { name: "alphabetLetters", children: _jsx(InputNumber, { min: 1, max: 50, style: { width: '40px' } }) }), _jsx("div", { style: { marginBottom: '15px' }, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_LET_NO, 'alphabet letters') })] }) }) }), _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: _jsx(Col, { offset: 6, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP, 'Letters Capitalization') }) }), _jsx(Form.Item, { label: _jsx("span", { children: "\u00A0" }), name: "capitalization", children: _jsx(Radio.Group, { options: CAPITALIZATION_OPTIONS }) })] }), _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: _jsx(Col, { offset: 6, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_ORDER, 'Character Order') }) }), _jsx(Form.Item, { label: _jsx("span", { children: "\u00A0" }), name: "characterOrder", children: _jsx(Radio.Group, { options: CHARACTER_ORDER_OPTIONS }) })] }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_SUFFIX, 'Suffix'), name: "suffix", children: _jsx(Input, { placeholder: "", style: {
                             maxWidth: 465,
-                        } }) }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_SEPARATOR, 'Separator'), name: "separator", children: _jsx(Select, { options: SEPARATOR_OPTIONS, style: { width: '180px' } }) }), _jsxs(Row, { children: [_jsx(Col, { span: 6, children: _jsxs(Flex, { justify: "start", align: "center", gap: 5, children: [translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_QUANTITY, 'Quantity'), ' ', _jsx("span", { style: { color: 'red' }, children: "*" })] }) }), _jsx(Col, { children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Form.Item, { name: "quantity", children: _jsx(InputNumber, { min: 1, max: 10000 }) }), _jsx("div", { style: { marginBottom: '15px' }, children: "code(s) per time" })] }) })] }), _jsxs(Form.Item, { label: translate(translations._ACT_PREVIEW, 'Preview'), children: ["Maximum of ", _jsx("b", { children: maxCodes.toLocaleString() }), " codes (sample", ' ', generateCodeWithPrefixAndSuffix(codeSample, form.getFieldValue('prefix'), form.getFieldValue('suffix'), form.getFieldValue('separator')), ") to be generated"] }), _jsx(Title, { level: 5, children: "Code Refill" }), _jsx(Form.Item, { label: "Refill Interval", name: "refillInterval", children: _jsxs(Radio.Group, { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, onChange: e => {
-                            e.preventDefault();
-                        }, children: [_jsx(Radio, { value: "manual", children: "Manual refill only" }), _jsx(Radio, { value: "auto", children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Typography.Text, { style: { whiteSpace: 'nowrap' }, children: "Add codes when less than" }), _jsx(InputNumber, { min: refillUnit === RefillUnitType.CODES ? 0 : 1, max: refillUnit === RefillUnitType.PERCENT ? 100 : undefined, style: { width: '63px' }, value: refillThreshold, onChange: value => setRefillThreshold(value || 1) }), _jsx(Select, { onClick: e => e.preventDefault(), value: refillUnit, onChange: setRefillUnit, options: REFILL_UNIT_OPTIONS, style: { width: '63px' } }), "remaining"] }) })] }) })] }) }));
+                        } }) }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_SEPARATOR, 'Separator'), name: "separator", children: _jsx(Select, { options: SEPARATOR_OPTIONS, style: { width: '180px' } }) }), _jsxs(Row, { children: [_jsx(Col, { span: 6, children: _jsxs(Flex, { justify: "start", align: "center", gap: 5, children: [translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_QUANTITY, 'Quantity'), ' ', _jsx("span", { style: { color: 'red' }, children: "*" })] }) }), _jsx(Col, { children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Form.Item, { required: true, name: "quantity", rules: [{ required: true }], children: _jsx(InputNumber, { min: 1, max: 10000 }) }), _jsx("div", { style: { marginBottom: '15px' }, children: "code(s) per time" })] }) })] }), _jsxs(Form.Item, { label: translate(translations._ACT_PREVIEW, 'Preview'), children: ["Maximum of ", _jsx("b", { children: maxCodes.toLocaleString() }), " codes (sample", ' ', generateCodeWithPrefixAndSuffix(codeSample, form.getFieldValue('prefix'), form.getFieldValue('suffix'), form.getFieldValue('separator')), ") to be generated"] }), _jsx(Title, { level: 5, children: "Code Refill" }), _jsx(Form.Item, { label: "Refill Interval", name: "refillInterval", children: _jsxs(Radio.Group, { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsx(Radio, { value: "manual", children: "Manual refill only" }), _jsx(Radio, { value: "auto", children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Typography.Text, { style: { whiteSpace: 'nowrap' }, children: "Add codes when less than" }), _jsx(Form.Item, { noStyle: true, shouldUpdate: true, children: ({ getFieldValue }) => {
+                                                const refillUnit = getFieldValue('refillUnit');
+                                                return (_jsx(Form.Item, { name: "refillThreshold", noStyle: true, rules: [
+                                                        { required: true, message: 'Field is required!' },
+                                                        {
+                                                            validator: (_, value) => {
+                                                                if (refillUnit === RefillUnitType.PERCENT) {
+                                                                    if (value < 1 || value > 100) {
+                                                                        return Promise.reject(new Error('Must be between 1 and 100'));
+                                                                    }
+                                                                }
+                                                                else if (refillUnit === RefillUnitType.CODES) {
+                                                                    if (value < 0) {
+                                                                        return Promise.reject(new Error('Must be ≥ 0 codes'));
+                                                                    }
+                                                                }
+                                                                return Promise.resolve();
+                                                            },
+                                                        },
+                                                    ], children: _jsx(InputNumber, { min: refillUnit === RefillUnitType.CODES ? 0 : 1, max: refillUnit === RefillUnitType.PERCENT ? 100 : undefined, style: { width: '63px' } }) }));
+                                            } }), _jsx(Form.Item, { name: "refillUnit", noStyle: true, children: _jsx(Select, { options: REFILL_UNIT_OPTIONS, style: { width: '63px' }, onClick: e => e.preventDefault() }) }), "remaining"] }) })] }) })] }) }));
 };

package/es/components/molecules/CodeStructure/utils.js

@@ -57,7 +57,8 @@ export const calculateTotalCodes = (numberOfLetters, numberOfDigits, characterTy
             totalCodes = 26 * 26 ** (numberOfLetters - 1) * 10 ** numberOfDigits;
             break;
         default:
-            throw new Error('Invalid character type');
+            totalCodes = 0;
+            break;
     }
     return totalCodes;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.993",
+  "version": "1.3.5-beta.994",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",