@fluentui-react-native/framework-base 0.2.1 → 0.3.0

package/src/merge-props/mergeStyles.ts

@@ -9,8 +9,8 @@ import type { StyleProp } from './mergeStyles.types';
  *
  * @param style - StyleProp<TStyle> to flatten, this can be a TStyle or an array
  */
-export function flattenStyle(style: StyleProp<object>): object {
-  return Array.isArray(style) ? immutableMerge(...style.map((v) => flattenStyle(v))) : style || {};
+export function flattenStyle<T extends object>(style: StyleProp<T>): T {
+  return Array.isArray(style) ? immutableMerge<T>(...style.map((v) => flattenStyle(v))) : ((style || {}) as T);
 }
 
 /**
@@ -18,7 +18,25 @@ export function flattenStyle(style: StyleProp<object>): object {
  *
  * @param styles - array of styles to merge together.  The styles will be flattened as part of the process
  */
-export function mergeAndFlattenStyles(...styles: StyleProp<object>[]): object | undefined {
+
+// Overload for 2 arguments with potentially different types
+export function mergeAndFlattenStyles<T1 extends object, T2 extends object>(
+  style1: StyleProp<T1>,
+  style2: StyleProp<T2>,
+): (T1 & T2) | undefined;
+
+// Overload for 3 arguments with potentially different types
+export function mergeAndFlattenStyles<T1 extends object, T2 extends object, T3 extends object>(
+  style1: StyleProp<T1>,
+  style2: StyleProp<T2>,
+  style3: StyleProp<T3>,
+): (T1 & T2 & T3) | undefined;
+
+// General fallback for any number of arguments of the same type
+export function mergeAndFlattenStyles<TStyle extends object>(...styles: StyleProp<any>[]): TStyle | undefined;
+
+// Implementation
+export function mergeAndFlattenStyles(...styles: StyleProp<any>[]): object | undefined {
   // baseline merge and flatten the objects
   return immutableMerge(
     ...styles.map((styleProp: StyleProp<object>) => {
@@ -29,7 +47,37 @@ export function mergeAndFlattenStyles(...styles: StyleProp<object>[]): object |
 
 const _styleCache = getMemoCache();
 
-export function mergeStyles(...styles: StyleProp<object>[]): object | undefined {
+/**
+ * Function overloads to allow merging styles of different types.
+ * This is useful when merging token-based styles with React Native StyleProp types.
+ */
+
+// Overload for 1 argument, forces flattening of sub arrays
+export function mergeStyles<T1 extends object>(style1: StyleProp<T1>): T1 | undefined;
+
+// Overload for 2 arguments with potentially different types
+export function mergeStyles<T1 extends object, T2 extends object>(style1: StyleProp<T1>, style2: StyleProp<T2>): (T1 & T2) | undefined;
+
+// Overload for 3 arguments with potentially different types
+export function mergeStyles<T1 extends object, T2 extends object, T3 extends object>(
+  style1: StyleProp<T1>,
+  style2: StyleProp<T2>,
+  style3: StyleProp<T3>,
+): (T1 & T2 & T3) | undefined;
+
+// Overload for 4 arguments with potentially different types
+export function mergeStyles<T1 extends object, T2 extends object, T3 extends object, T4 extends object>(
+  style1: StyleProp<T1>,
+  style2: StyleProp<T2>,
+  style3: StyleProp<T3>,
+  style4: StyleProp<T4>,
+): (T1 & T2 & T3 & T4) | undefined;
+
+// General fallback for any number of arguments of the same type
+export function mergeStyles<TStyle extends object>(...styles: StyleProp<TStyle>[]): TStyle | undefined;
+
+// Implementation
+export function mergeStyles(...styles: StyleProp<any>[]): object | undefined {
   // filter the style set to just objects (which might be arrays or plain style objects)
   const inputs = styles.filter((s) => typeof s === 'object') as object[];
 

package/src/merge-props/mergeStyles.types.ts

@@ -1,8 +1,8 @@
 /**
  * This is a copy of the react-native style prop type, copied here to avoid RN dependencies for web clients
  */
-type Falsy = undefined | null | false;
-type RecursiveArray<T> = (T | RecursiveArray<T>)[];
+type Falsy = undefined | null | false | '' | 0;
+type RecursiveArray<T> = readonly (T | RecursiveArray<T>)[] | (T | RecursiveArray<T>)[];
 /** Keep a brand of 'T' so that calls to `StyleSheet.flatten` can take `RegisteredStyle<T>` and return `T`. */
 type RegisteredStyle<T> = number & { __registeredStyleBrand: T };
 

package/src/utilities/filterProps.ts

@@ -0,0 +1,14 @@
+import { mergeProps } from '../merge-props/mergeProps';
+
+export type PropsFilter = (propName: string) => boolean;
+
+export function filterProps<TProps>(props: TProps, filter?: PropsFilter): TProps {
+  if (filter && typeof props === 'object' && !Array.isArray(props)) {
+    const propsToRemove = filter ? Object.keys(props).filter((key) => !filter(key)) : undefined;
+    if (propsToRemove?.length > 0) {
+      const propsToRemoveObj = Object.fromEntries(propsToRemove.map((prop) => [prop, undefined])) as TProps;
+      return mergeProps<TProps>(props, propsToRemoveObj);
+    }
+  }
+  return props;
+}

package/src/component-patterns/stagedComponent.tsx

@@ -1,45 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx withSlots
- */
-import * as React from 'react';
-import { withSlots } from './withSlots';
-
-import type { StagedComponent, TwoStageRender, StagedRender, ComposableFunction } from './render.types';
-
-function asArray<T>(val: T | T[]): T[] {
-  return Array.isArray(val) ? val : [val];
-}
-
-/**
- * Take a staged render function and make a real component out of it
- *
- * @param staged - staged render function to wrap into a staged component
- * @param memo - optional flag to enable wrapping the created component in a React.memo HOC
- */
-export function stagedComponent<TProps>(staged: StagedRender<TProps>, memo?: boolean): ComposableFunction<TProps> {
-  const component = (props: React.PropsWithChildren<TProps>) => {
-    const { children, ...rest } = props;
-    return staged(rest as TProps)({} as React.PropsWithChildren<TProps>, asArray(children));
-  };
-  const stagedComponent = memo ? React.memo(component) : component;
-  Object.assign(stagedComponent, { _staged: staged });
-  return stagedComponent as ComposableFunction<TProps>;
-}
-
-/**
- * Take a two stage render function and make a real component out of it, attaching the staged render function
- * so it can be split if used in that manner.
- * @param staged - two stage render function to wrap into a staged component
- */
-export function twoStageComponent<TProps>(staged: TwoStageRender<TProps>): StagedComponent<TProps> {
-  return Object.assign(
-    (props: React.PropsWithChildren<TProps>) => {
-      const { children, ...outerProps } = props;
-      const innerProps = { children } as React.PropsWithChildren<TProps>;
-      const Inner = staged(outerProps as TProps);
-      return <Inner {...innerProps} />;
-    },
-    { _twoStageRender: staged },
-  );
-}