-
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 14, 2023
1 parent
c438842
commit 9b0225d
Showing
5 changed files
with
201 additions
and
1 deletion.
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 |
---|---|---|
|
@@ -171,5 +171,8 @@ | |
"authors": [ | ||
"rdmclin2@163.com", | ||
"arvinx@foxmail.com" | ||
] | ||
], | ||
"gitmoji": { | ||
"capitalizeTitle": false | ||
} | ||
} |
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,20 @@ | ||
import { LevaPanel } from '@ant-design/pro-editor'; | ||
import { useState } from 'react'; | ||
import { ButtonConfig, buttonSchema } from './schema'; | ||
|
||
export default () => { | ||
const [config, setConfig] = useState<ButtonConfig>({ children: '默认按钮', type: 'primary' }); | ||
|
||
return ( | ||
<LevaPanel | ||
schema={buttonSchema} | ||
title="按钮属性配置器" | ||
value={config} | ||
onChange={(changedValue, fullValue) => { | ||
setConfig(fullValue); | ||
console.log('check changedValue:', changedValue); | ||
console.log('check fullValue:', fullValue); | ||
}} | ||
/> | ||
); | ||
}; |
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,41 @@ | ||
import { DraggablePanel, LevaPanel } from '@ant-design/pro-editor'; | ||
import { Button } from 'antd'; | ||
import { useState } from 'react'; | ||
import { ButtonConfig, buttonSchema } from './schema'; | ||
|
||
export default () => { | ||
const [config, setConfig] = useState<ButtonConfig>({ children: '默认按钮', type: 'primary' }); | ||
|
||
return ( | ||
<div | ||
style={{ | ||
minHeight: 300, | ||
display: 'flex', | ||
}} | ||
> | ||
<div | ||
style={{ | ||
flex: 1, | ||
display: 'flex', | ||
justifyContent: 'center', | ||
padding: 12, | ||
alignSelf: 'center', | ||
}} | ||
> | ||
<Button {...config} /> | ||
</div> | ||
<DraggablePanel style={{ padding: 12 }}> | ||
<LevaPanel | ||
schema={buttonSchema} | ||
title="按钮属性配置器" | ||
value={config} | ||
onChange={(changedValue, fullValue) => { | ||
setConfig(fullValue); | ||
console.log('check changedValue:', changedValue); | ||
console.log('check fullValue:', fullValue); | ||
}} | ||
/> | ||
</DraggablePanel> | ||
</div> | ||
); | ||
}; |
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,103 @@ | ||
import type { JSONSchema } from '@ant-design/pro-editor'; | ||
|
||
export interface ButtonConfig { | ||
children?: string; | ||
type?: 'primary' | 'default' | 'dashed' | 'link' | 'text'; | ||
size?: 'large' | 'middle' | 'small'; | ||
danger?: boolean; | ||
ghost?: boolean; | ||
icon?: string; | ||
shape?: 'circle' | 'round'; | ||
} | ||
|
||
/** | ||
* 按钮 Schema | ||
*/ | ||
export const buttonSchema: JSONSchema<ButtonConfig> = { | ||
type: 'object', | ||
properties: { | ||
children: { | ||
type: 'string', | ||
description: '设置按钮文本', | ||
title: '按钮文本', | ||
renderProps: { | ||
allowClear: true, | ||
placeholder: '空值将无法正常显示', | ||
autoFocus: true, | ||
}, | ||
}, | ||
type: { | ||
type: 'string', | ||
title: '类型', | ||
renderType: 'radioGroup', | ||
default: 'default', | ||
enum: ['primary', 'default', 'dashed', 'link', 'text'], | ||
enumNames: ['强调', '默认', '虚线', '链接', '文本'], | ||
renderOptions: { | ||
layout: 'vertical', | ||
noLabel: true, | ||
}, | ||
}, | ||
danger: { | ||
type: 'boolean', | ||
renderType: 'boolean', | ||
title: '危险态', | ||
default: false, | ||
}, | ||
icon: { | ||
type: 'string', | ||
title: '图标', | ||
default: '', | ||
}, | ||
size: { | ||
title: '大小', | ||
type: 'string', | ||
renderType: 'radioGroup', | ||
enum: ['large', 'middle', 'small'], | ||
enumNames: ['大', '中', '小'], | ||
default: 'middle', | ||
category: 'style', | ||
}, | ||
shape: { | ||
title: '形状', | ||
type: 'string', | ||
renderType: 'radioGroup', | ||
enumOptions: [ | ||
{ | ||
label: '默认', | ||
}, | ||
{ | ||
label: '圆形', | ||
value: 'circle', | ||
}, | ||
{ | ||
label: '胶囊', | ||
value: 'round', | ||
}, | ||
], | ||
category: 'style', | ||
renderOptions: {}, | ||
}, | ||
loading: { | ||
type: 'boolean', | ||
renderType: 'boolean', | ||
title: '加载中', | ||
default: false, | ||
category: 'status', | ||
}, | ||
disabled: { | ||
type: 'boolean', | ||
renderType: 'boolean', | ||
title: '禁用', | ||
default: false, | ||
category: 'status', | ||
}, | ||
ghost: { | ||
type: 'boolean', | ||
renderType: 'boolean', | ||
title: '幽灵按钮', | ||
default: false, | ||
category: 'style', | ||
}, | ||
}, | ||
}; |
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,33 @@ | ||
--- | ||
title: LevaPanel 属性面板 | ||
atomId: LevaPanel | ||
group: | ||
title: 面板模块 | ||
order: 1 | ||
--- | ||
|
||
# LevaPanel 属性面板 | ||
|
||
## 何时使用 | ||
|
||
基于 [Leva](https://leva.pmnd.rs/) 根据 JsonSchema 生成面板模块。 | ||
|
||
## 代码演示 | ||
|
||
### 基本使用 | ||
|
||
<code src="./demos/basic.tsx" ></code> | ||
|
||
### 按钮组件配置 | ||
|
||
<code src="./demos/button.tsx" compact></code> | ||
|
||
## API | ||
|
||
| 属性名 | 类型 | 描述 | | ||
| ------------ | ---------------------------------------------------- | -------------------- | | ||
| schema | `JSONSchema\<T\>` | JSON Schema 配置项 | | ||
| defaultValue | `T \| undefined` | 表单默认值 | | ||
| value | `T \| undefined` | 表单当前值 | | ||
| onChange | `(changedValue: Partial\<T\>, fullValue: T) => void` | 表单值变化的回调函数 | | ||
| title | `ReactNode` | 标题 | |