import * as React from 'react';

export class ScrollBox extends React.Component<React.PropsWithChildren<{}>> {
    onWheel = (e: React.WheelEvent) => {
        if (e.currentTarget.scrollHeight > e.currentTarget.clientHeight) {
            // If the element has a scroll bar, then we don't want the containing collection to zoom
            e.stopPropagation();
        }
    };

    render() {
        return (
            <div
                style={{
                    overflow: 'auto',
                    width: '100%',
                    height: '100%',
                }}
                onWheel={this.onWheel}>
                {this.props.children}
            </div>
        );
    }
}