@antscorp/antsomi-ui 1.3.5-beta.47 → 1.3.5-beta.48

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 (5) hide show
  1. package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.d.ts +14 -10
  2. package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js +42 -29
  3. package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.d.ts +11 -9
  4. package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.js +11 -25
  5. package/package.json +1 -1
package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.d.ts CHANGED
@@ -1,14 +1,9 @@
1
1
  import React from 'react';
2
2
  import type { FormInstance, SelectProps } from 'antd';
3
3
  import { ShareAccessProps } from '../ShareAccess/types';
4
- export type categoriesProps = Array<{
5
- label: string | React.ReactNode;
6
- key: string | number;
7
- children: Array<{
8
- label: string | React.ReactNode;
9
- key: string | number;
10
- }>;
11
- }>;
4
+ export type categoriesProps = {
5
+ [key: string]: (string | number)[];
6
+ };
12
7
  export interface TemplateValueOptions {
13
8
  saveOption?: string;
14
9
  templateName?: {
@@ -17,7 +12,9 @@ export interface TemplateValueOptions {
17
12
  };
18
13
  description?: string;
19
14
  defaultThumbnail?: number;
20
- categories?: categoriesProps;
15
+ categories?: {
16
+ [key: string]: (string | number)[];
17
+ };
21
18
  accessInfo?: ShareAccessProps['accessInfo'];
22
19
  }
23
20
  export interface ImagePreviewOptions {
@@ -42,7 +39,14 @@ export interface TemplateSaveAsProps {
42
39
  saveNewValue?: string;
43
40
  saveExistValue?: string;
44
41
  };
45
- categories?: categoriesProps;
42
+ categories?: Array<{
43
+ label: string | React.ReactNode;
44
+ key: string | number;
45
+ children: Array<{
46
+ key: string | number;
47
+ label: string | React.ReactNode;
48
+ }>;
49
+ }>;
46
50
  /**
47
51
  * Hide categories with following key
48
52
  */
package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js CHANGED
@@ -30,7 +30,7 @@ export const TemplateSaveAs = props => {
30
30
  const { isLoading, label: templateLabel, defaultNewTemplateName, onSearch, onNamePopupScroll, } = templateNamesOptions || {};
31
31
  const { label: descriptionLabel, placeholder: descriptionPlaceholder } = descriptionOptions || {};
32
32
  const { saveNewText = 'Save as a new media Template', saveExistText = 'Save as an existing media Template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
33
- const { saveOption = saveNewValue, templateName: defaultTemplateName, description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = [], accessInfo, } = value || {};
33
+ const { saveOption = saveNewValue, templateName: defaultTemplateName, description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = {}, accessInfo, } = value || {};
34
34
  const [searchValue, setSearchValue] = useState('');
35
35
  const searchValueDebounce = useDebounce(searchValue, 1000);
36
36
  useEffect(() => {
@@ -56,27 +56,39 @@ export const TemplateSaveAs = props => {
56
56
  : newValue.templateName || defaultTemplateName }), (_b = (_a = form === null || form === void 0 ? void 0 : form.getFieldsError()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.errors);
57
57
  }
58
58
  };
59
- const handleAddCategory = ({ parent, parentKey, item, }) => {
60
- const currCategory = categoriesValue.find(category => category.label === parent);
59
+ const handleAddCategory = ({ parentKey, item, }) => {
60
+ // console.log('🚀 ~ handleAddCategory:', { parent, parentKey, item }, categories);
61
+ const currCategory = categoriesValue === null || categoriesValue === void 0 ? void 0 : categoriesValue[parentKey];
61
62
  if (currCategory) {
62
- currCategory.children.push(item);
63
- const newCategoryList = categoriesValue.filter(item => item.label !== currCategory.label);
64
- const newCategory = [...newCategoryList, currCategory];
63
+ // currCategory.children.push(+item);
64
+ // const newCategoryList = categoriesValue.filter(item => item.label !== currCategory.label);
65
+ const newCategory = Object.assign(Object.assign({}, categoriesValue), { [parentKey]: [...currCategory, +item] });
65
66
  handleChangeValue({ categories: newCategory });
66
67
  }
67
68
  else {
68
- const newCategory = [...categoriesValue, { label: parent, key: parentKey, children: [item] }];
69
+ const newCategory = Object.assign(Object.assign({}, categoriesValue), { [parentKey]: [+item] });
69
70
  handleChangeValue({ categories: newCategory });
70
71
  }
72
+ // const currCategory = categoriesValue.find(category => category.label === parent);
73
+ // if (currCategory) {
74
+ // currCategory.children.push(item);
75
+ // const newCategoryList = categoriesValue.filter(item => item.label !== currCategory.label);
76
+ // const newCategory = [...newCategoryList, currCategory];
77
+ // handleChangeValue({ categories: newCategory });
78
+ // } else {
79
+ // const newCategory = [...categoriesValue, { label: parent, key: parentKey, children: [item] }];
80
+ // handleChangeValue({ categories: newCategory });
81
+ // }
71
82
  };
72
83
  const handleRemoveCategory = ({ parent, item, }) => {
73
- const currCategory = categoriesValue.find(category => category.label === parent);
84
+ const currCategory = categoriesValue === null || categoriesValue === void 0 ? void 0 : categoriesValue[parent];
74
85
  if (!currCategory)
75
86
  return;
76
- const newChildren = currCategory.children.filter(child => child.label !== item.label);
77
- const newCategoryList = categoriesValue.filter(child => child.label !== currCategory.label);
87
+ const newChildren = currCategory.filter(child => child !== item);
88
+ // const newChildren = currCategory.children.filter(child => child.label !== item.label);
89
+ // const newCategoryList = categoriesValue.filter(child => child.label !== currCategory.label);
78
90
  handleChangeValue({
79
- categories: [...newCategoryList, Object.assign(Object.assign({}, currCategory), { children: newChildren })],
91
+ categories: Object.assign(Object.assign({}, categoriesValue), { [parent]: newChildren }),
80
92
  });
81
93
  };
82
94
  return (React.createElement(Form, { form: form, initialValues: {
@@ -137,14 +149,16 @@ export const TemplateSaveAs = props => {
137
149
  React.createElement("span", null, "*")),
138
150
  React.createElement(ImageSlider, { thumbnails: thumbnails, isLoading: isLoadingThumbnail, skeleton: skeleton, previewNavigation: previewNavigation, slidesPerView: slidesPerView, defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }), hideThumbnailsList: hideThumbnailsList, hideDefaultButton: hideDefaultButton })), categories === null || categories === void 0 ? void 0 :
139
151
  categories.map(parentCategory => {
140
- var _a, _b, _c;
141
- const selectedChildren = (_a = categoriesValue
142
- .find(item => item.label === parentCategory.label)) === null || _a === void 0 ? void 0 : _a.children.map(item => item.label);
143
- const remainChildren = parentCategory.children.filter(item => !(selectedChildren === null || selectedChildren === void 0 ? void 0 : selectedChildren.includes(item.label)));
144
- const formatData = remainChildren.map((item, idx) => ({
145
- label: item.label,
146
- key: idx,
147
- }));
152
+ var _a, _b;
153
+ // const selectedChildren = categoriesValue
154
+ // .find(item => item.label === parentCategory.label)
155
+ // ?.children.map(item => item.label);
156
+ const selectedChildren = categoriesValue[parentCategory.key];
157
+ const remainChildren = parentCategory.children.filter(item => !(selectedChildren === null || selectedChildren === void 0 ? void 0 : selectedChildren.includes(item.key)));
158
+ // const formatData = remainChildren.map((item, idx) => ({
159
+ // label: item.label,
160
+ // key: idx,
161
+ // }));
148
162
  // NOTE: filter to remove device and template categories
149
163
  if ((omitCategories === null || omitCategories === void 0 ? void 0 : omitCategories.length) && omitCategories.includes(parentCategory.key.toString()))
150
164
  return null;
@@ -152,28 +166,27 @@ export const TemplateSaveAs = props => {
152
166
  React.createElement(Text, { className: "field-title" }, parentCategory.label),
153
167
  React.createElement(Flex, { wrap: "wrap", gap: 10, className: "category-container" },
154
168
  /* selectedCategory */
155
- (_b = categoriesValue
156
- .find(item => item.label === parentCategory.label)) === null || _b === void 0 ? void 0 :
157
- _b.children.map(selectedItem => (React.createElement(Flex, { key: selectedItem.key, className: "selected-category", justify: "space-between", align: "center" },
169
+ (_a = parentCategory.children
170
+ .filter(item => selectedChildren === null || selectedChildren === void 0 ? void 0 : selectedChildren.includes(item.key))) === null || _a === void 0 ? void 0 :
171
+ _a.map(selectedItem => (React.createElement(Flex, { key: selectedItem.key, className: "selected-category", justify: "space-between", align: "center" },
158
172
  React.createElement(Tooltip, { title: selectedItem.label },
159
173
  React.createElement(Text, { ellipsis: true, style: { textOverflow: 'ellipsis' } }, selectedItem.label)),
160
174
  ' ',
161
175
  React.createElement("span", { className: "remove-btn", onClick: () => handleRemoveCategory({
162
- parent: parentCategory.label,
163
- item: selectedItem,
176
+ parent: parentCategory.key,
177
+ item: selectedItem.key,
164
178
  }) }, "\u00D7")))),
165
179
  React.createElement(Dropdown, { menu: {
166
- items: formatData,
180
+ items: remainChildren,
167
181
  onClick: ({ key }) => {
168
182
  handleAddCategory({
169
- parent: parentCategory.label,
170
183
  parentKey: parentCategory.key,
171
- item: remainChildren[key],
184
+ item: key,
172
185
  });
173
186
  },
174
187
  }, getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'] }, typeof parentCategory.label === 'string' ? (React.createElement(Button, null,
175
- "+ Add ", (_c = parentCategory.label) === null || _c === void 0 ? void 0 :
176
- _c.toLowerCase())) : (parentCategory.label)))));
188
+ "+ Add ", (_b = parentCategory.label) === null || _b === void 0 ? void 0 :
189
+ _b.toLowerCase())) : (parentCategory.label)))));
177
190
  })),
