✨ feat: add FieldTitle comp

ant-design · Jul 24, 2023 · 316a4b6 · 316a4b6
1 parent fa2f845
commit 316a4b6
Show file tree

Hide file tree

Showing 6 changed files with 225 additions and 0 deletions.
diff --git a/src/FieldTitle/demos/basic.tsx 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 (
+    <ProCard ghost gutter={[8, 8]} wrap>
+      <ProCard layout="center" bordered colSpan={4}>
+        <FieldTitle type={APIFieldType.any} title="any" />
+      </ProCard>
+      <ProCard layout="center" bordered colSpan={4}>
+        <FieldTitle type={APIFieldType.any} title="anyArray" isParentArray={true} />
+      </ProCard>
+      <ProCard layout="center" bordered colSpan={4}>
+        <FieldTitle type={APIFieldType.bool} title="bool" />
+      </ProCard>
+      <ProCard layout="center" bordered colSpan={4}>
+        <FieldTitle type={APIFieldType.bool} title="boolArray" isParentArray={true} />
+      </ProCard>
+      <ProCard layout="center" bordered colSpan={4}>
+        <FieldTitle type={APIFieldType.integer} title="integer" />
+      </ProCard>
+      <ProCard layout="center" bordered colSpan={4}>
+        <FieldTitle type={APIFieldType.integer} title="integerArray" isParentArray={true} />
+      </ProCard>
+      <ProCard layout="center" bordered colSpan={4}>
+        <FieldTitle type={APIFieldType.number} title="number" />
+      </ProCard>
+      <ProCard layout="center" bordered colSpan={4}>
+        <FieldTitle type={APIFieldType.number} title="numberArray" isParentArray={true} />
+      </ProCard>
+      <ProCard layout="center" bordered colSpan={4}>
+        <FieldTitle type={APIFieldType.object} title="object" />
+      </ProCard>
+      <ProCard layout="center" bordered colSpan={4}>
+        <FieldTitle type={APIFieldType.object} title="objectArray" isParentArray={true} />
+      </ProCard>
+      <ProCard layout="center" bordered colSpan={4}>
+        <FieldTitle type={APIFieldType.string} title="string" />
+      </ProCard>
+      <ProCard layout="center" bordered colSpan={4}>
+        <FieldTitle type={APIFieldType.string} title="stringArray" isParentArray={true} />
+      </ProCard>
+      <ProCard layout="center" bordered colSpan={4}>
+        <FieldTitle type="boolean" title="boolean" />
+      </ProCard>
+      <ProCard layout="center" bordered colSpan={4}>
+        <FieldTitle title="empty" />
+      </ProCard>
+    </ProCard>
+  );
+};
+
+export default Demo;
diff --git a/src/FieldTitle/demos/description.tsx 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 (
+    <ProCard ghost gutter={[8, 8]} wrap>
+      <ProCard layout="center" bordered colSpan={24} title="描述" subTitle="描述在标题右边">
+        <FieldTitle type={APIFieldType.bool} title="success" description="成功标识" />
+      </ProCard>
+      <ProCard layout="center" bordered colSpan={24} title="额外" subTitle="额外内容在字段下面">
+        <FieldTitle type={APIFieldType.bool} title="success" extra="额外内容" />
+      </ProCard>
+      <ProCard
+        layout="center"
+        bordered
+        colSpan={24}
+        title="可选"
+        subTitle="可选为false 则额外内容左侧有 padding"
+      >
+        <FieldTitle type={APIFieldType.bool} title="success" extra="额外内容" checkable={false} />
+      </ProCard>
+    </ProCard>
+  );
+};
+
+export default Demo;
diff --git a/src/FieldTitle/index.md b/src/FieldTitle/index.md
@@ -0,0 +1,31 @@
+---
+title: FieldTitle 字段标题
+group: API 相关组件
+---
+
+# FieldTitle 字段标题
+
+## 何时使用
+
+为不同的字段类型配置字段图标以及字段标题。
+
+## 代码演示
+
+### 字段标题列表
+
+<code src="./demos/basic.tsx" ></code>
+
+### 配置展示
+
+<code src="./demos/description.tsx" ></code>
+
+## 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
@@ -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<FieldTitleProps> = (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 (
+    <div className={classNames(prefixCls, className)} style={style}>
+      <div className={styles.content}>
+        {finalType ? <FieldIcon type={finalType} /> : null}
+        {title ? <span className={styles.title}>{title}</span> : null}
+        {description ? <span className={styles.description}>{description}</span> : null}
+      </div>
+      {extra ? <div className={styles.extra}>{extra}</div> : null}
+    </div>
+  );
+};
+
+export default FieldTitle;
diff --git a/src/FieldTitle/style.ts 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
@@ -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';