@dr.pogodin/react-utils/build/development/shared/components/selectors/CustomDropdown/Options/index.js

Collection of generic ReactJS components and utils

import { useImperativeHandle, useRef } from 'react';
import { BaseModal } from "../../../Modal/index.js";
import { optionValueName } from "../../common.js";
const S = {
  "overlay": "-dr-pogodin-react-utils___build-web-shared-components-selectors-CustomDropdown-Options-style___overlay___ntZ5My"
};
import { jsx as _jsx } from "react/jsx-runtime";
export function areEqual(a, b) {
  return a?.left === b?.left && a?.top === b?.top && a?.width === b?.width;
}
const Options = ({
  containerClass,
  containerStyle,
  filter,
  onCancel,
  onChange,
  optionClass,
  options,
  ref
}) => {
  const opsRef = useRef(null);
  useImperativeHandle(ref, () => ({
    measure: () => {
      const e = opsRef.current?.parentElement;
      if (!e) return undefined;
      const rect = opsRef.current.getBoundingClientRect();
      const style = window.getComputedStyle(e);
      const mBottom = parseFloat(style.marginBottom);
      const mTop = parseFloat(style.marginTop);
      rect.height += mBottom + mTop;
      return rect;
    }
  }), []);
  const optionNodes = [];
  for (const option of options) {
    if (!filter || filter(option)) {
      const [iValue, iName] = optionValueName(option);
      optionNodes.push(/*#__PURE__*/_jsx("div", {
        className: optionClass,
        onClick: e => {
          onChange(iValue);
          e.stopPropagation();
        },
        onKeyDown: e => {
          if (e.key === 'Enter') {
            onChange(iValue);
            e.stopPropagation();
          }
        },
        role: "button",
        tabIndex: 0,
        children: iName
      }, iValue));
    }
  }
  return /*#__PURE__*/_jsx(BaseModal
  // Closes the dropdown (cancels the selection) on any page scrolling attempt.
  // This is the same native <select> elements do on scrolling, and at least for
  // now we have no reason to deal with complications needed to support open
  // dropdowns during the scrolling (that would need to re-position it in
  // response to the position changes of the root dropdown element).
  , {
    cancelOnScrolling: true,
    dontDisableScrolling: true,
    onCancel: onCancel,
    style: containerStyle,
    theme: {
      ad: '',
      container: containerClass,
      context: '',
      hoc: '',
      overlay: S.overlay
    },
    children: /*#__PURE__*/_jsx("div", {
      ref: opsRef,
      children: optionNodes
    })
  });
};
export default Options;
//# sourceMappingURL=index.js.map