@alifd/meet-react/lib/transfer/transfer.js

Fusion Mobile React UI System Component

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _babelRuntimeJsxStyleTransform = require("@alifd/babel-runtime-jsx-style-transform");
var _tslib = require("tslib");
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _view = _interopRequireDefault(require("../view"));
var _icon = _interopRequireDefault(require("../icon"));
var _button = _interopRequireDefault(require("../button"));
var _checkbox = _interopRequireDefault(require("../checkbox"));
var _utils = require("./utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
var Transfer = function (props, ref) {
  var _props$dataSource = props.dataSource,
    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
    _props$value = props.value,
    value = _props$value === void 0 ? [] : _props$value,
    _props$titles = props.titles,
    titles = _props$titles === void 0 ? [] : _props$titles,
    _props$tabIndex = props.tabIndex,
    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
    _props$defaultValue = props.defaultValue,
    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
    _props$tabChange = props.tabChange,
    tabChange = _props$tabChange === void 0 ? function () {} : _props$tabChange,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    _props$leftDisabled = props.leftDisabled,
    leftDisabled = _props$leftDisabled === void 0 ? false : _props$leftDisabled,
    _props$rightDisabled = props.rightDisabled,
    rightDisabled = _props$rightDisabled === void 0 ? false : _props$rightDisabled,
    _props$notFoundConten = props.notFoundContent,
    notFoundContent = _props$notFoundConten === void 0 ? 'Not Found' : _props$notFoundConten,
    _props$defaultLeftChe = props.defaultLeftChecked,
    defaultLeftChecked = _props$defaultLeftChe === void 0 ? [] : _props$defaultLeftChe,
    _props$defaultRightCh = props.defaultRightChecked,
    defaultRightChecked = _props$defaultRightCh === void 0 ? [] : _props$defaultRightCh,
    _props$onChange = props.onChange,
    onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
    _props$buttonText = props.buttonText,
    buttonText = _props$buttonText === void 0 ? 'Transfer to' : _props$buttonText,
    _props$selectItemText = props.selectItemText,
    selectItemText = _props$selectItemText === void 0 ? 'Item' : _props$selectItemText,
    _props$style = props.style,
    style = _props$style === void 0 ? {} : _props$style,
    others = (0, _tslib.__rest)(props, ["dataSource", "value", "titles", "tabIndex", "defaultValue", "tabChange", "disabled", "leftDisabled", "rightDisabled", "notFoundContent", "defaultLeftChecked", "defaultRightChecked", "onChange", "buttonText", "selectItemText", "style"]);
  var rightValue = props.value || defaultValue || [];
  var _useState = (0, _react.useState)(tabIndex),
    currentTabIndex = _useState[0],
    setTabIndex = _useState[1];
  var _filterTransferValue = (0, _utils.filterTransferValue)(dataSource, rightValue),
    leftList = _filterTransferValue.leftList,
    rightList = _filterTransferValue.rightList;
  if ('defaultLeftChecked' in props) {
    leftList = (0, _utils.setCheckedItem)(leftList, defaultLeftChecked);
  }
  if ('defaultRightChecked' in props) {
    rightList = (0, _utils.setCheckedItem)(rightList, defaultRightChecked);
  }
  var useStateLeft = (0, _react.useState)(leftList);
  var transferLeftList = useStateLeft[0];
  var setTransferLeftList = useStateLeft[1];
  var useStateRight = (0, _react.useState)(rightList);
  var transferRightList = useStateRight[0];
  var setTransferRightList = useStateRight[1];
  if (leftDisabled) {
    transferLeftList = (0, _utils.setListDisabled)(transferLeftList);
  }
  if (rightDisabled) {
    transferRightList = (0, _utils.setListDisabled)(transferRightList);
  }
  if (disabled) {
    transferLeftList = (0, _utils.setListDisabled)(transferLeftList);
    transferRightList = (0, _utils.setListDisabled)(transferRightList);
  }
  var transferButtonText = currentTabIndex === 0 ? titles[1] : titles[0];
  var transferList = currentTabIndex === 0 ? transferLeftList : transferRightList;
  var _getDataStatus = (0, _utils.getDataStatus)(transferList),
    listDataSize = _getDataStatus.listDataSize,
    disabledSize = _getDataStatus.disabledSize,
    checkedSize = _getDataStatus.checkedSize,
    isCheckAll = _getDataStatus.isCheckAll;
  var prefix = 'mt-';
  var classNameObj = {
    transferCls: (0, _classnames.default)(prefix + "transfer"),
    tabCls: (0, _classnames.default)(prefix + "transfer-tab"),
    tabMainWrap: (0, _classnames.default)(prefix + "transfer-tab-main"),
    tabItemCls: (0, _classnames.default)(prefix + "transfer-tab-main-item"),
    tabIconWrapCls: (0, _classnames.default)(prefix + "transfer-tab-icon-wrap"),
    tabIconCls: (0, _classnames.default)(prefix + "transfer-tab-icon-wrap-icon"),
    tabItemActiveCls: (0, _classnames.default)(prefix + "transfer-tab-main-item", prefix + "transfer-tab-main-item--selected"),
    transferList: (0, _classnames.default)(prefix + "transfer-list", prefix + "transfer-list--selected"),
    transferItem: (0, _classnames.default)(prefix + "transfer-list-item"),
    transferTips: (0, _classnames.default)(prefix + "transfer-select-tip"),
    checkbox: (0, _classnames.default)(prefix + "transfer-checkbox"),
    transferListScroll: (0, _classnames.default)(prefix + "transfer-list-scroll"),
    transferEmptyContent: (0, _classnames.default)(prefix + "transfer-empty-content"),
    transferButton: (0, _classnames.default)(prefix + "transfer-button")
  };
  var handleClickTab = function handleClickTab(e, item, index) {
    setTabIndex(index);
    if (tabChange) {
      tabChange(e, item, index);
    }
  };
  var handleClickItem = function handleClickItem(checked, e, item, index) {
    if (currentTabIndex === 0) {
      var newTransferLeftList = transferLeftList.map(function (obj) {
        return Object.assign({}, obj);
      });
      newTransferLeftList[index].isChecked = checked;
      setTransferLeftList(newTransferLeftList);
    } else {
      var newTransferRightList = transferRightList.map(function (obj) {
        return Object.assign({}, obj);
      });
      newTransferRightList[index].isChecked = checked;
      setTransferRightList(newTransferRightList);
    }
  };
  var handleClickSelectTip = function handleClickSelectTip(checked, e) {
    if (currentTabIndex === 0) {
      var newTransferLeftList = (0, _utils.checkAllData)(transferLeftList, checked);
      setTransferLeftList([].concat(newTransferLeftList));
    } else {
      var newTransferRightList = (0, _utils.checkAllData)(transferRightList, checked);
      setTransferRightList([].concat(newTransferRightList));
    }
  };
  var handleChangeButton = function handleChangeButton(e) {
    var tabsIndex = currentTabIndex === 0 ? 1 : 0;
    var startList = currentTabIndex === 0 ? transferLeftList : transferRightList;
    var endList = currentTabIndex === 0 ? transferRightList : transferLeftList;
    var _changeCheckedItem = (0, _utils.changeCheckedItem)(startList, endList),
      initList = _changeCheckedItem.initList,
      initValue = _changeCheckedItem.initValue,
      goalList = _changeCheckedItem.goalList,
      goalValue = _changeCheckedItem.goalValue,
      changeList = _changeCheckedItem.changeList,
      changeListValue = _changeCheckedItem.changeListValue;
    var leftData = currentTabIndex === 0 ? initList : goalList;
    var rightData = currentTabIndex === 0 ? goalList : initList;
    setTransferLeftList([].concat(leftData));
    setTransferRightList([].concat(rightData));
    setTabIndex(tabsIndex);
    if (onChange) {
      onChange(currentTabIndex === 0 ? goalValue : initValue, currentTabIndex === 0 ? goalList : initList, {
        leftValue: currentTabIndex === 0 ? initValue : goalValue,
        leftData: currentTabIndex === 0 ? initList : goalList,
        movedValue: changeListValue,
        movedData: changeList,
        redirection: currentTabIndex === 0 ? 'right' : 'left'
      });
    }
  };
  (0, _react.useEffect)(function () {
    if ('value' in props) {
      if (useStateLeft[0].toString() !== leftList.toString()) {
        setTransferLeftList(leftList);
      }
      if (useStateRight[0].toString() !== rightList.toString()) {
        setTransferRightList(rightList);
      }
    }
  }, [value, props.dataSource]);
  return /*#__PURE__*/(0, _react.createElement)(_view.default, _extends({}, others, {
    ref: ref,
    className: classNameObj.transferCls,
    style: (0, _babelRuntimeJsxStyleTransform.rpx2vw4style)(props.style)
  }), /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: classNameObj.tabCls
  }, /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: classNameObj.tabMainWrap
  }, titles.map(function (item, index) {
    return /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: currentTabIndex === index ? classNameObj.tabItemActiveCls : classNameObj.tabItemCls,
      key: index,
      onClick: function onClick(e) {
        return handleClickTab(e, item, index);
      }
    }, item);
  })), /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: classNameObj.tabIconWrapCls
  }, /*#__PURE__*/(0, _react.createElement)(_icon.default, {
    name: "switch",
    className: classNameObj.tabIconCls
  }))), /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: classNameObj.transferList
  }, listDataSize > 0 ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: classNameObj.transferTips
  }, /*#__PURE__*/(0, _react.createElement)(_checkbox.default, {
    size: "medium",
    disabled: disabledSize === listDataSize,
    checked: isCheckAll,
    indeterminate: !!(!isCheckAll && checkedSize > 0),
    onChange: function onChange(checked, e) {
      return handleClickSelectTip(checked, e);
    }
  }, checkedSize > 0 ? checkedSize + "/" : '', listDataSize, " ", selectItemText)) : null, /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: classNameObj.transferListScroll
  }, transferList.map(function (item, index) {
    return /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: classNameObj.transferItem,
      key: index
    }, /*#__PURE__*/(0, _react.createElement)(_checkbox.default, {
      size: "medium",
      className: classNameObj.checkbox,
      disabled: item.disabled,
      checked: item.isChecked,
      onChange: function onChange(checked, e) {
        return handleClickItem(checked, e, item, index);
      }
    }, item.label));
  }), listDataSize <= 0 ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: classNameObj.transferEmptyContent
  }, notFoundContent) : null)), /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: classNameObj.transferButton
  }, /*#__PURE__*/(0, _react.createElement)(_button.default, {
    type: "primary",
    size: "large",
    disabled: disabledSize === listDataSize || checkedSize === 0,
    fullWidth: true,
    onClick: function onClick(e) {
      return handleChangeButton(e);
    }
  }, buttonText, " ", transferButtonText)));
};
Transfer.displayName = 'Transfer';
var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(Transfer);