@cainiaofe/cn-ui-layout
Version:
- 安装 cone-cli ｜ [Cone-CLI 使用指引](https://alidocs.dingtalk.com/i/nodes/xdqZp24KneBJzvGM6XezJvyb7RA0Nr1E) - `tnpm i -g @alife/cone-cli@latest` - 安装依赖包 - `cone install` - 启动研发 - `cone start`
122 lines (121 loc) • 4.79 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["children", "handleProps", "_context", "buttons", "_nodeId", "hidden", "title", "foldable", "_unsafe_MixedSetter_buttons_select", "className", "extraDom"];
var _window;
import { Fragment } from "react";
import React, { useEffect, useState } from 'react';
import { CnLayoutBlock as UICnLayoutBlock } from "../../components/cn-layout";
import { executeFunction, getLowCodeCoreUtil, isArrayNotEmpty } from "../../common/util/util";
import isPlainObject from 'lodash/isPlainObject';
import { useFooterAutoWidth } from "../../common/hook/useFooterAutoWidth";
import { CnSectionCalculateLayout, emitEvent } from "../../common/util/event-name";
import { cacheFoldStore } from "../../common/util/const";
import classNames from 'classnames';
import "./view.scss";
var _ref = ((_window = window) === null || _window === void 0 ? void 0 : _window.CNUI) || {},
CnPageFooter = _ref.CnPageFooter,
CnButton = _ref.CnButton,
CnIcon = _ref.CnIcon;
var CnLayoutBlock = function CnLayoutBlock(props) {
var _ref2 = props || {},
children = _ref2.children,
handleProps = _ref2.handleProps,
_context = _ref2._context,
buttons = _ref2.buttons,
_nodeId = _ref2._nodeId,
hidden = _ref2.hidden,
title = _ref2.title,
foldable = _ref2.foldable,
_unsafe_MixedSetter_buttons_select = _ref2._unsafe_MixedSetter_buttons_select,
_ref2$className = _ref2.className,
className = _ref2$className === void 0 ? '' : _ref2$className,
extraDom = _ref2.extraDom,
rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
var state = _context === null || _context === void 0 ? void 0 : _context.state;
var footerId = "block-footer-" + _nodeId;
var containerId = "block-" + _nodeId;
var _useState = useState(false),
isFold = _useState[0],
setIsFold = _useState[1];
var toggleOpen = function toggleOpen() {
cacheFoldStore[_nodeId] = !isFold;
setIsFold(!isFold);
};
useFooterAutoWidth({
footerId: footerId,
containerId: containerId,
hidden: hidden
});
useEffect(function () {
if (hidden !== undefined) {
emitEvent(CnSectionCalculateLayout, {
_nodeId: _nodeId
});
}
}, [props === null || props === void 0 ? void 0 : props.hidden]);
// 监听折叠状态变化，触发重新计算布局
useEffect(function () {
emitEvent(CnSectionCalculateLayout, {
_nodeId: _nodeId
});
}, [isFold]);
if (hidden === true) {
return null;
}
var extraProps = _extends({
id: containerId
}, rest);
if (typeof handleProps === 'function') {
var tempProps = executeFunction(handleProps, _extends({}, extraProps), _context === null || _context === void 0 ? void 0 : _context.state);
if (isPlainObject(tempProps)) {
extraProps = tempProps;
}
}
var buttonDom = null;
var isSlot = _unsafe_MixedSetter_buttons_select === 'SlotSetter';
if (isArrayNotEmpty(buttons) || isSlot || foldable) {
var _getLowCodeCoreUtil;
buttonDom = /*#__PURE__*/React.createElement(CnPageFooter, {
id: footerId,
style: {
position: 'fixed',
bottom: 0,
zIndex: 1
},
mode: 'block',
leftSlot: foldable && CnButton ? /*#__PURE__*/React.createElement(CnButton, {
onClick: toggleOpen,
className: "cn-layout-block-fold-button"
}, /*#__PURE__*/React.createElement(CnIcon, {
type: 'arrow-double-left'
})) : null,
rightSlot: isSlot ? buttons : (_getLowCodeCoreUtil = getLowCodeCoreUtil('util.makeButtons')) === null || _getLowCodeCoreUtil === void 0 ? void 0 : _getLowCodeCoreUtil({
buttons: buttons === null || buttons === void 0 ? void 0 : buttons.map(function (item) {
return _extends({}, item, {
position: getLowCodeCoreUtil('enumMap.ButtonPosition.blockButton')
});
}),
_context: _context,
state: state,
recordDataSource: {}
})
});
}
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: classNames({
'cn-layout-block-toggle-container': true,
'cn-layout-block-toggle-container-fold': isFold
}),
onClick: toggleOpen
}, /*#__PURE__*/React.createElement("div", {
className: "cn-layout-block-toggle-button"
})), /*#__PURE__*/React.createElement(UICnLayoutBlock, _extends({}, extraProps, {
className: classNames(className, {
'cn-layout-block-fold': isFold
})
}), extraDom, children, buttonDom));
};
CnLayoutBlock.typeMark = 'Block';
CnLayoutBlock.displayName = 'CnLayoutBlock';
export default CnLayoutBlock;
export { CnLayoutBlock };