Listen to children events passively with React ES6 (without jquery)

Question

I want to make a kind of accordion expanding panel: but I don't want to have a component for accordion and another for a single expanding panel. my objective is to make something like this:

note: I have it working in another environment that uses named event listeners from a specific framework but I want to make it without frameworks, only react ES6

<ExpandingGroup id={'groupOne'} uniqOpen={true}>
  <ExpandingPanel id={'panelOne'}  />
  <ExpandingPanel id={'panelTwo'}  />
  <ExpandingPanel id={'panelThree'}/>
  <ExpandingPanel id={'panelFour'} />
</ExpandingGroup>

So when I click to expand the panel one, it expands it self and when I click on panel two (and uniqOpen flag is on) the panel two will open and panel one will be closed; My problem to play with props and callbacks is that I'll have to pollute the code and have two different components the do the same thing. Why not just nest a group of ExpandingPanels inside a ExpandingGroup scope.

this is my code for the ExpandingPanel: (ignore Row, Column and Label layouts)

import React from 'react';
import PropTypes from 'prop-types';
import Label from 'Base/Components/Label';
import Column from 'Base/Layouts/Column';
import Row from 'Base/Layouts/Row';

class ExpandPanel extends React.Component {
    constructor(props) {
        super(props);

        this.id = this.props.id;
        this.groupId = undefined;
        this.anchorId = `anchor_${this.id}`;
        this.panelId = `panel_${this.id}`;
        this.colors = {
            white: '#ffffff',
            border: '#333333',
        };
        this.dim = {
            minWidth: 40
        }

        this.styles = styles.bind(this);
        this.getMaxHeight = getMaxHeight.bind(this);
        this.handleUniq = handleUniq.bind(this);
        this.handleClose = handleClose.bind(this);
        this.handleOpenPanel = handleOpenPanel.bind(this);
        this.handleToggle = handleToggle.bind(this);
        this.checkExpanded = checkExpanded.bind(this);
        this.setMyGroup = setMyGroup.bind(this);

        this.state = {
            isDrawerOpen: this.props.startOpen,
            height: 'fit-content',
        }
    };

    componentDidMount() {
        setTimeout(() => {
            this.setState({ height: this.getMaxHeight() });
        });
        let myInstance = document.getElementById(this.anchorId);
        this.setMyGroup(myInstance.parentNode.parentNode.parentNode.id);
        window.addEventListener('click', this.checkExpanded);
    };

    componentWillUnmount() {
        window.removeEventListener('click', this.checkExpanded);
    };

    renderAnchor() {
        return (
            <Row id={this.anchorId} height={this.props.anchorHeight} onClick={ this.handleToggle } style={ this.styles('anchor') } >
                {this.props.anchor}
            </Row>
        );
    };

    renderPanel() {
        let height = this.props.autoHeight ? 'auto' : this.props.panelHeight;
        return (
            <Column id={this.panelId} height={height} style={ this.styles('panel') } >
                {this.props.panel}
            </Column>
        )
    };

    render() {
        return (
            <div style={this.styles('margin')}>
                <Column id={'ExpandPanel'} width={'100%'} height={'auto'} boxShadow={true} style={this.styles('root')}>
                    { this.renderAnchor() }
                    { this.renderPanel() }
                </Column>
            </div>
        );
    };

};
function setMyGroup(id) {
    this.groupId = id;
}

function checkExpanded(click) {
    let groupNode = click.path.filter( c => c && c.id && c.id.includes('ExpandGroup_') )[0];
    let groupName = '';
    if (groupNode && groupNode.id) groupName = groupNode.id;
    else {
        console.log('Not ExpandGroup click');
        return null;
    }
    let isUniq = groupName.split('_');
        isUniq = !!(isUniq[isUniq.length -1]);

    if (isUniq) {
        let isMyGroup = groupName === this.groupId;
        if (!isMyGroup) return null;

        let anchorNode = click.path.filter( c => c && c.id && c.id.includes('ExpandPanel') )[0];
        let anchorName = anchorNode.firstChild.id;

        if (isMyGroup && anchorName !== this.anchorId) this.handleClose();
    } else return null;
};

