@wufengteam/wform
Version:
@wufengteam/wform
91 lines • 5.38 kB
JavaScript
import React, { Children, useMemo } from 'react';
import { prefix } from '../../utils';
import "./index.css";
import { Row, Col } from 'antd';
var cssPrefix = "".concat(prefix, "-view-ed-pc");
// function calculatePlaceholders(items, columns) {
// const totalItems = items + Math.ceil(items / columns);
// const totalSlots = Math.ceil(totalItems / columns) * columns;
// const placeholders = totalSlots - items;
// return placeholders;
// }
var WFViewEdPc = function WFViewEdPc(props) {
var _a;
// console.log('WFViewEdPc', props);
var ContainerDropBox = props.ContainerDropBox,
children = props.children,
style = props.style,
_component = props._component,
_props$canDrag = props.canDrag,
propsCanDrag = _props$canDrag === void 0 ? true : _props$canDrag;
var _ref = ((_a = props === null || props === void 0 ? void 0 : props._component) === null || _a === void 0 ? void 0 : _a.props) || {},
_ref$rowSpace = _ref.rowSpace,
rowSpace = _ref$rowSpace === void 0 ? '16px' : _ref$rowSpace,
colon = _ref.colon,
colSpan = _ref.colSpan,
_ref$wrapperCol = _ref.wrapperCol,
wrapperCol = _ref$wrapperCol === void 0 ? 16 : _ref$wrapperCol,
_ref$labelCol = _ref.labelCol,
labelCol = _ref$labelCol === void 0 ? 8 : _ref$labelCol,
labelAlign = _ref.labelAlign,
_ref$colSpace = _ref.colSpace,
colSpace = _ref$colSpace === void 0 ? '16px' : _ref$colSpace;
var renderChildren = function renderChildren(_children) {
var comps = Children.toArray(_children);
// console.log('每行列表', comps.length, 24 / colSpan);
if (Array.isArray(comps) && comps.length > 0) {
// const num = calculatePlaceholders(comps.length,24 / colSpan);
// console.log('添加占位容器的个数',num);
return comps.map(function (item) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
var label = ((_b = (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a._component) === null || _b === void 0 ? void 0 : _b.compName) === 'WFView' ? '' : (_e = (_d = (_c = item === null || item === void 0 ? void 0 : item.props) === null || _c === void 0 ? void 0 : _c._component) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.name;
var selfSpan = ((_h = (_g = (_f = item === null || item === void 0 ? void 0 : item.props) === null || _f === void 0 ? void 0 : _f._component) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.selfSpan) || colSpan || '24';
var compName = (_k = (_j = item === null || item === void 0 ? void 0 : item.props) === null || _j === void 0 ? void 0 : _j._component) === null || _k === void 0 ? void 0 : _k.compName;
var wrapperColVal = label && compName !== 'Text' && compName !== 'BOFramer' ? wrapperCol : 24;
var required = (_o = (_m = (_l = item === null || item === void 0 ? void 0 : item.props) === null || _l === void 0 ? void 0 : _l._component) === null || _m === void 0 ? void 0 : _m.props) === null || _o === void 0 ? void 0 : _o.required;
return /*#__PURE__*/React.createElement(Col, {
span: selfSpan
}, /*#__PURE__*/React.createElement("div", {
key: item.key,
className: 'pcfactory-form-item',
style: {
marginBottom: "".concat(props.rowSpace)
}
}, /*#__PURE__*/React.createElement("div", {
className: 'pcfactory-row pcfactory-form-item-row'
}, label && !['Text', 'BOFramer', 'Divider'].includes(compName) && ( /*#__PURE__*/React.createElement("div", {
className: "pcfactory-col pcfactory-form-item-label pcfactory-form-item-label-".concat(labelAlign, " ").concat(props.layout === 'vertical' ? 'pcfactory-col-none' : "pcfactory-col-".concat(labelCol))
}, /*#__PURE__*/React.createElement("label", {
className: "".concat(colon ? '' : 'pcfactory-form-item-no-colon', " ").concat(required ? 'pcfactory-form-item-required' : '')
}, /*#__PURE__*/React.createElement("span", null, label)))), /*#__PURE__*/React.createElement("div", {
className: "pcfactory-col pcfactory-form-item-control ".concat(props.layout === 'vertical' ? 'pcfactory-col-none' : "pcfactory-col-".concat(wrapperColVal))
}, /*#__PURE__*/React.createElement("div", {
className: 'pcfactory-form-item-control-input'
}, /*#__PURE__*/React.createElement("div", {
className: 'pcfactory-form-item-control-input-content'
}, item))))));
});
}
return /*#__PURE__*/React.createElement("div", {
style: {
width: '100%',
padding: '0 8px'
}
}, /*#__PURE__*/React.createElement("div", {
className: 'ued-empty-box ued-blank-box'
}, "\u62D6\u62FD\u7EC4\u4EF6\u5230\u8FD9\u91CC"));
};
var components = useMemo(function () {
return /*#__PURE__*/React.createElement(Row, {
className: "".concat(cssPrefix, "-box"),
gutter: [parseInt(colSpace), parseInt(rowSpace)],
align: 'middle'
}, renderChildren(children));
}, [children, colSpace, rowSpace, wrapperCol, labelCol, colon]);
return /*#__PURE__*/React.createElement(ContainerDropBox, {
style: Object.assign({}, style),
_component: _component,
canDrag: propsCanDrag
}, components);
};
export default WFViewEdPc;