@b-design/ui-layout/es/BothSidesLayout.js

React component for Alibaba Cloud.

import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import React, { useState, useMemo, useEffect } from 'react';
import * as PropTypes from 'prop-types';
import Page from '@b-design/ui-page';
import RoutableMenu from '@b-design/ui-console-menu/RoutableMenu';
import Layout from './index';
import { Header, Container } from './styles';
import { Icon, Balloon } from '@b-design/ui';
/**
 * @public
 */

var BothSidesLayout = function BothSidesLayout(props) {
  var children = props.children,
      className = props.className,
      style = props.style,
      breadcrumb = props.breadcrumb,
      _props$menus = props.menus,
      menus = _props$menus === void 0 ? [] : _props$menus,
      headerLeftNode = props.headerLeftNode,
      headerRightNode = props.headerRightNode,
      pageTitle = props.pageTitle,
      onBackArrowClick = props.onBackArrowClick,
      hasBackArrow = props.hasBackArrow,
      _props$menuVisible = props.menuVisible,
      menuVisible = _props$menuVisible === void 0 ? true : _props$menuVisible,
      _props$headerVisible = props.headerVisible,
      headerVisible = _props$headerVisible === void 0 ? true : _props$headerVisible,
      _props$secondMenuProp = props.secondMenuProps,
      secondMenuProps = _props$secondMenuProp === void 0 ? {} : _props$secondMenuProp,
      _props$headerMenuProp = props.headerMenuProps,
      headerMenuProps = _props$headerMenuProp === void 0 ? {} : _props$headerMenuProp,
      breadcrumbExtra = props.breadcrumbExtra,
      breadcrumbExtraAlign = props.breadcrumbExtraAlign,
      subTitle = props.subTitle,
      headerExtra = props.headerExtra,
      headerClassName = props.headerClassName,
      headerStyle = props.headerStyle,
      _props$collapseVisibl = props.collapseVisible,
      collapseVisible = _props$collapseVisibl === void 0 ? true : _props$collapseVisibl;

  var _useState = useState(location.pathname),
      _useState2 = _slicedToArray(_useState, 2),
      pathname = _useState2[0],
      setPathname = _useState2[1];

  var _useState3 = useState('left'),
      _useState4 = _slicedToArray(_useState3, 2),
      trigger = _useState4[0],
      setTrigger = _useState4[1];

  var _useState5 = useState(''),
      _useState6 = _slicedToArray(_useState5, 2),
      activeKey = _useState6[0],
      setActiveKey = _useState6[1];

  var firstMenu = useMemo(function () {
    return menus.map(function (item) {
      var _item$items;

      var data = queryFirstMenuUrl(item);
      return _objectSpread(_objectSpread({}, item), {}, {
        label: item.label,
        to: data.to,
        key: data.key,
        activePathPatterns: item !== null && item !== void 0 && (_item$items = item.items) !== null && _item$items !== void 0 && _item$items.length ? queryActivePathPatterns(item.items) : [item.to],
        items: undefined
      });
    });
  }, [menus]);
  useEffect(function () {
    setPathname("".concat(location.pathname).concat(location.hash));
  }, [location.pathname, location.hash]);
  var secondMenu = useMemo(function () {
    var navs_map = new Map();
    menus.forEach(function (item) {
      navs_map.set(querySecondMenuKey(item), item.items || []);
    });
    var data = navs_map.get(pathname);
    querySecondMneuKey(data);
    return data;
  }, [menus, pathname]); // 通过地址栏找出应选中的二级菜单key

  function querySecondMneuKey() {
    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
    data.forEach(function (item) {
      var _item$items2;

      if (item.to === pathname) {
        setActiveKey(item.key);
      } else if (item !== null && item !== void 0 && (_item$items2 = item.items) !== null && _item$items2 !== void 0 && _item$items2.length) {
        querySecondMneuKey(item.items);
      }
    });
  } // 找出当前路由匹配哪个二级菜单


  function querySecondMenuKey(data) {
    var _data$items;

    if (data !== null && data !== void 0 && (_data$items = data.items) !== null && _data$items !== void 0 && _data$items.length && queryActivePathPatterns(data.items).includes(pathname)) {
      return pathname;
    } else {
      return data.to;
    }
  } // 找出一级菜单应跳转的地址


  function queryFirstMenuUrl(data) {
    var _data$items2;

    if (data !== null && data !== void 0 && (_data$items2 = data.items) !== null && _data$items2 !== void 0 && _data$items2.length) {
      return queryFirstMenuUrl(data.items[0]);
    } else if (data.length) {
      return data[0];
    }

    return data;
  } // 找出一级菜单对应的所有的 activePathPatterns


  function queryActivePathPatterns(data) {
    var arr = [];
    data.forEach(function (item) {
      var _item$activePathPatte, _item$items3;

      if (item.to) {
        arr.push(item.to);
      }

      if (item !== null && item !== void 0 && (_item$activePathPatte = item.activePathPatterns) !== null && _item$activePathPatte !== void 0 && _item$activePathPatte.length) {
        arr = [].concat(_toConsumableArray(arr), _toConsumableArray(item.activePathPatterns));
      }

      if (item !== null && item !== void 0 && (_item$items3 = item.items) !== null && _item$items3 !== void 0 && _item$items3.length) {
        arr = [].concat(_toConsumableArray(arr), _toConsumableArray(queryActivePathPatterns(item.items)));
      }
    });
    return arr;
  }

  function renderBalloon(item) {
    return /*#__PURE__*/React.createElement(Balloon, {
      trigger: /*#__PURE__*/React.createElement(Icon, {
        size: (item === null || item === void 0 ? void 0 : item.iconSize) || 'small',
        type: item.icon
      }),
      closable: false,
      align: "r"
    }, item.label);
  }

  var navs = useMemo(function () {
    return secondMenu === null || secondMenu === void 0 ? void 0 : secondMenu.map(function (item) {
      var _item$items4, _item$items5;

      return _objectSpread(_objectSpread({}, item), {}, {
        items: trigger === 'left' ? item === null || item === void 0 ? void 0 : item.items : undefined,
        label: item.icon ? /*#__PURE__*/React.createElement(React.Fragment, null, trigger === 'right' ? renderBalloon(item) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
          size: (item === null || item === void 0 ? void 0 : item.iconSize) || 'small',
          type: item.icon,
          className: "layout-menu-item-icon"
        }), /*#__PURE__*/React.createElement("span", null, item.label))) : item.label,
        to: (_item$items4 = item.items) !== null && _item$items4 !== void 0 && _item$items4.length ? item.items[0].to : item.to,
        key: trigger === 'left' && item !== null && item !== void 0 && (_item$items5 = item.items) !== null && _item$items5 !== void 0 && _item$items5.length ? item.items[0].key : item.key
      });
    });
  }, [secondMenu, trigger]);
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(className ? className + ' ' : '', "b-design-layout"),
    style: _objectSpread({}, style)
  }, headerVisible && /*#__PURE__*/React.createElement(Header, {
    leftContainer: headerLeftNode,
    rightContainer: headerRightNode,
    className: headerClassName,
    style: headerStyle,
    headerMenu: menuVisible ? /*#__PURE__*/React.createElement(RoutableMenu, _extends({
      items: firstMenu,
      embeddable: true,
      type: "secondary"
    }, headerMenuProps, {
      style: _objectSpread({
        flex: 'auto'
      }, headerMenuProps.style),
      onItemClick: function onItemClick(key, itemInfo, event) {
        setPathname("".concat(location.pathname).concat(location.hash));
        headerMenuProps.onItemClick && headerMenuProps.onItemClick(key, itemInfo, event);
      },
      direction: "hoz",
      activeDirection: "bottom"
    })) : null
  }), /*#__PURE__*/React.createElement(Container, null, secondMenu !== null && secondMenu !== void 0 && secondMenu.length ? /*#__PURE__*/React.createElement(Layout.Sider, null, /*#__PURE__*/React.createElement(RoutableMenu, _extends({
    items: navs,
    onItemClick: function onItemClick(key) {
      return setActiveKey(key);
    },
    activeKey: activeKey
  }, secondMenuProps, {
    style: _objectSpread({
      paddingBottom: collapseVisible ? '32px' : '0px'
    }, secondMenuProps.style),
    direction: "ver",
    className: "".concat(secondMenuProps.className ? secondMenuProps.className + ' ' : '').concat(trigger === 'left' ? 'layout-sidebar-show' : 'layout-sidebar-hide', " both-layout-menu")
  })), collapseVisible && /*#__PURE__*/React.createElement("div", {
    onClick: function onClick() {
      return setTrigger(trigger === 'left' ? 'right' : 'left');
    },
    className: "layout-sidebar-visible"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "toggle-".concat(trigger),
    size: "small"
  }))) : null, /*#__PURE__*/React.createElement(Page, {
    className: "b-design-layout-page-content"
  }, /*#__PURE__*/React.createElement(Page.Header, {
    title: pageTitle,
    breadcrumb: breadcrumb,
    hasBackArrow: hasBackArrow,
    onBackArrowClick: onBackArrowClick,
    breadcrumbExtra: breadcrumbExtra,
    breadcrumbExtraAlign: breadcrumbExtraAlign,
    subTitle: subTitle
  }, headerExtra), /*#__PURE__*/React.createElement(Page.Content, null, children))));
};

BothSidesLayout.propTypes = {
  className: PropTypes.string,
  style: PropTypes.objectOf(PropTypes.any),
  children: PropTypes.node,
  breadcrumb: PropTypes.node,
  breadcrumbExtra: PropTypes.node
};
export default BothSidesLayout;