mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-19 05:48:17 +00:00
chore: demo
This commit is contained in:
wuji.xwt
parent
99b1d84f95
commit
931911b7a3
@ -1,62 +1,3 @@
|
|||||||
# iceluna-sdk
|
# Ali Low-Code React Renderer
|
||||||
|
|
||||||
> iceluna 底层引擎渲染能力。
|
> 低代码引擎渲染模块。
|
||||||
|
|
||||||
## Table of Contents
|
|
||||||
|
|
||||||
- [Background](#background)
|
|
||||||
- [Install](#install)
|
|
||||||
- [Develop](#Develop)
|
|
||||||
- [Structure](#Structure)
|
|
||||||
- [Publish](#Publish)
|
|
||||||
- [Maintainers](#maintainers)
|
|
||||||
- [Contributing](#contributing)
|
|
||||||
- [License](#license)
|
|
||||||
|
|
||||||
## Background
|
|
||||||
iceluna 是由淘系技术部研发，面向中后台应用低代码搭建的通用解决方案，集前端应用工程创建、开发、调试及发布的全链路一体化的低代码搭建平台。同时，基于集团中后台 《搭建基础协议》 和 《物料协议》 标准之上，生产低代码搭建物料，沉淀搭建基础设施，助力上层不同业务领域 孵化低代码搭建产品，目标 打造成为基于集团标准的低代码搭建中台。
|
|
||||||
|
|
||||||
iceluna 代码整个项目结构如下图。
|
|
||||||
|
|
||||||
|
|
||||||
该项目 iceluna-SDK 为 iceluna 通用解决方案的提供最底层，最核心的渲染引擎能力。为 iceluna 体系上层可视化编辑器提供基础引擎能力。
|
|
||||||
|
|
||||||
## Install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
# 前提：tnpm install @ali/iceluna-cli -g
|
|
||||||
tnpm i
|
|
||||||
```
|
|
||||||
|
|
||||||
## Develop
|
|
||||||
1. 执行 `tnpm link`, 在全局建立符号链接。
|
|
||||||
2. 到[IDE项目](http://gitlab.alibaba-inc.com/iceluna/iceluna-IDE)启动前，执行 `tnpm link @ali/iceluna-sdk`，建立连接。
|
|
||||||
3. 按照 `iceluna-IDE` 方式调试
|
|
||||||
|
|
||||||
## Structure
|
|
||||||
```
|
|
||||||
.
|
|
||||||
└── src
|
|
||||||
├── comp
|
|
||||||
├── context
|
|
||||||
├── engine
|
|
||||||
├── hoc
|
|
||||||
├── utils
|
|
||||||
```
|
|
||||||
|
|
||||||
## Publish
|
|
||||||
|
|
||||||
## Maintainers
|
|
||||||
|
|
||||||
[@月飞](dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=qhkv9cp), [@下羊](dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=r93lhx4)
|
|
||||||
|
|
||||||
## Contributing
|
|
||||||
|
|
||||||
See [the contributing file](CONTRIBUTING.md)!
|
|
||||||
|
|
||||||
PRs accepted.
|
|
||||||
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
MIT © 2019
|
|
||||||
|
|||||||
175
packages/react-renderer/demo/config/components.js
vendored
Normal file
175
packages/react-renderer/demo/config/components.js
vendored
Normal file
@ -0,0 +1,175 @@
|
|||||||
|
import Div from '@ali/iceluna-components-div';
|
||||||
|
import Text from '@ali/iceluna-components-text';
|
||||||
|
import A from '@ali/iceluna-components-a';
|
||||||
|
import Image from '@ali/iceluna-components-image';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Balloon,
|
||||||
|
Button,
|
||||||
|
Checkbox,
|
||||||
|
Dropdown,
|
||||||
|
Grid,
|
||||||
|
Menu,
|
||||||
|
Select,
|
||||||
|
Tab,
|
||||||
|
Table,
|
||||||
|
Radio,
|
||||||
|
Pagination,
|
||||||
|
Input,
|
||||||
|
Icon,
|
||||||
|
Switch,
|
||||||
|
Tree,
|
||||||
|
NumberPicker,
|
||||||
|
Collapse,
|
||||||
|
Range,
|
||||||
|
Dialog,
|
||||||
|
Overlay,
|
||||||
|
Search,
|
||||||
|
Loading,
|
||||||
|
MenuButton,
|
||||||
|
Badge,
|
||||||
|
Message,
|
||||||
|
Slider,
|
||||||
|
SplitButton,
|
||||||
|
Paragraph,
|
||||||
|
Nav,
|
||||||
|
Breadcrumb,
|
||||||
|
Step,
|
||||||
|
DatePicker,
|
||||||
|
TimePicker,
|
||||||
|
Rating,
|
||||||
|
Upload,
|
||||||
|
Tag,
|
||||||
|
Card,
|
||||||
|
Calendar,
|
||||||
|
Progress,
|
||||||
|
Cascader,
|
||||||
|
ConfigProvider,
|
||||||
|
Animate,
|
||||||
|
CascaderSelect,
|
||||||
|
Transfer,
|
||||||
|
TreeSelect,
|
||||||
|
Timeline,
|
||||||
|
VirtualList,
|
||||||
|
} from '@alifd/next';
|
||||||
|
|
||||||
|
const { Row, Col } = Grid;
|
||||||
|
const {
|
||||||
|
Item: MenuItem,
|
||||||
|
Group: MenuGroup,
|
||||||
|
SubMenu,
|
||||||
|
PopupItem: MenuPopupItem,
|
||||||
|
CheckboxItem: MenuCheckboxItem,
|
||||||
|
RadioItem: MenuRadioItem,
|
||||||
|
Divider: MenuDivider,
|
||||||
|
} = Menu;
|
||||||
|
const { Item: TabItem } = Tab;
|
||||||
|
const { Column: TableColumn, ColumnGroup: TableColumnGroup } = Table;
|
||||||
|
const { Group: ButtonGroup } = Button;
|
||||||
|
const { Group: RadioGroup } = Radio;
|
||||||
|
const { Node: TreeNode } = Tree;
|
||||||
|
const { Panel: CollapsePanel } = Collapse;
|
||||||
|
const { Tooltip } = Balloon;
|
||||||
|
const { AutoComplete: SelectAutoComplete, OptionGroup: SelectOptionGroup, Option: SelectOption } = Select;
|
||||||
|
const { Item: MenuButtonItem } = MenuButton;
|
||||||
|
const { Item: StepItem } = Step;
|
||||||
|
const { Item: NavItem, SubNav, PopupItem: NavPopItem, Group: NavGroup } = Nav;
|
||||||
|
const { Item: BreadcrumbItem } = Breadcrumb;
|
||||||
|
const { MonthPicker, RangePicker, YearPicker } = DatePicker;
|
||||||
|
const { Card: UploadCard, Dragger: UploadDragger, Selecter: UploadSelecter } = Upload;
|
||||||
|
const { Closeable: TagCloseable, Selectable: TagSelectable } = Tag;
|
||||||
|
const { Popup } = Overlay;
|
||||||
|
const { Node: TreeSelectNode } = TreeSelect;
|
||||||
|
const { Item: TimelineItem } = Timeline;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
Div,
|
||||||
|
A,
|
||||||
|
Text,
|
||||||
|
Image,
|
||||||
|
|
||||||
|
Balloon,
|
||||||
|
Tooltip,
|
||||||
|
Button,
|
||||||
|
ButtonGroup,
|
||||||
|
Checkbox,
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Select,
|
||||||
|
SelectAutoComplete,
|
||||||
|
SelectOptionGroup,
|
||||||
|
SelectOption,
|
||||||
|
Dropdown,
|
||||||
|
Menu,
|
||||||
|
MenuItem,
|
||||||
|
MenuGroup,
|
||||||
|
MenuDivider,
|
||||||
|
SubMenu,
|
||||||
|
MenuPopupItem,
|
||||||
|
MenuCheckboxItem,
|
||||||
|
MenuRadioItem,
|
||||||
|
MenuButton,
|
||||||
|
MenuButtonItem,
|
||||||
|
Loading,
|
||||||
|
Tab,
|
||||||
|
TabItem,
|
||||||
|
Table,
|
||||||
|
TableColumn,
|
||||||
|
TableColumnGroup,
|
||||||
|
Radio,
|
||||||
|
RadioGroup,
|
||||||
|
Pagination,
|
||||||
|
Input,
|
||||||
|
Icon,
|
||||||
|
Switch,
|
||||||
|
Tree,
|
||||||
|
TreeNode,
|
||||||
|
NumberPicker,
|
||||||
|
Collapse,
|
||||||
|
Dialog,
|
||||||
|
Overlay,
|
||||||
|
Popup,
|
||||||
|
CollapsePanel,
|
||||||
|
Range,
|
||||||
|
Search,
|
||||||
|
Badge,
|
||||||
|
Message,
|
||||||
|
Slider,
|
||||||
|
SplitButton,
|
||||||
|
Paragraph,
|
||||||
|
Nav,
|
||||||
|
NavItem,
|
||||||
|
NavPopItem,
|
||||||
|
NavGroup,
|
||||||
|
SubNav,
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
Rating,
|
||||||
|
Step,
|
||||||
|
StepItem,
|
||||||
|
DatePicker,
|
||||||
|
MonthPicker,
|
||||||
|
RangePicker,
|
||||||
|
YearPicker,
|
||||||
|
TimePicker,
|
||||||
|
Upload,
|
||||||
|
UploadCard,
|
||||||
|
UploadDragger,
|
||||||
|
UploadSelecter,
|
||||||
|
Tag,
|
||||||
|
TagCloseable,
|
||||||
|
TagSelectable,
|
||||||
|
Card,
|
||||||
|
Calendar,
|
||||||
|
Progress,
|
||||||
|
Cascader,
|
||||||
|
ConfigProvider,
|
||||||
|
Animate,
|
||||||
|
CascaderSelect,
|
||||||
|
Transfer,
|
||||||
|
TreeSelect,
|
||||||
|
TreeSelectNode,
|
||||||
|
Timeline,
|
||||||
|
TimelineItem,
|
||||||
|
VirtualList,
|
||||||
|
};
|
||||||
3
packages/react-renderer/demo/config/constants.js
vendored
Normal file
3
packages/react-renderer/demo/config/constants.js
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export default {
|
||||||
|
name: 'renderer-demo'
|
||||||
|
};
|
||||||
11
packages/react-renderer/demo/config/utils.js
vendored
Normal file
11
packages/react-renderer/demo/config/utils.js
vendored
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { Message, Dialog } from '@alifd/next';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
Message,
|
||||||
|
Dialog,
|
||||||
|
moment,
|
||||||
|
test: function(msg) {
|
||||||
|
this.Message.notice(msg);
|
||||||
|
}
|
||||||
|
};
|
||||||
37
packages/react-renderer/demo/list.md
Normal file
37
packages/react-renderer/demo/list.md
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
---
|
||||||
|
title: 列表
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
````jsx
|
||||||
|
import React, { PureComponent } from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import ReactRenderer from '@ali/lowcode-react-renderer';
|
||||||
|
import schema from './schemas/list';
|
||||||
|
import components from './config/components';
|
||||||
|
import utils from './config/utils';
|
||||||
|
import constants from './config/constants';
|
||||||
|
|
||||||
|
class Demo extends PureComponent {
|
||||||
|
static displayName = 'renderer-demo';
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="demo">
|
||||||
|
<ReactRenderer
|
||||||
|
key={schema.fileName}
|
||||||
|
schema={schema}
|
||||||
|
components={components}
|
||||||
|
appHelper={{
|
||||||
|
utils,
|
||||||
|
constants
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDOM.render((
|
||||||
|
<Demo />
|
||||||
|
), mountNode);
|
||||||
|
````
|
||||||
224
packages/react-renderer/demo/schemas/list.js
vendored
Normal file
224
packages/react-renderer/demo/schemas/list.js
vendored
Normal file
@ -0,0 +1,224 @@
|
|||||||
|
export default {
|
||||||
|
componentName: 'Page',
|
||||||
|
fileName: 'tab_article',
|
||||||
|
props: {
|
||||||
|
style: {
|
||||||
|
paddingTop: 20,
|
||||||
|
paddingRight: 20,
|
||||||
|
paddingLeft: 20
|
||||||
|
}
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
componentName: 'Div',
|
||||||
|
props: {
|
||||||
|
style: {
|
||||||
|
marginTop: 5,
|
||||||
|
marginBottom: 15,
|
||||||
|
borderBottom: '1px solid rgba(244,244,244)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
componentName: 'Div',
|
||||||
|
props: {
|
||||||
|
style: {
|
||||||
|
marginBottom: 15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
componentName: 'Text',
|
||||||
|
props: {
|
||||||
|
text: '{{this.item.title}}',
|
||||||
|
style: {
|
||||||
|
color: 'rgba(51,51,51)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
componentName: 'Text',
|
||||||
|
props: {
|
||||||
|
text: '{{this.item.datetime}}',
|
||||||
|
style: {
|
||||||
|
fontSize: '12px',
|
||||||
|
color: '#666',
|
||||||
|
float: 'right'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
componentName: 'Div',
|
||||||
|
props: {
|
||||||
|
style: {
|
||||||
|
paddingBottom: 15,
|
||||||
|
fontSize: '13px',
|
||||||
|
color: '#666'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
children: '{{this.item.description}}'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
componentName: 'Div',
|
||||||
|
props: {
|
||||||
|
style: {
|
||||||
|
marginBottom: 15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
componentName: 'Button',
|
||||||
|
props: {
|
||||||
|
type: 'normal',
|
||||||
|
style: {
|
||||||
|
marginRight: 5,
|
||||||
|
marginLeft: 5
|
||||||
|
},
|
||||||
|
size: 'small'
|
||||||
|
},
|
||||||
|
children: '{{this.item}}',
|
||||||
|
loop: '{{this.item.tags}}'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
componentName: 'Div',
|
||||||
|
props: {
|
||||||
|
style: {
|
||||||
|
marginBottom: 15,
|
||||||
|
float: 'right'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
componentName: 'Div',
|
||||||
|
props: {
|
||||||
|
style: {
|
||||||
|
display: 'inline-block',
|
||||||
|
marginRight: 5,
|
||||||
|
marginBottom: 15,
|
||||||
|
marginLeft: 5,
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#666',
|
||||||
|
float: 'none'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
children: '{{"点赞："+this.item.star}}'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
componentName: 'Div',
|
||||||
|
props: {
|
||||||
|
style: {
|
||||||
|
display: 'inline-block',
|
||||||
|
marginRight: 5,
|
||||||
|
marginBottom: 15,
|
||||||
|
marginLeft: 5,
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#666',
|
||||||
|
float: 'none'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
children: '{{"喜爱："+this.item.like}}'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
componentName: 'Div',
|
||||||
|
props: {
|
||||||
|
style: {
|
||||||
|
display: 'inline-block',
|
||||||
|
marginRight: 5,
|
||||||
|
marginBottom: 15,
|
||||||
|
marginLeft: 5,
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#66',
|
||||||
|
float: 'none'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
children: '{{"评论："+this.item.comment}}'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
loop: '{{this.state.dataSource}}'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
componentName: 'Pagination',
|
||||||
|
props: {
|
||||||
|
shape: 'normal',
|
||||||
|
type: 'normal',
|
||||||
|
size: 'medium',
|
||||||
|
style: {
|
||||||
|
marginTop: 10,
|
||||||
|
marginBottom: 30,
|
||||||
|
textAlign: 'right'
|
||||||
|
},
|
||||||
|
onChange: function onChange(current, e) {
|
||||||
|
//页码发生改变时的回调函数
|
||||||
|
//@param {Number} current 改变后的页码数
|
||||||
|
//@param {Object} e 点击事件对象
|
||||||
|
this.page.reloadDataSource();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dataSource: {
|
||||||
|
dataHandler: function dataHandler(dataMap) {
|
||||||
|
const dataSource = [
|
||||||
|
{
|
||||||
|
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||||||
|
description:
|
||||||
|
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||||||
|
tags: ['直播', '大促', '简介'],
|
||||||
|
datetime: '2017年12月12日 18:00',
|
||||||
|
star: Math.floor(Math.random() * 100) + 100,
|
||||||
|
like: Math.floor(Math.random() * 100) + 200,
|
||||||
|
comment: Math.floor(Math.random() * 100) + 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||||||
|
description:
|
||||||
|
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||||||
|
tags: ['直播', '大促', '简介'],
|
||||||
|
datetime: '2017年12月12日 18:00',
|
||||||
|
star: Math.floor(Math.random() * 100) + 100,
|
||||||
|
like: Math.floor(Math.random() * 100) + 200,
|
||||||
|
comment: Math.floor(Math.random() * 100) + 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||||||
|
description:
|
||||||
|
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||||||
|
tags: ['直播', '大促', '简介'],
|
||||||
|
datetime: '2017年12月12日 18:00',
|
||||||
|
star: Math.floor(Math.random() * 100) + 100,
|
||||||
|
like: Math.floor(Math.random() * 100) + 200,
|
||||||
|
comment: Math.floor(Math.random() * 100) + 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||||||
|
description:
|
||||||
|
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||||||
|
tags: ['直播', '大促', '简介'],
|
||||||
|
datetime: '2017年12月12日 18:00',
|
||||||
|
star: Math.floor(Math.random() * 100) + 100,
|
||||||
|
like: Math.floor(Math.random() * 100) + 200,
|
||||||
|
comment: Math.floor(Math.random() * 100) + 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||||||
|
description:
|
||||||
|
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||||||
|
tags: ['直播', '大促', '简介'],
|
||||||
|
datetime: '2017年12月12日 18:00',
|
||||||
|
star: Math.floor(Math.random() * 100) + 100,
|
||||||
|
like: Math.floor(Math.random() * 100) + 200,
|
||||||
|
comment: Math.floor(Math.random() * 100) + 100
|
||||||
|
}
|
||||||
|
];
|
||||||
|
return {
|
||||||
|
dataSource
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
366
packages/react-renderer/demo/schemas/table.js
vendored
Normal file
366
packages/react-renderer/demo/schemas/table.js
vendored
Normal file
@ -0,0 +1,366 @@
|
|||||||
|
export default {
|
||||||
|
componentName: 'Page',
|
||||||
|
fileName: 'filterTable',
|
||||||
|
props: {
|
||||||
|
style: {
|
||||||
|
paddingRight: 20,
|
||||||
|
paddingLeft: 20
|
||||||
|
}
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
componentName: 'Table',
|
||||||
|
props: {
|
||||||
|
hasBorder: false,
|
||||||
|
hasHeader: true,
|
||||||
|
dataSource: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '2017秋冬新款背带裙复古格子连衣裙清新背心裙a字裙短裙子',
|
||||||
|
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||||
|
type: '清单',
|
||||||
|
publishTime: '17-04-28 20:29:20',
|
||||||
|
publishStatus: '已发布',
|
||||||
|
pushStatus: '已推送至订阅号',
|
||||||
|
operation: {
|
||||||
|
edit: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: '2017秋冬新款 高质感特定纱线欧美宽松马海毛羊毛毛衣',
|
||||||
|
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||||
|
type: '清单',
|
||||||
|
publishTime: '17-04-28 20:29:20',
|
||||||
|
publishStatus: '已发布',
|
||||||
|
pushStatus: '已推送至订阅号',
|
||||||
|
operation: {
|
||||||
|
edit: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: '日式天然玉米皮草编碗垫锅垫隔热垫茶垫加厚餐垫GD-29',
|
||||||
|
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||||
|
type: '清单',
|
||||||
|
publishTime: '17-04-28 20:29:20',
|
||||||
|
publishStatus: '已发布',
|
||||||
|
pushStatus: '已推送至订阅号',
|
||||||
|
operation: {
|
||||||
|
edit: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: '2017秋冬新款 绑带腰封设计感超顺滑质感落肩铜氨丝连衣裙',
|
||||||
|
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||||
|
type: '清单',
|
||||||
|
publishTime: '17-04-28 20:29:20',
|
||||||
|
publishStatus: '已发布',
|
||||||
|
pushStatus: '已推送至订阅号',
|
||||||
|
operation: {
|
||||||
|
edit: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: '日式糖果色陶瓷柄不锈钢餐具西餐牛扒刀叉勺子咖啡勺',
|
||||||
|
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||||
|
type: '清单',
|
||||||
|
publishTime: '17-04-28 20:29:20',
|
||||||
|
publishStatus: '已发布',
|
||||||
|
pushStatus: '已推送至订阅号',
|
||||||
|
operation: {
|
||||||
|
edit: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
title: '日式和风深蓝素色文艺餐巾餐垫围裙锅垫隔热手套厨房桌布',
|
||||||
|
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||||
|
type: '清单',
|
||||||
|
publishTime: '17-04-28 20:29:20',
|
||||||
|
publishStatus: '已发布',
|
||||||
|
pushStatus: '已推送至订阅号',
|
||||||
|
operation: {
|
||||||
|
edit: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
title: '日式雪点樱花手绘陶瓷餐具米饭碗拉面碗寿司盘子汤碗',
|
||||||
|
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||||
|
type: '清单',
|
||||||
|
publishTime: '17-04-28 20:29:20',
|
||||||
|
publishStatus: '已发布',
|
||||||
|
pushStatus: '已推送至订阅号',
|
||||||
|
operation: {
|
||||||
|
edit: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
title: '川岛屋 釉下彩复古日式陶瓷盘子菜盘圆盘调味碟 米饭碗日式餐具',
|
||||||
|
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||||
|
type: '清单',
|
||||||
|
publishTime: '17-04-28 20:29:20',
|
||||||
|
publishStatus: '已发布',
|
||||||
|
pushStatus: '已推送至订阅号',
|
||||||
|
operation: {
|
||||||
|
edit: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
componentName: 'TableColumn',
|
||||||
|
props: {
|
||||||
|
dataIndex: 'title',
|
||||||
|
title: '问题描述',
|
||||||
|
resizable: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
componentName: 'TableColumn',
|
||||||
|
props: {
|
||||||
|
title: '问题分类',
|
||||||
|
dataIndex: 'type'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
componentName: 'TableColumn',
|
||||||
|
props: {
|
||||||
|
title: '发布时间',
|
||||||
|
dataIndex: 'publishTime'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
componentName: 'TableColumn',
|
||||||
|
props: {
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'publishStatus',
|
||||||
|
cell: [
|
||||||
|
{
|
||||||
|
componentName: 'Button',
|
||||||
|
props: {
|
||||||
|
type: 'normal',
|
||||||
|
size: 'small',
|
||||||
|
component: 'div',
|
||||||
|
text: true,
|
||||||
|
ghost: false,
|
||||||
|
style: {
|
||||||
|
width: '30px',
|
||||||
|
fontSize: '12px',
|
||||||
|
color: '#666',
|
||||||
|
cursor: 'auto',
|
||||||
|
background: '#f7f8fa'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
children: '已发布',
|
||||||
|
condition: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
componentName: 'Text',
|
||||||
|
props: {
|
||||||
|
text: '已发布',
|
||||||
|
style: {
|
||||||
|
paddingTop: 2,
|
||||||
|
paddingRight: 5,
|
||||||
|
paddingBottom: 2,
|
||||||
|
paddingLeft: 5,
|
||||||
|
fontSize: '12px',
|
||||||
|
color: '#666',
|
||||||
|
borderRadius: 3,
|
||||||
|
cursor: 'auto',
|
||||||
|
background: '#f7f8fa'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
componentName: 'TableColumn',
|
||||||
|
props: {
|
||||||
|
title: '操作',
|
||||||
|
cell: [
|
||||||
|
{
|
||||||
|
componentName: 'Button',
|
||||||
|
props: {
|
||||||
|
type: 'normal',
|
||||||
|
component: 'a',
|
||||||
|
size: 'medium',
|
||||||
|
loading: false,
|
||||||
|
text: true,
|
||||||
|
style: {
|
||||||
|
paddingRight: 10,
|
||||||
|
paddingLeft: 10,
|
||||||
|
color: '#2077ff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
children: '解决'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
componentName: 'Button',
|
||||||
|
props: {
|
||||||
|
type: 'normal',
|
||||||
|
component: 'a',
|
||||||
|
text: true,
|
||||||
|
style: {
|
||||||
|
paddingRight: 10,
|
||||||
|
paddingLeft: 10,
|
||||||
|
color: '#2077ff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
children: '详情'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
componentName: 'Button',
|
||||||
|
props: {
|
||||||
|
type: 'normal',
|
||||||
|
text: true,
|
||||||
|
component: 'a',
|
||||||
|
style: {
|
||||||
|
paddingRight: 10,
|
||||||
|
paddingLeft: 10,
|
||||||
|
color: '#2077ff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
children: '分类'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
loopArgs: ['', '']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
componentName: 'Div',
|
||||||
|
props: {
|
||||||
|
style: {
|
||||||
|
textAlign: 'right'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
componentName: 'Pagination',
|
||||||
|
props: {
|
||||||
|
shape: 'normal',
|
||||||
|
type: 'normal',
|
||||||
|
size: 'medium',
|
||||||
|
style: {
|
||||||
|
marginTop: 20
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dataSource: {
|
||||||
|
dataHandler: function dataHandler(dataMap) {
|
||||||
|
let dataSource = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '2017秋冬新款背带裙复古格子连衣裙清新背心裙a字裙短裙子',
|
||||||
|
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||||
|
type: '清单',
|
||||||
|
publishTime: '17-04-28 20:29:20',
|
||||||
|
publishStatus: '已发布',
|
||||||
|
pushStatus: '已推送至订阅号',
|
||||||
|
operation: {
|
||||||
|
edit: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: '2017秋冬新款 高质感特定纱线欧美宽松马海毛羊毛毛衣',
|
||||||
|
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||||
|
type: '清单',
|
||||||
|
publishTime: '17-04-28 20:29:20',
|
||||||
|
publishStatus: '已发布',
|
||||||
|
pushStatus: '已推送至订阅号',
|
||||||
|
operation: {
|
||||||
|
edit: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: '日式天然玉米皮草编碗垫锅垫隔热垫茶垫加厚餐垫GD-29',
|
||||||
|
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||||
|
type: '清单',
|
||||||
|
publishTime: '17-04-28 20:29:20',
|
||||||
|
publishStatus: '已发布',
|
||||||
|
pushStatus: '已推送至订阅号',
|
||||||
|
operation: {
|
||||||
|
edit: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: '2017秋冬新款 绑带腰封设计感超顺滑质感落肩铜氨丝连衣裙',
|
||||||
|
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||||
|
type: '清单',
|
||||||
|
publishTime: '17-04-28 20:29:20',
|
||||||
|
publishStatus: '已发布',
|
||||||
|
pushStatus: '已推送至订阅号',
|
||||||
|
operation: {
|
||||||
|
edit: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: '日式糖果色陶瓷柄不锈钢餐具西餐牛扒刀叉勺子咖啡勺',
|
||||||
|
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||||
|
type: '清单',
|
||||||
|
publishTime: '17-04-28 20:29:20',
|
||||||
|
publishStatus: '已发布',
|
||||||
|
pushStatus: '已推送至订阅号',
|
||||||
|
operation: {
|
||||||
|
edit: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
title: '日式和风深蓝素色文艺餐巾餐垫围裙锅垫隔热手套厨房桌布',
|
||||||
|
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||||
|
type: '清单',
|
||||||
|
publishTime: '17-04-28 20:29:20',
|
||||||
|
publishStatus: '已发布',
|
||||||
|
pushStatus: '已推送至订阅号',
|
||||||
|
operation: {
|
||||||
|
edit: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
title: '日式雪点樱花手绘陶瓷餐具米饭碗拉面碗寿司盘子汤碗',
|
||||||
|
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||||
|
type: '清单',
|
||||||
|
publishTime: '17-04-28 20:29:20',
|
||||||
|
publishStatus: '已发布',
|
||||||
|
pushStatus: '已推送至订阅号',
|
||||||
|
operation: {
|
||||||
|
edit: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
title: '川岛屋 釉下彩复古日式陶瓷盘子菜盘圆盘调味碟 米饭碗日式餐具',
|
||||||
|
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||||
|
type: '清单',
|
||||||
|
publishTime: '17-04-28 20:29:20',
|
||||||
|
publishStatus: '已发布',
|
||||||
|
pushStatus: '已推送至订阅号',
|
||||||
|
operation: {
|
||||||
|
edit: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
return {
|
||||||
|
...dataMap,
|
||||||
|
dataSource
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
37
packages/react-renderer/demo/table.md
Normal file
37
packages/react-renderer/demo/table.md
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
---
|
||||||
|
title: 表格
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
````jsx
|
||||||
|
import React, { PureComponent } from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import ReactRenderer from '@ali/lowcode-react-renderer';
|
||||||
|
import schema from './schemas/table';
|
||||||
|
import components from './config/components';
|
||||||
|
import utils from './config/utils';
|
||||||
|
import constants from './config/constants';
|
||||||
|
|
||||||
|
class Demo extends PureComponent {
|
||||||
|
static displayName = 'renderer-demo';
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="demo">
|
||||||
|
<ReactRenderer
|
||||||
|
key={schema.fileName}
|
||||||
|
schema={schema}
|
||||||
|
components={components}
|
||||||
|
appHelper={{
|
||||||
|
utils,
|
||||||
|
constants
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDOM.render((
|
||||||
|
<Demo />
|
||||||
|
), mountNode);
|
||||||
|
````
|
||||||
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "@ali/lowcode-react-renderer",
|
"name": "@ali/lowcode-react-renderer",
|
||||||
"version": "0.8.13",
|
"version": "0.8.13",
|
||||||
"description": "react renderer for ali lowcode engine",
|
"description": "React Renderer for Ali Low-Code Engine",
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"module": "es/index.js",
|
"module": "es/index.js",
|
||||||
"files": [
|
"files": [
|
||||||
@ -9,7 +9,10 @@
|
|||||||
"es"
|
"es"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "build-scripts build --skip-demo"
|
"test": "echo \"Error: run tests from root\" && exit 1",
|
||||||
|
"start": "../../node_modules/.bin/build-scripts start",
|
||||||
|
"build": "../../node_modules/.bin/build-scripts build",
|
||||||
|
"prepublishOnly": "npm run build"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
@ -20,39 +23,40 @@
|
|||||||
"engine",
|
"engine",
|
||||||
"react"
|
"react"
|
||||||
],
|
],
|
||||||
"author": "xiayang.xy",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ali/b3-one": "^0.0.17",
|
"@ali/b3-one": "^0.0.17",
|
||||||
"@ali/bzb-request": "^2.6.0-beta.13",
|
"@ali/bzb-request": "^2.6.0-beta.13",
|
||||||
"@ali/iceluna-comp-div": "^1.0.0",
|
"@ali/iceluna-comp-div": "^1.0.0",
|
||||||
"@ali/iceluna-rax": "0.0.5",
|
|
||||||
"@ali/lib-mtop": "^2.5.1",
|
"@ali/lib-mtop": "^2.5.1",
|
||||||
"@alifd/next": "^1.18.17",
|
"@alifd/next": "^1.18.17",
|
||||||
"debug": "^4.1.1",
|
"debug": "^4.1.1",
|
||||||
"driver-universal": "^3.1.2",
|
|
||||||
"events": "^3.0.0",
|
"events": "^3.0.0",
|
||||||
"fetch-jsonp": "^1.1.3",
|
"fetch-jsonp": "^1.1.3",
|
||||||
"intl-messageformat": "^8.3.1",
|
"intl-messageformat": "^8.3.1",
|
||||||
"jsonuri": "^2.1.2",
|
"jsonuri": "^2.1.2",
|
||||||
"keymaster": "^1.6.2",
|
"keymaster": "^1.6.2",
|
||||||
"localforage": "^1.7.3",
|
|
||||||
"lodash": "^4.17.11",
|
"lodash": "^4.17.11",
|
||||||
"moment": "^2.24.0",
|
"moment": "^2.24.0",
|
||||||
"rax": "^1.1.1",
|
|
||||||
"rax-find-dom-node": "^1.0.1",
|
|
||||||
"react-is": "^16.10.1",
|
"react-is": "^16.10.1",
|
||||||
"serialize-javascript": "^1.7.0",
|
"serialize-javascript": "^1.7.0",
|
||||||
"socket.io-client": "^2.2.0",
|
"socket.io-client": "^2.2.0",
|
||||||
"whatwg-fetch": "^3.0.0"
|
"whatwg-fetch": "^3.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@ali/iceluna-components-a": "^0.1.0",
|
||||||
|
"@ali/iceluna-components-div": "^0.1.0",
|
||||||
|
"@ali/iceluna-components-image": "^0.1.0",
|
||||||
|
"@ali/iceluna-components-text": "^0.1.0",
|
||||||
"@alib/build-scripts": "^0.1.18",
|
"@alib/build-scripts": "^0.1.18",
|
||||||
"build-plugin-component": "^0.2.10",
|
"build-plugin-component": "^0.2.10",
|
||||||
"build-plugin-fusion": "^0.1.0",
|
"build-plugin-fusion": "^0.1.0",
|
||||||
"build-plugin-moment-locales": "^0.1.0"
|
"build-plugin-moment-locales": "^0.1.0",
|
||||||
|
"moment": "^2.24.0",
|
||||||
|
"react": "^16.4.1",
|
||||||
|
"react-dom": "^16.4.1"
|
||||||
},
|
},
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"registry": "http://registry.npm.alibaba-inc.com"
|
"registry": "http://registry.npm.alibaba-inc.com"
|
||||||
}
|
},
|
||||||
|
"homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-react-renderer@0.8.13/build/index.html"
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user