@devrue/rn-select/lib/commonjs/components/ListContainer.js

Custom typescript only select component for react native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ListContainer;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
var _useStyles = _interopRequireDefault(require("../hooks/useStyles"));
var _common = require("./common");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ListContainer({
  children,
  style,
  position,
  avoidBottom,
  onOptionsOffet,
  ...rest
}) {
  const {
    width,
    height
  } = (0, _reactNative.useWindowDimensions)();
  const [listHeight, setListHeight] = (0, _react.useState)(0);

  // will bleed horizontally
  const willBleed = ((position === null || position === void 0 ? void 0 : position.x) ?? 0) + _common.MIN_WIDTH > width;
  const left = willBleed ? undefined : (position === null || position === void 0 ? void 0 : position.x) ?? 0;
  const right = willBleed ? width - (((position === null || position === void 0 ? void 0 : position.x) ?? 0) + ((position === null || position === void 0 ? void 0 : position.width) ?? 0)) : undefined;
  const top = (0, _react.useMemo)(() => {
    if (_reactNative.Platform.OS === 'web' && avoidBottom === 'position') {
      const maxTop = height - listHeight - 80;
      const preferredTop = (position === null || position === void 0 ? void 0 : position.y) ?? 0;
      return Math.min(preferredTop, maxTop);
    }
    return (position === null || position === void 0 ? void 0 : position.y) ?? 0;
  }, [height, listHeight, position === null || position === void 0 ? void 0 : position.y, avoidBottom]);
  const styles = (0, _useStyles.default)(({
    tokens
  }) => ({
    backdrop: {
      flex: 1
    },
    optionsContainer: {
      flex: 1,
      backgroundColor: '#ffffff',
      ..._reactNative.Platform.select({
        default: {},
        web: {
          top,
          left,
          right,
          maxHeight: 400,
          position: 'fixed',
          // this style is only applied on web
          paddingVertical: tokens.size.sm,
          marginTop: tokens.size.xl + tokens.size.sm,
          gap: tokens.size.sm,
          backgroundColor: '#ffffff',
          borderRadius: tokens.size.sm / 2,
          shadowColor: '#000',
          shadowOffset: {
            width: 0,
            height: 2
          },
          shadowOpacity: 0.25,
          shadowRadius: 3.84
        }
      })
    },
    optionsContainerInner: {
      flex: 1,
      paddingTop: tokens.size.sm,
      gap: tokens.size.sm
    }
  }), [left, right, top]);
  const handleListHeight = listContentHeight => {
    if (_reactNative.Platform.OS === 'web' && avoidBottom === 'height') {
      onOptionsOffet === null || onOptionsOffet === void 0 || onOptionsOffet(height - listContentHeight - 80);
    }
    setListHeight(listContentHeight);
  };
  return /*#__PURE__*/_react.default.createElement(_reactNative.Modal, rest, /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
    style: styles.backdrop,
    onPress: rest.onRequestClose
  }, /*#__PURE__*/_react.default.createElement(_reactNativeSafeAreaContext.SafeAreaProvider, null, /*#__PURE__*/_react.default.createElement(ListContent, {
    style: [styles.optionsContainer, style],
    onListHeight: handleListHeight
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.optionsContainerInner
  }, children)))));
}
function ListContent({
  onListHeight,
  ...rest
}) {
  const [containerRef, setContainerRef] = (0, _react.useState)(null);
  (0, _react.useEffect)(() => {
    const onViewLayout = () => {
      containerRef === null || containerRef === void 0 || containerRef.measure((_x, _y, _w, h, _pageX, _pageY) => {
        onListHeight === null || onListHeight === void 0 || onListHeight(h);
      });
    };
    onViewLayout();
  }, [containerRef, onListHeight]);
  return /*#__PURE__*/_react.default.createElement(_reactNative.SafeAreaView, _extends({
    ref: setContainerRef
  }, rest));
}
//# sourceMappingURL=ListContainer.js.map