@antscorp/antsomi-ui 1.3.5-beta.98 → 1.3.5-common.2

package/es/components/molecules/ImageEditor/components/ModalShortcut.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ModalShortcutProps {
+    open: boolean;
+    onCancel: () => void;
+}
+declare const ModalShortcut: React.FC<ModalShortcutProps>;
+export default ModalShortcut;

package/es/components/molecules/ImageEditor/components/ModalShortcut.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ModalV2 } from '../../ModalV2';
+import { Flex } from 'antd';
+import { Text } from '../../../atoms';
+import styled from 'styled-components';
+const RowStyled = styled(Flex) `
+  border-bottom: 1px solid #ccc;
+  padding: 6px 0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .row-text {
+    font-size: 14px;
+  }
+  .header {
+    font-weight: bold;
+  }
+  .shortcut {
+    border: 1px solid #ccc;
+    padding: 4px 0;
+    width: 120px;
+    text-align: center;
+    border-radius: 4px;
+  }
+`;
+const SHORTCUT_LIST = [
+    { command: 'Delete', shortcut: 'Delete/Del' },
+    { command: 'Duplicate', shortcut: 'Ctrl + D' },
+    { command: 'Undo', shortcut: 'Ctrl + Z' },
+    { command: 'Redo', shortcut: 'Ctrl + Shift + Z' },
+];
+const ModalShortcut = props => {
+    const { open, onCancel } = props;
+    return (React.createElement(ModalV2, { open: open, onCancel: onCancel, footer: null, destroyOnClose: true, title: "Keyboard shortcut" },
+        React.createElement(Flex, { vertical: true },
+            React.createElement(RowStyled, { justify: "space-between" },
+                React.createElement(Text, { className: "row-text header" }, "Commands"),
+                React.createElement(Text, { className: "row-text header" }, "Shortcut")),
+            SHORTCUT_LIST.map(({ command, shortcut }) => (React.createElement(RowStyled, { key: command, justify: "space-between", align: "center" },
+                React.createElement(Text, { className: "row-text" }, command),
+                React.createElement(Text, { className: "row-text shortcut" }, shortcut)))))));
+};
+export default ModalShortcut;

package/es/components/molecules/ImageEditor/constants.d.ts

@@ -0,0 +1,37 @@
+export declare enum DrawAction {
+    Select = "select",
+    Rectangle = "rectangle",
+    Circle = "circle",
+    Scribble = "freedraw",
+    Arrow = "arrow",
+    Crop = "crop"
+}
+export declare enum ShapeObject {
+    Scribbles = "scribbles",
+    Rectangles = "rectangles",
+    Circles = "circles",
+    Arrows = "arrows",
+    Image = "image"
+}
+export declare const PAINT_OPTIONS: {
+    id: DrawAction;
+    label: string;
+    icon: string;
+}[];
+export declare const DEFAULT_TRANSFORM: {
+    rotation: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+};
+export declare const IMAGE_COORDINATE: {
+    rotation: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    id: string;
+    x: number;
+    y: number;
+};

package/es/components/molecules/ImageEditor/constants.js

@@ -0,0 +1,32 @@
+export var DrawAction;
+(function (DrawAction) {
+    DrawAction["Select"] = "select";
+    DrawAction["Rectangle"] = "rectangle";
+    DrawAction["Circle"] = "circle";
+    DrawAction["Scribble"] = "freedraw";
+    DrawAction["Arrow"] = "arrow";
+    DrawAction["Crop"] = "crop";
+})(DrawAction || (DrawAction = {}));
+export var ShapeObject;
+(function (ShapeObject) {
+    ShapeObject["Scribbles"] = "scribbles";
+    ShapeObject["Rectangles"] = "rectangles";
+    ShapeObject["Circles"] = "circles";
+    ShapeObject["Arrows"] = "arrows";
+    ShapeObject["Image"] = "image";
+})(ShapeObject || (ShapeObject = {}));
+export const PAINT_OPTIONS = [
+    { id: DrawAction.Select, label: 'Select Shapes', icon: 'icon-ants-cursor' },
+    { id: DrawAction.Rectangle, label: 'Draw Rectangle Shape', icon: 'icon-ants-square-outline' },
+    { id: DrawAction.Circle, label: 'Draw Cirle Shape', icon: 'icon-ants-circle-outline' },
+    { id: DrawAction.Arrow, label: 'Draw Arrow Shape', icon: 'icon-ants-arrow-up-square' },
+    { id: DrawAction.Scribble, label: 'Scribble', icon: 'icon-ants-pencil' },
+];
+export const DEFAULT_TRANSFORM = {
+    rotation: 0,
+    scaleX: 1,
+    scaleY: 1,
+    skewX: 0,
+    skewY: 0,
+};
+export const IMAGE_COORDINATE = Object.assign({ id: 'image_id', x: 0, y: 0 }, DEFAULT_TRANSFORM);

