npm.io
7.0.5 • Published 6 months ago

@wibetter/json-editor

Licence
MIT
Version
7.0.5
Deps
14
Size
181 kB
Vulns
0
Weekly
0
Stars
49
SummaryDependencyVersions

JSONEditor功能组件

JSON数据可视化/JSONEditor，可视化界面编辑json数据

使用场景

以表单的形式编辑 json 数据，可用于支持组件或页面可视化配置。

技术栈

React/Mobx/Ant Design

特点
  1. 弹性布局，提供大屏和小屏两种展示模式
  2. 支持字段联动
  3. 支持16种基础类型组件（input、boolean、 date、date-time、 time、 url、 textarea、number、color、radio、 checkboxes、select、cascader、input-image、button-group-select、input-rate）
  4. 支持8种特殊类型组件（object、array、json、codearea、htmlarea、text-editor(使用说明)、quantity、padding-margin）
  5. 支持json转schema能力，当schemaData为空而jsonData不为空时，自动通过json转换一个对应的schemaData
  6. 支持通过表达式设置数据联动（支持两种数据域：全局数据域、当前局部数据域）
  7. 支持源码模式切换（开启源码模式后可以开启编辑模式）
  8. 支持添加自定义类型组件

安装

npm install --save @wibetter/json-editor

使用示例

import * as React from 'react';
import JSONEditor from '@wibetter/json-editor';
import '@wibetter/json-editor/lib/index.css';

class IndexDemo extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      jsonSchema: {},
      jsonData: {},
      options: {
        wideScreen: false,   // 宽屏/小屏模式
        viewStyle: 'fold',   // 展示风格：fold | tabs
        jsonView: false,     // 是否开启源码模式
        jsonViewReadOnly: true, // 源码模式是否只读
      },
    };
  }

  render() {
    const { jsonSchema, jsonData, options } = this.state;
    return (
      <>
        <div className="json-action-container">
          <div className="json-editor-box">
            <JSONEditor
              schemaData={jsonSchema}
              jsonData={jsonData}
              options={options}
              onChange={(newJsonData) => {
                this.setState({
                  jsonData: newJsonData
                });
              }}
            />
          </div>
        </div>
      </>
    );
  }
}

JSONEditor 可配置参数

name type default desc
schemaData object {} 非必填，json的结构数据，备注：schemaData为空而jsonData不为空时，会自动通过jsonData生产一份对应的schemaData
jsonData object {} 必填项，json的内容数据
options object {} 非必填，配置项对象，详见下方 options 说明
onChange function () => {} jsonData内容变动时会触发onChange

options 配置项说明

所有展示控制、行为配置均通过 options 统一传入。

options 字段 type default desc
viewStyle string 'fold' 展示风格，fold：可折叠面板，tabs：选项卡切换面板
tabPosition string 'center' 标签栏位置，viewStyle 为 tabs 时有效，可选：top、bottom、left、right、center
tabType string 'line' 标签样式，viewStyle 为 tabs 时有效，可选：line、card、editable-card
jsonView boolean false 是否开启全局源码模式，开启后展示 JSON 源码视图
jsonViewReadOnly boolean true 源码模式下是否只读，jsonView 为 true 时有效
wideScreen boolean false 宽屏模式/小屏模式，默认是小屏模式
GlobalOptions array [] 全局默认选项，用于 select/radio/checkbox 等字段的默认备选项，格式：[{ label?: string, value: string }]

button-group-select 类型说明

button-group-select 是内置的按钮组单选类型，在表单中以按钮切换形式进行单击选中，交互体验类似 amis button-group-select。

schema 结构

schema 结构与 radio（单选）类型完全一致：

{
  "type": "button-group-select",
  "title": "布局方向",
  "options": [
    { "label": "水平", "value": "horizontal" },
    { "label": "垂直", "value": "vertical" },
    { "label": "自适应", "value": "auto" }
  ],
  "default": "horizontal",
  "description": "请选择布局方向"
}
配置项
字段 类型 默认值 说明
options array [] 选项列表，格式：[{ label, value }]
default string '' 默认选中项的 value 值
vertical boolean false 垂直模式，开启后按钮组以垂直方向排列
readOnly boolean false 只读模式，禁止用户切换
使用示例

平铺模式（默认）：

{
  "type": "object",
  "properties": {
    "direction": {
      "type": "button-group-select",
      "title": "排列方向",
      "options": [
        { "label": "水平", "value": "horizontal" },
        { "label": "垂直", "value": "vertical" }
      ],
      "default": "horizontal"
    }
  },
  "propertyOrder": ["direction"]
}

垂直模式：

{
  "type": "object",
  "properties": {
    "align": {
      "type": "button-group-select",
      "title": "对齐方式",
      "options": [
        { "label": "左对齐", "value": "left" },
        { "label": "居中对齐", "value": "center" },
        { "label": "右对齐", "value": "right" }
      ],
      "default": "left",
      "vertical": true
    }
  },
  "propertyOrder": ["align"]
}

