react-native-system-ui 0.0.7 → 1.0.1

package/dist/es/components/loading/Loading.js

@@ -1,18 +1,19 @@
 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 { ActivityIndicator, Text, View } from 'react-native';
-import { isText } from '../../utils/validate';
+import { ActivityIndicator, View } from 'react-native';
+import { renderTextOrNode } from '../../utils';
+import { isRenderable, isText } from '../../utils/validate';
 import { useLoadingTokens } from './tokens';
-export const Loading = props => {
+const LoadingImpl = props => {
   const {
     tokensOverride,
-    color: colorProp,
-    size: sizeProp,
-    textSize: textSizeProp,
-    textColor: textColorProp,
-    vertical: verticalProp,
-    accessibilityLabel,
-    ['aria-label']: ariaLabel,
+    color: clrP,
+    size: sizeP,
+    textSize: tsP,
+    textColor: tcP,
+    vertical: vertP,
+    accessibilityLabel: accP,
+    ['aria-label']: ariaP,
     style,
     textStyle,
     contentStyle,
@@ -20,38 +21,37 @@ export const Loading = props => {
     ...rest
   } = props;
   const tokens = useLoadingTokens(tokensOverride);
-  const color = colorProp ?? tokens.colors.indicator;
-  const size = sizeProp ?? tokens.defaults.size;
-  const textSize = textSizeProp ?? tokens.defaults.textSize;
-  const textColor = textColorProp ?? tokens.colors.text;
-  const vertical = verticalProp ?? tokens.defaults.vertical;
-  const resolvedAccessibilityLabel = ariaLabel ?? accessibilityLabel ?? 'loading';
-  const indicator = /*#__PURE__*/React.createElement(ActivityIndicator, {
+  const clr = clrP ?? tokens.colors.indicator;
+  const size = sizeP ?? tokens.defaults.size;
+  const ts = tsP ?? tokens.defaults.textSize;
+  const tc = tcP ?? tokens.colors.text;
+  const vert = vertP ?? tokens.defaults.vertical;
+  const acc = ariaP ?? accP ?? 'loading';
+  const ind = /*#__PURE__*/React.createElement(ActivityIndicator, {
     testID: "rv-loading-spinner",
     size: size,
-    color: color,
-    accessibilityLabel: resolvedAccessibilityLabel
+    color: clr,
+    accessibilityLabel: acc
   });
-  const hasChildren = children !== undefined && children !== null && children !== false;
-  const textSpacingStyle = {
-    marginLeft: vertical ? 0 : tokens.spacing.gap,
-    marginTop: vertical ? tokens.spacing.gap : 0
+  const txtSp = {
+    marginLeft: vert ? 0 : tokens.spacing.gap,
+    marginTop: vert ? tokens.spacing.gap : 0
   };
-  const textNode = hasChildren && (isText(children) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.text, textSpacingStyle, {
-      fontSize: textSize,
-      color: textColor
-    }, textStyle]
-  }, children) : /*#__PURE__*/React.createElement(View, {
-    style: textSpacingStyle
-  }, children));
+  const txtNode = isRenderable(children) && /*#__PURE__*/React.createElement(View, {
+    style: isText(children) ? undefined : txtSp
+  }, renderTextOrNode(children, [tokens.layout.text, txtSp, {
+    fontSize: ts,
+    color: tc
+  }, textStyle].filter(Boolean)));
   return /*#__PURE__*/React.createElement(View, _extends({
+    accessibilityRole: "progressbar",
     style: [tokens.layout.container, {
-      flexDirection: vertical ? 'column' : 'row',
-      justifyContent: vertical ? 'center' : 'flex-start'
+      flexDirection: vert ? 'column' : 'row',
+      justifyContent: vert ? 'center' : 'flex-start'
     }, style]
   }, rest), /*#__PURE__*/React.createElement(View, {
     style: contentStyle
-  }, indicator), textNode);
+  }, ind), txtNode);
 };
+export const Loading = /*#__PURE__*/React.memo(LoadingImpl);
 Loading.displayName = 'Loading';

package/dist/es/components/nav-bar/NavBar.js

