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

package/es/components/atoms/SlideBar/SlideBar.js

@@ -264,7 +264,9 @@ export const SlideBar = props => {
                 fontSize: `${BTN_ADD_SIZE}px`,
                 cursor: disabledAdd ? 'not-allowed' : 'pointer',
                 color: disabledAdd ? (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorTextDisabled : (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary,
-            }, disabled: disabledAdd, onClick: (e) => {
+            }, 
+            // disabled={disabledAdd}
+            onClick: (e) => {
                 e.stopPropagation();
                 if (!disabledAdd) {
                     handleAddSlide();

package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.d.ts

@@ -25,6 +25,8 @@ export interface ImagePreviewOptions {
     skeleton?: boolean;
     previewNavigation?: boolean;
     slidesPerView?: number;
+    hideThumbnailsList?: boolean;
+    label?: string;
 }
 export interface TemplateSaveAsProps {
     className?: string;
@@ -38,9 +40,6 @@ export interface TemplateSaveAsProps {
         saveNewValue?: string;
         saveExistValue?: string;
     };
-    /**
-     * Default thumbnail - order of default thumbnail in thumbnails array
-     */
     categories?: categoriesProps;
     /**
      * Hide categories with following key
@@ -51,11 +50,17 @@ export interface TemplateSaveAsProps {
         id: string | number;
     }>;
     templateNamesOptions?: {
+        label?: string;
         isLoading?: boolean;
         searchValue?: string;
+        defaultNewTemplateName?: string;
         onSearch?: SelectProps['onSearch'];
         onNamePopupScroll?: SelectProps['onPopupScroll'];
     };
+    descriptionOptions?: {
+        label?: string;
+        placeholder?: string;
+    };
     value?: TemplateValueOptions;
     onChange?: (value: Partial<TemplateValueOptions>) => void;
 }

package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js

@@ -20,15 +20,16 @@ import { TemplateSaveAsStyled } from './styled';
 import { ImageSlider } from './components';
 const { Text } = Typography;
 export const TemplateSaveAs = props => {
-    const { className, shareAccess, saveOptions, imageReview, categories, omitCategories, templateNames, templateNamesOptions, value, onChange,
+    const { className, shareAccess, saveOptions, imageReview, categories, omitCategories, templateNames, templateNamesOptions, descriptionOptions, value, onChange,
     // onNamePopupScroll,
      } = props;
     const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
-    const { thumbnails, skeleton, previewNavigation, slidesPerView } = imageReview;
-    const { isLoading, searchValue, onSearch, onNamePopupScroll } = templateNamesOptions || {};
+    const { thumbnails, skeleton, previewNavigation, slidesPerView, hideThumbnailsList, label: imageReviewLabel, } = imageReview;
+    const { isLoading, searchValue, label: templateLabel, defaultNewTemplateName, onSearch, onNamePopupScroll, } = templateNamesOptions || {};
+    const { label: descriptionLabel, placeholder: descriptionPlaceholder } = descriptionOptions || {};
     const { saveNewText = 'Save as a new media Template', saveExistText = 'Save as an existing media Template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
     const { saveOption = saveNewValue, templateName: defaultTemplateName, description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = [], accessInfo, } = value || {};
-    const [templateName, setTemplateName] = useState(`Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`);
+    const [templateName, setTemplateName] = useState(defaultNewTemplateName || `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`);
     const [templateNameExist, setTemplateNameExist] = useState((defaultTemplateName === null || defaultTemplateName === void 0 ? void 0 : defaultTemplateName.id) ? defaultTemplateName : templateNames === null || templateNames === void 0 ? void 0 : templateNames[0]);
     const handleChangeValue = (newValue) => {
         if (onChange) {
@@ -78,7 +79,8 @@ export const TemplateSaveAs = props => {
             React.createElement(Flex, { vertical: true, gap: 20, className: "template-container" },
                 React.createElement(Flex, { className: "field-container" },
                     React.createElement(Text, { className: "field-title field-title--middle" },
-                        "Template name ",
+                        templateLabel || 'Template name',
+                        " ",
                         React.createElement("span", null, " *")),
                     saveOption === saveNewValue ? (React.createElement(Input, { debounce: 1000, className: "field-input", value: templateName, onAfterChange: value => {
                             handleChangeValue({ templateName: { id: undefined, label: value } });
@@ -107,13 +109,14 @@ export const TemplateSaveAs = props => {
                             });
                         } }))),
                 React.createElement(Flex, { className: "field-container" },
-                    React.createElement(Text, { className: "field-title field-title--middle" }, "Description"),
-                    React.createElement(Input, { placeholder: "Describe your media template", className: "field-input", value: defaultTemplateDesc, debounce: 1000, onAfterChange: value => handleChangeValue({ description: value }) })),
+                    React.createElement(Text, { className: "field-title field-title--middle" }, descriptionLabel || 'Description'),
+                    React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', className: "field-input", value: defaultTemplateDesc, debounce: 1000, onAfterChange: value => handleChangeValue({ description: value }) })),
                 React.createElement(Flex, { className: "field-container" },
                     React.createElement(Text, { className: "field-title" },
-                        "Thumbnail template ",
+                        imageReviewLabel || 'Thumbnail template',
+                        " ",
                         React.createElement("span", null, "*")),
-                    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 :
+                    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 :
                 categories.map(parentCategory => {
                     var _a, _b, _c;
                     const selectedChildren = (_a = categoriesValue

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.d.ts

@@ -5,6 +5,7 @@ interface ImageSliderProps {
     skeleton?: boolean;
     previewNavigation?: boolean;
     slidesPerView?: number;
+    hideThumbnailsList?: boolean;
     /**
      * Default thumbnail - order of default thumbnail in thumbnails array
      */

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js

@@ -9,7 +9,7 @@ import { ImageSliderStyled } from './styled';
 import clsx from 'clsx';
 export const ImageSlider = props => {
     var _a, _b;
-    const { thumbnails, className, skeleton, previewNavigation, slidesPerView = 3, defaultThumbnail, onSelectDefault, } = props;
+    const { thumbnails, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, defaultThumbnail, onSelectDefault, } = props;
     const sliderContainerRef = useRef(null);
     const thumbnailSelectedRef = useRef(null);
     const [selectedThumbnail, setSelectedThumbnail] = useState(0);
@@ -37,7 +37,7 @@ export const ImageSlider = props => {
                 'image-container--default': defaultThumbnailInternal === index,
                 // 'image-container--default': isSelectedDefault,
             }) },
-            React.createElement(Image, { preview: false, width: "80%", height: "96%", src: thumbnails[index] }),
+            url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", src: thumbnails[index] })) : null,
             React.createElement(Button, { className: "set-default-button", onClick: () => {
                     setDefaultThumbnailInternal(selectedThumbnail);
                     if (onSelectDefault) {
@@ -46,17 +46,17 @@ export const ImageSlider = props => {
                 } },
                 defaultThumbnailInternal === index ? (React.createElement(Icon, { type: "icon-ants-check", style: { fontSize: '12px' } })) : null,
                 defaultThumbnailInternal === index ? 'Default thumbnail' : 'Set as default'))))),
-        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', {
+        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', {
                 'image-container--selected': index === selectedThumbnail,
-            }), onClick: () => setSelectedThumbnail(index) },
-            React.createElement(Image, { key: url, preview: false, width: "80%", height: "96%", src: url }))))),
+            }), onClick: () => setSelectedThumbnail(index) }, url ? React.createElement(Image, { key: url, preview: false, width: "80%", height: "96%", src: url }) : null))))),
         previewNavigation ? (React.createElement(React.Fragment, null,
             React.createElement("div", { className: "change-preview-button change-preview-button--left", onClick: handlePrevThumbnail },
                 React.createElement(Icon, { type: "icon-ants-angle-left" })),
             React.createElement("div", { className: "change-preview-button change-preview-button--right", onClick: handleNextThumbnail },
                 React.createElement(Icon, { type: "icon-ants-angle-right" })))) : null,