package/es/components/molecules/ImageEditor/index.d.ts

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

package/es/components/molecules/ImageEditor/index.js

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

package/es/components/molecules/ImageEditor/reducer.d.ts

@@ -0,0 +1,85 @@
+import { Arrow, Circle, Rectangle, Scribble } from './types';
+type ImageCoordinate = {
+    x: number;
+    y: number;
+    rotation: number;
+    id: string;
+    width?: number;
+    height?: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+};
+export interface CanvasState {
+    scribbles: Scribble[];
+    rectangles: Rectangle[];
+    circles: Circle[];
+    arrows: Arrow[];
+    image?: HTMLImageElement;
+    imageCoordinate: ImageCoordinate;
+}
+type ReducerAction = {
+    type: 'SET_SCRIBBLES';
+    payload: {
+        scribbles: Scribble[];
+        saveHistory?: boolean;
+    };
+} | {
+    type: 'SET_RECTANGLES';
+    payload: {
+        rectangles: Rectangle[];
+        saveHistory?: boolean;
+    };
+} | {
+    type: 'SET_CIRCLES';
+    payload: {
+        circles: Circle[];
+        saveHistory?: boolean;
+    };
+} | {
+    type: 'SET_ARROWS';
+    payload: {
+        arrows: Arrow[];
+        saveHistory?: boolean;
+    };
+} | {
+    type: 'SET_IMAGE';
+    payload: {
+        image: HTMLImageElement | undefined;
+        saveHistory?: boolean;
+    };
+} | {
+    type: 'SET_IMAGE_COORDINATE';
+    payload: {
+        imageCoordinate: Partial<ImageCoordinate>;
+        saveHistory?: boolean;
+    };
+} | {
+    type: 'SET_NEW_STATE';
+    payload: Omit<Partial<CanvasState>, 'imageCoordinate'> & {
+        imageCoordinate?: Partial<ImageCoordinate>;
+    } & {
+        saveHistory?: boolean;
+    };
+} | {
+    type: 'SAVE_HISTORY';
+    payload?: {};
+} | {
+    type: 'UNDO';
+    payload?: {};
+} | {
+    type: 'REDO';
+    payload?: {};
+} | {
+    type: 'RESET';
+    payload: CanvasState;
+};
+interface HistoryReducer {
+    history: CanvasState[];
+    historyStep: number;
+    current: CanvasState;
+}
+export declare const initialReducer: HistoryReducer;
+export declare const reducer: (state: HistoryReducer, action: ReducerAction) => HistoryReducer;
+export {};

package/es/components/molecules/ImageEditor/reducer.js

