yyuap-ref/dist2/RefTreeTransfer/supportComponents/transfer.js

cloud os fe ref project which is based on tinper

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _transfer = require('../../bee/transfer');

var _transfer2 = _interopRequireDefault(_transfer);

require('./transfer.css');

var _transfer3 = {
  'transferDivWrap': 'transferDivWrap__transfer___1Ip7o',
  'transferWrap': 'transferWrap__transfer___WQ4OL',
  'allTransferRightBtnStyle': 'allTransferRightBtnStyle__transfer___3Larh',
  'allTransferLeftBtnStyle': 'allTransferLeftBtnStyle__transfer___2Vt3-',
  'allTransferTopBtnStyle': 'allTransferTopBtnStyle__transfer___IgWo1',
  'allTransferBottomBtnStyle': 'allTransferBottomBtnStyle__transfer___2oYi5',
  'allTransferTopUpBtnStyle': 'allTransferTopUpBtnStyle__transfer___9pdrY',
  'allTransferBottomDownBtnStyle': 'allTransferBottomDownBtnStyle__transfer___1_y7S',
  'topInfo': 'topInfo__transfer___HvP3M',
  'topLeftInfo': 'topLeftInfo__transfer___2PIMJ',
  'topRightInfo': 'topRightInfo__transfer___26zgg',
  'buttomInfoWrap': 'buttomInfoWrap__transfer___3rWe5',
  'leftInfoStyle': 'leftInfoStyle__transfer___w8K9n',
  'rightInfoStyle': 'rightInfoStyle__transfer___22uaf',
  'saveBtnStyle': 'saveBtnStyle__transfer___WPcA7',
  'delBtnStyle': 'delBtnStyle__transfer___3avTn'
};

var _icon = require('../../bee/icon');

