Typescript Examples - Popover

[Amir-Zouerami]

How can I get my hands on some Typescript examples?

For instance can anyone give me the typescript version of this:

const MenuPopover = React.forwardRef(({ onSelect, ...rest }, ref) => (
  <Popover ref={ref} {...rest} full>
    <Dropdown.Menu onSelect={onSelect}>
      <Dropdown.Item eventKey={1}>New File</Dropdown.Item>
      <Dropdown.Item eventKey={2}>New File with Current Profile</Dropdown.Item>
      <Dropdown.Item eventKey={3}>Download As...</Dropdown.Item>
      <Dropdown.Item eventKey={4}>Export PDF</Dropdown.Item>
      <Dropdown.Item eventKey={5}>Export HTML</Dropdown.Item>
      <Dropdown.Item eventKey={6}>Settings</Dropdown.Item>
      <Dropdown.Item eventKey={7}>About</Dropdown.Item>
    </Dropdown.Menu>
  </Popover>
));

const WithDropdown = () => {
  const ref = React.useRef();
  function handleSelectMenu(eventKey, event) {
    console.log(eventKey);
    ref.current.close();
  }
  return (
    <Whisper
      placement="bottomStart"
      controlId="control-id-with-dropdown"
      trigger="click"
      ref={ref}
      speaker={<MenuPopover onSelect={handleSelectMenu} />}
    >
      <Button>File</Button>
    </Whisper>
  );
};

ReactDOM.render(<WithDropdown />);

example is from here: https://rsuitejs.com/components/popover/#used-with-dropdown

[simonguo]

import Popover, { PopoverProps } from 'rsuite/Popover';
import Whisper, { WhisperInstance } from 'rsuite/Whisper';

interface MenuPopoverProps extends PopoverProps {
  onSelect: (value: number) => void;
}

const MenuPopover = React.forwardRef(
  ({ onSelect, ...rest }: MenuPopoverProps, ref: React.Ref<HTMLDivElement>) => (
    <Popover ref={ref} {...rest} full>
      <Dropdown.Menu onSelect={onSelect}>
        <Dropdown.Item eventKey={1}>New File</Dropdown.Item>
        <Dropdown.Item eventKey={2}>New File with Current Profile</Dropdown.Item>
        <Dropdown.Item eventKey={3}>Download As...</Dropdown.Item>
        <Dropdown.Item eventKey={4}>Export PDF</Dropdown.Item>
        <Dropdown.Item eventKey={5}>Export HTML</Dropdown.Item>
        <Dropdown.Item eventKey={6}>Settings</Dropdown.Item>
        <Dropdown.Item eventKey={7}>About</Dropdown.Item>
      </Dropdown.Menu>
    </Popover>
  )
);

const WithDropdown = () => {
  const ref = React.useRef<WhisperInstance>();

  const handleSelectMenu = React.useCallback((eventKey: number, event) => {
    console.log(eventKey, event);
    ref.current.close();
  }, []);

  return (
    <Whisper
      placement="bottomStart"
      controlId="control-id-with-dropdown"
      trigger="click"
      ref={ref}
      speaker={<MenuPopover onSelect={handleSelectMenu} />}
    >
      <Button>File</Button>
    </Whisper>
  );
};

[Amir-Zouerami]

much appreciated 👍🏻