@@ -3,11 +3,13 @@ import React, { useCallback, useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { ArrowLeft } from 'react-native-system-icon';
 import { useAriaPress } from '../../hooks';
-import { createHairlineBorderBottom } from '../../utils/hairline';
-import { isRenderable, isText } from '../../utils/validate';
+import { useLocale } from '../config-provider/useLocale';
+import { useDirection } from '../config-provider/useDirection';
+import { createHairlineView } from '../../utils/hairline';
+import { isRenderable, isText, renderTextOrNode } from '../../utils';
 import { SafeAreaView } from '../safe-area-view';
 import { useNavBarTokens } from './tokens';
-const NavBarBase = props => {
+const NavBarBaseImpl = props => {
   const {
     tokensOverride,
     title,
@@ -17,13 +19,13 @@ const NavBarBase = props => {
     rightText,
     leftIcon,
     rightIcon,
-    leftArrow: leftArrowProp,
-    fixed: fixedProp,
-    placeholder: placeholderProp,
-    zIndex: zIndexProp,
-    border: borderProp,
-    safeAreaInsetTop: safeAreaInsetTopProp,
-    background: backgroundProp,
+    leftArrow: leftArrP,
+    fixed: fixedP,
+    placeholder: placeP,
+    zIndex: zIdxP,
+    border: borderP,
+    safeAreaInsetTop: safeTopP,
+    background: bgP,
     tintColor,
     titleStyle,
     descriptionStyle,
@@ -35,33 +37,33 @@ const NavBarBase = props => {
     style,
     ...rest
   } = props;
+  const locale = useLocale();
+  const dir = useDirection();
   const tokens = useNavBarTokens(tokensOverride);
-  const leftArrow = leftArrowProp ?? tokens.defaults.leftArrow;
-  const fixed = fixedProp ?? tokens.defaults.fixed;
-  const placeholder = placeholderProp ?? tokens.defaults.placeholder;
-  const zIndex = zIndexProp ?? tokens.defaults.zIndex;
-  const border = borderProp ?? tokens.defaults.border;
-  const safeAreaInsetTop = safeAreaInsetTopProp ?? fixed;
-  const background = backgroundProp ?? tokens.colors.background;
+  const leftArrow = leftArrP ?? tokens.defaults.leftArrow;
+  const fixed = fixedP ?? tokens.defaults.fixed;
+  const placeholder = placeP ?? tokens.defaults.placeholder;
+  const zIndex = zIdxP ?? tokens.defaults.zIndex;
+  const border = borderP ?? tokens.defaults.border;
+  const safeAreaInsetTop = safeTopP ?? fixed;
+  const background = bgP ?? tokens.colors.background;
   const handlePressLeft = onPressLeft ?? onClickLeft;
   const handlePressRight = onPressRight ?? onClickRight;
   const [height, setHeight] = useState(tokens.sizing.height);
   const enablePlaceholder = fixed && placeholder;
   const handleLayout = useCallback(event => {
     if (!enablePlaceholder) return;
-    const nextHeight = event.nativeEvent.layout.height;
-    setHeight(prev => Math.abs(prev - nextHeight) < 0.5 ? prev : nextHeight);
+    const nextH = event.nativeEvent.layout.height;
+    setHeight(prev => Math.abs(prev - nextH) < 0.5 ? prev : nextH);
   }, [enablePlaceholder]);
   const resolvedColor = tintColor ?? tokens.colors.text;
   const sideColor = tintColor ?? tokens.colors.icon;
-  const leftAccessibilityLabel = isText(leftText) ? String(leftText) : '返回';
-  const rightAccessibilityLabel = isText(rightText) ? String(rightText) : '操作';
   const leftPress = useAriaPress({
     disabled: !handlePressLeft,
     onPress: handlePressLeft,
     extraProps: {
       accessibilityRole: 'button',
-      accessibilityLabel: leftAccessibilityLabel
+      accessibilityLabel: isText(leftText) ? `${leftText}` : locale?.vanNavBar?.back ?? 'Back'
     }
   });
   const rightPress = useAriaPress({
@@ -69,33 +71,41 @@ const NavBarBase = props => {
     onPress: handlePressRight,
     extraProps: {
       accessibilityRole: 'button',
-      accessibilityLabel: rightAccessibilityLabel
+      accessibilityLabel: isText(rightText) ? `${rightText}` : locale?.vanNavBar?.action ?? 'Actions'
     }
   });
-  const renderLeft = () => {
-    const arrowNode = leftArrow === true ? /*#__PURE__*/React.createElement(ArrowLeft, {
+  const renderSide = side => {
+    const isLeft = side === 'left';
+    const sideText = isLeft ? leftText : rightText;
+    const sideIcon = isLeft ? leftIcon : rightIcon;
+    const press = isLeft ? leftPress : rightPress;
+    const handler = isLeft ? handlePressLeft : handlePressRight;
+    const arrowNode = isLeft ? leftArrow === true ? /*#__PURE__*/React.createElement(ArrowLeft, {
       size: 18,
       fill: sideColor,
-      color: sideColor
-    }) : isRenderable(leftArrow) && leftArrow;
-    const hasAction = !!handlePressLeft || isRenderable(arrowNode) || isRenderable(leftText) || isRenderable(leftIcon);
-    if (!hasAction) {
-      return /*#__PURE__*/React.createElement(View, {
-        style: tokens.layout.sidePlaceholder
-      });
-    }
-    const content = /*#__PURE__*/React.createElement(React.Fragment, null, arrowNode, leftIcon, isRenderable(leftText) ? isText(leftText) ? /*#__PURE__*/React.createElement(Text, {
+      color: sideColor,
+      style: dir === 'rtl' ? {
+        transform: [{
+          scaleX: -1
+        }]
+      } : undefined
+    }) : isRenderable(leftArrow) && leftArrow : null;
+    const hasAction = !!handler || isRenderable(arrowNode) || isRenderable(sideText) || isRenderable(sideIcon);
+    if (!hasAction) return /*#__PURE__*/React.createElement(View, {
+      style: tokens.layout.sidePlaceholder
+    });
+    const content = /*#__PURE__*/React.createElement(React.Fragment, null, arrowNode, isRenderable(sideIcon) ? sideIcon : null, isRenderable(sideText) ? isText(sideText) ? /*#__PURE__*/React.createElement(Text, {
       numberOfLines: 1,
       style: [tokens.layout.sideText, {
-        color: sideColor
+        color: sideColor,
+        fontFamily: tokens.typography.fontFamily
       }]
-    }, leftText) : leftText : null);
-    if (!handlePressLeft) {
-      return /*#__PURE__*/React.createElement(View, {
-        testID: "rv-navbar-left",
-        style: [tokens.layout.side, sideStyle]
-      }, content);
-    }
+    }, sideText) : sideText : null);
+    const sideStyles = [tokens.layout.side, !isLeft && tokens.layout.rightAlign, sideStyle];
+    if (!handler) return /*#__PURE__*/React.createElement(View, {
+      testID: `rv-navbar-${side}`,
+      style: sideStyles
+    }, content);
     return /*#__PURE__*/React.createElement(Pressable, _extends({
       hitSlop: {
         top: 8,
@@ -103,81 +113,59 @@ const NavBarBase = props => {
         bottom: 8,
         left: 8
       },
-      testID: "rv-navbar-left",
-      style: [tokens.layout.side, sideStyle]
-    }, leftPress.interactionProps), content);
-  };
-  const renderRight = () => {
-    const hasAction = !!handlePressRight || isRenderable(rightText) || isRenderable(rightIcon);
-    if (!hasAction) {
-      return /*#__PURE__*/React.createElement(View, {
-        style: tokens.layout.sidePlaceholder
-      });
-    }
-    const content = /*#__PURE__*/React.createElement(React.Fragment, null, isRenderable(rightText) ? isText(rightText) ? /*#__PURE__*/React.createElement(Text, {
-      numberOfLines: 1,
-      style: [tokens.layout.sideText, {
-        color: sideColor
-      }]
-    }, rightText) : rightText : null, rightIcon);
-    if (!handlePressRight) {
-      return /*#__PURE__*/React.createElement(View, {
-        testID: "rv-navbar-right",
-        style: [tokens.layout.side, tokens.layout.rightAlign, sideStyle]
-      }, content);
-    }
-    return /*#__PURE__*/React.createElement(Pressable, _extends({
-      hitSlop: {
-        top: 8,
-        right: 8,
-        bottom: 8,
-        left: 8
-      },
-      testID: "rv-navbar-right",
-      style: [tokens.layout.side, tokens.layout.rightAlign, sideStyle]
-    }, rightPress.interactionProps), content);
+      testID: `rv-navbar-${side}`,
+      style: sideStyles
+    }, press.interactionProps), content);
   };
   const centerContent = isRenderable(children) ? children : /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.titleWrapper
-  }, isRenderable(title) ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.title, {
-      color: resolvedColor,
-      fontSize: tokens.typography.titleSize,
-      fontWeight: tokens.typography.titleWeight
-    }, titleStyle],
+  }, isRenderable(title) && renderTextOrNode(title, [tokens.layout.title, {
+    color: resolvedColor,
+    fontFamily: tokens.typography.fontFamily,
+    fontSize: tokens.typography.titleSize,
+    fontWeight: tokens.typography.titleWeight
+  }, titleStyle], {
     numberOfLines: 1
-  }, title) : title : null, isRenderable(description) ? isText(description) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.description, {
-      color: tintColor ?? tokens.colors.description,
-      fontSize: tokens.typography.descriptionSize
-    }, descriptionStyle],
+  }), isRenderable(description) && renderTextOrNode(description, [tokens.layout.description, {
+    color: tintColor ?? tokens.colors.description,
+    fontFamily: tokens.typography.fontFamily,
+    fontSize: tokens.typography.descriptionSize
+  }, descriptionStyle], {
     numberOfLines: 1
-  }, description) : description : null);
-  const bar = /*#__PURE__*/React.createElement(View, {
+  }));
+  const navbarBar = /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.bar, {
       backgroundColor: background
-    }, border ? createHairlineBorderBottom(tokens.colors.border) : null],
+    }],
     onLayout: safeAreaInsetTop ? undefined : handleLayout
