zarm-web/es/select/SelectMultiple.js

基于 React 的桌面端UI库

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { Component } from 'react';
import classnames from 'classnames';
import Option from './Option';
import Menu from '../menu';

class SelectMultiple extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.value || props.defaultValue || this.getCheckedValue(props.children)
    };
  }

  componentWillReceiveProps(nextProps) {
    if ('value' in nextProps || this.getCheckedValue(nextProps.children)) {
      this.setState({
        value: nextProps.value || this.getCheckedValue(nextProps.children)
      });
    }
  } // eslint-disable-next-line


  getCheckedValue(children) {
    const checkedValue = [];
    React.Children.forEach(children, option => {
      if (option.props && option.props.checked) {
        checkedValue.push(option.props.value);
      }
    });
    return checkedValue;
  } // eslint-disable-next-line


  onSelectClick(e) {
    e.preventDefault();
  }

  onOptionChange(e, props, rowIndex) {
    if ('disabled' in props) {
      return;
    }

    const {
      shiftKey
    } = e;
    const {
      value
    } = this.state;
    const {
      onChange
    } = this.props;
    const index = value.indexOf(props.value);
    const isSelected = index > -1;

    if (isSelected && !shiftKey) {
      value.splice(index, 1);
    } else if (!isSelected) {
      value.push(props.value);
    }

    const row = {
      index: rowIndex,
      value: props.value,
      text: props.children,
      selected: !isSelected
    };
    this.setState({
      value
    }, () => onChange(value, row, shiftKey));
  }

  render() {
    const {
      prefixCls,
      size,
      style,
      onDoubleClick,
      children
    } = this.props;
    const {
      value,
      dropdown
    } = this.state;
    const disabled = 'disabled' in this.props;
    const radius = 'radius' in this.props; // eslint-disable-next-line

    let childrenNode = React.Children.map(children, (option, index) => {
      return React.createElement(Option, _extends({}, option.props, {
        onDoubleClick: onDoubleClick,
        onChange: e => this.onOptionChange(e, option.props, index),
        checked: !!(value.indexOf(option.props.value) > -1)
      }));
    });
    const cls = classnames({
      [prefixCls]: true,
      [`${prefixCls}--open`]: dropdown,
      'is-disabled': disabled,
      'is-radius': radius,
      [`size-${size}`]: !!size
    });
    return React.createElement("span", {
      className: cls,
      style: style
    }, React.createElement("span", {
      className: `${prefixCls}__selection`,
      style: {
        height: '100%',
        maxHeight: 250,
        overflow: 'auto'
      },
      "aria-autocomplete": "list",
      "aria-haspopup": "true",
      "aria-expanded": "false",
      onClick: e => !disabled && this.onSelectClick(e)
    }, React.createElement(Menu, {
      size: size
    }, childrenNode)));
  }

}

SelectMultiple.defaultProps = {
  prefixCls: 'za-select',
  isRadius: false,
  isDisabled: false,
  onChange: () => {},
  onDoubleClick: () => {}
};
export default SelectMultiple;