@antscorp/antsomi-ui 1.3.5-beta.988 → 1.3.5-beta.990

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

@@ -11,13 +11,14 @@ import { RefillUnitType } from './type';
 // Constants
 import { CAPITALIZATION_OPTIONS, CHARACTER_ORDER_OPTIONS, CHARACTER_TYPE_OPTIONS, REFILL_UNIT_OPTIONS, SEPARATOR_OPTIONS, } from './constants';
 import { CodeStructureWrapper } from './styled';
+import { useDebouncedCallbackV2 } from '@antscorp/antsomi-ui/es/hooks';
 const { Title } = Typography;
 export const CodeStructure = ({ initialData, onChange }) => {
     const [form] = Form.useForm();
     const [state, setState] = useImmer({
         codeSample: '',
         maxCodes: 0,
-        refillThreshold: 1,
+        refillThreshold: 0,
         refillInterval: 'auto',
         refillUnit: 'codes',
         codeWithPrefixAndSuffix: '',
@@ -33,12 +34,10 @@ export const CodeStructure = ({ initialData, onChange }) => {
             draft.maxCodes = value;
         });
     };
-    /** ***********  ✨ Codeium Command ⭐  ************ */
     /**
      * Update the code sample with prefix and suffix
      * @param {string} value The new value of code sample with prefix and suffix
      */
-    /** ****  99b15217-c7a7-4093-8b8f-ea4b4271af48  ****** */
     const setCodeWithPrefixAndSuffix = (value) => {
         setState(draft => {
             draft.codeWithPrefixAndSuffix = value;
@@ -50,54 +49,56 @@ export const CodeStructure = ({ initialData, onChange }) => {
         });
     }, [setState]);
     const setRefillUnit = useCallback((value) => {
+        if (value === RefillUnitType.PERCENT) {
+            setRefillThreshold(1);
+        }
+        else {
+            setRefillThreshold(0);
+        }
         setState(draft => {
             draft.refillUnit = value;
         });
-    }, [setState]);
+    }, [setState, setRefillThreshold]);
+    const debouncedOnChange = useDebouncedCallbackV2(onChange, 350);
     const updateFormValues = (data) => {
         const allValues = form.getFieldsValue();
+        const numLetters = form.getFieldValue('alphabetLetters');
+        const numDigits = form.getFieldValue('digitalNumbers');
+        const type = form.getFieldValue('characterType');
         form.setFieldsValue(allValues);
-        const dataOnChange = {
-            ...allValues,
-            ...(allValues.refillInterval === 'auto' ? { refillThreshold, refillUnit } : {}),
-        };
-        onChange(dataOnChange);
+        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');
+        if (isRelevantChangeMaxCode) {
+            const total = calculateTotalCodes(numLetters, numDigits, type);
+            totalPredicted = total;
+            setMaxCodes(total);
+        }
         if (isRelevantChangeCodeKey) {
             setCodeSample(generateRandomCodeWithConfig(form.getFieldsValue()));
         }
         if (isChangePrefix) {
             setCodeWithPrefixAndSuffix(generateCodeWithPrefixAndSuffix(codeSample, form.getFieldValue('prefix'), form.getFieldValue('suffix'), form.getFieldValue('separator')));
         }
+        const dataOnChange = {
+            ...allValues,
+            totalPredicted,
+            ...(allValues.refillInterval === 'auto' ? { refillThreshold, refillUnit } : {}),
+        };
+        debouncedOnChange(dataOnChange);
     };
-    const computeTotalCodes = useCallback(() => {
-        const numLetters = form.getFieldValue('alphabetLetters');
-        const numDigits = form.getFieldValue('digitalNumbers');
-        const type = form.getFieldValue('characterType');
-        if (numLetters && numDigits && type) {
-            const total = calculateTotalCodes(numLetters, numDigits, type);
-            setMaxCodes(total);
-        }
-    }, [form]);
     // Effects
     useEffect(() => {
-        setRefillThreshold(initialData.refillThreshold || 1);
+        setRefillThreshold(initialData.refillThreshold || 0);
     }, [initialData.refillThreshold, setRefillThreshold]);
     useEffect(() => {
         setRefillUnit(initialData.refillUnit || RefillUnitType.CODES);
     }, [initialData.refillUnit, setRefillUnit]);
