zarm-web/es/layout/Sider.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 } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Icon from '../icon';

class Sider extends Component {
  constructor(props) {
    super(props);

    this.setCollapsed = collapsed => {
      if (!('collapsed' in this.props)) {
        this.setState({
          collapsed
        });
      }

      const {
        onCollapse
      } = this.props;

      if (onCollapse) {
        onCollapse(collapsed);
      }
    };

    this.toggle = () => {
      const collapsed = !this.state.collapsed;
      this.setCollapsed(collapsed);
    };

    this.state = {
      collapsed: 'collapsed' in props ? props.collapsed : false
    };
  }

  getChildContext() {
    const {
      collapsed
    } = this.state;
    return {
      siderCollapsed: collapsed
    };
  }

  componentWillReceiveProps(nextProps) {
    if ('collapsed' in nextProps) {
      this.setState({
        collapsed: nextProps.collapsed
      });
    }
  }

  render() {
    const {
      prefixCls,
      className,
      style,
      width,
      collapsible,
      trigger,
      collapsedWidth,
      children
    } = this.props;
    const {
      collapsed
    } = this.state;
    const siderWidth = collapsed ? collapsedWidth : width;
    const defaultTrigger = collapsed ? React.createElement(Icon, {
      type: "arrow-right"
    }) : React.createElement(Icon, {
      type: "arrow-left"
    });
    const triggerDom = trigger !== null && React.createElement("div", {
      className: `${prefixCls}-trigger`,
      onClick: this.toggle,
      style: {
        width: siderWidth
      }
    }, trigger || defaultTrigger);

    const siderStyle = _objectSpread({}, style, {
      flex: `0 0 ${siderWidth}`,
      maxWidth: siderWidth,
      minWidth: siderWidth,
      width: siderWidth
    });

    const siderCls = classnames(prefixCls, {
      [className]: !!className
    });
    return React.createElement("div", {
      className: siderCls,
      style: siderStyle
    }, React.createElement("div", {
      className: `${prefixCls}-children`
    }, children), collapsible && triggerDom);
  }

}

Sider.defaultProps = {
  prefixCls: 'ui-layout-sider',
  collapsible: false,
  collapsedWidth: 80,
  width: 236,
  onCollapse: () => {}
};
Sider.childContextTypes = {
  siderCollapsed: PropTypes.bool
};
export default Sider;