UNPKG

@ucloud-fe/react-components

Version:
578 lines (471 loc) 21.7 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _typeof = require("@babel/runtime/helpers/typeof"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits")); var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn")); var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf")); var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck")); var _groupBy2 = _interopRequireDefault(require("lodash/groupBy")); var _debounce2 = _interopRequireDefault(require("lodash/debounce")); var _filter2 = _interopRequireDefault(require("lodash/filter")); var _map2 = _interopRequireDefault(require("lodash/map")); var _react = _interopRequireWildcard(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); var _classnames = _interopRequireDefault(require("classnames")); var _Button = _interopRequireDefault(require("../../components/Button")); var _Notice = _interopRequireDefault(require("../../components/Notice")); var _Input = _interopRequireDefault(require("../../components/Input")); var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon")); var _uncontrolled = _interopRequireDefault(require("../../decorators/uncontrolled")); var _localeConsumerDecorator = _interopRequireDefault(require("../../components/LocaleProvider/localeConsumerDecorator")); var _zh_CN = _interopRequireDefault(require("./locale/zh_CN")); var _style = require("./style"); var _excluded = ["className", "dataSource", "source", "target", "onChange", "selectedKeys", "search", "disabled"]; var _this = void 0, _dec, _dec2, _class, _class2, _temp; function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } 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(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } var noop = function noop() { (0, _newArrowCheck2.default)(this, _this); }.bind(void 0); var Shape = { /** * 自定义顶栏文字,null 时隐藏 */ title: _propTypes.default.node, /** * 自定义底栏 */ footer: _propTypes.default.node, /** * 是否展示搜索框,可以为 boolean 或者 Object * 为 Object 时可传入 handleSearch 对搜索筛选进行自定义 */ search: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape({ /** * @argument searchValue - 搜索的值 * @argument item - 当前匹配的项 * @return 匹配结果 */ handleSearch: _propTypes.default.func })]), /** * 禁用 */ disabled: _propTypes.default.bool }; var defaultSearchHandle = function defaultSearchHandle(searchValue, item) { (0, _newArrowCheck2.default)(this, _this); return (0, _map2.default)(item).join('').indexOf(searchValue) >= 0; }.bind(void 0); var Transfer = (_dec = (0, _uncontrolled.default)({ valueName: 'selectedKeys' }), _dec2 = (0, _localeConsumerDecorator.default)({ defaultLocale: _zh_CN.default, localeName: 'Transfer' }), _dec(_class = _dec2(_class = (_temp = _class2 = /*#__PURE__*/function (_PureComponent) { (0, _inherits2.default)(Transfer, _PureComponent); var _super = _createSuper(Transfer); function Transfer(_props) { var _this3 = this; var _this2; (0, _classCallCheck2.default)(this, Transfer); _this2 = _super.call(this, _props); _this2.state = { sourceSelectedKeys: [], targetSelectedKeys: [], dataSourceGroup: {} }; _this2.onSelectedChange = function (type, keys) { (0, _newArrowCheck2.default)(this, _this3); _this2.setState((0, _defineProperty2.default)({}, "".concat(type, "SelectedKeys"), keys)); }.bind(this); _this2.onSourceSelectedChange = function (keys) { (0, _newArrowCheck2.default)(this, _this3); _this2.onSelectedChange('source', keys); }.bind(this); _this2.onTargetSelectedChange = function (keys) { (0, _newArrowCheck2.default)(this, _this3); _this2.onSelectedChange('target', keys); }.bind(this); _this2.transfer = function (type) { var _this4 = this; (0, _newArrowCheck2.default)(this, _this3); var _this2$state = _this2.state, sourceSelectedKeys = _this2$state.sourceSelectedKeys, targetSelectedKeys = _this2$state.targetSelectedKeys; var _this2$props = _this2.props, selectedKeys = _this2$props.selectedKeys, onChange = _this2$props.onChange; if (type === 'source') { _this2.setState({ sourceSelectedKeys: [] }); onChange([].concat((0, _toConsumableArray2.default)(selectedKeys), (0, _toConsumableArray2.default)(sourceSelectedKeys))); } else { _this2.setState({ targetSelectedKeys: [] }); onChange((0, _filter2.default)(selectedKeys, function (key) { var _this5 = this; (0, _newArrowCheck2.default)(this, _this4); return targetSelectedKeys.find(function (_key) { (0, _newArrowCheck2.default)(this, _this5); return key === _key; }.bind(this)) === undefined; }.bind(this))); } }.bind(this); _this2.handleSearch = function (type, item) { (0, _newArrowCheck2.default)(this, _this3); var _this2$props2 = _this2.props, source = _this2$props2.source, target = _this2$props2.target, sharedSearch = _this2$props2.search; var _this2$state2 = _this2.state, sourceSearchValue = _this2$state2.sourceSearchValue, targetSearchValue = _this2$state2.targetSearchValue; var searchValue = type === 'source' ? sourceSearchValue : targetSearchValue; if (!searchValue) return true; var props = _objectSpread(_objectSpread({}, { search: sharedSearch }), type === 'source' ? source : target); var search = props.search; if (!search) return true; var handleSearch = search.handleSearch; return handleSearch ? handleSearch(searchValue, item) : defaultSearchHandle(searchValue, item); }.bind(this); _this2.handleSourceSearch = function (item) { (0, _newArrowCheck2.default)(this, _this3); return _this2.handleSearch('source', item); }.bind(this); _this2.handleTargetSearch = function (item) { (0, _newArrowCheck2.default)(this, _this3); return _this2.handleSearch('target', item); }.bind(this); _this2.setSourceSearchValue = (0, _debounce2.default)(function (v) { (0, _newArrowCheck2.default)(this, _this3); _this2.setState({ sourceSearchValue: v }); }.bind(this), 200); _this2.setTargetSearchValue = (0, _debounce2.default)(function (v) { (0, _newArrowCheck2.default)(this, _this3); _this2.setState({ targetSearchValue: v }); }.bind(this), 200); _this2.onSourceSearch = function (e) { (0, _newArrowCheck2.default)(this, _this3); var v; if (typeof e === 'string') { v = e; } else if (!e || !e.target) { return; } else { v = e.target.value; } _this2.setSourceSearchValue(v); }.bind(this); _this2.onTargetSearch = function (e) { (0, _newArrowCheck2.default)(this, _this3); var v; if (typeof e === 'string') { v = e; } else if (!e || !e.target) { return; } else { v = e.target.value; } _this2.setTargetSearchValue(v); }.bind(this); _this2.clearSourceSearch = function () { (0, _newArrowCheck2.default)(this, _this3); _this2.setState({ sourceSearchValue: '' }); }.bind(this); _this2.clearTargetSearch = function () { (0, _newArrowCheck2.default)(this, _this3); _this2.setState({ targetSearchValue: '' }); }.bind(this); _this2.renderPart = function (part) { (0, _newArrowCheck2.default)(this, _this3); var _this2$state3 = _this2.state, dataSourceGroup = _this2$state3.dataSourceGroup, sourceSelectedKeys = _this2$state3.sourceSelectedKeys, targetSelectedKeys = _this2$state3.targetSelectedKeys; var _this2$props3 = _this2.props, source = _this2$props3.source, target = _this2$props3.target, sharedSearch = _this2$props3.search, sharedDisabled = _this2$props3.disabled, locale = _this2$props3.locale; var partDataSource = dataSourceGroup[part] || []; var partProps = _objectSpread({ search: sharedSearch, disabled: sharedDisabled }, part === 'source' ? source : target); var footer = partProps.footer, title = partProps.title, search = partProps.search, disabled = partProps.disabled; var selectedKeys = part === 'source' ? sourceSelectedKeys : targetSelectedKeys; var handleSearch = part === 'source' ? _this2.handleSourceSearch : _this2.handleTargetSearch; var onSelectedChange = part === 'source' ? _this2.onSourceSelectedChange : _this2.onTargetSelectedChange; var onSearch = part === 'source' ? _this2.onSourceSearch : _this2.onTargetSearch; return /*#__PURE__*/_react.default.createElement("div", { className: (0, _classnames.default)(_style.partWrapCls, disabled && _style.disabledCls) }, title === null ? null : /*#__PURE__*/_react.default.createElement("h3", { className: _style.titleCls }, title ? title : { source: locale.sourceTitle, target: locale.targetTitle }[part]), /*#__PURE__*/_react.default.createElement("div", { className: _style.partContentCls }, search && /*#__PURE__*/_react.default.createElement("div", { className: _style.searchCls }, /*#__PURE__*/_react.default.createElement(_Input.default.Search, { block: true, onSearch: onSearch, onChange: onSearch, disabled: disabled, status: "default" })), _this2.renderContent({ part: part, dataSource: partDataSource, selectedKeys: selectedKeys, onChange: onSelectedChange, handleSearch: handleSearch, disabled: disabled }), footer && /*#__PURE__*/_react.default.createElement("div", { className: _style.footerCls }, footer))); }.bind(this); _this2.renderEmptySourceTip = function (disabled) { (0, _newArrowCheck2.default)(this, _this3); var locale = _this2.props.locale; return /*#__PURE__*/_react.default.createElement("div", { className: _style.tipWrapCls }, /*#__PURE__*/_react.default.createElement(_Notice.default, { closable: false, styleType: disabled ? 'disabled' : 'default', icon: null }, locale.emptySourceTip)); }.bind(this); _this2.renderEmptyTargetTip = function (disabled) { (0, _newArrowCheck2.default)(this, _this3); var locale = _this2.props.locale; return /*#__PURE__*/_react.default.createElement("div", { className: _style.tipWrapCls }, /*#__PURE__*/_react.default.createElement(_Notice.default, { closable: false, styleType: disabled ? 'disabled' : 'default' }, locale.emptyTargetTip)); }.bind(this); _this2.renderEmptySearchTip = function (part) { (0, _newArrowCheck2.default)(this, _this3); var locale = _this2.props.locale; return /*#__PURE__*/_react.default.createElement("div", { className: _style.tipWrapCls }, /*#__PURE__*/_react.default.createElement(_Notice.default, { closable: false, styleType: "warning" }, /*#__PURE__*/_react.default.createElement("span", null, locale.emptySearchTip), /*#__PURE__*/_react.default.createElement("span", { className: _style.searchClearBtnCls, onClick: part === 'source' ? _this2.clearSourceSearch : _this2.clearTargetSearch }, locale.resetSearch))); }.bind(this); _this2.renderContent = function (_ref) { var _this6 = this; (0, _newArrowCheck2.default)(this, _this3); var part = _ref.part, dataSource = _ref.dataSource, selectedKeys = _ref.selectedKeys, onChange = _ref.onChange, handleSearch = _ref.handleSearch, disabled = _ref.disabled; if (!dataSource.length) { return part === 'source' ? _this2.renderEmptySourceTip(disabled) : _this2.renderEmptyTargetTip(disabled); } var finalDataSource = dataSource.filter(function (item) { (0, _newArrowCheck2.default)(this, _this6); return handleSearch(item); }.bind(this)); if (!finalDataSource.length) { return _this2.renderEmptySearchTip(part); } var renderList = _this2.props.renderList; return /*#__PURE__*/_react.default.createElement("div", { className: _style.listWrapCls }, renderList({ dataSource: finalDataSource, selectedKeys: selectedKeys, disabled: disabled, onChange: onChange })); }.bind(this); _this2.renderAction = function () { var _this7 = this; (0, _newArrowCheck2.default)(this, _this3); var disabled = _this2.props.disabled; var _this2$state4 = _this2.state, sourceSelectedKeys = _this2$state4.sourceSelectedKeys, targetSelectedKeys = _this2$state4.targetSelectedKeys; return /*#__PURE__*/_react.default.createElement("div", { className: _style.actionWrapCls }, /*#__PURE__*/_react.default.createElement("div", { className: _style.actionCls }, /*#__PURE__*/_react.default.createElement(_Button.default, { styleType: "primary", shape: "square", disabled: disabled || !sourceSelectedKeys.length, onClick: function () { (0, _newArrowCheck2.default)(this, _this7); return _this2.transfer('source'); }.bind(this) }, /*#__PURE__*/_react.default.createElement(_SvgIcon.default, { type: "arrow-right" }))), /*#__PURE__*/_react.default.createElement("div", { className: _style.actionCls }, /*#__PURE__*/_react.default.createElement(_Button.default, { styleType: "primary", shape: "square", disabled: disabled || !targetSelectedKeys.length, onClick: function () { (0, _newArrowCheck2.default)(this, _this7); return _this2.transfer('target'); }.bind(this) }, /*#__PURE__*/_react.default.createElement(_SvgIcon.default, { type: "arrow-left" })))); }.bind(this); _this2.groupDataSource = function () { var _this8 = this; var dataSource = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; var selectedKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; return (0, _groupBy2.default)(dataSource, function (item) { var _this9 = this; (0, _newArrowCheck2.default)(this, _this8); var key = item.key; return selectedKeys.find(function (selectedKey) { (0, _newArrowCheck2.default)(this, _this9); return selectedKey === key; }.bind(this)) !== undefined ? 'target' : 'source'; }.bind(this)); }; var _dataSource = _props.dataSource, _selectedKeys = _props.selectedKeys; _this2.state.dataSourceGroup = _this2.groupDataSource(_dataSource, _selectedKeys); return _this2; } (0, _createClass2.default)(Transfer, [{ key: "componentWillReceiveProps", value: function componentWillReceiveProps(nextProps) { if (nextProps.dataSource !== this.props.dataSource || nextProps.selectedKeys !== this.props.selectedKeys) { this.setState({ dataSourceGroup: this.groupDataSource(nextProps.dataSource, nextProps.selectedKeys) }); } } }, { key: "render", value: function render() { /* eslint-disable no-unused-vars */ var _this$props = this.props, className = _this$props.className, dataSource = _this$props.dataSource, source = _this$props.source, target = _this$props.target, onChange = _this$props.onChange, selectedKeys = _this$props.selectedKeys, search = _this$props.search, disabled = _this$props.disabled, rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded); /* eslint-enable no-unused-vars */ return /*#__PURE__*/_react.default.createElement(_style.TransferWrap, (0, _extends2.default)({}, rest, { className: (0, _classnames.default)(_style.prefixCls, className) }), this.renderPart('source'), this.renderAction(), this.renderPart('target')); } }]); return Transfer; }(_react.PureComponent), _class2.propTypes = { /** * 所有的数据源 */ dataSource: _propTypes.default.array.isRequired, /** * 自定义渲染列表 */ renderList: _propTypes.default.func.isRequired, /** * 已选中的数据 key,受控 */ selectedKeys: _propTypes.default.array, /** * 默认已选中的数据 key,非受控 */ defaultSelectedKeys: _propTypes.default.array, /** * 选中回调 */ onChange: _propTypes.default.func, /** * 是否禁用 */ disabled: _propTypes.default.bool, /** * 是否展示搜索框,可以为 boolean 或者 Object * 为 Object 时可传入 handleSearch 对搜索筛选进行自定义 */ search: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape({ /** * @argument searchValue - 搜索的值 * @argument item - 当前匹配的项 * @return 匹配结果 */ handleSearch: _propTypes.default.func })]), /** * 源数据区域的配置 */ source: _propTypes.default.shape(Shape), /** * 已选数据区域的配置 */ target: _propTypes.default.shape(Shape), /** @ignore */ locale: _propTypes.default.object, /** * @ignore */ className: _propTypes.default.string }, _class2.defaultProps = { source: {}, target: {}, search: true, defaultSelectedKeys: [], onChange: noop }, _temp)) || _class) || _class); var _default = Transfer; exports.default = _default;