reactjs - Hur man lägger till en anpassad popover i react-calendar-timeline

Jag använder react-calendar-timeline(https://www.npmjs.com/package/react-calendar-timeline). Jag behöver lägga till ett anpassat popover som kommer att ha alla detaljer och ett formulär för att uppdatera det. Finns det någon prop där jag kan skicka en render-metod i den?

Svar #1

Efter att ha kollat öppna problem på react-calendar-timeline fick jag veta att det inte stöder anpassade popovers för att visa ytterligare data. Men det finns en lösning som kan uppnå samma sak och det är itemRenderer.

Här är skelettet. Placera koden nedan i en separat komponent.

<div
    {...getItemProps({
      style: {
        background,             
        color,
        borderColor,
        boxShadow,
        borderStyle: "solid",
        borderWidth: 1,
        borderRadius: 4,
        borderLeftWidth: itemContext.selected ? 3 : 1,
        borderRightWidth: itemContext.selected ? 3 : 1
      }          
    })}
    onMouseEnter={() =>{
      this.setState({ showModal: true })
    }}
    onMouseLeave={() =>{
      this.setState({ showModal: false })
    }}
    onClick={() =>{
      this.setState({ showModal: false })
    }}        
  >   
    <div
      style={{
        height: itemContext.dimensions.height,
        overflow: "hidden",
        marginLeft: '10px',
        paddingLeft: 3,
        textOverflow: "ellipsis",
        lineHeight: '20px',
        marginTop: '15px'
      }}
    >
      {itemContext.title}                                     
    </div>
    {this.state.showModal &&
      <div className="itemModal" style={{
        left: left,
        right: right
      }}>
        **modal content goes here**                     
      </div>
    }  
  </div>

och skicka det i itemRenderer-propen på Timeline.

Detta fungerade för mig. P.S Hantera modalen individuellt med unik ID för varje resursobjekt

Tack

Svar #2

Jag använde Ant Design-komponenter med React Calendar Timeline. Vi kan omsluta div:en som vi returnerar i itemRenderer-metoden inuti Popup-komponenten. Här är skellettkoden för detta.

<Popover
content={<Form></Form>}
trigger="onClick"
>
  <div ...props>
    {itemContext.title}
  </div>
</Popover>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.0/umd/react-dom.production.min.js"></script>

Ange formuläruppgifterna i innehållet efter behov.