How to use the @uifabric/react-hooks.useConstCallback function in @uifabric/react-hooks

export const PanelHandleDismissTargetExample: React.FunctionComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const openPanel = useConstCallback(() => setIsOpen(true));
  const dismissPanel = useConstCallback(() => setIsOpen(false));

  const onDismiss = useConstCallback((ev?: React.SyntheticEvent) => {
    if (!ev) {
      console.log('Panel dismissed.');
      return;
    }

    // Demonstrates how to do different things depending on how which element dismissed the panel
    console.log('Close button clicked or light dismissed.');
    const srcElement = ev.nativeEvent.srcElement as Element | null;
    if (srcElement && srcElement.className.indexOf('ms-Button-icon') !== -1) {
      console.log('Close button clicked.');
    }
    if (srcElement && srcElement.className.indexOf('ms-Overlay') !== -1) {
      console.log('Light dismissed.');
    }
    dismissPanel();
  });

export const PanelFooterExample: React.FunctionComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const openPanel = useConstCallback(() => setIsOpen(true));
  const dismissPanel = useConstCallback(() => setIsOpen(false));

  // This panel doesn't actually save anything; the buttons are just an example of what
  // someone might want to render in a panel footer.
  const onRenderFooterContent = useConstCallback(() => (
    <div>
      
        Save
      
      Cancel
    </div>
  ));

  return (
    <div>
      </div>

export const PanelLightDismissCustomExample: React.FunctionComponent = () => {
  const [isPanelOpen, setIsPanelOpen] = React.useState(false);
  const [isDialogVisible, setIsDialogVisible] = React.useState(false);

  const openPanel = useConstCallback(() => setIsPanelOpen(true));
  const dismissPanel = useConstCallback(() => setIsPanelOpen(false));
  const showDialog = useConstCallback(() => setIsDialogVisible(true));
  const hideDialog = useConstCallback(ev => {
    ev.preventDefault();
    setIsDialogVisible(false);
  });
  const hideDialogAndPanel = useConstCallback(() => {
    setIsPanelOpen(false);
    setIsDialogVisible(false);
  });

  return (
    <div>
      {explanation}
      <br>
      <br>
      
      </div>

export const PanelControlledExample: React.FunctionComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const openPanel = useConstCallback(() => setIsOpen(true));
  const dismissPanel = useConstCallback(() => setIsOpen(false));

  return (
    <div>
      This panel can only be closed by clicking a button inside the panel content. (Don't use this behavior unless absolutely necessary.)
      <br>
      <br>
      
      
        <p>This panel can only be closed by clicking the button below.</p></div>

export const PanelNavigationExample: React.FunctionComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const openPanel = useConstCallback(() => setIsOpen(true));
  const dismissPanel = useConstCallback(() => setIsOpen(false));

  const onRenderNavigationContent: IRenderFunction = useConstCallback((props, defaultRender) => (
    <>
      
      {// This custom navigation still renders the close button (defaultRender).
      // If you don't use defaultRender, be sure to provide some other way to close the panel.
      defaultRender!(props)}
    
  ));

  return (
    <div>
      {explanation}
      <br>
      <br>
      </div>

const Reader: FC = ({ bookData, bookFiles, match }: Props): React.ReactElement => {
  const { bookId, fileId, path = '' } = match.params as ReaderRouteParams;
  const fileInfo = bookFiles[fileId];
  const bookInfo = bookData[bookId];
  const nav = fileInfo.nav.length ? fileInfo.nav : convertToc(bookInfo);

  const history = useHistory();
  const [isOpen, setIsOpen] = useState(false);

  const onOpenPanel = useConstCallback(() => setIsOpen(true));
  const onClosePanel = useConstCallback(() => setIsOpen(false));

  const onClickLink = useConstCallback((ev?: MouseEvent, item?: INavLink) => {
    ev!.preventDefault();
    console.log(item);
    history.push(`/read/${fileId}/${bookId}/${item!.url}`);
  });

  const onLinkExpandClick = useConstCallback((ev?: MouseEvent, item?: INavLink) => {
    console.log('onLinkExpandClick', item);
  });

  const commandItems = useMemo(() => [
    {
      key: 'toggle',
      text: '',
      iconProps: { iconName: 'ContextMenu' },
      onClick: onOpenPanel,
    },

const Reader: FC = ({ bookData, bookFiles, match }: Props): React.ReactElement => {
  const { bookId, fileId, path = '' } = match.params as ReaderRouteParams;
  const fileInfo = bookFiles[fileId];
  const bookInfo = bookData[bookId];
  const nav = fileInfo.nav.length ? fileInfo.nav : convertToc(bookInfo);

  const history = useHistory();
  const [isOpen, setIsOpen] = useState(false);

  const onOpenPanel = useConstCallback(() => setIsOpen(true));
  const onClosePanel = useConstCallback(() => setIsOpen(false));

  const onClickLink = useConstCallback((ev?: MouseEvent, item?: INavLink) => {
    ev!.preventDefault();
    console.log(item);
    history.push(`/read/${fileId}/${bookId}/${item!.url}`);
  });

  const onLinkExpandClick = useConstCallback((ev?: MouseEvent, item?: INavLink) => {
    console.log('onLinkExpandClick', item);
  });

  const commandItems = useMemo(() => [
    {
      key: 'toggle',
      text: '',
      iconProps: { iconName: 'ContextMenu' },

export const PanelLightDismissCustomExample: React.FunctionComponent = () => {
  const [isPanelOpen, setIsPanelOpen] = React.useState(false);
  const [isDialogVisible, setIsDialogVisible] = React.useState(false);

  const openPanel = useConstCallback(() => setIsPanelOpen(true));
  const dismissPanel = useConstCallback(() => setIsPanelOpen(false));
  const showDialog = useConstCallback(() => setIsDialogVisible(true));
  const hideDialog = useConstCallback(ev => {
    ev.preventDefault();
    setIsDialogVisible(false);
  });
  const hideDialogAndPanel = useConstCallback(() => {
    setIsPanelOpen(false);
    setIsDialogVisible(false);
  });

  return (
    <div>
      {explanation}
      <br>
      <br>
      </div>

export const PanelLightDismissExample: React.FunctionComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const openPanel = useConstCallback(() => setIsOpen(true));
  const dismissPanel = useConstCallback(() => setIsOpen(false));

  return (
    <div>
      {explanation}
      <br>
      <br>
      
      
        <span>{explanation}</span>
      
    </div>
  );
};

export const ContextualMenuBasicExample: React.FunctionComponent = () => {
  const linkRef = React.useRef(null);
  const [showContextualMenu, setShowContextualMenu] = React.useState(false);
  const onShowContextualMenu = useConstCallback(() => setShowContextualMenu(true));
  const onHideContextualMenu = useConstCallback(() => setShowContextualMenu(false));

  return (
    <div>
      This example directly uses ContextualMenu to show how it can be attached to arbitrary elements. The remaining examples use
      ContextualMenu through Fabric Button components.
      <p>
        <b>
          <a>
            Click for ContextualMenu
          </a>
        </b>
      </p>
      </div>