From 72e793c7ab3a3b732ba631ee98944364ffa21273 Mon Sep 17 00:00:00 2001 From: Jandiasnow <88074479@qq.com> Date: Tue, 9 Apr 2024 15:51:08 +0800 Subject: [PATCH] feat: add Description component --- src/Descriptions/demos/Playground.tsx | 49 ++++++++++++++++ src/Descriptions/demos/index.tsx | 29 ++++++++++ src/Descriptions/index.md | 54 ++++++++++++++++++ src/Descriptions/index.tsx | 42 ++++++++++++++ src/Descriptions/style.ts | 80 +++++++++++++++++++++++++++ src/index.ts | 17 ++++++ 6 files changed, 271 insertions(+) create mode 100644 src/Descriptions/demos/Playground.tsx create mode 100644 src/Descriptions/demos/index.tsx create mode 100644 src/Descriptions/index.md create mode 100644 src/Descriptions/index.tsx create mode 100644 src/Descriptions/style.ts diff --git a/src/Descriptions/demos/Playground.tsx b/src/Descriptions/demos/Playground.tsx new file mode 100644 index 0000000..d013df9 --- /dev/null +++ b/src/Descriptions/demos/Playground.tsx @@ -0,0 +1,49 @@ +import { StoryBook, useControls, useCreateStore } from '@lobehub/ui'; +import type { DescriptionsProps } from '@yuntijs/ui'; +import { Descriptions } from '@yuntijs/ui'; + +export default () => { + const store = useCreateStore(); + const control: DescriptionsProps | any = useControls( + { + title: 'YuntiUI', + bordered: false, + colon: false, + column: 1, + extra: 'extra', + layout: { + options: ['horizontal', 'vertical'], + value: 'horizontal', + }, + size: { + options: ['default', 'middle', 'small'], + value: 'default', + }, + }, + { store } + ); + return ( + + + + ); +}; diff --git a/src/Descriptions/demos/index.tsx b/src/Descriptions/demos/index.tsx new file mode 100644 index 0000000..cc71f97 --- /dev/null +++ b/src/Descriptions/demos/index.tsx @@ -0,0 +1,29 @@ +import { Descriptions } from '@yuntijs/ui'; + +export default () => { + return ( + + ); +}; diff --git a/src/Descriptions/index.md b/src/Descriptions/index.md new file mode 100644 index 0000000..5ad00f1 --- /dev/null +++ b/src/Descriptions/index.md @@ -0,0 +1,54 @@ +--- +nav: Components +group: Data Display +title: Descriptions +description: Display multiple read-only fields in a group. +--- + +## Usage + +based on antd [Descriptions](https://ant.design/components/descriptions-cn/) component. + +### Simple usage + +```jsx | pure +import { Descriptions } from '@yuntijs/ui'; + +export default () => { + return ( + + ); +}; +``` + + + +## Playground + + + +## APIs + + diff --git a/src/Descriptions/index.tsx b/src/Descriptions/index.tsx new file mode 100644 index 0000000..4242ff8 --- /dev/null +++ b/src/Descriptions/index.tsx @@ -0,0 +1,42 @@ +import { + Descriptions as AntdDescriptions, + type DescriptionsProps as AntdDescriptionsProps, +} from 'antd'; +import React from 'react'; + +import { useStyles } from './style'; + +export interface CustomDescriptionsProps { + borderedBottom?: boolean; + borderedBottomDashed?: boolean; + borderedTop?: boolean; + borderedTopDashed?: boolean; + itemStyle?: React.CSSProperties; +} +export interface DescriptionsProps extends AntdDescriptionsProps, CustomDescriptionsProps {} + +export const Descriptions: React.FC & { + Item: typeof AntdDescriptions.Item; +} = props => { + const { + className, + borderedBottom, + borderedBottomDashed, + borderedTop, + borderedTopDashed, + itemStyle, + ...otherProps + } = props; + const { styles, cx } = useStyles({ + borderedBottom, + borderedBottomDashed, + borderedTop, + borderedTopDashed, + itemStyle, + size: otherProps.size, + }); + return ; +}; + +export default Descriptions; +Descriptions.Item = AntdDescriptions.Item; diff --git a/src/Descriptions/style.ts b/src/Descriptions/style.ts new file mode 100644 index 0000000..e58afee --- /dev/null +++ b/src/Descriptions/style.ts @@ -0,0 +1,80 @@ +import { createStyles } from 'antd-style'; + +import { DescriptionsProps } from './index'; + +export const useStyles = createStyles( + ( + { css, token, prefixCls }, + { + borderedBottom, + borderedBottomDashed, + borderedTop, + borderedTopDashed, + itemStyle, + size, + }: DescriptionsProps + ) => { + const descriptionsContentPadding = { + small: `${token.paddingXS}px ${token.padding}px`, + middle: `${token.padding}px ${token.paddingLG}px`, + default: `${token.paddingSM}px ${token.paddingLG}px`, + }; + const hasCustomSizeStyle = borderedBottom || borderedBottomDashed; + const itemStyleString = + itemStyle && + Object.keys(itemStyle) + // @ts-ignore + .map(key => `${key}:${itemStyle[key]};`) + .join(''); + return { + custom: css` + .${prefixCls}-descriptions-item-content { + align-items: center !important; + } + .${prefixCls}-descriptions-row > td { + padding-bottom: 8px !important; + padding-top: 8px !important; + ${itemStyleString} + } + ${hasCustomSizeStyle && + size && + css` + .${prefixCls}-descriptions-item-label, .${prefixCls}-descriptions-item-content { + padding: ${descriptionsContentPadding[size]}; + } + .${prefixCls}-descriptions-item { + padding-bottom: 0 !important; + } + table { + border-spacing: 0 !important; + } + `} + ${borderedBottom && + css` + .${prefixCls}-descriptions-item { + border-bottom: 1px solid ${token.colorSplit}; + } + `} + ${borderedBottomDashed && + css` + .${prefixCls}-descriptions-item { + border-bottom: 1px dashed ${token.colorSplit}; + } + `} + ${borderedTop && + css` + .${prefixCls}-descriptions-item { + border-top: 1px solid ${token.colorSplit}; + } + `} + ${borderedTopDashed && + css` + .${prefixCls}-descriptions-item { + border-top: 1px dashed ${token.colorSplit}; + } + `} + `, + }; + }, + { hashPriority: 'low' } +); diff --git a/src/index.ts b/src/index.ts index 93e0e78..7d44190 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,6 +8,7 @@ export * from './Tree'; // ~ custom antd export * from './Alert'; export * from './Card'; +export * from './Descriptions'; // ~ antd export { @@ -31,11 +32,27 @@ export { type CalendarProps, Carousel, type CarouselProps, + Cascader, + type CascaderProps, Checkbox, type CheckboxProps, + Col, + Collapse, + type CollapseProps, ColorPicker, type ColorPickerProps, + type ColProps, // @todo center style + DatePicker, + type DatePickerProps, } from 'antd'; +// ~ @lobehub/ui +export { + Highlighter, + type HighlighterProps, + SyntaxHighlighter, + type SyntaxHighlighterProps, +} from '@lobehub/ui'; + // ~ antd-style export { useResponsive, useTheme, useThemeMode } from 'antd-style';