@antscorp/antsomi-ui 1.3.5-beta.156 → 1.3.5-beta.158

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.
Files changed (7) hide show
  1. package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.d.ts +1 -0
  2. package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js +77 -75
  3. package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js +1 -1
  4. package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.js +1 -0
  5. package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.js +29 -7
  6. package/es/components/molecules/TemplateSaveAs/styled.js +19 -0
  7. package/package.json +1 -1
package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.d.ts CHANGED
@@ -56,6 +56,7 @@ export interface TemplateSaveAsProps {
56
56
  templateNames: Array<{
57
57
  label: string;
58
58
  id: string | number;
59
+ description?: string;
59
60
  }>;
60
61
  templateNamesOptions?: {
61
62
  label?: string;
package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js CHANGED
@@ -98,7 +98,7 @@ export const TemplateSaveAs = props => {
98
98
  form.setFieldValue('categories', newCategory);
99
99
  handleChangeValue({ categories: newCategory });
100
100
  };
101
- return (React.createElement(Form, { form: form, initialValues: initFormValue },
101
+ return (React.createElement(Form, { form: form, initialValues: initFormValue, colon: false, labelAlign: "left" },
102
102
  React.createElement(TemplateSaveAsStyled, { className: className || '', vertical: true },
103
103
  React.createElement(Flex, { className: "save-options-container" },
104
104
  React.createElement(Form.Item, { name: "saveOption", noStyle: true },
@@ -106,80 +106,82 @@ export const TemplateSaveAs = props => {
106
106
  React.createElement(Radio, { value: saveNewValue }, saveNewText),
107
107
  React.createElement(Radio, { value: saveExistValue }, saveExistText)))),
108
108
  React.createElement(Flex, null,
109
- React.createElement(Flex, { vertical: true, gap: 20, className: "template-container" },
110
- React.createElement(Flex, { className: "field-container" },
111
- React.createElement(Text, { className: "field-title field-title--start" },
112
- templateLabel || 'Template name',
113
- React.createElement("span", null, "\u2009*")),
114
- React.createElement(Form.Item, { noStyle: true, shouldUpdate: (prevValues, currentValues) => prevValues.saveOption !== currentValues.saveOption }, ({ getFieldValue, isFieldValidating }) => getFieldValue('saveOption') === saveNewValue ? (React.createElement(Form.Item, { name: "templateName", validateDebounce: 1000, validateTrigger: "onChange", hasFeedback: isFieldValidating('templateName'), validateStatus: "validating", rules: [
115
- {
116
- required: true,
117
- message: "This field can't be empty",
118
- },
119
- {
120
- validator: validateName,
121
- },
122
- ] },
123
- React.createElement(Input, { className: "field-input", placeholder: placeholder, maxLength: 255, onBlur: e => handleChangeValue({
124
- templateName: { id: undefined, label: e.target.value },
125
- }) }))) : (React.createElement(Form.Item, { name: "templateNameSelect", noStyle: true },
126
- React.createElement(Select, { className: "field-input", placeholder: selectPlaceholder, showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: e => {
127
- if (onNamePopupScroll)
128
- onNamePopupScroll(e);
129
- if (onScrollToBottom) {
130
- const { scrollHeight, scrollTop, clientHeight } = e.currentTarget;
131
- if (scrollHeight === clientHeight + scrollTop) {
132
- onScrollToBottom();
133
- }
109
+ React.createElement(Flex, { vertical /* gap={20} */: true, className: "template-container" },
110
+ React.createElement(Form.Item, { label: templateLabel || 'Template name', required: true,
111
+ // noStyle -> if enable -> make label is hidden (antd 15.12.6 bug)
112
+ style: { marginBottom: 0 }, shouldUpdate: (prevValues, currentValues) => prevValues.saveOption !== currentValues.saveOption }, ({ getFieldValue, isFieldValidating }) => getFieldValue('saveOption') === saveNewValue ? (React.createElement(Form.Item, { name: "templateName",
113
+ // noStyle -> if enable -> validateDebounce not work correct (antd 15.12.6 bug)
114
+ validateDebounce: 1000, validateTrigger: "onChange", hasFeedback: isFieldValidating('templateName'), validateStatus: "validating", rules: [
115
+ {
116
+ required: true,
117
+ message: "This field can't be empty",
118
+ },
119
+ {
120
+ validator: validateName,
121
+ },
122
+ ] },
123
+ React.createElement(Input
124
+ // className="field-input"
125
+ , {
126
+ // className="field-input"
127
+ placeholder: placeholder, maxLength: 255, onBlur: e => handleChangeValue({
128
+ templateName: { id: undefined, label: e.target.value },
129
+ }) }))) : (React.createElement(Form.Item, { name: "templateNameSelect" },
130
+ React.createElement(Select
131
+ // className="field-input"
132
+ , {
133
+ // className="field-input"
134
+ placeholder: selectPlaceholder, showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: e => {
135
+ if (onNamePopupScroll)
136
+ onNamePopupScroll(e);
137
+ if (onScrollToBottom) {
138
+ const { scrollHeight, scrollTop, clientHeight } = e.currentTarget;
139
+ if (scrollHeight === clientHeight + scrollTop) {
140
+ onScrollToBottom();
134
141
  }
135
- }, filterOption: false, dropdownRender: menu => (React.createElement(React.Fragment, null,
136
- isLoading && templateNameList.length === 0 ? null : menu,
137
- isLoading ? (React.createElement(Space, { style: {
138
- padding: '4px 0',
139
- width: '100%',
140
- justifyContent: 'center',
141
- alignItems: 'center',
142
- } },
143
- React.createElement(Spin, { size: "small" }))) : null)), options:
144
- // If template exist is not in templateNames list => add to begin of options array
145
- (templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList.length) > 0
146
- ? [
147
- ...(templateNameList.find(item => item.id === getFieldValue('templateNameSelect'))
148
- ? []
149
- : [
150
- {
151
- value: getFieldValue('templateNameSelect'),
152
- label: getFieldValue('templateName'),
153
- },
154
- ]),
155
- ...templateNameList.map(item => ({
156
- value: item.id,
157
- label: item.label,
158
- })),
159
- ]
160
- : [], onChange: value => {
161
- var _a;
162
- return handleChangeValue({
163
- templateName: {
164
- id: value,
165
- label: ((_a = templateNameList.find(item => item.id === value)) === null || _a === void 0 ? void 0 : _a.label) || '',
166
- },
167
- });
168
- } }))))),
169
- React.createElement(Flex, { className: "field-container", style: { marginTop: '-20px' } },
170
- React.createElement(Text, { className: "field-title field-title--middle" }, descriptionLabel || 'Description'),
171
- React.createElement(Form.Item, { name: "description" },
172
- React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', className: "field-input", maxLength: 400, onBlur: e => handleChangeValue({ description: e.target.value }) }))),
173
- React.createElement(Flex, { className: "field-container" },
174
- React.createElement(Text, { className: "field-title" },
175
- imageReviewLabel || 'Thumbnail template',
176
- " ",
177
- React.createElement("span", null, "*")),
178
- React.createElement(Form.Item, { name: "defaultThumbnail", shouldUpdate: true, noStyle: true },
179
- React.createElement(ImageSlider, Object.assign({ defaultThumbnail: form.getFieldValue('defaultThumbnail'), onSelectDefault: value => {
180
- form.setFieldValue('defaultThumbnail', value);
181
- handleChangeValue({ defaultThumbnail: value });
182
- } }, restImageReviewProps)))),
142
+ }
143
+ }, filterOption: false, dropdownRender: menu => (React.createElement(React.Fragment, null,
144
+ isLoading && templateNameList.length === 0 ? null : menu,
145
+ isLoading ? (React.createElement(Space, { style: {
146
+ padding: '4px 0',
147
+ width: '100%',
148
+ justifyContent: 'center',
149
+ alignItems: 'center',
150
+ } },
151
+ React.createElement(Spin, { size: "small" }))) : null)), options:
152
+ // If template exist is not in templateNames list => add to begin of options array
153
+ (templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList.length) > 0
154
+ ? [
155
+ ...(templateNameList.find(item => item.id === getFieldValue('templateNameSelect'))
156
+ ? []
157
+ : [
158
+ {
159
+ value: getFieldValue('templateNameSelect'),
160
+ label: getFieldValue('templateName'),
161
+ },
162
+ ]),
163
+ ...templateNameList.map(item => ({
164
+ value: item.id,
165
+ label: item.label,
166
+ })),
167
+ ]
168
+ : [], onChange: value => {
169
+ const newTemplateSelected = templateNameList.find(item => item.id === value);
170
+ form.setFieldValue('description', newTemplateSelected === null || newTemplateSelected === void 0 ? void 0 : newTemplateSelected.description);
171
+ handleChangeValue({
172
+ templateName: {
173
+ id: value,
174
+ label: (newTemplateSelected === null || newTemplateSelected === void 0 ? void 0 : newTemplateSelected.label) || '',
175
+ },
176
+ });
177
+ } })))),
178
+ React.createElement(Form.Item, { name: "description", label: descriptionLabel || 'Description' },
179
+ React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', maxLength: 400, onBlur: e => handleChangeValue({ description: e.target.value }) })),
180
+ React.createElement(Form.Item, { name: "defaultThumbnail", shouldUpdate: true, required: true, label: imageReviewLabel || 'Thumbnail template' },
181
+ React.createElement(ImageSlider, Object.assign({ defaultThumbnail: form.getFieldValue('defaultThumbnail'), onSelectDefault: value => {
182
+ form.setFieldValue('defaultThumbnail', value);
183
+ handleChangeValue({ defaultThumbnail: value });
184
+ } }, restImageReviewProps))),
183
185
  isLoadingCategories ? (React.createElement(Flex, { className: "field-container" },
184
186
  React.createElement(Text, { className: "field-title" }, "Categories"),
185
187
  React.createElement(Space, { style: {
@@ -205,7 +207,7 @@ export const TemplateSaveAs = props => {
205
207
  // accessInfo={form.getFieldValue('accessInfo')}
206
208
  , Object.assign({
207
209
  // accessInfo={form.getFieldValue('accessInfo')}
208
- accessInfo: accessInfo, excludeUserAccess: ['to_editor', 'to_owner'], generalAccessSettings: {
210
+ placeholder: "Add people", accessInfo: accessInfo, excludeUserAccess: ['to_editor', 'to_owner'], generalAccessSettings: {
209
211
  publicOnlyWith: true,
210
212
  }, onChange: value => handleChangeValue({ accessInfo: value }) }, shareAccessProps)))) : null))));
211
213
  };
package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js CHANGED
@@ -56,7 +56,7 @@ export const ImageSlider = props => {
56
56
  }, [onSelectDefault]);
57
57
  return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
58
58
  React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnails.length <= 1, onClickDefaultButton: handleClickDefault }))))),
59
- hideThumbnailsList || thumbnails.length <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { key: `${url}_${index * 2}`, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail })))))),
59
+ hideThumbnailsList || thumbnails.length <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnails.length < slidesPerView ? 'center' : 'flex-start' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { key: `${url}_${index * 2}`, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail })))))),
60
60
  previewNavigation && !isLoading ? (React.createElement(React.Fragment, null,
61
61
  React.createElement(ButtonSlider, { direction: "left", type: "preview", onClick: handlePrevThumbnail }),
62
62
  React.createElement(ButtonSlider, { direction: "right", type: "preview", onClick: handleNextThumbnail }))) : null,
