mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-05 21:50:07 +08:00
4ab7a681a7
* 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
114 lines
3.0 KiB
Vue
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} />;
|