diff --git a/src/alert/style/index.less b/src/alert/style/index.less index e28d3c2a21..13cdf95fe4 100644 --- a/src/alert/style/index.less +++ b/src/alert/style/index.less @@ -1,4 +1,4 @@ -@import '../../stylesheet/variables/index.less'; +@import (reference) '../../stylesheet/variables/index.less'; @alert-prefix-cls: ~'@{component-prefix}-alert'; diff --git a/src/legacy/alert/Alert.tsx b/src/legacy/alert/Alert.tsx deleted file mode 100644 index b264e5ccfe..0000000000 --- a/src/legacy/alert/Alert.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React, { useState } from 'react'; -import classnames from 'classnames'; -import { usePrefixCls } from '@gio-design/utils'; - -import _ from 'lodash'; -import { - CheckCircleFilled, - WarningCircleFilled, - InfoCircleFilled, - CloseCircleFilled, - CloseOutlined, -} from '@gio-design/icons'; -import { PaletteGreen7, PaletteYellow7, PaletteRed5, PaletteBlue6 } from '@gio-design/tokens'; -import useSize from '../../utils/hooks/useSize'; -import { AlertProps } from './interfaces'; - -export const Alert: React.FC = (props: AlertProps) => { - const prefixCls = usePrefixCls('alert-legacy'); - const [alertStatus, setAlertStatus] = useState(true); - const { message, description, closeable, showIcon = false, onClose, icon, type, size: customizeSize, style } = props; - - const size = useSize(); - const mergedSize = customizeSize ?? size; - const getIcon = () => { - switch (type) { - case 'success': - return ; - case 'warning': - return ; - case 'error': - return ; - case 'info': - return ; - default: - return icon || ; - } - }; - - const closeAlert = () => { - setAlertStatus(false); - onClose?.(); - }; - - return alertStatus ? ( -
- {showIcon &&
{getIcon()}
} -
- {message &&
{message}
} - {description &&
{description}
} -
- {closeable && ( -
- -
- )} -
- ) : null; -}; - -export default Alert; diff --git a/src/legacy/alert/demos/Alert.stories.tsx b/src/legacy/alert/demos/Alert.stories.tsx deleted file mode 100644 index aa82c5be06..0000000000 --- a/src/legacy/alert/demos/Alert.stories.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import { Story, Meta } from '@storybook/react/types-6-0'; -import { action } from '@storybook/addon-actions'; -import Docs from './AlertPage'; -import Alert from '../index'; -import { AlertProps } from '../interfaces'; -import '../style'; - -export default { - title: 'Legacy/Alert', - component: Alert, - parameters: { - docs: { - page: Docs, - }, - }, -} as Meta; - -const Template: Story = (args) => ( -
- -
- -
- -
- -
-); - -export const Default = Template.bind({}); -Default.args = { - showIcon: true, - closeable: true, - message: '标题', - description: '提示正文', -}; - -export const NoDescription = Template.bind({}); -NoDescription.args = { - showIcon: true, - closeable: true, - message: '标题', -}; - -export const NoTitle = Template.bind({}); -NoTitle.args = { - showIcon: true, - closeable: true, - description: '提示正文', -}; - -export const NoIcon = Template.bind({}); -NoIcon.args = { - closeable: true, - message: '标题', - description: '提示正文', -}; - -export const NoClose = Template.bind({}); -NoClose.args = { - showIcon: true, - message: '标题', - description: '提示正文', -}; diff --git a/src/legacy/alert/demos/AlertPage.tsx b/src/legacy/alert/demos/AlertPage.tsx deleted file mode 100644 index 96925db0db..0000000000 --- a/src/legacy/alert/demos/AlertPage.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import { Canvas, Title, Heading, Story, Subheading, ArgsTable } from '@storybook/addon-docs'; -import { useIntl } from 'react-intl'; -import Alert from '../Alert'; - -export default function ListPage() { - const { formatMessage } = useIntl(); - - return ( - <> - {formatMessage({ defaultMessage: 'Alert 警告信息' })} -

- {formatMessage({ - defaultMessage: - '当某个页面需要向用户显示警告、提示的信息时使用，这部分信息是用户必须了解的，例如未对公众号进行授权则影响某些功能的使用。通常为页面级提示信息，提示重要性高，通常位置在页面或弹窗顶部。Alert宽度根据不同使用场景，可以设置为固定宽度，内容超长时，换行展示。', - })} -

- {formatMessage({ defaultMessage: '代码演示' })} - {formatMessage({ defaultMessage: 'Icon、标题、正文、关闭按钮' })} - - - - - {formatMessage({ defaultMessage: 'Icon & 标题 & 关闭' })} - - - - - {formatMessage({ defaultMessage: 'Icon & 正文 & 关闭' })} - - - - - {formatMessage({ defaultMessage: '标题 & 正文 & 关闭' })} - - - - - {formatMessage({ defaultMessage: 'Icon & 标题 & 正文 ' })} - - - - - {formatMessage({ defaultMessage: '参数说明' })} - - - ); -} diff --git a/src/legacy/alert/index.tsx b/src/legacy/alert/index.tsx deleted file mode 100644 index 181c94ff1a..0000000000 --- a/src/legacy/alert/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import Alert from './Alert'; - -export { AlertProps } from './interfaces'; -export default Alert; diff --git a/src/legacy/alert/interfaces.ts b/src/legacy/alert/interfaces.ts deleted file mode 100644 index 61278c84e1..0000000000 --- a/src/legacy/alert/interfaces.ts +++ /dev/null @@ -1,42 +0,0 @@ -export interface AlertProps { - /** - 指定警告提示的样式 - */ - type?: 'success' | 'info' | 'warning' | 'error'; - /** - 指定警告的尺寸 - */ - size?: 'small' | 'middle'; - /** - 是否显示关闭按钮 - */ - closeable?: boolean; - /** - 自定义关闭按钮 - */ - closeText?: React.ReactNode; - /** - 警告提示的辅助性文字介绍 - */ - description?: React.ReactNode; - /** - 警告提示内容 - */ - message?: React.ReactNode; - /** - 是否显示辅助图标 - */ - showIcon?: boolean; - /** - 自定义图标，showIcon 为 true 时有效 - */ - icon?: React.ReactNode; - /** - 关闭时触发的回调函数 - */ - onClose?: () => void; - /** - 外层样式 - */ - style?: React.CSSProperties; -} diff --git a/src/legacy/alert/style/index.less b/src/legacy/alert/style/index.less deleted file mode 100644 index a1d4f4f5bc..0000000000 --- a/src/legacy/alert/style/index.less +++ /dev/null @@ -1,116 +0,0 @@ -@import '../../../stylesheet/index.less'; - -@alert-prefix-cls-legacy: ~'@{component-prefix}-alert-legacy'; - -.@{alert-prefix-cls-legacy} { - display: flex; - align-items: center; - box-sizing: border-box; - width: 100%; - padding: 16px 16px; - border-radius: 6px; - transition: all ease 0.8s; - - & &-icon { - flex-shrink: 0; - align-self: flex-start; - height: 100%; - padding-top: 1px; - } - - & .@{alert-prefix-cls-legacy}-content { - flex: 1; - margin: 0 8px; - color: @color-text-alert-content; - font-size: @size-font-14; - font-family: @font-family-primary; - line-height: 22px; - - & .@{alert-prefix-cls-legacy}-content-title { - width: 100%; - overflow: hidden; - font-weight: @weight-font-medium; - text-overflow: ellipsis; - } - - & .@{alert-prefix-cls-legacy}-content-description { - width: 100%; - letter-spacing: 0; - } - } - - & .@{alert-prefix-cls-legacy}-closeIcon { - flex-shrink: 0; - align-self: flex-start; - font-weight: @weight-font-semi-bold; - cursor: pointer; - } -} - -.@{alert-prefix-cls-legacy}-close { - display: none; -} - -.@{alert-prefix-cls-legacy}-info { - background-color: @color-background-alert-information; - - & .@{alert-prefix-cls-legacy}-closeIcon { - svg { - fill: @palette-blue-6; - } - } - - & .@{alert-prefix-cls-legacy}-icon { - svg { - fill: @palette-blue-6; - } - } -} - -.@{alert-prefix-cls-legacy}-success { - background-color: @color-background-alert-success; - - & .@{alert-prefix-cls-legacy}-closeIcon { - fill: @palette-green-6; - } - - & .@{alert-prefix-cls-legacy}-icon { - fill: @palette-green-6; - } -} - -.@{alert-prefix-cls-legacy}-warning { - background-color: @color-background-alert-warning; - - & .@{alert-prefix-cls-legacy}-closeIcon { - svg { - fill: @palette-yellow-6; - } - } - - & .@{alert-prefix-cls-legacy}-icon { - svg { - fill: @palette-yellow-6; - } - } -} - -.@{alert-prefix-cls-legacy}-error { - background-color: @color-background-alert-error; - - & .@{alert-prefix-cls-legacy}-closeIcon { - fill: @palette-red-6; - } - - & .@{alert-prefix-cls-legacy}-icon { - fill: @palette-red-6; - } -} - -.@{alert-prefix-cls-legacy}-small { - padding: 8px 16px; - - & .@{alert-prefix-cls-legacy}-content { - font-size: @size-font-12; - } -} diff --git a/src/legacy/alert/style/index.ts b/src/legacy/alert/style/index.ts deleted file mode 100644 index d74e52ee9f..0000000000 --- a/src/legacy/alert/style/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './index.less'; diff --git a/src/legacy/avatar/Avatar.tsx b/src/legacy/avatar/Avatar.tsx deleted file mode 100644 index 7afeef512a..0000000000 --- a/src/legacy/avatar/Avatar.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import React, { useState, useEffect, useRef } from 'react'; -import classNames from 'classnames'; -import { MoreOutlined, UserOutlined } from '@gio-design/icons'; -import { isNil, isUndefined } from 'lodash'; -import { usePrefixCls } from '@gio-design/utils'; -import Tooltip from '../tooltip'; -import { AvatarProps } from './interfaces'; -import composeRef from '../../utils/composeRef'; - -const Avatar = React.forwardRef((props: AvatarProps, ref: React.Ref) => { - const { - className, - size = 'default', - droppable = false, - children: userName, - src, - omit = true, - displayTooltip = false, - prefixCls: customizePrefixCls, - placement = 'bottom', - tooltipTitle, - mode = 'circle', - backgroundColor, - icon, - ...rest - } = props; - - const [isImgExist, setIsImgExist] = useState(src !== undefined); - const [scale, setScale] = useState(1); - const nodeRef = useRef(null); - const childrenRef = useRef(null); - const mergedRef = composeRef(ref, nodeRef); - - useEffect(() => { - setIsImgExist(!isUndefined(src)); - }, [src]); - - useEffect(() => { - if (nodeRef.current && childrenRef.current) { - const nodeWidth = nodeRef.current.offsetWidth; - const childrenWidth = childrenRef.current.offsetWidth; - setScale(nodeWidth - 8 < childrenWidth ? (nodeWidth - 8) / childrenWidth : 1); - } - }, [userName, isImgExist]); - - const prefixCls = usePrefixCls('avatar-legacy', customizePrefixCls); - const classString = classNames(className, prefixCls, { - [`${prefixCls}-sm`]: size === 'small', - [`${prefixCls}-df`]: size === 'default', - [`${prefixCls}-lg`]: size === 'large', - [`${prefixCls}-hg`]: size === 'huge', - [`${prefixCls}-square`]: mode === 'square', - }); - - const childrenStyle: React.CSSProperties = { - transform: `scale(${scale}) translateX(-50%)`, - }; - - const renderMore = () => { - if (droppable) { - return ( -
- -
- ); - } - return null; - }; - - const renderAvatar = () => { - if (!!src && isImgExist) { - return avatar setIsImgExist(false)} />; - } - if (icon) { - return {icon}; - } - if (!userName) { - return ( - - - - ); - } - if (typeof userName === 'string') { - const prefixUserName = omit && typeof userName === 'string' ? userName.trim()[0]?.toUpperCase() : userName.trim(); - return ( - - {prefixUserName} - - ); - } - return null; - }; - - const renderTooltip = (child: React.ReactElement) => - displayTooltip ? ( - - {child} - - ) : ( - child - ); - - return renderTooltip( - // For Dropdown trigger will set Event on rest - // eslint-disable-next-line react/jsx-props-no-spreading - - {renderMore()} - {renderAvatar()} - - ); -}); - -export default Avatar; diff --git a/src/legacy/avatar/AvatarGroup.tsx b/src/legacy/avatar/AvatarGroup.tsx deleted file mode 100644 index a678e17b7a..0000000000 --- a/src/legacy/avatar/AvatarGroup.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import _ from 'lodash'; -import { usePrefixCls } from '@gio-design/utils'; -import Avatar from './Avatar'; -import { AvatarGroupProps, UserAvatarType } from './interfaces'; - -const AvatarGroup: React.FC = (props: AvatarGroupProps) => { - const { number = 5, users = [], className, placement = 'bottom', style, displayTooltip = true } = props; - const prefixCls = usePrefixCls('avatar-legacy'); - - let children = null; - const renderAvatarGroup = (sliceUsers: UserAvatarType[]) => - sliceUsers.map((user) => ( - - {user.name} - - )); - const renderAvatarRest = (restUsers: UserAvatarType[]) => ( - {`+${restUsers.length}`} - ); - const classString = classNames(className, `${prefixCls}-group`); - - if (users.length === 0) { - return null; - } - if (users.length <= number) { - children = renderAvatarGroup(users); - } else { - const sliceUsers = _.slice(users, 0, number - 1); - const restUsers = _.slice(users, number - 1, users.length); - children = ( - <> - {renderAvatarGroup(sliceUsers)} - {renderAvatarRest(restUsers)} - - ); - } - - return ( -
- {children} -
- ); -}; -export default AvatarGroup; diff --git a/src/legacy/avatar/demos/Avatar.stories.tsx b/src/legacy/avatar/demos/Avatar.stories.tsx deleted file mode 100644 index f4b52789b8..0000000000 --- a/src/legacy/avatar/demos/Avatar.stories.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import React from 'react'; -import { Story, Meta } from '@storybook/react/types-6-0'; -import { HomeFilled } from '@gio-design/icons'; -import Docs from './AvatarPage'; -import Avatar, { AvatarGroup, AvatarGroupProps, AvatarProps } from '../index'; -import '../style'; -import '../style/demo.stories.less'; - -export default { - title: 'Legacy/Avatar', - component: Avatar, - parameters: { - docs: { - page: Docs, - }, - }, -} as Meta; - -const Template: Story = (args) => ( -
- - li - - li - 这是一个很长的描述 - - 这是一个很长的描述 - - } /> -
-); - -export const Default = Template.bind({}); -Default.args = { - droppable: false, - size: 'default', - omit: true, - placement: 'top', - displayTooltip: true, - tooltipTitle: 'li', -}; - -const SizeTemplate: Story = (args) => ( - <> -
- - 李 - - - 李 - - - 李 - - - 李 - -
-
-
- - 李 - - - 李 - - - 李 - - - 李 - -
- -); -export const Size = SizeTemplate.bind({}); - -const HoverTemplate: Story = (args) => ( - <> - - - 张 - } /> - -); -export const Hover = HoverTemplate.bind({}); -Hover.args = { - droppable: true, -}; - -const GroupTempalte: Story = (args) => ; - -export const Group = GroupTempalte.bind({}); -Group.args = { - number: 4, - placement: 'bottom', - displayTooltip: true, - users: [ - { - name: 'li', - src: 'https://joeschmoe.io/api/v1/random', - tooltipTitle: '这是li', - }, - { - name: 'pan', - }, - { - name: 'leng', - src: 'https://joeschmoe.io/api/v1/random', - }, - { - name: 'liu', - }, - { - name: 'wang', - src: 'https://joeschmoe.io/api/v1/random', - }, - { - name: 'tong', - src: 'https://joeschmoe.io/api/v1/random', - }, - ], -}; diff --git a/src/legacy/avatar/demos/AvatarPage.tsx b/src/legacy/avatar/demos/AvatarPage.tsx deleted file mode 100644 index 8443b42564..0000000000 --- a/src/legacy/avatar/demos/AvatarPage.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import { Canvas, Title, Heading, Story, Subheading, ArgsTable } from '@storybook/addon-docs'; -import { useIntl } from 'react-intl'; -import Avatar from '../Avatar'; - -export default function ListPage() { - const { formatMessage } = useIntl(); - - return ( - <> - {formatMessage({ defaultMessage: 'Avatar 头像' })} -

- {formatMessage({ - defaultMessage: '用来代表用户，支持图片或字符展示。', - })} -

- {formatMessage({ defaultMessage: '代码演示' })} - {formatMessage({ defaultMessage: '基础头像' })} - - - - - {formatMessage({ defaultMessage: '尺寸' })} -

- {formatMessage({ - defaultMessage: - '头像有以下几种尺寸：24px、32px、56px、80px。24px、32px 常用于列表&导航展示。56px、80px 常用于用户管理。默认为字符型头像，24px、32px 头像的文字字号为 12px；56px 头像的文字字号为 16px；80px 头像的文字字号为 20px。', - })} -

- - - - - {formatMessage({ defaultMessage: '可展开操作' })} -

- {formatMessage({ - defaultMessage: 'hover 头像可显示 icon', - })} -

- - - - - {formatMessage({ defaultMessage: '重叠展示' })} -

- {formatMessage({ - defaultMessage: - '可设置组显示数量，默认为 4。当用户未设置头像时，显示该用户名称的首个文字数字或字母。hover 头像时头像前置，并显示 tooltip。', - })} -

- - - - - {formatMessage({ defaultMessage: '参数说明' })} - - - ); -} diff --git a/src/legacy/avatar/index.tsx b/src/legacy/avatar/index.tsx deleted file mode 100644 index 16035c9159..0000000000 --- a/src/legacy/avatar/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import Avatar from './Avatar'; - -export default Avatar; -export { default as AvatarGroup } from './AvatarGroup'; -export { AvatarProps, UserAvatarType, AvatarGroupProps } from './interfaces'; diff --git a/src/legacy/avatar/interfaces.ts b/src/legacy/avatar/interfaces.ts deleted file mode 100644 index d46a79b4fe..0000000000 --- a/src/legacy/avatar/interfaces.ts +++ /dev/null @@ -1,88 +0,0 @@ -export type tooltipPlacement = - | 'top' - | 'topRight' - | 'topLeft' - | 'leftTop' - | 'left' - | 'leftBottom' - | 'rightTop' - | 'right' - | 'rightBottom' - | 'bottomLeft' - | 'bottom' - | 'bottomRight'; - -export interface AvatarProps { - /** - 设置头像的尺寸大小 - */ - size?: 'small' | 'default' | 'large' | 'huge'; - droppable?: boolean; - /** - 设置头像的尺寸大小 - */ - src?: string; - /** - 是否省略用户名称 - */ - omit?: boolean; - /** - 自定义混入 `CSS` 类 - */ - className?: string; - /** - 自定义混入 `CSS` 样式 - */ - style?: React.CSSProperties; - /** - 气泡框位置，可选 12 个方位 - */ - placement?: tooltipPlacement; - /** - 自定义 `CSS` 类前缀 - */ - prefixCls?: string; - /** - 用 `Tooltip` 显示用户名 - */ - displayTooltip?: boolean; - /** - 自定义气泡框的内容 - */ - tooltipTitle?: React.ReactNode; - /** - 设置字符，用作用户头像 - */ - children?: string; - - /** - 圆头像 or 方头像 - */ - mode?: 'circle' | 'square'; - - /** - 自定义背景色 - */ - backgroundColor?: string; - - /** - 头像内容是Icon - */ - icon?: React.ReactNode; -} - -export interface UserAvatarType { - name: string; - src?: string; - displayTooltip?: boolean; - tooltipTitle?: React.ReactNode; -} - -export interface AvatarGroupProps { - className?: string; - style?: React.CSSProperties; - number?: number; - users: UserAvatarType[]; - placement?: tooltipPlacement; - displayTooltip?: boolean; -} diff --git a/src/legacy/avatar/style/demo.stories.less b/src/legacy/avatar/style/demo.stories.less deleted file mode 100644 index 29d0e84a6a..0000000000 --- a/src/legacy/avatar/style/demo.stories.less +++ /dev/null @@ -1,15 +0,0 @@ -.display-avatar { - .gio-avatar { - margin: 16px; - } - .gio-avatar-group { - .gio-avatar { - margin: 0; - } - } -} - -.size-display { - display: flex; - align-items: center; -} diff --git a/src/legacy/avatar/style/index.less b/src/legacy/avatar/style/index.less deleted file mode 100644 index 9e1fc5bc86..0000000000 --- a/src/legacy/avatar/style/index.less +++ /dev/null @@ -1,189 +0,0 @@ -@import '../../../stylesheet/index.less'; - -@avatar-prefix-cls-legacy: ~'@{component-prefix}-avatar-legacy'; - -.@{avatar-prefix-cls-legacy} { - position: relative; - display: inline-block; - box-sizing: border-box; - overflow: hidden; - color: @color-text-avatar-normal; - font-weight: @weight-font-semi-bold; - background-color: @color-background-avatar-normal; - border-radius: 100%; - opacity: 1; - user-select: none; - - &:hover &-droppable { - background-color: @color-background-avatar-hover-dropdown; - span { - transform: scale(1); - } - } - - &-default { - position: relative; - display: inline-block; - width: 100%; - height: 100%; - background-color: @color-background-avatar-normal; - - & svg { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; - color: #fff; - } - } - - &-droppable { - position: absolute; - top: 0; - left: 0; - z-index: 1; - width: 100%; - height: 100%; - text-align: center; - background-color: transparent; - cursor: pointer; - transition: all 0.3s; - - span { - vertical-align: middle; - transform: scale(0); - transition: all 0.3s; - } - } - - &-string { - position: absolute; - left: 50%; - transform-origin: 0 center; - } - - img { - position: relative; - display: block; - width: 100%; - height: 100%; - object-fit: cover; - } - - &-sm { - width: 24px; - height: 24px; - font-size: 12px; - line-height: 24px; - - .@{avatar-prefix-cls-legacy}-icon { - & svg { - width: 10px; - height: 10px; - } - } - - &.@{avatar-prefix-cls-legacy}-square { - border-radius: 2px; - .@{avatar-prefix-cls-legacy}-icon { - & svg { - width: 12px; - height: 12px; - } - } - } - } - - &-df { - width: 32px; - height: 32px; - font-size: 12px; - line-height: 32px; - - .@{avatar-prefix-cls-legacy}-icon { - & svg { - width: 14px; - height: 14px; - } - } - - &.@{avatar-prefix-cls-legacy}-square { - border-radius: 4px; - .@{avatar-prefix-cls-legacy}-icon { - & svg { - width: 16px; - height: 16px; - } - } - } - } - - &-lg { - width: 56px; - height: 56px; - font-size: 16px; - line-height: 56px; - - .@{avatar-prefix-cls-legacy}-icon { - & svg { - width: 24px; - height: 24px; - } - } - - &.@{avatar-prefix-cls-legacy}-square { - border-radius: 8px; - .@{avatar-prefix-cls-legacy}-icon { - & svg { - width: 28px; - height: 28px; - } - } - } - } - - &-hg { - width: 80px; - height: 80px; - font-size: 20px; - line-height: 80px; - - .@{avatar-prefix-cls-legacy}-icon { - & svg { - width: 32px; - height: 32px; - } - } - - &.@{avatar-prefix-cls-legacy}-square { - border-radius: 10px; - .@{avatar-prefix-cls-legacy}-icon { - & svg { - width: 40px; - height: 40px; - } - } - } - } - - &-group { - display: flex; - .@{avatar-prefix-cls-legacy} { - border: 1.4px solid @color-border-avatar; - span { - top: -1.5px; - } - &:hover { - position: relative; - z-index: 1; - filter: @shadow-avatar; - } - } - - .@{avatar-prefix-cls-legacy}:not(:first-child) { - margin-left: -8px; - } - } -} diff --git a/src/legacy/avatar/style/index.ts b/src/legacy/avatar/style/index.ts deleted file mode 100644 index 7dd4c91196..0000000000 --- a/src/legacy/avatar/style/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import './index.less'; -import '../../tooltip/index'; diff --git a/src/legacy/banner/Banner.tsx b/src/legacy/banner/Banner.tsx deleted file mode 100644 index 3c5aaad185..0000000000 --- a/src/legacy/banner/Banner.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { useState } from 'react'; -import { CloseOutlined } from '@gio-design/icons'; -import className from 'classnames'; -import { usePrefixCls } from '@gio-design/utils'; -import { BannerProps } from './interface'; - -const Banner: React.FC = (props: BannerProps) => { - const { type = 'normal', content, closeable = true, onClose, button, prefixCls: customizePrefixCls } = props; - const [visible, setVisible] = useState(true); - const prefixCls = usePrefixCls('banner-legacy', customizePrefixCls); - const onCloseBanner = () => { - setVisible(false); - onClose?.(); - }; - - return ( -
-
{content}
-
{button}
- -
- ); -}; - -export default Banner; diff --git a/src/legacy/banner/demos/Banner.stories.tsx b/src/legacy/banner/demos/Banner.stories.tsx deleted file mode 100644 index d2a9335072..0000000000 --- a/src/legacy/banner/demos/Banner.stories.tsx +++ /dev/null @@ -1,74 +0,0 @@ -/* eslint-disable jsx-a11y/anchor-is-valid */ -import React from 'react'; -import { Story, Meta } from '@storybook/react/types-6-0'; -import Button from '../../button'; -import Link from '../../link'; -import Tag from '../../tag'; -import Banner, { BannerProps } from '../index'; -import Docs from './BannerPage'; -import '../style'; - -export default { - title: 'legacy/Banner', - component: Banner, - parameters: { - docs: { - page: Docs, - }, - }, -} as Meta; - -const baseContent = ( -
- 【GrowingIO在线公共课】欧治云商运营负责人复盘B2B增长实践 - -
-); - -const alertContent = ( -
- 尊敬的客户您好，工单系统将于2月2日～2月10日暂停服务。 - - 查看详情 - -
-); - -const closeableContent = ( -
-
- - 试用中 - - 试用14天后结束 -
-
- 客服专线：010-50914714 - -
-
-); - -const Template: Story = (args) => ; -export const Base = Template.bind({}); -export const Alert = Template.bind({}); -export const Closeable = Template.bind({}); -Base.args = { - content: baseContent, - type: 'normal', - closeable: false, -}; -Alert.args = { - content: alertContent, - type: 'alert', - closeable: false, -}; -Closeable.args = { - content: closeableContent, - type: 'normal', - closeable: true, -}; diff --git a/src/legacy/banner/demos/BannerPage.tsx b/src/legacy/banner/demos/BannerPage.tsx deleted file mode 100644 index 7fd0497018..0000000000 --- a/src/legacy/banner/demos/BannerPage.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { Canvas, Title, Heading, Story, Subheading, ArgsTable } from '@storybook/addon-docs'; -import { useIntl } from 'react-intl'; -import Banner from '../Banner'; - -export default function ListPage() { - const { formatMessage } = useIntl(); - - return ( - <> - {formatMessage({ defaultMessage: 'Banner 横幅' })} -

- {formatMessage({ - defaultMessage: '将重要的信息通知到用户，例如：线下活动报名，系统维护等通知', - })} -

- {formatMessage({ defaultMessage: '代码演示' })} - {formatMessage({ defaultMessage: '信息通知' })} - - - - - {formatMessage({ defaultMessage: '警告通知' })} - - - - - {formatMessage({ defaultMessage: '可关闭' })} - - - - - {formatMessage({ defaultMessage: '参数说明' })} - - - ); -} diff --git a/src/legacy/banner/index.tsx b/src/legacy/banner/index.tsx deleted file mode 100644 index 4c3b89826e..0000000000 --- a/src/legacy/banner/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import Banner from './Banner'; - -export { BannerProps } from './interface'; - -export default Banner; diff --git a/src/legacy/banner/interface.ts b/src/legacy/banner/interface.ts deleted file mode 100644 index 7c4af160e0..0000000000 --- a/src/legacy/banner/interface.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { ReactNode } from 'react'; - -export interface BannerProps { - /** - 横幅的类型 - */ - type?: 'normal' | 'alert'; - /** - 横幅内的内容 - */ - content?: string | ReactNode; - /** - 是否可以关闭 - */ - closeable?: boolean; - /** - 点击关闭横幅的回掉函数 - */ - onClose?: () => void; - /** - 横幅内自定义 `button` - */ - button?: ReactNode; - /** - 自定义 `css` 类前缀 - */ - prefixCls?: string; -} diff --git a/src/legacy/banner/style/index.less b/src/legacy/banner/style/index.less deleted file mode 100644 index 8999b24f34..0000000000 --- a/src/legacy/banner/style/index.less +++ /dev/null @@ -1,77 +0,0 @@ -@import '../../../stylesheet/index.less'; - -@banner-prefix-cls-legacy: ~'@{component-prefix}-banner-legacy'; - -.@{banner-prefix-cls-legacy} { - display: flex; - align-items: center; - width: 100%; - min-width: 720px; - height: 48px; - background-color: @color-background-banner-normal; - transition: all ease 0.8s; - &-content { - flex: 1; - height: 30px; - margin: 0 64px; - color: @color-text-banner-normal; - font-size: @size-font-14; - font-family: @font-family-primary; - line-height: 30px; - text-align: center; - .alert-close { - display: flex; - align-items: center; - justify-content: center; - } - } - - &-content-button { - margin: 0 154px 0 64px; - } - - &-button { - position: relative; - right: 64px; - } - - &-closeIcon { - position: relative; - right: 20px; - display: flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - color: @color-text-banner-normal; - font-weight: @weight-font-semi-bold; - line-height: 16px; - cursor: pointer; - } - &-closeIcon:hover { - background: rgba(255, 255, 255, 0.5); - border-radius: 4px; - } -} - -.@{banner-prefix-cls-legacy}-alert { - background-color: @color-background-banner-alert; - .@{banner-prefix-cls-legacy}-content { - color: @color-text-banner-alert; - font-size: @size-font-14; - font-family: @font-family-primary; - } - .@{banner-prefix-cls-legacy}-closeIcon { - color: @color-text-banner-alert; - } -} - -.@{banner-prefix-cls-legacy}-close { - display: none; -} - -.@{banner-prefix-cls-legacy}-closeable { - .@{banner-prefix-cls-legacy}-content { - margin: 0 40px 0 64px; - } -} diff --git a/src/legacy/banner/style/index.ts b/src/legacy/banner/style/index.ts deleted file mode 100644 index d74e52ee9f..0000000000 --- a/src/legacy/banner/style/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './index.less'; diff --git a/src/legacy/base-picker/style/index.ts b/src/legacy/base-picker/style/index.ts deleted file mode 100644 index 3d82a006ad..0000000000 --- a/src/legacy/base-picker/style/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import '../../alert/style'; -import '../../search-bar/style'; -import '../../tab-nav/style'; -import '../../list/style'; -import '../../loading/style'; -import '../../empty/style'; -import './index.less'; diff --git a/src/legacy/breadcrumb/Breadcrumb.tsx b/src/legacy/breadcrumb/Breadcrumb.tsx deleted file mode 100644 index 38ff07c11b..0000000000 --- a/src/legacy/breadcrumb/Breadcrumb.tsx +++ /dev/null @@ -1,105 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable react/jsx-props-no-spreading */ -import React from 'react'; -import classNames from 'classnames'; -import toArray from 'rc-util/lib/Children/toArray'; -import { usePrefixCls } from '@gio-design/utils'; -import BreadcrumbItem from './BreadcrumbItem'; -import BreadcrumbSeparator from './BreadcrumbSeparator'; -import { cloneElement } from '../../utils/reactNode'; -import devWarning from '../../utils/devWarning'; -import { Route, BreadcrumbProps } from './interface'; - -function getBreadcrumbName(route: Route, params: any) { - if (!route.breadcrumbName) { - return null; - } - const paramsKeys = Object.keys(params).join('|'); - const name = route.breadcrumbName.replace( - new RegExp(`:(${paramsKeys})`, 'g'), - (replacement, key) => params[key] || replacement - ); - return name; -} - -function isLastItem(route: Route, routes: Route[]) { - return routes.indexOf(route) === routes.length - 1; -} - -function defaultItemRender(route: Route, params: any, routes: Route[], paths: string[]) { - const name = getBreadcrumbName(route, params); - return isLastItem(route, routes) ? {name} : {name}; -} - -const getPath = (path: string, params: any) => { - let result = (path || '').replace(/^\//, ''); - Object.keys(params).forEach((key) => { - result = result.replace(`:${key}`, params[key]); - }); - return result; -}; - -interface BreadcrumbInterface extends React.FC { - Item: typeof BreadcrumbItem; - Separator: typeof BreadcrumbSeparator; -} - -export const Breadcrumb: BreadcrumbInterface = ({ - prefixCls: customizePrefixCls, - separator = '/', - style, - className, - routes, - children, - itemRender = defaultItemRender, - params = {}, - ...restProps -}: BreadcrumbProps) => { - let crumbs; - const prefixCls = usePrefixCls('breadcrumb-legacy', customizePrefixCls); - if (routes && routes.length > 0) { - const paths: string[] = []; - crumbs = routes.map((route: Route) => { - const path = getPath(route.path, params); - - if (path) { - paths.push(path); - } - return ( - - {itemRender(route, params, routes, paths)} - - ); - }); - } else if (children) { - crumbs = toArray(children).map((element: any, index) => { - if (!element) { - return element; - } - - devWarning( - element.type && (element.type.GIO_BREADCRUMB_ITEM === true || element.type.GIO_BREADCRUMB_SEPARATOR === true), - 'Breadcrumb', - "Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children" - ); - - return cloneElement(element, { - separator, - key: index, - }); - }); - } - return ( -
- {crumbs} -
- ); -}; - -Breadcrumb.Item = BreadcrumbItem; - -Breadcrumb.Separator = BreadcrumbSeparator; - -export { BreadcrumbItem, BreadcrumbSeparator }; - -export default Breadcrumb; diff --git a/src/legacy/breadcrumb/BreadcrumbItem.tsx b/src/legacy/breadcrumb/BreadcrumbItem.tsx deleted file mode 100644 index 36b43439ed..0000000000 --- a/src/legacy/breadcrumb/BreadcrumbItem.tsx +++ /dev/null @@ -1,39 +0,0 @@ -/* eslint-disable react/jsx-props-no-spreading */ -import React from 'react'; -import classnames from 'classnames'; -import { usePrefixCls } from '@gio-design/utils'; -import BreadcrumbSeparator from './BreadcrumbSeparator'; -import { BreadcrumbItemProps } from './interface'; - -interface BreadcrumbItemInterface extends React.FC { - GIO_BREADCRUMB_ITEM: boolean; -} - -const BreadcrumbItem: BreadcrumbItemInterface = (props: BreadcrumbItemProps) => { - const { children, separator, ...restProps } = props; - const prefixCls = usePrefixCls('breadcrumb-legacy'); - const link = - 'href' in restProps ? ( - - {children} - - ) : ( - - {children} - - ); - - if (children) { - return ( - - {link} - {separator && separator !== '' && } - - ); - } - return null; -}; - -BreadcrumbItem.GIO_BREADCRUMB_ITEM = true; - -export default BreadcrumbItem; diff --git a/src/legacy/breadcrumb/BreadcrumbSeparator.tsx b/src/legacy/breadcrumb/BreadcrumbSeparator.tsx deleted file mode 100644 index e9db582955..0000000000 --- a/src/legacy/breadcrumb/BreadcrumbSeparator.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { usePrefixCls } from '@gio-design/utils'; -import { BreadcrumbSeparatorProps } from './interface'; - -interface BreadcrumbSeparatorInterface extends React.FC { - GIO_BREADCRUMB_SEPARATOR: boolean; -} - -const BreadcrumbSeparator: BreadcrumbSeparatorInterface = (props: BreadcrumbSeparatorProps) => { - const { separator } = props; - const prefixCls = usePrefixCls('breadcrumb-legacy'); - return {separator}; -}; - -BreadcrumbSeparator.GIO_BREADCRUMB_SEPARATOR = true; -export default BreadcrumbSeparator; diff --git a/src/legacy/breadcrumb/demos/Breadcrumb.stories.tsx b/src/legacy/breadcrumb/demos/Breadcrumb.stories.tsx deleted file mode 100644 index 242dd4db68..0000000000 --- a/src/legacy/breadcrumb/demos/Breadcrumb.stories.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import { Story, Meta } from '@storybook/react/types-6-0'; -import { withDesign } from 'storybook-addon-designs'; -import Docs from './BreadcrumbPage'; -import Breadcrumb from '../index'; -import { BreadcrumbProps } from '../interface'; -import '../style'; - -export default { - title: 'Legacy/Breadcrumb', - component: Breadcrumb, - decorators: [withDesign], - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/kP3A6S2fLUGVVMBgDuUx0f/GrowingIO-Design-Components?node-id=1108%3A3874', - allowFullscreen: true, - }, - docs: { - page: Docs, - }, - }, - argTypes: { - separator: { - control: { type: 'text' }, - }, - }, -} as Meta; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - routes: [ - { - path: '?path=/story/basic-legacy-breadcrumb--default', - breadcrumbName: '首页', - }, - { - path: '#', - breadcrumbName: '一级面包屑', - }, - { - path: '##', - breadcrumbName: '二级面包屑', - }, - { - path: '###', - breadcrumbName: '三级面包屑', - }, - ], -}; diff --git a/src/legacy/breadcrumb/demos/BreadcrumbPage.tsx b/src/legacy/breadcrumb/demos/BreadcrumbPage.tsx deleted file mode 100644 index 9508b8ebd2..0000000000 --- a/src/legacy/breadcrumb/demos/BreadcrumbPage.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { Canvas, Title, Heading, Story, Subheading, ArgsTable } from '@storybook/addon-docs'; -import { useIntl } from 'react-intl'; -import Breadcrumb from '../index'; - -export default function BreadcrumbPage() { - const { formatMessage } = useIntl(); - - return ( - <> - {formatMessage({ defaultMessage: 'Breadcrumb 面包屑' })} - {formatMessage({ defaultMessage: '代码演示' })} - - {formatMessage({ defaultMessage: '默认' })} - - - - - {formatMessage({ defaultMessage: '参数说明' })} - - - ); -} diff --git a/src/legacy/breadcrumb/index.ts b/src/legacy/breadcrumb/index.ts deleted file mode 100644 index ce4cb1ad55..0000000000 --- a/src/legacy/breadcrumb/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import Breadcrumb from './Breadcrumb'; - -export { BreadcrumbProps, BreadcrumbItemProps } from './interface'; - -export { BreadcrumbItem, BreadcrumbSeparator } from './Breadcrumb'; - -export default Breadcrumb; diff --git a/src/legacy/breadcrumb/interface.ts b/src/legacy/breadcrumb/interface.ts deleted file mode 100644 index da7d2c5025..0000000000 --- a/src/legacy/breadcrumb/interface.ts +++ /dev/null @@ -1,60 +0,0 @@ -export interface BreadcrumbSeparatorProps { - /** - * 自定义分隔符 - */ - separator?: React.ReactNode; -} - -export interface BreadcrumbItemProps { - /** - * 自定义分隔符 - */ - separator?: React.ReactNode; - /** - * 链接的目的地 - */ - href?: string; - /** - * 单击事件回调函数 - */ - onClick?: React.MouseEventHandler; - children?: React.ReactNode; -} - -export interface Route { - path: string; - breadcrumbName: string; - children?: Omit[]; -} - -export interface BreadcrumbProps { - /** - * 自定义className前缀 - */ - prefixCls?: string; - /** - * router 的路由栈信息 - */ - routes?: Route[]; - /** - * 路由的参数 - */ - params?: any; - /** - * 自定义样式 - */ - style?: React.CSSProperties; - /** - * 自定义分隔符 - */ - separator?: React.ReactNode; - /** - * 自定义className - */ - className?: string; - /** - * 自定义链接函数，和 react-router 配置使用 - */ - itemRender?: (route: Route, params: any, routes: Array, paths: Array) => React.ReactNode; - children?: React.ReactNode; -} diff --git a/src/legacy/breadcrumb/style/index.less b/src/legacy/breadcrumb/style/index.less deleted file mode 100644 index 468f865f7e..0000000000 --- a/src/legacy/breadcrumb/style/index.less +++ /dev/null @@ -1,49 +0,0 @@ -@import '../../../stylesheet/index.less'; - -@breadcrumb-prefix-cls-legacy: ~'@{component-prefix}-breadcrumb-legacy'; - -.@{breadcrumb-prefix-cls-legacy} { - display: flex; - align-items: center; - height: 22px; - color: @color-text-breadcrumb-normal; - font-size: 14px; - - &-item.@{breadcrumb-prefix-cls-legacy}-item-link { - .@{breadcrumb-prefix-cls-legacy}-item-link-target { - cursor: pointer; - - &:hover { - color: @color-text-breadcrumb-hover; - } - - &:active { - color: @color-text-breadcrumb-click; - } - } - } - - a { - color: @color-text-breadcrumb-normal; - text-decoration: none; - - &:hover { - color: @color-text-breadcrumb-hover; - } - - &:active { - color: @color-text-breadcrumb-click; - } - } - - &-separator { - display: inline-block; - box-sizing: content-box; - width: 14px; - padding: 0 8px; - text-align: center; - } - & > span:last-child &-separator { - display: none; - } -} diff --git a/src/legacy/breadcrumb/style/index.ts b/src/legacy/breadcrumb/style/index.ts deleted file mode 100644 index d74e52ee9f..0000000000 --- a/src/legacy/breadcrumb/style/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './index.less'; diff --git a/src/legacy/button/Button.tsx b/src/legacy/button/Button.tsx deleted file mode 100644 index b296a93599..0000000000 --- a/src/legacy/button/Button.tsx +++ /dev/null @@ -1,169 +0,0 @@ -/* eslint-disable react/jsx-props-no-spreading */ -import * as React from 'react'; -import classNames from 'classnames'; -import { LoadingTwoTone } from '@gio-design/icons'; -import { usePrefixCls } from '@gio-design/utils'; -import { ButtonProps } from './interface'; -import { cloneElement } from '../../utils/reactNode'; -import useSize from '../../utils/hooks/useSize'; - -const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/; -const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar); - -function isString(str: unknown) { - return typeof str === 'string'; -} - -function insertSpace(child: React.ReactChild, needInserted: boolean) { - if (child === null || child === undefined) { - return null; - } - const SPACE = needInserted ? ' ' : ''; - if ( - typeof child !== 'string' && - typeof child !== 'number' && - isString(child.type) && - isTwoCNChar(child.props.children) - ) { - return cloneElement(child, { - children: child.props.children.split('').join(SPACE), - }); - } - if (typeof child === 'string') { - if (isTwoCNChar(child)) { - return {child.split('').join(SPACE)}; - } - return {child}; - } - return child; -} - -function spaceChildren(children: React.ReactNode, needInserted: boolean) { - let isPrevChildPure = false; - const childList: React.ReactNode[] = []; - React.Children.forEach(children, (child) => { - const type = typeof child; - const isCurrentChildPure = type === 'string' || type === 'number'; - if (isPrevChildPure && isCurrentChildPure) { - const lastIndex = childList.length - 1; - const lastChild = childList[lastIndex]; - childList[lastIndex] = `${lastChild}${child}`; - } else { - childList.push(child); - } - - isPrevChildPure = isCurrentChildPure; - }); - - return React.Children.map(childList, (child) => insertSpace(child as React.ReactChild, needInserted)); -} - -interface CompoundedComponent extends React.ForwardRefExoticComponent> { - __GIO_BUTTON: boolean; -} - -const InternalButton: React.ForwardRefRenderFunction = (props, ref) => { - const { - loading, - prefixCls: customizePrefixCls, - type = 'primary', - size: customizeSize, - className, - children, - icon, - block, - mini, - autoInsertSpace = true, - ...rest - } = props; - - const size = useSize(); - const [innerLoading, setLoading] = React.useState(loading); - const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false); - const prefixCls = usePrefixCls('btn-legacy', customizePrefixCls); - const buttonRef = (ref as any) || React.createRef(); - - const isNeedInserted = () => React.Children.count(children) === 1 && !icon; - - const fixTwoCNChar = () => { - if (!buttonRef || !buttonRef.current || autoInsertSpace === false) { - return; - } - const buttonText = buttonRef.current.textContent; - - if (isNeedInserted() && isTwoCNChar(buttonText)) { - if (!hasTwoCNChar) { - setHasTwoCNChar(true); - } - } else if (hasTwoCNChar) { - setHasTwoCNChar(false); - } - }; - - React.useEffect(() => { - setLoading(loading); - }, [loading]); - - React.useEffect(() => { - fixTwoCNChar(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [buttonRef]); - - const handleClick = (e: React.MouseEvent) => { - const { onClick } = props; - if (innerLoading) { - return; - } - if (onClick) { - (onClick as React.MouseEventHandler)(e); - } - }; - - const iconType = innerLoading ? 'loading' : icon; - const sizeCls = mini && !!(!children && children !== 0 && iconType) ? 'mini' : customizeSize || size; - - const classes = classNames(prefixCls, className, { - [`${prefixCls}-${type}`]: type, - [`${prefixCls}-${sizeCls}`]: sizeCls, - [`${prefixCls}-icon-only`]: !children && children !== 0 && iconType, - [`${prefixCls}-loading`]: innerLoading, - [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace, - [`${prefixCls}-block`]: block, - }); - - let iconNode = null; - - if (icon && !innerLoading) { - iconNode = icon; - } else if (innerLoading) { - iconNode = ; - } - - const kids = children || children === 0 ? spaceChildren(children, isNeedInserted() && autoInsertSpace) : null; - - const { htmlType, ...otherProps } = rest; - const buttonNode = ( - // eslint-disable-next-line react/button-has-type - - ); - - return buttonNode; -}; - -export const Button = React.forwardRef(InternalButton) as CompoundedComponent; - -Button.defaultProps = { - loading: false, - block: false, - htmlType: 'button' as ButtonProps['htmlType'], -}; - -Button.displayName = 'Button'; - -// eslint-disable-next-line no-underscore-dangle -Button.__GIO_BUTTON = true; - -export default Button; diff --git a/src/legacy/button/demos/Button.stories.tsx b/src/legacy/button/demos/Button.stories.tsx deleted file mode 100644 index 2bc5ca326d..0000000000 --- a/src/legacy/button/demos/Button.stories.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import React from 'react'; -import { Story, Meta } from '@storybook/react/types-6-0'; -import { PlusCircleFilled, FilterOutlined } from '@gio-design/icons'; -import { withDesign } from 'storybook-addon-designs'; -import Docs from './ButtonPage'; -import Button from '../index'; -import { ButtonProps } from '../interface'; -import '../style'; - -export default { - title: 'Legacy/Button', - component: Button, - decorators: [withDesign], - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/kP3A6S2fLUGVVMBgDuUx0f/GrowingIO-Design-Components?node-id=1%3A1097', - allowFullscreen: true, - }, - docs: { - page: Docs, - }, - }, - args: { - type: 'primary', - size: 'middle', - }, -} as Meta; - -const Wrapper = (props: { children?: React.ReactNode }) => { - const { children } = props; - return
{children}
; -}; - -const Template: Story = (args) => ( - -