From a6f9497960c0abb3d58457d8b22f77371af3a344 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Carneiro?= Date: Tue, 6 Feb 2024 19:38:03 +0000 Subject: [PATCH] fix(types): full type inference to `useSafeAreaInsetsStyle` (#2457) * feat: full type inference to `useSafeAreaInsetsStyle` * style: format * fix: add type assertion to `useSafeAreaInsetsStyle` return value --- .../app/utils/useSafeAreaInsetsStyle.ts | 31 +++++++++---------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/boilerplate/app/utils/useSafeAreaInsetsStyle.ts b/boilerplate/app/utils/useSafeAreaInsetsStyle.ts index 6d11b3117..625c43c9b 100644 --- a/boilerplate/app/utils/useSafeAreaInsetsStyle.ts +++ b/boilerplate/app/utils/useSafeAreaInsetsStyle.ts @@ -1,4 +1,3 @@ -import { FlexStyle } from "react-native" import { Edge, useSafeAreaInsets } from "react-native-safe-area-context" export type ExtendedEdge = Edge | "start" | "end" @@ -17,29 +16,29 @@ const edgeInsetMap: Record = { end: "right", } +export type SafeAreaInsetsStyle< + Property extends "padding" | "margin" = "padding", + Edges extends Array = Array, +> = { + [K in Edges[number] as `${Property}${Capitalize}`]: number +} + /** * A hook that can be used to create a safe-area-aware style object that can be passed directly to a View. * * - [Documentation and Examples](https://github.com/infinitered/ignite/blob/master/docs/boilerplate/utility/useSafeAreaInsetsStyle.md) */ -export function useSafeAreaInsetsStyle( - safeAreaEdges: ExtendedEdge[] = [], - property: "padding" | "margin" = "padding", -): Pick< - FlexStyle, - | "marginBottom" - | "marginEnd" - | "marginStart" - | "marginTop" - | "paddingBottom" - | "paddingEnd" - | "paddingStart" - | "paddingTop" -> { +export function useSafeAreaInsetsStyle< + Property extends "padding" | "margin" = "padding", + Edges extends Array = [], +>( + safeAreaEdges: Edges = [] as unknown as Edges, + property: Property = "padding" as Property, +): SafeAreaInsetsStyle { const insets = useSafeAreaInsets() return safeAreaEdges.reduce((acc, e) => { const value = edgeInsetMap[e] ?? e return { ...acc, [`${property}${propertySuffixMap[e]}`]: insets[value] } - }, {}) + }, {}) as SafeAreaInsetsStyle }