@antscorp/antsomi-ui 1.3.2 → 1.3.3-beta.10

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

@@ -0,0 +1,80 @@
+var _a;
+// Libraries
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
+import styled from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const IconSelectionWrapper = styled.div `
+  width: 100%;
+  padding: 5px;
+  aspect-ratio: 1.74;
+  border: 1px solid #f0f0f0;
+  box-sizing: border-box;
+
+  .transparent-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    gap: 15px;
+    aspect-ratio: 1.74;
+    background: url('data:image/svg+xml;base64, PHN2ZyBoZWlnaHQ9IjEwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMCAyNTZoMjU2djI1NkgweiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMjUiIGQ9Ik0yNTYgMjU2aDI1NnYyNTZIMjU2eiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMjU2IDBoMjU2djI1NkgyNTZ6Ij48L3BhdGg+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLW9wYWNpdHk9Ii4yNSIgZD0iTTAgMGgyNTZ2MjU2SDB6Ij48L3BhdGg+PC9zdmc+')
+      repeat rgb(249, 251, 255);
+  }
+`;
+export const WrapperListRender = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100px;
+  height: auto;
+  text-align: center;
+
+  &:hover .ants-hover {
+    border-width: 2px;
+  }
+
+  &.ants-group:hover .group-hover {
+    opacity: 1;
+  }
+`;
+export const WrapperListItemRender = styled.div `
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+  height: 100px;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(224 224 224 / var(--tw-border-opacity));
+  border-style: solid;
+  box-sizing: border-box;
+`;
+export const CustomButton = styled(Button) `
+  position: absolute !important;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  z-index: 3;
+  opacity: 0;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+`;
+export const Overlay = styled.div `
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  z-index: 2;
+  background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bgLightTransparent};
+  opacity: 0;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+`;

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

@@ -0,0 +1,26 @@
+import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import { ComponentPropsWithoutRef } from 'react';
+import { ICON_TYPE } from './constants';
+export interface IconSelectionProps {
+    wrapperClassName?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    labelHeadingModal?: string;
+    searchPlaceholder?: string;
+    onChange?: (icon: string) => void;
+    onRemoveIcon?: () => void;
+    onChangeSvg?: Function;
+    icon?: string;
+    isOpen?: boolean;
+    iconTypes?: IconType[];
+    limitShowIcon?: number;
+}
+export type IconSelectionRendererProps = (({
+    iconType: typeof ICON_TYPE.FONT_AWESOME;
+} & Omit<FontAwesomeIconProps, 'icon'>) | ({
+    iconType: typeof ICON_TYPE.CUSTOM;
+} & ComponentPropsWithoutRef<'svg'>)) & {
+    iconName: string;
+};
+export type IconType = (typeof ICON_TYPE)[keyof typeof ICON_TYPE];
+export declare const isIconType: (iconType: unknown) => iconType is IconType;

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

@@ -0,0 +1,2 @@
+import { ICON_TYPE } from './constants';
+export const isIconType = (iconType) => iconType === ICON_TYPE.CUSTOM || iconType === ICON_TYPE.FONT_AWESOME;

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

@@ -0,0 +1,4 @@
+export declare const serializeIcon: (icon: string) => {
+    iconType: import("./types").IconType;
+    iconName: string;
+} | null;

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

@@ -0,0 +1,13 @@
+import { FONTAWESOME_ICONS, ICON_TYPE } from './constants';
+import { isIconType } from './types';
+export const serializeIcon = (icon) => {
+    const [iconType, ...rest] = icon.split(' ');
+    if (isIconType(iconType)) {
+        return { iconType, iconName: rest.join(' ') };
+    }
+    // Handle for older data don't have icon-type prefix
+    if (FONTAWESOME_ICONS.includes(icon)) {
+        return { iconType: ICON_TYPE.FONT_AWESOME, iconName: icon };
+    }
+    return null;
+};

package/es/components/molecules/InputNumber/index.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;
+};
+// Libraries
+import React, { useEffect, useMemo, useState } from 'react';
+import { InputNumber as AntdInputNumber } from 'antd';
+// Components
+import { Icon, RequiredLabel, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+// Utils
+import { getPreventKeyboardAction } from '@antscorp/antsomi-ui/es/utils/web';
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+const PATH = '@antscorp/antsomi-ui/es/app/components/molecules/InputNumber/index.tsx';
+export const InputNumber = props => {
+    const { label, required, focused, errorMsg, onChange, className } = props, restOf = __rest(props, ["label", "required", "focused", "errorMsg", "onChange", "className"]);
+    const [isFocused, setFocused] = useState(false);
+    const requiredMsg = useMemo(() => {
+        let msg = '';
+        const isEmptyValue = props.value == null;
+        if (required && isEmptyValue && isFocused) {
+            msg = 'This field is required';
+        }
+        return msg;
+    }, [props.value, required, isFocused]);
+    useEffect(() => {
+        if (focused) {
+            setFocused(focused);
+        }
+    }, [focused]);
+    const onChangeInputNumber = (value) => {
+        try {
+            if (typeof onChange !== 'function') {
+                return;
+            }
+            if (required) {
+                if (value !== null) {
+                    onChange(value);
+                }
+                return;
+            }
+            onChange(value);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onChangeInputNumber',
+                args: {},
+            });
+        }
+    };
+    const renderRequiredLabel = (label) => {
+        if (required) {
+            return (React.createElement(RequiredLabel, { color: "#666666", style: { marginBottom: 5 } }, label));
+        }
+        return (React.createElement(Text, { color: "#666666", style: { marginBottom: 5 } }, label));
+    };
+    const listDisableActions = [];
+    if (props.disableUndo) {
+        listDisableActions.push('undo');
+    }
+    return (React.createElement("div", { className: className },
+        label && renderRequiredLabel(label),
+        React.createElement(AntdInputNumber, Object.assign({}, restOf, { className: "--show-handler", required: required, onChange: onChangeInputNumber, onBlur: e => {
+                if (!focused) {
+                    setFocused(true);
+                }
+                props.onBlur && props.onBlur(e);
+            }, upHandler: React.createElement(Icon, { type: "icon-ants-caret-up", size: 9 }), downHandler: React.createElement(Icon, { type: "icon-ants-caret-down", size: 9 }) }, getPreventKeyboardAction(listDisableActions))),
+        (props.status === 'error' && errorMsg) || requiredMsg ? (React.createElement(Text, { color: "#ff4d4f", style: { marginBottom: 5, marginLeft: 8 } }, errorMsg || requiredMsg)) : null));
+};
+InputNumber.defaultProps = {
+    required: false,
+    width: 57,
+};

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { InputNumberProps } from '../InputNumber';
+type TUnit = 'px' | '%' | any;
+/**
+ * @default
+ * ```
+ * const DEFAULT_UNIT = {
+      PX: {
+        value: 'px',
+        label: 'PX',
+      },
+      PERCENT: {
+        value: '%',
+        label: '%',
+      },
+    };
+ * ```
+ */
+interface unitData {
+    [key: string]: {
+        value: string;
+        label: string;
+    };
+}
+interface InputNumberWithUnitProps extends InputNumberProps {
+    unit?: TUnit;
+    unitData?: unitData;
+    onChangeUnit: (unit: TUnit) => void;
+}
+export declare const InputNumberWithUnit: React.FC<InputNumberWithUnitProps>;
+export {};

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

@@ -0,0 +1,37 @@
+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 { Text } from '@antscorp/antsomi-ui/es/components/atoms';
+import React from 'react';
+import { InputNumber } from '../InputNumber';
+import { InputNumberWithUnitWrapper } from './styled';
+// Constants
+const DEFAULT_UNIT = {
+    PX: {
+        value: 'px',
+        label: 'PX',
+    },
+    PERCENT: {
+        value: '%',
+        label: '%',
+    },
+};
+export const InputNumberWithUnit = props => {
+    // Props
+    const { unit, unitData, onChangeUnit, className } = props, restOf = __rest(props, ["unit", "unitData", "onChangeUnit", "className"]);
+    return (React.createElement(InputNumberWithUnitWrapper, { className: className },
+        React.createElement(InputNumber, Object.assign({}, restOf)),
+        Object.values(unitData || DEFAULT_UNIT).map(({ value, label }) => (React.createElement(Text, { key: value, className: `unit-label ${unit === value ? 'selected' : ''}`, onClick: () => onChangeUnit(value) }, label)))));
+};
+InputNumberWithUnit.defaultProps = {
+    unit: 'px',
+};

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

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

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

@@ -0,0 +1,20 @@
+var _a, _b;
+// Libraries
+import styled from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const InputNumberWithUnitWrapper = styled.div `
+  display: flex;
+  align-items: center;
+
+  .unit-label {
+    cursor: pointer;
+    margin-left: 10px;
+    color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon};
+
+    &.selected {
+      color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary};
+      font-weight: bold;
+    }
+  }
+`;

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

@@ -0,0 +1,7 @@
+import React, { CSSProperties } from 'react';
+import { InputProps } from '@antscorp/antsomi-ui/es/components/atoms/Input';
+interface InputSearchProps extends InputProps {
+    inputStyle?: CSSProperties;
+}
+export declare const InputSearch: React.FC<InputSearchProps>;
+export {};

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

@@ -0,0 +1,23 @@
+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, { memo } from 'react';
+// Components
+import { Icon, Input } from '@antscorp/antsomi-ui/es/components/atoms';
+// Styled
+import { Wrapper } from './styled';
+export const InputSearch = memo(props => {
+    const { className, style, inputStyle } = props, restOf = __rest(props, ["className", "style", "inputStyle"]);
+    return (React.createElement(Wrapper, { tabIndex: -1, className: className, style: style },
+        React.createElement(Input, Object.assign({}, restOf, { style: inputStyle })),
+        React.createElement(Icon, { type: "icon-ants-search-2", className: "__icon-search" })));
+});

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

@@ -0,0 +1,48 @@
+var _a, _b, _c, _d, _e;
+// Libraries
+import styled from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const Wrapper = styled.div `
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  box-sizing: border-box;
+
+  .input__wrapper {
+    width: 100%;
+  }
+
+  &:has(input:focus) {
+    .__icon-search {
+      background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue0};
+      border-bottom: 1px solid #1f7ac4;
+    }
+  }
+
+  &:has(input:hover) {
+    .__icon-search {
+      background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue0};
+      border-bottom: 1px solid #1f7ac4;
+    }
+  }
+
+  .__icon-search {
+    height: 31px;
+    padding-right: 4px;
+    background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw0};
+    cursor: pointer;
+    color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorIcon};
+    font-size: 24px;
+    line-height: 32px;
+    border-bottom: 1px solid #b8cfe6;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    box-sizing: border-box;
+
+    &:hover {
+      color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorPrimary};
+    }
+  }
+`;

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

@@ -0,0 +1,23 @@
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { ModalProps as AntdModalProps } from 'antd';
+export interface ModalProps extends AntdModalProps {
+    header?: React.ReactNode;
+    headerStyle?: {
+        [key: string]: any;
+    };
+    rightFooter?: boolean;
+    loading?: boolean;
+}
+export declare const OriginalModal: React.FC<ModalProps>;
+export declare const Modal: string & import("styled-components").StyledComponentBase<React.FC<AntdModalProps> & 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) => React.JSX.Element;
+}, any, import("./styled").CustomModalProps, never> & import("hoist-non-react-statics").NonReactStatics<React.FC<AntdModalProps> & 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) => React.JSX.Element;
+}, {}> & React.FC<ModalProps>;

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

@@ -0,0 +1,26 @@
+// Libraries
+import React, { memo } from 'react';
+// Atoms
+import { Button, Icon, Spin } from '@antscorp/antsomi-ui/es/components/atoms';
+// Styled
+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,
+            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 })),
+        props.header || null,
+        props.children || null));
+});
+OriginalModal.displayName = 'OriginalModal';
+export const Modal = OriginalModal;
+Modal.confirm = (props) => StyledModal.confirm(Object.assign({ cancelText: 'Cancel' }, props));
+Modal.success = StyledModal.success;
+Modal.info = StyledModal.info;
+Modal.error = StyledModal.error;
+Modal.warning = StyledModal.warning;
+Modal.defaultProps = {
+    loading: false,
+};

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export interface CustomModalProps {
+    header?: React.ReactNode;
+    headerStyle?: {
+        [key: string]: any;
+    };
+    rightFooter?: boolean;
+}
+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, CustomModalProps, never>;
+export declare const WrapperSpin: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,78 @@
+var _a, _b, _c, _d, _e, _f, _g;
+// Libraries
+import styled, { css } from 'styled-components';
+import { Modal as AntdModal } from 'antd';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+const JSToCSS = cssObj => {
+    let cssString = '';
+    for (const objectKey in cssObj) {
+        cssString += `${objectKey.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`)}: ${cssObj[objectKey]};\n`;
+    }
+    return cssString;
+};
+export const StyledModal = styled(AntdModal) `
+  .antsomi-modal-content {
+    .antsomi-modal-close {
+      .antsomi-modal-close-x {
+        width: 50px;
+        height: 50px;
+        line-height: 50px;
+      }
+    }
+    .antsomi-modal-header {
+      padding: 20px;
+      padding-bottom: 0;
+      border-style: 0px;
+
+      ${props => (props.headerStyle ? JSToCSS(props.headerStyle) : '')}
+      ${p => p.header
+    ? css `
+              display: none;
+            `
+    : ''}
+    }
+    .antsomi-modal-body {
+      padding: 20px;
+    }
+    .antsomi-modal-footer {
+      display: flex;
+      align-items: center;
+      padding-left: 20px;
+      padding-right: 20px;
+
+      ${p => p.rightFooter
+    ? css `
+              justify-content: flex-end;
+            `
+    : css `
+              justify-content: flex-start;
+            `}
+
+      .antsomi-btn {
+        height: 28px;
+        border-radius: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadius}px;
+        font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px;
+        color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary};
+        font-weight: 700;
+
+        &:hover {
+          color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorTextHover};
+        }
+
+        &.antsomi-btn-primary {
+          background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorPrimary};
+          color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw0};
+
+          &:hover {
+            background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.colorTextHover};
+          }
+        }
+      }
+    }
+  }
+`;
+export const WrapperSpin = styled.div `
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+`;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Popconfirm: import("react").ForwardRefExoticComponent<import("antd").PopconfirmProps & import("react").RefAttributes<unknown>> & {
+    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popconfirm/PurePanel").PurePanelProps>;
+};

