@antscorp/antsomi-ui 1.3.5-beta.976 → 1.3.5-beta.978

package/es/components/molecules/AddDynamicContent/components/DisplayFormat/DisplayFormat.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
 type DisplayFormatProps = {

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

@@ -19,6 +19,7 @@ export interface InputSelectAttributeProps {
         value: Value;
         valueType: ValueType;
     }) => void;
+    onChangeSelectSource: (value: string) => void;
 }
 declare const _default: import("react").MemoExoticComponent<(props: InputSelectAttributeProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

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

@@ -1,19 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
-import { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { get, keyBy } from 'lodash';
+import { Form, Select, Typography } from 'antd';
 // Translations
 import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
 // Components
 import Icon from '@antscorp/icons';
+import { ModalV2 } from '../ModalV2';
 import { StyledTag as Tag } from '@antscorp/antsomi-ui/es/components/molecules/SelectV2/styled';
-import { Flex, Select, Typography } from 'antd';
 import { StyledSelect } from './styled';
-import { Modal } from '../Modal';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const InputSelectAttribute = (props) => {
-    const { value, errorMsg, label, sourceOptions, codeOptions, onChange } = props;
+    const { value, errorMsg, label, sourceOptions = [], codeOptions = [], onChange, onChangeSelectSource, } = props;
+    const [form] = Form.useForm();
     // States
     const [openModal, setOpenModal] = useState(false);
     const [attributeState, setAttributeState] = useState(() => {
@@ -25,6 +26,12 @@ const InputSelectAttribute = (props) => {
             code: '',
         };
     });
+    // Effects
+    useEffect(() => {
+        if (attributeState.code === '') {
+            form.setFieldsValue({ code: codeOptions[0]?.value });
+        }
+    }, [attributeState, codeOptions, form]);
     // Memoized
     const mapCodeOpts = useMemo(() => keyBy(codeOptions, 'value'), [codeOptions]);
     const onOpenModal = useCallback(() => {
@@ -36,10 +43,21 @@ const InputSelectAttribute = (props) => {
     const onHideModal = useCallback(() => {
         setOpenModal(false);
     }, []);
-    const onOk = useCallback(() => {
-        setOpenModal(false);
-        onChange({ value: attributeState, valueType: 'select' });
-    }, [attributeState, onChange]);
+    const onOk = async () => {
+        try {
+            // Validate form fields before getting values
+            const values = await form.validateFields();
+            const newValue = {
+                source: values.sources,
+                code: values.code,
+            };
+            setOpenModal(false);
+            onChange({ value: newValue, valueType: 'select' });
+        }
+        catch (errorInfo) {
+            console.error('Validation Failed:', errorInfo);
+        }
+    };
     const onChangeInput = useCallback((val) => {
         onChange({ value: val, valueType: 'input' });
     }, [onChange]);
@@ -63,10 +81,14 @@ const InputSelectAttribute = (props) => {
         }
         return element;
     };
-    return (_jsxs(_Fragment, { children: [renderInput(), errorMsg ? (_jsx(Typography.Text, { style: { marginLeft: 8, color: THEME.token?.red8, marginTop: 5 }, children: errorMsg })) : null, _jsx(Modal, { title: translate(translations._PREDICT_MODEL_SELECT_ATTRIBUTE, 'Select attribute'), okText: translate(translations._ACT_APPLY, 'Apply'), open: openModal, onOk: onOk, onCancel: onHideModal, children: _jsxs(Flex, { vertical: true, gap: 15, children: [_jsxs(Flex, { gap: 10, children: [_jsxs(Typography.Text, { style: { lineHeight: '30px', flexBasis: 130 }, children: [translate(translations._TITL_PERSONALIZATION_TYPE, 'Content Source'), _jsx("span", { style: { color: THEME.token?.red8 }, children: "\u00A0 *" })] }), _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), style: { flex: 1 }, options: sourceOptions, value: attributeState.source, onChange: newValue => {
-                                        setAttributeState(state => ({ ...state, source: newValue }));
-                                    } })] }), _jsxs(Flex, { gap: 10, children: [_jsxs(Typography.Text, { style: { lineHeight: '30px', flexBasis: 130 }, children: [label || 'Allocated Code', _jsx("span", { style: { color: THEME.token?.red8 }, children: "\u00A0 *" })] }), _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), style: { flex: 1 }, value: attributeState.code, options: codeOptions, onChange: newValue => {
-                                        setAttributeState(state => ({ ...state, code: newValue }));
-                                    } })] })] }) })] }));
+    return (_jsxs(_Fragment, { children: [renderInput(), errorMsg ? (_jsx(Typography.Text, { style: { marginLeft: 8, color: THEME.token?.red8, marginTop: 5 }, children: errorMsg })) : null, _jsx(ModalV2, { title: translate(translations._PREDICT_MODEL_SELECT_ATTRIBUTE, 'Select attribute'), okText: translate(translations._ACT_APPLY, 'Apply'), open: openModal, onOk: onOk, onCancel: onHideModal, destroyOnClose: true, children: _jsxs(Form, { colon: false, form: form, initialValues: {
+                        sources: attributeState.source || sourceOptions[0]?.value,
+                        code: attributeState.code || codeOptions[0]?.value,
+                    }, children: [_jsx(Form.Item, { label: translate(translations._TITL_PERSONALIZATION_TYPE, 'Content Source'), name: "sources", required: true, labelCol: { span: 6 }, labelAlign: "left", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), options: sourceOptions, value: attributeState.source, onChange: newValue => {
+                                    setAttributeState(state => ({ ...state, code: '', source: newValue }));
+                                    onChangeSelectSource(newValue);
+                                } }) }), _jsx(Form.Item, { label: label || 'Allocated Code', required: true, labelCol: { span: 6 }, labelAlign: "left", name: "code", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), value: attributeState.code, options: codeOptions, onChange: newValue => {
+                                    setAttributeState(state => ({ ...state, source: newValue }));
+                                } }) })] }) })] }));
 };
 export default memo(InputSelectAttribute);

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,5 +3,4 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
-/// <reference types="react" />
 export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;

package/package.json

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