@antscorp/antsomi-ui 1.5.9 → 1.6.0

package/es/assets/css/main.scss

@@ -2,3 +2,5 @@
   --primary-color: #005fb8;
   --text-base-color: #222222;
 }
+
+

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

@@ -1 +1,2 @@
 export { Button } from 'antd';
+export type { ButtonProps } from 'antd';

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

@@ -1,4 +1 @@
-/// <reference types="react" />
-export declare const Button: import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-};
+export * from './Button';

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

@@ -1,2 +1 @@
-import { Button as AntdButton } from './Button';
-export const Button = AntdButton;
+export * from './Button';

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

@@ -0,0 +1,16 @@
+import React, { FocusEvent } from 'react';
+import { TypographyProps } from 'antd';
+import { EllipsisConfig } from 'antd/es/typography/Base';
+interface ContentEditableProps extends Omit<TypographyProps['Text'], 'className' | '$$typeof'> {
+    onSave: (innerText: string, e?: FocusEvent<any>) => void;
+    value?: string;
+    isEdit?: boolean;
+    disabledBlur?: boolean;
+    maxLength?: number;
+    breakWord?: boolean;
+    regexPattern?: RegExp;
+    className?: string;
+    ellipsis?: EllipsisConfig;
+}
+export declare const ContentEditable: React.FC<React.PropsWithChildren<ContentEditableProps>>;
+export {};

package/es/components/atoms/ContentEditable/ContentEditable.js

@@ -0,0 +1,76 @@
+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 React, { useEffect, useRef, useState } from 'react';
+import { ContentEditableWrapper } from './styled';
+// NOTE: User can keypress when value reach max length
+const IGNORE_KEY_CODE = [
+    'Backspace',
+    'Delete',
+    'ArrowRight',
+    'ArrowLeft',
+    'ControlLeft',
+    'ControlRight',
+    'ShiftLeft',
+    'ShiftRight',
+    'Tab',
+];
+export const ContentEditable = React.memo(props => {
+    const { value, onSave, className, isEdit, disabledBlur, maxLength, breakWord, regexPattern, ellipsis } = props, restProps = __rest(props, ["value", "onSave", "className", "isEdit", "disabledBlur", "maxLength", "breakWord", "regexPattern", "ellipsis"]);
+    const [isEditable, setIsEditable] = useState(false);
+    const elementRef = useRef(null);
+    useEffect(() => {
+        if (isEdit !== undefined) {
+            if (!isEdit)
+                onSave(elementRef && elementRef.current ? elementRef.current.innerText : '');
+            setIsEditable(isEdit);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isEdit]);
+    return (React.createElement(ContentEditableWrapper, Object.assign({}, restProps, { "$breakWord": breakWord, ref: elementRef, className: `${isEditable ? 'editable' : ''} ${className || ''}`, suppressContentEditableWarning: true, contentEditable: true, spellCheck: false, ellipsis: { tooltip: true }, onClick: () => {
+            if (!isEditable) {
+                setIsEditable(true);
+            }
+        }, onBlur: (e) => {
+            if (disabledBlur)
+                return;
+            setIsEditable(false);
+            onSave(e.target.innerText, e);
+        }, onKeyDown: (e) => {
+            var _a;
+            if (!isEditable)
+                e.preventDefault();
+            // Check letters are selected => user want to replace it => allow edit
+            const selectedLetter = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().length;
+            // Check user want select all text
+            const isSelectAll = e.code === 'KeyA' && e.ctrlKey;
+            if (!IGNORE_KEY_CODE.includes(e.code) &&
+                !selectedLetter &&
+                !isSelectAll &&
+                regexPattern &&
+                !e.code.match(regexPattern) &&
+                !isSelectAll)
+                e.preventDefault();
+            if (e.code === 'Enter') {
+                e.preventDefault();
+                onSave(e.currentTarget.innerText);
+                setIsEditable(false);
+            }
+            // NOTE: check current text length
+            if (maxLength &&
+                e.currentTarget.innerText.length >= maxLength &&
+                !IGNORE_KEY_CODE.includes(e.code) &&
+                !selectedLetter &&
+                !isSelectAll) {
+                e.preventDefault();
+            }
+        } }), value));
+});

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

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

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

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

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ContentEditableWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+    $breakWord?: boolean | undefined;
+}, never>;

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

