From 316a4b6795da69efd6933de066ed8f5dd21057b7 Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Mon, 24 Jul 2023 15:52:47 +0800 Subject: [PATCH] :sparkles: feat: add FieldTitle comp --- src/FieldTitle/demos/basic.tsx | 53 ++++++++++++++++++ src/FieldTitle/demos/description.tsx | 26 +++++++++ src/FieldTitle/index.md | 31 +++++++++++ src/FieldTitle/index.tsx | 81 ++++++++++++++++++++++++++++ src/FieldTitle/style.ts | 32 +++++++++++ src/index.ts | 2 + 6 files changed, 225 insertions(+) create mode 100644 src/FieldTitle/demos/basic.tsx create mode 100644 src/FieldTitle/demos/description.tsx create mode 100644 src/FieldTitle/index.md create mode 100644 src/FieldTitle/index.tsx create mode 100644 src/FieldTitle/style.ts diff --git a/src/FieldTitle/demos/basic.tsx b/src/FieldTitle/demos/basic.tsx new file mode 100644 index 00000000..0e6eb0e5 --- /dev/null +++ b/src/FieldTitle/demos/basic.tsx @@ -0,0 +1,53 @@ +import { ProCard } from '@ant-design/pro-components'; +import { APIFieldType, FieldTitle } from '@ant-design/pro-editor'; + +const Demo = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Demo; diff --git a/src/FieldTitle/demos/description.tsx b/src/FieldTitle/demos/description.tsx new file mode 100644 index 00000000..aa42387b --- /dev/null +++ b/src/FieldTitle/demos/description.tsx @@ -0,0 +1,26 @@ +import { ProCard } from '@ant-design/pro-components'; +import { APIFieldType, FieldTitle } from '@ant-design/pro-editor'; + +const Demo = () => { + return ( + + + + + + + + + + + + ); +}; + +export default Demo; diff --git a/src/FieldTitle/index.md b/src/FieldTitle/index.md new file mode 100644 index 00000000..f441080f --- /dev/null +++ b/src/FieldTitle/index.md @@ -0,0 +1,31 @@ +--- +title: FieldTitle 字段标题 +group: API 相关组件 +--- + +# FieldTitle 字段标题 + +## 何时使用 + +为不同的字段类型配置字段图标以及字段标题。 + +## 代码演示 + +### 字段标题列表 + + + +### 配置展示 + + + +## API + +| 参数 | 说明 | 类型 | 默认值 | +| :------------ | :----------------------------- | :-------------------------------- | :----- | +| type | 字段类型 | 参考 `FieldIcon` 字段类型类型枚举 | - | +| isParentArray | 父级是否是数组 | boolean | - | +| title | 字段标题 | `React.ReactNode` | - | +| description | 标题右侧描述 | `React.ReactNode` | - | +| extra | 额外内容 | `React.ReactNode` | - | +| checkable | 是否可选，可选会添加 `padding` | `boolean` | true | diff --git a/src/FieldTitle/index.tsx b/src/FieldTitle/index.tsx new file mode 100644 index 00000000..402bcaa6 --- /dev/null +++ b/src/FieldTitle/index.tsx @@ -0,0 +1,81 @@ +import { APIFieldType, FieldIcon, getPrefixCls } from '@ant-design/pro-editor'; +import classNames from 'classnames'; + +import { useStyle } from './style'; + +export interface FieldTitleProps { + /** + * @description 自定义前缀 + * @ignore + */ + prefixCls?: string; + /** + * 类名 + */ + className?: string; + /** + * 样式 + */ + style?: React.CSSProperties; + /** + * 字段类型 + */ + type?: APIFieldType | string; + /** + * 父级是否是数组 + */ + isParentArray?: boolean; + /** + * 字段标题 + */ + title: React.ReactNode; + /** + * 标题右侧描述 + */ + description?: React.ReactNode; + /** + * 额外内容 + */ + extra?: React.ReactNode; + /** + * 是否可选 + */ + checkable?: boolean; +} + +const FieldTitle: React.FC = (props) => { + const { + style, + className, + prefixCls: customizePrefixCls, + type, + isParentArray, + title, + description = null, + extra = null, + checkable = true, + } = props; + + const prefixCls = getPrefixCls('field-title', customizePrefixCls); + const { styles } = useStyle({ prefixCls, checkable }); + + let finalType = type; + if (finalType === 'boolean') { + finalType = 'bool'; + } + if (isParentArray) { + finalType += 'Array'; + } + return ( +
+
+ {finalType ? : null} + {title ? {title} : null} + {description ? {description} : null} +
+ {extra ?
{extra}
: null} +
+ ); +}; + +export default FieldTitle; diff --git a/src/FieldTitle/style.ts b/src/FieldTitle/style.ts new file mode 100644 index 00000000..76a63dcb --- /dev/null +++ b/src/FieldTitle/style.ts @@ -0,0 +1,32 @@ +import { createStyles, css, cx } from '@ant-design/pro-editor'; + +export const useStyle = createStyles(({ token }, { prefixCls, checkable }) => { + return { + content: cx( + `${prefixCls}-content`, + css({ + display: 'flex', + alignItems: 'center', + fontSize: token.fontSize, + }), + ), + title: cx( + `${prefixCls}-title`, + css({ + marginLeft: token.marginXXS, + }), + ), + description: cx( + `${prefixCls}-description`, + css({ + marginLeft: token.marginXXS, + }), + ), + extra: cx( + `${prefixCls}-extra`, + css({ + paddingLeft: checkable ? token.paddingLG : undefined, + }), + ), + }; +}); diff --git a/src/index.ts b/src/index.ts index bf71553d..05df5615 100644 --- a/src/index.ts +++ b/src/index.ts @@ -15,6 +15,8 @@ export { default as ErrorBoundary } from './ErrorBoundary'; export { ExcelTable } from './ExcelTable'; export type { ExcelTableProps, ExcelTableStore, TableData } from './ExcelTable'; export { default as FieldIcon } from './FieldIcon'; + +export { default as FieldTitle } from './FieldTitle'; export { default as FreeCanvas } from './FreeCanvas'; export type { FreeCanvasProps } from './FreeCanvas'; export * from './Highlight';