-        React.createElement("div", { className: "slider-button slider-button--left", onClick: handlePrevThumbnail },
-            React.createElement(Icon, { type: "icon-ants-angle-left" })),
-        React.createElement("div", { className: "slider-button slider-button--right", onClick: handleNextThumbnail },
-            React.createElement(Icon, { type: "icon-ants-angle-right" }))));
+        hideThumbnailsList ? null : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "slider-button slider-button--left", onClick: handlePrevThumbnail },
+                React.createElement(Icon, { type: "icon-ants-angle-left" })),
+            React.createElement("div", { className: "slider-button slider-button--right", onClick: handleNextThumbnail },
+                React.createElement(Icon, { type: "icon-ants-angle-right" }))))));
 };

package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.js

@@ -4,7 +4,7 @@ import { useGetTemplateCategoryList, useGetObjectTemplateList, } from '@antscorp
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Constants
-import { CATEGORY_SPLIT_KEY } from '@antscorp/antsomi-ui/es/constants/templateListing';
+import { CATEGORY_SPLIT_KEY } from '@antscorp/antsomi-ui/es/constants';
 /**
  * Custom React Hook for managing state and data fetching logic related to a template listing.
  *

package/es/components/template/TemplateListing/hooks/useTemplateListing.js

@@ -8,7 +8,7 @@ import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Constants
-import { CATEGORY_SPLIT_KEY, TEMPLATE_STATUS, } from '@antscorp/antsomi-ui/es/constants/templateListing';
+import { CATEGORY_SPLIT_KEY, TEMPLATE_STATUS } from '@antscorp/antsomi-ui/es/constants';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import { getShuffleArray } from '@antscorp/antsomi-ui/es/utils';
 /**

package/es/constants/index.d.ts

@@ -5,3 +5,4 @@ export * from './datetime';
 export * from './keyCode';
 export * from './templateListing';
 export * from './theme';
+export * from './variables';

package/es/constants/index.js

@@ -5,3 +5,4 @@ export * from './datetime';
 export * from './keyCode';
 export * from './templateListing';
 export * from './theme';
+export * from './variables';

package/es/constants/templateListing.d.ts

@@ -1,9 +1,3 @@
-export declare const OBJECT_TYPES: {
-    readonly MEDIA_TEMPLATE: 1;
-    readonly EMAIL_TEMPLATE: 2;
-    readonly JOURNEY_TEMPLATE: 3;
-    readonly RICH_MENU_TEMPLATE: 4;
-};
 export declare const PUBLIC_LEVEL: {
     readonly RESTRICTED: 0;
     readonly PUBLIC: 1;

package/es/constants/templateListing.js

@@ -1,9 +1,3 @@
-export const OBJECT_TYPES = {
-    MEDIA_TEMPLATE: 1,
-    EMAIL_TEMPLATE: 2,
-    JOURNEY_TEMPLATE: 3,
-    RICH_MENU_TEMPLATE: 4,
-};
 export const PUBLIC_LEVEL = {
     RESTRICTED: 0,
     PUBLIC: 1,

package/es/constants/variables.d.ts

@@ -0,0 +1,13 @@
+export declare const OBJECT_TYPES: {
+    readonly DASHBOARD: 1;
+    readonly JOURNEY_OVERVIEW: 2;
+    readonly SEGMENT: 3;
+    readonly BUSINESS_OBJECT: 4;
+    readonly VIEW: 5;
+    readonly DESTINATION: 6;
+    readonly EXPLORATION: 7;
+    readonly MEDIA_TEMPLATE: 8;
+    readonly EMAIL_TEMPLATE: 9;
+    readonly JOURNEY_TEMPLATE: 10;
+    readonly RICH_MENU_TEMPLATE: 11;
+};

package/es/constants/variables.js

@@ -0,0 +1,13 @@
+export const OBJECT_TYPES = {
+    DASHBOARD: 1,
+    JOURNEY_OVERVIEW: 2,
+    SEGMENT: 3,
+    BUSINESS_OBJECT: 4,
+    VIEW: 5,
+    DESTINATION: 6,
+    EXPLORATION: 7,
+    MEDIA_TEMPLATE: 8,
+    EMAIL_TEMPLATE: 9,
+    JOURNEY_TEMPLATE: 10,
+    RICH_MENU_TEMPLATE: 11,
+};

package/es/models/ObjectTemplate.js

@@ -3,8 +3,7 @@ import dayjs from 'dayjs';
 // Models
 import { Model } from './model';
 // Constants
-import { LAYOUT_TEMPLATE } from '../constants/templateListing';
-import { DATE_TIME_FORMAT } from '../constants';
+import { DATE_TIME_FORMAT, LAYOUT_TEMPLATE } from '../constants';
 export class ObjectTemplate extends Model {
     get id() {
         return this.model.template_id || '';

package/es/types/templateListing.d.ts

@@ -1,4 +1,4 @@
-import { TEMPLATE_CATEGORY_KEYS, OBJECT_TYPES, PUBLIC_LEVEL, TEMPLATE_STATUS } from '../constants/templateListing';
+import { TEMPLATE_CATEGORY_KEYS, OBJECT_TYPES, PUBLIC_LEVEL, TEMPLATE_STATUS } from '../constants';
 export type TObjectType = (typeof OBJECT_TYPES)[keyof typeof OBJECT_TYPES];
 export type TPublicLevel = (typeof PUBLIC_LEVEL)[keyof typeof PUBLIC_LEVEL];
 export type TTemplateStatus = (typeof TEMPLATE_STATUS)[keyof typeof TEMPLATE_STATUS];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.27",
+  "version": "1.3.5-beta.29",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",