@antscorp/antsomi-ui 1.3.5-beta.101 → 1.3.5-beta.102
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.
- package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.d.ts +2 -0
- package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js +64 -43
- package/es/components/molecules/TemplateSaveAs/TemplateSaveAsModal.js +1 -1
- package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.d.ts +5 -0
- package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.js +7 -0
- package/es/components/molecules/TemplateSaveAs/styled.js +8 -4
- package/package.json +1 -1
|
@@ -44,6 +44,7 @@ export interface TemplateSaveAsProps {
|
|
|
44
44
|
readonly saveNewValue?: string;
|
|
45
45
|
readonly saveExistValue?: string;
|
|
46
46
|
};
|
|
47
|
+
isLoadingCategories?: boolean;
|
|
47
48
|
categories?: Array<{
|
|
48
49
|
label: string | React.ReactNode;
|
|
49
50
|
key: string | number;
|
|
@@ -66,6 +67,7 @@ export interface TemplateSaveAsProps {
|
|
|
66
67
|
defaultNewTemplateName?: string;
|
|
67
68
|
onSearch?: (searchValue: string) => void;
|
|
68
69
|
onNamePopupScroll?: SelectProps['onPopupScroll'];
|
|
70
|
+
onScrollToBottom?: () => void;
|
|
69
71
|
};
|
|
70
72
|
descriptionOptions?: {
|
|
71
73
|
label?: string;
|
|
@@ -22,15 +22,15 @@ 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: templateNameList, templateNamesOptions, descriptionOptions, form, value, onChange, onEvent,
|
|
26
|
-
// onNamePopupScroll,
|
|
27
|
-
} = props;
|
|
25
|
+
const { className, shareAccess, saveOptions, imageReview, isLoadingCategories, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions, form, value, onChange, onEvent, } = props;
|
|
28
26
|
const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
|
|
29
27
|
const { thumbnails, isLoading: isLoadingThumbnail, skeleton, previewNavigation, slidesPerView, hideThumbnailsList, hideDefaultButton, imageHeight, imageWidth, label: imageReviewLabel, } = imageReview;
|
|
30
|
-
const { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, onSearch, onNamePopupScroll, } = templateNamesOptions || {};
|
|
28
|
+
const { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, onSearch, onNamePopupScroll, onScrollToBottom, } = templateNamesOptions || {};
|
|
31
29
|
const { label: descriptionLabel, placeholder: descriptionPlaceholder } = descriptionOptions || {};
|
|
32
30
|
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
|
|
31
|
+
const { saveOption = saveNewValue, templateName = saveOption === saveNewValue || !saveOption
|
|
32
|
+
? { id: undefined, label: defaultNewTemplateName }
|
|
33
|
+
: templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0], description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = {}, accessInfo, } = value || {};
|
|
34
34
|
const [searchValue, setSearchValue] = useState('');
|
|
35
35
|
const searchValueDebounce = useDebounce(searchValue, 1000);
|
|
36
36
|
useEffect(() => {
|
|
@@ -101,7 +101,16 @@ export const TemplateSaveAs = props => {
|
|
|
101
101
|
React.createElement(Input, { className: "field-input", value: templateNameNew, debounce: 100, onAfterChange: value => {
|
|
102
102
|
handleChangeValue({ templateName: { id: undefined, label: value } });
|
|
103
103
|
setTemplateNameNew(value);
|
|
104
|
-
}, "aria-valuetext": templateNameNew, required: true }))) : (React.createElement(Select, { className: "field-input", showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll:
|
|
104
|
+
}, "aria-valuetext": templateNameNew, required: true }))) : (React.createElement(Select, { className: "field-input", showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: e => {
|
|
105
|
+
if (onNamePopupScroll)
|
|
106
|
+
onNamePopupScroll(e);
|
|
107
|
+
if (onScrollToBottom) {
|
|
108
|
+
const { scrollHeight, scrollTop, clientHeight } = e.currentTarget;
|
|
109
|
+
if (scrollHeight === clientHeight + scrollTop) {
|
|
110
|
+
onScrollToBottom();
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}, filterOption: false, dropdownRender: menu => (React.createElement(React.Fragment, null,
|
|
105
114
|
isLoading && templateNameList.length === 0 ? null : menu,
|
|
106
115
|
isLoading ? (React.createElement(Space, { style: {
|
|
107
116
|
padding: '4px 0',
|
|
@@ -139,43 +148,55 @@ export const TemplateSaveAs = props => {
|
|
|
139
148
|
imageReviewLabel || 'Thumbnail template',
|
|
140
149
|
" ",
|
|
141
150
|
React.createElement("span", null, "*")),
|
|
142
|
-
React.createElement(ImageSlider, { thumbnails: thumbnails, isLoading: isLoadingThumbnail, skeleton: skeleton, previewNavigation: previewNavigation, slidesPerView: slidesPerView, defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }), hideThumbnailsList: hideThumbnailsList, hideDefaultButton: hideDefaultButton, imageHeight: imageHeight, imageWidth: imageWidth })),
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
React.createElement(
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
151
|
+
React.createElement(ImageSlider, { thumbnails: thumbnails, isLoading: isLoadingThumbnail, skeleton: skeleton, previewNavigation: previewNavigation, slidesPerView: slidesPerView, defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }), hideThumbnailsList: hideThumbnailsList, hideDefaultButton: hideDefaultButton, imageHeight: imageHeight, imageWidth: imageWidth })),
|
|
152
|
+
isLoadingCategories ? (React.createElement(Flex, { className: "field-container" },
|
|
153
|
+
React.createElement(Text, { className: "field-title" }, "Categories"),
|
|
154
|
+
React.createElement(Space, { style: {
|
|
155
|
+
padding: '4px 0',
|
|
156
|
+
width: '100%',
|
|
157
|
+
justifyContent: 'center',
|
|
158
|
+
alignItems: 'center',
|
|
159
|
+
} },
|
|
160
|
+
React.createElement(Spin, { size: "small" })))) : null,
|
|
161
|
+
!isLoadingCategories && categories
|
|
162
|
+
? categories.map(parentCategory => {
|
|
163
|
+
var _a;
|
|
164
|
+
const selectedChildren = categoriesValue[parentCategory.key];
|
|
165
|
+
const remainChildren = parentCategory.children.filter(item => !(selectedChildren === null || selectedChildren === void 0 ? void 0 : selectedChildren.includes(item.key)));
|
|
166
|
+
// NOTE: filter to remove device and template categories
|
|
167
|
+
if ((omitCategories === null || omitCategories === void 0 ? void 0 : omitCategories.length) &&
|
|
168
|
+
omitCategories.includes(parentCategory.key.toString()))
|
|
169
|
+
return null;
|
|
170
|
+
return (React.createElement(Flex, { key: parentCategory.key, className: "field-container" },
|
|
171
|
+
React.createElement(Text, { className: "field-title" }, parentCategory.label),
|
|
172
|
+
React.createElement(Flex, { wrap: "wrap", gap: 10, className: "category-container" },
|
|
173
|
+
/* selectedCategory */
|
|
174
|
+
selectedChildren === null || selectedChildren === void 0 ? void 0 :
|
|
175
|
+
selectedChildren.map(selectedKey => {
|
|
176
|
+
var _a;
|
|
177
|
+
const selectedLabel = (_a = parentCategory.children.find(item => item.key === selectedKey)) === null || _a === void 0 ? void 0 : _a.label;
|
|
178
|
+
return (React.createElement(Flex, { key: selectedKey, className: "selected-category", justify: "space-between", align: "center" },
|
|
179
|
+
React.createElement(Tooltip, { title: selectedLabel },
|
|
180
|
+
React.createElement(Text, { ellipsis: true, style: { textOverflow: 'ellipsis' } }, selectedLabel)),
|
|
181
|
+
' ',
|
|
182
|
+
React.createElement("span", { className: "remove-btn", onClick: () => handleRemoveCategory({
|
|
183
|
+
parent: parentCategory.key,
|
|
184
|
+
item: selectedKey,
|
|
185
|
+
}) }, "\u00D7")));
|
|
186
|
+
}),
|
|
187
|
+
React.createElement(Dropdown, { menu: {
|
|
188
|
+
items: remainChildren,
|
|
189
|
+
onClick: ({ key }) => {
|
|
190
|
+
handleAddCategory({
|
|
191
|
+
parentKey: parentCategory.key,
|
|
192
|
+
item: key,
|
|
193
|
+
});
|
|
194
|
+
},
|
|
195
|
+
}, getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'] }, typeof parentCategory.label === 'string' ? (React.createElement(Button, null,
|
|
196
|
+
"+ Add ", (_a = parentCategory.label) === null || _a === void 0 ? void 0 :
|
|
197
|
+
_a.toLowerCase())) : (parentCategory.label)))));
|
|
198
|
+
})
|
|
199
|
+
: null),
|
|
179
200
|
isShowShareAccess ? (React.createElement("div", { className: "share-access-container" },
|
|
180
201
|
React.createElement(ShareAccess, Object.assign({ accessInfo: accessInfo, onChange: value => handleChangeValue({ accessInfo: value }) }, shareAccessProps)))) : null))));
|
|
181
202
|
};
|
|
@@ -45,6 +45,6 @@ export const TemplateSaveAsModal = props => {
|
|
|
45
45
|
onCancel(event);
|
|
46
46
|
}
|
|
47
47
|
};
|
|
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),
|
|
48
|
+
return (React.createElement(ModalV2, Object.assign({ open: open, onCancel: handleCancel, onOk: handleOk, okText: okText || 'Save', width: 1177, title: title || 'Save as my template', styles: { body: { borderTop: '1px solid #e5e5e5', paddingTop: 0 } } }, restProps),
|
|
49
49
|
React.createElement(TemplateSaveAs, Object.assign({ onChange: onChange ? (newValue, errors) => handleOnChange(newValue, errors) : undefined, value: templateValue || internalValue }, restTemplateProps))));
|
|
50
50
|
};
|
|
@@ -55,6 +55,11 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
|
|
|
55
55
|
isLoadingTemplateList: boolean;
|
|
56
56
|
searchName: string;
|
|
57
57
|
onSearchName: import("react").Dispatch<import("react").SetStateAction<string>>;
|
|
58
|
+
searchNameProps: {
|
|
59
|
+
onSearch: import("react").Dispatch<import("react").SetStateAction<string>>;
|
|
60
|
+
onScrollToBottom: () => void;
|
|
61
|
+
isLoading: boolean;
|
|
62
|
+
};
|
|
58
63
|
form: import("antd").FormInstance<any>;
|
|
59
64
|
errors: any[] | undefined;
|
|
60
65
|
refetchCategoryList: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<TemplateCategory[], any>>;
|
|
@@ -106,6 +106,13 @@ export const useTemplateSave = (options) => {
|
|
|
106
106
|
// Handle Search template name
|
|
107
107
|
searchName,
|
|
108
108
|
onSearchName: setSearchName,
|
|
109
|
+
// implement props for search name on scroll to bottom
|
|
110
|
+
// usage: templateNamesOptions={{...searchNameProps}}
|
|
111
|
+
searchNameProps: {
|
|
112
|
+
onSearch: setSearchName,
|
|
113
|
+
onScrollToBottom: onLoadMore,
|
|
114
|
+
isLoading: isLoadingTemplateList,
|
|
115
|
+
},
|
|
109
116
|
// Form handler
|
|
110
117
|
form,
|
|
111
118
|
errors,
|
|
@@ -5,7 +5,6 @@ import styled from 'styled-components';
|
|
|
5
5
|
import { Flex } from '@antscorp/antsomi-ui/es/components';
|
|
6
6
|
import { THEME } from '@antscorp/antsomi-ui/es/constants';
|
|
7
7
|
export const TemplateSaveAsStyled = styled(Flex) `
|
|
8
|
-
padding: 10px;
|
|
9
8
|
/* max-width: 1177px; */
|
|
10
9
|
|
|
11
10
|
.save-options-container {
|
|
@@ -16,14 +15,20 @@ export const TemplateSaveAsStyled = styled(Flex) `
|
|
|
16
15
|
|
|
17
16
|
.template-container {
|
|
18
17
|
width: 698px;
|
|
18
|
+
flex-grow: 1;
|
|
19
19
|
/* max-height: 567px; */
|
|
20
|
-
max-height:
|
|
20
|
+
max-height: 60vh;
|
|
21
21
|
padding-right: 28px;
|
|
22
22
|
overflow-y: auto;
|
|
23
23
|
}
|
|
24
|
+
|
|
24
25
|
.share-access-container {
|
|
25
|
-
flex: 1;
|
|
26
|
+
/* flex: 1; */
|
|
27
|
+
width: 270px;
|
|
28
|
+
flex-shrink: 0;
|
|
26
29
|
padding: 0 28px;
|
|
30
|
+
max-height: 60vh;
|
|
31
|
+
overflow-y: auto;
|
|
27
32
|
border-left: 1px solid #e5e5e5;
|
|
28
33
|
}
|
|
29
34
|
|
|
@@ -34,7 +39,6 @@ export const TemplateSaveAsStyled = styled(Flex) `
|
|
|
34
39
|
.field-title {
|
|
35
40
|
font-size: 12px;
|
|
36
41
|
width: 150px;
|
|
37
|
-
/* background-color: violet; */
|
|
38
42
|
span {
|
|
39
43
|
color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red6};
|
|
40
44
|
}
|