123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562 |
- 'use strict';
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.TransferLocale = exports.TransferProps = exports.TransferItem = exports.TransferDirection = undefined;
- var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
- var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
- var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
- var _defineProperty3 = _interopRequireDefault(_defineProperty2);
- var _extends2 = require('babel-runtime/helpers/extends');
- var _extends3 = _interopRequireDefault(_extends2);
- var _vueTypes = require('../_util/vue-types');
- var _vueTypes2 = _interopRequireDefault(_vueTypes);
- var _propsUtil = require('../_util/props-util');
- var _BaseMixin = require('../_util/BaseMixin');
- var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
- var _classnames = require('classnames');
- var _classnames2 = _interopRequireDefault(_classnames);
- var _list = require('./list');
- var _list2 = _interopRequireDefault(_list);
- var _operation = require('./operation');
- var _operation2 = _interopRequireDefault(_operation);
- var _LocaleReceiver = require('../locale-provider/LocaleReceiver');
- var _LocaleReceiver2 = _interopRequireDefault(_LocaleReceiver);
- var _default2 = require('../locale-provider/default');
- var _default3 = _interopRequireDefault(_default2);
- var _configConsumerProps = require('../config-provider/configConsumerProps');
- var _warning = require('../_util/warning');
- var _warning2 = _interopRequireDefault(_warning);
- var _base = require('../base');
- var _base2 = _interopRequireDefault(_base);
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
- var TransferDirection = exports.TransferDirection = 'left' | 'right';
- var TransferItem = exports.TransferItem = {
- key: _vueTypes2['default'].string,
- title: _vueTypes2['default'].string,
- description: _vueTypes2['default'].string,
- disabled: _vueTypes2['default'].bool
- };
- var TransferProps = exports.TransferProps = {
- prefixCls: _vueTypes2['default'].string,
- dataSource: _vueTypes2['default'].arrayOf(_vueTypes2['default'].shape(TransferItem).loose),
- disabled: _vueTypes2['default'].boolean,
- targetKeys: _vueTypes2['default'].arrayOf(_vueTypes2['default'].string),
- selectedKeys: _vueTypes2['default'].arrayOf(_vueTypes2['default'].string),
- render: _vueTypes2['default'].func,
- listStyle: _vueTypes2['default'].oneOfType([_vueTypes2['default'].func, _vueTypes2['default'].object]),
- operationStyle: _vueTypes2['default'].object,
- titles: _vueTypes2['default'].arrayOf(_vueTypes2['default'].string),
- operations: _vueTypes2['default'].arrayOf(_vueTypes2['default'].string),
- showSearch: _vueTypes2['default'].bool,
- filterOption: _vueTypes2['default'].func,
- searchPlaceholder: _vueTypes2['default'].string,
- notFoundContent: _vueTypes2['default'].any,
- locale: _vueTypes2['default'].object,
- rowKey: _vueTypes2['default'].func,
- lazy: _vueTypes2['default'].oneOfType([_vueTypes2['default'].object, _vueTypes2['default'].bool]),
- showSelectAll: _vueTypes2['default'].bool
- };
- var TransferLocale = exports.TransferLocale = {
- titles: _vueTypes2['default'].arrayOf(_vueTypes2['default'].string),
- notFoundContent: _vueTypes2['default'].string,
- itemUnit: _vueTypes2['default'].string,
- itemsUnit: _vueTypes2['default'].string
- };
- var Transfer = {
- name: 'ATransfer',
- mixins: [_BaseMixin2['default']],
- props: (0, _propsUtil.initDefaultProps)(TransferProps, {
- dataSource: [],
- locale: {},
- showSearch: false,
- listStyle: function listStyle() {}
- }),
- inject: {
- configProvider: { 'default': function _default() {
- return _configConsumerProps.ConfigConsumerProps;
- } }
- },
- data: function data() {
- // vue 中 通过slot,不方便传递,保留notFoundContent及searchPlaceholder
- // warning(
- // !(getComponentFromProp(this, 'notFoundContent') || hasProp(this, 'searchPlaceholder')),
- // 'Transfer[notFoundContent] and Transfer[searchPlaceholder] will be removed, ' +
- // 'please use Transfer[locale] instead.',
- // )
- var _selectedKeys = this.selectedKeys,
- selectedKeys = _selectedKeys === undefined ? [] : _selectedKeys,
- _targetKeys = this.targetKeys,
- targetKeys = _targetKeys === undefined ? [] : _targetKeys;
- return {
- leftFilter: '',
- rightFilter: '',
- sourceSelectedKeys: selectedKeys.filter(function (key) {
- return targetKeys.indexOf(key) === -1;
- }),
- targetSelectedKeys: selectedKeys.filter(function (key) {
- return targetKeys.indexOf(key) > -1;
- })
- };
- },
- mounted: function mounted() {
- // this.currentProps = { ...this.$props }
- },
- watch: {
- targetKeys: function targetKeys() {
- this.updateState();
- if (this.selectedKeys) {
- var targetKeys = this.targetKeys || [];
- this.setState({
- sourceSelectedKeys: this.selectedKeys.filter(function (key) {
- return !targetKeys.includes(key);
- }),
- targetSelectedKeys: this.selectedKeys.filter(function (key) {
- return targetKeys.includes(key);
- })
- });
- }
- },
- dataSource: function dataSource() {
- this.updateState();
- },
- selectedKeys: function selectedKeys() {
- if (this.selectedKeys) {
- var targetKeys = this.targetKeys || [];
- this.setState({
- sourceSelectedKeys: this.selectedKeys.filter(function (key) {
- return !targetKeys.includes(key);
- }),
- targetSelectedKeys: this.selectedKeys.filter(function (key) {
- return targetKeys.includes(key);
- })
- });
- }
- }
- },
- methods: {
- getSelectedKeysName: function getSelectedKeysName(direction) {
- return direction === 'left' ? 'sourceSelectedKeys' : 'targetSelectedKeys';
- },
- getTitles: function getTitles(transferLocale) {
- if (this.titles) {
- return this.titles;
- }
- return transferLocale.titles || ['', ''];
- },
- getLocale: function getLocale(transferLocale, renderEmpty) {
- var h = this.$createElement;
- // Keep old locale props still working.
- var oldLocale = {
- notFoundContent: renderEmpty(h, 'Transfer')
- };
- var notFoundContent = (0, _propsUtil.getComponentFromProp)(this, 'notFoundContent');
- if (notFoundContent) {
- oldLocale.notFoundContent = notFoundContent;
- }
- if ((0, _propsUtil.hasProp)(this, 'searchPlaceholder')) {
- oldLocale.searchPlaceholder = this.$props.searchPlaceholder;
- }
- return (0, _extends3['default'])({}, transferLocale, oldLocale, this.$props.locale);
- },
- updateState: function updateState() {
- var sourceSelectedKeys = this.sourceSelectedKeys,
- targetSelectedKeys = this.targetSelectedKeys;
- this.separatedDataSource = null;
- if (!this.selectedKeys) {
- // clear key nolonger existed
- // clear checkedKeys according to targetKeys
- var dataSource = this.dataSource,
- _targetKeys2 = this.targetKeys,
- targetKeys = _targetKeys2 === undefined ? [] : _targetKeys2;
- var newSourceSelectedKeys = [];
- var newTargetSelectedKeys = [];
- dataSource.forEach(function (_ref) {
- var key = _ref.key;
- if (sourceSelectedKeys.includes(key) && !targetKeys.includes(key)) {
- newSourceSelectedKeys.push(key);
- }
- if (targetSelectedKeys.includes(key) && targetKeys.includes(key)) {
- newTargetSelectedKeys.push(key);
- }
- });
- this.setState({
- sourceSelectedKeys: newSourceSelectedKeys,
- targetSelectedKeys: newTargetSelectedKeys
- });
- }
- },
- moveTo: function moveTo(direction) {
- var _$props = this.$props,
- _$props$targetKeys = _$props.targetKeys,
- targetKeys = _$props$targetKeys === undefined ? [] : _$props$targetKeys,
- _$props$dataSource = _$props.dataSource,
- dataSource = _$props$dataSource === undefined ? [] : _$props$dataSource;
- var sourceSelectedKeys = this.sourceSelectedKeys,
- targetSelectedKeys = this.targetSelectedKeys;
- var moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys;
- // filter the disabled options
- var newMoveKeys = moveKeys.filter(function (key) {
- return !dataSource.some(function (data) {
- return !!(key === data.key && data.disabled);
- });
- });
- // move items to target box
- var newTargetKeys = direction === 'right' ? newMoveKeys.concat(targetKeys) : targetKeys.filter(function (targetKey) {
- return newMoveKeys.indexOf(targetKey) === -1;
- });
- // empty checked keys
- var oppositeDirection = direction === 'right' ? 'left' : 'right';
- this.setState((0, _defineProperty3['default'])({}, this.getSelectedKeysName(oppositeDirection), []));
- this.handleSelectChange(oppositeDirection, []);
- this.$emit('change', newTargetKeys, direction, newMoveKeys);
- },
- moveToLeft: function moveToLeft() {
- this.moveTo('left');
- },
- moveToRight: function moveToRight() {
- this.moveTo('right');
- },
- onItemSelectAll: function onItemSelectAll(direction, selectedKeys, checkAll) {
- var originalSelectedKeys = this.$data[this.getSelectedKeysName(direction)] || [];
- var mergedCheckedKeys = [];
- if (checkAll) {
- // Merge current keys with origin key
- mergedCheckedKeys = Array.from(new Set([].concat((0, _toConsumableArray3['default'])(originalSelectedKeys), (0, _toConsumableArray3['default'])(selectedKeys))));
- } else {
- // Remove current keys from origin keys
- mergedCheckedKeys = originalSelectedKeys.filter(function (key) {
- return selectedKeys.indexOf(key) === -1;
- });
- }
- this.handleSelectChange(direction, mergedCheckedKeys);
- if (!this.$props.selectedKeys) {
- this.setState((0, _defineProperty3['default'])({}, this.getSelectedKeysName(direction), mergedCheckedKeys));
- }
- },
- handleSelectAll: function handleSelectAll(direction, filteredDataSource, checkAll) {
- this.onItemSelectAll(direction, filteredDataSource.map(function (_ref2) {
- var key = _ref2.key;
- return key;
- }), !checkAll);
- },
- // [Legacy] Old prop `body` pass origin check as arg. It's confusing.
- // TODO: Remove this in next version.
- handleLeftSelectAll: function handleLeftSelectAll(filteredDataSource, checkAll) {
- return this.handleSelectAll('left', filteredDataSource, !checkAll);
- },
- handleRightSelectAll: function handleRightSelectAll(filteredDataSource, checkAll) {
- return this.handleSelectAll('right', filteredDataSource, !checkAll);
- },
- onLeftItemSelectAll: function onLeftItemSelectAll(selectedKeys, checkAll) {
- return this.onItemSelectAll('left', selectedKeys, checkAll);
- },
- onRightItemSelectAll: function onRightItemSelectAll(selectedKeys, checkAll) {
- return this.onItemSelectAll('right', selectedKeys, checkAll);
- },
- handleFilter: function handleFilter(direction, e) {
- var value = e.target.value;
- if ((0, _propsUtil.getListeners)(this).searchChange) {
- (0, _warning2['default'])(false, 'Transfer', '`searchChange` in Transfer is deprecated. Please use `search` instead.');
- this.$emit('searchChange', direction, e);
- }
- this.$emit('search', direction, value);
- },
- handleLeftFilter: function handleLeftFilter(e) {
- this.handleFilter('left', e);
- },
- handleRightFilter: function handleRightFilter(e) {
- this.handleFilter('right', e);
- },
- handleClear: function handleClear(direction) {
- this.$emit('search', direction, '');
- },
- handleLeftClear: function handleLeftClear() {
- this.handleClear('left');
- },
- handleRightClear: function handleRightClear() {
- this.handleClear('right');
- },
- onItemSelect: function onItemSelect(direction, selectedKey, checked) {
- var sourceSelectedKeys = this.sourceSelectedKeys,
- targetSelectedKeys = this.targetSelectedKeys;
- var holder = direction === 'left' ? [].concat((0, _toConsumableArray3['default'])(sourceSelectedKeys)) : [].concat((0, _toConsumableArray3['default'])(targetSelectedKeys));
- var index = holder.indexOf(selectedKey);
- if (index > -1) {
- holder.splice(index, 1);
- }
- if (checked) {
- holder.push(selectedKey);
- }
- this.handleSelectChange(direction, holder);
- if (!this.selectedKeys) {
- this.setState((0, _defineProperty3['default'])({}, this.getSelectedKeysName(direction), holder));
- }
- },
- handleSelect: function handleSelect(direction, selectedItem, checked) {
- (0, _warning2['default'])(false, 'Transfer', '`handleSelect` will be removed, please use `onSelect` instead.');
- this.onItemSelect(direction, selectedItem.key, checked);
- },
- handleLeftSelect: function handleLeftSelect(selectedItem, checked) {
- return this.handleSelect('left', selectedItem, checked);
- },
- handleRightSelect: function handleRightSelect(selectedItem, checked) {
- return this.handleSelect('right', selectedItem, checked);
- },
- onLeftItemSelect: function onLeftItemSelect(selectedKey, checked) {
- return this.onItemSelect('left', selectedKey, checked);
- },
- onRightItemSelect: function onRightItemSelect(selectedKey, checked) {
- return this.onItemSelect('right', selectedKey, checked);
- },
- handleScroll: function handleScroll(direction, e) {
- this.$emit('scroll', direction, e);
- },
- handleLeftScroll: function handleLeftScroll(e) {
- this.handleScroll('left', e);
- },
- handleRightScroll: function handleRightScroll(e) {
- this.handleScroll('right', e);
- },
- handleSelectChange: function handleSelectChange(direction, holder) {
- var sourceSelectedKeys = this.sourceSelectedKeys,
- targetSelectedKeys = this.targetSelectedKeys;
- if (direction === 'left') {
- this.$emit('selectChange', holder, targetSelectedKeys);
- } else {
- this.$emit('selectChange', sourceSelectedKeys, holder);
- }
- },
- handleListStyle: function handleListStyle(listStyle, direction) {
- if (typeof listStyle === 'function') {
- return listStyle({ direction: direction });
- }
- return listStyle;
- },
- separateDataSource: function separateDataSource() {
- var _$props2 = this.$props,
- dataSource = _$props2.dataSource,
- rowKey = _$props2.rowKey,
- _$props2$targetKeys = _$props2.targetKeys,
- targetKeys = _$props2$targetKeys === undefined ? [] : _$props2$targetKeys;
- var leftDataSource = [];
- var rightDataSource = new Array(targetKeys.length);
- dataSource.forEach(function (record) {
- if (rowKey) {
- record.key = rowKey(record);
- }
- // rightDataSource should be ordered by targetKeys
- // leftDataSource should be ordered by dataSource
- var indexOfKey = targetKeys.indexOf(record.key);
- if (indexOfKey !== -1) {
- rightDataSource[indexOfKey] = record;
- } else {
- leftDataSource.push(record);
- }
- });
- return {
- leftDataSource: leftDataSource,
- rightDataSource: rightDataSource
- };
- },
- renderTransfer: function renderTransfer(transferLocale) {
- var _classNames;
- var h = this.$createElement;
- var props = (0, _propsUtil.getOptionProps)(this);
- var customizePrefixCls = props.prefixCls,
- disabled = props.disabled,
- _props$operations = props.operations,
- operations = _props$operations === undefined ? [] : _props$operations,
- showSearch = props.showSearch,
- listStyle = props.listStyle,
- operationStyle = props.operationStyle,
- filterOption = props.filterOption,
- lazy = props.lazy,
- showSelectAll = props.showSelectAll;
- var children = (0, _propsUtil.getComponentFromProp)(this, 'children', {}, false);
- var getPrefixCls = this.configProvider.getPrefixCls;
- var prefixCls = getPrefixCls('transfer', customizePrefixCls);
- var renderEmpty = this.configProvider.renderEmpty;
- var locale = this.getLocale(transferLocale, renderEmpty);
- var sourceSelectedKeys = this.sourceSelectedKeys,
- targetSelectedKeys = this.targetSelectedKeys,
- $scopedSlots = this.$scopedSlots;
- var body = $scopedSlots.body,
- footer = $scopedSlots.footer;
- var renderItem = props.render;
- var _separateDataSource = this.separateDataSource(),
- leftDataSource = _separateDataSource.leftDataSource,
- rightDataSource = _separateDataSource.rightDataSource;
- var leftActive = targetSelectedKeys.length > 0;
- var rightActive = sourceSelectedKeys.length > 0;
- var cls = (0, _classnames2['default'])(prefixCls, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-disabled', disabled), (0, _defineProperty3['default'])(_classNames, prefixCls + '-customize-list', !!children), _classNames));
- var titles = this.getTitles(locale);
- return h(
- 'div',
- { 'class': cls },
- [h(_list2['default'], {
- key: 'leftList',
- attrs: { prefixCls: prefixCls + '-list',
- titleText: titles[0],
- dataSource: leftDataSource,
- filterOption: filterOption,
- checkedKeys: sourceSelectedKeys,
- handleFilter: this.handleLeftFilter,
- handleClear: this.handleLeftClear,
- handleSelect: this.handleLeftSelect,
- handleSelectAll: this.handleLeftSelectAll,
- renderItem: renderItem,
- showSearch: showSearch,
- body: body,
- renderList: children,
- footer: footer,
- lazy: lazy,
- disabled: disabled,
- direction: 'left',
- showSelectAll: showSelectAll,
- itemUnit: locale.itemUnit,
- itemsUnit: locale.itemsUnit,
- notFoundContent: locale.notFoundContent,
- searchPlaceholder: locale.searchPlaceholder
- },
- style: this.handleListStyle(listStyle, 'left'), on: {
- 'itemSelect': this.onLeftItemSelect,
- 'itemSelectAll': this.onLeftItemSelectAll,
- 'scroll': this.handleLeftScroll
- }
- }), h(_operation2['default'], {
- key: 'operation',
- 'class': prefixCls + '-operation',
- attrs: { rightActive: rightActive,
- rightArrowText: operations[0],
- moveToRight: this.moveToRight,
- leftActive: leftActive,
- leftArrowText: operations[1],
- moveToLeft: this.moveToLeft,
- disabled: disabled
- },
- style: operationStyle }), h(_list2['default'], {
- key: 'rightList',
- attrs: { prefixCls: prefixCls + '-list',
- titleText: titles[1],
- dataSource: rightDataSource,
- filterOption: filterOption,
- checkedKeys: targetSelectedKeys,
- handleFilter: this.handleRightFilter,
- handleClear: this.handleRightClear,
- handleSelect: this.handleRightSelect,
- handleSelectAll: this.handleRightSelectAll,
- renderItem: renderItem,
- showSearch: showSearch,
- body: body,
- renderList: children,
- footer: footer,
- lazy: lazy,
- disabled: disabled,
- direction: 'right',
- showSelectAll: showSelectAll,
- itemUnit: locale.itemUnit,
- itemsUnit: locale.itemsUnit,
- notFoundContent: locale.notFoundContent,
- searchPlaceholder: locale.searchPlaceholder
- },
- style: this.handleListStyle(listStyle, 'right'), on: {
- 'itemSelect': this.onRightItemSelect,
- 'itemSelectAll': this.onRightItemSelectAll,
- 'scroll': this.handleRightScroll
- }
- })]
- );
- }
- },
- render: function render() {
- var h = arguments[0];
- return h(_LocaleReceiver2['default'], {
- attrs: {
- componentName: 'Transfer',
- defaultLocale: _default3['default'].Transfer
- },
- scopedSlots: { 'default': this.renderTransfer }
- });
- }
- };
- /* istanbul ignore next */
- Transfer.install = function (Vue) {
- Vue.use(_base2['default']);
- Vue.component(Transfer.name, Transfer);
- };
- exports['default'] = Transfer;
|