@wibetter/react-widget-render

react-widget-render

jdw内嵌组件【react版本】

使用场景：主要用于开发嵌套类型区块，用于定义放置的内嵌区块。

Install

npm install --save @jdwork/react-widget-render

Usage

npm install @jdwork/react-widget-render

import * as React from 'react';
import ReactWidgetRender from '@jdwork/react-widget-render';

class IndexDemo extends React.PureComponent {
  constructor(props) {
      super(props);
      this.state = {
        previewWidget: {
          "widgetId": 80,
          "widgetEnName": "jdcfe_cc_stepline",
          "widgetZhName": "带title的进度条",
          "widgetGitRepoId": "77895",
          "widgetReleaseId": 337,
          "widgetReleaseVersion": "8.0.0",
          "widgetReleaseCommitId": "da7b10b5befaa1980cffb5311ceed68ada9c32f8",
          "widgetReleaseAssets": "http://storage.jd.com/jdw-oss-prod-space/jdcfe_cc_stepline/8.0.0/build/js/index.js,http://storage.jd.com/jdw-oss-prod-space/jdcfe_cc_stepline/8.0.0/build/css/index.css.map,http://storage.jd.com/jdw-oss-prod-space/jdcfe_cc_stepline/8.0.0/build/index.html,http://storage.jd.com/jdw-oss-prod-space/jdcfe_cc_stepline/8.0.0/build/css/index.css,http://storage.jd.com/jdw-oss-prod-space/jdcfe_cc_stepline/8.0.0/build/js/index.js.map",
          "widgetReleaseSchema": "{\n  \"type\": \"object\",\n  \"title\": \"empty object\",\n  \"properties\": {\n    \"func\": {\n      \"type\": \"object\",\n      \"format\": \"func\",\n      \"description\": \"功能设置\",\n      \"readOnly\": true,\n      \"properties\": {\n        \"title\": {\n          \"type\": \"string\",\n          \"format\": \"input\",\n          \"description\": \"标题内容\"\n        }\n      },\n      \"required\": [\n        \"field_10\",\n        \"field_11\",\n        \"title\"\n      ]\n    },\n    \"style\": {\n      \"type\": \"object\",\n      \"format\": \"style\",\n      \"description\": \"样式设置\",\n      \"readOnly\": true,\n      \"properties\": {\n        \"colorDone\": {\n          \"type\": \"string\",\n          \"description\": \"已经完成的步骤色值\",\n          \"format\": \"input\"\n        },\n        \"colorNow\": {\n          \"type\": \"string\",\n          \"description\": \"当前进行的步骤色值\",\n          \"format\": \"input\"\n        },\n        \"colorNone\": {\n          \"type\": \"string\",\n          \"description\": \"未达到的步骤色值\",\n          \"format\": \"input\"\n        }\n      },\n      \"required\": [\n        \"field_5\",\n        \"backColor\",\n        \"titlePosition\",\n        \"inner\",\n        \"colorDone\",\n        \"colorNow\",\n        \"colorNone\",\n        \"numberColor\"\n      ]\n    },\n    \"data\": {\n      \"type\": \"object\",\n      \"format\": \"data\",\n      \"description\": \"数据设置\",\n      \"readOnly\": true,\n      \"properties\": {\n        \"getData\": {\n          \"type\": \"object\",\n          \"format\": \"datasource\",\n          \"properties\": {\n            \"type\": {\n              \"type\": \"string\",\n              \"default\": \"local\",\n              \"format\": \"typeSelect\",\n              \"enum\": [\n                \"local\",\n                \"remote\"\n              ],\n              \"enumextra\": [\n                \"local\",\n                \"remote\"\n              ],\n              \"description\": \"类型\"\n            },\n            \"data\": {\n              \"type\": \"string\",\n              \"format\": \"typeSelectData\",\n              \"default\": \"local\",\n              \"readOnlyInJson\": true\n            },\n            \"filter\": {\n              \"type\": \"string\",\n              \"format\": \"textarea\",\n              \"default\": \"return data;\",\n              \"description\": \"过滤器\"\n            }\n          },\n          \"description\": \"数据源\",\n          \"required\": [\n            \"name\",\n            \"filter\",\n            \"type\"\n          ]\n        }\n      },\n      \"required\": [\n        \"a a\",\n        \"jsonItem\",\n        \"getData\"\n      ]\n    }\n  },\n  \"required\": [\n    \"func\",\n    \"style\",\n    \"data\"\n  ]\n}",
          "widgetData": "{\n  \"func\": {\n    \"title\": \"进度标题~\"\n  },\n  \"style\": {\n    \"colorDone\": \"#bce8a3\",\n    \"colorNow\": \"#7b5\",\n    \"colorNone\": \"#a2a2a2\"\n  },\n  \"data\": {\n    \"getData\": {\n      \"type\": {\n        \"data\": [\n          {\n            \"title\": \"可视化开发\",\n            \"subtitle\": \"简化前端工程复杂度\"\n          },\n          {\n            \"title\": \"丰富的物料\",\n            \"subtitle\": \"物料拼装提高项目开发效率\"\n          },\n          {\n            \"title\": \"最佳实践\",\n            \"subtitle\": \"结合丰富的经验沉淀出的项目开发最佳实践\"\n          },\n          {\n            \"title\": \"自定义物料\",\n            \"subtitle\": \"通过物料开发者工具快速开发构建私有物料体系\"\n          },\n          {\n            \"title\": \"多模版支持\",\n            \"subtitle\": \"支持React、Vue、Angular等框架模版\"\n          },\n          {\n            \"title\": \"数据灵活配置\",\n            \"subtitle\": \"Json Schema自定义数据可灵活配置页面展示\"\n          }\n        ]\n      },\n      \"data\": {\n        \"step\": {\n          \"list\": [\n            {\n              \"id\": \"id1\",\n              \"value\": \"选择类目\"\n            },\n            {\n              \"id\": \"id2\",\n              \"value\": \"填写详细信息1\"\n            },\n            {\n              \"id\": \"id4\",\n              \"value\": \"填写详细信息2\"\n            },\n            {\n              \"id\": \"id3\",\n              \"value\": \"完成\"\n            }\n          ],\n          \"focusIndex\": 3\n        }\n      },\n      \"filter\": \"() => {}\"\n    }\n  }\n}",
          "readonlyflag": 0,
          "widgetTimeStamp": "1599907217385",
          "widgetConfigId": 9779
        }, // 测试数据1：内嵌的区块数据对象
      };
    }

    render() {
      const { previewWidget } = this.state;
      return (
        <div className="index-demo">
          <div className="jdw-widget-render">
            <ReactWidgetRender
              widgetUUID={'myWidgetTest123'} // 当前嵌套组件的UUID
              embedWidgetKey={'embedWidgetKey123'} // 当前内嵌区块数据对象的key
              previewWidget={previewWidget} // 内嵌区块数据对象
              didUpdateCallBack={() => {
                console.log('jdw内嵌组件完成渲染后触发');
              }}
            />
          </div>
        </div>
      );
    }
}

JSONEditor Props

name	type	default	desc
widgetUUID	boolean	false	当前嵌套组件的UUID（区块的唯一标识）
embedWidgetKey	boolean	false	当前内嵌区块数据对象的key（JSONSchema中获取previewWidget的key）
previewWidget	object	{}	内嵌区块数据对象
didUpdateCallBack	function	null	jdw内嵌组件完成渲染后触发

UUID在线生成（可用于生成widgetUUID）

https://1024tools.com/uuid