@fluentui-react-native/stack 0.8.15 → 0.9.0

package/src/StackUtils.ts

@@ -1,4 +1,4 @@
-import type { Theme } from '@fluentui-react-native/framework';
+import type { Spacing, Theme } from '@fluentui-react-native/framework';
 
 /**
  * Functions used by Stack components to simplify style-related computations
@@ -8,57 +8,51 @@ import type { Theme } from '@fluentui-react-native/framework';
 const _spacingKey = 'spacing';
 
 // Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.
-const _getThemedSpacing = (space: string, theme: Theme): string => {
+const _getThemedSpacing = (space: `${number}` | `${number}px` | keyof Spacing, theme: Theme): number => {
   const spacing = theme[_spacingKey];
-  if (spacing && typeof spacing === 'object') {
+  if (spacing && typeof spacing === 'object' && typeof space === 'string') {
     if (spacing.hasOwnProperty(space)) {
-      return spacing[space];
+      space = spacing[space];
     }
   }
-  return space;
-};
 
-// Helper function that takes a gap as a string and converts it into a { value, unit } representation.
-const _getValueUnitGap = (gap: string): { value: number; unit: string } => {
-  const numericalPart = parseFloat(gap);
+  const numericalPart = parseFloat(space);
   const numericalValue = isNaN(numericalPart) ? 0 : numericalPart;
-  const numericalString = isNaN(numericalPart) ? '' : numericalPart.toString();
-
-  const unitPart = gap.substring(numericalString.toString().length);
-
-  return {
-    value: numericalValue,
-    unit: unitPart || 'px',
-  };
+  return numericalValue;
 };
 
 export interface IParseGapResult {
-  rowGap: { value: number; unit: string };
-  columnGap: { value: number; unit: string };
+  rowGap: number;
+  columnGap: number;
 }
 
+type SpacingGapValue = `${number}px` | `${number}` | keyof Spacing;
+
 /**
  * Takes in a gap size in either a CSS-style format (e.g. 10 or "10px")
  *  or a key of a themed spacing value (e.g. "s1").
  * Returns the separate numerical value of the padding (e.g. 10)
  *  and the CSS unit (e.g. "px").
  */
-export function parseGap(gap: number | string | undefined, theme: Theme): IParseGapResult {
+export function parseGap(
+  gap: number | SpacingGapValue | `${SpacingGapValue} ${SpacingGapValue}` | undefined,
+  theme: Theme,
+): IParseGapResult {
   const result: IParseGapResult = {
-    rowGap: { value: 0, unit: 'px' },
-    columnGap: { value: 0, unit: 'px' },
+    rowGap: 0,
+    columnGap: 0,
   };
   if (gap) {
     if (typeof gap === 'number') {
-      result.rowGap.value = gap;
-      result.columnGap.value = gap;
+      result.rowGap = gap;
+      result.columnGap = gap;
     } else {
       const splitGap = gap.split(' ');
       if (splitGap.length === 2) {
-        result.rowGap = _getValueUnitGap(_getThemedSpacing(splitGap[0], theme));
-        result.columnGap = _getValueUnitGap(_getThemedSpacing(splitGap[1], theme));
+        result.rowGap = _getThemedSpacing(splitGap[0] as SpacingGapValue, theme);
+        result.columnGap = _getThemedSpacing(splitGap[1] as SpacingGapValue, theme);
       } else {
-        const calculatedGap = _getValueUnitGap(_getThemedSpacing(gap, theme));
+        const calculatedGap = _getThemedSpacing(gap as SpacingGapValue, theme);
         result.rowGap = calculatedGap;
         result.columnGap = calculatedGap;
       }
@@ -68,22 +62,13 @@ export function parseGap(gap: number | string | undefined, theme: Theme): IParse
 }
 
 /**
- * Takes in a padding in a CSS-style format (e.g. 10, "10px", "10px 10px", etc.)
- *  where the separate padding values can also be the key of a themed spacing value
- *  (e.g. "s1 m", "10px l1 20px l2", etc.).
- * Returns a CSS-style padding.
+ * Takes in a padding in a CSS-style format (e.g. 10, "10px"), or a key of a themed spacing value
+ *  (e.g. "s1")
  */
-export function parsePadding(padding: number | string | undefined, theme: Theme): number | string | undefined {
-  if (padding === undefined || typeof padding === 'number' || padding === '') {
-    return padding;
-  }
-
-  const paddingValues = padding.split(' ');
-  if (paddingValues.length < 2) {
-    return _getThemedSpacing(padding, theme);
+export function parsePadding(padding: keyof Spacing | number | `${number}px` | undefined, theme: Theme): number | undefined {
+  if (padding === undefined || typeof padding === 'number') {
+    return padding as undefined | number;
   }
 
-  return paddingValues.reduce((padding1: string, padding2: string) => {
-    return _getThemedSpacing(padding1, theme) + ' ' + _getThemedSpacing(padding2, theme);
-  });
+  return _getThemedSpacing(padding, theme);
 }