function handleToggle(e) {
    if (this.state.isDrawerOpen) this.handleClose();
    else this.handleOpenPanel();

    this.props.anchorClickCB({id: this.id, isDrawerOpen: !this.state.isDrawerOpen })
};

function handleClose() {
    this.setState({isDrawerOpen: false}, this.props.onClose);
};

function handleOpenPanel() {
    this.setState({isDrawerOpen: true});
};

function handleUniq({paramId, paramGroup}) {
    let sameGroup = this.props.uniqGroup === paramGroup;
    let otherId = this.id !== paramId;

    if ( sameGroup && otherId ) this.handleClose();
};

function getMaxHeight() {
    let panel = document.getElementById(this.panelId);

    if (this.props.autoHeight && panel) {
        return (panel.clientHeight + this.props.anchorHeight);
    }
    return (this.props.panelHeight + this.props.anchorHeight);
};

function styles(option) {
    let rootMargin = this.props.showMargin && this.state.isDrawerOpen ? 10 : 0;
    let panelHeightToogle = this.state.isDrawerOpen ? this.state.height : this.props.anchorHeight;
    let anchorHeight = this.props.anchorHeight < this.dim.minWidth ? this.dim.minWidth : this.props.anchorHeight;

    const styleObject = {
        root: {
            maxHeight: panelHeightToogle,
            minHeight: anchorHeight,
            transition: `max-height ${this.props.transition}s linear`,
            overflow: 'hidden',
            ...this.props.style
        },
        anchor: {
            cursor: 'pointer',
            minHeight: anchorHeight,
            ...this.props.anchorStyle
        },
        panel: {
            width: "100%",
            overflow: 'auto',
            ...this.props.panelStyle
        },
        margin:{
            marginBottom: rootMargin,
            marginTop: rootMargin,
            transition: `margin 0.15s linear`,
        }
    };
    return styleObject[option]
};

ExpandPanel.defaultProps = {
    id: 0,
    uniqOpen: false,
    uniqGroup: 'ExpandPanel',

    anchor: <Row><Label text={'Default Anchor'}/></Row>,
    anchorClickCB: ()=>{},
    onClose: ()=>{},
    anchorHeight: 50,
    anchorStyle: {},

    panel: <Column><Label text={'Default Panel'}/></Column>,
    panelHeight: 200,
    autoHeight: false,
    panelStyle: {},

    showMargin: false,
    startOpen: false,
    transition: 0.45,
    style: {},
};

ExpandPanel.propTypes = {
    id: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]),
    uniqOpen: PropTypes.bool,
    uniqGroup: PropTypes.string,

    anchor: PropTypes.object,
    anchorHeight: PropTypes.number,
    anchorClickCB: PropTypes.func,
    anchorStyle: PropTypes.object,

    panel: PropTypes.object,
    panelHeight: PropTypes.number,
    autoHeight: PropTypes.bool,
    panelStyle: PropTypes.object,

    startOpen: PropTypes.bool,
    transition: PropTypes.number,
    style: PropTypes.object,
};

export default ExpandPanel;

and this is my code for the ExpandGroup:

import React from 'react';
import PropTypes from 'prop-types';

class ExpandGroup extends React.Component {
    constructor(props) {
        super(props);
        this.id = `ExpandGroup_${this.props.id}_${this.props.uniqOpen}`;
    };

    render() {
        return (
            <div id={this.id}>
                {this.props.children}
            </div>
        );
    };

};

ExpandGroup.defaultProps = {
    id: 'default',
    uniqOpen: false,
};

ExpandGroup.propTypes = {
    id: PropTypes.string,
    uniqOpen: PropTypes.bool,
};

export default ExpandGroup;

and this is the call:

render() {
    return (
        <ExpandGroup id={'group-01'} uniqOpen={true}>
            <ExpandPanel id={'bloc-01'}/>,
            <ExpandPanel id={'bloc-02'}/>,
            <ExpandPanel id={'bloc-03'}/>,
        </ExpandGroup>
    );
};

Do you mean something like this? https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children — Cameron Downer, Apr 26 '19 at 00:32

