ant-design-vue/components/vc-virtual-list/Filler.tsx
2020-10-07 22:49:01 +08:00

72 lines
1.7 KiB
Vue

import classNames from '../_util/classNames';
import ResizeObserver from '../vc-resize-observer';
import { CSSProperties, FunctionalComponent, PropType } from 'vue';
interface FillerProps {
prefixCls?: string;
/** Virtual filler height. Should be `count * itemMinHeight` */
height: number;
/** Set offset of visible items. Should be the top of start item position */
offset?: number;
onInnerResize?: () => void;
}
const Filter: FunctionalComponent<FillerProps> = (
{ height, offset, prefixCls, onInnerResize },
{ slots },
) => {
let outerStyle = {};
let innerStyle: CSSProperties = {
display: 'flex',
flexDirection: 'column',
};
if (offset !== undefined) {
outerStyle = { height: `${height}px`, position: 'relative', overflow: 'hidden' };
innerStyle = {
...innerStyle,
transform: `translateY(${offset}px)`,
position: 'absolute',
left: 0,
right: 0,
top: 0,
};
}
return (
<div style={outerStyle}>
<ResizeObserver
onResize={({ offsetHeight }) => {
if (offsetHeight && onInnerResize) {
onInnerResize();
}
}}
>
<div
style={innerStyle}
class={classNames({
[`${prefixCls}-holder-inner`]: prefixCls,
})}
>
{slots.default?.()}
</div>
</ResizeObserver>
</div>
);
};
Filter.displayName = 'Filter';
Filter.inheritAttrs = false;
Filter.props = {
prefixCls: String,
/** Virtual filler height. Should be `count * itemMinHeight` */
height: Number,
/** Set offset of visible items. Should be the top of start item position */
offset: Number,
onInnerResize: Function as PropType<() => void>,
};
export default Filter;