package/es/components/molecules/Popconfirm/Popconfirm.js

@@ -0,0 +1,2 @@
+import { Popconfirm as AntdPopconfirm } from 'antd';
+export const Popconfirm = AntdPopconfirm;

package/es/components/molecules/PopupDraggable/PopupDraggable.js

@@ -0,0 +1,52 @@
+// Libraries
+import React, { useState } from 'react';
+import Draggable from 'react-draggable';
+import { Resizable } from 'react-resizable';
+import 'react-resizable/css/styles.css';
+import '@antscorp/icons/main.css';
+// Components
+import { PopupContainer, WrapperIcon } from './styled';
+import Icon from '@antscorp/icons';
+const PopupDraggable = props => {
+    const { id, name, bounds, isHiddenClose, isHiddenResizing, isShowResizeHover, styleContainer, callback, defaultPosition, children, } = props;
+    const [activeDrags, setActiveDrags] = useState(0);
+    const [width, setWidth] = useState(300);
+    const [height, setHeight] = useState(window.innerHeight || 300);
+    const handleStart = () => {
+        setActiveDrags(activeDrags + 1);
+    };
+    const handleStop = (_, data) => {
+        if (defaultPosition &&
+            typeof defaultPosition.x === 'number' &&
+            typeof defaultPosition.y === 'number' &&
+            typeof callback === 'function') {
+            const { x = 0, y = 0 } = data;
+            // Mục tiêu giữ lại vị trí của popup sau khi unmount -> remount
+            callback('SET_POSITION_DRAG', { name, x, y });
+        }
+        setActiveDrags(activeDrags - 1);
+    };
+    const handleResize = (event, { node, size, handle }) => {
+        setWidth(size.width);
+        setHeight(size.height);
+    };
+    return (React.createElement(Draggable, { handle: "strong", 
+        // axis="x"
+        defaultPosition: defaultPosition, bounds: bounds, onStart: handleStart, onStop: handleStop },
+        React.createElement(Resizable, { width: width, height: height, onResize: handleResize, 
+            // handlewrapperclass="resize-handle"
+            resizeHandles: ['w', 'e', 'n', 's'] },
+            React.createElement(PopupContainer, { id: id, isHiddenResizing: isHiddenResizing, isShowResizeHover: isShowResizeHover, style: Object.assign({ width, height }, styleContainer), className: "popup-container no-cursor" },
+                !isHiddenClose && (React.createElement(WrapperIcon, { onClick: () => callback('ON_CLOSE_POPUP', { name }) },
+                    React.createElement(Icon, { type: "icon-ants-remove-slim", className: "icon-close" }))),
+                children))));
+};
+PopupDraggable.defaultProps = {
+    name: 'popup_dynamic',
+    bounds: '',
+    defaultPosition: { x: 0, y: 0 },
+    isShowResizeHover: false,
+    callback: () => { },
+    children: 'Default Body',
+};
+export { PopupDraggable };

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

@@ -0,0 +1,52 @@
+var _a, _b;
+// Libraries
+import styled, { css } from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const PopupContainer = styled.div `
+  position: fixed !important;
+  top: 0px;
+  right: 0px;
+  min-width: 450px;
+  min-height: 50px;
+  background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0};
+  box-shadow: 0px 0 6px 2px rgba(0, 0, 0, 0.1);
+  z-index: 1003;
+
+  &.no-cursor {
+    cursor: auto;
+  }
+
+  div {
+    box-sizing: border-box !important;
+  }
+
+  ${props => props.isHiddenResizing &&
+    css `
+      .react-resizable-handle {
+        display: none;
+      }
+    `}
+
+  ${props => props.isShowResizeHover &&
+    css `
+      &:hover .react-resizable-handle {
+        display: block;
+        z-index: 99;
+      }
+    `}
+`;
+export const WrapperIcon = styled.div `
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  .icon-close {
+    font-size: 12px;
+    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon};
+  }
+`;