-1

Tenho um componente Menu

import React, { Component } from "react";
import "./Menu.css";
import { connect } from "react-redux";
import Sidebar from "react-sidebar";
import SidebarContent from "./sidebar_content";
import MaterialTitlePanel from "./material_title_panel";
import { Button } from "react-bootstrap";

const styles = {
  contentHeaderMenuLink: {
    textDecoration: "none",
    color: "white",
    padding: 0
  },
  content: {
    padding: "0px",
    height: "0px"
  }
};

class Menu extends Component {

  constructor(props) {
    super(props);

    this.state = {
      docked: false,
      open: true,
      transitions: true,
      touch: true,
      shadow: false,
      pullRight: false,
      touchHandleWidth: 20,
      dragToggleDistance: 30
    };

    this.renderPropCheckbox = this.renderPropCheckbox.bind(this);
    this.renderPropNumber = this.renderPropNumber.bind(this);
    this.onSetOpen = this.onSetOpen.bind(this);
    this.menuButtonClick = this.menuButtonClick.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
  }

  onSetOpen(open) {
    this.setState({ open });
  }

  getOpenStatus() {
    return this.setState;
  }

  menuButtonClick(ev) {
    ev.preventDefault();
    this.onSetOpen(!this.state.open);
  }

  closeMenu() {
    this.onSetOpen(false);
  }

  renderPropCheckbox(prop) {
    const toggleMethod = ev => {
      const newState = {};
      newState[prop] = ev.target.checked;
      this.setState(newState);
    };

    return (
      <p key={prop}>
        <label htmlFor={prop}>
          <input
            type="checkbox"
            onChange={toggleMethod}
            checked={this.state[prop]}
            id={prop}
          />
          {prop}
        </label>
      </p>
    );
  }

  renderPropNumber(prop) {
    const setMethod = ev => {
      const newState = {};
      newState[prop] = parseInt(ev.target.value, 10);
      this.setState(newState);
    };

    return (
      <p key={prop}>
        {prop}{" "}
        <input type="number" onChange={setMethod} value={this.state[prop]} />
      </p>
    );
  }

  render() {
    const sidebar = (
      <SidebarContent
        isPermissaoCOREC={this.props.isPermissaoCOREC}
        isPermissaoADM={this.props.isPermissaoADM}/>
    );

    const contentHeader = (
      <div>
        {!!this.getOpenStatus() ? (
          <div id="headerBlock">
            {!this.state.docked && (
              <Button
                onClick={this.menuButtonClick}
                href="#"
                style={styles.contentHeaderMenuLink}
                className="buttonMenu"
              >
                <i className="material-icons button-menu-icon">menu</i>
              </Button>
            )}
          </div>
        ) : (
          <></>
        )}
      </div>
    );

    const sidebarProps = {
      sidebar,
      docked: this.state.docked,
      sidebarClassName: "custom-sidebar-class",
      contentId: "custom-sidebar-content-id",
      overlayId: "sidebar-overlay",
      open: this.state.open,
      touch: this.state.touch,
      shadow: this.state.shadow,
      pullRight: this.state.pullRight,
      touchHandleWidth: this.state.touchHandleWidth,
      dragToggleDistance: this.state.dragToggleDistance,
      transitions: this.state.transitions,
      onSetOpen: this.onSetOpen
    };

    return (
        <Sidebar {...sidebarProps}>
          <MaterialTitlePanel title={contentHeader}></MaterialTitlePanel>
        </Sidebar>
    );
  }
}

const mapStateToProps = state => ({
  isPermissaoCOREC: state.authentication.isPermissaoCOREC,
  isPermissaoADM: state.authentication.isPermissaoADM
});

export default connect(mapStateToProps)(Menu);

E um componente SidebarContent:

import React from "react";
import PropTypes from "prop-types";
import MaterialTitlePanel from "./material_title_panel";
import { NavLink } from "react-router-dom";

const styles = {
  sidebar: {
    width: 256
  },
  content: {
    backgroundColor: "white",
    opacity: 1,
    overflowY: "auto"
  }
};

const scrollDown = () => {
  window.document
    .getElementsByClassName("custom-sidebar-class")[0]
    .scrollTo(
      0,
      window.document.getElementsByClassName("custom-sidebar-class")[0]
        .scrollHeight
    );
};

const scrollUp = () => {
  window.document
    .getElementsByClassName("custom-sidebar-class")[0]
    .scrollTo(0, 0);
};

const shouldShowScroll = size => {
  if (size + 1 > 6) {
    return true;
  }
  return false;
};

