How to use material-ui-popup-state - 10 common examples

const ScheduleAddCell = withStyles(styles)((props) => {
    const { classes, section, courseDetails, term } = props;
    const popupState = usePopupState({ variant: 'popover' });

    const closeAndAddCourse = (scheduleIndex) => {
        popupState.close();
        for (const meeting of section.meetings) {
            if (meeting.time === 'TBA') {
                openSnackbar('success', 'Online/TBA class added');
                // See Added Classes."
                break;
            }
        }

        if (scheduleIndex !== -1) {
            addCourse(section, courseDetails, term, scheduleIndex);
        }
    };

export const customBindPopover = (popupState: any) => {
  const popoverProps = bindPopover(popupState);

  // @ts-ignore
  delete popoverProps.disableAutoFocus;
  // @ts-ignore
  delete popoverProps.disableEnforceFocus;
  // @ts-ignore
  delete popoverProps.disableRestoreFocus;

  return {
    ...popoverProps,
  };
};

export const customBindHover = (popupState: any) => {
  const hoverProps = bindHover(popupState);

  // @ts-ignore
  delete hoverProps.disableAutoFocus;
  // @ts-ignore
  delete hoverProps.disableEnforceFocus;
  // @ts-ignore
  delete hoverProps.disableRestoreFocus;

  return {
    ...hoverProps,
  };
};

{(popupState) => (
                            
                                <button color="primary">
                                    Copy Schedule
                                </button>
                                <menu>
                                    {[0, 1, 2, 3].map((index) =&gt; {
                                        return (
                                            <menuitem disabled="{"> {
                                                    console.log(index);
                                                    copySchedule(
                                                        AppStore.getCurrentScheduleIndex(),
                                                        index</menuitem></menu>

{(popupState) => (
                            
                                <button color="primary">
                                    Copy Schedule
                                </button>
                                <menu>
                                    {[0, 1, 2, 3].map((index) =&gt; {
                                        return (
                                            <menuitem disabled="{"> {
                                                    console.log(index);
                                                    copySchedule(
                                                        AppStore.getCurrentScheduleIndex(),
                                                        index
                                                    );
                                                    popupState.close();
                                                }}
                                            &gt;</menuitem></menu>

{(popupState) => (
                                      
                                        
                                          
                                        
                                        <menu>
                                          {row[column.type].map(
                                            (
                                              action: Datasource,
                                              actionId: React.Key
                                            ) =&gt; (
                                              <menuitem> {
                                                  action.function();
                                                  popupState.close();
                                                }}
                                              &gt;</menuitem></menu>

{popupState => (
        <div>
          <button color="primary">
            Open Popover
          </button>
          
            
              The content of the Popover.
            </div>

{(popupState) => {
          const trigger = bindTrigger(popupState);
          const popover = customBindPopover(popupState);
          return (
            <span>
              {useText ? (
                <button disabled="{disabled}" size="small">) =&gt; {
                    e.stopPropagation();
                    trigger.onClick(e);
                  }}
                &gt;</button></span>

{popupState => (
        
          <button color="primary">
            Open Menu
          </button>
          <menu>
            <menuitem>Cake</menuitem>
            <menuitem>Death</menuitem>
          </menu>
        
      )}

{(popupState) => (
            <>
              
                How to add a new node?
              
              
                
                  Kalm is not responsible for managing the addition and deletion of nodes. You need to operate where