ant-design-vue/components/transfer/renderListBody.tsx
ajuner 4ab7a681a7
fix: declare components type (#3145)
* fix: update alert code

* chore: declare link type

* chore: declare auto-complete type

* chore: declare Badge type

* chore: declare Breadcrumb type

* chore: declare Calendar type

* chore: declare Card type

* chore: declare Checkbox type

* chore: declare Descriptions type

* chore: declare Dropdown

* chore: declare Form type

* chore: declare Mentions type

* chore: declare Menu type

* chore: declare popconfirm type

* chore: update Radio typescript

* chore: declare Rate type

* chore: declare Transfer type

* fix: update Transfer type

* fix: update type

* fix: update type
2020-11-13 10:51:12 +08:00

114 lines
3.0 KiB
Vue

import { defineComponent, nextTick } from 'vue';
import raf from '../_util/raf';
import ListItem from './ListItem';
import PropTypes, { withUndefined } from '../_util/vue-types';
import { findDOMNode } from '../_util/props-util';
import { getTransitionGroupProps, TransitionGroup } from '../_util/transition';
import { DataSourceItem } from './list';
const ListBody = defineComponent({
name: 'ListBody',
inheritAttrs: false,
props: {
prefixCls: PropTypes.string,
filteredRenderItems: PropTypes.array.def([]),
lazy: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object])),
selectedKeys: PropTypes.array,
disabled: PropTypes.looseBool,
onItemSelect: PropTypes.func,
onItemSelectAll: PropTypes.func,
onScroll: PropTypes.func,
},
setup() {
return {
mountId: null,
lazyId: null,
};
},
data() {
return {
mounted: false,
};
},
computed: {
itemsLength(): number {
return this.filteredRenderItems ? this.filteredRenderItems.length : 0;
},
},
watch: {
itemsLength() {
nextTick(() => {
const { lazy } = this.$props;
if (lazy !== false) {
const container = findDOMNode(this);
raf.cancel(this.lazyId);
this.lazyId = raf(() => {
if (container) {
const scrollEvent = new Event('scroll', { bubbles: true });
container.dispatchEvent(scrollEvent);
}
});
}
});
},
},
mounted() {
this.mountId = raf(() => {
this.mounted = true;
});
},
beforeUnmount() {
raf.cancel(this.mountId);
raf.cancel(this.lazyId);
},
methods: {
handleItemSelect(item: DataSourceItem) {
const { selectedKeys } = this.$props;
const checked = selectedKeys.indexOf(item.key) >= 0;
this.$emit('itemSelect', item.key, !checked);
},
handleScroll(e: Event) {
this.$emit('scroll', e);
},
},
render() {
const { mounted } = this.$data;
const {
prefixCls,
filteredRenderItems,
lazy,
selectedKeys,
disabled: globalDisabled,
} = this.$props;
const items = filteredRenderItems.map(({ renderedEl, renderedText, item }: any) => {
const { disabled } = item;
const checked = selectedKeys.indexOf(item.key) >= 0;
return (
<ListItem
disabled={globalDisabled || disabled}
key={item.key}
item={item}
lazy={lazy}
renderedText={renderedText}
renderedEl={renderedEl}
checked={checked}
prefixCls={prefixCls}
onClick={this.handleItemSelect}
/>
);
});
const transitionProps = getTransitionGroupProps(
mounted ? `${prefixCls}-content-item-highlight` : '',
{
tag: 'ul',
class: `${prefixCls}-content`,
onScroll: this.handleScroll,
},
);
return <TransitionGroup {...transitionProps}>{items}</TransitionGroup>;
},
});
export default props => <ListBody {...props} />;