react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/es/tabbar/TabbarItem.js

@@ -0,0 +1,139 @@
+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 { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useAriaPress } from '../../hooks';
+import { isFunction, isPlainObject, isRenderable, isText } from '../../utils/validate';
+import Badge from '../badge';
+import { useTabbarContext } from './TabbarContext';
+import { useTabbarTokens } from './tokens';
+const TabbarItem = props => {
+  const {
+    name,
+    icon,
+    badge,
+    dot = false,
+    onClick,
+    textStyle,
+    iconStyle,
+    children,
+    disabled = false,
+    style,
+    index,
+    testID,
+    iconSize,
+    tokensOverride,
+    ...rest
+  } = props;
+  const tokens = useTabbarTokens(tokensOverride);
+  const context = useTabbarContext();
+  if (!context) {
+    if (typeof __DEV__ !== 'undefined' && __DEV__) {
+      console.warn('[TabbarItem] 需要作为 Tabbar 的子节点使用。');
+    }
+    return null;
+  }
+  const itemName = name ?? index ?? 0;
+  const isActive = context.activeValue === itemName;
+  const color = isActive ? context.activeColor : context.inactiveColor;
+  const resolvedIconSize = iconSize ?? tokens.icon.size;
+  const applyIconTheme = node => {
+    if (! /*#__PURE__*/React.isValidElement(node)) return node;
+    const element = node;
+    const nextProps = {};
+    const p = element.props ?? {};
+    if (p['size'] == null) nextProps['size'] = resolvedIconSize;
+    if (p['fill'] == null) nextProps['fill'] = color;
+    if (p['color'] == null) nextProps['color'] = color;
+    if (p['style'] != null) {
+      nextProps['style'] = [p['style'], {
+        color
+      }];
+    }
+    return /*#__PURE__*/React.cloneElement(element, nextProps);
+  };
+  const renderIcon = () => {
+    if (!icon) return null;
+    const raw = isFunction(icon) ? icon(isActive) : icon;
+    return applyIconTheme(raw);
+  };
+  const renderLabel = () => {
+    return isFunction(children) ? children(isActive) : children;
+  };
+  const ariaPress = useAriaPress({
+    disabled,
+    onPress: () => {
+      if (!disabled) {
+        onClick?.();
+        context.onSelect(itemName, index ?? 0);
+      }
+    },
+    extraProps: {
+      accessibilityRole: 'tab',
+      accessibilityState: {
+        selected: isActive,
+        disabled
+      },
+      testID: testID ?? `rv-tabbar-item-${itemName}`
+    }
+  });
+  const shouldRenderBadge = dot || isRenderable(badge);
+  const renderBadge = () => {
+    if (isRenderable(badge)) {
+      if (isText(badge)) {
+        return /*#__PURE__*/React.createElement(Badge, {
+          content: badge
+        });
+      }
+      if (isPlainObject(badge)) {
+        const badgeProps = badge;
+        return /*#__PURE__*/React.createElement(Badge, _extends({}, badgeProps, {
+          dot: dot || badgeProps.dot
+        }));
+      }
+      return badge;
+    }
+    return /*#__PURE__*/React.createElement(Badge, {
+      dot: true
+    });
+  };
+  return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, ariaPress.interactionProps, {
+    style: [styles.item, {
+      height: tokens.layout.height,
+      paddingVertical: tokens.layout.paddingVertical,
+      opacity: disabled ? 0.5 : 1
+    }, style]
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles.iconWrapper, iconStyle]
+  }, renderIcon(), shouldRenderBadge && /*#__PURE__*/React.createElement(View, {
+    style: styles.badge
+  }, renderBadge())), isRenderable(children) ? /*#__PURE__*/React.createElement(Text, {
+    style: [styles.label, {
+      color,
+      fontSize: context.fontSize,
+      fontWeight: context.fontWeight,
+      lineHeight: context.fontSize
+    }, textStyle]
+  }, renderLabel()) : null);
+};
+const styles = StyleSheet.create({
+  item: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 4
+  },
+  iconWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  badge: {
+    position: 'absolute',
+    top: -4,
+    right: -12
+  },
+  label: {
+    includeFontPadding: false
+  }
+});
+TabbarItem.displayName = 'Tabbar.Item';
+export default TabbarItem;

package/dist/es/tabbar/index.js

@@ -0,0 +1,7 @@
+import TabbarBase from './Tabbar';
+import TabbarItem from './TabbarItem';
+export { useTabbarTokens } from './tokens';
+const Tabbar = TabbarBase;
+Tabbar.Item = TabbarItem;
+export { TabbarItem };
+export default Tabbar;

package/dist/es/tabbar/tokens.js

@@ -0,0 +1,37 @@
+import { createComponentTokensHook } from '../../design-system';
+const createTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize
+  } = foundations;
+  return {
+    defaults: {
+      fixed: true,
+      border: true,
+      // 与 Vant 默认一致：placeholder 默认关闭；safe-area 由 Tabbar 在 fixed 时默认开启
+      placeholder: false,
+      safeAreaInsetBottom: false
+    },
+    colors: {
+      background: '#ffffff',
+      border: palette.default[200],
+      active: palette.primary[600],
+      inactive: palette.default[600]
+    },
+    layout: {
+      // 对齐官方默认观感（Vant Tabbar）：50 高度、无左右 padding
+      height: 50,
+      paddingHorizontal: 0,
+      paddingVertical: spacing.xs
+    },
+    icon: {
+      size: 22
+    },
+    typography: {
+      fontSize: fontSize.sm,
+      fontWeight: '400'
+    }
+  };
+};
+export const useTabbarTokens = createComponentTokensHook('tabbar', createTokens);

package/dist/es/tabs/TabPane.js

@@ -0,0 +1,3 @@
+const TabPane = () => null;
+TabPane.displayName = 'Tabs.TabPane';
+export default TabPane;