index.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.TransferLocale = exports.TransferProps = exports.TransferItem = exports.TransferDirection = undefined;
  6. var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
  7. var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
  8. var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
  9. var _defineProperty3 = _interopRequireDefault(_defineProperty2);
  10. var _extends2 = require('babel-runtime/helpers/extends');
  11. var _extends3 = _interopRequireDefault(_extends2);
  12. var _vueTypes = require('../_util/vue-types');
  13. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  14. var _propsUtil = require('../_util/props-util');
  15. var _BaseMixin = require('../_util/BaseMixin');
  16. var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
  17. var _classnames = require('classnames');
  18. var _classnames2 = _interopRequireDefault(_classnames);
  19. var _list = require('./list');
  20. var _list2 = _interopRequireDefault(_list);
  21. var _operation = require('./operation');
  22. var _operation2 = _interopRequireDefault(_operation);
  23. var _LocaleReceiver = require('../locale-provider/LocaleReceiver');
  24. var _LocaleReceiver2 = _interopRequireDefault(_LocaleReceiver);
  25. var _default2 = require('../locale-provider/default');
  26. var _default3 = _interopRequireDefault(_default2);
  27. var _configConsumerProps = require('../config-provider/configConsumerProps');
  28. var _warning = require('../_util/warning');
  29. var _warning2 = _interopRequireDefault(_warning);
  30. var _base = require('../base');
  31. var _base2 = _interopRequireDefault(_base);
  32. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  33. var TransferDirection = exports.TransferDirection = 'left' | 'right';
  34. var TransferItem = exports.TransferItem = {
  35. key: _vueTypes2['default'].string,
  36. title: _vueTypes2['default'].string,
  37. description: _vueTypes2['default'].string,
  38. disabled: _vueTypes2['default'].bool
  39. };
  40. var TransferProps = exports.TransferProps = {
  41. prefixCls: _vueTypes2['default'].string,
  42. dataSource: _vueTypes2['default'].arrayOf(_vueTypes2['default'].shape(TransferItem).loose),
  43. disabled: _vueTypes2['default'].boolean,
  44. targetKeys: _vueTypes2['default'].arrayOf(_vueTypes2['default'].string),
  45. selectedKeys: _vueTypes2['default'].arrayOf(_vueTypes2['default'].string),
  46. render: _vueTypes2['default'].func,
  47. listStyle: _vueTypes2['default'].oneOfType([_vueTypes2['default'].func, _vueTypes2['default'].object]),
  48. operationStyle: _vueTypes2['default'].object,
  49. titles: _vueTypes2['default'].arrayOf(_vueTypes2['default'].string),
  50. operations: _vueTypes2['default'].arrayOf(_vueTypes2['default'].string),
  51. showSearch: _vueTypes2['default'].bool,
  52. filterOption: _vueTypes2['default'].func,
  53. searchPlaceholder: _vueTypes2['default'].string,
  54. notFoundContent: _vueTypes2['default'].any,
  55. locale: _vueTypes2['default'].object,
  56. rowKey: _vueTypes2['default'].func,
  57. lazy: _vueTypes2['default'].oneOfType([_vueTypes2['default'].object, _vueTypes2['default'].bool]),
  58. showSelectAll: _vueTypes2['default'].bool
  59. };
  60. var TransferLocale = exports.TransferLocale = {
  61. titles: _vueTypes2['default'].arrayOf(_vueTypes2['default'].string),
  62. notFoundContent: _vueTypes2['default'].string,
  63. itemUnit: _vueTypes2['default'].string,
  64. itemsUnit: _vueTypes2['default'].string
  65. };
  66. var Transfer = {
  67. name: 'ATransfer',
  68. mixins: [_BaseMixin2['default']],
  69. props: (0, _propsUtil.initDefaultProps)(TransferProps, {
  70. dataSource: [],
  71. locale: {},
  72. showSearch: false,
  73. listStyle: function listStyle() {}
  74. }),
  75. inject: {
  76. configProvider: { 'default': function _default() {
  77. return _configConsumerProps.ConfigConsumerProps;
  78. } }
  79. },
  80. data: function data() {
  81. // vue 中 通过slot,不方便传递,保留notFoundContent及searchPlaceholder
  82. // warning(
  83. // !(getComponentFromProp(this, 'notFoundContent') || hasProp(this, 'searchPlaceholder')),
  84. // 'Transfer[notFoundContent] and Transfer[searchPlaceholder] will be removed, ' +
  85. // 'please use Transfer[locale] instead.',
  86. // )
  87. var _selectedKeys = this.selectedKeys,
  88. selectedKeys = _selectedKeys === undefined ? [] : _selectedKeys,
  89. _targetKeys = this.targetKeys,
  90. targetKeys = _targetKeys === undefined ? [] : _targetKeys;
  91. return {
  92. leftFilter: '',
  93. rightFilter: '',
  94. sourceSelectedKeys: selectedKeys.filter(function (key) {
  95. return targetKeys.indexOf(key) === -1;
  96. }),
  97. targetSelectedKeys: selectedKeys.filter(function (key) {
  98. return targetKeys.indexOf(key) > -1;
  99. })
  100. };
  101. },
  102. mounted: function mounted() {
  103. // this.currentProps = { ...this.$props }
  104. },
  105. watch: {
  106. targetKeys: function targetKeys() {
  107. this.updateState();
  108. if (this.selectedKeys) {
  109. var targetKeys = this.targetKeys || [];
  110. this.setState({
  111. sourceSelectedKeys: this.selectedKeys.filter(function (key) {
  112. return !targetKeys.includes(key);
  113. }),
  114. targetSelectedKeys: this.selectedKeys.filter(function (key) {
  115. return targetKeys.includes(key);
  116. })
  117. });
  118. }
  119. },
  120. dataSource: function dataSource() {
  121. this.updateState();
  122. },
  123. selectedKeys: function selectedKeys() {
  124. if (this.selectedKeys) {
  125. var targetKeys = this.targetKeys || [];
  126. this.setState({
  127. sourceSelectedKeys: this.selectedKeys.filter(function (key) {
  128. return !targetKeys.includes(key);
  129. }),
  130. targetSelectedKeys: this.selectedKeys.filter(function (key) {
  131. return targetKeys.includes(key);
  132. })
  133. });
  134. }
  135. }
  136. },
  137. methods: {
  138. getSelectedKeysName: function getSelectedKeysName(direction) {
  139. return direction === 'left' ? 'sourceSelectedKeys' : 'targetSelectedKeys';
  140. },
  141. getTitles: function getTitles(transferLocale) {
  142. if (this.titles) {
  143. return this.titles;
  144. }
  145. return transferLocale.titles || ['', ''];
  146. },
  147. getLocale: function getLocale(transferLocale, renderEmpty) {
  148. var h = this.$createElement;
  149. // Keep old locale props still working.
  150. var oldLocale = {
  151. notFoundContent: renderEmpty(h, 'Transfer')
  152. };
  153. var notFoundContent = (0, _propsUtil.getComponentFromProp)(this, 'notFoundContent');
  154. if (notFoundContent) {
  155. oldLocale.notFoundContent = notFoundContent;
  156. }
  157. if ((0, _propsUtil.hasProp)(this, 'searchPlaceholder')) {
  158. oldLocale.searchPlaceholder = this.$props.searchPlaceholder;
  159. }
  160. return (0, _extends3['default'])({}, transferLocale, oldLocale, this.$props.locale);
  161. },
  162. updateState: function updateState() {
  163. var sourceSelectedKeys = this.sourceSelectedKeys,
  164. targetSelectedKeys = this.targetSelectedKeys;
  165. this.separatedDataSource = null;
  166. if (!this.selectedKeys) {
  167. // clear key nolonger existed
  168. // clear checkedKeys according to targetKeys
  169. var dataSource = this.dataSource,
  170. _targetKeys2 = this.targetKeys,
  171. targetKeys = _targetKeys2 === undefined ? [] : _targetKeys2;
  172. var newSourceSelectedKeys = [];
  173. var newTargetSelectedKeys = [];
  174. dataSource.forEach(function (_ref) {
  175. var key = _ref.key;
  176. if (sourceSelectedKeys.includes(key) && !targetKeys.includes(key)) {
  177. newSourceSelectedKeys.push(key);
  178. }
  179. if (targetSelectedKeys.includes(key) && targetKeys.includes(key)) {
  180. newTargetSelectedKeys.push(key);
  181. }
  182. });
  183. this.setState({
  184. sourceSelectedKeys: newSourceSelectedKeys,
  185. targetSelectedKeys: newTargetSelectedKeys
  186. });
  187. }
  188. },
  189. moveTo: function moveTo(direction) {
  190. var _$props = this.$props,
  191. _$props$targetKeys = _$props.targetKeys,
  192. targetKeys = _$props$targetKeys === undefined ? [] : _$props$targetKeys,
  193. _$props$dataSource = _$props.dataSource,
  194. dataSource = _$props$dataSource === undefined ? [] : _$props$dataSource;
  195. var sourceSelectedKeys = this.sourceSelectedKeys,
  196. targetSelectedKeys = this.targetSelectedKeys;
  197. var moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys;
  198. // filter the disabled options
  199. var newMoveKeys = moveKeys.filter(function (key) {
  200. return !dataSource.some(function (data) {
  201. return !!(key === data.key && data.disabled);
  202. });
  203. });
  204. // move items to target box
  205. var newTargetKeys = direction === 'right' ? newMoveKeys.concat(targetKeys) : targetKeys.filter(function (targetKey) {
  206. return newMoveKeys.indexOf(targetKey) === -1;
  207. });
  208. // empty checked keys
  209. var oppositeDirection = direction === 'right' ? 'left' : 'right';
  210. this.setState((0, _defineProperty3['default'])({}, this.getSelectedKeysName(oppositeDirection), []));
  211. this.handleSelectChange(oppositeDirection, []);
  212. this.$emit('change', newTargetKeys, direction, newMoveKeys);
  213. },
  214. moveToLeft: function moveToLeft() {
  215. this.moveTo('left');
  216. },
  217. moveToRight: function moveToRight() {
  218. this.moveTo('right');
  219. },
  220. onItemSelectAll: function onItemSelectAll(direction, selectedKeys, checkAll) {
  221. var originalSelectedKeys = this.$data[this.getSelectedKeysName(direction)] || [];
  222. var mergedCheckedKeys = [];
  223. if (checkAll) {
  224. // Merge current keys with origin key
  225. mergedCheckedKeys = Array.from(new Set([].concat((0, _toConsumableArray3['default'])(originalSelectedKeys), (0, _toConsumableArray3['default'])(selectedKeys))));
  226. } else {
  227. // Remove current keys from origin keys
  228. mergedCheckedKeys = originalSelectedKeys.filter(function (key) {
  229. return selectedKeys.indexOf(key) === -1;
  230. });
  231. }
  232. this.handleSelectChange(direction, mergedCheckedKeys);
  233. if (!this.$props.selectedKeys) {
  234. this.setState((0, _defineProperty3['default'])({}, this.getSelectedKeysName(direction), mergedCheckedKeys));
  235. }
  236. },
  237. handleSelectAll: function handleSelectAll(direction, filteredDataSource, checkAll) {
  238. this.onItemSelectAll(direction, filteredDataSource.map(function (_ref2) {
  239. var key = _ref2.key;
  240. return key;
  241. }), !checkAll);
  242. },
  243. // [Legacy] Old prop `body` pass origin check as arg. It's confusing.
  244. // TODO: Remove this in next version.
  245. handleLeftSelectAll: function handleLeftSelectAll(filteredDataSource, checkAll) {
  246. return this.handleSelectAll('left', filteredDataSource, !checkAll);
  247. },
  248. handleRightSelectAll: function handleRightSelectAll(filteredDataSource, checkAll) {
  249. return this.handleSelectAll('right', filteredDataSource, !checkAll);
  250. },
  251. onLeftItemSelectAll: function onLeftItemSelectAll(selectedKeys, checkAll) {
  252. return this.onItemSelectAll('left', selectedKeys, checkAll);
  253. },
  254. onRightItemSelectAll: function onRightItemSelectAll(selectedKeys, checkAll) {
  255. return this.onItemSelectAll('right', selectedKeys, checkAll);
  256. },
  257. handleFilter: function handleFilter(direction, e) {
  258. var value = e.target.value;
  259. if ((0, _propsUtil.getListeners)(this).searchChange) {
  260. (0, _warning2['default'])(false, 'Transfer', '`searchChange` in Transfer is deprecated. Please use `search` instead.');
  261. this.$emit('searchChange', direction, e);
  262. }
  263. this.$emit('search', direction, value);
  264. },
  265. handleLeftFilter: function handleLeftFilter(e) {
  266. this.handleFilter('left', e);
  267. },
  268. handleRightFilter: function handleRightFilter(e) {
  269. this.handleFilter('right', e);
  270. },
  271. handleClear: function handleClear(direction) {
  272. this.$emit('search', direction, '');
  273. },
  274. handleLeftClear: function handleLeftClear() {
  275. this.handleClear('left');
  276. },
  277. handleRightClear: function handleRightClear() {
  278. this.handleClear('right');
  279. },
  280. onItemSelect: function onItemSelect(direction, selectedKey, checked) {
  281. var sourceSelectedKeys = this.sourceSelectedKeys,
  282. targetSelectedKeys = this.targetSelectedKeys;
  283. var holder = direction === 'left' ? [].concat((0, _toConsumableArray3['default'])(sourceSelectedKeys)) : [].concat((0, _toConsumableArray3['default'])(targetSelectedKeys));
  284. var index = holder.indexOf(selectedKey);
  285. if (index > -1) {
  286. holder.splice(index, 1);
  287. }
  288. if (checked) {
  289. holder.push(selectedKey);
  290. }
  291. this.handleSelectChange(direction, holder);
  292. if (!this.selectedKeys) {
  293. this.setState((0, _defineProperty3['default'])({}, this.getSelectedKeysName(direction), holder));
  294. }
  295. },
  296. handleSelect: function handleSelect(direction, selectedItem, checked) {
  297. (0, _warning2['default'])(false, 'Transfer', '`handleSelect` will be removed, please use `onSelect` instead.');
  298. this.onItemSelect(direction, selectedItem.key, checked);
  299. },
  300. handleLeftSelect: function handleLeftSelect(selectedItem, checked) {
  301. return this.handleSelect('left', selectedItem, checked);
  302. },
  303. handleRightSelect: function handleRightSelect(selectedItem, checked) {
  304. return this.handleSelect('right', selectedItem, checked);
  305. },
  306. onLeftItemSelect: function onLeftItemSelect(selectedKey, checked) {
  307. return this.onItemSelect('left', selectedKey, checked);
  308. },
  309. onRightItemSelect: function onRightItemSelect(selectedKey, checked) {
  310. return this.onItemSelect('right', selectedKey, checked);
  311. },
  312. handleScroll: function handleScroll(direction, e) {
  313. this.$emit('scroll', direction, e);
  314. },
  315. handleLeftScroll: function handleLeftScroll(e) {
  316. this.handleScroll('left', e);
  317. },
  318. handleRightScroll: function handleRightScroll(e) {
  319. this.handleScroll('right', e);
  320. },
  321. handleSelectChange: function handleSelectChange(direction, holder) {
  322. var sourceSelectedKeys = this.sourceSelectedKeys,
  323. targetSelectedKeys = this.targetSelectedKeys;
  324. if (direction === 'left') {
  325. this.$emit('selectChange', holder, targetSelectedKeys);
  326. } else {
  327. this.$emit('selectChange', sourceSelectedKeys, holder);
  328. }
  329. },
  330. handleListStyle: function handleListStyle(listStyle, direction) {
  331. if (typeof listStyle === 'function') {
  332. return listStyle({ direction: direction });
  333. }
  334. return listStyle;
  335. },
  336. separateDataSource: function separateDataSource() {
  337. var _$props2 = this.$props,
  338. dataSource = _$props2.dataSource,
  339. rowKey = _$props2.rowKey,
  340. _$props2$targetKeys = _$props2.targetKeys,
  341. targetKeys = _$props2$targetKeys === undefined ? [] : _$props2$targetKeys;
  342. var leftDataSource = [];
  343. var rightDataSource = new Array(targetKeys.length);
  344. dataSource.forEach(function (record) {
  345. if (rowKey) {
  346. record.key = rowKey(record);
  347. }
  348. // rightDataSource should be ordered by targetKeys
  349. // leftDataSource should be ordered by dataSource
  350. var indexOfKey = targetKeys.indexOf(record.key);
  351. if (indexOfKey !== -1) {
  352. rightDataSource[indexOfKey] = record;
  353. } else {
  354. leftDataSource.push(record);
  355. }
  356. });
  357. return {
  358. leftDataSource: leftDataSource,
  359. rightDataSource: rightDataSource
  360. };
  361. },
  362. renderTransfer: function renderTransfer(transferLocale) {
  363. var _classNames;
  364. var h = this.$createElement;
  365. var props = (0, _propsUtil.getOptionProps)(this);
  366. var customizePrefixCls = props.prefixCls,
  367. disabled = props.disabled,
  368. _props$operations = props.operations,
  369. operations = _props$operations === undefined ? [] : _props$operations,
  370. showSearch = props.showSearch,
  371. listStyle = props.listStyle,
  372. operationStyle = props.operationStyle,
  373. filterOption = props.filterOption,
  374. lazy = props.lazy,
  375. showSelectAll = props.showSelectAll;
  376. var children = (0, _propsUtil.getComponentFromProp)(this, 'children', {}, false);
  377. var getPrefixCls = this.configProvider.getPrefixCls;
  378. var prefixCls = getPrefixCls('transfer', customizePrefixCls);
  379. var renderEmpty = this.configProvider.renderEmpty;
  380. var locale = this.getLocale(transferLocale, renderEmpty);
  381. var sourceSelectedKeys = this.sourceSelectedKeys,
  382. targetSelectedKeys = this.targetSelectedKeys,
  383. $scopedSlots = this.$scopedSlots;
  384. var body = $scopedSlots.body,
  385. footer = $scopedSlots.footer;
  386. var renderItem = props.render;
  387. var _separateDataSource = this.separateDataSource(),
  388. leftDataSource = _separateDataSource.leftDataSource,
  389. rightDataSource = _separateDataSource.rightDataSource;
  390. var leftActive = targetSelectedKeys.length > 0;
  391. var rightActive = sourceSelectedKeys.length > 0;
  392. var cls = (0, _classnames2['default'])(prefixCls, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-disabled', disabled), (0, _defineProperty3['default'])(_classNames, prefixCls + '-customize-list', !!children), _classNames));
  393. var titles = this.getTitles(locale);
  394. return h(
  395. 'div',
  396. { 'class': cls },
  397. [h(_list2['default'], {
  398. key: 'leftList',
  399. attrs: { prefixCls: prefixCls + '-list',
  400. titleText: titles[0],
  401. dataSource: leftDataSource,
  402. filterOption: filterOption,
  403. checkedKeys: sourceSelectedKeys,
  404. handleFilter: this.handleLeftFilter,
  405. handleClear: this.handleLeftClear,
  406. handleSelect: this.handleLeftSelect,
  407. handleSelectAll: this.handleLeftSelectAll,
  408. renderItem: renderItem,
  409. showSearch: showSearch,
  410. body: body,
  411. renderList: children,
  412. footer: footer,
  413. lazy: lazy,
  414. disabled: disabled,
  415. direction: 'left',
  416. showSelectAll: showSelectAll,
  417. itemUnit: locale.itemUnit,
  418. itemsUnit: locale.itemsUnit,
  419. notFoundContent: locale.notFoundContent,
  420. searchPlaceholder: locale.searchPlaceholder
  421. },
  422. style: this.handleListStyle(listStyle, 'left'), on: {
  423. 'itemSelect': this.onLeftItemSelect,
  424. 'itemSelectAll': this.onLeftItemSelectAll,
  425. 'scroll': this.handleLeftScroll
  426. }
  427. }), h(_operation2['default'], {
  428. key: 'operation',
  429. 'class': prefixCls + '-operation',
  430. attrs: { rightActive: rightActive,
  431. rightArrowText: operations[0],
  432. moveToRight: this.moveToRight,
  433. leftActive: leftActive,
  434. leftArrowText: operations[1],
  435. moveToLeft: this.moveToLeft,
  436. disabled: disabled
  437. },
  438. style: operationStyle }), h(_list2['default'], {
  439. key: 'rightList',
  440. attrs: { prefixCls: prefixCls + '-list',
  441. titleText: titles[1],
  442. dataSource: rightDataSource,
  443. filterOption: filterOption,
  444. checkedKeys: targetSelectedKeys,
  445. handleFilter: this.handleRightFilter,
  446. handleClear: this.handleRightClear,
  447. handleSelect: this.handleRightSelect,
  448. handleSelectAll: this.handleRightSelectAll,
  449. renderItem: renderItem,
  450. showSearch: showSearch,
  451. body: body,
  452. renderList: children,
  453. footer: footer,
  454. lazy: lazy,
  455. disabled: disabled,
  456. direction: 'right',
  457. showSelectAll: showSelectAll,
  458. itemUnit: locale.itemUnit,
  459. itemsUnit: locale.itemsUnit,
  460. notFoundContent: locale.notFoundContent,
  461. searchPlaceholder: locale.searchPlaceholder
  462. },
  463. style: this.handleListStyle(listStyle, 'right'), on: {
  464. 'itemSelect': this.onRightItemSelect,
  465. 'itemSelectAll': this.onRightItemSelectAll,
  466. 'scroll': this.handleRightScroll
  467. }
  468. })]
  469. );
  470. }
  471. },
  472. render: function render() {
  473. var h = arguments[0];
  474. return h(_LocaleReceiver2['default'], {
  475. attrs: {
  476. componentName: 'Transfer',
  477. defaultLocale: _default3['default'].Transfer
  478. },
  479. scopedSlots: { 'default': this.renderTransfer }
  480. });
  481. }
  482. };
  483. /* istanbul ignore next */
  484. Transfer.install = function (Vue) {
  485. Vue.use(_base2['default']);
  486. Vue.component(Transfer.name, Transfer);
  487. };
  488. exports['default'] = Transfer;