@itwin/itwinui-react/esm/core/InformationPanel/InformationPanel.js

A react component library for iTwinUI

import cx from 'classnames';
import * as React from 'react';
import { useMergedRefs, Box } from '../../utils/index.js';
export const InformationPanel = React.forwardRef((props, forwardedRef) => {
  let {
    className,
    isOpen = false,
    orientation = 'vertical',
    resizable = true,
    children,
    ...rest
  } = props;
  let [infoPanelSize, setInfoPanelSize] = React.useState({
    width: void 0,
    height: void 0,
  });
  let infoPanelRef = React.useRef(null);
  let refs = useMergedRefs(forwardedRef, infoPanelRef);
  let startResize = (e) => {
    if (!infoPanelRef.current) return;
    if (void 0 != e.button && 0 !== e.button) return;
    e.preventDefault();
    e.stopPropagation();
    infoPanelRef.current.ownerDocument.addEventListener(
      'pointermove',
      onResize,
    );
    infoPanelRef.current.ownerDocument.addEventListener(
      'pointerup',
      () =>
        infoPanelRef.current?.ownerDocument.removeEventListener(
          'pointermove',
          onResize,
        ),
      {
        once: true,
      },
    );
  };
  let onResize = React.useCallback(
    (e) => {
      e.preventDefault();
      if (!infoPanelRef.current) return;
      let { right, bottom } = infoPanelRef.current.getBoundingClientRect();
      'vertical' === orientation
        ? setInfoPanelSize({
            width: right - e.clientX,
            height: void 0,
          })
        : setInfoPanelSize({
            height: bottom - e.clientY,
            width: void 0,
          });
    },
    [orientation],
  );
  return React.createElement(
    Box,
    {
      className: cx(
        'iui-information-panel',
        {
          'iui-right': 'vertical' === orientation,
          'iui-bottom': 'horizontal' === orientation,
          'iui-visible': isOpen,
        },
        className,
      ),
      ref: refs,
      ...rest,
      style: {
        width: 'vertical' === orientation ? infoPanelSize.width : void 0,
        height: 'horizontal' === orientation ? infoPanelSize.height : void 0,
        ...props.style,
      },
    },
    resizable &&
      React.createElement(
        Box,
        {
          className: 'iui-resizer',
          onPointerDown: startResize,
        },
        React.createElement(Box, {
          className: 'iui-resizer-bar',
        }),
      ),
    children,
  );
});
if ('development' === process.env.NODE_ENV)
  InformationPanel.displayName = 'InformationPanel';