input-rate 类型说明

input-rate 是内置的评分类型，在表单中以星星评分形式进行交互，底层使用 Ant Design Rate 组件。

schema 结构
{
  "type": "input-rate",
  "title": "评分",
  "default": 3,
  "description": "请对该内容进行评分",
  "count": 5,
  "allowHalf": false,
  "allowClear": true,
  "size": "default",
  "tooltips": "差,较差,一般,良好,优秀"
}
配置项
字段 类型 默认值 说明
default number 0 默认评分值
count number 5 star 总数
allowHalf boolean false 是否允许选择半星
allowClear boolean true 是否允许再次点击后清除评分
size string 'default' 评分组件尺寸，可选：'small'、'default'、'large'
tooltips string - 自定义每项的提示信息，多个值用英文逗号分隔，如：差,较差,一般,良好,优秀
readOnly boolean false 只读模式，禁止用户交互
使用示例

基础用法：

{
  "type": "object",
  "properties": {
    "score": {
      "type": "input-rate",
      "title": "满意度评分",
      "default": 3,
      "description": "请对本次服务进行评分"
    }
  },
  "propertyOrder": ["score"]
}

半星 + 提示文案：

{
  "type": "object",
  "properties": {
    "rating": {
      "type": "input-rate",
      "title": "内容质量",
      "default": 2.5,
      "count": 5,
      "allowHalf": true,
      "allowClear": true,
      "size": "large",
      "tooltips": "差,较差,一般,良好,优秀"
    }
  },
  "propertyOrder": ["rating"]
}

自定义类型组件

JSONEditor 支持通过注册自定义渲染器来扩展字段类型，可以针对特定的 type 值渲染自定义类型组件。

注册方式
import { registerRenderer } from '@wibetter/json-editor';

class MyCustomRenderer extends React.Component {
  render() {
    const { targetJsonSchema, jsonStore, keyRoute } = this.props;
    const currentValue = jsonStore.getJSONDataByKeyRoute(keyRoute);

    return (
      <div className="custom-field">
        <label>{targetJsonSchema.title}</label>
        <input
          value={currentValue ?? ''}
          onChange={(e) => {
            jsonStore.updateFormValueData(keyRoute, e.target.value);
          }}
        />
      </div>
    );
  }
}

// 注册json-editor自定义渲染器
registerRenderer({
  type: 'custom-config',
  component: MyCustomRenderer,
});
渲染器 Props 说明

自定义渲染器组件会接收以下 props：

prop type desc
keyRoute string 当前字段在 JSON 数据中的路径，如 style-color
jsonKey string 当前字段的 key 值
targetJsonSchema object 当前字段的 schema 配置对象
jsonStore object JSON 数据 store，提供数据读写方法
schemaStore object Schema 数据 store
renderChild func 渲染子字段的方法，用于嵌套结构场景
parentType string 父级字段的 type 值
完整自定义类型组件示例
import * as React from 'react';
import JSONEditor, { registerRenderer } from '@wibetter/json-editor';
import '@wibetter/json-editor/lib/index.css';

class ColorPickerRenderer extends React.Component {
  render() {
    const { targetJsonSchema, jsonStore, keyRoute } = this.props;
    const { title, description } = targetJsonSchema;
    const currentValue = jsonStore.getJSONDataByKeyRoute(keyRoute) ?? '#ffffff';

    return (
      <div style={{ display: 'flex', alignItems: 'center', padding: '4px 0' }}>
        <span style={{ marginRight: 8 }}>{title}</span>
        <input
          type="color"
          value={currentValue}
          title={description}
          onChange={(e) => {
            jsonStore.updateFormValueData(keyRoute, e.target.value);
          }}
        />
        <span style={{ marginLeft: 8 }}>{currentValue}</span>
      </div>
    );
  }
}

// 注册成json-editor配置项
registerRenderer({
  type: 'color-picker',
  component: ColorPickerRenderer
});


// 使用示例
class Demo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      jsonSchema: {
        type: 'object',
        properties: {
          style: {
            type: 'object',
            title: '外观设置',
            properties: {
              bgColor: {
                type: 'color-picker',  // 对应自定义渲染器的 type
                title: '背景颜色',
                default: '#ffffff',
              },
            },
            propertyOrder: ['bgColor'],
          },
        },
        propertyOrder: ['style'],
      },
      jsonData: {},
      options: {
        viewStyle: 'fold',
        wideScreen: true,
      },
    };
  }

  render() {
    const { jsonSchema, jsonData, options } = this.state;
    return (
      <JSONEditor
        schemaData={jsonSchema}
        jsonData={jsonData}
        options={options}
        onChange={(newJsonData) => {
          this.setState({ jsonData: newJsonData });
        }}
      />
    );
  }
}

Keywords

jsonjson数据可视化配置可视化