@riil-frontend/component-page-creater
Version:
page creater components,include components list,component attribute panel and page canvas
299 lines (268 loc) • 8.1 kB
JavaScript
import _Tab from "@alifd/next/es/tab";
import _extends from "@babel/runtime/helpers/extends";
import React, { forwardRef, useRef, useImperativeHandle, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import { usePrevious } from 'ahooks';
import './AttributesPanel.scss';
import PageContent from './AttrContents/PageContent';
import TemplateContent from './AttrContents/TemplateContent';
import ComponentContent from './AttrContents/ComponentContent';
import { CONTAINER_COM_TYPE, LAYOUT_TYPE } from '../constant'; //formily表单初始化
// setup();
var AttributesPanel = /*#__PURE__*/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 = useRef();
var pageRef = useRef();
var componentRef = useRef();
useImperativeHandle(ref, function () {
return {
templateRef: templateRef,
componentRef: componentRef,
pageRef: pageRef
};
});
var _useState = useState('page'),
activeTab = _useState[0],
setActiveTab = _useState[1];
var _useState2 = useState({
selectItem: undefined,
isInTemplate: false
}),
selectItem = _useState2[0],
setSelectItem = _useState2[1];
var _useState3 = useState(attrConfig),
tabData = _useState3[0],
setTabData = _useState3[1]; //当前选中组件上一次状态，用来实现自动切换页签时的判断
var preSelectItem = usePrevious(selectItem);
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 === 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]);
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 = _.cloneDeep(pageConfig.widgets); //若是容器内组件，则更新容器内attributes组件配置
if (isIn) {
widgets = widgets.map(function (item) {
if (item.id === widget.id) {
item = _extends({}, item, {
attributes: widget.attributes
});
return item;
} else if (item.type === CONTAINER_COM_TYPE) {
var cols = item.attributes.cols.map(function (ele) {
var widSub = ele.widgets.map(function (fd) {
if (fd.id === widget.id) {
fd = _extends({}, fd, {
attributes: widget.attributes
});
}
return fd;
});
return _extends({}, ele, {
widgets: widSub
});
});
return _extends({}, item, {
attributes: _extends({}, item.attributes, {
cols: cols
})
});
}
});
} else {
widgets = widgets.map(function (item) {
if (item.id === selectId) {
item = _extends({}, item, {
attributes: widget.attributes
});
}
return item;
});
}
onChange(_extends({}, pageConfig, {
widgets: widgets
}));
};
return /*#__PURE__*/React.createElement("div", {
className: "uicbb-attr-panel"
}, /*#__PURE__*/React.createElement(_Tab, _extends({
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.createElement(ComponentContent, {
ref: componentRef,
selectItem: selectItem.selectItem,
pageProps: pageProps,
request: request,
onAttrChange: onAttrChange,
isInTemplate: selectItem.isInTemplate,
customGetComRequire: customGetComRequire
});
} else if (item.key === 'template') {
content = /*#__PURE__*/React.createElement(TemplateContent, {
layoutList: layoutList,
imgPath: imgPath,
ref: templateRef,
templateData: templateData,
onTemplateChange: onTemplateChange
});
} else if (item.key === 'page') {
content = /*#__PURE__*/React.createElement(PageContent, {
ref: pageRef,
pageConfig: pageConfig,
templateData: templateData,
onTemplateChange: onTemplateChange
});
} else {
content = item.render(selectItem, pageConfig, templateData);
}
return /*#__PURE__*/React.createElement(_Tab.Item, {
key: item.key,
title: item.name
}, /*#__PURE__*/React.createElement("div", {
style: {
height: '100%',
overflow: 'auto'
}
}, content));
})));
});
AttributesPanel.propTypes = {
/**
* 模板数据
*/
templateData: PropTypes.object,
/**
* 画布的配置数据
*/
pageConfig: PropTypes.object,
/**
* 当前选中组件id
*/
selectId: PropTypes.string,
/**
* (pageConfig)=>{}属性面板发生改变时的回调
*/
onChange: PropTypes.func,
/**
* 页面公共属性
*/
pageProps: PropTypes.any,
/**
* 数据请求体
*/
request: PropTypes.any,
/**
* 属性面板配置数据
*/
attrConfig: PropTypes.array,
/**
* 模板属性发生变化时回调
*/
onTemplateChange: PropTypes.func,
/**
* 图标组件中的图片路径
*/
imgPath: PropTypes.string,
/**
* 模板属性中，布局类型列表
*/
layoutList: PropTypes.array,
/**
* 透传tab组件属性
*/
tabProps: PropTypes.object,
/**
* 自定义组件引用方法
*/
customGetComRequire: PropTypes.func
};
AttributesPanel.defaultProps = {
noDataImgSrc: '/noDataImg/tableNotData.svg',
imgPath: '/img/uicbb/layout/',
layoutList: [{
key: LAYOUT_TYPE.horizontal,
label: '左侧页签',
img: 'hlayout.png'
}, {
key: LAYOUT_TYPE.vertical,
label: '上页签',
img: 'vlayout.png'
}, {
key: LAYOUT_TYPE.single,
label: '无页签',
img: 'slayout.png'
}],
attrConfig: [{
name: '模板设置',
key: 'template'
}, {
name: '页面设置',
key: 'page'
}, {
name: '组件设置',
key: 'component'
}]
};
export default AttributesPanel;