newICSS/src/components/TemplateItems/index.jsx

import PropTypes from "prop-types"
import React from "react"
import style from "./index.less"
import TemplateItem from './TemplateItem'
import check_circle from './TemplateItem/img/check-circle.png';
import check_right from './TemplateItem/img/check-right.png';
import Empty from '@components/Empty';
import {getWindowInnerHeight} from '@common/js/func';
import {windowEventHandler} from '@utils/tools'


class TemplateItems extends React.Component {
    constructor(props) {
        super(props);
        this.$cont = React.createRef();
        this.genItems = this.genItems.bind(this);
    }  
    componentDidMount(){
        const height = getWindowInnerHeight()-206;
        this.$cont.current.style.height = height+"px";
        windowEventHandler('resize', ()=>{
            const height = getWindowInnerHeight()-206;
            this.$cont.current.style.height = height+"px";
        });
    }
    genItems() {
        const Items = [];
        this.props.items.forEach((v) => {
            Items.push(
                <TemplateItem
                    {...v}
                    key={v.id}
                    checkItems={this.props.checkItems}
                    allCheckShow={this.props.allCheckShow}
                    handleContentClick={this.props.handleContentClick}
                    handleTemplateDel={this.props.handleTemplateDel}
                    handleTitleChange={this.props.handleTitleChange}
                />
            );
        });
        return Items;
    }
    getCheckIcon() {
        if (this.props.items.length == this.props.checkItems.length && this.props.checkItems.length != 0) {
            return check_right;
        } else {
            return check_circle;
        }
    }
    render() {
        const { allCheckShow, handleMangerTemplate, handleDelList, handleAllCheckbox, items,checkItems } = this.props;
        return (
            <div className={style.wrapper}>
                {
                    items && items.length > 0 ? (allCheckShow ?
                        <div className={style.wrapperTop}>
                            <div className={style['check-wrap']} onClick={handleAllCheckbox}>
                                <img className={`${style['fl-element']} ${style['check-box']}`} src={this.getCheckIcon()} />
                            </div>
                            <span onClick={handleAllCheckbox}>全选</span>
                            <span className={`${style['fr-element']} ${style['done']}`} onClick={handleMangerTemplate}>完成</span>
                            {
                                checkItems.length>0?<span className={`${style['fr-element']} ${style['del-items']}`} onClick={handleDelList}>删除</span>:
                                <span className={`${style['fr-element']} ${style['del-items-gray']}`}>删除</span>
                            }
                        </div> :
                        <div className={style.wrapperTop}>
                            <span className={`${style['fr-element']} ${style['manger']}`} onClick={handleMangerTemplate}>管理</span>
                    </div>) : <div style={{height:'36px'}}></div>
                }
                <div className={style.tempLists} ref={this.$cont}>
                    {
                        this.genItems().length > 0?this.genItems():
                        <Empty message={'还没有保存模板'}></Empty>
                    }
                </div>
            </div>
        )
    }
}

export default TemplateItems;

TemplateItems.propTypes = {
    items: PropTypes.arrayOf(PropTypes.object),
    handleContentClick: PropTypes.func,
    handleUpdate: PropTypes.func,
    handleTemplateDel: PropTypes.func,
    handleTitleChange: PropTypes.func
};