score 0 · Answer 1 · answered May 07 '19 at 06:29

I used the @Cameron Downer suggestion even if I was not so adept to clone the children and for my surprise it worked perfectly. This is my solution:

import React from 'react';
import PropTypes from 'prop-types';
// import ExpandPanel from '../ExpandPanel';

let count = 0;

class ExpandGroup extends React.Component {
    constructor(props) {
        super(props);
        this.id = `${this.props.id}_${count++}`;

        this.state = {
            openChildId: '',
        };

        this.styles = styles.bind(this);
        this.updateOpenChildId = updateOpenChildId.bind(this);
        this.panelPropsFix = panelPropsFix.bind(this);
        this.checkStartOpen = checkStartOpen.bind(this);
    };

    render() {
        return (
            <div id={this.id} style={this.styles('root')}>
                {this.panelPropsFix()}
            </div>
        );
    };
};

function panelPropsFix() {
    return React.Children.map(this.props.children, 
        (child, key) => { 
            let childClass = child.type.toString().split(' ')[1];
            if (childClass === 'ExpandPanel') {
                let childId = child.props.id;
                return React.cloneElement(child, {
                    key: key,
                    startOpen: this.checkStartOpen(childId),
                    style: this.styles('child'),
                    openId: (this.props.singleOpen) ? this.state.openChildId : childId,
                    singleOpenCB: id => this.updateOpenChildId(id),
                })
            }
        }
    );
};

function checkStartOpen(childId) {
    if (typeof this.props.openPanels === 'boolean') return this.props.openPanels;
    else if (this.props.openPanels instanceof Array) {
        return this.props.openPanels.includes(childId);
    }
    return false;
};

function updateOpenChildId(id) {
    if (id === this.state.openChildId) {
        this.setState({openChildId: ''});
    } else {
        this.setState({openChildId: id});
    }
};

function styles(option) {
    const styleObject = {
        root: {
            margin: this.props.margin,
            padding: this.props.padding,
            ...this.props.style
        },
        child: {
            ...this.props.panelsStyle,
        }
    };
    return styleObject[option]
};

ExpandGroup.defaultProps = {
    id: 'ExpandGroup',

    children: undefined,
    singleOpen: false,
    openPanels: false,
    panelsStyle: {},

    margin: 0,
    padding: 0,
    style: {},
};

ExpandGroup.propTypes = {
    id: PropTypes.string,

    // children: PropTypes.arrayOf(PropTypes.instanceOf(ExpandPanel)),
    singleOpen: PropTypes.bool,
    openPanels: PropTypes.oneOfType([ PropTypes.bool, PropTypes.array ]),
    panelsStyle: PropTypes.object,

    margin: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]),
    padding: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]),
    style: PropTypes.object,
};

export default ExpandGroup;

and

import React from 'react';
import PropTypes from 'prop-types';
import Label from 'Base/Components/Label';
import Column from 'Base/Layouts/Column';
import Row from 'Base/Layouts/Row';

class ExpandPanel extends React.Component {
    constructor(props) {
        super(props);

        this.id = this.props.id;
        this.colors = {
            white: '#ffffff',
            border: '#333333',
        };
        this.dim = {
            minWidth: 40
        }

        this.styles = styles.bind(this);
        this.getMaxHeight = getMaxHeight.bind(this);
        this.handleClose = handleClose.bind(this);
        this.handleOpenPanel = handleOpenPanel.bind(this);
        this.handleToggle = handleToggle.bind(this);

        this.state = {
            isDrawerOpen: this.props.startOpen,
            height: 'fit-content',
        }
    };

    componentDidMount() {
        setTimeout(() => {
            this.setState({ height: this.getMaxHeight() });
        });
    };

    componentWillReceiveProps(nextProps) {
        if (nextProps && nextProps.openId !== this.id)
            this.handleClose();
    };

    renderAnchor() {
        return (
            <Row id={'anchor'} height={this.props.anchorHeight} boxShadow={this.props.boxShadow} onClick={ this.handleToggle } style={ this.styles('anchor') } >
                {this.props.anchor}
            </Row>
        );
    };

