@antscorp/antsomi-ui 1.3.5-beta.73 → 1.3.5-beta.75
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/atoms/InputDynamic/EditCaretPositioning.js +15 -0
- package/es/components/atoms/InputDynamic/InputDynamic.js +11 -9
- package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js +16 -13
- package/es/components/template/TemplateListing/hooks/useTemplateListing.js +25 -15
- package/es/test.js +12 -8
- package/package.json +1 -1
|
@@ -59,6 +59,21 @@ if (window.getSelection && document.createRange) {
|
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
let sel = window.getSelection();
|
|
62
|
+
// NOTE: add new text node after span contain shortlink content
|
|
63
|
+
if (range.endContainer) {
|
|
64
|
+
const { parentNode } = range.endContainer;
|
|
65
|
+
if (parentNode && parentNode.classList && parentNode.classList.contains('detect-url')) {
|
|
66
|
+
const textNode = document.createTextNode('\u00A0'); // Create a text node with a non-breaking space
|
|
67
|
+
if (parentNode.nextSibling) {
|
|
68
|
+
parentNode.parentNode.insertBefore(textNode, parentNode.nextSibling);
|
|
69
|
+
}
|
|
70
|
+
else {
|
|
71
|
+
parentNode.parentNode.appendChild(textNode);
|
|
72
|
+
}
|
|
73
|
+
range.setStart(textNode, textNode.length);
|
|
74
|
+
range.collapse(true);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
62
77
|
sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
|
|
63
78
|
sel === null || sel === void 0 ? void 0 : sel.addRange(range);
|
|
64
79
|
};
|
|
@@ -144,15 +144,17 @@ export const InputDynamic = (props) => {
|
|
|
144
144
|
if (innerHTML) {
|
|
145
145
|
// remove span url và focus vào vị trí remove để add tag shortlink vào vị trí này.
|
|
146
146
|
const index = Array.from((_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.childNodes).findIndex((element) => element.id === data.id);
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
147
|
+
if (index !== -1) {
|
|
148
|
+
const range = document.createRange(); // Tạo một đối tượng Range
|
|
149
|
+
const sel = window.getSelection(); // Lấy đối tượng Selection hiện tại
|
|
150
|
+
range.setStart((_b = personalizationInputRef.current) === null || _b === void 0 ? void 0 : _b.childNodes[index], 0); // Đặt điểm bắt đầu của Range
|
|
151
|
+
range.collapse(true); // Thu gọn Range để tập trung vào điểm bắt đầu
|
|
152
|
+
sel === null || sel === void 0 ? void 0 : sel.removeAllRanges(); // Xóa tất cả các Range hiện có
|
|
153
|
+
sel === null || sel === void 0 ? void 0 : sel.addRange(range); // Thêm Range mới vào Selection
|
|
154
|
+
caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
|
|
155
|
+
const newDataUpdate = innerHTML.replace(data.outerHTML, '');
|
|
156
|
+
personalizationInputRef.current.innerHTML = newDataUpdate;
|
|
157
|
+
}
|
|
156
158
|
}
|
|
157
159
|
break;
|
|
158
160
|
}
|
|
@@ -147,7 +147,7 @@ export const TemplateSaveAs = props => {
|
|
|
147
147
|
React.createElement("span", null, "*")),
|
|
148
148
|
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 })), categories === null || categories === void 0 ? void 0 :
|
|
149
149
|
categories.map(parentCategory => {
|
|
150
|
-
var _a
|
|
150
|
+
var _a;
|
|
151
151
|
const selectedChildren = categoriesValue[parentCategory.key];
|
|
152
152
|
const remainChildren = parentCategory.children.filter(item => !(selectedChildren === null || selectedChildren === void 0 ? void 0 : selectedChildren.includes(item.key)));
|
|
153
153
|
// NOTE: filter to remove device and template categories
|
|
@@ -157,16 +157,19 @@ export const TemplateSaveAs = props => {
|
|
|
157
157
|
React.createElement(Text, { className: "field-title" }, parentCategory.label),
|
|
158
158
|
React.createElement(Flex, { wrap: "wrap", gap: 10, className: "category-container" },
|
|
159
159
|
/* selectedCategory */
|
|
160
|
-
|
|
161
|
-
.
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
160
|
+
selectedChildren === null || selectedChildren === void 0 ? void 0 :
|
|
161
|
+
selectedChildren.map(selectedKey => {
|
|
162
|
+
var _a;
|
|
163
|
+
const selectedLabel = (_a = parentCategory.children.find(item => item.key === selectedKey)) === null || _a === void 0 ? void 0 : _a.label;
|
|
164
|
+
return (React.createElement(Flex, { key: selectedKey, className: "selected-category", justify: "space-between", align: "center" },
|
|
165
|
+
React.createElement(Tooltip, { title: selectedLabel },
|
|
166
|
+
React.createElement(Text, { ellipsis: true, style: { textOverflow: 'ellipsis' } }, selectedLabel)),
|
|
167
|
+
' ',
|
|
168
|
+
React.createElement("span", { className: "remove-btn", onClick: () => handleRemoveCategory({
|
|
169
|
+
parent: parentCategory.key,
|
|
170
|
+
item: selectedKey,
|
|
171
|
+
}) }, "\u00D7")));
|
|
172
|
+
}),
|
|
170
173
|
React.createElement(Dropdown, { menu: {
|
|
171
174
|
items: remainChildren,
|
|
172
175
|
onClick: ({ key }) => {
|
|
@@ -176,8 +179,8 @@ export const TemplateSaveAs = props => {
|
|
|
176
179
|
});
|
|
177
180
|
},
|
|
178
181
|
}, getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'] }, typeof parentCategory.label === 'string' ? (React.createElement(Button, null,
|
|
179
|
-
"+ Add ", (
|
|
180
|
-
|
|
182
|
+
"+ Add ", (_a = parentCategory.label) === null || _a === void 0 ? void 0 :
|
|
183
|
+
_a.toLowerCase())) : (parentCategory.label)))));
|
|
181
184
|
})),
|
|
182
185
|
isShowShareAccess ? (React.createElement("div", { className: "share-access-container" },
|
|
183
186
|
React.createElement(ShareAccess, Object.assign({ accessInfo: accessInfo, onChange: value => handleChangeValue({ accessInfo: value }) }, shareAccessProps)))) : null))));
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { useCallback, useMemo, useState } from 'react';
|
|
3
3
|
import { App } from 'antd';
|
|
4
4
|
import { isEmpty } from 'lodash';
|
|
5
|
-
import { useGetTemplateCategoryList, useGetObjectTemplateList, useBulkUpdateTemplate,
|
|
5
|
+
import { useGetTemplateCategoryList, useGetObjectTemplateList, useBulkUpdateTemplate, } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
|
|
6
6
|
// Locales
|
|
7
7
|
import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
|
|
8
8
|
// Hooks
|
|
@@ -96,22 +96,32 @@ export const useTemplateListing = (options) => {
|
|
|
96
96
|
},
|
|
97
97
|
},
|
|
98
98
|
});
|
|
99
|
-
const {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
}
|
|
99
|
+
// const {
|
|
100
|
+
// data: templateDetail,
|
|
101
|
+
// isLoading: isLoadingTemplateDetail = false,
|
|
102
|
+
// refetch: refetchTemplateDetail,
|
|
103
|
+
// } = useGetObjectTemplateDetail({
|
|
104
|
+
// args: {
|
|
105
|
+
// params: {
|
|
106
|
+
// template_id: selectedTemplateId || '',
|
|
107
|
+
// object_type: objectType,
|
|
108
|
+
// public_level: publicLevel,
|
|
109
|
+
// },
|
|
110
|
+
// auth: serviceAuth,
|
|
111
|
+
// },
|
|
112
|
+
// options: {
|
|
113
|
+
// enabled: !!selectedTemplateId,
|
|
114
|
+
// },
|
|
115
|
+
// });
|
|
112
116
|
// Variables
|
|
113
117
|
const isLoadingTemplateList = isFetching || isFetchingNextPage;
|
|
114
118
|
// Memo
|
|
119
|
+
const templateDetail = useDeepCompareMemo(() => {
|
|
120
|
+
if (infiniteObjectTemplate && selectedTemplateId) {
|
|
121
|
+
return infiniteObjectTemplate.pages[0].entities.find(template => template.id === selectedTemplateId);
|
|
122
|
+
}
|
|
123
|
+
return undefined;
|
|
124
|
+
}, [infiniteObjectTemplate, selectedTemplateId]);
|
|
115
125
|
const categoryItems = useDeepCompareMemo(() => {
|
|
116
126
|
const recursiveCategory = (categories = [], parentCategoryCode = '') => categories.map(category => {
|
|
117
127
|
const { categoryCode, categoryId, categoryName, children, total } = category;
|
|
@@ -216,7 +226,7 @@ export const useTemplateListing = (options) => {
|
|
|
216
226
|
previewTemplateCategories,
|
|
217
227
|
isLoadingCategoryList,
|
|
218
228
|
isLoadingTemplateList,
|
|
219
|
-
isLoadingTemplateDetail:
|
|
229
|
+
isLoadingTemplateDetail: false,
|
|
220
230
|
// Functions
|
|
221
231
|
refetchCategoryList,
|
|
222
232
|
refetchTemplateList,
|
package/es/test.js
CHANGED
|
@@ -194,16 +194,20 @@ export const App = () => {
|
|
|
194
194
|
// borderRadius: '10px',
|
|
195
195
|
// }}
|
|
196
196
|
// >
|
|
197
|
-
// <
|
|
198
|
-
// errors={[]}
|
|
199
|
-
// onChange={dataOut => setValueShortlink(dataOut)}
|
|
200
|
-
// onError={() => {}}
|
|
201
|
-
// isViewMode={false}
|
|
202
|
-
// canMultipleLine={false}
|
|
203
|
-
// value={valueShortlink}
|
|
204
|
-
// />
|
|
197
|
+
// <SlideBar {...stateSlideBar} callback={callbackSlideBar} />
|
|
205
198
|
// </div>
|
|
206
199
|
// );
|
|
200
|
+
// --------------------------- Test SlideBar end -------------------------------------------
|
|
201
|
+
// ---------------------------- Test Input Dynamic start ------------------------------
|
|
202
|
+
return (React.createElement("div", { style: {
|
|
203
|
+
width: 500,
|
|
204
|
+
height: 500,
|
|
205
|
+
border: '1px solid black',
|
|
206
|
+
margin: '0 auto',
|
|
207
|
+
padding: 12,
|
|
208
|
+
borderRadius: '10px',
|
|
209
|
+
} },
|
|
210
|
+
React.createElement(InputDynamic, { errors: [], onChange: dataOut => setValueShortlink(dataOut), onError: () => { }, isRealTime: true, isViewMode: false, canMultipleLine: false, value: valueShortlink })));
|
|
207
211
|
// ---------------------------- Test Input Dynamic End ------------------------------
|
|
208
212
|
// ---------------------------- Test Helps Start ------------------------------
|
|
209
213
|
// return (
|