-    useEffect(() => {
-        computeTotalCodes();
-    }, [
-        form.getFieldValue('alphabetLetters'),
-        form.getFieldValue('digitalNumbers'),
-        form.getFieldValue('characterType'),
-    ]);
     useEffect(() => {
         setCodeSample(generateRandomCodeWithConfig(form.getFieldsValue()));
         setMaxCodes(calculateTotalCodes(form.getFieldValue('alphabetLetters'), form.getFieldValue('digitalNumbers'), form.getFieldValue('characterType')));
@@ -105,7 +106,11 @@ export const CodeStructure = ({ initialData, onChange }) => {
     useEffect(() => {
         form.setFieldsValue(initialData);
     }, [initialData, form]);
-    return (_jsx(CodeStructureWrapper, { children: _jsxs(Form, { form: form, layout: "horizontal", labelCol: { span: 8 }, colon: false, wrapperCol: { span: 16 }, labelAlign: "left", initialValues: initialData, onValuesChange: updateFormValues, children: [_jsx(Title, { level: 2, 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: "" }) }), _jsxs(Row, { children: [_jsx(Col, { span: 8, 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: 8, 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: 8, 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: 8, 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: 8, 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: "" }) }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_SEPARATOR, 'Separator'), name: "separator", children: _jsx(Select, { options: SEPARATOR_OPTIONS, style: { width: '50%' } }) }), _jsxs(Row, { children: [_jsx(Col, { span: 8, 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: 4, children: "Code Refill" }), _jsx(Form.Item, { label: "Refill Interval", name: "refillInterval", children: _jsxs(Radio.Group, { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, onChange: e => {
+    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: {
+                            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: 1, max: 10000, 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"] }) })] }) })] }) }));
+                        }, 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"] }) })] }) })] }) }));
 };

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

@@ -0,0 +1,2 @@
+export { CodeStructure } from './CodeStructure';
+export type { CodeStructureData, CharacterType, CharacterOrderType, CapitalizationType, SeparatorType, RefillType, RefillUnitType, } from './type';

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

@@ -0,0 +1 @@
+export { CodeStructure } from './CodeStructure';

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

@@ -1,21 +1,21 @@
 export declare enum CharacterType {
-    DIGITS = "digits",
+    DIGITS = "numbers",
     LETTERS = "letters",
-    DIGIT_AND_LETTERS = "digitAndLetters"
+    DIGIT_AND_LETTERS = "both"
 }
 export declare enum CharacterOrderType {
     RANDOM = "random",
-    LETTER_FIRST = "letterFirst",
-    NUMBER_FIRST = "numberFirst"
+    LETTER_FIRST = "letters_first",
+    NUMBER_FIRST = "numbers_first"
 }
 export declare enum CapitalizationType {
-    UPPERCASE = "uppercase",
-    LOWERCASE = "lowercase",
-    TITLE_CASE = "titlecase"
+    UPPERCASE = "upper",
+    LOWERCASE = "lower",
+    TITLE_CASE = "title"
 }
 export declare enum SeparatorType {
     HYPHEN = "hyphen",
-    UNDERSCORE = "underscore",
+    UNDERSCORE = "under_score",
     DOT = "dot",
     NONE = "none"
 }
@@ -35,9 +35,9 @@ export interface CodeStructureData {
     characterOrder: CharacterOrderType;
     separator: SeparatorType;
     quantity: number;
-    suffix: string;
+    suffix?: string;
     refillInterval: RefillType;
-    prefix: string;
+    prefix?: string;
     refillThreshold?: number;
     refillUnit?: RefillUnitType;
 }

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

@@ -1,25 +1,25 @@
 export var CharacterType;
 (function (CharacterType) {
-    CharacterType["DIGITS"] = "digits";
+    CharacterType["DIGITS"] = "numbers";
     CharacterType["LETTERS"] = "letters";
-    CharacterType["DIGIT_AND_LETTERS"] = "digitAndLetters";
+    CharacterType["DIGIT_AND_LETTERS"] = "both";
 })(CharacterType || (CharacterType = {}));
 export var CharacterOrderType;
 (function (CharacterOrderType) {
     CharacterOrderType["RANDOM"] = "random";
-    CharacterOrderType["LETTER_FIRST"] = "letterFirst";
-    CharacterOrderType["NUMBER_FIRST"] = "numberFirst";
+    CharacterOrderType["LETTER_FIRST"] = "letters_first";
+    CharacterOrderType["NUMBER_FIRST"] = "numbers_first";
 })(CharacterOrderType || (CharacterOrderType = {}));
 export var CapitalizationType;
 (function (CapitalizationType) {
-    CapitalizationType["UPPERCASE"] = "uppercase";
-    CapitalizationType["LOWERCASE"] = "lowercase";
-    CapitalizationType["TITLE_CASE"] = "titlecase";
+    CapitalizationType["UPPERCASE"] = "upper";
+    CapitalizationType["LOWERCASE"] = "lower";
+    CapitalizationType["TITLE_CASE"] = "title";
 })(CapitalizationType || (CapitalizationType = {}));
 export var SeparatorType;
 (function (SeparatorType) {
     SeparatorType["HYPHEN"] = "hyphen";
-    SeparatorType["UNDERSCORE"] = "underscore";
+    SeparatorType["UNDERSCORE"] = "under_score";
     SeparatorType["DOT"] = "dot";
     SeparatorType["NONE"] = "none";
 })(SeparatorType || (SeparatorType = {}));

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

@@ -66,6 +66,7 @@ export * from './EmojiCollections';
 export * from './EmojiPopover';
 export * from './DisplayFormat';
 export { default as InputSelectAttribute } from './InputSelectAttribute';
+export * from './CodeStructure';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

package/es/components/molecules/index.js

@@ -66,6 +66,7 @@ export * from './EmojiCollections';
 export * from './EmojiPopover';
 export * from './DisplayFormat';
 export { default as InputSelectAttribute } from './InputSelectAttribute';
+export * from './CodeStructure';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

package/es/hooks/index.d.ts

@@ -25,3 +25,4 @@ export * from './useWindowSize';
 export * from './useCustomRouter';
 export * from './useUpdateEffect';
 export * from './useOutsideClick';
+export * from './useDebouncedCallbackV2';

package/es/hooks/index.js

@@ -44,3 +44,4 @@ export * from './useWindowSize';
 export * from './useCustomRouter';
 export * from './useUpdateEffect';
 export * from './useOutsideClick';
+export * from './useDebouncedCallbackV2';

package/es/hooks/useDebouncedCallbackV2.d.ts

@@ -0,0 +1,3 @@
+type UnaryVoidFunction<T> = (arg: T) => void;
+export declare const useDebouncedCallbackV2: <T>(func: UnaryVoidFunction<T>, wait: number) => (arg: T) => void;
+export {};

package/es/hooks/useDebouncedCallbackV2.js

@@ -0,0 +1,9 @@
+import { useCallback, useRef } from 'react';
+export const useDebouncedCallbackV2 = (func, wait) => {
+    const timeout = useRef();
+    const debouncedFunc = (arg) => {
+        clearTimeout(timeout.current);
+        timeout.current = setTimeout(() => func(arg), wait);
+    };
+    return useCallback(debouncedFunc, [func, wait]);
+};

package/package.json

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