@riil-frontend/component-page-creater
Version:
page creater components,include components list,component attribute panel and page canvas
320 lines (275 loc) • 9.15 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 _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _lodash = _interopRequireDefault(require("lodash"));
var _ahooks = require("ahooks");
require("./AttributesPanel.scss");
var _PageContent = _interopRequireDefault(require("./AttrContents/PageContent"));
var _TemplateContent = _interopRequireDefault(require("./AttrContents/TemplateContent"));
var _ComponentContent = _interopRequireDefault(require("./AttrContents/ComponentContent"));
var _constant = require("../constant");
//formily表单初始化
// setup();
var AttributesPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var pageConfig = props.pageConfig,
selectId = props.selectId,
pageProps = props.pageProps,
request = props.request,
onChange = props.onChange,
attrConfig = props.attrConfig,
templateData = props.templateData,
onTemplateChange = props.onTemplateChange,
imgPath = props.imgPath,
layoutList = props.layoutList,
tabProps = props.tabProps,
customGetComRequire = props.customGetComRequire;
var templateRef = (0, _react.useRef)();
var pageRef = (0, _react.useRef)();
var componentRef = (0, _react.useRef)();
(0, _react.useImperativeHandle)(ref, function () {
return {
templateRef: templateRef,
componentRef: componentRef,
pageRef: pageRef
};
});
var _useState = (0, _react.useState)('page'),
activeTab = _useState[0],
setActiveTab = _useState[1];
var _useState2 = (0, _react.useState)({
selectItem: undefined,
isInTemplate: false
}),
selectItem = _useState2[0],
setSelectItem = _useState2[1];
var _useState3 = (0, _react.useState)(attrConfig),
tabData = _useState3[0],
setTabData = _useState3[1]; //当前选中组件上一次状态，用来实现自动切换页签时的判断
var preSelectItem = (0, _ahooks.usePrevious)(selectItem);
(0, _react.useEffect)(function () {
var _selectItem = undefined; //标记是否是容器内组件
var isInTemplate = false;
if (selectId) {
pageConfig.widgets.forEach(function (item) {
if (item.id === selectId) {
_selectItem = item;
} else {
if (item.type === _constant.CONTAINER_COM_TYPE) {
item.attributes.cols.forEach(function (ele) {
ele.widgets.forEach(function (fd) {
if (fd.id === selectId) {
isInTemplate = true;
_selectItem = fd;
}
});
});
}
}
});
}
setSelectItem({
selectItem: _selectItem,
isInTemplate: isInTemplate
});
}, [selectId]);
(0, _react.useEffect)(function () {
var _tabData = attrConfig.filter(function (item) {
return !(!selectItem.selectItem && item.key === 'component');
});
setTabData(_tabData); //若当前选中组件不存在，则自动跳转到页面设置
//若当前选中组件存在，且和上一次选中状态比较，为不同组件，则自动跳转到组件页签
if (!selectItem.selectItem) {
setActiveTab('page');
} else {
if (!preSelectItem.selectItem || selectItem.selectItem.id !== preSelectItem.selectItem.id) {
setActiveTab('component');
}
}
}, [selectItem]);
/**
* 属性面板变更回调
* fix bug info 仅对组件配置数据中的attributes属性进行赋值操作，
* 避免属性面板显示时，改变组件布局，再修改属性值，引起布局数据被覆盖的问题
* @param {array} widget
* @param {boolean} isIn 判断是否是容器内组件
*/
var onAttrChange = function onAttrChange(widget, isIn) {
var widgets = _lodash["default"].cloneDeep(pageConfig.widgets); //若是容器内组件，则更新容器内attributes组件配置
if (isIn) {
widgets = widgets.map(function (item) {
if (item.id === widget.id) {
item = (0, _extends2["default"])({}, item, {
attributes: widget.attributes
});
return item;
} else if (item.type === _constant.CONTAINER_COM_TYPE) {
var cols = item.attributes.cols.map(function (ele) {
var widSub = ele.widgets.map(function (fd) {
if (fd.id === widget.id) {
fd = (0, _extends2["default"])({}, fd, {
attributes: widget.attributes
});
}
return fd;
});
return (0, _extends2["default"])({}, ele, {
widgets: widSub
});
});
return (0, _extends2["default"])({}, item, {
attributes: (0, _extends2["default"])({}, item.attributes, {
cols: cols
})
});
}
});
} else {
widgets = widgets.map(function (item) {
if (item.id === selectId) {
item = (0, _extends2["default"])({}, item, {
attributes: widget.attributes
});
}
return item;
});
}
onChange((0, _extends2["default"])({}, pageConfig, {
widgets: widgets
}));
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: "uicbb-attr-panel"
}, /*#__PURE__*/_react["default"].createElement(_tab["default"], (0, _extends2["default"])({
shape: "pure",
className: "uicbb-attr-panel-pure"
}, tabProps, {
activeKey: activeTab,
onChange: function onChange(key) {
setActiveTab(key);
}
}), tabData.map(function (item) {
var content = null;
if (item.key === 'component') {
content = /*#__PURE__*/_react["default"].createElement(_ComponentContent["default"], {
ref: componentRef,
selectItem: selectItem.selectItem,
pageProps: pageProps,
request: request,
onAttrChange: onAttrChange,
isInTemplate: selectItem.isInTemplate,
customGetComRequire: customGetComRequire
});
} else if (item.key === 'template') {
content = /*#__PURE__*/_react["default"].createElement(_TemplateContent["default"], {
layoutList: layoutList,
imgPath: imgPath,
ref: templateRef,
templateData: templateData,
onTemplateChange: onTemplateChange
});
} else if (item.key === 'page') {
content = /*#__PURE__*/_react["default"].createElement(_PageContent["default"], {
ref: pageRef,
pageConfig: pageConfig,
templateData: templateData,
onTemplateChange: onTemplateChange
});
} else {
content = item.render(selectItem, pageConfig, templateData);
}
return /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
key: item.key,
title: item.name
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
height: '100%',
overflow: 'auto'
}
}, content));
})));
});
AttributesPanel.propTypes = {
/**
* 模板数据
*/
templateData: _propTypes["default"].object,
/**
* 画布的配置数据
*/
pageConfig: _propTypes["default"].object,
/**
* 当前选中组件id
*/
selectId: _propTypes["default"].string,
/**
* (pageConfig)=>{}属性面板发生改变时的回调
*/
onChange: _propTypes["default"].func,
/**
* 页面公共属性
*/
pageProps: _propTypes["default"].any,
/**
* 数据请求体
*/
request: _propTypes["default"].any,
/**
* 属性面板配置数据
*/
attrConfig: _propTypes["default"].array,
/**
* 模板属性发生变化时回调
*/
onTemplateChange: _propTypes["default"].func,
/**
* 图标组件中的图片路径
*/
imgPath: _propTypes["default"].string,
/**
* 模板属性中，布局类型列表
*/
layoutList: _propTypes["default"].array,
/**
* 透传tab组件属性
*/
tabProps: _propTypes["default"].object,
/**
* 自定义组件引用方法
*/
customGetComRequire: _propTypes["default"].func
};
AttributesPanel.defaultProps = {
noDataImgSrc: '/noDataImg/tableNotData.svg',
imgPath: '/img/uicbb/layout/',
layoutList: [{
key: _constant.LAYOUT_TYPE.horizontal,
label: '左侧页签',
img: 'hlayout.png'
}, {
key: _constant.LAYOUT_TYPE.vertical,
label: '上页签',
img: 'vlayout.png'
}, {
key: _constant.LAYOUT_TYPE.single,
label: '无页签',
img: 'slayout.png'
}],
attrConfig: [{
name: '模板设置',
key: 'template'
}, {
name: '页面设置',
key: 'page'
}, {
name: '组件设置',
key: 'component'
}]
};
var _default = AttributesPanel;
exports["default"] = _default;