@antscorp/antsomi-ui 1.3.5-beta.53 → 1.3.5-beta.55

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

@@ -26,6 +26,8 @@ export interface ImagePreviewOptions {
     hideThumbnailsList?: boolean;
     hideDefaultButton?: boolean;
     label?: string;
+    imageWidth?: number;
+    imageHeight?: number;
 }
 export interface TemplateSaveAsProps {
     className?: string;

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

@@ -26,7 +26,7 @@ export const TemplateSaveAs = props => {
     // onNamePopupScroll,
      } = props;
     const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
-    const { thumbnails, isLoading: isLoadingThumbnail, skeleton, previewNavigation, slidesPerView, hideThumbnailsList, hideDefaultButton, label: imageReviewLabel, } = imageReview;
+    const { thumbnails, isLoading: isLoadingThumbnail, skeleton, previewNavigation, slidesPerView, hideThumbnailsList, hideDefaultButton, imageHeight, imageWidth, label: imageReviewLabel, } = imageReview;
     const { isLoading, 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 || {};
@@ -57,11 +57,8 @@ export const TemplateSaveAs = props => {
         }
     };
     const handleAddCategory = ({ parentKey, item, }) => {
-        // console.log('🚀 ~ handleAddCategory:', { parent, parentKey, item }, categories);
         const currCategory = categoriesValue === null || categoriesValue === void 0 ? void 0 : categoriesValue[parentKey];
         if (currCategory) {
-            // currCategory.children.push(+item);
-            // const newCategoryList = categoriesValue.filter(item => item.label !== currCategory.label);
             const newCategory = Object.assign(Object.assign({}, categoriesValue), { [parentKey]: [...currCategory, +item] });
             handleChangeValue({ categories: newCategory });
         }
@@ -69,24 +66,12 @@ export const TemplateSaveAs = props => {
             const newCategory = Object.assign(Object.assign({}, categoriesValue), { [parentKey]: [+item] });
             handleChangeValue({ categories: newCategory });
         }
-        // const currCategory = categoriesValue.find(category => category.label === parent);
-        // if (currCategory) {
-        //   currCategory.children.push(item);
-        //   const newCategoryList = categoriesValue.filter(item => item.label !== currCategory.label);
-        //   const newCategory = [...newCategoryList, currCategory];
-        //   handleChangeValue({ categories: newCategory });
-        // } else {
-        //   const newCategory = [...categoriesValue, { label: parent, key: parentKey, children: [item] }];
-        //   handleChangeValue({ categories: newCategory });
-        // }
     };
     const handleRemoveCategory = ({ parent, item, }) => {
         const currCategory = categoriesValue === null || categoriesValue === void 0 ? void 0 : categoriesValue[parent];
         if (!currCategory)
             return;
         const newChildren = currCategory.filter(child => child !== item);
-        // const newChildren = currCategory.children.filter(child => child.label !== item.label);
-        // const newCategoryList = categoriesValue.filter(child => child.label !== currCategory.label);
         handleChangeValue({
             categories: Object.assign(Object.assign({}, categoriesValue), { [parent]: newChildren }),
         });
@@ -147,7 +132,7 @@ export const TemplateSaveAs = props => {
                             imageReviewLabel || 'Thumbnail template',
                             " ",
                             React.createElement("span", null, "*")),
-                        React.createElement(ImageSlider, { thumbnails: thumbnails, isLoading: isLoadingThumbnail, skeleton: skeleton, previewNavigation: previewNavigation, slidesPerView: slidesPerView, defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }), hideThumbnailsList: hideThumbnailsList, hideDefaultButton: hideDefaultButton })), categories === null || categories === void 0 ? void 0 :
+                        React.createElement(ImageSlider, { thumbnails: thumbnails, isLoading: isLoadingThumbnail, skeleton: skeleton, previewNavigation: previewNavigation, slidesPerView: slidesPerView, defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }), hideThumbnailsList: hideThumbnailsList, hideDefaultButton: hideDefaultButton, imageHeight: imageHeight, imageWidth: imageWidth })), categories === null || categories === void 0 ? void 0 :
                     categories.map(parentCategory => {
                         var _a, _b;
                         // const selectedChildren = categoriesValue

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

@@ -8,6 +8,8 @@ interface ImageSliderProps {
     slidesPerView?: number;
     hideThumbnailsList?: boolean;
     hideDefaultButton?: boolean;
+    imageWidth?: number;
+    imageHeight?: number;
     /**
      * Default thumbnail - order of default thumbnail in thumbnails array
      */

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

@@ -9,17 +9,17 @@ import { ImageSliderStyled } from './styled';
 import clsx from 'clsx';
 export const ImageSlider = props => {
     var _a, _b;
-    const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, defaultThumbnail, onSelectDefault, } = props;
+    const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, imageWidth = 330, imageHeight = 230, defaultThumbnail, onSelectDefault, } = props;
     const sliderContainerRef = useRef(null);
     const thumbnailSelectedRef = useRef(null);
     const [selectedThumbnail, setSelectedThumbnail] = useState(0);
     const [defaultThumbnailInternal, setDefaultThumbnailInternal] = useState(defaultThumbnail || 0);
     (_a = thumbnailSelectedRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-        left: selectedThumbnail * 330,
+        left: selectedThumbnail * imageWidth,
         behavior: 'smooth',
     });
     (_b = sliderContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
-        left: selectedThumbnail * (330 / slidesPerView),
+        left: selectedThumbnail * (imageWidth / slidesPerView),
         behavior: 'smooth',
     });
     const handleNextThumbnail = () => {
@@ -28,12 +28,12 @@ export const ImageSlider = props => {
     const handlePrevThumbnail = () => {
         setSelectedThumbnail(prev => (prev === 0 ? thumbnails.length - 1 : prev - 1));
     };
-    return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$slidesPerView": slidesPerView, vertical: true, gap: 10 },
+    return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$slidesPerView": slidesPerView, "$imageWidth": imageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
         React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement("div", { key: `image-big_${url}_${index * 2}`, className: clsx('image-container--big', {
                 'image-container--default': defaultThumbnailInternal === index,
             }) },
             url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", src: thumbnails[index] })) : null,
-            hideDefaultButton ? null : (React.createElement(Button, { className: "set-default-button", onClick: () => {
+            hideDefaultButton || hideThumbnailsList || thumbnails.length <= 1 ? null : (React.createElement(Button, { className: "set-default-button", onClick: () => {
                     setDefaultThumbnailInternal(selectedThumbnail);
                     if (onSelectDefault) {
                         onSelectDefault(selectedThumbnail);
@@ -41,7 +41,7 @@ export const ImageSlider = props => {
                 } },
                 defaultThumbnailInternal === index ? (React.createElement(Icon, { type: "icon-ants-check", style: { fontSize: '12px' } })) : null,
                 defaultThumbnailInternal === index ? 'Default thumbnail' : 'Set as default'))))))),
-        hideThumbnailsList ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement("div", { key: `${url}_${index * 2}`, className: clsx('image-container--small', {
+        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("div", { key: `${url}_${index * 2}`, className: clsx('image-container--small', {
                 'image-container--selected': index === selectedThumbnail,
             }), onClick: () => setSelectedThumbnail(index) }, url ? (React.createElement(Image, { key: url, preview: false, width: "80%", height: "96%", src: url })) : null)))))),
         previewNavigation && !isLoading ? (React.createElement(React.Fragment, null,
@@ -49,7 +49,7 @@ export const ImageSlider = props => {
                 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,
-        hideThumbnailsList || isLoading ? null : (React.createElement(React.Fragment, null,
+        hideThumbnailsList || isLoading || thumbnails.length <= 1 ? 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 },

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

@@ -1,5 +1,9 @@
 /// <reference types="react" />
-export declare const ImageSliderStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
-    $skeleton?: boolean | undefined;
-    $slidesPerView?: number | undefined;
-}, never>;
+interface ImageSliderStyledProps {
+    $skeleton?: boolean;
+    $slidesPerView?: number;
+    $imageWidth?: number;
+    $imageHeight?: number;
+}
+export declare const ImageSliderStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, ImageSliderStyledProps, never>;
+export {};

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

@@ -76,14 +76,12 @@ export const ImageSliderStyled = styled(Flex) `
   .thumbnail-preview-container .antsomi-spin,
   .thumbnail-slider-container .antsomi-spin {
     width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    ${centerBlock}
     background-color: #fcfcfc;
   }
 
   .thumbnail-preview-container {
-    width: 330px;
+    width: ${({ $imageWidth }) => `${$imageWidth}px`};
     overflow-x: scroll;
     scrollbar-width: none;
 
@@ -95,13 +93,13 @@ export const ImageSliderStyled = styled(Flex) `
     }
 
     .antsomi-spin {
-      height: 230px;
+      height: ${({ $imageHeight }) => `${$imageHeight}px`};
     }
   }
 
   .thumbnail-slider-container {
     position: relative;
-    width: 330px;
+    width: ${({ $imageWidth }) => `${$imageWidth}px`};
     overflow-x: scroll;
     scrollbar-width: none;
 
@@ -110,6 +108,24 @@ export const ImageSliderStyled = styled(Flex) `
     }
   }
 
+  &:has(> .thumbnail-preview-container + .thumbnail-slider-container) {
+    .image-container--big::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: transparent;
+      z-index: 1;
+      transition: background-color 150ms ease-in-out;
+    }
+
+    .image-container--big:hover::before {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+
   .image-container {
     &--big,
     &--small {
@@ -126,24 +142,12 @@ export const ImageSliderStyled = styled(Flex) `
     }
 
     &--big {
-      ${setWidthHeight({ w: '100%', h: '230px' })}
-      /* ${setWidthHeight({ w: '330px', h: '230px' })} */
+      width: 100%;
+      height: ${({ $imageHeight }) => `${$imageHeight}px`};
       flex-shrink: 0;
 
       position: relative;
-      /* border-radius: 5px; */
       overflow: hidden;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.5);
-        z-index: 1;
-      }
     }
 
     &--small {
@@ -167,31 +171,12 @@ export const ImageSliderStyled = styled(Flex) `
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 2;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
   }
-
-  /* .swiper-button-prev,
-  .swiper-button-next {
-    background: #fff;
-    width: 24px;
-    height: 24px;
-    border-radius: 999px;
-    &:after {
-      font-size: 14px;
-      font-weight: bold;
-      color: #000;
-    }
-    &.swiper-button-disabled {
+  .image-container--big:hover {
+    .set-default-button {
       opacity: 1;
-      cursor: pointer;
     }
-  } */
-
-  /* .swiper-button-prev.swiper-button-disabled {
-    opacity: 1;
-    cursor: pointer;
-  } */
-
-  /* .swiper-button-lock {
-    display: flex;
-  } */
+  }
 `;

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

@@ -41,6 +41,8 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
         thumbnail?: string | undefined;
     }[];
     value: Partial<TemplateValueOptions>;
+    setValue: import("react").Dispatch<import("react").SetStateAction<Partial<TemplateValueOptions>>>;
+    reset: () => void;
     formattedCategoriesValue: {
         camelCase: Record<string, any>;
         snakeCase: Record<string, any>;

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

@@ -5,7 +5,6 @@ import { useGetTemplateCategoryList, useGetObjectTemplateList, } from '@antscorp
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 import { Form } from 'antd';
 import { camelCaseToSnakeCase, snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
-import { omit } from 'lodash';
 /**
  * Custom React Hook for managing state and data fetching logic related to a template listing.
  *
@@ -24,21 +23,16 @@ export const useTemplateSave = (options) => {
     const { objectType, categoryCodes, publicLevel, limitListPerPage = 10, getListType } = config;
     const { categoryList: categoryListOptions, templateList: templateListOptions } = queriesOptions || {};
     const [searchName, setSearchName] = useState('');
-    const [value, setValue] = useState(omit(valueArg, ['categoriesWithId']) || {});
+    const [value, setValue] = useState(valueArg || {});
     const [errors, setErrors] = useState();
     const handleFormatCategories = (categories) => {
-        // const snakeCase = {};
-        // categories?.forEach(category => {
-        //   snakeCase[category.key] = category.children.map(item => item.key);
-        // });
         const snakeCase = camelCaseToSnakeCase(categories || {});
         const camelCase = snakeCaseToCamelCase(categories || {});
-        // const camelCase = snakeCaseToCamelCase(snakeCase);
         return { camelCase, snakeCase };
     };
     const formattedCategoriesValue = useMemo(() => handleFormatCategories(value.categories), [value]);
     useDeepCompareEffect(() => {
-        setValue(omit(valueArg, ['categoriesWithId']));
+        setValue(valueArg || {});
     }, [valueArg]);
     const [form] = Form.useForm();
     const { data: categoryList, isLoading: isLoadingCategoryList, refetch: refetchCategoryList, } = useGetTemplateCategoryList({
@@ -94,11 +88,17 @@ export const useTemplateSave = (options) => {
         setErrors((_b = (_a = form === null || form === void 0 ? void 0 : form.getFieldsError()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.errors);
         setValue(newValue);
     };
+    const reset = () => {
+        setValue(valueArg || {});
+    };
     return {
         // MapKeys
         categoryItems,
         templateItems,
+        // State value
         value,
+        setValue,
+        reset,
         // formattedValue
         formattedCategoriesValue,
         handleFormatCategories,

package/es/utils/common.js

@@ -406,7 +406,7 @@ export const camelCaseToSnakeCase = (object, recursive = false) => {
         newObject[newKey] =
             recursive && !!object[key] && typeof object[key] === 'object'
                 ? Array.isArray(object[key])
-                    ? object[key].map(value => snakeCaseToCamelCase(value, recursive))
+                    ? object[key].map(value => camelCaseToSnakeCase(value, recursive))
                     : camelCaseToSnakeCase(object[key], recursive)
                 : object[key];
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.53",
+  "version": "1.3.5-beta.55",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -59,6 +59,7 @@
     "not op_mini all"
   ],
   "dependencies": {
+    "@antscorp/antsomi-ui": "file:.yalc/@antscorp/antsomi-ui",
     "@antscorp/icons": "0.27.6",
     "@antscorp/image-editor": "1.0.2",
     "@emotion/react": "^11.11.1",
@@ -78,8 +79,8 @@
     "axios": "^1.4.0",
     "babel-plugin-file-loader": "^2.0.0",
     "currency-formatter": "1.5.9",
-    "dayjs": "^1.11.10",
     "d3-interpolate": "^3.0.1",
+    "dayjs": "^1.11.10",
     "font-awesome": "4.7.0",
     "highlight.js": "^11.8.0",
     "html-entities": "^2.0.2",