var _icon2 = _interopRequireDefault(_icon);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var TransferDiv = function (_Component) {
  _inherits(TransferDiv, _Component);

  function TransferDiv(props) {
    _classCallCheck(this, TransferDiv);

    var _this = _possibleConstructorReturn(this, (TransferDiv.__proto__ || Object.getPrototypeOf(TransferDiv)).call(this, props));

    _this.filterOption = function (inputValue, option) {
      return option.title.indexOf(inputValue) > -1;
    };

    _this.handleChange = function (targetKeys) {
      _this.setState({ targetKeys: targetKeys });
      _this.props.setTargetKeys(targetKeys);
    };

    _this.state = {
      transferData: [], //全部
      targetKeys: props.targetKeys, //右边框
      selectedKeys: [], //标记选中
      sourceDesc: {}, //记录左边信息
      targetDesc: {}, //记录右边信息
      buttonText: _this.props.buttonText
    };
    _this.allTransferSave = _this.allTransferSave.bind(_this);
    _this.allTransferCancel = _this.allTransferCancel.bind(_this);
    _this.TransferSelectUp = _this.TransferSelectUp.bind(_this);
    _this.TransferSelectDown = _this.TransferSelectDown.bind(_this);
    _this.downTransferSelectDown = _this.downTransferSelectDown.bind(_this);
    _this.upTransferSelectUp = _this.upTransferSelectUp.bind(_this);
    return _this;
  }

  _createClass(TransferDiv, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _props = this.props,
          transferData = _props.transferData,
          targetKeys = _props.targetKeys;

      this.setState({ transferData: transferData, targetKeys: targetKeys });
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var transferData = nextProps.transferData;


      this.setState({ transferData: transferData });
    }
  }, {
    key: 'allTransferSave',
    value: function allTransferSave() {
      var transferData = this.state.transferData;

      var tempKey = transferData.map(function (v) {
        return v.key;
      });
      this.setState({
        targetKeys: tempKey
      });
      this.props.setTargetKeys(tempKey);
    }
  }, {
    key: 'allTransferCancel',
    value: function allTransferCancel() {
      this.setState({
        targetKeys: []
      });
      this.props.setTargetKeys([]);
    }
  }, {
    key: 'TransferSelectUp',
    value: function TransferSelectUp() {
      var _state = this.state,
          targetKeys = _state.targetKeys,
          selectedKeys = _state.selectedKeys;

      var selectedTargetKeys = [];
      targetKeys.forEach(function (v, i) {
        selectedKeys.forEach(function (v2, i2) {
          if (v2 == v) {
            selectedTargetKeys.push({ key: v, index: i });
          }
        });
      });
      console.log(targetKeys, selectedKeys, selectedTargetKeys);
      if (selectedTargetKeys.length == 1) {
        this.scopeupRecord(targetKeys, selectedTargetKeys[0].index);
        this.setState({
          targetKeys: targetKeys
        });
      }
    }
  }, {
    key: 'upTransferSelectUp',
    value: function upTransferSelectUp() {
      var _state2 = this.state,
          targetKeys = _state2.targetKeys,
          selectedKeys = _state2.selectedKeys;

      var selectedTargetKeys = [];
      targetKeys.forEach(function (v, i) {
        selectedKeys.forEach(function (v2, i2) {
          if (v2 == v) {
            selectedTargetKeys.push({ key: v, index: i });
          }
        });
      });
      console.log(targetKeys, selectedKeys, selectedTargetKeys);
      if (selectedTargetKeys.length == 1) {
        this.scopeupupRecord(targetKeys, selectedTargetKeys[0].index);
        this.setState({
          targetKeys: targetKeys
        });
      }
    }
  }, {
    key: 'swapItems',
    value: function swapItems(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    }
  }, {
    key: 'scopeupRecord',
    value: function scopeupRecord(arr, $index) {
      if ($index == 0) {
        return;
      }
      this.swapItems(arr, $index, $index - 1);
    }
  }, {
    key: 'scopedownRecord',

    // 下移
    value: function scopedownRecord(arr, $index) {
      if ($index == arr.length - 1) {
        return;
      }
      this.swapItems(arr, $index, $index + 1);
    }
  }, {
    key: 'scopedowndownRecord',
    value: function scopedowndownRecord(arr, $index) {
      if ($index == arr.length - 1) {
        return;
      }
      this.swapItems(arr, $index, arr.length - 1);
    }
  }, {
    key: 'scopeupupRecord',
    value: function scopeupupRecord(arr, $index) {
      if ($index == 0) {
        return;
      }
      this.swapItems(arr, $index, 0);
    }
  }, {
    key: 'TransferSelectDown',
    value: function TransferSelectDown() {
      var _state3 = this.state,
          targetKeys = _state3.targetKeys,
          selectedKeys = _state3.selectedKeys;

      var selectedTargetKeys = [];
      targetKeys.forEach(function (v, i) {
        selectedKeys.forEach(function (v2, i2) {
          if (v2 == v) {
            selectedTargetKeys.push({ key: v, index: i });
          }
        });
      });
      console.log(targetKeys, selectedKeys, selectedTargetKeys);
      if (selectedTargetKeys.length == 1) {
        this.scopedownRecord(targetKeys, selectedTargetKeys[0].index);
        this.setState({
          targetKeys: targetKeys
        });
      }
    }
  }, {
    key: 'downTransferSelectDown',
    value: function downTransferSelectDown() {
      var _state4 = this.state,
          targetKeys = _state4.targetKeys,
          selectedKeys = _state4.selectedKeys;

      var selectedTargetKeys = [];
      targetKeys.forEach(function (v, i) {
        selectedKeys.forEach(function (v2, i2) {
          if (v2 == v) {
            selectedTargetKeys.push({ key: v, index: i });
          }
        });
      });
      console.log(targetKeys, selectedKeys, selectedTargetKeys);
      if (selectedTargetKeys.length == 1) {
        this.scopedowndownRecord(targetKeys, selectedTargetKeys[0].index);
        this.setState({
          targetKeys: targetKeys
        });
      }
    }
  }, {
    key: 'onSelectChange',
    value: function onSelectChange(sourceSelectedKeys, targetSelectedKeys) {

      var tempSourceKey = '',
          tempTargetKey = '';
      if (sourceSelectedKeys.length > 0) {
        var tempSourceKey = sourceSelectedKeys[sourceSelectedKeys.length - 1];
      }
      if (targetSelectedKeys.length > 0) {
        var tempTargetKey = targetSelectedKeys[targetSelectedKeys.length - 1];
      }
      var transferData = this.state.transferData;

      var sourceDesc = transferData.filter(function (v, k) {
        return v.refpk === tempSourceKey;
      });
      var targetDesc = transferData.filter(function (v, k) {
        return v.refpk === tempTargetKey;
      });
      this.setState({
        sourceDesc: sourceDesc[0] || {},
        targetDesc: targetDesc[0] || {},
        selectedKeys: sourceSelectedKeys.concat(targetSelectedKeys)
      });
    }
  }, {
    key: 'saveBtnClick',
    value: function saveBtnClick() {
      var _state5 = this.state,
          transferData = _state5.transferData,
          targetKeys = _state5.targetKeys;
      // var needTransferData = transferData.filter((v,k)=>{
      //   return targetKeys.some(targetCode => v.refpk === targetCode )
      // })

      var needTransferData = [];
      targetKeys.forEach(function (v, i) {
        transferData.forEach(function (v2, i2) {
          if (v == v2.refpk) {
            needTransferData.push(v2);
          }
        });
      });
      this.props.transferSave(targetKeys, needTransferData);
    }
  }, {
    key: 'cancelBtnClick',
    value: function cancelBtnClick() {
      this.props.transferCancel();
    }
  }, {
    key: 'render',
    value: function render() {
      var _state6 = this.state,
          transferData = _state6.transferData,
          sourceDesc = _state6.sourceDesc,
          targetDesc = _state6.targetDesc,
          selectedKeys = _state6.selectedKeys,
          targetKeys = _state6.targetKeys,
          buttonText = _state6.buttonText;
      var _props2 = this.props,
          showKey = _props2.showKey,
          isHasSearch = _props2.isHasSearch,
          language = _props2.language;

      var saveButton = "确认";
      var cancelButton = "取消";
      if (buttonText) {
        saveButton = buttonText.ok;
        cancelButton = buttonText.cancel;
      }
      switch (language) {
        case "zh_CN":
          break;
        case "en_US":
          saveButton = 'Ok';
          cancelButton = 'Cancel';
          break;
        case "zh_TW":
          saveButton = '確認';
          break;
        case "fr_FR":
          saveButton = 'Confirmation';
          cancelButton = 'Annuler';
          break;
        case "de_DE":
          saveButton = 'Bestätigt';
          cancelButton = 'Abgesagt';
          break;
        case "ja_JP":
          saveButton = '確認する';
          cancelButton = '取り消す';
          break;
        default:
          break;
      }

      var tempTransferData = transferData.filter(function (v) {
        return (typeof v === 'undefined' ? 'undefined' : _typeof(v)) == 'object';
      }).map(function (v, k) {
        v.key = v.refpk;
        v.title = v[showKey] || v.peoname; //*****&*&*&*&*&*修改
        return v;
      });

      var _props3 = this.props,
          _props3$textOption = _props3.textOption,
          textOption = _props3$textOption === undefined ? {} : _props3$textOption,
          searchtext = _props3.searchtext,
          nodata = _props3.nodata;
      var _textOption$leftTrans = textOption.leftTransferText,
          leftTransferText = _textOption$leftTrans === undefined ? '左穿梭框' : _textOption$leftTrans,
          _textOption$rightTran = textOption.rightTransferText,
          rightTransferText = _textOption$rightTran === undefined ? '右穿梭框' : _textOption$rightTran;
      var _textOption$leftInfo = textOption.leftInfo,
          leftInfo = _textOption$leftInfo === undefined ? [] : _textOption$leftInfo,
          _textOption$rightInfo = textOption.rightInfo,
          rightInfo = _textOption$rightInfo === undefined ? [] : _textOption$rightInfo;


      var leftInfoList = leftInfo.map(function (v, k) {
        if (v.text.length == 0) {
          return;
        }
        return _react2.default.createElement(
          'div',
          { key: k },
          v.text,
          ':',
          sourceDesc[v.key]
        );
      });
      var rightInfoList = rightInfo.map(function (v, k) {
        if (v.text.length == 0) {
          return;
        }
        return _react2.default.createElement(
          'div',
          { key: k },
          v.text,
          ':',
          targetDesc[v.key]
        );
      });
      var noDataDisplay = function noDataDisplay() {
        return _react2.default.createElement(
          'div',
          null,
          nodata
        );
      };

      return _react2.default.createElement(
        'div',
        { className: 'yyuap5-transferDivWrap ' + _transfer3.transferDivWrap },
        _react2.default.createElement(
          'div',
          { className: 'yyuap5-topInfo ' + _transfer3.topInfo },
          _react2.default.createElement(
            'div',
            { className: 'yyuap5-topLeftInfo ' + _transfer3.topLeftInfo },
            leftTransferText
          ),
          _react2.default.createElement(
            'div',
            { className: 'yyuap5-topRightInfo ' + _transfer3.topRightInfo },
            rightTransferText
          )
        ),
        _react2.default.createElement(
          'div',
          { className: 'yyuap5-topRightInfo ' + _transfer3.transferWrap },
          _react2.default.createElement(_transfer2.default, {
            showSearch: isHasSearch ? false : true,
            dataSource: tempTransferData,
            onSelectChange: this.onSelectChange.bind(this),
            selectedKeys: selectedKeys,
            filterOption: this.filterOption,
            targetKeys: targetKeys,
            onChange: this.handleChange,
            render: function render(item) {
              return item.title;
            }
            // render={<Dnd list={item} onStart={this.onDragStart} onStop={this.onDragEnd} />}
            , searchPlaceholder: searchtext,
            notFoundContent: noDataDisplay()

          }),
          _react2.default.createElement(
            'button',
            { onClick: this.allTransferCancel, className: _transfer3.allTransferLeftBtnStyle },
            _react2.default.createElement(_icon2.default, { type: 'uf-2arrow-left' })
          ),
          _react2.default.createElement(
            'button',
            { onClick: this.allTransferSave, className: _transfer3.allTransferRightBtnStyle },
            _react2.default.createElement(_icon2.default, { type: 'uf-2arrow-right' })
          )
        ),
        _react2.default.createElement(
          'div',
          { className: _transfer3.buttomInfoWrap },
          _react2.default.createElement(
            'div',
            { className: _transfer3.leftInfoStyle },
            leftInfoList
          ),
          _react2.default.createElement(
            'div',
            { className: _transfer3.rightInfoStyle },
            rightInfoList
          )
        ),
        _react2.default.createElement(
          'button',
          { onClick: this.upTransferSelectUp, className: _transfer3.allTransferTopUpBtnStyle },
          _react2.default.createElement(_icon2.default, { type: 'uf-2arrow-up' })
        ),
        _react2.default.createElement(
          'button',
          { onClick: this.downTransferSelectDown, className: _transfer3.allTransferBottomDownBtnStyle },
          _react2.default.createElement(_icon2.default, { type: 'uf-2arrow-down' })
        ),
        _react2.default.createElement(
          'button',
          { onClick: this.TransferSelectUp, className: _transfer3.allTransferTopBtnStyle },
          _react2.default.createElement(_icon2.default, { type: 'uf-arrow-up' })
        ),
        _react2.default.createElement(
          'button',
          { onClick: this.TransferSelectDown, className: _transfer3.allTransferBottomBtnStyle },
          _react2.default.createElement(_icon2.default, { type: 'uf-arrow-down' })
        ),
        _react2.default.createElement(
          'button',
          { className: 'Ref5delBtnStyle ' + _transfer3.delBtnStyle, onClick: this.cancelBtnClick.bind(this) },
          cancelButton
        ),
        _react2.default.createElement(
          'button',
          { className: 'Ref5saveBtnStyle ' + _transfer3.saveBtnStyle, onClick: this.saveBtnClick.bind(this) },
          saveButton
        )
      );
    }
  }]);

  return TransferDiv;
}(_react.Component);

exports.default = TransferDiv;
module.exports = exports['default'];