@antscorp/antsomi-ui 1.3.3-beta.84 → 1.3.3-beta.86

package/es/components/atoms/MobileFrame/MobileFrame.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export interface MobileFrameProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
-}
-export declare const MobileFrame: React.FC<React.PropsWithChildren<MobileFrameProps>>;

package/es/components/atoms/MobileFrame/MobileFrame.js

@@ -1,22 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-// Libraries
-import React from 'react';
-// Styled
-import { MobileWrapper, MobileInner, MobileBottomLine } from './styled';
-export const MobileFrame = (_a) => {
-    var { children } = _a, restOfProps = __rest(_a, ["children"]);
-    return (React.createElement(MobileWrapper, Object.assign({}, restOfProps),
-        React.createElement(MobileInner, null,
-            children,
-            React.createElement(MobileBottomLine, null))));
-};

package/es/components/atoms/MobileFrame/constants.d.ts

@@ -1,4 +0,0 @@
-export declare const MOBILE_SETTING: {
-    width: number;
-    height: number;
-};

package/es/components/atoms/MobileFrame/constants.js

@@ -1,4 +0,0 @@
-export const MOBILE_SETTING = {
-    width: 391,
-    height: 660,
-};

package/es/components/atoms/MobileFrame/index.d.ts

@@ -1,2 +0,0 @@
-export { MobileFrame } from './MobileFrame';
-export type { MobileFrameProps } from './MobileFrame';

package/es/components/atoms/MobileFrame/index.js

@@ -1 +0,0 @@
-export { MobileFrame } from './MobileFrame';

package/es/components/atoms/MobileFrame/styled.d.ts

@@ -1,3 +0,0 @@
-export declare const MobileWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MobileInner: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MobileBottomLine: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/MobileFrame/styled.js

@@ -1,33 +0,0 @@
-// Libraries
-import styled from 'styled-components';
-// Assets
-import MobileFrame from '@antscorp/antsomi-ui/es/assets/images/iphone.png';
-export const MobileWrapper = styled.div `
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  background: url(${MobileFrame}) no-repeat center center;
-  background-size: contain;
-`;
-export const MobileInner = styled.div `
-  position: relative;
-  width: 100%;
-  max-width: 336px;
-  height: 695px;
-  margin: 61px 23px 20px 24px;
-  border-bottom-left-radius: 50px;
-  border-bottom-right-radius: 50px;
-  overflow: hidden;
-`;
-export const MobileBottomLine = styled.div `
-  width: 145px;
-  height: 5px;
-  background-color: #000000;
-  border-radius: 20px;
-  position: absolute;
-  margin: auto;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10;
-`;

package/es/components/atoms/PreviewTabs/PreviewTabs.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export interface PreviewTabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    total?: number;
-    current?: number;
-    onChange?: (current: number) => void;
-}
-export declare const PreviewTabs: React.FC<PreviewTabProps>;

package/es/components/atoms/PreviewTabs/PreviewTabs.js

