@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

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

@@ -0,0 +1,52 @@
+// Libraries
+import styled from 'styled-components';
+// Assets
+import MobileFrameV2 from '@antscorp/antsomi-ui/es/assets/images/ip14-pro-mobile-frame.png';
+import cameraImage from '@antscorp/antsomi-ui/es/assets/images/ip14-pro-camera.png';
+// Constants
+import { MOBILE_VIEWPORT } from './constants';
+export const MobileWrapper = styled.div `
+  position: relative;
+  display: flex;
+  justify-content: center;
+  background: url(${MobileFrameV2}) no-repeat center center;
+  background-size: contain;
+`;
+export const MobileInner = styled.div `
+  position: relative;
+  margin: 18px 21px;
+  border-radius: 50px;
+  overflow: hidden;
+
+  .mobile-inner-content {
+    position: absolute;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  @media screen and (max-height: 1000px) {
+    width: ${MOBILE_VIEWPORT.MD.width}px;
+    max-width: ${MOBILE_VIEWPORT.MD.width}px;
+    height: ${MOBILE_VIEWPORT.MD.height}px;
+  }
+
+  @media screen and (min-height: 1001px) {
+    width: ${MOBILE_VIEWPORT.LG.width}px;
+    max-width: ${MOBILE_VIEWPORT.LG.width}px;
+    height: ${MOBILE_VIEWPORT.LG.height}px;
+  }
+`;
+export const MobileCamera = styled.div `
+  position: absolute;
+  pointer-events: none;
+  width: 112.11px;
+  height: 32.29px;
+  margin: auto;
+  top: 10px;
+  left: 50%;
+  z-index: 1;
+  transform: translateX(-50%);
+  background: url(${cameraImage}) no-repeat center center;
+  background-size: contain;
+`;

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

@@ -1 +1,2 @@
 export { Popover } from './Popover';
+export type { PopoverProps } from 'antd';

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

@@ -16,6 +16,7 @@ export const Radio = styled(AntdRadio) `
       border-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary};
 
       &::after {
+        flex-shrink: 0;
         background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary};
       }
     }

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ReactIframeProps } from './types';
+export declare const ReactIframe: React.FC<ReactIframeProps>;

package/es/components/atoms/ReactIframe/ReactIframe.js

@@ -0,0 +1,42 @@
+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;
+};
+// Styled
+import React, { useEffect, useRef } from 'react';
+import Frame from 'react-frame-component';
+// Styled
+import { useForceUpdate } from '@antscorp/antsomi-ui/es/hooks';
+const bodyStyle = `
+  body {
+    padding: 0;
+    margin: 0;
+  }
+`;
+export const ReactIframe = props => {
+    const { head, style } = props, restOfProps = __rest(props, ["head", "style"]);
+    const forceUpdate = useForceUpdate();
+    // Refs
+    const frameRef = useRef();
+    // Clone stylesheets from parent html to iframe for content of iframe to be styled correctly
+    const documentHead = document.querySelector('head');
+    // Force update for fix bug can't get style in first render
+    useEffect(() => {
+        setTimeout(() => {
+            forceUpdate();
+        }, 500);
+    }, [forceUpdate]);
+    return (React.createElement(Frame, Object.assign({}, restOfProps, { style: Object.assign({ border: 'none', width: '100%', height: '100%' }, style), ref: ref => {
+            frameRef.current = ref;
+        }, head: React.createElement(React.Fragment, null,
+            React.createElement("style", null, documentHead === null || documentHead === void 0 ? void 0 : documentHead.innerHTML),
+            React.createElement("style", null, bodyStyle),
+            head) })));
+};

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

@@ -0,0 +1,2 @@
+export * from './ReactIframe';
+export type { ReactIframeProps } from './types';

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

@@ -0,0 +1 @@
+export * from './ReactIframe';

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

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

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

@@ -0,0 +1,16 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+/* Storybook */
+export const StyledIframeContent = styled.div `
+  width: 100%;
+  padding: 20px;
+  border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw3};
+  box-sizing: border-box;
+
+  body {
+    padding: 0;
+  }
+`;

package/es/components/atoms/ReactIframe/types.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { FrameComponentProps } from 'react-frame-component';
+export interface ReactIframeProps extends FrameComponentProps {
+    head?: React.ReactNode | undefined;
+    mountTarget?: string | undefined;
+    initialContent?: string | undefined;
+    contentDidMount?: (() => void) | undefined;
+    contentDidUpdate?: (() => void) | undefined;
+    children: React.ReactNode;
+}

package/es/components/atoms/ReactIframe/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -21,5 +21,5 @@ export const RequiredLabel = memo(props => {
     return (React.createElement(Text, Object.assign({}, restProps),
         !isReverseMask && React.createElement(StyledRequired, null, "*"),
         children,
-        isReverseMask && React.createElement(StyledRequired, null, "*")));
+        isReverseMask && (React.createElement(StyledRequired, { style: { marginLeft: 4, marginRight: 0 } }, "*"))));
 });

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

@@ -38,7 +38,7 @@ export const ScrollBox = props => {
     };
     return (
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    React.createElement(Wrapper, Object.assign({ ref: wrapperRef }, Object.assign(Object.assign({}, restOf), { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), (height && { height })), (maxHeight && { maxHeight })), { paddingRight: isScroll && isPadding ? 8 : 0 }) }), { onScroll: handleScroll }), children));
+    React.createElement(Wrapper, Object.assign({ ref: wrapperRef }, restOf, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), (height && { height })), (maxHeight && { maxHeight })), { paddingRight: isScroll && isPadding ? 8 : 0 }), onScroll: handleScroll }), children));
 };
 const Wrapper = styled.div `
   height: 100%;

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

