react-native-system-ui 0.0.7 → 1.0.0

package/dist/es/components/space/Space.js

@@ -1,9 +1,9 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
-import { Platform, Pressable, Text, View } from 'react-native';
+import { Pressable, View } from 'react-native';
 import { useAriaPress } from '../../hooks';
 import { resolveGapInput, useSpaceTokens } from './tokens';
-import { parseNumberLike, isFiniteNumber, isFunction, isRenderable, isText } from '../../utils';
+import { parseNumberLike, isFiniteNumber, isFunction, isRenderable, renderTextOrNode } from '../../utils';
 const alignMap = {
   start: 'flex-start',
   end: 'flex-end',
@@ -19,32 +19,28 @@ const justifyMap = {
   around: 'space-around',
   evenly: 'space-evenly'
 };
-const parseSpaceSize = (value, presets) => {
-  if (value === undefined) return presets.normal;
-  if (isFiniteNumber(value)) return value;
-  if (typeof value === 'string' && value in presets) {
-    return presets[value];
-  }
-  return parseNumberLike(value, presets.normal) ?? presets.normal;
+const parseSpaceSize = (v, presets) => {
+  if (v === undefined) return presets.normal;
+  if (isFiniteNumber(v)) return v;
+  if (typeof v === 'string' && v in presets) return presets[v];
+  return parseNumberLike(v, presets.normal) ?? presets.normal;
 };
-const parseGap = (value, presets) => {
-  if (Array.isArray(value)) {
-    return [parseSpaceSize(value[1], presets), parseSpaceSize(value[0], presets)];
-  }
-  const parsed = parseSpaceSize(value, presets);
-  return [parsed, parsed];
+const parseGap = (v, presets) => {
+  if (Array.isArray(v)) return [parseSpaceSize(v[0], presets), parseSpaceSize(v[1], presets)];
+  const p = parseSpaceSize(v, presets);
+  return [p, p];
 };
 export const Space = /*#__PURE__*/React.memo(props => {
   const {
     children,
     gap,
-    size,
+    size: sizeProp,
     direction: directionProp,
-    align,
-    justify = 'start',
+    align: alignProp,
+    justify: justifyProp = 'start',
     wrap: wrapProp,
-    block,
-    fill,
+    block: blockProp,
+    fill: fillProp,
     divider,
     tokensOverride,
     style,
@@ -54,81 +50,62 @@ export const Space = /*#__PURE__*/React.memo(props => {
   const tokens = useSpaceTokens(tokensOverride);
   const isHorizontal = (directionProp ?? tokens.defaults.direction) === 'horizontal';
   const wrap = wrapProp ?? tokens.defaults.wrap;
-  const gapInput = resolveGapInput(gap, size, tokens.defaults.gapPreset);
-  const [rawHorizontalGap, rawVerticalGap] = parseGap(gapInput, tokens.sizing.presets);
-  const horizontalGap = Math.max(0, rawHorizontalGap);
-  const verticalGap = Math.max(0, rawVerticalGap);
-  const shouldStretchJustify = justify === 'stretch';
-  const justifyForStyle = shouldStretchJustify ? 'start' : justify;
-  const shouldBlock = block ?? !isHorizontal;
-  const resolvedAlign = align ?? (isHorizontal ? 'center' : 'stretch');
-  const supportsGap = Platform.OS === 'web';
-  const shouldFillMainAxis = isHorizontal && ((fill ?? false) || shouldStretchJustify);
-  const containerBaseStyle = {
+  const gapInput = resolveGapInput(gap, sizeProp, tokens.defaults.gapPreset);
+  const [resolvedHorizontalGap, resolvedVerticalGap] = parseGap(gapInput, tokens.sizing.presets);
+  const horizontalGap = Math.max(0, resolvedHorizontalGap);
+  const verticalGap = Math.max(0, resolvedVerticalGap);
+  const shouldJustify = justifyProp === 'stretch';
+  const justifyForStyle = shouldJustify ? 'start' : justifyProp;
+  const shouldBlock = blockProp ?? !isHorizontal;
+  const resolvedAlign = alignProp ?? (isHorizontal ? 'center' : 'stretch');
+  const shouldFillOrMaxAlign = isHorizontal && ((fillProp ?? false) || shouldJustify);
+  const containerBoxStyle = {
     flexDirection: isHorizontal ? 'row' : 'column',
     flexWrap: isHorizontal && wrap ? 'wrap' : 'nowrap',
     alignItems: alignMap[resolvedAlign],
     justifyContent: justifyMap[justifyForStyle],
-    width: shouldBlock ? '100%' : undefined
-  };
-  const spacingStyle = supportsGap ? null : isHorizontal ? {
-    paddingHorizontal: horizontalGap / 2,
-    paddingVertical: verticalGap / 2
-  } : {
-    paddingVertical: verticalGap / 2
+    width: shouldBlock ? '100%' : undefined,
+    columnGap: isHorizontal ? horizontalGap : undefined,
+    rowGap: verticalGap
   };
-  if (supportsGap) {
-    containerBaseStyle.columnGap = isHorizontal ? horizontalGap : undefined;
-    containerBaseStyle.rowGap = verticalGap;
-  } else {
-    containerBaseStyle.marginHorizontal = isHorizontal && horizontalGap ? -horizontalGap / 2 : undefined;
-    containerBaseStyle.marginVertical = verticalGap ? -verticalGap / 2 : undefined;
-  }
-  const childArray = React.Children.toArray(children).filter(isRenderable);
+  const childrenArray = React.Children.toArray(children).filter(isRenderable);
   const content = [];
-  for (let i = 0; i < childArray.length; i++) {
-    const child = childArray[i];
+  for (let i = 0; i < childrenArray.length; i++) {
+    const child = childrenArray[i];
     const key = /*#__PURE__*/React.isValidElement(child) && child.key != null ? child.key : i;
-    const fillStyle = shouldFillMainAxis ? {
+    const flexStyle = shouldFillOrMaxAlign ? {
       flexGrow: 1,
       flexBasis: 0,
       minWidth: 0
-    } : !isHorizontal && (fill || shouldBlock) ? {
+    } : !isHorizontal && (fillProp || shouldBlock) ? {
       width: '100%'
     } : undefined;
-    const node = isText(child) ? /*#__PURE__*/React.createElement(Text, null, child) : child;
     content.push(/*#__PURE__*/React.createElement(View, {
       key: key,
-      style: [spacingStyle, fillStyle]
-    }, node));
-    if (divider && i < childArray.length - 1) {
-      const dividerNode = isText(divider) ? /*#__PURE__*/React.createElement(Text, null, divider) : divider;
-      content.push(/*#__PURE__*/React.createElement(View, {
-        key: `divider-${String(key)}`,
-        style: spacingStyle
-      }, dividerNode));
-    }
+      style: flexStyle
+    }, renderTextOrNode(child)));
+    if (divider && i < childrenArray.length - 1) content.push(/*#__PURE__*/React.createElement(View, {
+      key: `divider-${String(key)}`
+    }, renderTextOrNode(divider)));
   }
-  const interactive = isFunction(onClick);
+  const isInteractive = isFunction(onClick);
   const {
     interactionProps,
     states
   } = useAriaPress({
-    disabled: !interactive,
+    disabled: !isInteractive,
     onPress: onClick,
-    extraProps: interactive ? {
+    extraProps: isInteractive ? {
       accessibilityRole: 'button'
     } : undefined
   });
-  if (interactive) {
-    return /*#__PURE__*/React.createElement(Pressable, _extends({
-      style: [tokens.layout.container, containerBaseStyle, style, states.pressed && {
-        opacity: 0.85
-      }]
-    }, interactionProps, rest), content);
-  }
+  if (isInteractive) return /*#__PURE__*/React.createElement(Pressable, _extends({
+    style: [tokens.layout.container, containerBoxStyle, style, states.pressed && {
+      opacity: 0.85
+    }]
+  }, interactionProps, rest), content);
   return /*#__PURE__*/React.createElement(View, _extends({
-    style: [tokens.layout.container, containerBaseStyle, style]
+    style: [tokens.layout.container, containerBoxStyle, style]
   }, rest), content);
 });
 Space.displayName = 'Space';