@@ -0,0 +1,56 @@
+import { IMAGE_COORDINATE } from './constants';
+const initialState = {
+    scribbles: [],
+    rectangles: [],
+    arrows: [],
+    circles: [],
+    image: undefined,
+    imageCoordinate: IMAGE_COORDINATE,
+};
+export const initialReducer = {
+    history: [initialState],
+    historyStep: 0,
+    current: initialState,
+};
+export const reducer = (state, action) => {
+    const { type, payload } = action;
+    switch (type) {
+        case 'SET_SCRIBBLES':
+        case 'SET_RECTANGLES':
+        case 'SET_CIRCLES':
+        case 'SET_ARROWS':
+        case 'SET_IMAGE':
+        case 'SET_IMAGE_COORDINATE':
+        case 'SET_NEW_STATE': {
+            const newHistoryStep = state.historyStep + 1;
+            const newImageCoordinate = Object.assign(Object.assign({}, state.current.imageCoordinate), (type === 'SET_NEW_STATE' || type === 'SET_IMAGE_COORDINATE'
+                ? payload.imageCoordinate || {}
+                : {}));
+            const newState = Object.assign(Object.assign(Object.assign({}, state.current), payload), { imageCoordinate: newImageCoordinate });
+            return Object.assign(Object.assign({}, state), { history: payload.saveHistory
+                    ? state.history.slice(0, newHistoryStep).concat([newState])
+                    : state.history, historyStep: payload.saveHistory ? newHistoryStep : state.historyStep, current: newState });
+        }
+        case 'SAVE_HISTORY': {
+            return Object.assign(Object.assign({}, state), { historyStep: state.historyStep + 1, history: state.history.slice(0, state.historyStep + 1).concat([state.current]) });
+        }
+        case 'UNDO': {
+            if (state.historyStep === 0) {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), { historyStep: state.historyStep - 1, current: state.history[state.historyStep - 1] });
+        }
+        case 'REDO': {
+            if (state.historyStep === state.history.length - 1) {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), { historyStep: state.historyStep + 1, current: state.history[state.historyStep + 1] });
+        }
+        case 'RESET': {
+            return { history: [payload], historyStep: 0, current: payload };
+        }
+        default:
+            break;
+    }
+    return state;
+};

package/es/components/molecules/ImageEditor/styled.d.ts

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

package/es/components/molecules/ImageEditor/styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { Flex } from '../../atoms';
+// export const IconButtonStyled = styled(Button)`
+//   &.antsomi-btn-default.antsomi-btn-icon-only {
+//     width: 30px !important;
+//     height: 30px !important;
+//   }
+// `;
+export const StageWrapperStyled = styled(Flex) `
+  width: ${props => `${props.$width}px`};
+  height: ${props => `${props.$height}px`};
+  border: 1px solid #666;
+  margin-top: 16px;
+`;

package/es/components/molecules/ImageEditor/types.d.ts

@@ -0,0 +1,35 @@
+export type Shape = {
+    id: string;
+    color: string;
+    x?: number;
+    y?: number;
+    rotation: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+};
+export type Rectangle = Shape & {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+export type Circle = Shape & {
+    radius: number;
+    x: number;
+    y: number;
+};
+export type Scribble = Shape & {
+    points: number[];
+};
+export type Arrow = Shape & {
+    points: [number, number, number, number];
+};
+export type CropZone = {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};

package/es/components/molecules/ImageEditor/types.js

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

package/es/components/molecules/ImageEditor/utils.d.ts

@@ -0,0 +1,23 @@
+import { KonvaEventObject } from 'konva/lib/Node';
+/**
+ * Creates a link with the specified URI and name, triggers a download, and removes the link from the document.
+ *
+ * @param {string | undefined} uri - The URI to download from.
+ * @param {string} name - The name to save the file as.
+ */
+export declare const downloadURI: (uri: string | undefined, name: string) => void;
+/**
+ * Returns an object with specific transformation data extracted from the Konva event object.
+ *
+ * @param e - The Konva event object containing transformation data.
+ * @return An object with x, y, rotation, scaleX, scaleY, skewX, and skewY properties.
+ */
+export declare const getTransformData: (e: KonvaEventObject<Event>) => {
+    x: any;
+    y: any;
+    rotation: any;
+    scaleX: any;
+    scaleY: any;
+    skewX: any;
+    skewY: any;
+};

package/es/components/molecules/ImageEditor/utils.js

@@ -0,0 +1,29 @@
+/**
+ * Creates a link with the specified URI and name, triggers a download, and removes the link from the document.
+ *
+ * @param {string | undefined} uri - The URI to download from.
+ * @param {string} name - The name to save the file as.
+ */
+export const downloadURI = (uri, name) => {
+    const link = document.createElement('a');
+    link.download = name;
+    link.href = uri || '';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+};
+/**
+ * Returns an object with specific transformation data extracted from the Konva event object.
+ *
+ * @param e - The Konva event object containing transformation data.
+ * @return An object with x, y, rotation, scaleX, scaleY, skewX, and skewY properties.
+ */
+export const getTransformData = (e) => ({
+    x: e.target.attrs.x,
+    y: e.target.attrs.y,
+    rotation: e.target.attrs.rotation,
+    scaleX: e.target.attrs.scaleX,
+    scaleY: e.target.attrs.scaleY,
+    skewX: e.target.attrs.skewX,
+    skewY: e.target.attrs.skewY,
+});

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ImageResizeHandle } from './types';
+interface ImageResizeTuiEditorProps {
+    className: string;
+    imageUrl: string | undefined;
+    width: number;
+    height: number;
+    defaultValue: any;
+    hideAction: boolean;
+}
+declare const ImageResizeTuiEditor: React.ForwardRefExoticComponent<ImageResizeTuiEditorProps & React.RefAttributes<ImageResizeHandle>>;
+export { ImageResizeTuiEditor };

