rids = grids.filter(g => grid.subgrids.includes(g.id));

    return dom.ul(
      {},
      subgrids.map(g => {
        return createElement(GridItem, {
          key: g.id,
          dispatch: this.props.dispatch,
          getSwatchColorPickerTooltip: this.props.getSwatchColorPickerTooltip,
          grid: g,
          grids,
          onSetGridOverlayColor: this.props.onSetGridOverlayColor,
          onToggleGridHighlighter: this.props.onToggleGridHighlighter,
          setSelectedNode: this.props.setSelectedNode,
        });
      })
    );
  }

  render() {
    const { dispatch, grid } = this.props;

    return createElement(
      Fragment,
      null,
      dom.li(
        {},
        dom.label(
          {},
          dom.input({
            checked: grid.highlighted,
            disabled: grid.disabled,
            type: "checkbox",
            value: grid.id,
            onChange: this.onGridCheckboxClick,
            title: getStr("layout.toggleGridHighlighter"),
          }),
          Rep({
            defaultRep: Rep.ElementNode,
            mode: MODE.TINY,
            object: translateNodeFrontToGrip(grid.nodeFront),
            onDOMNodeMouseOut: () => dispatch(unhighlightNode()),
            onDOMNodeMouseOver: () => dispatch(highlightNode(grid.nodeFront)),
            onInspectIconClick: (_, e) => {
              // Stoping click propagation to avoid firing onGridCheckboxClick()
              e.stopPropagation();
              this.onGridInspectIconClick(grid.nodeFront);
            },
          })
        ),
        dom.button({
          className: "layout-color-swatch",
          "data-color": grid.color,
          ref: this.swatchEl,
          style: {
            backgroundColor: grid.color,
          },
          title: getFormatStr("layout.colorSwatch.tooltip", grid.color),
        })
      ),
      this.renderSubgrids()
    );
  }
}

module.exports = GridItem;
PK