178
191
  isShowShareAccess ? (React.createElement("div", { className: "share-access-container" },
179
192
  React.createElement(ShareAccess, Object.assign({ accessInfo: accessInfo, onChange: value => handleChangeValue({ accessInfo: value }) }, shareAccessProps)))) : null))));
package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
3
- import { TCategoryItem } from '../../../template';
4
3
  import { TGetTemplateCategoryList, TGetObjectTEmplateList } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
5
4
  import { TTemplateListingConfig } from '@antscorp/antsomi-ui/es/types/templateListing';
6
5
  import { TemplateCategory } from '@antscorp/antsomi-ui/es/models/TemplateCategory';
@@ -12,11 +11,7 @@ interface TemplateListingOptions {
12
11
  categoryList?: TGetTemplateCategoryList['options'];
13
12
  templateList?: TGetObjectTEmplateList['options'];
14
13
  };
15
- defaultValue?: Partial<TemplateValueOptions> & {
16
- categoriesWithId?: {
17
- [key: string]: (number | string)[] | undefined;
18
- };
19
- };
14
+ defaultValue?: Partial<TemplateValueOptions>;
20
15
  }
21
16
  /**
22
17
  * Custom React Hook for managing state and data fetching logic related to a template listing.
@@ -32,7 +27,14 @@ interface TemplateListingOptions {
32
27
  * @property {Function} onLoadMore - A function to load more template data when scrolling in the template listing.
33
28
  */
