@wibetter/widget-schema-editor

widget-schema-editor

WidgetSchema主要用于UI组件模型设置。

技术栈：React/Mobx/Ant Design

在线Demo： 点击访问在线Demo

安装

npm install --save @wibtter/widget-schema-editor

使用示例

import * as React from 'react';
import WidgetSchemaEditor from '@wibetter/widget-schema-editor';
import '@wibetter/json-schema-editor/dist/index.css';

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

    this.state = {
      widgetLayout: [],
      currentActiveIndex: '',
      widgetSchema: {},
      mockData: {},
    };
  }

  render() {
    const {
      widgetLayout,
      currentActiveIndex,
      widgetSchema,
      mockData,
    } = this.state;
    return (
      <>
        <div className="json-action-container">
          <div className="json-schema-box">
             <WidgetSchemaEditor
                currentWidgetLayout={widgetLayout}
                currentActiveIndex={currentActiveIndex}
                updateCurrentActiveIndex={(activeIndex) => {}}
                widgetSchema={widgetSchema}
                mockData={mockData}
                onChange={(newWidgetSchema) => {
                  console.log('schemaDataChange', newWidgetSchema);
                  this.setState({
                    widgetSchema: newWidgetSchema,
                  });
                }}
             />
          </div>
        </div>
      </>
    );
  }
}

WidgetSchemaEditor 可配置参数说明