@itwin/itwinui-react/DEV-cjs/core/InformationPanel/InformationPanel.js

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
Object.defineProperty(exports, 'InformationPanel', {
  enumerable: true,
  get: function () {
    return InformationPanel;
  },
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _index = require('../../utils/index.js');
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 = (0, _index.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(
    _index.Box,
    {
      className: (0, _classnames.default)(
        '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(
        _index.Box,
        {
          className: 'iui-resizer',
          onPointerDown: startResize,
        },
        _react.createElement(_index.Box, {
          className: 'iui-resizer-bar',
        }),
      ),
    children,
  );
});
if ('development' === process.env.NODE_ENV)
  InformationPanel.displayName = 'InformationPanel';