@antscorp/antsomi-ui 1.3.5-beta.253 → 1.3.5-beta.255

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>;

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

@@ -0,0 +1,154 @@
+import { Modal, Card, Tag } from 'antd';
+import styled from 'styled-components';
+import { get } from 'lodash';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const StyledModal = styled(Modal) `
+  --modal-padding: 20px;
+
+  &.antsomi-modal {
+    .antsomi-modal-content {
+      max-height: 70vh;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .antsomi-modal-close {
+      &:hover {
+        background-color: transparent;
+      }
+
+      .antsomi-modal-close-x {
+        padding: 10px;
+        font-size: 16px;
+      }
+    }
+
+    .antsomi-modal-header {
+      padding-inline: var(--modal-padding);
+      padding-top: var(--modal-padding);
+      margin-bottom: calc(var(--modal-padding) - 5px);
+
+      .antsomi-modal-title {
+        font-weight: 400;
+        font-size: 14px;
+      }
+    }
+
+    .antsomi-modal-body {
+      flex: 1;
+      overflow: hidden;
+
+      &:hover {
+        overflow: auto;
+      }
+
+      padding-inline: var(--modal-padding);
+      padding-bottom: var(--modal-padding);
+      margin-bottom: 10px;
+      display: flex;
+
+      > .antsomi-menu {
+        flex-shrink: 0;
+        overflow: hidden;
+
+        &:hover {
+          overflow-y: auto;
+        }
+
+        .antsomi-menu-item {
+          width: 200px;
+          padding-inline: 10px;
+          font-weight: bold;
+        }
+      }
+
+      > .content {
+        overflow: hidden;
+        margin-left: 80px;
+
+        &:hover {
+          overflow: auto;
+        }
+      }
+    }
+
+    .antsomi-modal-footer {
+      padding: var(--modal-padding) !important;
+      margin-top: 0;
+      text-align: start;
+      display: flex;
+      justify-content: start;
+      gap: 10px;
+      flex-direction: row-reverse;
+
+      .antsomi-btn + .antsomi-btn {
+        margin: 0;
+      }
+    }
+  }
+`;
+export const StyledCard = styled(Card) `
+  font-size: 12px;
+
+  &.antsomi-card {
+    padding: 15px;
+    background-color: ${get(globalToken, 'blue1_3')};
+
+    > .antsomi-card-cover {
+      padding: 20px;
+    }
+
+    > .antsomi-card-body {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      background-color: transparent;
+      padding: 0px;
+    }
+  }
+`;
+export const CardDefinationContainer = styled.div `
+  > .title {
+    font-size: 16px;
+    font-weight: normal;
+    margin-bottom: 8px;
+    display: block;
+  }
+
+  > .description.antsomi-typography {
+    margin-bottom: 0;
+    color: ${get(globalToken, 'bw8')};
+
+    .antsomi-typography-expand {
+      font-weight: 500;
+    }
+  }
+`;
+export const CardRecommendedContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  > .title {
+    margin-bottom: 8px;
+  }
+
+  > .recomendations {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 8px;
+
+    > .item {
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorText};
+      line-height: 14px;
+      font-size: 12px;
+      padding: 5px 10px;
+      border-radius: 24px;
+
+      &.antsomi-tag-borderless {
+        border-width: 0;
+      }
+    }
+  }
+`;
+export const RecommendItem = styled(Tag) ``;

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

@@ -0,0 +1,26 @@
+import React, { RefCallback } from 'react';
+import { MenuProps, ModalProps, TagProps } from 'antd';
+import { EllipsisConfig } from 'antd/es/typography/Base';
+export type ModalSelectProps = {
+    open?: boolean;
+    value?: string;
+    options?: MenuProps['items'];
+    content?: (active: string | null) => React.ReactNode;
+    onChange?: (active: string) => void;
+    menuRef?: RefCallback<HTMLUListElement>;
+    onOk?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, active: string | null) => void;
+} & Omit<ModalProps, 'onOk'>;
+export type CardProps = {
+    children?: React.ReactNode;
+};
+export type CardDefinationProps = {
+    title?: string;
+    description?: string;
+    descriptionEllipsis?: EllipsisConfig;
+};
+export type CardRecommendedProps = {
+    title?: string;
+    recomendations?: (TagProps & {
+        key?: React.Key;
+    })[];
+};

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

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

package/es/components/molecules/ShareAccess/components/GeneralAccess/styled.js

@@ -1,4 +1,4 @@
-var _a;
+var _a, _b;
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const StyledGeneralAccessRoot = styled.div `
@@ -14,6 +14,7 @@ export const StyledGeneralAccessRoot = styled.div `
     display: flex;
     justify-content: space-between;
     border: 1px solid #e6e6e6;
+    border-radius: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadius}px;
     padding: 8px;
 
     .icon-angle {
@@ -24,7 +25,7 @@ export const StyledGeneralAccessRoot = styled.div `
 
     .accessable-icon {
       font-size: 28px;
-      color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary};
+      color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary};
       display: flex;
       align-items: center;
     }

