toggle-corp/react-store

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

import styles from './styles.scss';

const propTypes = {
    active: PropTypes.bool,
    children: PropTypes.oneOfType([
        PropTypes.node,
    ]),
    className: PropTypes.string,
    scrollIntoView: PropTypes.bool,
};

const defaultProps = {
    active: false,
    children: '',
    className: '',
    scrollIntoView: false,
};

export default class ListItem extends React.PureComponent {
    static propTypes = propTypes;

    static defaultProps = defaultProps;

    componentDidMount() {
        const { scrollIntoView } = this.props;
        this.scrollIntoView(scrollIntoView);
    }

    componentDidUpdate() {
        const { scrollIntoView } = this.props;
        this.scrollIntoView(scrollIntoView);
    }

    getClassName = () => {
        const {
            className,
            active,
        } = this.props;

        const classNames = [
            className,
            'list-item',
            styles.listItem,
        ];

        if (active) {
            classNames.push('active');
            classNames.push(styles.active);
        }

        return classNames.join(' ');
    }

    scrollIntoView = (scrollIntoView) => {
        if (!scrollIntoView) {
            return;
        }

        if (!this.container) {
            return;
        }

        if (!this.container.scrollIntoViewIfNeeded) {
            return;
        }

        this.container.scrollIntoViewIfNeeded(false);
    }

    render() {
        const {
            children,
            active, // eslint-disable-line no-unused-vars, @typescript-eslint/no-unused-vars
            scrollIntoView, // eslint-disable-line no-unused-vars, @typescript-eslint/no-unused-vars
            className, // eslint-disable-line no-unused-vars, @typescript-eslint/no-unused-vars
            ...otherProps
        } = this.props;

        return (
            <button
                ref={(el) => { this.container = el; }}
                className={this.getClassName()}
                type="button"
                {...otherProps}
            >
                { children }
            </button>
        );
    }
}