@madeja-studio/telar/lib/module/component/layout/SafeAreaView.js

UI component library by Madeja Studio

"use strict";

import { intersection, valueToArray } from '@madeja-studio/cepillo';
import { useMemo } from 'react';
import { Platform } from 'react-native';
import { SafeAreaView as SAV, useSafeAreaInsets } from 'react-native-safe-area-context';
import tw from "../../tailwind/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
export const SafeAreaViewEdges = {
  All: ['top', 'bottom', 'left', 'right'],
  NoBottom: ['top', 'left', 'right'],
  NoTop: ['left', 'right', 'bottom'],
  NoVertical: ['left', 'right']
};
const EDGES_BY_MODIFIER = {
  modal: SafeAreaViewEdges.NoTop,
  scroll: SafeAreaViewEdges.NoBottom
};
export const SafeAreaView = ({
  children,
  edges: userEdges,
  modifiers: userModifiers,
  style,
  ...props
}) => {
  const {
    top
  } = useSafeAreaInsets();
  const modifiers = useMemo(() => valueToArray(userModifiers), [userModifiers]);
  const edges = useMemo(() => {
    return modifiers.reduce((acc, mod) => intersection(acc, new Set(EDGES_BY_MODIFIER[mod])), new Set(SafeAreaViewEdges.All));
  }, [userModifiers]);
  const isModal = modifiers.some(mod => mod === 'modal');
  const isAndroidModal = isModal && Platform.OS === 'android';
  return /*#__PURE__*/_jsx(SAV, {
    edges: userEdges ?? Array.from(edges),
    style: [tw.style(`flex-1`, isAndroidModal && {
      flex: 1,
      paddingTop: top
    }), style],
    ...props,
    children: children
  });
};
//# sourceMappingURL=SafeAreaView.js.map