npm - @antscorp/antsomi-ui - Versions diffs - 1.3.5-beta.140 → 1.3.5-beta.142 - Mend

@antscorp/antsomi-ui 1.3.5-beta.140 → 1.3.5-beta.142

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import React from 'react';
 import type { FormInstance, SelectProps } from 'antd';
 import { ImageSliderProps } from './components';
 import { ShareAccessProps } from '../ShareAccess/types';
+import { RuleObject } from 'antd/es/form';
 export type categoriesProps = {
     [key: string]: (string | number)[];
 };
@@ -61,6 +62,7 @@ export interface TemplateSaveAsProps {
         onSearch?: (searchValue: string) => void;
         onNamePopupScroll?: SelectProps['onPopupScroll'];
         onScrollToBottom?: () => void;
+        validateName?: (rule: RuleObject, value: any) => void;
     };
     descriptionOptions?: {
         label?: string;

package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js CHANGED Viewed

@@ -90,7 +90,7 @@ export const TemplateSaveAs = props => {
                         React.createElement(Text, { className: "field-title field-title--start" },
                             templateLabel || 'Template name',
                             React.createElement("span", null, "\u2009*")),
-                        saveOption === saveNewValue ? (React.createElement(Form.Item, { name: "template-name", validateTrigger: "onChange", rules: [{ required: true, message: "This field can't be empty" }] },
+                        saveOption === saveNewValue ? (React.createElement(Form.Item, { label: "Template name", name: "template-name", validateTrigger: "onChange", noStyle: true, rules: [{ required: true, message: "This field can't be empty" }] },
                             React.createElement(Input, { className: "field-input", value: templateNameNew, placeholder: placeholder, debounce: 100, maxLength: 255, onAfterChange: value => {
                                     handleChangeValue({ templateName: { id: undefined, label: value } });
                                     setTemplateNameNew(value);
@@ -118,7 +118,10 @@ export const TemplateSaveAs = props => {
                                     ...(templateNameList.find(item => item.id === (templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id))
                                         ? []
                                         : [{ value: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id, label: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.label }]),
-                                    ...templateNameList.map(item => ({ value: item.id, label: item.label })),
+                                    ...templateNameList.map(item => ({
+                                        value: item.id,
+                                        label: item.label,
+                                    })),
                                 ]
                                 : [], onChange: value => {
                                 var _a, _b;

package/es/components/molecules/TemplateSaveAs/TemplateSaveAsModal.js CHANGED Viewed

@@ -45,6 +45,6 @@ export const TemplateSaveAsModal = props => {
             onCancel(event);
         }
     };
-    return (React.createElement(ModalV2, Object.assign({ open: open, onCancel: handleCancel, onOk: handleOk, okText: okText || 'Save', width: 1177, title: title || 'Save as my template', styles: { body: { borderTop: '1px solid #e5e5e5', paddingTop: 0 } } }, restProps),
+    return (React.createElement(ModalV2, Object.assign({ open: open, onCancel: handleCancel, onOk: handleOk, okText: okText || 'Save', width: 1177, title: title || 'Save as my template', styles: { body: { borderTop: '1px solid #e5e5e5', paddingTop: 0 } }, centered: true }, restProps),
         React.createElement(TemplateSaveAs, Object.assign({ onChange: onChange ? (newValue, errors) => handleOnChange(newValue, errors) : undefined, value: templateValue || internalValue }, restTemplateProps))));
 };

package/es/components/molecules/TemplateSaveAs/components/Category/Category.js CHANGED Viewed

@@ -5,7 +5,7 @@ const { Text } = Typography;
 export const Category = props => {
     const { categoryKey, categoryChildren, label, selected, onRemoveCategory, onAddCategory } = props;
     const remainChildren = categoryChildren.filter(item => !(selected === null || selected === void 0 ? void 0 : selected.includes(item.key)));
-    return (React.createElement(Flex, { className: "field-container" },
+    return (React.createElement(Flex, { className: "field-container categories-container" },
         React.createElement(Text, { className: "field-title" }, label),
         React.createElement(Flex, { wrap: "wrap", gap: 10, className: "category-container" }, selected === null || selected === void 0 ? void 0 :
             selected.map(selectedKey => {
@@ -21,6 +21,9 @@ export const Category = props => {
                 label.toLowerCase())) : (label)) : (React.createElement(Dropdown, { menu: {
                     items: remainChildren,
                     onClick: ({ key }) => onAddCategory({ parentKey: categoryKey, childKey: key }),
+                }, overlayStyle: {
+                    maxHeight: 400,
+                    overflow: 'auto',
                 }, getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'] }, typeof label === 'string' ? (React.createElement(Button, { disabled: true },
                 "+ Add ", label === null || label === void 0 ? void 0 :
                 label.toLowerCase())) : (label))))));

package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import { TGetTemplateCategoryList, TGetObjectTEmplateList } from '@antscorp/ants
 import { TTemplateListingConfig } from '@antscorp/antsomi-ui/es/types/templateListing';
 import { TemplateCategory } from '@antscorp/antsomi-ui/es/models/TemplateCategory';
 import { TemplateValueOptions, categoriesProps } from '../TemplateSaveAs';
+import { RuleObject } from 'antd/es/form';
 interface TemplateListingOptions {
     service: PayloadInfo;
     config: TTemplateListingConfig;
@@ -60,6 +61,7 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
         onSearch: import("react").Dispatch<import("react").SetStateAction<string>>;
         onScrollToBottom: () => void;
         isLoading: boolean;
+        validateName: (rule: RuleObject, value: any) => Promise<void>;
     };
     form: import("antd").FormInstance<any>;
     errors: any[] | undefined;

package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.js CHANGED Viewed

@@ -1,6 +1,15 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 // Libraries
 import { useCallback, useMemo, useState } from 'react';
-import { useGetTemplateCategoryList, useGetObjectTemplateList, } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
+import { useGetTemplateCategoryList, useGetObjectTemplateList, useValidateTemplateName, } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
 // Hooks
 import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 import { Form } from 'antd';
@@ -54,6 +63,7 @@ export const useTemplateSave = (options) => {
         },
         options: templateListOptions,
     });
+    const { mutateAsync: validateTemplateName } = useValidateTemplateName({});
     // Variables
     const isLoadingTemplateList = isFetching || isFetchingNextPage;
     // Memo
@@ -85,6 +95,24 @@ export const useTemplateSave = (options) => {
     const reset = () => {
         setValue(valueArg || {});
     };
+    /* Validate Template Name */
+    const validateName = (rule, value) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!value) {
+            return Promise.reject(new Error('This field is required'));
+        }
+        const response = yield validateTemplateName({
+            auth: service,
+            params: {
+                object_type: objectType,
+                public_level: publicLevel,
+                template_name: value,
+            },
+        });
+        if (response.existed) {
+            return Promise.reject(new Error('Template name already exists'));
+        }
+        return Promise.resolve();
+    });
     return {
         // MapKeys
         categoryItems,
@@ -108,6 +136,7 @@ export const useTemplateSave = (options) => {
             onSearch: setSearchName,
             onScrollToBottom: onLoadMore,
             isLoading: isLoadingTemplateList,
+            validateName,
         },
         // Form handler
         form,

package/es/components/molecules/TemplateSaveAs/styled.js CHANGED Viewed

@@ -20,6 +20,10 @@ export const TemplateSaveAsStyled = styled(Flex) `
     overflow-y: auto;
   }
+  &:not(:has(.share-access-container)) .categories-container {
+    width: 60%;
+  }
   .share-access-container {
     flex: 1 1 40%;
     padding-left: 28px;

package/es/constants/theme.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
 // Types
 import { theme } from 'antd';
 // Variables
@@ -99,9 +99,11 @@ THEME.components = {
         borderRadiusSM: 0,
         borderRadiusOuter: 0,
         borderRadiusXS: 0,
-        colorBorder: (_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue1,
+        optionActiveBg: '#F2F9FF',
+        optionSelectedBg: (_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue1_1,
+        colorBorder: (_l = THEME.token) === null || _l === void 0 ? void 0 : _l.blue1,
         controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw2,
+        colorBgContainerDisabled: (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.bw2,
         fontSizeIcon: 14,
     },
     Tag: {
@@ -114,9 +116,9 @@ THEME.components = {
         borderRadiusOuter: 0,
         controlHeight: 30,
         borderRadiusXS: 0,
-        colorBorder: (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.blue1,
+        colorBorder: (_o = THEME.token) === null || _o === void 0 ? void 0 : _o.blue1,
         controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw2,
+        colorBgContainerDisabled: (_p = THEME.token) === null || _p === void 0 ? void 0 : _p.bw2,
         // fontSizeIcon: 14,
     },
     DatePicker: {
@@ -125,20 +127,20 @@ THEME.components = {
         borderRadiusSM: 0,
         borderRadiusOuter: 0,
         borderRadiusXS: 0,
-        colorBorder: (_p = THEME.token) === null || _p === void 0 ? void 0 : _p.blue1,
+        colorBorder: (_q = THEME.token) === null || _q === void 0 ? void 0 : _q.blue1,
         controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw2,
+        colorBgContainerDisabled: (_r = THEME.token) === null || _r === void 0 ? void 0 : _r.bw2,
         fontSizeIcon: 14,
         controlHeight: 31,
     },
     Divider: {
         marginLG: 15,
         marginXL: 15,
-        colorSplit: (_r = THEME.token) === null || _r === void 0 ? void 0 : _r.accent3,
+        colorSplit: (_s = THEME.token) === null || _s === void 0 ? void 0 : _s.accent3,
     },
     Checkbox: {
         controlInteractiveSize: 18,
-        colorBorder: (_s = THEME.token) === null || _s === void 0 ? void 0 : _s.colorPrimary,
+        colorBorder: (_t = THEME.token) === null || _t === void 0 ? void 0 : _t.colorPrimary,
         lineWidth: 2,
     },
     Modal: {
@@ -150,7 +152,7 @@ THEME.components = {
         paddingMD: 0,
     },
     Tabs: {
-        itemColor: (_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw8,
+        itemColor: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.bw8,
         horizontalItemPadding: '17px 30px',
         horizontalItemGutter: 0,
         lineWidthBold: 3,
@@ -165,18 +167,18 @@ THEME.components = {
         headerPadding: '15px 10px',
     },
     Switch: {
-        colorTextQuaternary: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.bw0,
-        colorTextTertiary: (_v = THEME.token) === null || _v === void 0 ? void 0 : _v.bw0,
+        colorTextQuaternary: (_v = THEME.token) === null || _v === void 0 ? void 0 : _v.bw0,
+        colorTextTertiary: (_w = THEME.token) === null || _w === void 0 ? void 0 : _w.bw0,
         handleSize: 12,
         handleSizeSM: 7,
         trackMinWidth: 30,
-        handleBg: (_w = THEME.token) === null || _w === void 0 ? void 0 : _w.colorPrimary,
+        handleBg: (_x = THEME.token) === null || _x === void 0 ? void 0 : _x.colorPrimary,
     },
     Menu: {
         itemHoverBg: '#F2F9FF',
         activeBarBorderWidth: 0,
     },
     Tooltip: {
-        colorBgSpotlight: (_x = THEME.token) === null || _x === void 0 ? void 0 : _x.bw8,
+        colorBgSpotlight: (_y = THEME.token) === null || _y === void 0 ? void 0 : _y.bw8,
     },
 };

package/package.json CHANGED Viewed

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