package/es/components/molecules/ImageResizeTuiEditor/ImageResizeTuiEditor.js

@@ -0,0 +1,76 @@
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
+import { fabric } from 'fabric';
+const ImageResizeTuiEditor = React.forwardRef(({ className, imageUrl, width, height, defaultValue, hideAction }, ref) => {
+    const loadRef = useRef(false);
+    const fabricCanvasRef = useRef(null);
+    const canvasRef = useRef(null);
+    const resetScaleImage = img => {
+        const widthRatio = width / img.width;
+        const heightRatio = height / img.height;
+        img.set({ left: 0, top: 0 }).scale(Math.min(widthRatio, heightRatio));
+        img.set({ left: (width - img.oCoords.br.x) / 2, top: (height - img.oCoords.br.y) / 2 });
+        img.set({
+            borderColor: '#00a1ff',
+            cornerColor: '#fff',
+            cornerSize: 10,
+            cornerStrokeColor: '#00a1ff',
+            // transparentCorners: true,
+        });
+    };
+    const loadImage = url => {
+        fabric.Image.fromURL(url, img => {
+            var _a;
+            resetScaleImage(img);
+            (_a = fabricCanvasRef.current) === null || _a === void 0 ? void 0 : _a.add(img);
+        }, {
+            crossOrigin: '',
+        });
+    };
+    const changeImage = url => {
+        var _a;
+        if (!url)
+            return;
+        (_a = fabricCanvasRef.current) === null || _a === void 0 ? void 0 : _a.forEachObject(obj => {
+            var _a;
+            (_a = fabricCanvasRef.current) === null || _a === void 0 ? void 0 : _a.remove(obj);
+        });
+        loadImage(url);
+    };
+    useImperativeHandle(ref, () => ({
+        getBase64(options) {
+            var _a;
+            const dataURL = (_a = fabricCanvasRef.current) === null || _a === void 0 ? void 0 : _a.toDataURL(Object.assign({ format: 'png', quality: 1, multiplier: 3 }, options));
+            return dataURL;
+        },
+        replaceImageWithUrl(imageUrl) {
+            changeImage(imageUrl);
+        },
+        getCurrentState() {
+            return fabricCanvasRef.current._objects[0];
+        },
+    }), []);
+    useEffect(() => {
+        var _a, _b;
+        if (!loadRef.current) {
+            loadRef.current = true;
+            fabricCanvasRef.current = new fabric.Canvas('tui-image-editor', {
+                width,
+                height,
+            });
+            fabric.Object.prototype.transparentCorners = false;
+        }
+        if (imageUrl) {
+            changeImage(imageUrl);
+        }
+        else if (defaultValue) {
+            (_a = fabricCanvasRef.current) === null || _a === void 0 ? void 0 : _a.forEachObject(obj => {
+                var _a;
+                (_a = fabricCanvasRef.current) === null || _a === void 0 ? void 0 : _a.remove(obj);
+            });
+            (_b = fabricCanvasRef.current) === null || _b === void 0 ? void 0 : _b.add(defaultValue);
+        }
+    }, [imageUrl, defaultValue]);
+    return (React.createElement("div", { className: className },
+        React.createElement("canvas", { ref: canvasRef, id: "tui-image-editor", style: { width, height } })));
+});
+export { ImageResizeTuiEditor };

