UNPKG

one

Version:

One is a React framework for web, iOS, and Android apps.

66 lines (63 loc) • 2.47 kB
import * as React from "react"; import { useSafeAreaInsets } from "./SafeAreaContext.mjs"; import { jsx } from "react/jsx-runtime"; const TOP = 8; const RIGHT = 4; const BOTTOM = 2; const LEFT = 1; const ALL = 15; const edgeBitmaskMap = { top: TOP, right: RIGHT, bottom: BOTTOM, left: LEFT }; const SafeAreaView = React.forwardRef(({ style = {}, mode, edges, ...rest }, ref) => { const insets = useSafeAreaInsets(); const edgeBitmask = edges != null ? Array.isArray(edges) ? edges.reduce((acc, edge) => acc | edgeBitmaskMap[edge], 0) : Object.keys(edges).reduce((acc, edge) => acc | edgeBitmaskMap[edge], 0) : ALL; const appliedStyle = React.useMemo(() => { const insetTop = edgeBitmask & TOP ? insets.top : 0; const insetRight = edgeBitmask & RIGHT ? insets.right : 0; const insetBottom = edgeBitmask & BOTTOM ? insets.bottom : 0; const insetLeft = edgeBitmask & LEFT ? insets.left : 0; const flatStyle = (Array.isArray(style) ? style.flat(Number.POSITIVE_INFINITY) : [style]).reduce((result, value) => value ? Object.assign(result, value) : result, {}); if (mode === "margin") { const { margin = 0, marginVertical = margin, marginHorizontal = margin, marginTop = marginVertical, marginRight = marginHorizontal, marginBottom = marginVertical, marginLeft = marginHorizontal } = flatStyle; const marginStyle = { marginTop: marginTop + insetTop, marginRight: marginRight + insetRight, marginBottom: marginBottom + insetBottom, marginLeft: marginLeft + insetLeft }; const { marginVertical: _marginVertical, marginHorizontal: _marginHorizontal, ...domStyle2 } = flatStyle; return { ...domStyle2, ...marginStyle }; } const { padding = 0, paddingVertical = padding, paddingHorizontal = padding, paddingTop = paddingVertical, paddingRight = paddingHorizontal, paddingBottom = paddingVertical, paddingLeft = paddingHorizontal } = flatStyle; const paddingStyle = { paddingTop: paddingTop + insetTop, paddingRight: paddingRight + insetRight, paddingBottom: paddingBottom + insetBottom, paddingLeft: paddingLeft + insetLeft }; const { paddingVertical: _paddingVertical, paddingHorizontal: _paddingHorizontal, ...domStyle } = flatStyle; return { ...domStyle, ...paddingStyle }; }, [ style, insets, mode, edgeBitmask ]); return /* @__PURE__ */ jsx("div", { ...rest, style: appliedStyle, ref }); }); export { SafeAreaView }; //# sourceMappingURL=SafeAreaView.mjs.map