@@ -1,67 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-// Libraries
-import React, { useEffect, useState } from 'react';
-import cn from 'classnames';
-// Components
-import { Flex, Icon } from '..';
-// Styled
-import { NavigationButton, StyledRichMenuTabs } from './styled';
-import { tryCatchWrapper } from '@antscorp/antsomi-ui/es/utils';
-const defaultProps = {
-    total: 20,
-    current: 1,
-};
-const PATH = 'antsomi-ui/src/components/atoms/PreviewTabs/PreviewTabs.tsx';
-export const PreviewTabs = props => {
-    const { total = 20, current = 1, onChange } = props, restProps = __rest(props, ["total", "current", "onChange"]);
-    const tabsRef = React.useRef(null);
-    // State
-    const [state, setState] = useState({
-        disablePrev: true,
-        disableNext: true,
-    });
-    // Variables
-    const { disableNext, disablePrev } = state;
-    // Handlers
-    const checkScroll = () => {
-        if (tabsRef.current) {
-            const { scrollLeft, clientWidth, scrollWidth } = tabsRef.current;
-            setState(prevState => (Object.assign(Object.assign({}, prevState), { disableNext: scrollLeft + clientWidth === scrollWidth })));
-            setState(prevState => (Object.assign(Object.assign({}, prevState), { disablePrev: scrollLeft === 0 })));
-        }
-    };
-    // Check disable next navigation base length of tabs
-    useEffect(() => {
-        checkScroll();
-    }, []);
-    // Handlers
-    const onClickNavigation = tryCatchWrapper((isPrev) => {
-        if (tabsRef.current) {
-            const { scrollLeft } = tabsRef.current;
-            tabsRef.current.scrollTo({ left: scrollLeft + (isPrev ? -40 : 40), behavior: 'smooth' });
-            checkScroll();
-        }
-    }, PATH);
-    return (React.createElement(StyledRichMenuTabs, Object.assign({}, restProps),
-        React.createElement(NavigationButton, { className: cn('navigation--previous', {
-                'navigation--disabled': disablePrev,
-            }), onClick: () => onClickNavigation(true) },
-            React.createElement(Icon, { type: "icon-ants-angle-left" })),
-        React.createElement(Flex, { ref: tabsRef, className: "tabs antsomi-scrollbar-hidden", align: "center", onScroll: () => checkScroll() }, Array.from({ length: total }).map((_, index) => (React.createElement(Flex, { key: `${index + 1}`, align: "center", justify: "center", className: `tabs__item ${current === index + 1 ? 'tabs__item--active' : ''}`, onClick: () => onChange && onChange(index + 1) },
-            React.createElement(Flex, { align: "center", justify: "center", className: "tabs__label" }, index + 1))))),
-        React.createElement(NavigationButton, { className: cn('navigation--next', {
-                'navigation--disabled': disableNext,
-            }), onClick: () => onClickNavigation(false) },
-            React.createElement(Icon, { type: "icon-ants-angle-right" }))));
-};
-PreviewTabs.defaultProps = defaultProps;

package/es/components/atoms/PreviewTabs/index.d.ts

@@ -1,2 +0,0 @@
-export { PreviewTabs } from './PreviewTabs';
-export type { PreviewTabProps } from './PreviewTabs';

package/es/components/atoms/PreviewTabs/index.js

@@ -1 +0,0 @@
-export { PreviewTabs } from './PreviewTabs';

package/es/components/atoms/PreviewTabs/styled.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface StyledRichMenuTabsProps {
-    width?: number;
-}
-export declare const StyledRichMenuTabs: import("styled-components").StyledComponent<"div", any, StyledRichMenuTabsProps, never>;
-export declare const NavigationButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/atoms/PreviewTabs/styled.js

@@ -1,79 +0,0 @@
-// Components
-import { Flex } from '../Flex';
-// Styled
-import styled from 'styled-components';
-export const StyledRichMenuTabs = styled.div `
-  display: flex;
-  align-items: center;
-  background: #f0f0f0;
-  box-shadow: 0px 3px 3px 0px rgba(0, 46, 89, 0.1);
-  height: 40px;
-  width: ${({ width }) => width || 467}px;
-
-  .tabs {
-    flex: 1;
-    width: 100%;
-    overflow: auto;
-
-    &__item {
-      flex-shrink: 0;
-      height: 40px;
-      width: 40px;
-      border-right: 1px solid #d4d4d4;
-      cursor: pointer;
-      transition: all 200ms;
-
-      &--active {
-        background-color: #fff;
-
-        .tabs__label {
-          background-color: var(--primary-color);
-          color: #fff;
-        }
-      }
-    }
-
-    &__label {
-      height: 24px;
-      width: 24px;
-      font-weight: 700;
-      font-size: 14px;
-      color: var(--primary-color);
-      border-radius: 100%;
-      border: 1px solid #b8cfe6;
-      background-color: #fff;
-      transition: all 200ms;
-    }
-  }
-`;
-export const NavigationButton = styled(Flex) `
-  width: 40px;
-  height: 40px;
-  background-color: #fff;
-  cursor: pointer;
-
-  i {
-    font-size: 12px;
-    color: #595959;
-  }
-
-  &.navigation--previous {
-    border-right: 1px solid #d4d4d4;
-  }
-
-  &.navigation--next {
-    border-left: 1px solid #d4d4d4;
-  }
-
-  &.navigation--disabled {
-    cursor: not-allowed;
-
-    i {
-      color: #59595980;
-    }
-  }
-`;
-NavigationButton.defaultProps = {
-    align: 'center',
-    justify: 'center',
-};