package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.js CHANGED
@@ -25,6 +25,7 @@ const centerBlock = css `
25
25
  export const ImageSliderStyled = styled(Flex) `
26
26
  /* NOTE: Style for prev and next button in thumbnail slider */
27
27
  position: relative;
28
+ margin-top: 6px;
28
29
 
29
30
  .change-preview-button {
30
31
  ${centerBlock}
package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.js CHANGED
@@ -29,7 +29,7 @@ import { camelCaseToSnakeCase, snakeCaseToCamelCase } from '@antscorp/antsomi-ui
29
29
  */
30
30
  export const useTemplateSave = (options) => {
31
31
  const { service, config, queriesOptions, defaultValue: valueArg } = options;
32
- const { objectType, categoryCodes, publicLevel, limitListPerPage = 10, getListType } = config;
32
+ const { objectType, categoryCodes, publicLevel, limitListPerPage = 10, getListType, channel, } = config;
33
33
  const { categoryList: categoryListOptions, templateList: templateListOptions } = queriesOptions || {};
34
34
  const [searchName, setSearchName] = useState('');
35
35
  const [value, setValue] = useState(valueArg || {});
@@ -49,19 +49,41 @@ export const useTemplateSave = (options) => {
49
49
  params: {
50
50
  objectTypes: [objectType],
51
51
  categoryCodes,
52
+ channel,
52
53
  publicLevel,
53
54
  getListType,
54
55
  },
55
56
  },
56
57
  options: categoryListOptions,
57
58
  });
