@antscorp/antsomi-ui 1.3.5-beta.155 → 1.3.5-beta.157

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 (10) hide show
  1. package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.d.ts +6 -1
  2. package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js +105 -76
  3. package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js +1 -1
  4. package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.js +1 -0
  5. package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.d.ts +3 -3
  6. package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.js +7 -5
  7. package/es/components/molecules/TemplateSaveAs/styled.js +19 -0
  8. package/es/constants/theme.js +3 -0
  9. package/es/test.js +7 -9
  10. package/package.json +1 -1
package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.d.ts CHANGED
@@ -22,6 +22,10 @@ export interface TemplateValueOptions {
22
22
  };
23
23
  accessInfo?: ShareAccessProps['accessInfo'];
24
24
  }
25
+ export interface FormValue extends Required<Omit<TemplateValueOptions, 'templateName' | 'accessInfo'>> {
26
+ templateName: string;
27
+ templateNameSelect: number | string | undefined;
28
+ }
25
29
  export interface TemplateSaveAsProps {
26
30
  className?: string;
27
31
  shareAccess: Omit<{
@@ -52,6 +56,7 @@ export interface TemplateSaveAsProps {
52
56
  templateNames: Array<{
53
57
  label: string;
54
58
  id: string | number;
59
+ description?: string;
55
60
  }>;
56
61
  templateNamesOptions?: {
57
62
  label?: string;
@@ -68,7 +73,7 @@ export interface TemplateSaveAsProps {
68
73
  label?: string;
69
74
  placeholder?: string;
70
75
  };
71
- form?: FormInstance<any>;
76
+ form?: FormInstance<FormValue>;
72
77
  value?: TemplateValueOptions;
73
78
  onChange?: (value: Partial<TemplateValueOptions>, errors?: any[]) => void;
74
79
  onEvent?: (value: Partial<TemplateValueOptions>) => void;
package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js CHANGED
@@ -20,9 +20,15 @@ import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
20
20
  // Styles
21
21
  import { TemplateSaveAsStyled } from './styled';
22
22
  import { Category, ImageSlider } from './components';
23
+ import { cloneDeep } from 'lodash';
23
24
  const { Text } = Typography;
24
25
  export const TemplateSaveAs = props => {
25
- const { className, shareAccess, saveOptions, imageReview, isLoadingCategories, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions, form, value, onChange, onEvent, } = props;
26
+ var _a;
27
+ const { className, shareAccess, saveOptions, imageReview, isLoadingCategories, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions,
28
+ // form,
29
+ form: formProps, value, onChange, onEvent, } = props;
30
+ const [internalForm] = Form.useForm();
31
+ const form = formProps || internalForm;
26
32
  const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
27
33
  const { label: imageReviewLabel } = imageReview, restImageReviewProps = __rest(imageReview, ["label"]);
28
34
  const { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, selectPlaceholder = 'Please select an item', placeholder = 'Enter your media template name', validateName, onSearch, onNamePopupScroll, onScrollToBottom, } = templateNamesOptions || {};
@@ -31,84 +37,101 @@ export const TemplateSaveAs = props => {
31
37
  const { saveOption = saveNewValue, templateName = saveOption === saveNewValue || !saveOption
32
38
  ? { id: undefined, label: defaultNewTemplateName }
33
39
  : templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0], description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = {}, accessInfo, } = value || {};
40
+ const initFormValue = {
41
+ saveOption,
42
+ templateName: defaultNewTemplateName,
43
+ templateNameSelect: (templateName === null || templateName === void 0 ? void 0 : templateName.id) || ((_a = templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0]) === null || _a === void 0 ? void 0 : _a.id),
44
+ description: defaultTemplateDesc || '',
45
+ categories: categoriesValue,
46
+ defaultThumbnail,
47
+ };
34
48
  const [searchValue, setSearchValue] = useState('');
35
49
  const searchValueDebounce = useDebounce(searchValue, 1000);
36
50
  useEffect(() => {
37
51
  if (searchValueDebounce && onSearch)
38
52
  onSearch(searchValueDebounce);
39
53
  }, [searchValueDebounce, onSearch]);
40
- const [templateNameNew, setTemplateNameNew] = useState(defaultNewTemplateName);
41
- const [templateNameExist, setTemplateNameExist] = useState((templateName === null || templateName === void 0 ? void 0 : templateName.id) ? templateName : templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0]);
54
+ // const [templateNameNew, setTemplateNameNew] = useState(defaultNewTemplateName);
55
+ // const [templateNameExist, setTemplateNameExist] = useState(
56
+ // templateName?.id ? templateName : templateNameList?.[0],
57
+ // );
42
58
  // NOTE: HOTFIX templateNameExist not update when value outside changed
43
- useEffect(() => {
44
- if (templateName === null || templateName === void 0 ? void 0 : templateName.id) {
45
- setTemplateNameExist(templateName);
46
- }
47
- }, [templateName]);
59
+ // useEffect(() => {
60
+ // if (templateName?.id) {
61
+ // setTemplateNameExist(templateName);
62
+ // }
63
+ // }, [templateName]);
48
64
  const handleChangeValue = (newValue) => {
49
- var _a, _b;
65
+ var _a;
50
66
  if (onEvent) {
51
67
  onEvent(newValue);
52
68
  }
53
69
  if (onChange) {
54
- onChange(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, value), (!(value === null || value === void 0 ? void 0 : value.saveOption) && { saveOption: saveNewValue })), (!(value === null || value === void 0 ? void 0 : value.templateName) && { templateName: { id: undefined, label: templateNameNew } })), (!(value === null || value === void 0 ? void 0 : value.defaultThumbnail) && { defaultThumbnail })), newValue), (_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);
70
+ const formValue = cloneDeep(form.getFieldsValue(true));
71
+ formValue.templateName =
72
+ formValue.saveOption === saveNewValue
73
+ ? { id: undefined, label: formValue.templateName }
74
+ : {
75
+ id: formValue.templateNameSelect,
76
+ label: ((_a = templateNameList.find(item => item.id === formValue.templateNameSelect)) === null || _a === void 0 ? void 0 : _a.label) ||
77
+ formValue.templateName ||
78
+ '',
79
+ };
80
+ delete formValue.templateNameSelect;
81
+ onChange(Object.assign(Object.assign(Object.assign({}, value), formValue), newValue), form.getFieldsError().flatMap(item => item.errors));
55
82
  }