package/es/components/atoms/RateV2/RateV2.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-interface RateContinuousProps {
-    count?: number;
-    className?: string;
-    defaultValue?: number;
-    /**
-     * @description number of star
-     */
-    value?: number;
-    type?: 'full' | 'half' | 'continuous';
-    /**
-     * @param value current number of stars are selected
-     * @description number of stars = fillWidth / STAR_WIDTH
-     */
-    onChange?: (value: number) => void;
-}
-export declare const RateV2: React.FC<RateContinuousProps>;
-export {};

package/es/components/atoms/RateV2/RateV2.js

@@ -1,73 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import StarImage from '@antscorp/antsomi-ui/es/assets/images/stars_slider.png';
-const STAR_WIDTH = 30;
-const parseNumDecimals = (input, decimals) => +Number.parseFloat(input === null || input === void 0 ? void 0 : input.toString()).toFixed(decimals);
-const roundHalf = (num) => {
-    const multiplier = 1 / 0.5;
-    return Math.round(num * multiplier) / multiplier;
-};
-/**
- *
- * @param width width measure from the left edge of star container
- * @param type type of star - 'full' | 'half' | 'continuous'
- * @default type 'full'
- * @returns
- */
-const getWidth = (width, type = 'full') => {
-    const numberOfStar = width / STAR_WIDTH;
-    return type === 'full'
-        ? Math.ceil(numberOfStar) * STAR_WIDTH
-        : type === 'half'
-            ? roundHalf(numberOfStar) * STAR_WIDTH
-            : width;
-};
-export const RateV2 = ({ count = 5, className, defaultValue = 0, value, type = 'full', onChange, }) => {
-    const fullWidth = count * STAR_WIDTH;
-    // The width is calculated when move mouse => change the UI, not change the real value
-    const [fillWidth, setFillWidth] = useState(() => defaultValue ? getWidth(defaultValue * STAR_WIDTH, type) : 0);
-    // The real current value that will be return to parent component by onChange function
-    // currWidth = value * STAR_WIDTH
-    const [currWidth, setCurrWidth] = useState(0);
-    const handleMouseMove = e => {
-        const rect = e.currentTarget.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const hoverWidth = Math.round(x);
-        setFillWidth(getWidth(hoverWidth, type));
-    };
-    const handleClick = () => {
-        // If have no value => auto set current value; if have value => must control value with onChange props
-        if (!value)
-            setCurrWidth(fillWidth);
-        if (onChange)
-            onChange(parseNumDecimals(fillWidth / STAR_WIDTH, 2));
-    };
-    useEffect(() => {
-        if (typeof value === 'number') {
-            const width = getWidth(value * STAR_WIDTH, type);
-            setCurrWidth(width);
-            setFillWidth(width);
-        }
-    }, [value]);
-    return (React.createElement("div", { className: `antsomi-rate-continuous${className ? ` ${className}` : ''}`, style: {
-            position: 'relative',
-            width: `${fullWidth}px`,
-            backgroundPosition: '-27px',
-            height: '28px',
-        }, onMouseMove: handleMouseMove, onMouseLeave: () => setFillWidth(currWidth || 0), onClick: handleClick },
-        React.createElement("div", { className: "custom-rate custom-rate--fill", style: {
-                position: 'absolute',
-                background: `url(${StarImage}) 0px 0px`,
-                width: `${fillWidth}px`,
-                height: '26px',
-                zIndex: 1,
-            } }),
-        React.createElement("div", { className: "custom-rate custom-rate--empty", style: {
-                position: 'absolute',
-                top: '0px',
-                left: '0px',
-                backgroundImage: 'none',
-                background: `transparent url(${StarImage}) 0px -26px`,
-                width: `${fullWidth}px`,
-                height: '26px',
-            } })));
-};

package/es/components/atoms/RateV2/index.d.ts

@@ -1 +0,0 @@
-export { RateV2 } from './RateV2';

package/es/components/atoms/RateV2/index.js

@@ -1 +0,0 @@
-export { RateV2 } from './RateV2';

package/es/components/atoms/SlideBar/SlideBar.d.ts