59
+ // Memo
60
+ const templateListFilter = useDeepCompareMemo(() => {
61
+ const filter = [];
62
+ if (searchName) {
63
+ filter.push({
64
+ TEMPLATE_NAME: { contain: searchName },
65
+ });
66
+ }
67
+ if (channel) {
68
+ filter.push({
69
+ CHANNEL: {
70
+ matches_any: [channel],
71
+ },
72
+ });
73
+ }
74
+ return templateListFilter;
75
+ }, [searchName, channel]);
58
76
  // Queries
59
77
  const { data: infiniteObjectTemplate, isFetchingNextPage, isFetching, hasNextPage, fetchNextPage, refetch: refetchTemplateList, } = useGetObjectTemplateList({
60
78
  args: {
61
79
  auth: service,
62
- params: Object.assign({ get_list_type: getListType, object_type: objectType, public_level: publicLevel, limit: limitListPerPage }, (searchName
63
- ? { filter: JSON.stringify([{ TEMPLATE_NAME: { contain: searchName } }]) }
64
- : {})),
80
+ params: {
81
+ get_list_type: getListType,
82
+ object_type: objectType,
83
+ public_level: publicLevel,
84
+ limit: limitListPerPage,
85
+ filter: JSON.stringify(templateListFilter),
86
+ },
65
87
  },
66
88
  options: templateListOptions,
67
89
  });
