@riil-frontend/component-page-creater
Version:
page creater components,include components list,component attribute panel and page canvas
348 lines (297 loc) • 10.2 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _card = _interopRequireDefault(require("@alifd/next/lib/card"));
var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
var _dialog = _interopRequireDefault(require("@alifd/next/lib/dialog"));
var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
var _switch = _interopRequireDefault(require("@alifd/next/lib/switch"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
var _react = _interopRequireWildcard(require("react"));
var _lodash = _interopRequireDefault(require("lodash"));
var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
var _dragPanel = _interopRequireDefault(require("../drag-panel"));
var _comList = _interopRequireDefault(require("../com-list"));
var _attrPanel = _interopRequireDefault(require("../attr-panel"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactJsonPretty = _interopRequireDefault(require("react-json-pretty"));
require("react-grid-layout/css/styles.css");
require("react-resizable/css/styles.css");
require("./index.scss");
var _util = require("../util");
var Panel = _collapse["default"].Panel;
/**
* 页面组装器
*/
var PageCreater = /*#__PURE__*/function (_Component) {
(0, _inheritsLoose2["default"])(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 || _dragPanel["default"].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 && !_lodash["default"].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 = _lodash["default"].cloneDeep(config);
item.layouts.i = item.id = new Date().getTime().toString();
var widgets = this.state.pageConfig.widgets.concat((0, _extends2["default"])({}, item));
this.onChange((0, _extends2["default"])({}, 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["default"].createElement("div", {
className: "drag-panel"
}, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", null, "\u7F16\u8F91\u6A21\u5F0F\uFF1A"), /*#__PURE__*/_react["default"].createElement(_switch["default"], {
size: "small",
defaultChecked: true,
onChange: function onChange(b) {
_this2.setState({
isEdit: b
});
}
}), /*#__PURE__*/_react["default"].createElement(_button["default"], {
onClick: function onClick() {
_this2.onChange((0, _extends2["default"])({}, pageConfig, {
widgets: []
}));
}
}, "\u6E05\u7A7A\u753B\u5E03"), /*#__PURE__*/_react["default"].createElement(_button["default"], {
onClick: function onClick() {
_dialog["default"].alert({
height: '500px',
footer: /*#__PURE__*/_react["default"].createElement(_button["default"], {
onClick: function onClick() {
(0, _copyToClipboard["default"])(JSON.stringify(pageConfig));
}
}, "Copy"),
title: '页面配置数据',
content: /*#__PURE__*/_react["default"].createElement(_reactJsonPretty["default"], {
id: "json-pretty",
data: pageConfig
})
});
}
}, "\u663E\u793A\u914D\u7F6E\u6570\u636E"), /*#__PURE__*/_react["default"].createElement(_input["default"], {
value: this.state.scale,
onChange: function onChange(value) {
_this2.setState({
scale: value
}, function () {
(0, _util.dispatchResizeEvent)();
});
}
})), /*#__PURE__*/_react["default"].createElement("div", {
style: {
display: 'flex'
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
height: 'auto',
border: '1px solid #a3b1bf'
}
}, /*#__PURE__*/_react["default"].createElement(_card["default"], {
title: "\u7EC4\u4EF6\u5217\u8868",
key: "1",
contentHeight: "auto",
style: {
width: 170,
minWidth: 170
}
}, /*#__PURE__*/_react["default"].createElement(_comList["default"], {
ExpCom: ExpCom,
onItemClick: function onItemClick(config) {
_this2.addCom(config);
},
comList: comList,
style: {
height: '100%'
},
onItemDragStart: this.onItemDragStart
}))), /*#__PURE__*/_react["default"].createElement("div", {
className: "creater-canvas",
onClick: function onClick() {
_this2.setState({
selected: undefined
});
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
background: 'white',
transform: "scale(" + this.state.scale + ")",
transformOrigin: '0 0',
marginRight: "-" + marg + "%",
marginBottom: "-" + marg + "%"
}
}, /*#__PURE__*/_react["default"].createElement(_dragPanel["default"], {
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((0, _extends2["default"])({}, pageConfig, {
widgets: widgets
}));
},
ExpCom: ExpCom,
pageProps: pageProps,
request: request,
jumpto: jumpto
}))), /*#__PURE__*/_react["default"].createElement(_card["default"], {
title: "\u5C5E\u6027\u9762\u677F",
key: "2",
contentHeight: "auto",
style: {
width: 170,
minWidth: 170
}
}, /*#__PURE__*/_react["default"].createElement(_attrPanel["default"], {
pageConfig: pageConfig,
ExpCom: ExpCom,
selectId: selected,
onChange: this.onAttrPanelChange.bind(this)
}))));
};
return PageCreater;
}(_react.Component);
PageCreater.propTypes = {
/**
* 在开发npm包组件时需用到此属性。面板使用者无需使用此属性
*/
ExpCom: _propTypes["default"].any,
/**
* 组件列表数据exp:[{ type: 'component-exp-alarm-list', importFrom: 'npm' }],
* */
comList: _propTypes["default"].array,
/**
* 透传给DragLayoutCanvas的公共属性
*/
pageProps: _propTypes["default"].any,
/**
*应用框架级数据请求方法，用来实现数据请求，参考 {request} from 'ice'
*/
request: _propTypes["default"].any,
/**
* 页面配置数据
*/
pageConfig: _propTypes["default"].object,
/**
* ResponsiveReactGridLayout组件属性
*/
layoutProps: _propTypes["default"].object,
/**
* (path)=>{}页面跳转操作
*/
jumpto: _propTypes["default"].func,
/**
* 从列表添加组件、删除组件、修改属性面板、拖拽组件位置、修改组件大小触发回调
* (pageConfig)=>{}
*/
onChange: _propTypes["default"].func
};
PageCreater.defaultProps = {
comList: [],
layoutProps: {}
};
var _default = PageCreater;
exports["default"] = _default;