semi-design/packages/semi-ui/scrollList/index.tsx

import React from 'react';
import BaseComponent, { BaseProps } from '../_base/baseComponent';
import { cssClasses } from '@douyinfe/semi-foundation/scrollList/constants';
import classnames from 'classnames';
import propTypes from 'prop-types';
import ScrollItem from './scrollItem';
import Foundation from '@douyinfe/semi-foundation/scrollList/foundation';

import '@douyinfe/semi-foundation/scrollList/scrollList.scss';

export { ScrollItemProps } from './scrollItem';
export interface ScrollListProps extends BaseProps {
    header?: React.ReactNode;
    footer?: React.ReactNode;
    children?: React.ReactNode;
    bodyHeight?: number | string;
    prefixCls?: string;
}

// eslint-disable-next-line @typescript-eslint/ban-types
class ScrollList extends BaseComponent<ScrollListProps, {}> {
    static Item = ScrollItem;

    static propTypes = {
        className: propTypes.string,
        header: propTypes.node,
        footer: propTypes.node,
        children: propTypes.node,
        bodyHeight: propTypes.oneOfType([propTypes.number, propTypes.string]),
    };

    constructor(props: ScrollListProps) {
        super(props);
        this.foundation = new Foundation(this.adapter);
    }

    render() {
        const { children, header, footer, prefixCls, bodyHeight, className, style } = this.props;

        const clsWrapper = classnames(className, {
            [prefixCls || cssClasses.PREFIX]: true,
        });

        const clsHeader = classnames({
            [`${prefixCls || cssClasses.PREFIX}-header`]: true,
        });

        return (
            <div className={clsWrapper} style={style}>
                {header ? (
                    <div className={clsHeader}>
                        <div className={`${clsHeader}-title`}>{header}</div>
                        <div className={`${clsWrapper}-line`} />
                    </div>
                ) : null}
                <div className={`${clsWrapper}-body`} style={{ height: bodyHeight ? bodyHeight : '' }}>
                    {children}
                </div>
                {footer ? <div className={`${clsWrapper}-footer`}>{footer}</div> : null}
            </div>
        );
    }
}

export default ScrollList;