1.0.1 • Published 3 years ago
@wibetter/react-widget-render v1.0.1
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)
1.0.1
3 years ago