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