react-native-system-ui 1.0.1 → 1.0.2

package/README.md

@@ -119,13 +119,13 @@ export const AuroraBranding = () => (
 
 | 分类 | 组件 |
 | --- | --- |
-| **设计系统** | ConfigProvider、ThemeProvider、createTokens、themePresets（light / dark / aurora） |
+| **设计系统** | ConfigProvider、ThemeProvider、Text、createTokens、themePresets（light / dark / aurora） |
 | **基础展示** | Button、Badge、Cell、Collapse、Divider、Empty、Flex、Grid、Space、Tag、Typography、Loading、Avatar |
 | **反馈交互** | Toast、Dialog、ActionSheet、Notify、Overlay、Popup、Portal、NoticeBar、ShareSheet |
 | **表单输入** | Form、Field、Input、PasswordInput、Checkbox、Radio、Switch、Stepper、Rate、Picker、DatetimePicker、Calendar、Search、NumberKeyboard、Area、Cascader、Selector |
 | **导航布局** | Tabs、NavBar、Tabbar、Sidebar、Swiper（三端手势 + 桌面鼠标拖拽） |
 | **数据展示** | Image、ImagePreview、Skeleton、Progress、Circle、Slider、CountDown、WaterMark |
-| **基础设施** | SafeAreaView、PortalHost、OverlayProvider、locale（zhCN / enUS） |
+| **基础设施** | SafeAreaView、ErrorBoundary、PortalHost、OverlayProvider、locale（zhCN / enUS） |
 
 详细组件列表与开发状态见 [路线图](./docs/guide/roadmap.md)。
 
@@ -156,4 +156,4 @@ export const AuroraBranding = () => (
 
 ## 版本与反馈
 
-当前为 v0.0.7，欢迎 issue / PR。
+当前为 v1.0.2，欢迎 issue / PR。

package/dist/cjs/components/action-sheet/ActionSheet.js

@@ -66,7 +66,9 @@ const ActionSheetHeader = /*#__PURE__*/_react().default.memo(({
   }, closePress.interactionProps), /*#__PURE__*/_react().default.isValidElement(closeIcon) ? /*#__PURE__*/_react().default.cloneElement(closeIcon, {
     fill: colors.description,
     color: colors.description
-  }) : closeIcon));
+  }) : (0, _utils.renderTextOrNode)(closeIcon, [{
+    color: colors.description
+  }])));
 });
 const ActionSheetItem = /*#__PURE__*/_react().default.memo(({
   action,
@@ -109,7 +111,9 @@ const ActionSheetItem = /*#__PURE__*/_react().default.memo(({
     }, action.style]
   }, actionPress.interactionProps), !!icon && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.icon
-  }, icon), loading ? /*#__PURE__*/_react().default.createElement(_loading.default, {
+  }, (0, _utils.isText)(icon) ? (0, _utils.renderTextOrNode)(icon, [{
+    color: colors.item
+  }]) : icon), loading ? /*#__PURE__*/_react().default.createElement(_loading.default, {
     size: 20
   }) : (0, _utils.isRenderable)(name) ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.itemTextWrapper

package/dist/cjs/components/cascader/Cascader.js

@@ -396,10 +396,11 @@ const CascaderOptionItem = /*#__PURE__*/_react().default.memo(({
   }, selected ? {
     fontWeight: tokens.typography.optionTextActiveWeight
   } : null];
-  const cnt = optionRender ? optionRender({
+  const rawCnt = optionRender ? optionRender({
     option,
     selected
   }) : (0, _utils.renderTextOrNode)(lbl, txtStyle);
+  const cnt = (0, _validate.isText)(rawCnt) ? (0, _utils.renderTextOrNode)(rawCnt, txtStyle) : rawCnt;
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
     testID: `cascader-option-${tabIndex}-${String(ov)}`,
     style: ({

package/dist/cjs/components/form/Form.js

@@ -288,7 +288,7 @@ const InternalFormImpl = (props, ref) => {
     value: ctxVal
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
     style: style
-  }, rest), children, footer));
+  }, rest), children, (0, _validate.isText)(footer) ? (0, _utils.renderTextOrNode)(footer, []) : footer));
 };
 const InternalFormRef = /*#__PURE__*/_react().default.forwardRef(InternalFormImpl);
 const InternalForm = /*#__PURE__*/_react().default.memo(InternalFormRef);

package/dist/cjs/components/image-preview/ImagePreview.js