-  }, renderLeft(), /*#__PURE__*/React.createElement(View, {
+  }, renderSide('left'), /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.center
-  }, centerContent), renderRight());
-  const wrapped = safeAreaInsetTop ? /*#__PURE__*/React.createElement(SafeAreaView, {
+  }, centerContent), renderSide('right'), border && /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'bottom',
+      color: tokens.colors.border,
+      left: 0,
+      right: 0
+    })
+  }));
+  const wrappedBar = safeAreaInsetTop ? /*#__PURE__*/React.createElement(SafeAreaView, {
     onLayout: handleLayout,
     style: {
       backgroundColor: background
     }
-  }, bar) : bar;
-  const navContent = /*#__PURE__*/React.createElement(View, _extends({}, rest, {
-    style: [tokens.layout.container, fixed && [tokens.layout.fixed, {
-      zIndex
-    }], style]
-  }), wrapped);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, enablePlaceholder ? /*#__PURE__*/React.createElement(View, {
+  }, navbarBar) : navbarBar;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, enablePlaceholder && /*#__PURE__*/React.createElement(View, {
     testID: "rv-navbar-placeholder",
     style: {
       height
     }
-  }) : null, navContent);
+  }), /*#__PURE__*/React.createElement(View, _extends({}, rest, {
+    accessibilityRole: 'navigation',
+    style: [tokens.layout.container, fixed && [tokens.layout.fixed, {
+      zIndex
+    }], style]
+  }), wrappedBar));
 };
+const NavBarBase = /*#__PURE__*/React.memo(NavBarBaseImpl);
 NavBarBase.displayName = 'NavBar';
 export default NavBarBase;

package/dist/es/components/nav-bar/tokens.js

@@ -1,11 +1,10 @@
-import { Platform } from 'react-native';
 import { createComponentTokensHook } from '../../design-system';
 export const createNavBarTokens = ({
   palette,
   spacing,
-  fontSize
+  fontSize,
+  typography
 }) => {
-  const fixedPosition = Platform.OS === 'web' ? 'fixed' : 'absolute';
   return {
     defaults: {
       fixed: false,
@@ -57,7 +56,7 @@ export const createNavBarTokens = ({
         includeFontPadding: false
       },
       fixed: {
-        position: fixedPosition,
+        position: 'absolute',
         top: 0,
         left: 0,
         right: 0
@@ -71,6 +70,7 @@ export const createNavBarTokens = ({
       icon: palette.default[700]
     },
     typography: {
+      fontFamily: typography.fontFamily,
       titleSize: fontSize.lg,
       titleWeight: '600',
       descriptionSize: fontSize.sm