56
83
  };
57
84
  const handleAddCategory = ({ parentKey, childKey }) => {
58
- const currCategory = (categoriesValue === null || categoriesValue === void 0 ? void 0 : categoriesValue[parentKey]) || [];
59
- const newCategory = Object.assign(Object.assign({}, categoriesValue), { [parentKey]: [...currCategory, +childKey] });
85
+ var _a;
86
+ const currCategory = ((_a = form.getFieldValue('categories')) === null || _a === void 0 ? void 0 : _a[parentKey]) || [];
87
+ const newCategory = Object.assign(Object.assign({}, form.getFieldValue('categories')), { [parentKey]: [...currCategory, +childKey] });
88
+ form.setFieldValue('categories', newCategory);
60
89
  handleChangeValue({ categories: newCategory });
61
90
  };
62
91
  const handleRemoveCategory = ({ parentKey, childKey }) => {
63
- const currCategory = categoriesValue === null || categoriesValue === void 0 ? void 0 : categoriesValue[parentKey];
92
+ var _a;
93
+ const currCategory = (_a = form.getFieldValue('categories')) === null || _a === void 0 ? void 0 : _a[parentKey];
64
94
  if (!currCategory)
65
95
  return;
66
96
  const newChildren = currCategory.filter(child => child !== childKey);
67
- handleChangeValue({
68
- categories: Object.assign(Object.assign({}, categoriesValue), { [parentKey]: newChildren }),
69
- });
97
+ const newCategory = Object.assign(Object.assign({}, form.getFieldValue('categories')), { [parentKey]: newChildren });
98
+ form.setFieldValue('categories', newCategory);
99
+ handleChangeValue({ categories: newCategory });
70
100
  };
