Need a SidePopper example

kenbuja

Is there any working code available to show how to use the SidePopper in the settings.tsx? While the code in the documentation works on the doc page, it doesn't create a SidePopper in my application. The only places I see it used in the code base are in js files.

<>
  <div
    data-layoutid="right-sidebar-right-layout"
    style={{
      border: '1px solid',
      height: 'calc(100% - 70px)',
      minHeight: '350px',
      padding: '16px',
      position: 'absolute',
      right: 0,
      top: 0,
      width: '260px'
    }}
  >
    <h3>
      Widget setting panel
    </h3>
    <div
      ref={{
        current: '[Circular]'
      }}
      style={{
        border: '1px solid'
      }}
    >
      <h4>
        Side popper trigger area
      </h4>
      <p>
        Clicking this area won't close the side popper.
      </p>
      <p>
        Clicking other area will close the side popper.
      </p>
      <Button onClick={() => {}}>
        Toggle side popper
      </Button>
    </div>
  </div>
  <SidePopper
    position="right"
    toggle={() => {}}
  />
</>

 

Jeff.Thompson@arlingtontx.gov_arlingtontx

Anytime the Storybook has a ()=>{} it means fill this in with a function that does what you want.

To make the SidePopper work, you will need some piece of state to handle it opening and closing. It should look something like this.

const [open, setOpen] = useState(false)

return(
<>
<Button onClick={()=> (setOpen(!open))}><Button/>
<SidePopper isOpen={open} />
</>
)

There's probably some sort of syntax error in there somewhere, but it should be close to right.