@@ -1,31 +0,0 @@
-import { FC } from 'react';
-import { slideActionType } from './constants';
-export type SlideBarOptionProps = {
-    label: string;
-    value: string;
-};
-export type SlideBarLimitProps = {
-    max: number;
-    min: number;
-};
-export type ActionType = (typeof slideActionType)[keyof typeof slideActionType];
-export type SlideBarState = {
-    cacheInfoClicked: SlideBarOptionProps;
-    disabledPrev: boolean;
-    disabledNext: boolean;
-    notiUpdateScroll: number;
-};
-export interface SlideBarProps {
-    isViewMode?: boolean;
-    isShowLabelSequentially?: boolean;
-    isShowAdd?: boolean;
-    isDragDisabled?: boolean;
-    disabled?: boolean;
-    activeId: string;
-    prefix?: string;
-    options: SlideBarOptionProps[];
-    limit?: SlideBarLimitProps;
-    errors: any;
-    callback?: (type: ActionType, data?: SlideBarOptionProps | SlideBarOptionProps[]) => any;
-}
-export declare const SlideBar: FC<SlideBarProps>;

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

@@ -1,272 +0,0 @@
-// Libraries
-import React, { useRef, useEffect, useState, useMemo } from 'react';
-import _ from 'lodash';
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
-// Components
-import { Icon } from '../Icon';
-import { Popover } from '../Popover';
-// Styled
-import { ContainerSlideBar, MainContent, MenuItem, MenuList, SlideItem, SliderWrapper, SlideText, WrapperDisable, WrapperOverflow, } from './styled';
-import { PlusCircleFilled } from '@ant-design/icons';
-// Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-import { BTN_ADD_SIZE, slideActionType, WIDTH_SLIDE_ITEM } from './constants';
-// Utils
-import { getObjectPropSafely, handleError } from '@antscorp/antsomi-ui/es/utils';
-// Locales
-import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
-import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
-const getItemStyle = (isDragging, draggableStyle) => (Object.assign({ 
-    // some basic styles to make the items look a bit nicer
-    userSelect: 'none', borderLeft: isDragging ? '1px solid #e0e0e0' : 'none' }, draggableStyle));
-const PATH = 'src/components/atoms/SlideBar/SlideBar.tsx';
-export const SlideBar = props => {
-    var _a, _b, _c, _d;
-    const { isViewMode, isShowLabelSequentially, isDragDisabled, isShowAdd, disabled, prefix, options, activeId, limit, errors, callback, } = props;
-    // States
-    const [state, setState] = useState({
-        cacheInfoClicked: {
-            label: '',
-            value: '',
-        },
-        disabledPrev: true,
-        disabledNext: true,
-        notiUpdateScroll: 1,
-    });
-    // Refs
-    const wrapperOverflowRef = useRef(null);
-    const disabledAdd = useMemo(() => disabled || isViewMode || (limit && options.length >= (limit === null || limit === void 0 ? void 0 : limit.max)), [disabled, isViewMode, limit, options.length]);
-    const disabledDuplicate = useMemo(() => (limit && options.length >= (limit === null || limit === void 0 ? void 0 : limit.max)) || isViewMode || disabled, [disabled, isViewMode, limit, options.length]);
-    const disabledDelete = useMemo(() => (limit && options.length <= (limit === null || limit === void 0 ? void 0 : limit.min)) || isViewMode || disabled, [disabled, isViewMode, limit, options.length]);
-    // Locales
-    const { t } = i18nInstance;
-    const handleClick = (event, slideInfo) => {
-        event.stopPropagation();
-        setState(prev => (Object.assign(Object.assign({}, prev), { cacheInfoClicked: slideInfo })));
-    };
-    const reorder = (list, startIndex, endIndex) => {
-        const result = Array.from(list);
-        const [removed] = result.splice(startIndex, 1);
-        result.splice(endIndex, 0, removed);
-        return result;
-    };
-    const handleDragEnd = result => {
-        try {
-            // dropped outside the list
-            if (!result.destination) {
-                return;
-            }
-            const items = reorder(options, result.source.index, result.destination.index);
-            if (typeof callback === 'function') {
-                callback(slideActionType.RE_ORDERS, items);
-            }
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'handleDragEnd',
-                args: {
-                    error,
-                },
-            });
-            // eslint-disable-next-line no-console
-            console.log('error :>', error);
-        }
-    };
-    const handleActiveSlide = (e, slideInfo) => {
-        try {
-            e.stopPropagation();
-            if (typeof callback === 'function' && !_.isEmpty(slideInfo) && activeId !== slideInfo.value) {
-                callback(slideActionType.ACTIVE, slideInfo);
-            }
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'handleActiveSlide',
-                args: {
-                    error,
-                    slideInfo,
-                },
-            });
-            // eslint-disable-next-line no-console
-            console.log(error);
-        }
-    };
-    const handleDuplicateSlide = (slideInfo) => {
-        try {
-            if (typeof callback === 'function' && !_.isEmpty(slideInfo)) {
-                callback(slideActionType.DUPLICATE, slideInfo);
-            }
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'handleDuplicateSlide',
-                args: {
-                    error,
-                    slideInfo,
-                },
-            });
-            // eslint-disable-next-line no-console
-            console.log(error);
-        }
-    };
-    const handleDeleteSlide = (slideInfo) => {
-        try {
-            if (typeof callback === 'function' && !_.isEmpty(slideInfo)) {
-                callback(slideActionType.DELETE, slideInfo);
-            }
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'handleDeleteSlide',
-                args: {
-                    error,
-                    slideInfo,
-                },
-            });
-            // eslint-disable-next-line no-console
-            console.log(error);
-        }
-    };
-    const handleChangeScrollDirection = (type = '') => {
-        try {
-            if (_.isEmpty(wrapperOverflowRef.current))
-                return;
-            if (type === 'PREVIOUS') {
-                if (wrapperOverflowRef.current.scrollLeft < WIDTH_SLIDE_ITEM) {
-                    wrapperOverflowRef.current.scrollLeft = 0;
-                }
-                else {
-                    wrapperOverflowRef.current.scrollLeft -= WIDTH_SLIDE_ITEM;
-                }
-            }
-            else if (type === 'NEXT') {
-                wrapperOverflowRef.current.scrollLeft += WIDTH_SLIDE_ITEM;
-            }
-            setState(prev => (Object.assign(Object.assign({}, prev), { notiUpdateScroll: prev.notiUpdateScroll + 1 })));
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'handleChangePrev',
-                args: {
-                    type,
-                    error,
-                },
-            });
-            // eslint-disable-next-line no-console
-            console.log(error);
-        }
-    };
-    const handleAddSlide = () => {
-        try {
-            if (typeof callback === 'function') {
-                callback(slideActionType.ADD);
-            }
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'handleAddSlide',
-                args: {
-                    error,
-                },
-            });
-        }
-    };
-    useEffect(() => () => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { cacheInfoClicked: { label: '', value: '' } })));
-    }, []);
-    // Calculator center selected template
-    useEffect(() => {
-        const selectedSlideEle = document.getElementById(`template-slide-${activeId}`);
-        if (selectedSlideEle instanceof HTMLElement &&
-            wrapperOverflowRef &&
-            wrapperOverflowRef.current) {
-            // Calculate the scroll position to center the element
-            const elementLeftOffset = selectedSlideEle.offsetLeft;
-            const containerWidth = wrapperOverflowRef.current.clientWidth;
-            const elementWidth = selectedSlideEle.clientWidth;
-            const scrollPosition = elementLeftOffset - (containerWidth - elementWidth) / 2;
-            // Set the scroll position of the container
-            wrapperOverflowRef.current.scrollLeft = scrollPosition;
-        }
-    }, [activeId]);
-    useEffect(() => {
-        if (!_.isEmpty(wrapperOverflowRef.current)) {
-            const isDisabledPrevTmp = getObjectPropSafely(() => { var _a; return ((_a = wrapperOverflowRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) === 0; });
-            const isDisabledNextTmp = getObjectPropSafely(() => {
-                const { scrollLeft = 0, offsetWidth = 0, scrollWidth = 0, } = wrapperOverflowRef.current || {};
-                return offsetWidth === scrollWidth || scrollWidth <= Math.ceil(scrollLeft) + offsetWidth;
-            });
-            setState(prev => (Object.assign(Object.assign({}, prev), { disabledPrev: isDisabledPrevTmp, disabledNext: isDisabledNextTmp })));
-        }
-    }, [options, state.notiUpdateScroll]);
-    const renderMainContent = () => options.map((item, index) => {
-        let { label } = _.cloneDeep(item);
-        if (isShowLabelSequentially) {
-            label = `${prefix} ${index + 1}`;
-        }
-        return (React.createElement(Draggable, { key: item.value, isDragDisabled: isViewMode || disabled || isDragDisabled, draggableId: item.value, index: index }, (providedDraggable, snapshotDraggable) => {
-            var _a, _b;
-            return (React.createElement(SlideItem, Object.assign({ id: `template-slide-${item.value}`, isActive: activeId === item.value, className: "slide-item", ref: providedDraggable.innerRef }, providedDraggable.draggableProps, providedDraggable.dragHandleProps, { isSlideError: Array.isArray(errors) && errors.includes(item.value), style: getItemStyle(snapshotDraggable.isDragging, providedDraggable.draggableProps.style), onClick: (e) => {
-                    e.stopPropagation();
-                    handleActiveSlide(e, item);
-                } }),
-                React.createElement(SlideText, { isActive: activeId === item.value }, label),
-                !isViewMode && (React.createElement(Popover, { placement: "bottomLeft", trigger: "click", content: React.createElement(MenuList, null,
-                        React.createElement(WrapperDisable, { disabled: disabledDuplicate },
-                            React.createElement(MenuItem, { isDisabled: disabledDuplicate, onClick: (e) => {
-                                    e.stopPropagation();
-                                    if (!disabledDuplicate) {
-                                        handleDuplicateSlide(state.cacheInfoClicked);
-                                    }
-                                } }, t(translations.duplicate.title))),
-                        React.createElement(WrapperDisable, { disabled: disabledDelete },
-                            React.createElement(MenuItem, { isDisabled: disabledDelete, onClick: (e) => {
-                                    e.stopPropagation();
-                                    if (!disabledDelete) {
-                                        handleDeleteSlide(state.cacheInfoClicked);
-                                    }
-                                } }, t(translations.delete.title)))), arrow: false },
-                    React.createElement(Icon, { type: "icon-ants-three-dot-vertical", color: activeId === item.value ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText, size: "20px", onClick: (event) => handleClick(event, item), disabled: false })))));
-        }));
-    });
-    const renderSliderDragDrop = () => (React.createElement(WrapperOverflow, { ref: wrapperOverflowRef, id: "wrapper-overflow" },
-        React.createElement(DragDropContext, { onDragEnd: handleDragEnd },
-            React.createElement(Droppable, { droppableId: "droppable", direction: "horizontal" }, (providedDroppable, _snapshotDroppable) => (React.createElement(MainContent, Object.assign({ ref: providedDroppable.innerRef }, providedDroppable.droppableProps), renderMainContent()))))));
-    return (React.createElement(ContainerSlideBar, null,
-        React.createElement(SliderWrapper, { isViewMode: isViewMode },
-            React.createElement(Icon, { type: "icon-ants-angle-left", style: { fontSize: '16px', cursor: 'pointer', color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary }, className: "btn-arrow-left btn-action-slide-template", disabled: state.disabledPrev, onClick: (e) => {
-                    e.stopPropagation();
-                    handleChangeScrollDirection('PREVIOUS');
-                } }),
-            renderSliderDragDrop(),
-            React.createElement(Icon, { type: "icon-ants-angle-right", style: { fontSize: '16px', cursor: 'pointer', color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary }, className: "btn-arrow-right btn-action-slide-template", disabled: state.disabledNext, onClick: (e) => {
-                    e.stopPropagation();
-                    handleChangeScrollDirection('NEXT');
-                } })),
-        isShowAdd && (React.createElement(PlusCircleFilled, { style: {
-                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) => {
-                e.stopPropagation();
-                if (!disabledAdd) {
-                    handleAddSlide();
-                }
-            } }))));
-};
-SlideBar.defaultProps = {
-    isViewMode: false,
-    disabled: false,
-    isShowLabelSequentially: true,
-    isShowAdd: true,
-    isDragDisabled: false,
-    activeId: '',
-    prefix: 'Slide',
-    options: [],
-};