@antscorp/antsomi-ui 1.3.5-beta.164 → 1.3.5-beta.166

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 (2) hide show
  1. package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js +75 -45
  2. package/package.json +1 -1
package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js CHANGED
@@ -21,6 +21,7 @@ import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
21
21
  import { TemplateSaveAsStyled } from './styled';
22
22
  import { Category, ImageSlider } from './components';
23
23
  import { cloneDeep } from 'lodash';
24
+ import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
24
25
  const { Text } = Typography;
25
26
  export const TemplateSaveAs = props => {
26
27
  var _a;
@@ -34,9 +35,11 @@ export const TemplateSaveAs = props => {
34
35
  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 || {};
35
36
  const { label: descriptionLabel, placeholder: descriptionPlaceholder } = descriptionOptions || {};
36
37
  const { saveNewText = 'Save as a new media template', saveExistText = 'Save as an existing media template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
37
- const { saveOption = saveNewValue, templateName = saveOption === saveNewValue || !saveOption
38
- ? { id: undefined, label: defaultNewTemplateName }
39
- : templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0], description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = {}, accessInfo, } = value || {};
38
+ const { saveOption = saveNewValue,
39
+ // templateName = saveOption === saveNewValue || !saveOption
40
+ // ? { id: undefined, label: defaultNewTemplateName }
41
+ // : templateNameList?.[0],
42
+ templateName, description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = {}, accessInfo, } = value || {};
40
43
  const initFormValue = {
41
44
  saveOption,
42
45
  templateName: defaultNewTemplateName,
@@ -47,38 +50,60 @@ export const TemplateSaveAs = props => {
47
50
  };
48
51
  const [searchValue, setSearchValue] = useState('');
49
52
  const searchValueDebounce = useDebounce(searchValue, 1000);
53
+ // Effects
50
54
  useEffect(() => {
51
55
  if (searchValueDebounce && onSearch)
52
56
  onSearch(searchValueDebounce);
53
57
  }, [searchValueDebounce, onSearch]);
54
- // const [templateNameNew, setTemplateNameNew] = useState(defaultNewTemplateName);
55
- // const [templateNameExist, setTemplateNameExist] = useState(
56
- // templateName?.id ? templateName : templateNameList?.[0],
57
- // );
58
- // NOTE: HOTFIX templateNameExist not update when value outside changed
59
58
  // useEffect(() => {
60
- // if (templateName?.id) {
61
- // setTemplateNameExist(templateName);
59
+ // /**
60
+ // * Check if saveOption is save-new and onChange and defaultNewTemplateName changed
61
+ // * => set templateName to new default template name { id: undefined, label: defaultNewTemplateName }
62
+ // */
63
+ // if (saveOption === saveNewValue && onChange) {
64
+ // onChange({
65
+ // ...value,
66
+ // templateName: { id: templateName?.id, label: defaultNewTemplateName },
67
+ // });
62
68
  // }
63
- // }, [templateName]);
64
- const handleChangeValue = (newValue) => {
69
+ // // eslint-disable-next-line react-hooks/exhaustive-deps
70
+ // }, [defaultNewTemplateName, saveNewValue, saveOption]);
71
+ useEffect(() => {
72
+ if (saveOption === saveNewValue && onChange && !(templateName === null || templateName === void 0 ? void 0 : templateName.label)) {
73
+ const newDefaultTemplateName = `Untitled Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`;
74
+ onChange(Object.assign(Object.assign({}, value), { templateName: { id: templateName === null || templateName === void 0 ? void 0 : templateName.id, label: newDefaultTemplateName } }));
75
+ }
76
+ // eslint-disable-next-line react-hooks/exhaustive-deps
77
+ }, [saveOption, templateName]);
78
+ useDeepCompareEffect(() => {
65
79
  var _a;
80
+ form.setFieldsValue({
81
+ saveOption,
82
+ templateName: templateName === null || templateName === void 0 ? void 0 : templateName.label,
83
+ 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),
84
+ description: defaultTemplateDesc || '',
85
+ categories: categoriesValue,
86
+ defaultThumbnail,
87
+ });
88
+ }, [form, value]);
89
+ const handleChangeValue = (newValue) => {
66
90
  if (onEvent) {
67
91
  onEvent(newValue);
68
92
  }
69
93
  if (onChange) {
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));
94
+ // const formValue = cloneDeep(form.getFieldsValue(true));
95
+ // formValue.templateName =
96
+ // formValue.saveOption === saveNewValue
97
+ // ? { id: undefined, label: formValue.templateName }
98
+ // : {
99
+ // id: formValue.templateNameSelect,
100
+ // label:
101
+ // templateNameList.find(item => item.id === formValue.templateNameSelect)?.label ||
102
+ // formValue.templateName ||
103
+ // '',
104
+ // };
105
+ // delete formValue.templateNameSelect;
106
+ onChange(Object.assign(Object.assign({}, value), newValue), form.getFieldsError().flatMap(item => item.errors));
82
107
  }
83
108
  };
84
109
  const handleAddCategory = ({ parentKey, childKey }) => {
@@ -102,7 +127,26 @@ export const TemplateSaveAs = props => {
102
127
  React.createElement(TemplateSaveAsStyled, { className: className || '', vertical: true },
103
128
  React.createElement(Flex, { className: "save-options-container" },
104
129
  React.createElement(Form.Item, { name: "saveOption", noStyle: true },
105
- React.createElement(RadioGroup, { onChange: e => handleChangeValue({ saveOption: e.target.value }) },
130
+ React.createElement(RadioGroup, { onChange: e => {
131
+ var _a;
132
+ const { value } = e.target;
133
+ // Change save option
134
+ const cloneTemplateName = cloneDeep(templateName);
135
+ if (cloneTemplateName) {
136
+ if (value === saveExistValue) {
137
+ const selectedTemplate = templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList.find(item => item.id === (templateName === null || templateName === void 0 ? void 0 : templateName.id));
138
+ // Check current template id is exist or not, if not then select first
139
+ if (cloneTemplateName) {
140
+ cloneTemplateName.id = (selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.id) || ((_a = templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0]) === null || _a === void 0 ? void 0 : _a.id);
141
+ }
142
+ }
143
+ else {
144
+ const newDefaultTemplateName = `Untitled Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`;
145
+ cloneTemplateName.label = newDefaultTemplateName;
146
+ }
147
+ }
148
+ handleChangeValue({ saveOption: e.target.value, templateName: cloneTemplateName });
149
+ } },
106
150
  React.createElement(Radio, { value: saveNewValue }, saveNewText),
107
151
  React.createElement(Radio, { value: saveExistValue }, saveExistText)))),
108
152
  React.createElement(Flex, null,
@@ -123,8 +167,8 @@ export const TemplateSaveAs = props => {
123
167
  validator: validateName,
124
168
  },
125
169
  ] },
126
- React.createElement(Input, { placeholder: placeholder, maxLength: 255, debounce: 1000, onAfterChange: value => handleChangeValue({
127
- templateName: { id: undefined, label: value },
170
+ React.createElement(Input, { placeholder: placeholder, maxLength: 255, debounce: 500, onAfterChange: value => handleChangeValue({
171
+ templateName: { id: templateName === null || templateName === void 0 ? void 0 : templateName.id, label: value },
128
172
  }) }))) : (React.createElement(Form.Item, { name: "templateNameSelect" },
129
173
  React.createElement(Select
130
174
  // className="field-input"
@@ -147,24 +191,10 @@ export const TemplateSaveAs = props => {
147
191
  justifyContent: 'center',
148
192
  alignItems: 'center',
149
193
  } },
150
- React.createElement(Spin, { size: "small" }))) : null)), options:
151
- // If template exist is not in templateNames list => add to begin of options array
152
- (templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList.length) > 0
153
- ? [
154
- ...(templateNameList.find(item => item.id === getFieldValue('templateNameSelect'))
155
- ? []
156
- : [
157
- {
158
- value: getFieldValue('templateNameSelect'),
159
- label: getFieldValue('templateName'),
160
- },
161
- ]),
162
- ...templateNameList.map(item => ({
163
- value: item.id,
164
- label: item.label,
165
- })),
166
- ]
167
- : [], onChange: value => {
194
+ React.createElement(Spin, { size: "small" }))) : null)), options: templateNameList.map(item => ({
195
+ value: item.id,
196
+ label: item.label,
197
+ })), onChange: value => {
168
198
  const newTemplateSelected = templateNameList.find(item => item.id === value);
169
199
  form.setFieldValue('description', newTemplateSelected === null || newTemplateSelected === void 0 ? void 0 : newTemplateSelected.description);
170
200
  handleChangeValue({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.5-beta.164",
3
+ "version": "1.3.5-beta.166",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",