@antscorp/antsomi-ui 1.3.5-beta.28 → 1.3.5-beta.29

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 (6) hide show
  1. package/es/components/atoms/SlideBar/SlideBar.js +3 -1
  2. package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.d.ts +8 -3
  3. package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js +12 -9
  4. package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.d.ts +1 -0
  5. package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js +9 -9
  6. package/package.json +1 -1
package/es/components/atoms/SlideBar/SlideBar.js CHANGED
@@ -264,7 +264,9 @@ export const SlideBar = props => {
264
264
  fontSize: `${BTN_ADD_SIZE}px`,
265
265
  cursor: disabledAdd ? 'not-allowed' : 'pointer',
266
266
  color: disabledAdd ? (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorTextDisabled : (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary,
267
- }, disabled: disabledAdd, onClick: (e) => {
267
+ },
268
+ // disabled={disabledAdd}
269
+ onClick: (e) => {
268
270
  e.stopPropagation();
269
271
  if (!disabledAdd) {
270
272
  handleAddSlide();
package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.d.ts CHANGED
@@ -25,6 +25,8 @@ export interface ImagePreviewOptions {
25
25
  skeleton?: boolean;
26
26
  previewNavigation?: boolean;
27
27
  slidesPerView?: number;
28
+ hideThumbnailsList?: boolean;
29
+ label?: string;
28
30
  }
29
31
  export interface TemplateSaveAsProps {
30
32
  className?: string;
@@ -38,9 +40,6 @@ export interface TemplateSaveAsProps {
38
40
  saveNewValue?: string;
39
41
  saveExistValue?: string;
40
42
  };
41
- /**
42
- * Default thumbnail - order of default thumbnail in thumbnails array
43
- */
44
43
  categories?: categoriesProps;
45
44
  /**
46
45
  * Hide categories with following key
@@ -51,11 +50,17 @@ export interface TemplateSaveAsProps {
51
50
  id: string | number;
52
51
  }>;
53
52
  templateNamesOptions?: {
53
+ label?: string;
54
54
  isLoading?: boolean;
55
55
  searchValue?: string;
56
+ defaultNewTemplateName?: string;
56
57
  onSearch?: SelectProps['onSearch'];
57
58
  onNamePopupScroll?: SelectProps['onPopupScroll'];
58
59
  };
60
+ descriptionOptions?: {
61
+ label?: string;
62
+ placeholder?: string;
63
+ };
59
64
  value?: TemplateValueOptions;
60
65
  onChange?: (value: Partial<TemplateValueOptions>) => void;
61
66
  }
package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js CHANGED
@@ -20,15 +20,16 @@ import { TemplateSaveAsStyled } from './styled';
20
20
  import { ImageSlider } from './components';
21
21
  const { Text } = Typography;
22
22
  export const TemplateSaveAs = props => {
23
- const { className, shareAccess, saveOptions, imageReview, categories, omitCategories, templateNames, templateNamesOptions, value, onChange,
23
+ const { className, shareAccess, saveOptions, imageReview, categories, omitCategories, templateNames, templateNamesOptions, descriptionOptions, value, onChange,
24
24
  // onNamePopupScroll,
25
25
  } = props;
26
26
  const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
27
- const { thumbnails, skeleton, previewNavigation, slidesPerView } = imageReview;
28
- const { isLoading, searchValue, onSearch, onNamePopupScroll } = templateNamesOptions || {};
27
+ const { thumbnails, skeleton, previewNavigation, slidesPerView, hideThumbnailsList, label: imageReviewLabel, } = imageReview;
28
+ const { isLoading, searchValue, label: templateLabel, defaultNewTemplateName, onSearch, onNamePopupScroll, } = templateNamesOptions || {};
29
+ const { label: descriptionLabel, placeholder: descriptionPlaceholder } = descriptionOptions || {};
29
30
  const { saveNewText = 'Save as a new media Template', saveExistText = 'Save as an existing media Template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
30
31
  const { saveOption = saveNewValue, templateName: defaultTemplateName, description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = [], accessInfo, } = value || {};
31
- const [templateName, setTemplateName] = useState(`Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`);
32
+ const [templateName, setTemplateName] = useState(defaultNewTemplateName || `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`);
32
33
  const [templateNameExist, setTemplateNameExist] = useState((defaultTemplateName === null || defaultTemplateName === void 0 ? void 0 : defaultTemplateName.id) ? defaultTemplateName : templateNames === null || templateNames === void 0 ? void 0 : templateNames[0]);
33
34
  const handleChangeValue = (newValue) => {
34
35
  if (onChange) {
@@ -78,7 +79,8 @@ export const TemplateSaveAs = props => {
78
79
  React.createElement(Flex, { vertical: true, gap: 20, className: "template-container" },
79
80
  React.createElement(Flex, { className: "field-container" },
80
81
  React.createElement(Text, { className: "field-title field-title--middle" },
81
- "Template name ",
82
+ templateLabel || 'Template name',
83
+ " ",
82
84
  React.createElement("span", null, " *")),
83
85
  saveOption === saveNewValue ? (React.createElement(Input, { debounce: 1000, className: "field-input", value: templateName, onAfterChange: value => {
84
86
  handleChangeValue({ templateName: { id: undefined, label: value } });
@@ -107,13 +109,14 @@ export const TemplateSaveAs = props => {
107
109
  });
108
110
  } }))),
109
111
  React.createElement(Flex, { className: "field-container" },
110
- React.createElement(Text, { className: "field-title field-title--middle" }, "Description"),
111
- React.createElement(Input, { placeholder: "Describe your media template", className: "field-input", value: defaultTemplateDesc, debounce: 1000, onAfterChange: value => handleChangeValue({ description: value }) })),
112
+ React.createElement(Text, { className: "field-title field-title--middle" }, descriptionLabel || 'Description'),
113
+ React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', className: "field-input", value: defaultTemplateDesc, debounce: 1000, onAfterChange: value => handleChangeValue({ description: value }) })),
112
114
  React.createElement(Flex, { className: "field-container" },
113
115
  React.createElement(Text, { className: "field-title" },
114
- "Thumbnail template ",
116
+ imageReviewLabel || 'Thumbnail template',
117
+ " ",
115
118
  React.createElement("span", null, "*")),
116
- React.createElement(ImageSlider, { thumbnails: thumbnails, skeleton: skeleton, previewNavigation: previewNavigation, slidesPerView: slidesPerView, defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }) })), categories === null || categories === void 0 ? void 0 :
119
+ React.createElement(ImageSlider, { thumbnails: thumbnails, skeleton: skeleton, previewNavigation: previewNavigation, slidesPerView: slidesPerView, defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }), hideThumbnailsList: hideThumbnailsList })), categories === null || categories === void 0 ? void 0 :
117
120
  categories.map(parentCategory => {
118
121
  var _a, _b, _c;
119
122
  const selectedChildren = (_a = categoriesValue
package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.d.ts CHANGED
@@ -5,6 +5,7 @@ interface ImageSliderProps {
5
5
  skeleton?: boolean;
6
6
  previewNavigation?: boolean;
7
7
  slidesPerView?: number;
8
+ hideThumbnailsList?: boolean;
8
9
  /**
9
10
  * Default thumbnail - order of default thumbnail in thumbnails array
10
11
  */
package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js CHANGED
@@ -9,7 +9,7 @@ import { ImageSliderStyled } from './styled';
9
9
  import clsx from 'clsx';
10
10
  export const ImageSlider = props => {
11
11
  var _a, _b;
12
- const { thumbnails, className, skeleton, previewNavigation, slidesPerView = 3, defaultThumbnail, onSelectDefault, } = props;
12
+ const { thumbnails, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, defaultThumbnail, onSelectDefault, } = props;
13
13
  const sliderContainerRef = useRef(null);
14
14
  const thumbnailSelectedRef = useRef(null);
15
15
  const [selectedThumbnail, setSelectedThumbnail] = useState(0);
@@ -37,7 +37,7 @@ export const ImageSlider = props => {
37
37
  'image-container--default': defaultThumbnailInternal === index,
38
38
  // 'image-container--default': isSelectedDefault,
39
39
  }) },
40
- React.createElement(Image, { preview: false, width: "80%", height: "96%", src: thumbnails[index] }),
40
+ url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", src: thumbnails[index] })) : null,
41
41
  React.createElement(Button, { className: "set-default-button", onClick: () => {
42
42
  setDefaultThumbnailInternal(selectedThumbnail);
43
43
  if (onSelectDefault) {
@@ -46,17 +46,17 @@ export const ImageSlider = props => {
46
46
  } },
47
47
  defaultThumbnailInternal === index ? (React.createElement(Icon, { type: "icon-ants-check", style: { fontSize: '12px' } })) : null,
48
48
  defaultThumbnailInternal === index ? 'Default thumbnail' : 'Set as default'))))),
49
- React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef }, thumbnails.map((url, index) => (React.createElement("div", { key: `${url}_${index * 2}`, className: clsx('image-container--small', {
49
+ hideThumbnailsList ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef }, thumbnails.map((url, index) => (React.createElement("div", { key: `${url}_${index * 2}`, className: clsx('image-container--small', {
50
50
  'image-container--selected': index === selectedThumbnail,
51
- }), onClick: () => setSelectedThumbnail(index) },
52
- React.createElement(Image, { key: url, preview: false, width: "80%", height: "96%", src: url }))))),
51
+ }), onClick: () => setSelectedThumbnail(index) }, url ? React.createElement(Image, { key: url, preview: false, width: "80%", height: "96%", src: url }) : null))))),
53
52
  previewNavigation ? (React.createElement(React.Fragment, null,
54
53
  React.createElement("div", { className: "change-preview-button change-preview-button--left", onClick: handlePrevThumbnail },
55
54
  React.createElement(Icon, { type: "icon-ants-angle-left" })),
56
55
  React.createElement("div", { className: "change-preview-button change-preview-button--right", onClick: handleNextThumbnail },
57
56
  React.createElement(Icon, { type: "icon-ants-angle-right" })))) : null,
58
- React.createElement("div", { className: "slider-button slider-button--left", onClick: handlePrevThumbnail },
59
- React.createElement(Icon, { type: "icon-ants-angle-left" })),
60
- React.createElement("div", { className: "slider-button slider-button--right", onClick: handleNextThumbnail },
61
- React.createElement(Icon, { type: "icon-ants-angle-right" }))));
57
+ hideThumbnailsList ? null : (React.createElement(React.Fragment, null,
58
+ React.createElement("div", { className: "slider-button slider-button--left", onClick: handlePrevThumbnail },
59
+ React.createElement(Icon, { type: "icon-ants-angle-left" })),
60
+ React.createElement("div", { className: "slider-button slider-button--right", onClick: handleNextThumbnail },
61
+ React.createElement(Icon, { type: "icon-ants-angle-right" }))))));
62
62
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.5-beta.28",
3
+ "version": "1.3.5-beta.29",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",