Is there a better way to dynamic change height ?

[andrew781026]

below if my code to make listview dynamic change height , Is there a better way to dynamic change height ?

// MailContent.js 
// className with tailwind css : https://tailwindcss.com/
import React from "react";
import {uid} from "react-uid";
import List from 'react-virtualized-listview';

function createRecord(count) {

    let records = [];

    for (let i = 0; i < count; i++) {
        records.push({
            username: `react*id-${i}`,
            email: `angular*id-${new Date().getTime()}@mail-auto.net`,
            senderShow: `vue*id-${i}@mail-auto.net`,
            time: new Date().toString(),
            subject: 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            message: '                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
        });
    }

    return records;
}

class RwdList extends React.Component {

    state = {
        height: null
    };

    componentDidMount() {

        window.addEventListener('resize', this.resetHeight);  

        this.getSingleElementHeight();

        // set the single element height
        this.resetHeight();
    }

    componentWillUnmount() {

        window.removeEventListener('resize', this.resetHeight);
    }

    resetHeight = () => {

        const newHeight = this.getSingleElementHeight();
        if (newHeight !== this.state.height) this.setState({height: newHeight});
    };

    getSingleElementHeight = () => {

        // console.dir(divElement);
        // console.dir(this.listRef); // firstChild.firstChild.clientHeight
        // console.dir(this.listRef.list); // firstChild.firstChild.clientHeight
        // console.dir(this.listRef.list.firstChild.firstChild); // firstChild.firstChild.clientHeight
        // console.log('clientHeight=', this.listRef.list.firstChild.firstChild.clientHeight); // firstChild.firstChild.clientHeight

        // the clientHeight = list.firstChild.firstChild.clientHeight + 39

        // |  px  |     rem       |
        // ------------------------
        // |  12  | 12/16 = .75   | => 12 px = 0.75 rem

        // 2.4 rem = 38.4 px   

        return this.listRef.list.firstChild.firstChild.clientHeight + 39;
    };

    render() {

        // console.log('this.state.height=', this.state.height);

        return (
            <List
                ref={listRef => this.listRef = listRef}
                {...this.props}
                rowHeight={this.state.height || this.props.rowHeight}
            />
        )
    }

}

class MailContent extends React.Component {

    state = {
        data: createRecord(1000)
    };

    getMailList = () => this.state.data;

    getShortMsg = (message) => {

        if (!message) return '';
        else {

            const tempMsg = message.trim().replace(/(<([^>]+)>)/ig, '');

            if (tempMsg.length > 90) return tempMsg.substring(0, 90) + ' ...';
            else return tempMsg;
        }
    };

    rowRenderer = ({index, style = {}}) => {

        const mailList = this.getMailList();
        const item = mailList[index];

        return (
            <div key={uid(item)}
                 className='overflow-hidden'
                 style={{border: '1px solid rgba(0,0,0,0.2)', borderTop: 'none', ...style}}
            >
                <div className='flex flex-col cursor-pointer m-12'>
                    <span>sender : {item.senderShow}</span>
                    <span>time : {item.time}</span>
                    <span>subject : {item.subject}</span>
                    <span>content : {this.getShortMsg(item.message)}</span>
                </div>
            </div>
        );
    };

    render() {

        const mailList = this.getMailList();

        return (
            <div className='flex flex-1 flex-col relative'>
                <div className='flex items-center w-full h-32 absolute bg-white'
                     style={{
                         border: '1px solid rgba(0,0,0,0.2)',
                         borderRadius: '16px 16px 0 0',
                         top: '-3.3rem',
                         zIndex: 5
                     }}>
                    <span className='mx-12 text-14'>Customer Name :</span>
                    ASUS
                </div>
                <RwdList
                    className='flex flex-1 w-full flex-col overflow-y-auto absolute pin-y'
                    rowHeight={this.state.height || 130}
                    overScanCount={5}
                    source={mailList}
                    renderItem={this.rowRenderer}
                />
            </div>
        )
    }
}

export default MailContent;

ScreenShots

desktop

mobile