34
29
  export declare const useTemplateSave: (options: TemplateListingOptions) => {
35
- categoryItems: TCategoryItem[];
30
+ categoryItems: {
31
+ label: string | React.ReactNode;
32
+ key: string | number;
33
+ children: Array<{
34
+ key: string | number;
35
+ label: string | React.ReactNode;
36
+ }>;
37
+ }[];
36
38
  templateItems: {
37
39
  id: string | number;
38
40
  label: string;
@@ -41,11 +43,11 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
41
43
  value: Partial<TemplateValueOptions>;
42
44
  formattedCategoriesValue: {
43
45
  camelCase: Record<string, any>;
44
- snakeCase: {};
46
+ snakeCase: Record<string, any>;
45
47
  };
46
48
  handleFormatCategories: (categories: categoriesProps | undefined) => {
47
49
  camelCase: Record<string, any>;
48
- snakeCase: {};
50
+ snakeCase: Record<string, any>;
49
51
  };
50
52
  isLoadingCategoryList: boolean;
51
53
  isLoadingTemplateList: boolean;
package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.js CHANGED
@@ -4,7 +4,7 @@ import { useGetTemplateCategoryList, useGetObjectTemplateList, } from '@antscorp
4
4
  // Hooks
5
5
  import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
6
6
  import { Form } from 'antd';
7
- import { snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
7
+ import { camelCaseToSnakeCase, snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
8
8
  import { omit } from 'lodash';
9
9
  /**
10
10
  * Custom React Hook for managing state and data fetching logic related to a template listing.
@@ -27,14 +27,19 @@ export const useTemplateSave = (options) => {
27
27
  const [value, setValue] = useState(omit(valueArg, ['categoriesWithId']) || {});
28
28
  const [errors, setErrors] = useState();
29
29
  const handleFormatCategories = (categories) => {
30
- const snakeCase = {};
31
- categories === null || categories === void 0 ? void 0 : categories.forEach(category => {
32
- snakeCase[category.key] = category.children.map(item => item.key);
33
- });
34
- const camelCase = snakeCaseToCamelCase(snakeCase);
30
+ // const snakeCase = {};
31
+ // categories?.forEach(category => {
32
+ // snakeCase[category.key] = category.children.map(item => item.key);
33
+ // });
34
+ const snakeCase = camelCaseToSnakeCase(categories || {});
35
+ const camelCase = snakeCaseToCamelCase(categories || {});
36
+ // const camelCase = snakeCaseToCamelCase(snakeCase);
35
37
  return { camelCase, snakeCase };
36
38
  };
37
39
  const formattedCategoriesValue = useMemo(() => handleFormatCategories(value.categories), [value]);
40
+ useDeepCompareEffect(() => {
41
+ setValue(omit(valueArg, ['categoriesWithId']));
42
+ }, [valueArg]);
38
43
  const [form] = Form.useForm();
39
44
  const { data: categoryList, isLoading: isLoadingCategoryList, refetch: refetchCategoryList, } = useGetTemplateCategoryList({
40
45
  args: {
@@ -68,25 +73,6 @@ export const useTemplateSave = (options) => {
68
73
  });
69
74
  return recursiveCategory(categoryList || []);
70
75
  }, [categoryList]);
71
- useDeepCompareEffect(() => {
72
- setValue(prev => {
73
- const result = categoryItems
74
- .filter(category => Object.keys((valueArg === null || valueArg === void 0 ? void 0 : valueArg.categoriesWithId) || {}).includes(category.key))
75
- .map(category => {
76
- var _a;
77
- return (Object.assign(Object.assign({}, category), { children: (_a = category.children) === null || _a === void 0 ? void 0 : _a.filter(child => {
78
- var _a;
79
- return (valueArg === null || valueArg === void 0 ? void 0 : valueArg.categoriesWithId)
80
- ? (_a = valueArg === null || valueArg === void 0 ? void 0 : valueArg.categoriesWithId[category.key]) === null || _a === void 0 ? void 0 : _a.includes(child.key)
81
- : false;
82
- }) }));
83
- });
84
- return Object.assign(Object.assign({}, prev), { categories: result });
85
- });
86
- }, [categoryItems, valueArg === null || valueArg === void 0 ? void 0 : valueArg.categoriesWithId]);
87
- useDeepCompareEffect(() => {
88
- setValue(omit(valueArg, ['categoriesWithId']));
89
- }, [valueArg]);
90
76
  const templateItems = useMemo(() => {
91
77
  if (infiniteObjectTemplate) {
92
78
  const { pages } = infiniteObjectTemplate;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.5-beta.47",
3
+ "version": "1.3.5-beta.48",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",