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

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 +3 -3
  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
@@ -80,7 +80,7 @@ export const useTemplateSave = (options) => {
80
80
  const templateItems = useMemo(() => {
81
81
  if (infiniteObjectTemplate) {
82
82
  const { pages } = infiniteObjectTemplate;
83
- return pages.flatMap(({ entities }) => entities.flatMap(entity => (Object.assign(Object.assign({}, entity.toJson()), { label: entity.name }))));
83
+ return pages.flatMap(({ entities }) => entities.flatMap(entity => (Object.assign(Object.assign({}, entity.toJson()), { label: entity.name, description: entity.description || '' }))));
84
84
  }
85
85
  return [];
86
86
  }, [infiniteObjectTemplate]);
@@ -98,7 +98,7 @@ export const useTemplateSave = (options) => {
98
98
  setValue(valueArg || {});
99
99
  };
100
100
  /* Validate Template Name */
101
- const validateName = (rule, value) => __awaiter(void 0, void 0, void 0, function* () {
101
+ const validateName = useCallback((rule, value) => __awaiter(void 0, void 0, void 0, function* () {
102
102
  if (!value)
103
103
  return;
104
104
  const response = yield validateTemplateName({
@@ -113,7 +113,7 @@ export const useTemplateSave = (options) => {
113
113
  return Promise.reject(new Error('Template name already exists'));
114
114
  }
115
115
  return Promise.resolve();
116
- });
116
+ }), [objectType, publicLevel, service, validateTemplateName]);
117
117
  return {
118
118
  // MapKeys
119
119
  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.157",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",