71
- return (React.createElement(Form, { form: form, initialValues: {
72
- 'template-name': defaultNewTemplateName ||
73
- `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`,
74
- } },
101
+ return (React.createElement(Form, { form: form, initialValues: initFormValue, colon: false, labelAlign: "left" },
75
102
  React.createElement(TemplateSaveAsStyled, { className: className || '', vertical: true },
76
103
  React.createElement(Flex, { className: "save-options-container" },
77
- React.createElement(RadioGroup, { value: saveOption, onChange: e => {
78
- handleChangeValue({
79
- saveOption: e.target.value,
80
- templateName: e.target.value === saveNewValue
81
- ? { id: undefined, label: templateNameNew }
82
- : templateNameExist,
83
- });
84
- } },
85
- React.createElement(Radio, { value: saveNewValue }, saveNewText),
86
- React.createElement(Radio, { value: saveExistValue }, saveExistText))),
104
+ React.createElement(Form.Item, { name: "saveOption", noStyle: true },
105
+ React.createElement(RadioGroup, { onChange: e => handleChangeValue({ saveOption: e.target.value }) },
106
+ React.createElement(Radio, { value: saveNewValue }, saveNewText),
107
+ React.createElement(Radio, { value: saveExistValue }, saveExistText)))),
87
108
  React.createElement(Flex, null,
88
- React.createElement(Flex, { vertical: true, gap: 20, className: "template-container" },
89
- React.createElement(Flex, { className: "field-container" },
90
- React.createElement(Text, { className: "field-title field-title--start" },
91
- templateLabel || 'Template name',
92
- React.createElement("span", null, "\u2009*")),
93
- saveOption === saveNewValue ? (React.createElement(Form.Item
94
- // label="Template name"
109
+ React.createElement(Flex, { vertical /* gap={20} */: true, className: "template-container" },
110
+ React.createElement(Form.Item, { label: templateLabel || 'Template name', required: true,
111
+ // noStyle -> if enable -> make label is hidden (antd 15.12.6 bug)
112
+ style: { marginBottom: 0 }, shouldUpdate: (prevValues, currentValues) => prevValues.saveOption !== currentValues.saveOption }, ({ getFieldValue, isFieldValidating }) => getFieldValue('saveOption') === saveNewValue ? (React.createElement(Form.Item, { name: "templateName",
113
+ // noStyle -> if enable -> validateDebounce not work correct (antd 15.12.6 bug)
114
+ validateDebounce: 1000, validateTrigger: "onChange", hasFeedback: isFieldValidating('templateName'), validateStatus: "validating", rules: [
115
+ {
116
+ required: true,
117
+ message: "This field can't be empty",
118
+ },
119
+ {
120
+ validator: validateName,
121
+ },
122
+ ] },
123
+ React.createElement(Input
124
+ // className="field-input"
125
+ , {
126
+ // className="field-input"
127
+ placeholder: placeholder, maxLength: 255, onBlur: e => handleChangeValue({
128
+ templateName: { id: undefined, label: e.target.value },
129
+ }) }))) : (React.createElement(Form.Item, { name: "templateNameSelect" },
130
+ React.createElement(Select
131
+ // className="field-input"
95
132
  , {
96
- // label="Template name"
97
- name: "template-name", validateTrigger: "onChange",
98
- // noStyle
99
- rules: [
100
- {
101
- required: true,
102
- message: "This field can't be empty",
103
- },
104
- {
105
- validator: validateName,
106
- },
107
- ] },
108
- React.createElement(Input, { className: "field-input", value: templateNameNew, placeholder: placeholder, debounce: 100, maxLength: 255, onAfterChange: value => {
109
- handleChangeValue({ templateName: { id: undefined, label: value } });
110
- setTemplateNameNew(value);
111
- }, "aria-valuetext": templateNameNew }))) : (React.createElement(Select, { className: "field-input", placeholder: selectPlaceholder, showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: e => {
133
+ // className="field-input"
134
+ placeholder: selectPlaceholder, showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: e => {
112
135
  if (onNamePopupScroll)
113
136
  onNamePopupScroll(e);
114
137
  if (onScrollToBottom) {
@@ -125,40 +148,40 @@ export const TemplateSaveAs = props => {
125
148
  justifyContent: 'center',
126
149
  alignItems: 'center',
127
150
  } },
128
- React.createElement(Spin, { size: "small" }))) : null)), value: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id, options:
151
+ React.createElement(Spin, { size: "small" }))) : null)), options:
129
152
  // If template exist is not in templateNames list => add to begin of options array
130
153
  (templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList.length) > 0
131
154
  ? [
132
- ...(templateNameList.find(item => item.id === (templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id))
155
+ ...(templateNameList.find(item => item.id === getFieldValue('templateNameSelect'))
133
156
  ? []
134
- : [{ value: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id, label: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.label }]),
157
+ : [
158
+ {
159
+ value: getFieldValue('templateNameSelect'),
160
+ label: getFieldValue('templateName'),
161
+ },
162
+ ]),
135
163
  ...templateNameList.map(item => ({
136
164
  value: item.id,
137
165
  label: item.label,
138
166
  })),
139
167
  ]
140
168
  : [], onChange: value => {
141
- var _a, _b;
169
+ const newTemplateSelected = templateNameList.find(item => item.id === value);
170
+ form.setFieldValue('description', newTemplateSelected === null || newTemplateSelected === void 0 ? void 0 : newTemplateSelected.description);
142
171
  handleChangeValue({
143
172
  templateName: {
144
173
  id: value,
145
- label: ((_a = templateNameList.find(item => item.id === value)) === null || _a === void 0 ? void 0 : _a.label) || '',
174
+ label: (newTemplateSelected === null || newTemplateSelected === void 0 ? void 0 : newTemplateSelected.label) || '',
146
175
  },
147
176
  });
148
- setTemplateNameExist({
149
- id: value,
150
- label: ((_b = templateNameList.find(item => item.id === value)) === null || _b === void 0 ? void 0 : _b.label) || '',
151
- });
152
- } }))),
153
- React.createElement(Flex, { className: "field-container", style: { marginTop: '-20px' } },
154
- React.createElement(Text, { className: "field-title field-title--middle" }, descriptionLabel || 'Description'),
155
- React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', className: "field-input", maxLength: 400, onBlur: e => handleChangeValue({ description: e.target.value }) })),
156
- React.createElement(Flex, { className: "field-container" },
157
- React.createElement(Text, { className: "field-title" },
158
- imageReviewLabel || 'Thumbnail template',
159
- " ",
160
- React.createElement("span", null, "*")),
161
- React.createElement(ImageSlider, Object.assign({ defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }) }, restImageReviewProps))),
177
+ } })))),
178
+ React.createElement(Form.Item, { name: "description", label: descriptionLabel || 'Description' },
179
+ React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', maxLength: 400, onBlur: e => handleChangeValue({ description: e.target.value }) })),
180
+ React.createElement(Form.Item, { name: "defaultThumbnail", shouldUpdate: true, required: true, label: imageReviewLabel || 'Thumbnail template' },
181
+ React.createElement(ImageSlider, Object.assign({ defaultThumbnail: form.getFieldValue('defaultThumbnail'), onSelectDefault: value => {
182
+ form.setFieldValue('defaultThumbnail', value);
183
+ handleChangeValue({ defaultThumbnail: value });
184
+ } }, restImageReviewProps))),
162
185
  isLoadingCategories ? (React.createElement(Flex, { className: "field-container" },
163
186
  React.createElement(Text, { className: "field-title" }, "Categories"),
164
187
  React.createElement(Space, { style: {
@@ -168,17 +191,23 @@ export const TemplateSaveAs = props => {
168
191
  alignItems: 'center',
169
192
  } },
170
193
  React.createElement(Spin, { size: "small" })))) : null,
171
- !isLoadingCategories && categories
194
+ React.createElement(Form.Item, { noStyle: true, shouldUpdate: (prevValues, currentValues) => prevValues.categories !== currentValues.categories }, ({ getFieldValue }) => !isLoadingCategories && categories
172
195
  ? categories.map(parentCategory => {
173
- const selectedChildren = categoriesValue[parentCategory.key];
196
+ var _a;
197
+ const selectedChildren = (_a = getFieldValue('categories')) === null || _a === void 0 ? void 0 : _a[parentCategory.key];
198
+ // const selectedChildren = categoriesValue[parentCategory.key];
174
199
  // NOTE: filter to remove device and template categories
175
200
  if (omitCategories === null || omitCategories === void 0 ? void 0 : omitCategories.includes(parentCategory.key.toString()))
176
201
  return null;
177
202
  return (React.createElement(Category, { key: parentCategory.key, categoryKey: parentCategory.key, categoryChildren: parentCategory.children, label: parentCategory.label, selected: selectedChildren, onAddCategory: handleAddCategory, onRemoveCategory: handleRemoveCategory }));
178
203
  })
179
- : null),
204
+ : null)),
180
205
  isShowShareAccess ? (React.createElement("div", { className: "share-access-container" },
181
- React.createElement(ShareAccess, Object.assign({ accessInfo: accessInfo, excludeUserAccess: ['to_editor', 'to_owner'], generalAccessSettings: {
206
+ React.createElement(ShareAccess
207
+ // accessInfo={form.getFieldValue('accessInfo')}
208
+ , Object.assign({
209
+ // accessInfo={form.getFieldValue('accessInfo')}
210
+ placeholder: "Add people", accessInfo: accessInfo, excludeUserAccess: ['to_editor', 'to_owner'], generalAccessSettings: {
182
211
  publicOnlyWith: true,
183
212
  }, onChange: value => handleChangeValue({ accessInfo: value }) }, shareAccessProps)))) : null))));