    renderPanel() {
        let height = this.props.autoHeight ? 'auto' : this.props.panelHeight;
        return (
            <Column id={'panel'} height={height} boxShadow={this.props.boxShadow} style={ this.styles('panel') } >
                {this.props.panel}
            </Column>
        )
    };

    render() {
        return (
            <Column id={this.id} width={'100%'} height={'auto'} boxShadow={this.props.boxShadow} style={this.styles('root')}>
                { this.renderAnchor() }
                { this.renderPanel() }
            </Column>
        );
    };

};

function handleToggle(e) {
    if (this.state.isDrawerOpen) this.handleClose();
    else this.handleOpenPanel();

    this.props.singleOpenCB(this.id);
    this.props.anchorClickCB({id: this.id, isDrawerOpen: !this.state.isDrawerOpen });
};

function handleClose() {
    this.setState({isDrawerOpen: false}, this.props.onClose);
};

function handleOpenPanel() {
    this.setState({isDrawerOpen: true},  this.props.onOpen);
};

function getMaxHeight() {
    let panel = document.getElementById(this.panelId);

    if (this.props.autoHeight && panel) {
        return (panel.clientHeight + this.props.anchorHeight);
    }
    return (this.props.panelHeight + this.props.anchorHeight);
};

function styles(option) {
    let rootMargin = this.props.showMargin && this.state.isDrawerOpen ? 10 : 0;
    let panelHeightToogle = this.state.isDrawerOpen ? this.state.height : this.props.anchorHeight;
    let anchorHeight = this.props.anchorHeight < this.dim.minWidth ? this.dim.minWidth : this.props.anchorHeight;

    const styleObject = {
        root: {
            maxHeight: panelHeightToogle,
            minHeight: anchorHeight,
            transition: `max-height ${this.props.transition}s linear`,
            overflow: 'hidden',
            ...this.props.style
        },
        anchor: {
            cursor: 'pointer',
            minHeight: anchorHeight,
            ...this.props.anchorStyle
        },
        panel: {
            width: "100%",
            overflow: 'auto',
            ...this.props.panelStyle
        },
        margin:{
            marginBottom: rootMargin,
            marginTop: rootMargin,
            transition: `margin 0.15s linear`,
        }
    };
    return styleObject[option]
};

ExpandPanel.defaultProps = {
    id: 0,

    anchor: <Row><Label text={'Default Anchor'}/></Row>,
    anchorClickCB: ()=>{},
    singleOpenCB: ()=>{}, // for ExpandGroup internal use
    openId: '',           // for ExpandGroup internal use
    anchorHeight: 35,
    anchorStyle: {},

    panel: <Column><Label text={'Default Panel'}/></Column>,
    onOpen: ()=>{},
    onClose: ()=>{},
    autoHeight: false,
    panelHeight: 200,
    panelStyle: {},

    startOpen: false,
    boxShadow: true,
    transition: 0.45,
    style: {},
};

ExpandPanel.propTypes = {
    id: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]),

    anchor: PropTypes.object,
    anchorClickCB: PropTypes.func,
    singleOpenCB: PropTypes.func,   // for ExpandGroup internal use
    openId: PropTypes.string,       // for ExpandGroup internal use
    anchorHeight: PropTypes.number,
    anchorStyle: PropTypes.object,

    panel: PropTypes.object,
    onOpen: PropTypes.func,
    onClose: PropTypes.func,
    autoHeight: PropTypes.bool,
    panelHeight: PropTypes.number,
    panelStyle: PropTypes.object,

    startOpen: PropTypes.bool,
    boxShadow: PropTypes.bool,
    transition: PropTypes.number,
    style: PropTypes.object,
};

export default ExpandPanel;

so the call can be like this:

<ExpandGroup singleOpen={true}>
    <ExpandPanel id={'bloc-01'}/>
    <ExpandPanel id={'bloc-02'}/>
    <ExpandPanel id={'bloc-03'}/>
    <ExpandPanel id={'bloc-04'}/>
    <ExpandPanel id={'bloc-05'}/>
</ExpandGroup>

Listen to children events passively with React ES6 (without jquery)

1 Answers1