@antscorp/antsomi-ui 1.3.5-beta.61 → 1.3.5-beta.63
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.
|
@@ -7,8 +7,11 @@ export type categoriesProps = {
|
|
|
7
7
|
export interface TemplateValueOptions {
|
|
8
8
|
saveOption?: string;
|
|
9
9
|
templateName?: {
|
|
10
|
-
id
|
|
11
|
-
label
|
|
10
|
+
id: undefined;
|
|
11
|
+
label: string;
|
|
12
|
+
} | {
|
|
13
|
+
id: string | number;
|
|
14
|
+
label: string;
|
|
12
15
|
};
|
|
13
16
|
description?: string;
|
|
14
17
|
defaultThumbnail?: number;
|
|
@@ -22,7 +22,7 @@ import { TemplateSaveAsStyled } from './styled';
|
|
|
22
22
|
import { ImageSlider } from './components';
|
|
23
23
|
const { Text } = Typography;
|
|
24
24
|
export const TemplateSaveAs = props => {
|
|
25
|
-
const { className, shareAccess, saveOptions, imageReview, categories, omitCategories, templateNames, templateNamesOptions, descriptionOptions, form, value, onChange, onEvent,
|
|
25
|
+
const { className, shareAccess, saveOptions, imageReview, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions, form, value, onChange, onEvent,
|
|
26
26
|
// onNamePopupScroll,
|
|
27
27
|
} = props;
|
|
28
28
|
const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
|
|
@@ -30,21 +30,21 @@ export const TemplateSaveAs = props => {
|
|
|
30
30
|
const { isLoading, label: templateLabel, defaultNewTemplateName, onSearch, onNamePopupScroll, } = templateNamesOptions || {};
|
|
31
31
|
const { label: descriptionLabel, placeholder: descriptionPlaceholder } = descriptionOptions || {};
|
|
32
32
|
const { saveNewText = 'Save as a new media Template', saveExistText = 'Save as an existing media Template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
|
|
33
|
-
const { saveOption = saveNewValue, templateName
|
|
33
|
+
const { saveOption = saveNewValue, templateName, description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = {}, accessInfo, } = value || {};
|
|
34
34
|
const [searchValue, setSearchValue] = useState('');
|
|
35
35
|
const searchValueDebounce = useDebounce(searchValue, 1000);
|
|
36
36
|
useEffect(() => {
|
|
37
37
|
if (searchValueDebounce && onSearch)
|
|
38
38
|
onSearch(searchValueDebounce);
|
|
39
39
|
}, [searchValueDebounce, onSearch]);
|
|
40
|
-
const [
|
|
41
|
-
const [templateNameExist, setTemplateNameExist] = useState((
|
|
40
|
+
const [templateNameNew, setTemplateNameNew] = useState(defaultNewTemplateName || `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`);
|
|
41
|
+
const [templateNameExist, setTemplateNameExist] = useState((templateName === null || templateName === void 0 ? void 0 : templateName.id) ? templateName : templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0]);
|
|
42
42
|
// NOTE: HOTFIX templateNameExist not update when value outside changed
|
|
43
43
|
useEffect(() => {
|
|
44
|
-
if (
|
|
45
|
-
setTemplateNameExist(
|
|
44
|
+
if (templateName === null || templateName === void 0 ? void 0 : templateName.id) {
|
|
45
|
+
setTemplateNameExist(templateName);
|
|
46
46
|
}
|
|
47
|
-
}, [
|
|
47
|
+
}, [templateName]);
|
|
48
48
|
const handleChangeValue = (newValue) => {
|
|
49
49
|
var _a, _b;
|
|
50
50
|
if (onEvent) {
|
|
@@ -53,7 +53,9 @@ export const TemplateSaveAs = props => {
|
|
|
53
53
|
if (onChange) {
|
|
54
54
|
onChange(Object.assign(Object.assign(Object.assign({}, value), newValue), {
|
|
55
55
|
// TODO: return saveOption and templateName generate default value if not pass as value props
|
|
56
|
-
defaultThumbnail: newValue.defaultThumbnail || defaultThumbnail,
|
|
56
|
+
defaultThumbnail: newValue.defaultThumbnail || defaultThumbnail,
|
|
57
|
+
// NOTE: if have no saveOption set saveOption value follow this priority => newValue >> value
|
|
58
|
+
saveOption: !(value === null || value === void 0 ? void 0 : value.saveOption) && !newValue.saveOption
|
|
57
59
|
? saveOption
|
|
58
60
|
: newValue.saveOption || (value === null || value === void 0 ? void 0 : value.saveOption) }), (_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);
|
|
59
61
|
}
|
|
@@ -88,7 +90,7 @@ export const TemplateSaveAs = props => {
|
|
|
88
90
|
handleChangeValue({
|
|
89
91
|
saveOption: e.target.value,
|
|
90
92
|
templateName: e.target.value === saveNewValue
|
|
91
|
-
? { id:
|
|
93
|
+
? { id: undefined, label: templateNameNew }
|
|
92
94
|
: templateNameExist,
|
|
93
95
|
});
|
|
94
96
|
} },
|
|
@@ -102,11 +104,11 @@ export const TemplateSaveAs = props => {
|
|
|
102
104
|
" ",
|
|
103
105
|
React.createElement("span", null, " *")),
|
|
104
106
|
saveOption === saveNewValue ? (React.createElement(Form.Item, { name: "template-name", validateTrigger: "onChange", noStyle: true, rules: [{ required: true }] },
|
|
105
|
-
React.createElement(Input, {
|
|
107
|
+
React.createElement(Input, { className: "field-input", value: templateNameNew, debounce: 100, onAfterChange: value => {
|
|
106
108
|
handleChangeValue({ templateName: { id: undefined, label: value } });
|
|
107
|
-
|
|
108
|
-
}, required: true }))) : (React.createElement(Select, { className: "field-input", showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: onNamePopupScroll, filterOption: false, dropdownRender: menu => (React.createElement(React.Fragment, null,
|
|
109
|
-
isLoading &&
|
|
109
|
+
setTemplateNameNew(value);
|
|
110
|
+
}, "aria-valuetext": templateNameNew, required: true }))) : (React.createElement(Select, { className: "field-input", showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: onNamePopupScroll, filterOption: false, dropdownRender: menu => (React.createElement(React.Fragment, null,
|
|
111
|
+
isLoading && templateNameList.length === 0 ? null : menu,
|
|
110
112
|
isLoading ? (React.createElement(Space, { style: {
|
|
111
113
|
padding: '4px 0',
|
|
112
114
|
width: '100%',
|
|
@@ -115,29 +117,29 @@ export const TemplateSaveAs = props => {
|
|
|
115
117
|
} },
|
|
116
118
|
React.createElement(Spin, { size: "small" }))) : null)), value: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id, options:
|
|
117
119
|
// If template exist is not in templateNames list => add to begin of options array
|
|
118
|
-
(
|
|
120
|
+
(templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList.length) > 0
|
|
119
121
|
? [
|
|
120
|
-
...(
|
|
122
|
+
...(templateNameList.find(item => item.id === (templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id))
|
|
121
123
|
? []
|
|
122
|
-
: [{ value: templateNameExist.id, label: templateNameExist.label }]),
|
|
123
|
-
...
|
|
124
|
+
: [{ value: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id, label: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.label }]),
|
|
125
|
+
...templateNameList.map(item => ({ value: item.id, label: item.label })),
|
|
124
126
|
]
|
|
125
127
|
: [], onChange: value => {
|
|
126
128
|
var _a, _b;
|
|
127
129
|
handleChangeValue({
|
|
128
130
|
templateName: {
|
|
129
131
|
id: value,
|
|
130
|
-
label: ((_a =
|
|
132
|
+
label: ((_a = templateNameList.find(item => item.id === value)) === null || _a === void 0 ? void 0 : _a.label) || '',
|
|
131
133
|
},
|
|
132
134
|
});
|
|
133
135
|
setTemplateNameExist({
|
|
134
136
|
id: value,
|
|
135
|
-
label: ((_b =
|
|
137
|
+
label: ((_b = templateNameList.find(item => item.id === value)) === null || _b === void 0 ? void 0 : _b.label) || '',
|
|
136
138
|
});
|
|
137
139
|
} }))),
|
|
138
140
|
React.createElement(Flex, { className: "field-container" },
|
|
139
141
|
React.createElement(Text, { className: "field-title field-title--middle" }, descriptionLabel || 'Description'),
|
|
140
|
-
React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', className: "field-input", value: defaultTemplateDesc, debounce:
|
|
142
|
+
React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', className: "field-input", value: defaultTemplateDesc, debounce: 100, onAfterChange: value => handleChangeValue({ description: value }) })),
|
|
141
143
|
React.createElement(Flex, { className: "field-container" },
|
|
142
144
|
React.createElement(Text, { className: "field-title" },
|
|
143
145
|
imageReviewLabel || 'Thumbnail template',
|
|
@@ -16,7 +16,7 @@ import { TemplateSaveAs } from './TemplateSaveAs';
|
|
|
16
16
|
// Inspiration form input component https://react.dev/reference/react-dom/components/input
|
|
17
17
|
export const TemplateSaveAsModal = props => {
|
|
18
18
|
const { open, onCancel, okText, onOk, title, templateProps, defaultValue } = props, restProps = __rest(props, ["open", "onCancel", "okText", "onOk", "title", "templateProps", "defaultValue"]);
|
|
19
|
-
const { onChange
|
|
19
|
+
const { onChange, value: templateValue } = templateProps, restTemplateProps = __rest(templateProps, ["onChange", "value"]);
|
|
20
20
|
const [internalValue, setInternalValue] = useState(defaultValue || templateValue);
|
|
21
21
|
const [errors, setErrors] = useState();
|
|
22
22
|
useEffect(() => {
|
|
@@ -25,18 +25,18 @@ export const TemplateSaveAsModal = props => {
|
|
|
25
25
|
}, [defaultValue]);
|
|
26
26
|
const handleOnChange = (value, errors) => {
|
|
27
27
|
setErrors(errors);
|
|
28
|
-
if (
|
|
29
|
-
|
|
28
|
+
if (onChange) {
|
|
29
|
+
onChange(value);
|
|
30
30
|
}
|
|
31
31
|
// NOTE: If there are no templateValue and templateOnChange => uncontrolled component => return templateValue
|
|
32
|
-
if (defaultValue && !templateValue && !
|
|
32
|
+
if (defaultValue && !templateValue && !onChange) {
|
|
33
33
|
setInternalValue(value);
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
36
|
const handleOk = (event) => {
|
|
37
37
|
if (onOk && (!errors || errors.length === 0)) {
|
|
38
|
-
// NOTE: If there are templateValue and
|
|
39
|
-
onOk(event, templateValue &&
|
|
38
|
+
// NOTE: If there are templateValue and onChange => controlled component => return templateValue
|
|
39
|
+
onOk(event, templateValue && onChange ? templateValue : internalValue);
|
|
40
40
|
}
|
|
41
41
|
};
|
|
42
42
|
const handleCancel = (event) => {
|
|
@@ -46,5 +46,5 @@ export const TemplateSaveAsModal = props => {
|
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
48
|
return (React.createElement(ModalV2, Object.assign({ open: open, onCancel: handleCancel, onOk: handleOk, okText: okText || 'Save', width: 1177, title: title || 'Save as my template' }, restProps),
|
|
49
|
-
React.createElement(TemplateSaveAs, Object.assign({ onChange: (newValue, errors) => handleOnChange(newValue, errors), value: templateValue || internalValue }, restTemplateProps))));
|
|
49
|
+
React.createElement(TemplateSaveAs, Object.assign({ onChange: onChange ? (newValue, errors) => handleOnChange(newValue, errors) : undefined, value: templateValue || internalValue }, restTemplateProps))));
|
|
50
50
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@antscorp/antsomi-ui",
|
|
3
|
-
"version": "1.3.5-beta.
|
|
3
|
+
"version": "1.3.5-beta.63",
|
|
4
4
|
"description": "An enterprise-class UI design language and React UI library.",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"dist/*",
|
|
@@ -59,7 +59,6 @@
|
|
|
59
59
|
"not op_mini all"
|
|
60
60
|
],
|
|
61
61
|
"dependencies": {
|
|
62
|
-
"@antscorp/antsomi-ui": "file:.yalc/@antscorp/antsomi-ui",
|
|
63
62
|
"@antscorp/icons": "0.27.6",
|
|
64
63
|
"@antscorp/image-editor": "1.0.2",
|
|
65
64
|
"@emotion/react": "^11.11.1",
|