@antscorp/antsomi-ui 1.3.5-beta.163 → 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.
|
@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
// Libraries
|
|
13
|
-
import React, { useEffect,
|
|
13
|
+
import React, { useEffect, useState } from 'react';
|
|
14
14
|
import { Form } from 'antd';
|
|
15
15
|
import dayjs from 'dayjs';
|
|
16
16
|
// Components
|
|
@@ -21,8 +21,10 @@ 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 => {
|
|
27
|
+
var _a;
|
|
26
28
|
const { className, shareAccess, saveOptions, imageReview, isLoadingCategories, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions,
|
|
27
29
|
// form,
|
|
28
30
|
form: formProps, value, onChange, onEvent, } = props;
|
|
@@ -36,49 +38,51 @@ export const TemplateSaveAs = props => {
|
|
|
36
38
|
const { saveOption = saveNewValue, templateName = saveOption === saveNewValue || !saveOption
|
|
37
39
|
? { id: undefined, label: defaultNewTemplateName }
|
|
38
40
|
: templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0], description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = {}, accessInfo, } = value || {};
|
|
39
|
-
const initFormValue =
|
|
40
|
-
var _a;
|
|
41
|
-
return ({
|
|
42
|
-
saveOption,
|
|
43
|
-
templateName: defaultNewTemplateName,
|
|
44
|
-
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),
|
|
45
|
-
description: defaultTemplateDesc || '',
|
|
46
|
-
categories: categoriesValue,
|
|
47
|
-
defaultThumbnail,
|
|
48
|
-
});
|
|
49
|
-
}, [
|
|
50
|
-
categoriesValue,
|
|
51
|
-
defaultNewTemplateName,
|
|
52
|
-
defaultTemplateDesc,
|
|
53
|
-
defaultThumbnail,
|
|
41
|
+
const initFormValue = {
|
|
54
42
|
saveOption,
|
|
55
|
-
templateName
|
|
56
|
-
templateNameList,
|
|
57
|
-
|
|
43
|
+
templateName: defaultNewTemplateName,
|
|
44
|
+
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),
|
|
45
|
+
description: defaultTemplateDesc || '',
|
|
46
|
+
categories: categoriesValue,
|
|
47
|
+
defaultThumbnail,
|
|
48
|
+
};
|
|
58
49
|
const [searchValue, setSearchValue] = useState('');
|
|
59
50
|
const searchValueDebounce = useDebounce(searchValue, 1000);
|
|
51
|
+
// Effects
|
|
60
52
|
useEffect(() => {
|
|
61
53
|
if (searchValueDebounce && onSearch)
|
|
62
54
|
onSearch(searchValueDebounce);
|
|
63
55
|
}, [searchValueDebounce, onSearch]);
|
|
64
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(() => {
|
|
65
67
|
form.setFieldsValue(initFormValue);
|
|
66
68
|
}, [form, initFormValue]);
|
|
67
|
-
// const [templateNameNew, setTemplateNameNew] = useState(defaultNewTemplateName);
|
|
68
|
-
// const [templateNameExist, setTemplateNameExist] = useState(
|
|
69
|
-
// templateName?.id ? templateName : templateNameList?.[0],
|
|
70
|
-
// );
|
|
71
|
-
// NOTE: HOTFIX templateNameExist not update when value outside changed
|
|
72
|
-
// useEffect(() => {
|
|
73
|
-
// if (templateName?.id) {
|
|
74
|
-
// setTemplateNameExist(templateName);
|
|
75
|
-
// }
|
|
76
|
-
// }, [templateName]);
|
|
77
69
|
const handleChangeValue = (newValue) => {
|
|
78
70
|
if (onEvent) {
|
|
79
71
|
onEvent(newValue);
|
|
80
72
|
}
|
|
81
73
|
if (onChange) {
|
|
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;
|
|
82
86
|
onChange(Object.assign(Object.assign({}, value), newValue), form.getFieldsError().flatMap(item => item.errors));
|
|
83
87
|
}
|
|
84
88
|
};
|
|
@@ -106,12 +110,15 @@ export const TemplateSaveAs = props => {
|
|
|
106
110
|
React.createElement(RadioGroup, { onChange: e => {
|
|
107
111
|
var _a;
|
|
108
112
|
const { value } = e.target;
|
|
109
|
-
|
|
113
|
+
// Change save option
|
|
114
|
+
const cloneTemplateName = cloneDeep(templateName);
|
|
115
|
+
console.log('🚀 ~ cloneTemplateName:', cloneTemplateName);
|
|
110
116
|
if (value === saveExistValue) {
|
|
111
|
-
const selectedTemplate = templateNameList
|
|
112
|
-
|
|
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);
|
|
113
120
|
}
|
|
114
|
-
handleChangeValue({ saveOption: value, templateName:
|
|
121
|
+
handleChangeValue({ saveOption: e.target.value, templateName: cloneTemplateName });
|
|
115
122
|
} },
|
|
116
123
|
React.createElement(Radio, { value: saveNewValue }, saveNewText),
|
|
117
124
|
React.createElement(Radio, { value: saveExistValue }, saveExistText)))),
|
|
@@ -136,7 +143,11 @@ export const TemplateSaveAs = props => {
|
|
|
136
143
|
React.createElement(Input, { placeholder: placeholder, maxLength: 255, debounce: 1000, onAfterChange: value => handleChangeValue({
|
|
137
144
|
templateName: { id: undefined, label: value },
|
|
138
145
|
}) }))) : (React.createElement(Form.Item, { name: "templateNameSelect" },
|
|
139
|
-
React.createElement(Select
|
|
146
|
+
React.createElement(Select
|
|
147
|
+
// className="field-input"
|
|
148
|
+
, {
|
|
149
|
+
// className="field-input"
|
|
150
|
+
placeholder: selectPlaceholder, showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: e => {
|
|
140
151
|
if (onNamePopupScroll)
|
|
141
152
|
onNamePopupScroll(e);
|
|
142
153
|
if (onScrollToBottom) {
|
|
@@ -153,7 +164,7 @@ export const TemplateSaveAs = props => {
|
|
|
153
164
|
justifyContent: 'center',
|
|
154
165
|
alignItems: 'center',
|
|
155
166
|
} },
|
|
156
|
-
React.createElement(Spin, { size: "small" }))) : null)), options: templateNameList
|
|
167
|
+
React.createElement(Spin, { size: "small" }))) : null)), options: templateNameList.map(item => ({
|
|
157
168
|
value: item.id,
|
|
158
169
|
label: item.label,
|
|
159
170
|
})), onChange: value => {
|