@cainiaofe/cn-ui-layout/lib/lowcode/cn-layout-block/view.js

- 安装 cone-cli ｜ [Cone-CLI 使用指引](https://alidocs.dingtalk.com/i/nodes/xdqZp24KneBJzvGM6XezJvyb7RA0Nr1E) - `tnpm i -g @alife/cone-cli@latest` - 安装依赖包 - `cone install` - 启动研发 - `cone start`

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.CnLayoutBlock = void 0;
var _react = _interopRequireWildcard(require("react"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _cnLayout = require("../../components/cn-layout");
var _util = require("../../common/util/util");
var _isPlainObject = _interopRequireDefault(require("lodash/isPlainObject"));
var _useFooterAutoWidth = require("../../common/hook/useFooterAutoWidth");
var _eventName = require("../../common/util/event-name");
var _const = require("../../common/util/const");
var _classnames = _interopRequireDefault(require("classnames"));
require("./view.scss");
var _excluded = ["children", "handleProps", "_context", "buttons", "_nodeId", "hidden", "title", "foldable", "_unsafe_MixedSetter_buttons_select", "className", "extraDom"];
var _window;
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var _ref = ((_window = window) === null || _window === void 0 ? void 0 : _window.CNUI) || {},
  CnPageFooter = _ref.CnPageFooter,
  CnButton = _ref.CnButton,
  CnIcon = _ref.CnIcon;
var CnLayoutBlock = exports.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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
  var state = _context === null || _context === void 0 ? void 0 : _context.state;
  var footerId = "block-footer-" + _nodeId;
  var containerId = "block-" + _nodeId;
  var _useState = (0, _react.useState)(false),
    isFold = _useState[0],
    setIsFold = _useState[1];
  var toggleOpen = function toggleOpen() {
    _const.cacheFoldStore[_nodeId] = !isFold;
    setIsFold(!isFold);
  };
  (0, _useFooterAutoWidth.useFooterAutoWidth)({
    footerId: footerId,
    containerId: containerId,
    hidden: hidden
  });
  (0, _react.useEffect)(function () {
    if (hidden !== undefined) {
      (0, _eventName.emitEvent)(_eventName.CnSectionCalculateLayout, {
        _nodeId: _nodeId
      });
    }
  }, [props === null || props === void 0 ? void 0 : props.hidden]);

  // 监听折叠状态变化，触发重新计算布局
  (0, _react.useEffect)(function () {
    (0, _eventName.emitEvent)(_eventName.CnSectionCalculateLayout, {
      _nodeId: _nodeId
    });
  }, [isFold]);
  if (hidden === true) {
    return null;
  }
  var extraProps = (0, _extends2["default"])({
    id: containerId
  }, rest);
  if (typeof handleProps === 'function') {
    var tempProps = (0, _util.executeFunction)(handleProps, (0, _extends2["default"])({}, extraProps), _context === null || _context === void 0 ? void 0 : _context.state);
    if ((0, _isPlainObject["default"])(tempProps)) {
      extraProps = tempProps;
    }
  }
  var buttonDom = null;
  var isSlot = _unsafe_MixedSetter_buttons_select === 'SlotSetter';
  if ((0, _util.isArrayNotEmpty)(buttons) || isSlot || foldable) {
    var _getLowCodeCoreUtil;
    buttonDom = /*#__PURE__*/_react["default"].createElement(CnPageFooter, {
      id: footerId,
      style: {
        position: 'fixed',
        bottom: 0,
        zIndex: 1
      },
      mode: 'block',
      leftSlot: foldable && CnButton ? /*#__PURE__*/_react["default"].createElement(CnButton, {
        onClick: toggleOpen,
        className: "cn-layout-block-fold-button"
      }, /*#__PURE__*/_react["default"].createElement(CnIcon, {
        type: 'arrow-double-left'
      })) : null,
      rightSlot: isSlot ? buttons : (_getLowCodeCoreUtil = (0, _util.getLowCodeCoreUtil)('util.makeButtons')) === null || _getLowCodeCoreUtil === void 0 ? void 0 : _getLowCodeCoreUtil({
        buttons: buttons === null || buttons === void 0 ? void 0 : buttons.map(function (item) {
          return (0, _extends2["default"])({}, item, {
            position: (0, _util.getLowCodeCoreUtil)('enumMap.ButtonPosition.blockButton')
          });
        }),
        _context: _context,
        state: state,
        recordDataSource: {}
      })
    });
  }
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])({
      'cn-layout-block-toggle-container': true,
      'cn-layout-block-toggle-container-fold': isFold
    }),
    onClick: toggleOpen
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "cn-layout-block-toggle-button"
  })), /*#__PURE__*/_react["default"].createElement(_cnLayout.CnLayoutBlock, (0, _extends2["default"])({}, extraProps, {
    className: (0, _classnames["default"])(className, {
      'cn-layout-block-fold': isFold
    })
  }), extraDom, children, buttonDom));
};
CnLayoutBlock.typeMark = 'Block';
CnLayoutBlock.displayName = 'CnLayoutBlock';
var _default = exports["default"] = CnLayoutBlock;