@@ -266,16 +266,26 @@ const ImagePreviewImpl = (props, ref) => {
         paddingHorizontal: spacing.indexPaddingHorizontal,
         paddingVertical: spacing.indexPaddingVertical
       }]
-    }, indexRender ? indexRender({
-      index: current,
-      len: total
-    }) : /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: [S.indexText, {
-        color: colors.indexText,
-        fontFamily: typography.fontFamily,
-        fontSize: typography.indexTextSize
-      }]
-    }, indexText)));
+    }, (() => {
+      if (!indexRender) return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+        style: [S.indexText, {
+          color: colors.indexText,
+          fontFamily: typography.fontFamily,
+          fontSize: typography.indexTextSize
+        }]
+      }, indexText);
+      const node = indexRender({
+        index: current,
+        len: total
+      });
+      return (0, _validate.isText)(node) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+        style: [S.indexText, {
+          color: colors.indexText,
+          fontFamily: typography.fontFamily,
+          fontSize: typography.indexTextSize
+        }]
+      }, node) : node;
+    })()));
   }, [colors.indexBackground, colors.indexText, indexRender, radii.indexBadge, showIndex, spacing.indexPaddingHorizontal, spacing.indexPaddingVertical, spacing.indexTop, typography.indexTextSize]);
   const lazyBuffer = lazyRender ? Math.max(0, lazyRenderBuffer | 0) : 0;
   const renderIndicator = (0, _react().useCallback)((total, current) => /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, renderIndex(current, total), showIndicators && total > 1 && /*#__PURE__*/_react().default.createElement(_swiper.default.PagIndicator, {

package/dist/cjs/components/share-sheet/ShareSheet.js

@@ -55,13 +55,14 @@ const ShareSheetOptionItem = /*#__PURE__*/_react().default.memo(({
       testID: `rv-share-sheet-item-${i}`
     }
   });
+  const iconNode = (0, _validate.isText)(o.icon) ? (0, _utils.renderTextOrNode)(o.icon, []) : o.icon;
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     style: [S.o, ows]
   }, p.interactionProps), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [S.ic, is, {
       marginHorizontal: t.spacing.iconMarginHorizontal
     }]
-  }, o.icon), (0, _validate.isValidNode)(o.name) && (0, _utils.renderTextOrNode)(o.name, [S.ot, {
+  }, iconNode), (0, _validate.isValidNode)(o.name) && (0, _utils.renderTextOrNode)(o.name, [S.ot, {
     color: t.colors.option,
     fontFamily: t.typography.fontFamily,
     fontSize: t.typography.option,

package/dist/cjs/components/slider/Slider.js

@@ -205,7 +205,7 @@ const ThumbNode = /*#__PURE__*/_react().default.memo(({
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, handlers, accessibilityProps, {
     pointerEvents: isDisabled ? 'none' : 'auto',
     style: [content ? S.thw : S.t, webGestureStyle, thumbStyle]
-  }), content ?? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }), content != null ? (0, _validate.isText)(content) ? (0, _utils2.renderTextOrNode)(content, []) : content : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: indicatorStyle
   }), !content && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: (0, _hairline.createHairlineView)({

package/dist/cjs/components/tabbar/TabbarItem.js

@@ -52,6 +52,12 @@ const TabbarItemImpl = p => {
   const c = ia ? ctx.activeColor : ctx.inactiveColor;
   const ris = iconSize ?? t.icon.size;
   const ait = (0, _react().useCallback)(n => {
+    if ((0, _validate.isText)(n)) return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: {
+        color: c,
+        fontSize: ris
+      }
+    }, n);
     if (! /*#__PURE__*/_react().default.isValidElement(n)) return n;
     const e = n;
     const np = {};

package/dist/cjs/components/toast/Toast.js

@@ -271,7 +271,10 @@ const ToastContentImpl = props => {
     style: [S.t, toastStyle, style]
   }, iconNode && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: iconWrapperStyle
-  }, iconNode), hasMessage && ((0, _validate.isText)(message) ? (0, _utils.renderTextOrNode)(message, [S.m, messageStyle, textStyle]) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, (0, _validate.isText)(iconNode) ? (0, _utils.renderTextOrNode)(iconNode, [{
+    color: colors.text,
+    fontSize: tokens.iconSize
+  }]) : iconNode), hasMessage && ((0, _validate.isText)(message) ? (0, _utils.renderTextOrNode)(message, [S.m, messageStyle, textStyle]) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: S.mw
   }, message)))), needsSafeAreaBottom && /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
     edge: "bottom",

package/dist/es/components/action-sheet/ActionSheet.js

