{"size": 2209, "ext": "js", "max_stars_repo_path": "examples/src/ContextMenuWithSubmenuWithBoundariesElementExample.js", "max_stars_repo_name": "smoorebox/box-ui-elements", "max_stars_repo_stars_event_min_datetime": "2021-05-03T17:05:38.000Z", "max_stars_repo_stars_event_max_datetime": "2021-05-03T17:05:38.000Z", "max_issues_repo_path": "examples/src/ContextMenuWithSubmenuWithBoundariesElementExample.js", "max_issues_repo_name": "smoorebox/box-ui-elements", "max_issues_repo_issues_event_min_datetime": "2019-08-14T22:22:56.000Z", "max_issues_repo_issues_event_max_datetime": "2019-08-14T22:22:56.000Z", "max_forks_repo_path": "examples/src/ContextMenuWithSubmenuWithBoundariesElementExample.js", "max_forks_repo_name": "smoorebox/box-ui-elements", "max_forks_repo_forks_event_min_datetime": "2019-03-05T19:57:45.000Z", "max_forks_repo_forks_event_max_datetime": "2019-03-05T19:57:45.000Z"}
{"max_stars_count": 1, "max_issues_count": 1, "max_forks_count": 1, "avg_line_length": 36.2131147541, "max_line_length": 84, "alphanum_fraction": 0.4210049796}
/* eslint-disable no-unused-expressions */
import * as React from 'react';

import { Menu, SubmenuItem, MenuItem } from '../../src/components/menu';
import ContextMenu from '../../src/components/context-menu';

class ContextMenuWithSubmenuWithBoundariesElementExample extends React.Component {
    state = {
        rightBoundaryElement: null,
        bottomBoundaryElement: null,
    };

    render() {
        return (
            <ContextMenu>
                <div
                    ref={ref => {
                        !this.state.rightBoundaryElement &&
                            this.setState({
                                rightBoundaryElement: ref,
                            });
                    }}
                    className="context-menu-example-target"
                    style={{
                        height: 200,
                    }}
                >
                    Target Component - right click me
                </div>
                <Menu
                    setRef={ref => {
                        !this.state.bottomBoundaryElement &&
                            this.setState({
                                bottomBoundaryElement: ref,
                            });
                    }}
                >
                    <MenuItem>View Profile</MenuItem>
                    <MenuItem>View Profile</MenuItem>
                    {this.state.rightBoundaryElement && (
                        <SubmenuItem
                            bottomBoundaryElement={this.state.bottomBoundaryElement}
                            rightBoundaryElement={this.state.rightBoundaryElement}
                        >
                            Submenu
                            <Menu>
                                <MenuItem>View Profile</MenuItem>
                                <MenuItem>View Profile</MenuItem>
                                <MenuItem>View Profile</MenuItem>
                            </Menu>
                        </SubmenuItem>
                    )}
                    <MenuItem>Help</MenuItem>
                </Menu>
            </ContextMenu>
        );
    }
}

export default ContextMenuWithSubmenuWithBoundariesElementExample;
