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

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.
@@ -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;
@@ -47,38 +48,42 @@ export const TemplateSaveAs = props => {
47
48
  };
48
49
  const [searchValue, setSearchValue] = useState('');
49
50
  const searchValueDebounce = useDebounce(searchValue, 1000);
51
+ // Effects
50
52
  useEffect(() => {
51
53
  if (searchValueDebounce && onSearch)
52
54
  onSearch(searchValueDebounce);
53
55
  }, [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
- // useEffect(() => {
60
- // if (templateName?.id) {
61
- // setTemplateNameExist(templateName);
62
- // }
63
- // }, [templateName]);
56
+ useEffect(() => {
57
+ /**
58
+ * Check if saveOption is save-new and onChange and defaultNewTemplateName changed
59
+ * => set templateName to new default template name { id: undefined, label: defaultNewTemplateName }
60
+ */
61
+ if (saveOption === saveNewValue && onChange) {
62
+ onChange(Object.assign(Object.assign({}, value), { templateName: { id: templateName === null || templateName === void 0 ? void 0 : templateName.id, label: defaultNewTemplateName } }));
63
+ }
64
+ // eslint-disable-next-line react-hooks/exhaustive-deps
65
+ }, [defaultNewTemplateName, saveNewValue, saveOption]);
66
+ useDeepCompareEffect(() => {
67
+ form.setFieldsValue(initFormValue);
68
+ }, [form, initFormValue]);
64
69
  const handleChangeValue = (newValue) => {
65
- var _a;
66
70
  if (onEvent) {
67
71
  onEvent(newValue);
68
72
  }
69
73
  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));
74
+ // const formValue = cloneDeep(form.getFieldsValue(true));
75
+ // formValue.templateName =
76
+ // formValue.saveOption === saveNewValue
77
+ // ? { id: undefined, label: formValue.templateName }
78
+ // : {
79
+ // id: formValue.templateNameSelect,
80
+ // label:
81
+ // templateNameList.find(item => item.id === formValue.templateNameSelect)?.label ||
82
+ // formValue.templateName ||
83
+ // '',
84
+ // };
85
+ // delete formValue.templateNameSelect;
86
+ onChange(Object.assign(Object.assign({}, value), newValue), form.getFieldsError().flatMap(item => item.errors));
82
87
  }
83
88
  };
84
89
  const handleAddCategory = ({ parentKey, childKey }) => {
@@ -102,7 +107,19 @@ export const TemplateSaveAs = props => {
102
107
  React.createElement(TemplateSaveAsStyled, { className: className || '', vertical: true },
103
108
  React.createElement(Flex, { className: "save-options-container" },
104
109
  React.createElement(Form.Item, { name: "saveOption", noStyle: true },
105
- React.createElement(RadioGroup, { onChange: e => handleChangeValue({ saveOption: e.target.value }) },
110
+ React.createElement(RadioGroup, { onChange: e => {
111
+ var _a;
112
+ const { value } = e.target;
113
+ // Change save option
114
+ const cloneTemplateName = cloneDeep(templateName);
115
+ console.log('🚀 ~ cloneTemplateName:', cloneTemplateName);
116
+ if (value === saveExistValue) {
117
+ const selectedTemplate = templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList.find(item => item.id === templateName.id);
118
+ // Check current template id is exist or not, if not then select first
119
+ 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);
120
+ }
121
+ handleChangeValue({ saveOption: e.target.value, templateName: cloneTemplateName });
122
+ } },
106
123
  React.createElement(Radio, { value: saveNewValue }, saveNewText),
107
124
  React.createElement(Radio, { value: saveExistValue }, saveExistText)))),
108
125
  React.createElement(Flex, null,
@@ -147,24 +164,10 @@ export const TemplateSaveAs = props => {
147
164
  justifyContent: 'center',
148
165
  alignItems: 'center',
149
166
  } },
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 => {
167
+ React.createElement(Spin, { size: "small" }))) : null)), options: templateNameList.map(item => ({
168
+ value: item.id,
169
+ label: item.label,
170
+ })), onChange: value => {
168
171
  const newTemplateSelected = templateNameList.find(item => item.id === value);
169
172
  form.setFieldValue('description', newTemplateSelected === null || newTemplateSelected === void 0 ? void 0 : newTemplateSelected.description);
170
173
  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.165",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",