@@ -40,7 +40,9 @@ const ActionSheetHeader = /*#__PURE__*/React.memo(({
   }, closePress.interactionProps), /*#__PURE__*/React.isValidElement(closeIcon) ? /*#__PURE__*/React.cloneElement(closeIcon, {
     fill: colors.description,
     color: colors.description
-  }) : closeIcon));
+  }) : renderTextOrNode(closeIcon, [{
+    color: colors.description
+  }])));
 });
 const ActionSheetItem = /*#__PURE__*/React.memo(({
   action,
@@ -83,7 +85,9 @@ const ActionSheetItem = /*#__PURE__*/React.memo(({
     }, action.style]
   }, actionPress.interactionProps), !!icon && /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.icon
-  }, icon), loading ? /*#__PURE__*/React.createElement(Loading, {
+  }, isText(icon) ? renderTextOrNode(icon, [{
+    color: colors.item
+  }]) : icon), loading ? /*#__PURE__*/React.createElement(Loading, {
     size: 20
   }) : isRenderable(name) ? /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.itemTextWrapper

package/dist/es/components/cascader/Cascader.js

@@ -370,10 +370,11 @@ const CascaderOptionItem = /*#__PURE__*/React.memo(({
   }, selected ? {
     fontWeight: tokens.typography.optionTextActiveWeight
   } : null];
-  const cnt = optionRender ? optionRender({
+  const rawCnt = optionRender ? optionRender({
     option,
     selected
   }) : renderTextOrNode(lbl, txtStyle);
+  const cnt = isText(rawCnt) ? renderTextOrNode(rawCnt, txtStyle) : rawCnt;
   return /*#__PURE__*/React.createElement(Pressable, {
     testID: `cascader-option-${tabIndex}-${String(ov)}`,
     style: ({

package/dist/es/components/form/Form.js

@@ -1,7 +1,7 @@
 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, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { View } from 'react-native';
-import { shallowEqualObject } from '../../utils';
+import { shallowEqualObject, renderTextOrNode } from '../../utils';
 import { isPromiseLike } from '../../utils/promise';
 import { isNumber, isString, isText } from '../../utils/validate';
 import { FORM_ALL_FIELDS_KEY, getValueByName, normalizeTrigger, serializeNamePath, setValueByName } from './utils';
@@ -269,7 +269,7 @@ const InternalFormImpl = (props, ref) => {
     value: ctxVal
   }, /*#__PURE__*/React.createElement(View, _extends({
     style: style
-  }, rest), children, footer));
+  }, rest), children, isText(footer) ? renderTextOrNode(footer, []) : footer));
 };
 const InternalFormRef = /*#__PURE__*/React.forwardRef(InternalFormImpl);
 const InternalForm = /*#__PURE__*/React.memo(InternalFormRef);

package/dist/es/components/image-preview/ImagePreview.js

@@ -4,7 +4,7 @@ import { Image as RNImage, Platform, Pressable, StyleSheet, Text, View } from 'r
 import Popup from '../popup';
 import Swiper from '../swiper';
 import { useImagePreviewTokens } from './tokens';
-import { isString } from '../../utils/validate';
+import { isString, isText } from '../../utils/validate';
 const clampIndex = (index, total) => total <= 0 ? 0 : Math.max(0, Math.min(total - 1, index));
 const indicatorSpacing = {
   bottom: 32
@@ -246,16 +246,26 @@ const ImagePreviewImpl = (props, ref) => {
         paddingHorizontal: spacing.indexPaddingHorizontal,
         paddingVertical: spacing.indexPaddingVertical
       }]
-    }, indexRender ? indexRender({
-      index: current,
-      len: total
-    }) : /*#__PURE__*/React.createElement(Text, {
-      style: [S.indexText, {
-        color: colors.indexText,
-        fontFamily: typography.fontFamily,
-        fontSize: typography.indexTextSize
-      }]
-    }, indexText)));
+    }, (() => {
+      if (!indexRender) return /*#__PURE__*/React.createElement(Text, {
+        style: [S.indexText, {
+          color: colors.indexText,
+          fontFamily: typography.fontFamily,
+          fontSize: typography.indexTextSize
+        }]
+      }, indexText);
+      const node = indexRender({
+        index: current,
+        len: total
+      });
+      return isText(node) ? /*#__PURE__*/React.createElement(Text, {
+        style: [S.indexText, {
+          color: colors.indexText,
+          fontFamily: typography.fontFamily,
+          fontSize: typography.indexTextSize
+        }]
+      }, node) : node;
+    })()));
   }, [colors.indexBackground, colors.indexText, indexRender, radii.indexBadge, showIndex, spacing.indexPaddingHorizontal, spacing.indexPaddingVertical, spacing.indexTop, typography.indexTextSize]);
   const lazyBuffer = lazyRender ? Math.max(0, lazyRenderBuffer | 0) : 0;
   const renderIndicator = useCallback((total, current) => /*#__PURE__*/React.createElement(React.Fragment, null, renderIndex(current, total), showIndicators && total > 1 && /*#__PURE__*/React.createElement(Swiper.PagIndicator, {

package/dist/es/components/share-sheet/ShareSheet.js

@@ -35,13 +35,14 @@ const ShareSheetOptionItem = /*#__PURE__*/React.memo(({
       testID: `rv-share-sheet-item-${i}`
     }
   });
+  const iconNode = isText(o.icon) ? renderTextOrNode(o.icon, []) : o.icon;
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     style: [S.o, ows]
   }, p.interactionProps), /*#__PURE__*/React.createElement(View, {
     style: [S.ic, is, {
       marginHorizontal: t.spacing.iconMarginHorizontal
     }]
-  }, o.icon), isValidNode(o.name) && renderTextOrNode(o.name, [S.ot, {
+  }, iconNode), isValidNode(o.name) && renderTextOrNode(o.name, [S.ot, {
     color: t.colors.option,
     fontFamily: t.typography.fontFamily,
     fontSize: t.typography.option,

package/dist/es/components/slider/Slider.js

@@ -7,8 +7,8 @@ import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import { useSliderTokens } from './tokens';
 import { parseNumber } from '../../utils/number';
 import { createHairlineView } from '../../utils/hairline';
-import { clamp } from '../../utils';
-import { isFunction, isFiniteNumber } from '../../utils/validate';
+import { clamp, renderTextOrNode } from '../../utils';
+import { isFunction, isFiniteNumber, isText } from '../../utils/validate';
 import { useAriaPress } from '../../hooks';
 const isSameLayout = (a, b) => a.width === b.width && a.height === b.height && a.x === b.x && a.y === b.y;
 const normalizeValue = (value, range, min, max) => {
@@ -168,7 +168,7 @@ const ThumbNode = /*#__PURE__*/React.memo(({
   return /*#__PURE__*/React.createElement(View, _extends({}, handlers, accessibilityProps, {
     pointerEvents: isDisabled ? 'none' : 'auto',
     style: [content ? S.thw : S.t, webGestureStyle, thumbStyle]
-  }), content ?? /*#__PURE__*/React.createElement(View, {
+  }), content != null ? isText(content) ? renderTextOrNode(content, []) : content : /*#__PURE__*/React.createElement(View, {
     style: indicatorStyle
   }), !content && /*#__PURE__*/React.createElement(View, {
     style: createHairlineView({

package/dist/es/components/tabbar/TabbarItem.js

@@ -32,6 +32,12 @@ const TabbarItemImpl = p => {
   const c = ia ? ctx.activeColor : ctx.inactiveColor;
   const ris = iconSize ?? t.icon.size;
   const ait = useCallback(n => {
+    if (isText(n)) return /*#__PURE__*/React.createElement(Text, {
+      style: {
+        color: c,
+        fontSize: ris
+      }
+    }, n);
     if (! /*#__PURE__*/React.isValidElement(n)) return n;
     const e = n;
     const np = {};

package/dist/es/components/toast/Toast.js

@@ -245,7 +245,10 @@ const ToastContentImpl = props => {
     style: [S.t, toastStyle, style]
   }, iconNode && /*#__PURE__*/React.createElement(View, {
     style: iconWrapperStyle
-  }, iconNode), hasMessage && (isText(message) ? renderTextOrNode(message, [S.m, messageStyle, textStyle]) : /*#__PURE__*/React.createElement(View, {
+  }, isText(iconNode) ? renderTextOrNode(iconNode, [{
+    color: colors.text,
+    fontSize: tokens.iconSize
+  }]) : iconNode), hasMessage && (isText(message) ? renderTextOrNode(message, [S.m, messageStyle, textStyle]) : /*#__PURE__*/React.createElement(View, {
     style: S.mw
   }, message)))), needsSafeAreaBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
     edge: "bottom",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-system-ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "面向 React Native 的设计系统级组件库，Tokens + ThemeProvider 主题体系，按需引入、体积小；API 统一可组合、高效可靠，支持可访问性与多端一致。",
   "homepage": "https://rn-system-ui.netlify.app/",
   "main": "./dist/cjs/index.js",