184
213
  };
package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js CHANGED
@@ -56,7 +56,7 @@ export const ImageSlider = props => {
56
56
  }, [onSelectDefault]);
57
57
  return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
58
58
  React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnails.length <= 1, onClickDefaultButton: handleClickDefault }))))),
59
- hideThumbnailsList || thumbnails.length <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { key: `${url}_${index * 2}`, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail })))))),
59
+ hideThumbnailsList || thumbnails.length <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnails.length < slidesPerView ? 'center' : 'flex-start' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { key: `${url}_${index * 2}`, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail })))))),
60
60
  previewNavigation && !isLoading ? (React.createElement(React.Fragment, null,
61
61
  React.createElement(ButtonSlider, { direction: "left", type: "preview", onClick: handlePrevThumbnail }),
62
62
  React.createElement(ButtonSlider, { direction: "right", type: "preview", onClick: handleNextThumbnail }))) : null,
package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.js CHANGED
@@ -25,6 +25,7 @@ const centerBlock = css `
25
25
  export const ImageSliderStyled = styled(Flex) `
26
26
  /* NOTE: Style for prev and next button in thumbnail slider */
27
27
  position: relative;
28
+ margin-top: 6px;
28
29
 
29
30
  .change-preview-button {
30
31
  ${centerBlock}
package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.d.ts CHANGED
@@ -3,7 +3,7 @@ import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
3
3
  import { TGetTemplateCategoryList, TGetObjectTEmplateList } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
4
4
  import { TTemplateListingConfig } from '@antscorp/antsomi-ui/es/types/templateListing';
5
5
  import { TemplateCategory } from '@antscorp/antsomi-ui/es/models/TemplateCategory';
6
- import { TemplateValueOptions, categoriesProps } from '../TemplateSaveAs';
6
+ import { FormValue, TemplateValueOptions, categoriesProps } from '../TemplateSaveAs';
7
7
  import { RuleObject } from 'antd/es/form';
8
8
  interface TemplateListingOptions {
9
9
  service: PayloadInfo;
@@ -61,9 +61,9 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
61
61
  onSearch: import("react").Dispatch<import("react").SetStateAction<string>>;
62
62
  onScrollToBottom: () => void;
63
63
  isLoading: boolean;
64
- validateName: (rule: RuleObject, value: any, callback?: any) => Promise<void>;
64
+ validateName: (rule: RuleObject, value: any) => Promise<void>;
65
65
  };
66
- form: import("antd").FormInstance<any>;
66
+ form: import("antd").FormInstance<FormValue>;
67
67
  errors: any[] | undefined;
68
68
  refetchCategoryList: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<TemplateCategory[], any>>;
69
69
  refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate>>, any>>;
package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.js CHANGED
@@ -39,8 +39,10 @@ export const useTemplateSave = (options) => {
39
39
  const camelCase = snakeCaseToCamelCase(categories || {});
40
40
  return { camelCase, snakeCase };
41
41
  };
42
- const formattedCategoriesValue = useMemo(() => handleFormatCategories(value.categories), [value]);
42
+ const formattedCategoriesValue = useMemo(() => handleFormatCategories(value.categories), [value.categories]);
43
+ // const form = Form.useFormInstance<FormValue>();
43
44
  const [form] = Form.useForm();
45
+ // console.log('form instance in hook:: ', form.getFieldsValue());
44
46
  const { data: categoryList, isLoading: isLoadingCategoryList, refetch: refetchCategoryList, } = useGetTemplateCategoryList({
45
47
  args: {
46
48
  auth: service,
@@ -78,7 +80,7 @@ export const useTemplateSave = (options) => {
78
80
  const templateItems = useMemo(() => {
79
81
  if (infiniteObjectTemplate) {
80
82
  const { pages } = infiniteObjectTemplate;
81
- return pages.flatMap(({ entities }) => entities.flatMap(entity => (Object.assign(Object.assign({}, entity.toJson()), { label: entity.name }))));
83
+ return pages.flatMap(({ entities }) => entities.flatMap(entity => (Object.assign(Object.assign({}, entity.toJson()), { label: entity.name, description: entity.description || '' }))));
82
84
  }
83
85
  return [];
84
86
  }, [infiniteObjectTemplate]);
@@ -96,7 +98,7 @@ export const useTemplateSave = (options) => {
96
98
  setValue(valueArg || {});
97
99
  };
98
100
  /* Validate Template Name */
99
- const validateName = (rule, value, callback) => __awaiter(void 0, void 0, void 0, function* () {
101
+ const validateName = useCallback((rule, value) => __awaiter(void 0, void 0, void 0, function* () {
100
102
  if (!value)
101
103
  return;
102
104
  const response = yield validateTemplateName({
@@ -104,14 +106,14 @@ export const useTemplateSave = (options) => {
104
106
  params: {
105
107
  object_type: objectType,
106
108
  public_level: publicLevel,
107
- template_name: value,
109
+ template_name: value.trim(),
108
110
  },
109
111
  });
110
112
  if (response.existed) {
111
113
  return Promise.reject(new Error('Template name already exists'));
112
114
  }
113
115
  return Promise.resolve();
114
- });
116
+ }), [objectType, publicLevel, service, validateTemplateName]);
115
117
  return {
116
118
  // MapKeys
117
119
  categoryItems,
package/es/components/molecules/TemplateSaveAs/styled.js CHANGED
@@ -20,6 +20,10 @@ export const TemplateSaveAsStyled = styled(Flex) `
20
20
  overflow-y: auto;
21
21
  }
22
22
 
23
+ .categories-container {
24
+ margin-bottom: 20px;
25
+ }
26
+
23
27
  &:not(:has(.share-access-container)) .categories-container {
24
28
  width: 60%;
25
29
  }
@@ -37,10 +41,25 @@ export const TemplateSaveAsStyled = styled(Flex) `
37
41
  }
38
42
  }
39
43
 
44
+ /* .antsomi-form-item .antsomi-form-item-row */
40
45
  .field-container {
41
46
  gap: 10px;
42
47
  }
43
48
 
49
+ /* NOTE: Style for ant form */
50
+ .antsomi-form-item {
51
+ /* margin: 0; */
52
+ }
53
+ .antsomi-form-item-row {
54
+ gap: 10px;
55
+ .antsomi-form-item-label {
56
+ flex: 0 0 150px;
57
+ }
58
+ .antsomi-form-item-control-input {
59
+ width: 330px;
60
+ }
61
+ }
62
+
44
63
  .field-title {
45
64
  font-size: 12px;
46
65
  flex: 0 0 150px;
package/es/constants/theme.js CHANGED
@@ -181,4 +181,7 @@ THEME.components = {
181
181
  Tooltip: {
182
182
  colorBgSpotlight: (_y = THEME.token) === null || _y === void 0 ? void 0 : _y.bw8,
183
183
  },
184
+ Dropdown: {
185
+ controlItemBgHover: '#F2F9FF',
186
+ },
184
187
  };
package/es/test.js CHANGED
@@ -71,7 +71,7 @@ const getUserInfos = (email) => __awaiter(void 0, void 0, void 0, function* () {
71
71
  return data;
72
72
  });
73
73
  export const App = () => {
74
- const { categoryItems, templateItems, value: templateValue, onChange: onChangeTemplateValue, searchNameProps, form, } = useTemplateSave({
74
+ const { categoryItems, templateItems, value: templateValue, onChange: onChangeTemplateValue, searchNameProps, form, errors, } = useTemplateSave({
75
75
  service: {
76
76
  url: 'https://sandbox-media-template.antsomi.com/cdp/api/v1',
77
77
  token: '5474r2x214z254a4u2a4y444m4j5p27444c4h4h4n5t5',
@@ -118,12 +118,10 @@ export const App = () => {
118
118
  // />
119
119
  React.createElement(React.Fragment, null,
120
120
  React.createElement(Button, { onClick: () => setIsOpenSaveTemplate(true) }, "Open Modal"),
121
- React.createElement(TemplateSaveAsModal, { open: isOpenSaveTemplate, okButtonProps: { loading: false }, cancelButtonProps: { disabled: false },
122
- // onCancel={() => {
123
- // !loadingPersistTemplate && handleCancel();
124
- // }}
125
- onOk: (e, value) => {
126
- console.log('e');
121
+ React.createElement(TemplateSaveAsModal, { open: isOpenSaveTemplate, destroyOnClose: true, okButtonProps: { loading: false }, cancelButtonProps: { disabled: false }, onCancel: () => setIsOpenSaveTemplate(false), onOk: (e, value) => {
122
+ console.log('submit:: errors - ', errors, ' - value - ', value);
123
+ if (!(errors === null || errors === void 0 ? void 0 : errors.length))
124
+ setIsOpenSaveTemplate(false);
127
125
  }, templateProps: {
128
126
  form,
129
127
  value: templateValue,
@@ -133,7 +131,7 @@ export const App = () => {
133
131
  // setSelectedTemplate(event.templateName.id.toString());
134
132
  // },
135
133
  imageReview: {
136
- thumbnails: [],
134
+ thumbnails,
137
135
  skeleton: true,
138
136
  },
139
137
  templateNames: templateItems,
@@ -153,7 +151,7 @@ export const App = () => {
153
151
  },
154
152
  allowAddUser: true,
155
153
  },
156
- templateNamesOptions: Object.assign({}, searchNameProps),
154
+ templateNamesOptions: searchNameProps,
157
155
  } })));
158
156
  };
159
157
  const container = document.getElementById('root');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.5-beta.155",
3
+ "version": "1.3.5-beta.157",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",