-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
rdmclin2
committed
Jul 24, 2023
1 parent
fa2f845
commit 316a4b6
Showing
6 changed files
with
225 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
}), | ||
), | ||
}; | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters