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

Fusion Mobile React UI System Component

import { rpx2vw4style as __rpx2vw__ } from "@alifd/babel-runtime-jsx-style-transform";
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); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { __rest } from "tslib";
import React, { createElement, forwardRef, useEffect, useState } from "react";
import classNames from 'classnames';
import View from '../view';
import Icon from '../icon';
import Button from '../button';
import Checkbox from '../checkbox';
import { changeCheckedItem, checkAllData, filterTransferValue, getDataStatus, setCheckedItem, setListDisabled } from './utils';
var Transfer = function Transfer(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 = __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 = useState(tabIndex),
    _useState2 = _slicedToArray(_useState, 2),
    currentTabIndex = _useState2[0],
    setTabIndex = _useState2[1];
  var _filterTransferValue = filterTransferValue(dataSource, rightValue),
    leftList = _filterTransferValue.leftList,
    rightList = _filterTransferValue.rightList;
  if ('defaultLeftChecked' in props) {
    leftList = setCheckedItem(leftList, defaultLeftChecked);
  }
  if ('defaultRightChecked' in props) {
    rightList = setCheckedItem(rightList, defaultRightChecked);
  }
  var useStateLeft = useState(leftList);
  var transferLeftList = useStateLeft[0];
  var setTransferLeftList = useStateLeft[1];
  var useStateRight = useState(rightList);
  var transferRightList = useStateRight[0];
  var setTransferRightList = useStateRight[1];
  if (leftDisabled) {
    transferLeftList = setListDisabled(transferLeftList);
  }
  if (rightDisabled) {
    transferRightList = setListDisabled(transferRightList);
  }
  if (disabled) {
    transferLeftList = setListDisabled(transferLeftList);
    transferRightList = setListDisabled(transferRightList);
  }
  var transferButtonText = currentTabIndex === 0 ? titles[1] : titles[0];
  var transferList = currentTabIndex === 0 ? transferLeftList : transferRightList;
  var _getDataStatus = getDataStatus(transferList),
    listDataSize = _getDataStatus.listDataSize,
    disabledSize = _getDataStatus.disabledSize,
    checkedSize = _getDataStatus.checkedSize,
    isCheckAll = _getDataStatus.isCheckAll;
  var prefix = 'mt-';
  var classNameObj = {
    transferCls: classNames("".concat(prefix, "transfer")),
    tabCls: classNames("".concat(prefix, "transfer-tab")),
    tabMainWrap: classNames("".concat(prefix, "transfer-tab-main")),
    tabItemCls: classNames("".concat(prefix, "transfer-tab-main-item")),
    tabIconWrapCls: classNames("".concat(prefix, "transfer-tab-icon-wrap")),
    tabIconCls: classNames("".concat(prefix, "transfer-tab-icon-wrap-icon")),
    tabItemActiveCls: classNames("".concat(prefix, "transfer-tab-main-item"), "".concat(prefix, "transfer-tab-main-item--selected")),
    transferList: classNames("".concat(prefix, "transfer-list"), "".concat(prefix, "transfer-list--selected")),
    transferItem: classNames("".concat(prefix, "transfer-list-item")),
    transferTips: classNames("".concat(prefix, "transfer-select-tip")),
    checkbox: classNames("".concat(prefix, "transfer-checkbox")),
    transferListScroll: classNames("".concat(prefix, "transfer-list-scroll")),
    transferEmptyContent: classNames("".concat(prefix, "transfer-empty-content")),
    transferButton: classNames("".concat(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 = checkAllData(transferLeftList, checked);
      setTransferLeftList(_toConsumableArray(newTransferLeftList));
    } else {
      var newTransferRightList = checkAllData(transferRightList, checked);
      setTransferRightList(_toConsumableArray(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 = 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(_toConsumableArray(leftData));
    setTransferRightList(_toConsumableArray(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'
      });
    }
  };
  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__*/React.createElement(View, _extends({}, others, {
    ref: ref,
    className: classNameObj.transferCls,
    style: __rpx2vw__(props.style)
  }), /*#__PURE__*/React.createElement(View, {
    className: classNameObj.tabCls
  }, /*#__PURE__*/React.createElement(View, {
    className: classNameObj.tabMainWrap
  }, titles.map(function (item, index) {
    return /*#__PURE__*/React.createElement(View, {
      className: currentTabIndex === index ? classNameObj.tabItemActiveCls : classNameObj.tabItemCls,
      key: index,
      onClick: function onClick(e) {
        return handleClickTab(e, item, index);
      }
    }, item);
  })), /*#__PURE__*/React.createElement(View, {
    className: classNameObj.tabIconWrapCls
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "switch",
    className: classNameObj.tabIconCls
  }))), /*#__PURE__*/React.createElement(View, {
    className: classNameObj.transferList
  }, listDataSize > 0 ? /*#__PURE__*/React.createElement(View, {
    className: classNameObj.transferTips
  }, /*#__PURE__*/React.createElement(Checkbox, {
    size: "medium",
    disabled: disabledSize === listDataSize,
    checked: isCheckAll,
    indeterminate: !!(!isCheckAll && checkedSize > 0),
    onChange: function onChange(checked, e) {
      return handleClickSelectTip(checked, e);
    }
  }, checkedSize > 0 ? "".concat(checkedSize, "/") : '', listDataSize, " ", selectItemText)) : null, /*#__PURE__*/React.createElement(View, {
    className: classNameObj.transferListScroll
  }, transferList.map(function (item, index) {
    return /*#__PURE__*/React.createElement(View, {
      className: classNameObj.transferItem,
      key: index
    }, /*#__PURE__*/React.createElement(Checkbox, {
      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__*/React.createElement(View, {
    className: classNameObj.transferEmptyContent
  }, notFoundContent) : null)), /*#__PURE__*/React.createElement(View, {
    className: classNameObj.transferButton
  }, /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    size: "large",
    disabled: disabledSize === listDataSize || checkedSize === 0,
    fullWidth: true,
    onClick: function onClick(e) {
      return handleChangeButton(e);
    }
  }, buttonText, " ", transferButtonText)));
};
Transfer.displayName = 'Transfer';
export default /*#__PURE__*/forwardRef(Transfer);