Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/one-gourd/ide-props-editor
属性编辑器 ，demo https://one-gourd.github.io/ide-props-editor/
https://github.com/one-gourd/ide-props-editor
Last synced: about 2 months ago
JSON representation
属性编辑器 ，demo https://one-gourd.github.io/ide-props-editor/
- Host: GitHub
- URL: https://github.com/one-gourd/ide-props-editor
- Owner: one-gourd
- Created: 2019-04-12T02:37:49.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-07-01T07:16:14.000Z (about 5 years ago)
- Last Synced: 2024-07-11T05:33:07.297Z (2 months ago)
- Language: TypeScript
- Homepage:
- Size: 654 KB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome - one-gourd/ide-props-editor - 属性编辑器 ，demo https://one-gourd.github.io/ide-props-editor/ (TypeScript)
README
## 概览
ide-props-editor 是 gourd 的属性编辑器，具有很强的扩展性，可以根据实际业务场景定制任何类型的属性编辑器。
ide-props-editor 目前内置的编辑器列表：
type | 类 | 用途
--|:--:|:--
string| StringEditor | 字符串编辑器（渲染成输入框）
enum| EnumEditor | 枚举编辑器（渲染成选择框或单选框）
boolean| BooleanEditor | 逻辑类型编辑器（渲染成开关）
id| IdEditor | id类型编辑器（渲染成输入框，可复制，保证唯一性）
number| NumberEditor | 数值类型编辑器（渲染成数值输入框）
function| FunctionEditor | 函数类型编辑器（只调用 gourd 的葫芦面板，不自己渲染）
array| ArrayEditor | 数组类型编辑器（会渲染一个表单表格）
object| ObjectEditor | 对象类型编辑器（会再渲染一个子属性编辑器）
## 安装使用
npm 包方式：
```shell
npm install --save ide-props-editor
```
web 方式：
```html
```
引入之后将会暴露全局变量 `idePropsEditor`.
> 如果你想要在 webpack 中 external 该库，可以使用以下配置：
```js
{
externals: {
"ide-props-editor": {
"commonjs": "ide-props-editor",
"commonjs2": "ide-props-editor",
"amd": "ide-props-editor",
"root": "idePropsEditor"
}
}
}
```
## 如何本地开发？
### 本地调试
首先从 git 仓库拉取代码，安装依赖项：
```shell
git clone [email protected]:one-gourd/ide-props-editor.git
npm install
## 安装 peerDependencies 依赖包
npm install [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]
```
运行以下命令后，访问 demo 地址： http://localhost:9000
```shell
npm run dev
```
也可访问 [storybook](https://github.com/storybooks/storybook) 参考具体的使用案例：http://localhost:9001/
```shell
npm run storybook
```
### 运行测试用例
使用 [jest](https://jestjs.io) 进行测试，执行：
```shell
npm test
```
## 简单用法
```js
import {PropsEditor, IPropsEditorProps, schemaType} from 'ide-props-editor';
```
输入源是标准的 schema （详细语义请看 gourd 的 schema 规范）：
```js
const schema: schemaType = {
"group": [
{
"name": "base",
"defaultOpen": true,
"title": "基础属性",
"properties": ["key", "children", "size", "loading", "shap", "width", "dataSource", "labelProp"]
},
{
"name": "event",
"defaultOpen": true,
"title": "事件",
"properties": ["onChange"]
}
],
"properties": {
"key": {
"type": "id",
"title": "唯一 id",
"prefix": "$Button_"
},
"children": {
"type": "string",
"title": "文案"
},
"size": {
"type": "enum",
"title": "大小",
"enum": ["small", "medium", "large"]
},
"shap": {
"type": "enum",
"title": "形状",
"enum": ["small", "large"]
},
"loading": {
"type": "boolean",
"title": "载入状态"
},
"width": {
"type": "number",
"title": "宽度"
},
"dataSource": {
"type": "array",
"title": "数据源",
"items": {
"type": "object",
"properties": {
"label": {
"title": "文本",
"type": "string"
},
"value": {
"title": "值",
"type": "string"
}
}
}
},
"labelProp": {
"type": "object",
"title": "对象属性",
"properties": {
"children": {
"type": "string",
"title": "文案"
},
"size": {
"type": "enum",
"title": "大小",
"enum": ["small", "medium", "large"]
}
}
},
"onChange": {
"type": "function",
"title": "值改变后"
}
}
};
```
可以配置已经存在的属性值：
```js
const formData = {
"children": "按钮测试",
"loading": true,
"size": "$store.$Button_999.children",
"dataSource": [
{"value": "value1", "label": "label1"},
{"value": "value2", "label": "label2"},
{"value": "value3", "label": "label3"}
],
"key": "$Button_999"
};
```
（非必须）配置 mbox 的 store 对象，用于变量输入框的自动提示
```js
const $store = {
$Button_999: {
"children": "按钮测试",
"loading": true,
"size": "medium",
"key": "$Button_999"
},
"a": {
"loading": false
}
};
```
（非必须）可以挂载或覆盖自定义的编辑器
```js
function useEditor(propSchema: any, editors: any): any {
const {type} = propSchema;
let Editor;
if(type === 'abc'){
return (
自定义的编辑器);
}
return null;
}
```
配置组件属性：
```js
const props: IPropsEditorProps = {
visible: true,
schema: schema,
formData: formData,
useEditor: useEditor,
editorExtraParam: {
key: 'key',
//用于 id 是否唯一的判断
keys: ["$Button_123"],
$store: $store,
clientFnSets: clientFnSets,
fnNameRule: '__$comId_$fnName'
}
};
```
初始化组件：
```js
const handleChange = useCallback((ev: any) => {
console.log(ev.formData);
}, []);
```
## 详细 API
属性 | 用途 | 类型 | 默认值
--|--|--|--
schema| 输入源 schema ,必填 | schemaType | {group: [],properties: {}}
formData | 默认数据 | object | {}
useEditor| 指定使用特定的属性编辑器 | function | null
onChange| 值改变后触发的事件 | onChangeParamType | {formData: any,prop: string,value: any}
visible| 是否显示 | boolean | true
theme| 主题配置 | object | {}
styles| 样式配置 | object | {}