{"size": 1418, "ext": "js", "max_stars_repo_path": "src/components/menu/submenuitem/index.js", "max_stars_repo_name": "jxmeslukin/ui95-1", "max_stars_repo_stars_event_min_datetime": "2019-10-04T14:07:30.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-11T22:56:42.000Z", "max_issues_repo_path": "src/components/menu/submenuitem/index.js", "max_issues_repo_name": "jxmeslukin/ui95-1", "max_issues_repo_issues_event_min_datetime": "2020-09-22T22:57:22.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T08:15:51.000Z", "max_forks_repo_path": "src/components/menu/submenuitem/index.js", "max_forks_repo_name": "jxmeslukin/ui95-1", "max_forks_repo_forks_event_min_datetime": "2019-05-26T09:57:20.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-04T12:05:41.000Z"}
{"max_stars_count": 177, "max_issues_count": 12, "max_forks_count": 19, "avg_line_length": 24.8771929825, "max_line_length": 64, "alphanum_fraction": 0.4992947814}
import { h, render, Component } from "preact";
import Icon from "../../icon";
import Menu from "../";
import Text from "../../text";
import "./style.css";

export default class SubMenuItem extends Component {
  constructor() {
    super();
    this.state = { open: false, canBlur: true };
  }

  render({
    item,
    onLaunchApp,
    onClose,
    zIndex,
    baseClassName,
    iconSize,
    onClick
  }) {
    return (
      <a
        class={`${baseClassName} ui95-menuitem--submenu`}
        onMouseEnter={() => this.setState({ open: true })}
        onFocus={() => this.setState({ open: true })}
        ref={el => (this.el = el)}
        onClick={e => {
          console.log("focusing", this.el);
          this.setState({ open: true });
          this.el.focus();
          e.preventDefault();
          e.stopPropagation();
        }}
        href="#"
      >
        {item.icon && <Icon name={item.icon} size={iconSize} />}
        <Text>{item.text || "Untitled"}</Text>
        <span>
          <Icon size="custom" name="chevron-black-right" />
          <Icon size="custom" name="chevron-white-right" />
        </span>
        {this.state.open && (
          <Menu
            items={item.items}
            onLaunchApp={onLaunchApp}
            onClose={onClick}
            attachTo={this.el}
            isSubmenu={true}
            zIndex={zIndex + 1}
          />
        )}
      </a>
    );
  }
}
