@antscorp/antsomi-ui 1.3.5-beta.142 → 1.3.5-beta.143

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 (8) hide show
  1. package/es/components/molecules/DrawerDetail/styled.js +1 -1
  2. package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js +17 -3
  3. package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js +1 -1
  4. package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.js +11 -0
  5. package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.js +2 -3
  6. package/es/components/molecules/TemplateSaveAs/styled.js +6 -1
  7. package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/styled.js +2 -3
  8. package/package.json +1 -1
package/es/components/molecules/DrawerDetail/styled.js CHANGED
@@ -69,7 +69,7 @@ export const CloseBtn = styled.div `
69
69
  export const MenuItem = styled.div `
70
70
  height: 36px;
71
71
  width: 36px;
72
- border-radius: 3px;
72
+ border-radius: 10px;
73
73
  background-color: transparent;
74
74
  display: flex;
75
75
  align-items: center;
package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js CHANGED
@@ -25,9 +25,9 @@ export const TemplateSaveAs = props => {
25
25
  const { className, shareAccess, saveOptions, imageReview, isLoadingCategories, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions, form, value, onChange, onEvent, } = props;
26
26
  const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
27
27
  const { label: imageReviewLabel } = imageReview, restImageReviewProps = __rest(imageReview, ["label"]);
28
- const { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, selectPlaceholder = 'Please select an item', placeholder = 'Enter your media template name', onSearch, onNamePopupScroll, onScrollToBottom, } = templateNamesOptions || {};
28
+ const { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, selectPlaceholder = 'Please select an item', placeholder = 'Enter your media template name', validateName, onSearch, onNamePopupScroll, onScrollToBottom, } = templateNamesOptions || {};
29
29
  const { label: descriptionLabel, placeholder: descriptionPlaceholder } = descriptionOptions || {};
30
- const { saveNewText = 'Save as a new media Template', saveExistText = 'Save as an existing media Template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
30
+ const { saveNewText = 'Save as a new media template', saveExistText = 'Save as an existing media template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
31
31
  const { saveOption = saveNewValue, templateName = saveOption === saveNewValue || !saveOption
32
32
  ? { id: undefined, label: defaultNewTemplateName }
33
33
  : templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0], description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = {}, accessInfo, } = value || {};
@@ -90,7 +90,21 @@ export const TemplateSaveAs = props => {
90
90
  React.createElement(Text, { className: "field-title field-title--start" },
91
91
  templateLabel || 'Template name',
92
92
  React.createElement("span", null, "\u2009*")),
93
- saveOption === saveNewValue ? (React.createElement(Form.Item, { label: "Template name", name: "template-name", validateTrigger: "onChange", noStyle: true, rules: [{ required: true, message: "This field can't be empty" }] },
93
+ saveOption === saveNewValue ? (React.createElement(Form.Item
94
+ // label="Template name"
95
+ , {
96
+ // label="Template name"
97
+ name: "template-name", validateTrigger: "onChange",
98
+ // noStyle
99
+ rules: [
100
+ {
101
+ required: true,
102
+ message: "This field can't be empty",
103
+ },
104
+ {
105
+ validator: validateName,
106
+ },
107
+ ] },
94
108
  React.createElement(Input, { className: "field-input", value: templateNameNew, placeholder: placeholder, debounce: 100, maxLength: 255, onAfterChange: value => {
95
109
  handleChangeValue({ templateName: { id: undefined, label: value } });
96
110
  setTemplateNameNew(value);
package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js CHANGED
@@ -60,7 +60,7 @@ export const ImageSlider = props => {
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,
63
- hideThumbnailsList || isLoading || thumbnails.length <= 1 ? null : (React.createElement(React.Fragment, null,
63
+ hideThumbnailsList || isLoading || thumbnails.length <= 2 ? null : (React.createElement(React.Fragment, null,
64
64
  (!infinity && selectedThumbnail !== 0) || infinity ? (React.createElement(ButtonSlider, { direction: "left", type: "slider", onClick: handlePrevThumbnail })) : null,
65
65
  (!infinity && selectedThumbnail !== thumbnails.length - 1) || infinity ? (React.createElement(ButtonSlider, { direction: "right", type: "slider", onClick: handleNextThumbnail })) : null))));
66
66
  };
package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.js CHANGED
@@ -68,6 +68,10 @@ export const ImageSliderStyled = styled(Flex) `
68
68
  }
69
69
  }
70
70
 
71
+ .slider-button {
72
+ display: none;
73
+ }
74
+
71
75
  .thumbnail-preview-container:has(.antsomi-spin),
72
76
  .thumbnail-slider-container:has(.antsomi-spin) {
73
77
  box-shadow: rgba(159, 180, 180, 0.2) 0px 2px 8px;
@@ -80,6 +84,13 @@ export const ImageSliderStyled = styled(Flex) `
80
84
  background-color: #fcfcfc;
81
85
  }
82
86
 
87
+ &:has(.thumbnail-slider-container:hover),
88
+ &:has(.slider-button:hover) {
89
+ .slider-button {
90
+ display: flex;
91
+ }
92
+ }
93
+
83
94
  .thumbnail-preview-container {
84
95
  width: ${({ $imageWidth }) => `${$imageWidth}px`};
85
96
  overflow-x: scroll;
package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.js CHANGED
@@ -97,9 +97,8 @@ export const useTemplateSave = (options) => {
97
97
  };
98
98
  /* Validate Template Name */
99
99
  const validateName = (rule, value) => __awaiter(void 0, void 0, void 0, function* () {
100
- if (!value) {
101
- return Promise.reject(new Error('This field is required'));
102
- }
100
+ if (!value)
101
+ return;
103
102
  const response = yield validateTemplateName({
104
103
  auth: service,
105
104
  params: {
package/es/components/molecules/TemplateSaveAs/styled.js CHANGED
@@ -26,7 +26,8 @@ export const TemplateSaveAsStyled = styled(Flex) `
26
26
 
27
27
  .share-access-container {
28
28
  flex: 1 1 40%;
29
- padding-left: 28px;
29
+ padding-left: 20px;
30
+ margin-left: 5px;
30
31
  max-height: 60vh;
31
32
  overflow-y: auto;
32
33
  border-left: 1px solid #e5e5e5;
@@ -60,6 +61,10 @@ export const TemplateSaveAsStyled = styled(Flex) `
60
61
  width: 330px;
61
62
  }
62
63
 
64
+ .field-input.antsomi-select {
65
+ margin-bottom: 24px;
66
+ }
67
+
63
68
  .category-container {
64
69
  flex: 1;
65
70
  display: grid;
package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/styled.js CHANGED
@@ -11,7 +11,6 @@ export const SimilarTemplateWrapper = styled(Flex) `
11
11
  }
12
12
  `;
13
13
  export const TemplateListWrapper = styled.div `
14
- display: grid;
15
- grid-template-columns: ${({ templateQuantity }) => `repeat(${templateQuantity}, minmax(0, 1fr))`};
16
- gap: 30px;
14
+ display: flex;
15
+ justify-content: space-between;
17
16
  `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.5-beta.142",
3
+ "version": "1.3.5-beta.143",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",