@wibetter/json-editor

v7.0.5

Published

a month ago

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

0High
0Medium
0Low

wibetter

json json数据可视化配置可视化

JSONEditor功能组件

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

使用场景

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

技术栈

React/Mobx/Ant Design

特点

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

安装

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 });
        }}
      />
    );
  }
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

JSONEditor功能组件

使用场景

技术栈

特点

安装

使用示例

JSONEditor 可配置参数

options 配置项说明

button-group-select 类型说明

schema 结构

配置项

使用示例

input-rate 类型说明

schema 结构

配置项

使用示例

自定义类型组件

注册方式

渲染器 Props 说明

完整自定义类型组件示例