@antscorp/antsomi-ui 1.3.5-beta.165 → 1.3.5-beta.167
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.
|
@@ -35,9 +35,11 @@ export const TemplateSaveAs = props => {
|
|
|
35
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 || {};
|
|
36
36
|
const { label: descriptionLabel, placeholder: descriptionPlaceholder } = descriptionOptions || {};
|
|
37
37
|
const { saveNewText = 'Save as a new media template', saveExistText = 'Save as an existing media template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
|
|
38
|
-
const { saveOption = saveNewValue,
|
|
39
|
-
|
|
40
|
-
|
|
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 || {};
|
|
41
43
|
const initFormValue = {
|
|
42
44
|
saveOption,
|
|
43
45
|
templateName: defaultNewTemplateName,
|
|
@@ -53,19 +55,37 @@ export const TemplateSaveAs = props => {
|
|
|
53
55
|
if (searchValueDebounce && onSearch)
|
|
54
56
|
onSearch(searchValueDebounce);
|
|
55
57
|
}, [searchValueDebounce, onSearch]);
|
|
58
|
+
// useEffect(() => {
|
|
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
|
+
// });
|
|
68
|
+
// }
|
|
69
|
+
// // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
70
|
+
// }, [defaultNewTemplateName, saveNewValue, saveOption]);
|
|
56
71
|
useEffect(() => {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
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 } }));
|
|
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 } }));
|
|
63
75
|
}
|
|
64
76
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
65
|
-
}, [
|
|
77
|
+
}, [saveOption, templateName]);
|
|
66
78
|
useDeepCompareEffect(() => {
|
|
67
|
-
|
|
68
|
-
|
|
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]);
|
|
69
89
|
const handleChangeValue = (newValue) => {
|
|
70
90
|
if (onEvent) {
|
|
71
91
|
onEvent(newValue);
|
|
@@ -112,11 +132,18 @@ export const TemplateSaveAs = props => {
|
|
|
112
132
|
const { value } = e.target;
|
|
113
133
|
// Change save option
|
|
114
134
|
const cloneTemplateName = cloneDeep(templateName);
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
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
|
+
}
|
|
120
147
|
}
|
|
121
148
|
handleChangeValue({ saveOption: e.target.value, templateName: cloneTemplateName });
|
|
122
149
|
} },
|
|
@@ -140,8 +167,8 @@ export const TemplateSaveAs = props => {
|
|
|
140
167
|
validator: validateName,
|
|
141
168
|
},
|
|
142
169
|
] },
|
|
143
|
-
React.createElement(Input, { placeholder: placeholder, maxLength: 255, debounce:
|
|
144
|
-
templateName: { id:
|
|
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 },
|
|
145
172
|
}) }))) : (React.createElement(Form.Item, { name: "templateNameSelect" },
|
|
146
173
|
React.createElement(Select
|
|
147
174
|
// className="field-input"
|
|
@@ -114,6 +114,19 @@ export const GlobalStyle = () => {
|
|
|
114
114
|
background-color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw2} !important;
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
+
// NOTE: Just hot fix for easy looking
|
|
118
|
+
.antsomi-btn-primary.antsomi-btn-compact-item.antsomi-btn-compact-first-item {
|
|
119
|
+
padding-right: 4px !important;
|
|
120
|
+
}
|
|
121
|
+
.antsomi-btn-compact-item.antsomi-btn-primary.antsomi-btn-compact-last-item {
|
|
122
|
+
width: fit-content;
|
|
123
|
+
padding: 0px !important;
|
|
124
|
+
padding-right: 4px !important;
|
|
125
|
+
&::before {
|
|
126
|
+
width: 0px !important;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
117
130
|
/* Input */
|
|
118
131
|
.antsomi-input,
|
|
119
132
|
.antsomi-input-affix-wrapper {
|
|
@@ -806,9 +819,7 @@ export const GlobalStyle = () => {
|
|
|
806
819
|
/* Tabs */
|
|
807
820
|
.antsomi-tabs {
|
|
808
821
|
.antsomi-tabs-tab {
|
|
809
|
-
|
|
810
|
-
font-weight: bold;
|
|
811
|
-
}
|
|
822
|
+
font-weight: bold;
|
|
812
823
|
}
|
|
813
824
|
}
|
|
814
825
|
|