@fluentui-react-native/use-styling 0.7.0 → 0.8.1

package/src/buildProps.test.ts

@@ -3,18 +3,16 @@ import { buildProps } from './buildProps';
 
 type ITheme = { foo?: string; bar?: string };
 type ITokens = { a?: string; b?: string; c?: string; d?: string };
-type IOuterProps = { banana?: string; potato?: string };
-type IProps = ITokens & ITheme & IOuterProps & { instance: number };
+type IProps = ITokens & ITheme & { instance: number };
 
 const theme: ITheme = { foo: 'foo', bar: 'bar' };
 
 let instanceCount = 0;
 
-function munge(tokens: ITokens, theme: ITheme, props: IOuterProps): IProps {
+function munge(tokens: ITokens, theme: ITheme): IProps {
   return {
     ...theme,
     ...tokens,
-    ...props,
     instance: instanceCount++,
   };
 }
@@ -23,11 +21,11 @@ describe('props function tests', () => {
   test('basic build props function caches as expected', () => {
     const cache = getMemoCache();
     const styleFn = buildProps(munge, ['a', 'b']);
-    const p1 = styleFn({ a: 'a', b: 'b', c: 'c' }, theme, undefined, cache);
-    expect(styleFn({ a: 'a', b: 'b', c: 'foo' }, theme, undefined, cache)).toBe(p1);
-    const p2 = styleFn({ a: 'b', b: 'b' }, theme, undefined, cache);
+    const p1 = styleFn({ a: 'a', b: 'b', c: 'c' }, theme, cache);
+    expect(styleFn({ a: 'a', b: 'b', c: 'foo' }, theme, cache)).toBe(p1);
+    const p2 = styleFn({ a: 'b', b: 'b' }, theme, cache);
     expect(p2).not.toBe(p1);
-    expect(styleFn({ a: 'b', b: 'b', c: 'bar' }, theme, undefined, cache)).toBe(p2);
+    expect(styleFn({ a: 'b', b: 'b', c: 'bar' }, theme, cache)).toBe(p2);
   });
 
   test('build props function refinement works with explicit keys', () => {
@@ -37,22 +35,12 @@ describe('props function tests', () => {
     const t1 = { a: 'a', b: 'b', c: 'c', d: 'd' };
     const t2 = { a: 'a', b: 'b', c: 'foo', d: 'bar' };
 
-    const p1 = styleFn(t1, theme, undefined, cache);
-    const p2 = styleFn(t2, theme, undefined, cache);
+    const p1 = styleFn(t1, theme, cache);
+    const p2 = styleFn(t2, theme, cache);
     expect(p2).not.toBe(p1);
 
-    const rp1 = refinedFn(t1, theme, undefined, cache);
-    const rp2 = refinedFn(t2, theme, undefined, cache);
+    const rp1 = refinedFn(t1, theme, cache);
+    const rp2 = refinedFn(t2, theme, cache);
     expect(rp2).toBe(rp1);
   });
-
-  test('build props with outer props function caches as expected', () => {
-    const cache = getMemoCache();
-    const styleFn = buildProps(munge, ['a', 'b', 'banana']);
-    const p1 = styleFn({ a: 'a', b: 'b', c: 'c' }, theme, { banana: 'banana' }, cache);
-    expect(styleFn({ a: 'a', b: 'b', c: 'foo' }, theme, { banana: 'banana', potato: 'potato' }, cache)).toBe(p1);
-    const p2 = styleFn({ a: 'b', b: 'b' }, theme, { banana: 'potato' }, cache);
-    expect(p2).not.toBe(p1);
-    expect(styleFn({ a: 'b', b: 'b', c: 'bar' }, theme, { banana: 'potato', potato: 'potato' }, cache)).toBe(p2);
-  });
 });

package/src/buildProps.ts

@@ -18,83 +18,59 @@ export type TokensThatAreAlsoProps<TTokens> = (keyof TTokens)[] | 'all' | 'none'
  * The provided
  * cache will be scoped to the theme, slot, and tokens that are coming out of the theme.
  */
-export type BuildPropsBase<TProps, TTokens, TTheme, TOuterProps> = (
-  tokens: TTokens,
-  theme: TTheme,
-  props: TOuterProps,
-  cache: GetMemoValue<any>,
-) => Partial<TProps>;
+export type BuildPropsBase<TProps, TTokens, TTheme> = (tokens: TTokens, theme: TTheme, cache: GetMemoValue<any>) => Partial<TProps>;
 
 /**
  * A refine function allows style functions to be updated based on tokens that are also props. Only those tokens that are also
  * props need to be considered as a key for caching
  */
-export type RefineFunctionBase<TProps, TTokens, TTheme, TOuterProps> = (
+export type RefineFunctionBase<TProps, TTokens, TTheme> = (
   mask?: TokensThatAreAlsoProps<TTokens>,
-) => BuildPropsBase<TProps, TTokens, TTheme, TOuterProps>;
+) => BuildPropsBase<TProps, TTokens, TTheme>;
 
 /**
  * Signature for a style function which can be optionally refined by the styling hook if prop masks are provided
  */
-export type RefinableBuildPropsBase<TProps, TTokens, TTheme, TOuterProps> = BuildPropsBase<TProps, TTokens, TTheme, TOuterProps> & {
-  refine?: RefineFunctionBase<TProps, TTokens, TTheme, TOuterProps>;
+export type RefinableBuildPropsBase<TProps, TTokens, TTheme> = BuildPropsBase<TProps, TTokens, TTheme> & {
+  refine?: RefineFunctionBase<TProps, TTokens, TTheme>;
 };
 
 /**
  * Style functions can be plain functions, refinable functions, or just raw props
  */
-export type BuildSlotProps<TSlotProps, TTokens, TTheme, TOuterProps> = {
-  [K in keyof TSlotProps]?: RefinableBuildPropsBase<TSlotProps[K], TTokens, TTheme, TOuterProps> | TSlotProps[K]
+export type BuildSlotProps<TSlotProps, TTokens, TTheme> = {
+  [K in keyof TSlotProps]?: RefinableBuildPropsBase<TSlotProps[K], TTokens, TTheme> | TSlotProps[K];
 };
 
-/**
- * Caches and returns the function based on the current keys.
- *
- * @param fn Function which does the work of producing props for the tokens, theme, and props provided
- * @param keys Set of input values the function is dependent on
- * @returns Cached function
- */
-function cacheStyleClosure<TProps, TTokens, TTheme, TOuterProps>(
-  fn: (tokens: TTokens, theme: TTheme, props: TOuterProps) => TProps,
-  keys?: (keyof TTokens | keyof TOuterProps)[],
-): RefinableBuildPropsBase<TProps, TTokens, TTheme, TOuterProps> {
-  return (tokens: TTokens, theme: TTheme, props: TOuterProps, cache: GetMemoValue<TProps>) =>
+function cacheStyleClosure<TProps, TTokens, TTheme>(
+  fn: (tokens: TTokens, theme: TTheme) => TProps,
+  keys?: (keyof TTokens)[],
+): RefinableBuildPropsBase<TProps, TTokens, TTheme> {
+  return (tokens: TTokens, theme: TTheme, cache: GetMemoValue<TProps>) =>
     cache(
-      () => fn(tokens, theme, props),
-      (keys || []).map(key => {
-        if (Object.keys(tokens).includes(key as string)) {
-          return tokens[key as keyof TTokens];
-        } else {
-          return props[key as keyof TOuterProps];
-        }
-      }),
+      () => fn(tokens, theme),
+      (keys || []).map((key) => tokens[key]),
     )[0];
 }
 
-/**
- * Reduce keys to the set that are also part of the mask.
- *
- * @param keys - which token and prop properties are used by this style, this determines the keys to use for caching
- * @param mask - the set of tokens that are also props
- * @returns An array of keys that are part of the mask to be used as a caching key
- */
-function refineKeys<TTokens, TOuterProps = unknown>(
-  keys: (keyof TTokens | keyof TOuterProps)[],
-  mask?: TokensThatAreAlsoProps<TTokens>,
-): (keyof TTokens | keyof TOuterProps)[] {
-  return typeof mask === 'object' && Array.isArray(mask) ? keys.filter(key => mask.findIndex(val => val === key) !== -1) : mask ? keys : [];
+function refineKeys<TTokens>(keys: (keyof TTokens)[], mask?: TokensThatAreAlsoProps<TTokens>): (keyof TTokens)[] {
+  return typeof mask === 'object' && Array.isArray(mask)
+    ? keys.filter((key) => mask.findIndex((val) => val === key) !== -1)
+    : mask
+    ? keys
+    : [];
 }
 
 /**
  * Standard wrapper for a function that provides props for a component based on tokens and theme.
  *
- * @param fn - function which does the work of producing props for the tokens, theme, and props provided
- * @param keys - which token and prop properties are used by this style, this determines the keys to use for caching
+ * @param fn - function which does the work of producing props for the tokens and theme provided
+ * @param keys - which token properties are used by this style, this determines the keys to use for caching
  */
-export function buildProps<TProps, TTokens, TTheme, TOuterProps = unknown>(
-  fn: (tokens: TTokens, theme: TTheme, props?: TOuterProps) => TProps,
-  keys?: (keyof TTokens | keyof TOuterProps)[],
-): RefinableBuildPropsBase<TProps, TTokens, TTheme, TOuterProps> {
+export function buildProps<TProps, TTokens, TTheme>(
+  fn: (tokens: TTokens, theme: TTheme) => TProps,
+  keys?: (keyof TTokens)[],
+): RefinableBuildPropsBase<TProps, TTokens, TTheme> {
   // wrap the provided function in the standard caching layer, basing it upon the provided keys
   const result = cacheStyleClosure(fn, keys);
 
@@ -102,7 +78,7 @@ export function buildProps<TProps, TTokens, TTheme, TOuterProps = unknown>(
   result.refine =
     keys && keys.length > 0
       ? (mask?: TokensThatAreAlsoProps<TTokens>) => {
-          return cacheStyleClosure(fn, refineKeys<TTokens, TOuterProps>(keys, mask));
+          return cacheStyleClosure(fn, refineKeys(keys, mask));
         }
       : undefined;
 
@@ -116,15 +92,14 @@ export function buildProps<TProps, TTokens, TTheme, TOuterProps = unknown>(
  * @param fn - function or props to potentially refine
  * @param mask - prop mask to use for refinement
  */
-export function refinePropsFunctions<TSlotProps, TTokens, TTheme, TOuterProps>(
-  styles: BuildSlotProps<TSlotProps, TTokens, TTheme, TOuterProps>,
+export function refinePropsFunctions<TSlotProps, TTokens, TTheme>(
+  styles: BuildSlotProps<TSlotProps, TTokens, TTheme>,
   mask: TokensThatAreAlsoProps<TTokens>,
-): BuildSlotProps<TSlotProps, TTokens, TTheme, TOuterProps> {
+): BuildSlotProps<TSlotProps, TTokens, TTheme> {
   const result = {};
-  Object.keys(styles).forEach(key => {
+  Object.keys(styles).forEach((key) => {
     const refine =
-      typeof styles[key] === 'function' &&
-      (styles[key] as RefinableBuildPropsBase<TSlotProps[keyof TSlotProps], TTokens, TTheme, TOuterProps>).refine;
+      typeof styles[key] === 'function' && (styles[key] as RefinableBuildPropsBase<TSlotProps[keyof TSlotProps], TTokens, TTheme>).refine;
     result[key] = refine ? refine(mask) : styles[key];
   });
   return result;

package/src/buildUseStyling.ts

@@ -20,7 +20,7 @@ export type UseStylingOptions<TProps, TSlotProps, TTokens, TTheme> = {
   /**
    * Functions which build up the props for each slot
    */
-  slotProps?: BuildSlotProps<TSlotProps, TTokens, TTheme, TProps>;
+  slotProps?: BuildSlotProps<TSlotProps, TTokens, TTheme>;
 
   /**
    * Which props should be considered to be tokens.
@@ -55,20 +55,18 @@ export type ThemeHelper<TTheme> = {
  * @param styles - refined style functions or props to use for processing
  * @param tokens - token inputs for the style functions
  * @param theme - theme to resolve against
- * @param props - props from outer component
  * @param cache - cache to use for the base of slot caching
  */
-function resolveToSlotProps<TSlotProps, TTokens, TTheme, TProps>(
-  styles: BuildSlotProps<TSlotProps, TTokens, TTheme, TProps>,
+function resolveToSlotProps<TSlotProps, TTokens, TTheme>(
+  styles: BuildSlotProps<TSlotProps, TTokens, TTheme>,
   tokens: TTokens,
   theme: TTheme,
-  props: TProps,
   cache: GetMemoValue<TTokens>,
 ): TSlotProps {
   const slotProps = {};
-  Object.keys(styles).forEach(key => {
+  Object.keys(styles).forEach((key) => {
     const style = styles[key];
-    slotProps[key] = typeof style === 'function' ? style(tokens, theme, props, cache(null, [key])[1]) : style;
+    slotProps[key] = typeof style === 'function' ? style(tokens, theme, cache(null, [key])[1]) : style;
   });
   return slotProps as TSlotProps;
 }
@@ -98,7 +96,7 @@ export function buildUseStyling<TProps, TSlotProps, TTokens, TTheme>(
 
     // resolve overrides as appropriate
     if (options.states) {
-      [mergedTokens, cache] = applyTokenLayers(mergedTokens, options.states as string[], cache, lookup || (val => props[val]));
+      [mergedTokens, cache] = applyTokenLayers(mergedTokens, options.states as string[], cache, lookup || ((val) => props[val]));
     }
 
     // now resolve tokens
@@ -109,6 +107,6 @@ export function buildUseStyling<TProps, TSlotProps, TTokens, TTheme>(
     }
 
     // finally produce slotProps from calling the style functions on each entry
-    return resolveToSlotProps(styles, mergedTokens, theme, props, cache);
+    return resolveToSlotProps(styles, mergedTokens, theme, cache);
   };
 }