@riil-frontend/component-page-config
Version:
page config components,include components list,component attribute panel and page canvas
318 lines (291 loc) • 8.8 kB
JavaScript
import _Card from "@alifd/next/es/card";
import _Input from "@alifd/next/es/input";
import _Dialog from "@alifd/next/es/dialog";
import _Button from "@alifd/next/es/button";
import _Switch from "@alifd/next/es/switch";
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Collapse from "@alifd/next/es/collapse";
import React, { Component } from 'react';
import _ from 'lodash';
import copy from 'copy-to-clipboard';
import DragLayoutCanvas from '../drag-panel';
import ComList from '../com-list';
import AttrPanel from '../attr-panel';
import PropTypes from 'prop-types';
import JSONPretty from 'react-json-pretty';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import './index.scss';
import { dispatchResizeEvent } from '../util';
var Panel = _Collapse.Panel;
/**
* 页面组装器
*/
var PageCreater = /*#__PURE__*/function (_Component) {
_inheritsLoose(PageCreater, _Component);
function PageCreater(props) {
var _this;
_this = _Component.call(this, props) || this;
_this.onChange = function (pageConfig) {
if (_this.props.onChange) {
_this.props.onChange(pageConfig);
}
if (!('pageConfig' in _this.props)) {
_this.setState({
pageConfig: pageConfig
});
}
};
_this.onItemDragStart = function (config, e) {
var isDroppable = true;
if (config.isOnlyOne && _this.state.pageConfig.widgets.find(function (item) {
return item.type === config.type;
})) {
isDroppable = false;
}
_this.setState({
droppingItem: {
i: config.layouts.i,
w: config.layouts.w,
h: config.layouts.h
},
isDroppable: isDroppable
});
return isDroppable;
};
_this.state = {
pageConfig: props.pageConfig || DragLayoutCanvas.defaultProps.pageConfig,
droppingItem: {
i: 'drop',
w: 6,
h: 10
},
isEdit: true,
selected: undefined,
isDroppable: true,
scale: 1
};
return _this;
}
PageCreater.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
if ('pageConfig' in nextProps && !_.isEqual(nextProps.pageConfig, prevState.pageConfig)) {
return {
pageConfig: nextProps.pageConfig
};
}
return null;
}
/**
* 从列表添加组件、删除组件、修改属性面板、拖拽组件位置、修改组件大小
* 以上操作会进入此方法
* @param {array} pageConfig
*/
;
var _proto = PageCreater.prototype;
/**
* 从列表点击一个组件到画布，生成组件
* （暂不启用）
* @param {*} config
*/
_proto.addCom = function addCom(config) {
var item = _.cloneDeep(config);
item.layouts.i = item.id = new Date().getTime().toString();
var widgets = this.state.pageConfig.widgets.concat(_extends({}, item));
this.onChange(_extends({}, pageConfig, {
widgets: widgets
}));
}
/**
* 组件列表拖拽开始事件
* 1 判断组件是否唯一，是否添加到画布上
* 2 设置画布的droppingItem
* @param {*} config
* @param {*} e
*/
;
/**
* 属性面板发生设置时，调用此方法，修改config
* @param {*} config
*/
_proto.onAttrPanelChange = function onAttrPanelChange(pageConfig) {
this.onChange(pageConfig);
};
_proto.render = function render() {
var _this2 = this;
var _this$props = this.props,
comList = _this$props.comList,
ExpCom = _this$props.ExpCom,
pageProps = _this$props.pageProps,
request = _this$props.request,
jumpto = _this$props.jumpto;
var _this$state = this.state,
pageConfig = _this$state.pageConfig,
droppingItem = _this$state.droppingItem,
isEdit = _this$state.isEdit,
selected = _this$state.selected,
isDroppable = _this$state.isDroppable;
var marg = (1 / this.state.scale - 1) * 100;
return /*#__PURE__*/React.createElement("div", {
className: "drag-panel"
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u7F16\u8F91\u6A21\u5F0F\uFF1A"), /*#__PURE__*/React.createElement(_Switch, {
size: "small",
defaultChecked: true,
onChange: function onChange(b) {
_this2.setState({
isEdit: b
});
}
}), /*#__PURE__*/React.createElement(_Button, {
onClick: function onClick() {
_this2.onChange(_extends({}, pageConfig, {
widgets: []
}));
}
}, "\u6E05\u7A7A\u753B\u5E03"), /*#__PURE__*/React.createElement(_Button, {
onClick: function onClick() {
_Dialog.alert({
height: '500px',
footer: /*#__PURE__*/React.createElement(_Button, {
onClick: function onClick() {
copy(JSON.stringify(pageConfig));
}
}, "Copy"),
title: '页面配置数据',
content: /*#__PURE__*/React.createElement(JSONPretty, {
id: "json-pretty",
data: pageConfig
})
});
}
}, "\u663E\u793A\u914D\u7F6E\u6570\u636E"), /*#__PURE__*/React.createElement(_Input, {
value: this.state.scale,
onChange: function onChange(value) {
_this2.setState({
scale: value
}, function () {
dispatchResizeEvent();
});
}
})), /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex'
}
}, /*#__PURE__*/React.createElement("div", {
style: {
height: 'auto',
border: '1px solid #a3b1bf'
}
}, /*#__PURE__*/React.createElement(_Card, {
title: "\u7EC4\u4EF6\u5217\u8868",
key: "1",
contentHeight: "auto",
style: {
width: 170,
minWidth: 170
}
}, /*#__PURE__*/React.createElement(ComList, {
ExpCom: ExpCom,
onItemClick: function onItemClick(config) {
_this2.addCom(config);
},
comList: comList,
style: {
height: '100%'
},
onItemDragStart: this.onItemDragStart
}))), /*#__PURE__*/React.createElement("div", {
className: "creater-canvas",
onClick: function onClick() {
_this2.setState({
selected: undefined
});
}
}, /*#__PURE__*/React.createElement("div", {
style: {
background: 'white',
transform: "scale(" + this.state.scale + ")",
transformOrigin: '0 0',
marginRight: "-" + marg + "%",
marginBottom: "-" + marg + "%"
}
}, /*#__PURE__*/React.createElement(DragLayoutCanvas, {
layoutProps: {
droppingItem: droppingItem,
isDroppable: isDroppable && isEdit,
transformScale: this.state.scale
},
pageConfig: pageConfig,
selectedId: selected,
onSelect: function onSelect(id) {
_this2.setState({
selected: id
});
},
isEdit: isEdit,
onChange: function onChange(widgets) {
_this2.onChange(_extends({}, pageConfig, {
widgets: widgets
}));
},
ExpCom: ExpCom,
pageProps: pageProps,
request: request,
jumpto: jumpto
}))), /*#__PURE__*/React.createElement(_Card, {
title: "\u5C5E\u6027\u9762\u677F",
key: "2",
contentHeight: "auto",
style: {
width: 170,
minWidth: 170
}
}, /*#__PURE__*/React.createElement(AttrPanel, {
pageConfig: pageConfig,
ExpCom: ExpCom,
selectId: selected,
onChange: this.onAttrPanelChange.bind(this)
}))));
};
return PageCreater;
}(Component);
PageCreater.propTypes = {
/**
* 在开发npm包组件时需用到此属性。面板使用者无需使用此属性
*/
ExpCom: PropTypes.any,
/**
* 组件列表数据exp:[{ type: 'component-exp-alarm-list', importFrom: 'npm' }],
* */
comList: PropTypes.array,
/**
* 透传给DragLayoutCanvas的公共属性
*/
pageProps: PropTypes.any,
/**
*应用框架级数据请求方法，用来实现数据请求，参考 {request} from 'ice'
*/
request: PropTypes.any,
/**
* 页面配置数据
*/
pageConfig: PropTypes.object,
/**
* ResponsiveReactGridLayout组件属性
*/
layoutProps: PropTypes.object,
/**
* (path)=>{}页面跳转操作
*/
jumpto: PropTypes.func,
/**
* 从列表添加组件、删除组件、修改属性面板、拖拽组件位置、修改组件大小触发回调
* (pageConfig)=>{}
*/
onChange: PropTypes.func
};
PageCreater.defaultProps = {
comList: [],
layoutProps: {}
};
export default PageCreater;