@@ -0,0 +1,5 @@
+import { ScrollbarProps as CustomScrollbarProps } from 'react-custom-scrollbars';
+import React from 'react';
+export interface ScrollbarsProps extends CustomScrollbarProps {
+}
+export declare const Scrollbars: React.FC<ScrollbarsProps>;

package/es/components/atoms/Scrollbars/Scrollbars.js

@@ -0,0 +1,82 @@
+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;
+};
+import { Scrollbars as CustomScrollbars, } from 'react-custom-scrollbars';
+import { cloneDeep } from 'lodash';
+// Libraries
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+// Styled
+import { HorizontalTrack, ThumbBar, VerticalTrack } from './styled';
+const THUMB_SIZE = 4;
+const MARGIN = 3;
+export const Scrollbars = forwardRef((props, refProp) => {
+    // Props
+    const { autoHide = true, autoHeightMax = 0, className } = props, restProps = __rest(props, ["autoHide", "autoHeightMax", "className"]);
+    // Refs
+    const ref = useRef(null);
+    useImperativeHandle(refProp, () => ref.current, []);
+    /**
+     * Updates the size and position of the custom scrollbar thumbs based on the provided dimensions and scroll positions.
+     *
+     * @param {positionValues} values - An object containing the dimensions and scroll positions of the scrollable element:
+     *  - {number} clientHeight - The visible height of the scrollable content area.
+     *  - {number} clientWidth - The visible width of the scrollable content area.
+     *  - {number} scrollHeight - The total height of the scrollable content.
+     *  - {number} scrollWidth - The total width of the scrollable content.
+     *  - {number} scrollLeft - The horizontal scroll position.
+     *  - {number} scrollTop - The vertical scroll position.
+     */
+    const onUpdate = (values) => {
+        // Destructure the properties from the values object, using default values if undefined
+        const { clientHeight, clientWidth, scrollWidth, scrollHeight, scrollLeft, scrollTop } = values || {};
+        // Calculate the height of the vertical thumb, ensuring a minimum height of 30px
+        const thumbHeight = Math.max(Math.floor(clientHeight * (clientHeight / scrollHeight)), 30);
+        // Calculate the width of the horizontal thumb, ensuring a minimum width of 30px
+        const thumbWidth = Math.max(Math.floor(clientWidth * (clientWidth / scrollWidth)), 30);
+        // Calculate the vertical thumb's position based on the scrollTop value
+        const thumbVerticalPosition = (scrollTop / (scrollHeight - clientHeight)) * (clientHeight - thumbHeight) - MARGIN;
+        // Calculate the horizontal thumb's position based on the scrollLeft value
+        const thumbHorizontalPosition = (scrollLeft / (scrollWidth - clientWidth)) * (clientWidth - thumbWidth) - MARGIN;
+        // If the ref.current element is available, update the thumb styles
+        if (ref.current) {
+            ref.current.thumbVertical.style.height = `${thumbHeight}px`;
+            ref.current.thumbVertical.style.transform = `translateY(${thumbVerticalPosition}px)`;
+            ref.current.thumbHorizontal.style.width = `${thumbWidth}px`;
+            ref.current.thumbHorizontal.style.transform = `translateX(${thumbHorizontalPosition}px)`;
+        }
+        // Handle show hide track bar
+        ref.current.trackVertical.style.visibility =
+            scrollHeight <= clientHeight ? 'hidden' : 'visible';
+        ref.current.trackHorizontal.style.visibility =
+            scrollWidth <= clientWidth ? 'hidden' : 'visible';
+    };
+    return (React.createElement(CustomScrollbars, Object.assign({ className: `custom-scrollbars ${className || ''}`, autoHide: autoHide, autoHeightMax: autoHeightMax, renderThumbVertical: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-vertical" }, props)), renderThumbHorizontal: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-horizontal" }, props)), renderTrackVertical: (_a) => {
+            var { style } = _a, restOfProps = __rest(_a, ["style"]);
+            return (React.createElement(VerticalTrack, Object.assign({ className: "scrollbar-track" }, restOfProps, { style: Object.assign(Object.assign({}, style), { display: 'block' }) })));
+        }, renderTrackHorizontal: (_a) => {
+            var { style } = _a, restOfProps = __rest(_a, ["style"]);
+            return (React.createElement(HorizontalTrack, Object.assign({ className: "scrollbar-track" }, restOfProps, { style: Object.assign(Object.assign({}, style), { display: 'block' }) })));
+        }, renderView: props => {
+            const { style } = props || {};
+            const newStyle = cloneDeep(style);
+            // Adjust the margins to account for the custom scrollbar size
+            newStyle.marginBottom = -THUMB_SIZE;
+            newStyle.marginRight = -THUMB_SIZE;
+            // Set a minimum height for the view to ensure space for the scrollbar
+            newStyle.minHeight = THUMB_SIZE;
+            // If autoHeightMax is defined, adjust the maxHeight to include space for the scrollbar
+            // if (autoHeightMax) {
+            //   newStyle.maxHeight = parseInt(`${autoHeightMax}`) + THUMB_SIZE;
+            // }
+            // Return a div element with the adjusted styles and original props, applying a custom class for styling
+            return React.createElement("div", Object.assign({ className: "scrollbar-view" }, props, { style: newStyle }));
+        }, onUpdate: onUpdate, hideTracksWhenNotNeeded: true }, restProps, { ref: ref })));
+});

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

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

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

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

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