@@ -0,0 +1,20 @@
+// Libraries
+import styled from 'styled-components';
+import { Typography } from '@antscorp/antsomi-ui/es/components';
+export const ContentEditableWrapper = styled(Typography.Text) `
+  outline-width: 0;
+  caret-color: transparent;
+  border-radius: 4px;
+  display: inline-flex !important;
+  align-items: center !important;
+  word-break: ${props => (props.$breakWord ? 'break-word' : 'normal')};
+
+  &.editable {
+    outline: 2px solid var(--text-link-color);
+    outline-offset: -2px;
+    caret-color: unset;
+  }
+
+  padding: 4px;
+  /* font-weight: bold; */
+`;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-interface IconProps {
+import { IconProps as OriginIconProps } from '../../icons/type';
+export interface IconProps extends OriginIconProps {
     size?: number;
     width?: number;
     height?: number;
@@ -7,4 +8,3 @@ interface IconProps {
     style?: React.CSSProperties;
 }
 export declare const Icon: import("styled-components").StyledComponent<any, any, IconProps, string | number | symbol>;
-export {};

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

@@ -5,7 +5,7 @@ export interface InputProps extends AntdInputProps {
     noborder?: 'true' | 'false' | boolean;
     debounce?: number;
     label?: ReactNode;
-    onAfterChange?: (value: any) => void;
+    onAfterChange?: (value: string) => void;
     errorArchive?: string;
     required?: boolean;
     isReverseMask?: boolean;
@@ -14,6 +14,7 @@ export interface InputProps extends AntdInputProps {
     focused?: boolean;
     errorMsg?: string;
     disableUndo?: boolean;
+    withWrapper?: boolean;
 }
 export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
     Group: React.FC<import("antd/es/input").GroupProps>;

package/es/components/atoms/Input/Input.js

@@ -24,7 +24,7 @@ import { StyledInput } from './styled';
 const PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
 const OriginInput = props => {
     // Props
-    const { debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg } = props, restProps = __rest(props, ["debounce", "errorArchive", "required", "labelColor", "isReverseMask", "isHideErrMessage", "focused", "label", "onAfterChange", "onChange", "errorMsg"]);
+    const { withWrapper, debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg } = props, restProps = __rest(props, ["withWrapper", "debounce", "errorArchive", "required", "labelColor", "isReverseMask", "isHideErrMessage", "focused", "label", "onAfterChange", "onChange", "errorMsg"]);
     // State
     const [value, setValue] = useState(props.value);
     const [isFocused, setFocused] = useState(false);
@@ -76,7 +76,7 @@ const OriginInput = props => {
     if (props.disableUndo) {
         listDisableActions.push('undo');
     }
-    return (React.createElement("div", { className: "input__wrapper" },
+    const content = (React.createElement(React.Fragment, null,
         label && renderRequiredLabel(label),
         React.createElement(StyledInput, Object.assign({}, restProps, { value: value, onBlur: e => {
                 if (!isFocused) {
@@ -85,12 +85,17 @@ const OriginInput = props => {
                 restProps.onBlur && restProps.onBlur(e);
             }, onChange: onChangeInput }, getPreventKeyboardAction(listDisableActions))),
         (restProps.status === 'error' || errorArchive || requiredMsg) && !isHideErrMessage ? (React.createElement(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 } }, errorMsg || errorArchive || requiredMsg)) : null));
+    if (!withWrapper)
+        return content;
+    return React.createElement("div", { className: "input__wrapper" }, content);
 };
 OriginInput.defaultProps = {
     debounce: 400,
     isHideErrMessage: false,
+    withWrapper: true,
 };
 export const Input = OriginInput;
 Input.TextArea = StyledInput.TextArea;
 Input.DefaultInput = AntdInput;
+Input.Password = AntdInput.Password;
 export const { TextArea } = StyledInput;

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,81 @@
+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, { useRef } from 'react';
+// Styled
+import { HorizontalTrack, ThumbBar, VerticalTrack } from './styled';
+const THUMB_SIZE = 4;
+const MARGIN = 3;
+export const Scrollbars = props => {
+    // Props
+    const { autoHide = true, autoHeightMax = 0, className } = props, restProps = __rest(props, ["autoHide", "autoHeightMax", "className"]);
+    // Refs
+    const ref = useRef(null);
+    /**
+     * 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 || ''}`, ref: ref, 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)));
+};

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/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({ 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").Step;
+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>;