UNPKG

tdesign-react

Version:
532 lines (524 loc) 22.1 kB
/** * tdesign v1.15.1 * (c) 2025 tdesign * @license MIT */ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var defineProperty = require('../_chunks/dep-0006fcfa.js'); var toConsumableArray = require('../_chunks/dep-e4e1901e.js'); var slicedToArray = require('../_chunks/dep-8e4d656d.js'); var React = require('react'); var classNames = require('classnames'); var tdesignIconsReact = require('tdesign-icons-react'); var hooks_useConfig = require('../hooks/useConfig.js'); var hooks_useGlobalIcon = require('../hooks/useGlobalIcon.js'); var button_index = require('../button/index.js'); var transfer_TransferList = require('./TransferList.js'); var transfer_utils = require('./utils.js'); var locale_LocalReceiver = require('../locale/LocalReceiver.js'); var transfer_defaultProps = require('./defaultProps.js'); var hooks_useDefaultProps = require('../hooks/useDefaultProps.js'); var isArray = require('../_chunks/dep-64577888.js'); var difference = require('../_chunks/dep-0192b053.js'); require('../_chunks/dep-667ac7af.js'); require('../_chunks/dep-00b49251.js'); require('../config-provider/ConfigContext.js'); require('../_chunks/dep-1df1dad8.js'); require('../_chunks/dep-5b5ab11b.js'); require('dayjs'); require('../_chunks/dep-f32c03f1.js'); require('../_chunks/dep-31c4bc3d.js'); require('../_chunks/dep-eea2872a.js'); require('../_chunks/dep-25585736.js'); require('../_chunks/dep-62e73936.js'); require('../_chunks/dep-71455db7.js'); require('../_chunks/dep-9e5a468d.js'); require('../_chunks/dep-ec8d2dca.js'); require('../_chunks/dep-fc596d16.js'); require('../_chunks/dep-f26edb7b.js'); require('../_chunks/dep-f33c1939.js'); require('../_chunks/dep-21ece627.js'); require('../_chunks/dep-25e4aa84.js'); require('../_chunks/dep-e1fbe1c3.js'); require('../_chunks/dep-df2b541f.js'); require('../_chunks/dep-edd366db.js'); require('../_chunks/dep-a56c4939.js'); require('../_chunks/dep-6c297e20.js'); require('../_chunks/dep-b7ad4d54.js'); require('../_chunks/dep-a2cb9299.js'); require('../_chunks/dep-f981815b.js'); require('../button/Button.js'); require('../_chunks/dep-8fa3a4c2.js'); require('../hooks/useDomRefCallback.js'); require('../hooks/useRipple.js'); require('../_chunks/dep-dc4ce063.js'); require('../hooks/useAnimation.js'); require('../_chunks/dep-381fa848.js'); require('../_chunks/dep-4ed9eda4.js'); require('../loading/index.js'); require('../loading/Loading.js'); require('../common/Portal.js'); require('react-dom'); require('../hooks/useLayoutEffect.js'); require('../loading/gradient.js'); require('../_chunks/dep-002fcc1e.js'); require('../_chunks/dep-2ffa3ff1.js'); require('../loading/defaultProps.js'); require('../loading/plugin.js'); require('../_util/react-render.js'); require('../_chunks/dep-65ef8e09.js'); require('../common/PluginContainer.js'); require('../config-provider/ConfigProvider.js'); require('../_chunks/dep-ab2f63ec.js'); require('../_chunks/dep-a48c7e8b.js'); require('../_chunks/dep-3d4656ee.js'); require('../_chunks/dep-0ffc9d96.js'); require('../_chunks/dep-efe6d243.js'); require('../_chunks/dep-4b18243f.js'); require('../_chunks/dep-bff2c990.js'); require('../button/defaultProps.js'); require('../_util/parseTNode.js'); require('../_chunks/dep-59671c87.js'); require('../checkbox/index.js'); require('../_chunks/dep-e136a981.js'); require('../_util/forwardRefWithStatics.js'); require('hoist-non-react-statics'); require('../common/Check.js'); require('../_util/helper.js'); require('../_chunks/dep-840b1644.js'); require('../_chunks/dep-255ceed8.js'); require('../_chunks/dep-79629634.js'); require('../_chunks/dep-66114ce9.js'); require('../_chunks/dep-62d1dd66.js'); require('../_chunks/dep-7a148045.js'); require('../hooks/useControlled.js'); require('../_util/noop.js'); require('../_chunks/dep-c16f1dc4.js'); require('../checkbox/defaultProps.js'); require('../input/index.js'); require('../input/Input.js'); require('../input/InputGroup.js'); require('../input/defaultProps.js'); require('../input/useLengthLimit.js'); require('../pagination/index.js'); require('../pagination/Pagination.js'); require('../select/index.js'); require('../select/base/Select.js'); require('../_util/composeRefs.js'); require('../common/FakeArrow.js'); require('../select-input/index.js'); require('../select-input/SelectInput.js'); require('../popup/index.js'); require('../popup/Popup.js'); require('react-transition-group'); require('../_util/ref.js'); require('react-is'); require('../_util/isFragment.js'); require('../hooks/useAttach.js'); require('../hooks/useMutationObserver.js'); require('../hooks/useLatest.js'); require('../_chunks/dep-eb6d55c1.js'); require('../_chunks/dep-014b9b78.js'); require('../_chunks/dep-abdd786a.js'); require('../_chunks/dep-a231fdc5.js'); require('../_chunks/dep-cf14666e.js'); require('../hooks/usePopper.js'); require('@popperjs/core'); require('react-fast-compare'); require('../hooks/useWindowSize.js'); require('../popup/defaultProps.js'); require('../popup/hooks/useTrigger.js'); require('../_util/listener.js'); require('../popup/utils/transition.js'); require('../popup/PopupPlugin.js'); require('../select-input/useSingle.js'); require('../_chunks/dep-1e4197a4.js'); require('../_chunks/dep-3398c1f2.js'); require('../_chunks/dep-e57bdc8f.js'); require('../_chunks/dep-22b1740a.js'); require('../_chunks/dep-373af7a2.js'); require('../_chunks/dep-fc29b8b5.js'); require('../select-input/useMultiple.js'); require('../tag-input/index.js'); require('../tag-input/TagInput.js'); require('../hooks/useDragSorter.js'); require('../hooks/useEventCallback.js'); require('../tag-input/defaultProps.js'); require('../tag-input/useHover.js'); require('../tag-input/useTagList.js'); require('../tag/index.js'); require('../tag/Tag.js'); require('../_chunks/dep-4d5c26af.js'); require('../tag/defaultProps.js'); require('../tag/CheckTag.js'); require('../_chunks/dep-4406837c.js'); require('../tag/CheckTagGroup.js'); require('../tag-input/useTagScroll.js'); require('../select-input/useOverlayInnerStyle.js'); require('../select-input/defaultProps.js'); require('../select/defaultProps.js'); require('../_chunks/dep-e83bd2ab.js'); require('../select/base/OptionGroup.js'); require('../select/base/Option.js'); require('../_chunks/dep-0c8c9057.js'); require('../select/base/PopupContent.js'); require('../select/hooks/usePanelVirtualScroll.js'); require('../hooks/useVirtualScroll.js'); require('../input-number/index.js'); require('../input-number/InputNumber.js'); require('../input-number/useInputNumber.js'); require('../_chunks/dep-e75d22fc.js'); require('../_chunks/dep-221787fe.js'); require('../hooks/useCommonClassName.js'); require('../input-number/defaultProps.js'); require('../input-adornment/InputAdornment.js'); require('../pagination/hooks/useBoundaryJumper.js'); require('../pagination/hooks/usePrevNextJumper.js'); require('../pagination/hooks/usePageNumber.js'); require('../pagination/hooks/useTotal.js'); require('../pagination/validators.js'); require('../pagination/defaultProps.js'); require('../_chunks/dep-d5e8c967.js'); require('../_chunks/dep-9a375a19.js'); require('../_chunks/dep-d915c90f.js'); require('../pagination/PaginationMini.js'); require('../_chunks/dep-6283cbd9.js'); require('../_chunks/dep-40e87384.js'); require('../_chunks/dep-297a4933.js'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var React__default = /*#__PURE__*/_interopDefaultLegacy(React); var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames); function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { defineProperty._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } var Transfer = function Transfer(originalProps) { var props = hooks_useDefaultProps["default"](originalProps, transfer_defaultProps.transferDefaultProps); var data = props.data, search = props.search, checked = props.checked, defaultChecked = props.defaultChecked, onCheckedChange = props.onCheckedChange, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, empty = props.empty, disabled = props.disabled, pagination = props.pagination, title = props.title, operation = props.operation, footer = props.footer, transferItem = props.transferItem, content = props.content, tree = props.tree, showCheckAll = props.showCheckAll, _props$direction = props.direction, direction = _props$direction === void 0 ? "both" : _props$direction; var _useState = React.useState(function () { return { source: data.filter(function (item) { return !defaultValue.includes(item.value); }), target: data.filter(function (item) { return defaultValue.includes(item.value); }) }; }), _useState2 = slicedToArray._slicedToArray(_useState, 2), state = _useState2[0], setState = _useState2[1]; var _useState3 = React.useState(function () { return { source: state.source.filter(function (item) { return !item.disabled && defaultChecked.includes(item.value); }).map(function (item) { return item.value; }), target: state.target.filter(function (item) { return !item.disabled && defaultChecked.includes(item.value); }).map(function (item) { return item.value; }) }; }), _useState4 = slicedToArray._slicedToArray(_useState3, 2), checkeds = _useState4[0], setCheckeds = _useState4[1]; var _useState5 = React.useState({ source: "", target: "" }), _useState6 = slicedToArray._slicedToArray(_useState5, 2), searchState = _useState6[0], setSearchState = _useState6[1]; var isTargetControlled = "value" in props; var isCheckedControlled = "checked" in props; var _useConfig = hooks_useConfig["default"](), classPrefix = _useConfig.classPrefix; var _useGlobalIcon = hooks_useGlobalIcon["default"]({ ChevronLeftIcon: tdesignIconsReact.ChevronLeftIcon, ChevronRightIcon: tdesignIconsReact.ChevronRightIcon }), ChevronRightIcon = _useGlobalIcon.ChevronRightIcon, ChevronLeftIcon = _useGlobalIcon.ChevronLeftIcon; var transferClassName = "".concat(classPrefix, "-transfer"); var _useLocaleReceiver = locale_LocalReceiver.useLocaleReceiver("transfer"), _useLocaleReceiver2 = slicedToArray._slicedToArray(_useLocaleReceiver, 2), local = _useLocaleReceiver2[0], t = _useLocaleReceiver2[1]; var _useMemo = React.useMemo(function () { var source = state.source, target = state.target; var searchSource = searchState.source, searchTarget = searchState.target; return [source.filter(function (item) { return !searchSource || item.label.indexOf(searchState.source) > -1; }), target.filter(function (item) { return !searchTarget || item.label.indexOf(searchState.target) > -1; })]; }, [searchState, state]), _useMemo2 = slicedToArray._slicedToArray(_useMemo, 2), sourceData = _useMemo2[0], targetData = _useMemo2[1]; var _getDefaultValue$map = transfer_utils.getDefaultValue(empty, t(local.empty)).map(function (item) { return transfer_utils.getJSX(item); }), _getDefaultValue$map2 = slicedToArray._slicedToArray(_getDefaultValue$map, 2), SourceEmptyCmp = _getDefaultValue$map2[0], TargetEmptyCmp = _getDefaultValue$map2[1]; var sourceDisabled = isArray.isArray(disabled) ? disabled[0] : disabled; var targetDisabled = isArray.isArray(disabled) ? disabled[1] : disabled; var _getDefaultValue = transfer_utils.getDefaultValue(pagination), _getDefaultValue2 = slicedToArray._slicedToArray(_getDefaultValue, 2), sourcePagination = _getDefaultValue2[0], targetPagination = _getDefaultValue2[1]; var _getDefaultValue$map3 = transfer_utils.getDefaultValue(title).map(function (item) { return transfer_utils.getJSX(item); }), _getDefaultValue$map4 = slicedToArray._slicedToArray(_getDefaultValue$map3, 2), sourceTitle = _getDefaultValue$map4[0], targetTitle = _getDefaultValue$map4[1]; var _getDefaultValue$map5 = transfer_utils.getDefaultValue(operation, [function () { return /* @__PURE__ */React__default["default"].createElement(ChevronRightIcon, null); }, function () { return /* @__PURE__ */React__default["default"].createElement(ChevronLeftIcon, null); }]).map(function (item) { return transfer_utils.getJSX(item); }), _getDefaultValue$map6 = slicedToArray._slicedToArray(_getDefaultValue$map5, 2), leftOperation = _getDefaultValue$map6[0], rightOperation = _getDefaultValue$map6[1]; var _getDefaultValue$map7 = transfer_utils.getDefaultValue(footer).map(function (item) { return transfer_utils.getJSX(item); }), _getDefaultValue$map8 = slicedToArray._slicedToArray(_getDefaultValue$map7, 2), sourceFooter = _getDefaultValue$map8[0], targetFooter = _getDefaultValue$map8[1]; var _getDefaultValue3 = transfer_utils.getDefaultValue(content), _getDefaultValue4 = slicedToArray._slicedToArray(_getDefaultValue3, 2), sourceContent = _getDefaultValue4[0], targetContent = _getDefaultValue4[1]; var _useMemo3 = React.useMemo(function () { var _showCheckAll$, _showCheckAll$2; return Array.isArray(showCheckAll) ? [(_showCheckAll$ = showCheckAll[0]) !== null && _showCheckAll$ !== void 0 ? _showCheckAll$ : true, (_showCheckAll$2 = showCheckAll[1]) !== null && _showCheckAll$2 !== void 0 ? _showCheckAll$2 : true] : [showCheckAll, showCheckAll]; }, [showCheckAll]), _useMemo4 = slicedToArray._slicedToArray(_useMemo3, 2), showCheckAllSource = _useMemo4[0], showCheckAllTarget = _useMemo4[1]; var transformSource = function transformSource() { var source = state.source, target = state.target; var sourceCheckeds = source.filter(function (item) { return checkeds.source.includes(item.value); }); var newSource = difference.difference(source, sourceCheckeds); var newTarget = [].concat(toConsumableArray._toConsumableArray(target), toConsumableArray._toConsumableArray(sourceCheckeds)); var newTargetValue = newTarget.map(function (t2) { return t2.value; }); if (tree) { newSource = transfer_utils.filterCheckedTreeNodes(source, checkeds.source); newTarget = transfer_utils.getTargetNodes(newSource, data); newTargetValue = transfer_utils.getLeafNodes(newTarget).map(function (t2) { return t2.value; }); } if (isTargetControlled) { onChange === null || onChange === void 0 || onChange(newTargetValue, { type: "source", movedValue: sourceCheckeds.map(function (s) { return s.value; }) }); } else { setState(_objectSpread(_objectSpread({}, state), {}, { source: newSource, target: toConsumableArray._toConsumableArray(newTarget) })); setCheckeds(_objectSpread(_objectSpread({}, checkeds), {}, { source: [] })); } }; var transformTarget = function transformTarget() { var source = state.source, target = state.target; var targetCheckeds = target.filter(function (item) { return checkeds.target.includes(item.value); }); var newSource = [].concat(toConsumableArray._toConsumableArray(source), toConsumableArray._toConsumableArray(targetCheckeds)); var newTarget = difference.difference(target, targetCheckeds); var newTargetValue = newTarget.map(function (t2) { return t2.value; }); if (tree) { newTarget = transfer_utils.filterCheckedTreeNodes(target, checkeds.target); newSource = transfer_utils.getTargetNodes(newTarget, data); newTargetValue = transfer_utils.getLeafNodes(newTarget).map(function (t2) { return t2.value; }); } if (isTargetControlled) { onChange === null || onChange === void 0 || onChange(newTargetValue, { type: "target", movedValue: targetCheckeds.map(function (s) { return s.value; }) }); } else { setState(_objectSpread(_objectSpread({}, state), {}, { source: newSource, target: newTarget })); setCheckeds(_objectSpread(_objectSpread({}, checkeds), {}, { target: [] })); } }; var OperationsCmp = function OperationsCmp() { var isSourceDisabled = sourceDisabled || !checkeds.source.length; var isTargetDisabled = targetDisabled || !checkeds.target.length; var isToRightShow = direction !== "left"; var isToLeftShow = direction !== "right"; return /* @__PURE__ */React__default["default"].createElement("div", { className: "".concat(transferClassName, "__operations") }, isToRightShow && /* @__PURE__ */React__default["default"].createElement(button_index.Button, { size: "small", key: isSourceDisabled ? "right-outline" : "right-base", variant: "outline", disabled: isSourceDisabled, onClick: transformSource }, leftOperation), isToLeftShow && /* @__PURE__ */React__default["default"].createElement(button_index.Button, { size: "small", key: isSourceDisabled ? "left-outline" : "left-base", variant: "outline", disabled: isTargetDisabled, onClick: transformTarget }, rightOperation)); }; var handleCheckChange = function handleCheckChange(value2, type) { var sourceChecked = checkeds.source, targetChecked = checkeds.target; var inverseMap = { source: "target", target: "source" }; isCheckedControlled ? onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange({ type: type, checked: value2.concat(checkeds[inverseMap[type]]), sourceChecked: sourceChecked, targetChecked: targetChecked }) : setCheckeds(_objectSpread(_objectSpread({}, checkeds), {}, defineProperty._defineProperty({}, type, value2))); }; React.useEffect(function () { if (isTargetControlled && Array.isArray(value)) { var newTarget = data.filter(function (item) { return value.includes(item.value); }); var newSource = difference.difference(data, newTarget); if (tree) { newSource = transfer_utils.filterCheckedTreeNodes(data, value); newTarget = transfer_utils.getTargetNodes(newSource, data); } setState({ source: toConsumableArray._toConsumableArray(newSource), target: toConsumableArray._toConsumableArray(newTarget) }); setCheckeds({ source: [], target: [] }); } }, [value, data, isTargetControlled, tree]); React.useEffect(function () { var source = state.source, target = state.target; if (isCheckedControlled && Array.isArray(checked)) { var newSourceChecked = source.filter(function (item) { return !item.disabled && checked.includes(item.value); }).map(function (item) { return item.value; }); var newTargetChecked = target.filter(function (item) { return !item.disabled && checked.includes(item.value); }).map(function (item) { return item.value; }); setCheckeds({ source: newSourceChecked, target: newTargetChecked }); } }, [checked, state, isCheckedControlled]); return /* @__PURE__ */React__default["default"].createElement("div", { className: classNames__default["default"](transferClassName, defineProperty._defineProperty(defineProperty._defineProperty(defineProperty._defineProperty(defineProperty._defineProperty({}, "".concat(transferClassName, "__search"), search), "".concat(transferClassName, "__pagination"), pagination), "".concat(transferClassName, "__footer"), footer), "".concat(transferClassName, "--with-tree"), tree)) }, /* @__PURE__ */React__default["default"].createElement(transfer_TransferList["default"], { className: "".concat(transferClassName, "__list-source"), listType: "source", data: sourceData, search: search, checked: checkeds.source, empty: SourceEmptyCmp, disabled: sourceDisabled, pagination: sourcePagination, title: sourceTitle, footer: sourceFooter, transferItem: transferItem, content: sourceContent, onCheckbox: function onCheckbox(value2) { return handleCheckChange(value2, "source"); }, onSearch: function onSearch(val) { return setSearchState(_objectSpread(_objectSpread({}, searchState), {}, { source: val })); }, tree: tree, showCheckAll: showCheckAllSource }), OperationsCmp(), /* @__PURE__ */React__default["default"].createElement(transfer_TransferList["default"], { className: "".concat(transferClassName, "__list-target"), listType: "target", data: targetData, search: search, checked: checkeds.target, empty: TargetEmptyCmp, disabled: targetDisabled, pagination: targetPagination, title: targetTitle, footer: targetFooter, transferItem: transferItem, content: targetContent, onCheckbox: function onCheckbox(value2) { return handleCheckChange(value2, "target"); }, onSearch: function onSearch(val) { return setSearchState(_objectSpread(_objectSpread({}, searchState), {}, { target: val })); }, tree: tree, showCheckAll: showCheckAllTarget })); }; Transfer.displayName = "Transfer"; exports["default"] = Transfer; //# sourceMappingURL=Transfer.js.map