@@ -80,7 +102,7 @@ export const useTemplateSave = (options) => {
80
102
  const templateItems = useMemo(() => {
81
103
  if (infiniteObjectTemplate) {
82
104
  const { pages } = infiniteObjectTemplate;
83
- return pages.flatMap(({ entities }) => entities.flatMap(entity => (Object.assign(Object.assign({}, entity.toJson()), { label: entity.name }))));
105
+ return pages.flatMap(({ entities }) => entities.flatMap(entity => (Object.assign(Object.assign({}, entity.toJson()), { label: entity.name, description: entity.description || '' }))));
84
106
  }
85
107
  return [];
86
108
  }, [infiniteObjectTemplate]);
@@ -98,7 +120,7 @@ export const useTemplateSave = (options) => {
98
120
  setValue(valueArg || {});
99
121
  };
100
122
  /* Validate Template Name */
101
- const validateName = (rule, value) => __awaiter(void 0, void 0, void 0, function* () {
123
+ const validateName = useCallback((rule, value) => __awaiter(void 0, void 0, void 0, function* () {
102
124
  if (!value)
103
125
  return;
104
126
  const response = yield validateTemplateName({
@@ -113,7 +135,7 @@ export const useTemplateSave = (options) => {
113
135
  return Promise.reject(new Error('Template name already exists'));
114
136
  }
115
137
  return Promise.resolve();
116
- });
138
+ }), [objectType, publicLevel, service, validateTemplateName]);
117
139
  return {
118
140
  // MapKeys
119
141
  categoryItems,
package/es/components/molecules/TemplateSaveAs/styled.js CHANGED
@@ -20,6 +20,10 @@ export const TemplateSaveAsStyled = styled(Flex) `
20
20
  overflow-y: auto;
21
21
  }
22
22
 
23
+ .categories-container {
24
+ margin-bottom: 20px;
25
+ }
26
+
23
27
  &:not(:has(.share-access-container)) .categories-container {
24
28
  width: 60%;
25
29
  }
@@ -37,10 +41,25 @@ export const TemplateSaveAsStyled = styled(Flex) `
37
41
  }
38
42
  }
39
43
 
44
+ /* .antsomi-form-item .antsomi-form-item-row */
40
45
  .field-container {
41
46
  gap: 10px;
42
47
  }
43
48
 
49
+ /* NOTE: Style for ant form */
50
+ .antsomi-form-item {
51
+ /* margin: 0; */
52
+ }
53
+ .antsomi-form-item-row {
54
+ gap: 10px;
55
+ .antsomi-form-item-label {
56
+ flex: 0 0 150px;
57
+ }
58
+ .antsomi-form-item-control-input {
59
+ width: 330px;
60
+ }
61
+ }
62
+
44
63
  .field-title {
45
64
  font-size: 12px;
46
65
  flex: 0 0 150px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.5-beta.156",
3
+ "version": "1.3.5-beta.158",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",