package/es/components/molecules/ImageResizeTuiEditor/index.d.ts

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

package/es/components/molecules/ImageResizeTuiEditor/index.js

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

package/es/components/molecules/ImageResizeTuiEditor/types.d.ts

@@ -0,0 +1,5 @@
+export type ImageResizeHandle = {
+    getBase64: (options?: any) => string | undefined;
+    replaceImageWithUrl: (imageUrl: string) => void;
+    getCurrentState: () => any;
+};

package/es/components/molecules/ImageResizeTuiEditor/types.js

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

package/es/components/molecules/Modal/Modal.js

@@ -7,10 +7,12 @@ import { StyledModal, WrapperSpin } from './styled';
 export const OriginalModal = memo(props => {
     // Props
     const { loading } = props;
-    return (React.createElement(StyledModal, Object.assign({}, Object.assign(Object.assign({ closeIcon: React.createElement(Icon, { disabled: loading, type: "icon-ants-remove-slim", size: 15 }), footer: (React.createElement(React.Fragment, null,
+    return (React.createElement(StyledModal, Object.assign({ closeIcon: React.createElement(Icon, { disabled: loading, type: "icon-ants-remove-slim", size: 15 }),
+        footer: (React.createElement(React.Fragment, null,
             React.createElement(Button, Object.assign({ type: "primary", onClick: props.onOk }, props.okButtonProps), props.okText ? props.okText : 'OK'),
-            React.createElement(Button, Object.assign({ onClick: props.onCancel }, props.cancelButtonProps), props.cancelText ? props.cancelText : 'Cancel'))), modalRender: node => loading ? (React.createElement(WrapperSpin, null,
-            React.createElement(Spin, { spinning: loading }, node))) : (node) }, props), { maskClosable: loading ? false : props.maskClosable })),
+            React.createElement(Button, Object.assign({ onClick: props.onCancel }, props.cancelButtonProps), props.cancelText ? props.cancelText : 'Cancel'))),
+        modalRender: node => loading ? (React.createElement(WrapperSpin, null,
+            React.createElement(Spin, { spinning: loading }, node))) : (node) }, props, { maskClosable: loading ? false : props.maskClosable }),
         props.header || null,
         props.children || null));
 });

package/es/components/molecules/ModalSelect/Card.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CardProps } from 'antd';
+import { CardDefinationProps, CardRecommendedProps } from './types';
+export declare const Card: (props: CardProps) => React.JSX.Element;
+export declare const CardDefination: (props: CardDefinationProps) => React.JSX.Element;
+export declare const CardRecommended: (props: CardRecommendedProps) => React.JSX.Element;

package/es/components/molecules/ModalSelect/Card.js

@@ -0,0 +1,41 @@
+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 from 'react';
+import { CardDefinationContainer, CardRecommendedContainer, RecommendItem, StyledCard, } from './styled';
+import { Typography } from 'antd';
+import clsx from 'clsx';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+const { Text, Paragraph } = Typography;
+export const Card = (props) => {
+    const { children, bordered = false } = props, rest = __rest(props, ["children", "bordered"]);
+    return (React.createElement(StyledCard, Object.assign({ bordered: bordered }, rest), children));
+};
+export const CardDefination = (props) => {
+    const { title, description, descriptionEllipsis = {
+        rows: 3,
+        symbol: 'Learn more',
+        expandable: true,
+        tooltip: true,
+    }, } = props;
+    return (React.createElement(CardDefinationContainer, null,
+        title && React.createElement(Text, { className: "title" }, title),
+        description && (React.createElement(Paragraph, { ellipsis: descriptionEllipsis, className: "description" }, description))));
+};
+export const CardRecommended = (props) => {
+    const { title, recomendations = [] } = props;
+    return (React.createElement(CardRecommendedContainer, null,
+        title && React.createElement(Text, { className: "title" }, title),
+        React.createElement("div", { className: "recomendations" }, recomendations.map(i => {
+            const { className, color = globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue2, bordered = false } = i;
+            return (React.createElement(RecommendItem, Object.assign({}, i, { key: i.key, color: color, bordered: bordered, className: clsx('item', className) })));
+        }))));
+};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ModalSelectProps } from './types';
+export declare const ModalSelect: (props: ModalSelectProps) => React.JSX.Element;