@@ -0,0 +1,4 @@
+export declare const ScrollbarsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ThumbBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VerticalTrack: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalTrack: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,29 @@
+// Libraries
+import styled from 'styled-components';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const ScrollbarsWrapper = styled.div ``;
+export const ThumbBar = styled.div `
+  background: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.gray5};
+  border-radius: 4px;
+`;
+export const VerticalTrack = styled.div `
+  position: absolute;
+  width: 4px !important;
+  transition: opacity 200ms ease 0s;
+  opacity: 0;
+  right: 0px;
+  bottom: 2px;
+  top: 2px;
+  border-radius: 4px;
+`;
+export const HorizontalTrack = styled.div `
+  position: absolute;
+  height: 4px !important;
+  transition: opacity 200ms ease 0s;
+  opacity: 0;
+  right: 2px;
+  bottom: 0px;
+  left: 2px;
+  border-radius: 4px;
+`;

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

@@ -264,9 +264,7 @@ 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) => {
+            }, onClick: (e) => {
                 e.stopPropagation();
                 if (!disabledAdd) {
                     handleAddSlide();

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

@@ -3,6 +3,8 @@ import { SpinProps as AntdSpinProps } from 'antd';
 export interface TSpinProps extends AntdSpinProps {
     indicatorSize?: number;
     children?: any;
+    showIndicatorBackground?: boolean;
+    indicatorBackground?: string;
 }
 export declare const Spin: {
     (props: TSpinProps): React.JSX.Element;

package/es/components/atoms/Spin/Spin.js

@@ -11,18 +11,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 // Libraries
 import React from 'react';
-// Antd Icons
-import { LoadingOutlined } from '@ant-design/icons';
+// Icons
+import { LoadingIcon } from '../../icons';
 // Styled
 import { StyledSpin } from './styled';
 // Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const Spin = (props) => {
     var _a;
-    const { indicatorSize, children } = props, restOf = __rest(props, ["indicatorSize", "children"]);
-    return (React.createElement(StyledSpin, Object.assign({}, Object.assign({ indicator: (React.createElement(LoadingOutlined, { style: {
-                fontSize: indicatorSize || 30,
+    const { indicatorSize, indicatorBackground, showIndicatorBackground, children } = props, restOf = __rest(props, ["indicatorSize", "indicatorBackground", "showIndicatorBackground", "children"]);
+    return (React.createElement(StyledSpin, Object.assign({ indicator: (React.createElement(LoadingIcon, { style: {
+                fontSize: indicatorSize || 40,
                 color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
-            }, spin: true })) }, restOf)), children));
+            }, backgroundColor: showIndicatorBackground ? indicatorBackground || (globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1) : 'transparent' })) }, restOf), children));
 };
 Spin.defaultProps = {};

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

@@ -4,4 +4,13 @@ import styled from 'styled-components';
 import { Spin } from 'antd';
 export const StyledSpin = styled(Spin) `
   max-height: unset !important;
+
+  @keyframes loadingCircle {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 `;

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

@@ -1,4 +1,7 @@
-/// <reference types="react" />
-export declare const Steps: import("react").FC<import("antd").StepsProps> & {
-    Step: typeof import("rc-steps/lib/Step").default;
+import React from 'react';
+import { StepsProps as AntdStepsProps, StepProps as AntdStepProps } from 'antd';
+export type StepsProps = AntdStepsProps & {
+    saveHighestStep?: boolean;
 };
+export type StepProps = AntdStepProps;
+export declare const Steps: React.FC<StepsProps>;

package/es/components/atoms/Steps/Steps.js

@@ -1,2 +1,51 @@
-import { Steps as AntdSteps } from 'antd';
-export const Steps = AntdSteps;
+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, useMemo, useState, memo } from 'react';
+import { isNumber } from 'lodash';
+// Styled
+import { SelectedIcon, StepsWrapper } from './styled';
+export const Steps = memo(props => {
+    const { items, saveHighestStep = true, className } = props, restOfProps = __rest(props, ["items", "saveHighestStep", "className"]);
+    const { current, size = 'small' } = restOfProps;
+    const [highestStep, setHighestStep] = useState(0);
+    useEffect(() => {
+        if (saveHighestStep && current && current > highestStep) {
+            setHighestStep(current);
+        }
+    }, [current, saveHighestStep, highestStep]);
+    const customItems = useMemo(() => saveHighestStep
+        ? items === null || items === void 0 ? void 0 : items.map((item, index) => {
+            let status;
+            let icon;
+            let className;
+            if (index > highestStep) {
+                status = 'wait';
+            }
+            else {
+                if (index === current) {
+                    status = 'process';
+                    icon = undefined;
+                }
+                else {
+                    status = 'finish';
+                    icon = React.createElement(SelectedIcon, null, index + 1);
+                    className = `antsomi-steps-item-selectable${index === highestStep ? ' highest-step' : ''}`;
+                }
+            }
+            return Object.assign({ status, icon, className }, item);
+        })
+        : items, [current, saveHighestStep, highestStep, items]);
+    /** Check whether the user has reactivated the previous step or not */
+    const isReactivate = saveHighestStep && isNumber(current) && current < highestStep;
+    return (React.createElement(StepsWrapper, Object.assign({ items: customItems }, restOfProps, { size: size, isReactivate: isReactivate, highestStep: highestStep, className: `${className || ''}${saveHighestStep ? ' save-highest-step' : ''}` })));
+});

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const SelectedIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StepsWrapper: import("styled-components").StyledComponent<import("react").FC<import("antd").StepsProps> & {
+    Step: typeof import("rc-steps").Step;
+}, any, {
+    isReactivate: boolean;
+    highestStep: number;
+}, never>;