import classNames from 'classnames' import PropTypes from '../_util/vue-types' import { isValidElement, initDefaultProps } from '../_util/props-util' import BaseMixin from '../_util/BaseMixin' import getTransitionProps from '../_util/getTransitionProps' import Checkbox from '../checkbox' import Search from './search' import Item from './item' import triggerEvent from '../_util/triggerEvent' import addEventListener from '../_util/Dom/addEventListener' function isIEorEDGE () { return document.documentMode || /Edge/.test(navigator.userAgent) } function noop () { } const TransferItem = { key: PropTypes.string.isRequired, title: PropTypes.string.isRequired, description: PropTypes.string, disabled: PropTypes.bool, } function isRenderResultPlainObject (result) { return result && !isValidElement(result) && Object.prototype.toString.call(result) === '[object Object]' } export const TransferListProps = { prefixCls: PropTypes.string, titleText: PropTypes.string, dataSource: PropTypes.arrayOf(PropTypes.shape(TransferItem).loose), filter: PropTypes.string, filterOption: PropTypes.func, checkedKeys: PropTypes.arrayOf(PropTypes.string), handleFilter: PropTypes.func, handleSelect: PropTypes.func, handleSelectAll: PropTypes.func, handleClear: PropTypes.func, renderItem: PropTypes.func, showSearch: PropTypes.bool, searchPlaceholder: PropTypes.string, notFoundContent: PropTypes.any, itemUnit: PropTypes.string, itemsUnit: PropTypes.string, body: PropTypes.any, footer: PropTypes.any, lazy: PropTypes.oneOfType([ PropTypes.bool, PropTypes.object, ]), } export default { name: 'TransferList', mixins: [BaseMixin], props: initDefaultProps(TransferListProps, { dataSource: [], titleText: '', showSearch: false, renderItem: noop, lazy: {}, }), data () { this.timer = null this.triggerScrollTimer = null return { mounted: false, } }, mounted () { this.timer = setTimeout(() => { this.setState({ mounted: true, }) }, 0) this.$nextTick(() => { if (this.$refs.listContentWrapper) { const listContentWrapperDom = this.$refs.listContentWrapper.$el this.scrollEvent = addEventListener(listContentWrapperDom, 'scroll', this.handleScroll) } }) }, beforeDestroy () { clearTimeout(this.timer) clearTimeout(this.triggerScrollTimer) clearTimeout(this.fixIERepaintTimer) if (this.scrollEvent) { this.scrollEvent.remove() } }, updated () { this.$nextTick(() => { if (this.scrollEvent) { this.scrollEvent.remove() } if (this.$refs.listContentWrapper) { const listContentWrapperDom = this.$refs.listContentWrapper.$el this.scrollEvent = addEventListener(listContentWrapperDom, 'scroll', this.handleScroll) } }) }, methods: { handleScroll (e) { this.$emit('scroll', e) }, getCheckStatus (filteredDataSource) { const { checkedKeys } = this.$props if (checkedKeys.length === 0) { return 'none' } else if (filteredDataSource.every(item => checkedKeys.indexOf(item.key) >= 0)) { return 'all' } return 'part' }, _handleSelect (selectedItem) { const { checkedKeys } = this.$props const result = checkedKeys.some((key) => key === selectedItem.key) this.handleSelect(selectedItem, !result) }, _handleFilter (e) { this.handleFilter(e) if (!e.target.value) { return } // Manually trigger scroll event for lazy search bug // https://github.com/ant-design/ant-design/issues/5631 this.triggerScrollTimer = setTimeout(() => { const transferNode = this.$el const listNode = transferNode.querySelectorAll('.ant-transfer-list-content')[0] if (listNode) { triggerEvent(listNode, 'scroll') } }, 0) this.fixIERepaint() }, _handleClear (e) { this.handleClear(e) this.fixIERepaint() }, matchFilter (text, item) { const { filter, filterOption } = this.$props if (filterOption) { return filterOption(filter, item) } return text.indexOf(filter) >= 0 }, renderItemHtml (item) { const { renderItem = noop } = this.$props const renderResult = renderItem(item) const isRenderResultPlain = isRenderResultPlainObject(renderResult) return { renderedText: isRenderResultPlain ? renderResult.value : renderResult, renderedEl: isRenderResultPlain ? renderResult.label : renderResult, } }, // Fix IE/Edge repaint // https://github.com/ant-design/ant-design/issues/9697 // https://stackoverflow.com/q/27947912/3040605 fixIERepaint () { if (!isIEorEDGE()) { return } this.fixIERepaintTimer = window.setTimeout(() => { if (this.$refs.notFoundNode) { this.$refs.notFoundNode.className = this.$refs.notFoundNode.className } }, 0) }, filterNull (arr) { return arr.filter((item) => { return item !== null }) }, }, render () { const { prefixCls, dataSource, titleText, checkedKeys, lazy, body = noop, footer = noop, showSearch, filter, searchPlaceholder, notFoundContent, itemUnit, itemsUnit, } = this.$props // Custom Layout const footerDom = footer({ ...this.$props }) const bodyDom = body({ ...this.$props }) const listCls = classNames(prefixCls, { [`${prefixCls}-with-footer`]: !!footerDom, }) const filteredDataSource = [] const totalDataSource = [] const showItems = dataSource.map((item) => { const { renderedText, renderedEl } = this.renderItemHtml(item) if (filter && filter.trim() && !this.matchFilter(renderedText, item)) { return null } // all show items totalDataSource.push(item) if (!item.disabled) { // response to checkAll items filteredDataSource.push(item) } const checked = checkedKeys.indexOf(item.key) >= 0 return ( ) }) const unit = dataSource.length > 1 ? itemsUnit : itemUnit const search = showSearch ? (
) : null const transitionName = this.mounted ? `${prefixCls}-content-item-highlight` : '' const transitionProps = getTransitionProps(transitionName, { leave: noop, }) const listBody = bodyDom || (
{search} {showItems}
{notFoundContent}
) const listFooter = footerDom ? (
{footerDom}
) : null const checkStatus = this.getCheckStatus(filteredDataSource) const checkedAll = checkStatus === 'all' const checkAllCheckbox = ( { this.handleSelectAll(filteredDataSource, checkedAll) }} /> ) return (
{checkAllCheckbox} {(checkedKeys.length > 0 ? `${checkedKeys.length}/` : '') + totalDataSource.length} {unit} {titleText}
{listBody} {listFooter}
) }, }