zarm-web/es/transfer/Transfer.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; }

/* eslint-disable */
import React, { Component } from 'react';
import classnames from 'classnames';
import Select from '../select';
import Button from '../button';
import Icon from '../icon';

class Transfer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      initialValue: props.initialValue || [],
      selectedValue: props.selectedValue || [],
      selectedLeft: [],
      selectedRight: []
    };
  }

  _onAdd() {
    const initialValue = [...this.state.initialValue].filter(item => this.state.selectedLeft.indexOf(item[this.props.keyOfItem]) < 0 && item);
    const selected = [...this.state.initialValue].filter(item => this.state.selectedLeft.indexOf(item[this.props.keyOfItem]) > -1 && item);
    const selectedValue = this.state.selectedValue.concat(selected);
    this.setState({
      initialValue,
      selectedValue,
      selectedLeft: [],
      selectedRight: []
    });
    this.props.onAdd(selectedValue);
  }

  _onMinus() {
    const selectedValue = [...this.state.selectedValue].filter(item => this.state.selectedRight.indexOf(item[this.props.keyOfItem]) < 0 && item);
    const selected = [...this.state.selectedValue].filter(item => this.state.selectedRight.indexOf(item[this.props.keyOfItem]) > -1 && item);
    const initialValue = this.state.initialValue.concat(selected);
    this.setState({
      initialValue,
      selectedValue,
      selectedLeft: [],
      selectedRight: []
    });
    this.props.onMinus(selectedValue);
  }

  _onDoubleAdd(e) {
    const initialValue = [...this.state.initialValue].filter(item => e.target.textContent !== item[this.props.displayNameOfItem] && item);
    const selected = [...this.state.initialValue].filter(item => e.target.textContent === item[this.props.displayNameOfItem] && item);
    const selectedValue = this.state.selectedValue.concat(selected);
    this.setState({
      initialValue,
      selectedValue
    });
    this.props.onDoubleAdd(selectedValue);
  }

  _onDoubleMinus(e) {
    const selectedValue = [...this.state.selectedValue].filter(item => e.target.textContent !== item[this.props.displayNameOfItem] && item);
    const selected = [...this.state.selectedValue].filter(item => e.target.textContent === item[this.props.displayNameOfItem] && item);
    const initialValue = this.state.initialValue.concat(selected);
    this.setState({
      initialValue,
      selectedValue
    });
    this.props.onDoubleMinus(selectedValue);
  }

  handleMultipleSelection(selectedRows, {
    index: currentIndex,
    value: currentValue
  }, operType) {
    const len = selectedRows.length;
    const {
      keyOfItem
    } = this.props;
    const {
      initialValue,
      selectedValue
    } = this.state;
    const values = operType === 'add' ? initialValue : selectedValue;
    const selectedName = operType === 'add' ? 'selectedLeft' : 'selectedRight';

    if (len >= 2) {
      // 有上一次选择
      let lastSelectedValue = selectedRows[len - 1];

      if (lastSelectedValue === currentValue) {
        if (len > 2) {
          return;
        }

        lastSelectedValue = selectedRows[len - 2];
      }

      let lastIndex;
      values.forEach((item, index) => {
        if (item[keyOfItem] === lastSelectedValue) {
          lastIndex = index;
        }
      });
      const selected = [...values].splice(Math.min(lastIndex, currentIndex), Math.abs(lastIndex - currentIndex) + 1).map(item => item[keyOfItem]);

      if (currentIndex < lastIndex) {
        selected.shift();
        selected.push(currentValue);
      }

      this.setState({
        [selectedName]: selected
      });
    }
  }

  render() {
    const {
      prefixCls,
      size,
      isDisabled,
      isRadius,
      style,
      width,
      initialPanelTitle,
      selectedPanelTitle,
      keyOfItem,
      displayNameOfItem
    } = this.props;
    const disabled = 'disabled' in this.props || isDisabled;
    const radius = 'radius' in this.props || isRadius;
    const cls = classnames({
      [prefixCls]: true,
      [`size-${size}`]: !!size,
      [`${prefixCls}-disabled`]: disabled,
      [`${prefixCls}-radius`]: radius
    });
    return React.createElement("div", {
      style: _objectSpread({}, style, {
        width
      }),
      className: cls
    }, React.createElement("div", {
      className: `${prefixCls}-panel`
    }, React.createElement("h4", {
      className: `${prefixCls}-panel-title`
    }, initialPanelTitle), React.createElement(Select.Multiple, {
      disabled: disabled,
      value: this.state.selectedLeft,
      onChange: (selectedRows, row, shiftKey) => {
        if (shiftKey) {
          this.handleMultipleSelection(selectedRows, row, 'add');
          return;
        }

        this.setState({
          selectedLeft: selectedRows
        });
      },
      onDoubleClick: e => !disabled && this._onDoubleAdd(e)
    }, this.state.initialValue.map((option, index) => {
      return React.createElement(Select.Option, {
        key: index,
        value: option[keyOfItem]
      }, option[displayNameOfItem]);
    }))), React.createElement("div", {
      className: `${prefixCls}-action-bar`
    }, React.createElement("div", {
      className: "button-wrapper"
    }, React.createElement(Button, {
      disabled: this.state.selectedLeft.length === 0,
      onClick: () => !disabled && this._onAdd()
    }, React.createElement(Icon, {
      type: "add"
    })), React.createElement(Button, {
      disabled: this.state.selectedRight.length === 0,
      onClick: () => !disabled && this._onMinus()
    }, React.createElement(Icon, {
      type: "minus"
    })))), React.createElement("div", {
      className: `${prefixCls}-panel`
    }, React.createElement("h4", {
      className: `${prefixCls}-panel-title`
    }, selectedPanelTitle), React.createElement(Select.Multiple, {
      disabled: disabled,
      value: this.state.selectedRight,
      onChange: (selectedRows, row, shiftKey) => {
        if (shiftKey) {
          this.handleMultipleSelection(selectedRows, row, 'minus');
          return;
        }

        this.setState({
          selectedRight: selectedRows
        });
      },
      onDoubleClick: e => !disabled && this._onDoubleMinus(e)
    }, this.state.selectedValue.map((option, index) => {
      return React.createElement(Select.Option, {
        key: index,
        value: option[keyOfItem]
      }, option[displayNameOfItem]);
    }))));
  }

}

Transfer.defaultProps = {
  prefixCls: 'ui-transfer',
  size: null,
  isDisabled: false,
  isRadius: false,
  initialPanelTitle: '',
  selectedPanelTitle: '',
  initialValue: [],
  selectedValue: [],
  keyOfItem: '',
  displayNameOfItem: '',
  onAdd: () => {},
  onDoubleAdd: () => {},
  onMinus: () => {},
  onDoubleMinus: () => {}
};
export default Transfer;