@antscorp/antsomi-ui 1.3.5-beta.971 → 1.3.5-beta.972

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

@@ -12,6 +12,7 @@ type Option = {
 export interface InputSelectAttributeProps {
     sourceOptions: Option[];
     codeOptions: Option[];
+    label?: string;
     errorMsg?: string;
     value: Value;
     onChange: (newValueData: {

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { get, keyBy } from 'lodash';
 // Translations
 import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
 // Components
@@ -12,7 +13,7 @@ import { Modal } from '../Modal';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const InputSelectAttribute = (props) => {
-    const { value, errorMsg, sourceOptions, codeOptions, onChange } = props;
+    const { value, errorMsg, label, sourceOptions, codeOptions, onChange } = props;
     // States
     const [openModal, setOpenModal] = useState(false);
     const [attributeState, setAttributeState] = useState(() => {
@@ -24,6 +25,8 @@ const InputSelectAttribute = (props) => {
             code: '',
         };
     });
+    // Memoized
+    const mapCodeOpts = useMemo(() => keyBy(codeOptions, 'value'), [codeOptions]);
     const onOpenModal = useCallback(() => {
         setOpenModal(true);
     }, []);
@@ -51,7 +54,7 @@ const InputSelectAttribute = (props) => {
                     height: 32,
                     padding: '4px 12px 4px 4px',
                     borderBottom: `1px solid ${errorMsg ? THEME.token?.colorError : THEME.token?.blue1}`,
-                }, children: [_jsx("div", { style: { width: '100%', cursor: 'pointer' }, onClick: onOpenModal, children: isObjValue && _jsx(Tag, { children: value.code }) }), _jsx(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })] }));
+                }, children: [_jsx("div", { style: { width: '100%', cursor: 'pointer' }, onClick: onOpenModal, children: isObjValue && _jsx(Tag, { children: get(mapCodeOpts, [value.code, 'label'], value.code) }) }), _jsx(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })] }));
         }
         else {
             element = (_jsx(StyledSelect, { mode: "multiple", options: [{ value: '', label: translate(translations.orSelectAField.title) }], notFoundContent: null, onSelect: onOpenModal, style: { width: '100%', borderTop: 'none', borderLeft: 'none', borderRight: 'none' }, onDeselect: onDeselect, autoClearSearchValue: false, searchValue: typeof value === 'string' ? value : '', onSearch: onChangeInput, status: errorMsg ? 'error' : undefined, placeholder: typeof value === 'string' ? value : translate(translations.inputYourValue.title), "$isPlaceholder": !value, "$isError": !!errorMsg, dropdownStyle: {
@@ -62,7 +65,7 @@ const InputSelectAttribute = (props) => {
     };
     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: ["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 => {
+                                    } })] }), _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 }));
                                     } })] })] }) })] }));
 };

package/package.json

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