zarm-web/es/menu/Menu.js

基于 React 的桌面端UI库

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { Component, Children, cloneElement } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import MenuContext, { menuKeys } from './menu-context';

class Menu extends Component {
  constructor(props) {
    super(props);
    this.menuKeys = void 0;
    this.inlineOpenKeys = [];

    this.toggleSelectedKeys = itemKey => {
      if (!('selectedKeys' in this.props)) {
        this.setState({
          selectedKeys: [itemKey]
        });
      }
    };

    this.toggleOpenKeys = subMenuKey => {
      const {
        openKeys
      } = this.state;
      const {
        onOpenChange,
        inlineCollapsed
      } = this.props;
      const newOpenKeys = [...openKeys];
      const keyIndex = openKeys.indexOf(subMenuKey);

      if (keyIndex > -1) {
        newOpenKeys.splice(keyIndex, 1);
      } else {
        newOpenKeys.push(subMenuKey);
      }

      if (inlineCollapsed && subMenuKey === '') {
        // inlineCollapsed状态点击item关闭所有的submenu
        newOpenKeys.length = 0;
      }

      if (onOpenChange) {
        onOpenChange(newOpenKeys);
      }

      if (!('openKeys' in this.props)) {
        this.setState({
          openKeys: newOpenKeys
        });
      }
    };

    const {
      defaultOpenKeys,
      defaultSelectedKeys
    } = props;
    this.state = {
      openKeys: defaultOpenKeys,
      selectedKeys: defaultSelectedKeys
    }; // 每个实例都有自己的menuKeys，如果都指向一个menuKeys引用会有问题

    this.menuKeys = _objectSpread({}, menuKeys);
    this.menuKeys.toggleSelectedKeys = this.toggleSelectedKeys;
    this.menuKeys.toggleOpenKeys = this.toggleOpenKeys;
  }

  componentWillReceiveProps(nextProps) {
    const {
      inlineCollapsed
    } = this.props;
    const {
      openKeys
    } = this.state;

    if (nextProps.inlineCollapsed && !inlineCollapsed) {
      // this.switchingModeFromInline = true;
      this.inlineOpenKeys = openKeys;
      this.setState({
        openKeys: []
      });
    }

    if (!nextProps.inlineCollapsed && inlineCollapsed) {
      this.setState({
        openKeys: this.inlineOpenKeys
      });
      this.inlineOpenKeys = [];
    }

    if (nextProps.selectedKeys) {
      this.setState({
        selectedKeys: nextProps.selectedKeys
      });
    }
  }

  renderChildren() {
    const {
      children,
      inlineIndent,
      inlineCollapsed,
      mode
    } = this.props;
    const {
      siderCollapsed
    } = this.context;
    const childProps = {
      mode,
      inlineIndent,
      inlineCollapsed: inlineCollapsed || siderCollapsed
    };
    return Children.map(children, (child, index) => {
      const c = child;
      const {
        key
      } = child;
      childProps.subMenuKey = key || `0-${index}`;
      childProps.itemKey = key || `0-${index}`;
      return cloneElement(c, childProps);
    });
  }

  render() {
    const {
      size,
      theme,
      mode,
      className,
      style,
      prefixCls,
      inlineCollapsed
    } = this.props;
    const {
      siderCollapsed
    } = this.context;
    const {
      openKeys,
      selectedKeys
    } = this.state;
    const cls = classnames({
      [prefixCls]: true,
      [`${prefixCls}-root`]: true,
      [`${prefixCls}-${theme}`]: true,
      [`${prefixCls}-${mode}`]: true,
      [`${prefixCls}-collapsed`]: !!siderCollapsed || !!inlineCollapsed,
      [`size-${size}`]: !!size,
      [className]: !!className
    });

    const newMenuKeys = _objectSpread({}, this.menuKeys, {
      openKeys,
      selectedKeys,
      inlineCollapsed
    });

    return React.createElement("ul", {
      role: "menu",
      className: cls,
      style: style
    }, React.createElement(MenuContext.Provider, {
      value: newMenuKeys
    }, this.renderChildren()));
  }

}

Menu.defaultProps = {
  prefixCls: 'za-menu',
  mode: 'inline',
  theme: 'light',
  inlineIndent: 24,
  inlineCollapsed: false,
  defaultOpenKeys: [],
  defaultSelectedKeys: []
};
Menu.contextTypes = {
  siderCollapsed: PropTypes.bool
};
Menu.SubMenu = void 0;
Menu.Item = void 0;
Menu.Divider = void 0;
export default Menu;