const arrayItens = props => {
  let menuItens = [
    <NavLink
      key="1"
      to="/consulta"
      className="nav-link consultas"
      activeClassName="nav-link-active consultas-azul"
    >
      <div style={{ textAlign: "center" }}>
        <p className="nav-menu-texto" style={{ marginTop: "20%" }}>
          Consultas
        </p>
      </div>
    </NavLink>,
    <NavLink
      key="2"
      to="/conteudo"
      className="nav-link formulario"
      activeClassName="nav-link-active formulario-azul"
      onClick={close}
    >
      <div style={{ textAlign: "center" }}>
        <p className="nav-menu-texto" style={{ marginTop: "20%" }}>
          Formulários
        </p>
      </div>
    </NavLink>,
    <NavLink
      key="3"
      to="/avisos"
      className="nav-link avisos"
      activeClassName="nav-link-active avisos-azul"
    >
      <div style={{ textAlign: "center" }}>
        <p className="nav-menu-texto" style={{ marginTop: "20%" }}>
          Avisos
        </p>
      </div>
    </NavLink>
  ];

  if (props.isPermissaoCOREC || props.isPermissaoADM) {
    menuItens.push(
      <NavLink
        key="4"
        to="/desbloqueio"
        className="nav-link desbloquear"
        activeClassName="nav-link-active desbloquear-azul"
      >
        <div style={{ textAlign: "center" }}>
          <p className="nav-menu-texto" style={{ marginTop: "20%" }}>
            Desbloquear
          </p>
        </div>
      </NavLink>
    );
  }

  if (props.isPermissaoCOREC || props.isPermissaoADM) {
    menuItens.splice(
      0,
      0,
      <NavLink
        key="5"
        to="/solicitacoes"
        className="nav-link solicitacoes"
        activeClassName="nav-link-active solicitacoes-azul"
      >
        <div style={{ textAlign: "center" }}>
          <p className="nav-menu-texto" style={{ marginTop: "20%" }}>
            Solicitações
          </p>
        </div>
      </NavLink>
    );
  }

  let inicio = 0;

  return menuItens.slice(inicio, inicio + 12);
};

const SidebarContent = props => {
  return (
    <MaterialTitlePanel style={{ textAlign: "center" }}>
      <div style={styles.content}>
        {shouldShowScroll(arrayItens(props).length) ? (
          <div className="row">
            <button onClick={scrollDown} className="button-go down">
              <i className="material-icons">keyboard_arrow_down</i>
            </button>
          </div>
        ) : (
          <></>
        )}
        {console.log("props: ", props)}
        <NavLink
          to="/minha-area"
          className="nav-link minha-area"
          activeClassName="nav-link-active minha-area-azul"
          style={
            shouldShowScroll(arrayItens(props).length)
              ? { marginTop: "32px" }
              : {}
          }
        >
          <div style={{ textAlign: "center" }}>
            <p className="nav-menu-texto" style={{ marginTop: "20%" }}>
              Minha Área
            </p>
          </div>
        </NavLink>

        {/* <button className="openedMenuButton" style={{float:'right'}}>
            <i className="material-icons white-text arrow-left">
              keyboard_arrow_left
            </i>
        </button> */}
        {arrayItens(props)}

        {shouldShowScroll(arrayItens(props).length) ? (
          <div className="row">
            <button onClick={scrollUp} className="button-go up">
              <i className="material-icons">keyboard_arrow_up</i>
            </button>
          </div>
        ) : (
          <></>
        )}
      </div>
    </MaterialTitlePanel>
  );
};

SidebarContent.propTypes = {
  style: PropTypes.object
};

export default SidebarContent;

Como chamar a função closeMenu de Menu dentro do componente SidebarContent?

Testei passar como propriedade mas não funcionou, existe alguma maneira correta de fazer isso?

1 Resposta 1

2

A forma mais típica é passar através do props, mas atente-se para não invocar a função ao invés de passá-la. Outra questão que você deve estar atento é ao contexto. Por conta disso recomendo que passe a função usando arrow function. Ex.: () => {closeMenu()}

No componente Menu

<SidebarContent 
    isPermissaoCOREC={this.props.isPermissaoCOREC}
    isPermissaoADM={this.props.isPermissaoADM}
    onPressClose={() => {closeMenu()}}
/>

No componente SidebarContent

<NavLink
  key="2"
  to="/conteudo"
  className="nav-link formulario"
  activeClassName="nav-link-active formulario-azul"
  onClick={this.props.onPressClose}
>

Como estará utilizando arrow function não precisará do this.closeMenu = this.closeMenu.bind(this);

4
  • Caso tenha a função bind pode não funcionar? Commented 28/11/2019 às 0:17
  • Com a função bind (inserido da forma que você fez lá no construtor) você insere a função sem chama-la. Ex.: onPressClose={() => {this.closeMenu}}. Você também pode fazer onPressClose={this.closeMenu.bind(this)} Commented 28/11/2019 às 11:30
  • Com o bind não foi, porém da sua forma foi mais ou menos..tipo: Eu clico no NavLink e ele chama a função, porém o state não muda se eu não estiver com o NavLink selecionado, teria ideia do porque disso? Commented 28/11/2019 às 11:38
  • 1
    Resolveu parte do meu problema, valeu. Commented 28/11/2019 às 16:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .