react-elegant-ui/components/Select/Select.hocs/ScrollbarOverlapContentFix.js

Elegant UI components, made by BEM best practices for react

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ScrollbarOverlapContentFixIsomorphic = exports.ScrollbarOverlapContentFix = void 0;
var _react = _interopRequireWildcard(require("react"));
var _canUseDOM = require("../../../lib/canUseDOM");
var _getDisplayName = require("../../../lib/getDisplayName");
var _merge = require("../../../lib/merge");
var _overflowAutoFix = require("../../../polyfills/overflowAutoFix");
var _SelectList = require("../List/Select-List");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var __assign = void 0 && (void 0).__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __read = void 0 && (void 0).__read || function (o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
    r,
    ar = [],
    e;
  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }
  return ar;
};
/**
 * HOC to fix scrollbar overlaping while use `scroll: auto` in firefox
 *
 * Original bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1424328
 */
var ScrollbarOverlapContentFix = function (
// WARNING: any object type
BaseComponent) {
  var WrappedComponent = function (props) {
    var opened = props.opened;
    var listboxRef = (0, _react.useRef)(null);
    var _a = __read((0, _react.useState)(), 2),
      listStyles = _a[0],
      setListStyles = _a[1];
    (0, _react.useEffect)(function () {
      if (!opened || listboxRef.current === null) {
        return;
      }
      // Observe resize and fix indents
      var cancel = (0, _overflowAutoFix.overflowAutoFix)(listboxRef.current, function (_a) {
        var x = _a.x;
        setListStyles({
          paddingInlineEnd: x ? x + 'px' : undefined
        });
      });
      return function () {
        cancel();
        setListStyles({});
      };
    }, [opened, setListStyles]);
    // Inject props to list
    var SelectListContextObj = (0, _react.useContext)(_SelectList.SelectListContext);
    var SelectListContextMix = (0, _react.useMemo)(function () {
      return (0, _merge.mergeProps)(SelectListContextObj, {
        style: listStyles,
        innerRef: listboxRef
      });
    }, [SelectListContextObj, listStyles, listboxRef]);
    return /*#__PURE__*/_react.default.createElement(_SelectList.SelectListContext.Provider, {
      value: SelectListContextMix
    }, /*#__PURE__*/_react.default.createElement(BaseComponent, __assign({}, props)));
  };
  WrappedComponent.displayName = "ScrollbarOverlapContentFix(".concat((0, _getDisplayName.getDisplayName)(BaseComponent), ")");
  return WrappedComponent;
};
// TODO: test it in safari
/**
 * Isomorphic `ScrollbarOverlapContentFix`
 *
 * It will auto enable in browsers who have this bug
 *
 * WARNING: if you use SSR, you should use your own manager which decide use HOC or not depends of user agent
 */
exports.ScrollbarOverlapContentFix = ScrollbarOverlapContentFix;
var ScrollbarOverlapContentFixIsomorphic = function (BaseComponent) {
  var isNeedFix = (0, _canUseDOM.canUseDOM)() ? navigator.userAgent.match(/firefox/i) : false;
  if (!isNeedFix) {
    return BaseComponent;
  }
  return ScrollbarOverlapContentFix(BaseComponent);
};
exports.ScrollbarOverlapContentFixIsomorphic = ScrollbarOverlapContentFixIsomorphic;