mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-18 21:38:14 +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",
|
||||
"version": "0.8.13",
|
||||
"description": "react renderer for ali lowcode engine",
|
||||
"description": "React Renderer for Ali Low-Code Engine",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
"files": [
|
||||
@ -9,7 +9,10 @@
|
||||
"es"
|
||||
],
|
||||
"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": {
|
||||
"type": "git",
|
||||
@ -20,39 +23,40 @@
|
||||
"engine",
|
||||
"react"
|
||||
],
|
||||
"author": "xiayang.xy",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@ali/b3-one": "^0.0.17",
|
||||
"@ali/bzb-request": "^2.6.0-beta.13",
|
||||
"@ali/iceluna-comp-div": "^1.0.0",
|
||||
"@ali/iceluna-rax": "0.0.5",
|
||||
"@ali/lib-mtop": "^2.5.1",
|
||||
"@alifd/next": "^1.18.17",
|
||||
"debug": "^4.1.1",
|
||||
"driver-universal": "^3.1.2",
|
||||
"events": "^3.0.0",
|
||||
"fetch-jsonp": "^1.1.3",
|
||||
"intl-messageformat": "^8.3.1",
|
||||
"jsonuri": "^2.1.2",
|
||||
"keymaster": "^1.6.2",
|
||||
"localforage": "^1.7.3",
|
||||
"lodash": "^4.17.11",
|
||||
"moment": "^2.24.0",
|
||||
"rax": "^1.1.1",
|
||||
"rax-find-dom-node": "^1.0.1",
|
||||
"react-is": "^16.10.1",
|
||||
"serialize-javascript": "^1.7.0",
|
||||
"socket.io-client": "^2.2.0",
|
||||
"whatwg-fetch": "^3.0.0"
|
||||
},
|
||||
"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",
|
||||
"build-plugin-component": "^0.2.10",
|
||||
"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": {
|
||||
"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