package/es/components/molecules/ModalSelect/ModalSelect.js

@@ -0,0 +1,55 @@
+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, { useCallback, useEffect, useState } from 'react';
+import { Menu } from 'antd';
+import { StyledModal } from './styled';
+import { isFunction } from 'lodash';
+export const ModalSelect = (props) => {
+    const { value, content, options = [], okButtonProps = {}, cancelButtonProps = {}, title, open: openProp, menuRef: menuRefProp, onChange, onOk } = props, rest = __rest(props, ["value", "content", "options", "okButtonProps", "cancelButtonProps", "title", "open", "menuRef", "onChange", "onOk"]);
+    const [selected, setSelected] = useState(null);
+    const [open, setOpen] = useState(false);
+    const handleSetMenuRef = useCallback((ref) => {
+        var _a;
+        if (!((_a = ref === null || ref === void 0 ? void 0 : ref.menu) === null || _a === void 0 ? void 0 : _a.list))
+            return;
+        if (menuRefProp) {
+            menuRefProp(ref.menu.list);
+        }
+    }, [menuRefProp]);
+    useEffect(() => {
+        if (value === undefined)
+            return;
+        setSelected(value);
+    }, [value]);
+    useEffect(() => {
+        if (openProp === undefined)
+            return;
+        setOpen(openProp);
+    }, [openProp]);
+    const renderContent = () => {
+        if (!isFunction(content))
+            return null;
+        return content(selected || null);
+    };
+    const handleClickItem = (key) => {
+        setSelected(key);
+        if (onChange)
+            onChange(key);
+    };
+    const handleOk = (e) => {
+        if (onOk)
+            onOk(e, selected);
+    };
+    return (React.createElement(StyledModal, Object.assign({}, rest, { open: open, onOk: handleOk, okButtonProps: Object.assign(Object.assign({}, okButtonProps), { className: `${okButtonProps.className} ok-btn` }), cancelButtonProps: Object.assign(Object.assign({}, cancelButtonProps), { className: `${cancelButtonProps.className} cancel-btn` }), title: title || 'Select' }),
+        React.createElement(Menu, { ref: handleSetMenuRef, items: options, selectedKeys: [selected || ''], onClick: info => handleClickItem(info.key) }),
+        React.createElement("div", { className: "content" }, renderContent())));
+};

package/es/components/molecules/ModalSelect/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const ModalSelect: {
+    Modal: (props: import("./types").ModalSelectProps) => import("react").JSX.Element;
+    Card: (props: import("antd").CardProps) => import("react").JSX.Element;
+    CardRecommended: (props: import("./types").CardRecommendedProps) => import("react").JSX.Element;
+    CardDefination: (props: import("./types").CardDefinationProps) => import("react").JSX.Element;
+};
+export type { ModalSelectProps } from './types';

package/es/components/molecules/ModalSelect/index.js

@@ -0,0 +1,8 @@
+import { ModalSelect as Modal } from './ModalSelect';
+import { Card, CardDefination, CardRecommended } from './Card';
+export const ModalSelect = {
+    Modal,
+    Card,
+    CardRecommended,
+    CardDefination,
+};

package/es/components/molecules/ModalSelect/styled.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("antd").ModalProps> & import("antd/es/modal/confirm").ModalStaticFunctions & {
+    useModal: typeof import("antd/es/modal/useModal").default;
+    destroyAll: () => void;
+    config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => import("react").JSX.Element;
+}, any, {}, never>;
+export declare const StyledCard: import("styled-components").StyledComponent<import("antd/es/card").CardInterface, any, {}, never>;
+export declare const CardDefinationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardRecommendedContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RecommendItem: import("styled-components").StyledComponent<import("antd").TagType, any, {}, never>;