package/es/components/molecules/ShareAccess/components/PeopleAccess/styled.js

@@ -1,3 +1,5 @@
+var _a;
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const StyledPeopleAccessRoot = styled.div `
   display: flex;
@@ -9,6 +11,7 @@ export const StyledPeopleAccessRoot = styled.div `
   }
 
   .antsomi-list {
+    border-radius: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadius}px;
     border: 1px solid #e6e6e6;
 
     .antsomi-list-items {

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

@@ -45,6 +45,7 @@ export * from './SelectMulti';
 export * from './SelectEventAttribute';
 export * from './DatePickerV2';
 export { EmptyTemplate, EmptyTemplateProps } from './EmptyTemplate';
+export { ModalSelect } from './ModalSelect';
 export * from './PreviewModal';
 export * from './Drawer';
 export * from './DrawerDetail';
@@ -60,3 +61,4 @@ export type { ThumbnailCardProps } from './ThumbnailCard';
 export type { TemplateValueOptions } from './TemplateSaveAs';
 export type { SelectProps as SelectV2Props } from './SelectV2';
 export type { InputNumberProps as InputNumberWithLabelProps } from './InputNumber';
+export type { ModalSelectProps } from './ModalSelect';

package/es/components/molecules/index.js

@@ -45,6 +45,7 @@ export * from './SelectMulti';
 export * from './SelectEventAttribute';
 export * from './DatePickerV2';
 export { EmptyTemplate } from './EmptyTemplate';
+export { ModalSelect } from './ModalSelect';
 export * from './PreviewModal';
 export * from './Drawer';
 export * from './DrawerDetail';

package/es/components/organism/PreviewTemplateModal/components/Banner/index.js

@@ -36,8 +36,7 @@ export const Banner = memo(props => {
             React.createElement("div", { className: classNames({
                     'content-wrapper': true,
                     'animate__animated animate__fadeIn': shouldAnimate,
-                }) }, isMobile ? React.createElement(MobileFrameV2, { id: 'banner-mobile' }, children || null) : children || null),
+                }) }, isMobile ? (React.createElement(MobileFrameV2, { id: "banner-mobile" }, children || null)) : (children || null)),
             showSkeleton && (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "skeleton" }),
-                React.createElement("div", { className: "backdrop" }))))));
+                React.createElement("div", { className: "skeleton" }))))));
 });

package/es/constants/theme.js

@@ -107,7 +107,7 @@ THEME.components = {
     },
     Select: {
         borderRadius: 0,
-        borderRadiusLG: 0,
+        borderRadiusLG: 10,
         borderRadiusSM: 0,
         borderRadiusOuter: 0,
         borderRadiusXS: 0,
@@ -207,6 +207,9 @@ THEME.components = {
     Menu: {
         itemHoverBg: '#F2F9FF',
         activeBarBorderWidth: 0,
+        itemMarginInline: 0,
+        itemMarginBlock: 0,
+        itemBorderRadius: 5,
     },
     Form: {},
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.253",
+  "version": "1.3.5-beta.255",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",