@seakoi/native-ui 1.2.0 → 1.3.0

package/dist/commonjs/components/base/tabs/tabs.js

@@ -4,16 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Tabs = void 0;
+var _ahooks = require("ahooks");
 var _react = require("react");
 var _reactNative = require("react-native");
 var _index = require("./../index.js");
 var _index2 = require("../../../native-provider/index.js");
+var _index3 = require("./style/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 const Tabs = ({
   tabs,
-  onChange
+  equalWidth = false,
+  variant = 'underline',
+  ...restProps
 }) => {
-  const styles = useStyles();
+  const [activeValue, setActiveValue] = (0, _ahooks.useControllableValue)(restProps, {
+    trigger: 'onChange',
+    defaultValue: restProps.defaultValue ?? tabs[0]?.value
+  });
+  const styles = (0, _index3.useTabsStyles)();
   const theme = (0, _index2.useTheme)();
   const tabNum = tabs.length;
   const scrollViewWidthRef = (0, _react.useRef)(0);
@@ -41,27 +49,21 @@ const Tabs = ({
     };
     initIndicator();
   };
-  const normalizedTabs = tabs.map(tab => {
-    if (typeof tab === 'string') {
-      return {
-        label: tab,
-        value: tab
-      };
-    }
-  });
   const navigateTo = index => {
     const targetLayout = layouts.current[index];
     const left = targetLayout.tab.x + (targetLayout.tab.width - targetLayout.text.width) / 2;
-    const width = targetLayout.text.width;
-    _reactNative.Animated.parallel([_reactNative.Animated.timing(animatedIndicatorLeft.current, {
-      toValue: left,
-      useNativeDriver: false,
-      duration: 300
-    }), _reactNative.Animated.timing(animatedIndicatorWidth.current, {
-      toValue: width,
-      useNativeDriver: false,
-      duration: 300
-    })]).start();
+    if (variant === 'underline') {
+      const width = targetLayout.text.width;
+      _reactNative.Animated.parallel([_reactNative.Animated.timing(animatedIndicatorLeft.current, {
+        toValue: left,
+        useNativeDriver: false,
+        duration: 300
+      }), _reactNative.Animated.timing(animatedIndicatorWidth.current, {
+        toValue: width,
+        useNativeDriver: false,
+        duration: 300
+      })]).start();
+    }
     const hh = scrollViewWidthRef.current / 2;
     scrollViewRef.current?.scrollTo({
       x: targetLayout.tab.x + targetLayout.tab.width / 2 - hh,
@@ -69,10 +71,10 @@ const Tabs = ({
     });
   };
   const genOnPress = (v, index) => {
-    onChange?.(v);
+    setActiveValue?.(v.value);
     navigateTo(index);
   };
-  const initIndicator = (0, _react.useCallback)(() => {
+  const initIndicator = (0, _ahooks.useMemoizedFn)(() => {
     const layoutItems = layouts.current.filter(item => item.tab && item.text);
     if (layoutItems.length === layouts.current.length) {
       setState(s => ({
@@ -80,7 +82,7 @@ const Tabs = ({
         layoutFinish: true
       }));
     }
-  }, []);
+  });
   const indicatorJSX = (0, _react.useMemo)(() => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       style: {
@@ -93,22 +95,72 @@ const Tabs = ({
       }
     });
   }, [theme]);
-  const tabsJSX = normalizedTabs.map((item, index) => {
+  const renderTab = (0, _ahooks.useMemoizedFn)((tab, index) => {
+    const isActive = activeValue === tab.value;
+    const badgeCount = tab.badge !== undefined ? typeof tab.badge === 'number' ? tab.badge : undefined : undefined;
+    if (variant === 'label') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        onLayout: genOnLayoutTab(index),
+        style: [{
+          paddingVertical: 10,
+          zIndex: tabNum - index
+        }, equalWidth && {
+          flex: 1
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Badge, {
+          count: badgeCount,
+          visible: tab.badge !== undefined,
+          size: "small",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            activeOpacity: 0.7,
+            onPress: () => genOnPress(tab, index),
+            style: [styles.labelTab, isActive && styles.labelTabActive, equalWidth && {
+              alignSelf: 'stretch',
+              justifyContent: 'center',
+              alignItems: 'center'
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+              onLayout: genOnLayoutText(index),
+              style: [styles.labelText, isActive && styles.labelTextActive],
+              size: 14,
+              children: tab.label
+            })
+          })
+        })
+      }, tab.value);
+    }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      style: styles.tabItem,
-      onPress: () => genOnPress(item, index),
+      style: [styles.tabItem, {
+        zIndex: tabNum - index
+      }, equalWidth && {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+      }],
+      onPress: () => genOnPress(tab, index),
       onLayout: genOnLayoutTab(index),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
-        onLayout: genOnLayoutText(index),
-        children: item?.label
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Badge, {
+        count: badgeCount,
+        visible: tab.badge !== undefined,
+        size: "small",
+        offset: [-4, -4],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          color: isActive ? theme.palette.fontGray1 : theme.palette.fontGray2,
+          font: isActive ? 'semiBold' : 'regular',
+          onLayout: genOnLayoutText(index),
+          size: 14,
+          children: tab?.label
+        })
       })
-    }, item?.value);
+    }, tab?.value);
   });
   (0, _react.useEffect)(() => {
     if (state.layoutFinish) {
-      navigateTo(0);
+      const index = tabs.findIndex(item => item.value === activeValue);
+      navigateTo(index === -1 ? 0 : index);
     }
-  }, [state.layoutFinish]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.layoutFinish, activeValue]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.container,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
@@ -116,22 +168,15 @@ const Tabs = ({
       horizontal: true,
       showsHorizontalScrollIndicator: false,
       onLayout: onLayoutScrollView,
+      scrollEnabled: !equalWidth,
       contentContainerStyle: {
         alignContent: 'center',
-        columnGap: 16
+        columnGap: 8,
+        flexGrow: equalWidth ? 1 : 0,
+        paddingHorizontal: 16
       },
-      children: [tabsJSX, indicatorJSX]
+      children: [tabs.map(renderTab), indicatorJSX]
     })
   });
 };
-exports.Tabs = Tabs;
-const useStyles = (0, _index2.createThemedStyles)(() => {
-  return {
-    container: {
-      paddingHorizontal: 16
-    },
-    tabItem: {
-      paddingVertical: 16
-    }
-  };
-});
+exports.Tabs = Tabs;

package/dist/commonjs/native-provider/native-provider.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NativeProvider = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
 var _index = require("../components/base/index.js");
 var _index2 = require("../shared/theme/index.js");
 var _index3 = require("./contexts/index.js");
@@ -19,9 +18,9 @@ const NativeProvider = ({
   children,
   navigators,
   errorBoundary,
-  request = null
+  request = null,
+  portalHostProps
 }) => {
-  const isNative = _reactNative.Platform.OS !== 'web';
   const themeContextValue = (0, _react.useMemo)(() => (0, _index2.createTheme)(theme), [theme]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_safeAreaCompactProvider.SafeAreaCompactProvider, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.ConfigContext, {
@@ -34,9 +33,10 @@ const NativeProvider = ({
           value: themeContextValue,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_errorBoundary.ErrorBoundary, {
             ...errorBoundary,
-            children: isNative ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Portal.Host, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Portal.Host, {
+              ...portalHostProps,
               children: children
-            }) : children
+            })
           })
         })
       })

package/dist/commonjs/shared/utils/index.js

@@ -24,4 +24,15 @@ Object.keys(_error).forEach(function (key) {
       return _error[key];
     }
   });
+});
+var _object = require("./object.js");
+Object.keys(_object).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _object[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _object[key];
+    }
+  });
 });

package/dist/commonjs/shared/utils/object.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shallowEqual = void 0;
+var _lodashEs = require("lodash-es");
+/**
+ * 浅比较两个对象是否相等
+ *
+ * 仅比较对象的第一层属性，使用严格相等（===）进行比较。
+ * 不会递归比较嵌套对象或数组的内容。
+ *
+ * @param a - 第一个对象
+ * @param b - 第二个对象
+ * @returns 如果两个对象的所有第一层属性都相等则返回 true，否则返回 false。如果 a/b 有一个非对象，则直接比较二者
+ *
+ * @example
+ * shallowEqual({ a: 1, b: 2 }, { a: 1, b: 2 }); // true
+ * shallowEqual({ a: 1 }, { a: 1, b: 2 }); // false
+ * shallowEqual({ a: { x: 1 } }, { a: { x: 1 } }); // false
+ * shallowEqual(null, null); // true
+ * shallowEqual(null, undefined); // false
+ * shallowEqual(1, 1); // true
+ * shallowEqual(1, '1'); // false
+ */
+const shallowEqual = (a, b) => {
+  if ((0, _lodashEs.isNil)(a) || (0, _lodashEs.isNil)(b)) {
+    return a === b;
+  }
+  if (typeof a !== 'object' || typeof b !== 'object') {
+    return a === b;
+  }
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  return aKeys.every(key => a[key] === b[key]);
+};
+exports.shallowEqual = shallowEqual;

package/dist/module/components/base/index.js

@@ -24,12 +24,14 @@ export * from "./link/index.js";
 export * from "./loading/index.js";
 export * from "./modal/index.js";
 export * from "./nav-bar/index.js";
+export * from "./overflow/index.js";
 export * from "./picker/index.js";
 export * from "./picker-backup/index.js";
 export * from "./picker-view/index.js";
 export * from "./portal/index.js";
 export * from "./radio/index.js";
 export * from "./result/index.js";
+export * from "./select/index.js";
 export * from "./surface/index.js";
 export * from "./switch/index.js";
 export * from "./tabs/index.js";

package/dist/module/components/base/input/base-input.js

@@ -126,7 +126,9 @@ export const BaseInput = ({
         if (!elementState.current.pointerDown) {
           props.onBlur?.(event);
           setInputIsFocused(false);
-          setInputValue(inputValue?.trimEnd());
+          if (inputValue && inputValue?.trimEnd() !== inputValue) {
+            setInputValue(inputValue?.trimEnd());
+          }
         } else {
           inputRef.current?.focus();
         }
@@ -134,7 +136,7 @@ export const BaseInput = ({
           pointerDown: false
         };
       }
-    }), !!hasSuffixNode && /*#__PURE__*/_jsxs(Flex, {
+    }), hasSuffixNode && /*#__PURE__*/_jsxs(Flex, {
       align: "center",
       gap: theme.spacing.sm,
       children: [!!props.allowClear && /*#__PURE__*/_jsx(Animated.View, {

package/dist/module/components/base/overflow/all-mode-overflow.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 全部显示模式组件
+ */
+export const AllModeOverflow = ({
+  data,
+  renderItem,
+  prefix,
+  suffix,
+  style,
+  prefixStyle,
+  itemStyle,
+  suffixStyle,
+  onVisibleCountChange,
+  styles,
+  getKey
+}) => {
+  useEffect(() => {
+    onVisibleCountChange?.(data.length);
+  }, [data.length, onVisibleCountChange]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    children: [prefix && /*#__PURE__*/_jsx(View, {
+      style: [styles.item, prefixStyle],
+      children: prefix
+    }), data.map((item, index) => {
+      const key = getKey(item, index);
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.item, itemStyle],
+        children: renderItem(item, {
+          index
+        })
+      }, key);
+    }), suffix && /*#__PURE__*/_jsx(View, {
+      style: [styles.item, suffixStyle],
+      children: suffix
+    })]
+  });
+};

package/dist/module/components/base/overflow/fixed-count-overflow.js

@@ -0,0 +1,64 @@
+"use strict";
+
+import React, { useCallback, useEffect } from 'react';
+import { Text, View } from 'react-native';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 固定数量模式组件
+ */
+export const FixedCountOverflow = ({
+  data,
+  renderItem,
+  renderRest,
+  maxCount,
+  prefix,
+  suffix,
+  style,
+  prefixStyle,
+  itemStyle,
+  suffixStyle,
+  restStyle,
+  onVisibleCountChange,
+  styles,
+  getKey
+}) => {
+  const visibleCount = Math.min(data.length, maxCount);
+  const showRest = data.length > maxCount;
+  const omittedData = data.slice(maxCount);
+  useEffect(() => {
+    onVisibleCountChange?.(visibleCount);
+  }, [visibleCount, onVisibleCountChange]);
+  const renderRestContent = useCallback(() => {
+    if (typeof renderRest === 'function') {
+      return renderRest(omittedData);
+    }
+    if (renderRest) {
+      return renderRest;
+    }
+    return /*#__PURE__*/_jsxs(Text, {
+      style: [styles.rest],
+      children: ["+", omittedData.length, "..."]
+    });
+  }, [renderRest, omittedData, styles.rest]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    children: [prefix && /*#__PURE__*/_jsx(View, {
+      style: [styles.item, prefixStyle],
+      children: prefix
+    }), data.slice(0, visibleCount).map((item, index) => {
+      const key = getKey(item, index);
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.item, itemStyle],
+        children: renderItem(item, {
+          index
+        })
+      }, key);
+    }), showRest && /*#__PURE__*/_jsx(View, {
+      style: [styles.item, restStyle],
+      children: renderRestContent()
+    }), suffix && /*#__PURE__*/_jsx(View, {
+      style: [styles.item, suffixStyle],
+      children: suffix
+    })]
+  });
+};

package/dist/module/components/base/overflow/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export * from "./overflow.js";

package/dist/module/components/base/overflow/overflow.js

@@ -0,0 +1,66 @@
+"use strict";
+
+import { isNumber } from 'lodash-es';
+import React, { useCallback } from 'react';
+import { AllModeOverflow } from "./all-mode-overflow.js";
+import { FixedCountOverflow } from "./fixed-count-overflow.js";
+import { ResponsiveOverflow } from "./responsive-overflow.js";
+import { useOverflowStyles } from "./style/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Overflow 组件
+ *
+ * 利用 onLayout 在渲染前触发的特性，实现单次渲染的溢出处理组件
+ * 固定数量模式直接渲染，响应式模式通过预先计算确定最终显示状态
+ *
+ * @param props - 组件属性
+ * @returns React 元素
+ */
+export const Overflow = props => {
+  const {
+    maxCount = 'responsive',
+    itemKey
+  } = props;
+  const styles = useOverflowStyles({
+    maxCount
+  });
+
+  /**
+   * 获取元素唯一标识
+   */
+  const getKey = useCallback((item, index) => {
+    if (typeof itemKey === 'function') {
+      return itemKey(item, index);
+    }
+    if (itemKey && typeof item === 'object' && item !== null && typeof itemKey === 'string') {
+      const value = item[itemKey];
+      return typeof value === 'string' || typeof value === 'number' ? value : index;
+    }
+    return index;
+  }, [itemKey]);
+
+  // 固定数量模式
+  if (isNumber(maxCount)) {
+    return /*#__PURE__*/_jsx(FixedCountOverflow, {
+      ...props,
+      styles: styles,
+      getKey: getKey
+    });
+  }
+
+  // 全部显示模式
+  if (maxCount === 'all') {
+    return /*#__PURE__*/_jsx(AllModeOverflow, {
+      ...props,
+      styles: styles,
+      getKey: getKey
+    });
+  }
+
+  // 响应式模式
+  return /*#__PURE__*/_jsx(ResponsiveOverflow, {
+    ...props,
+    styles: styles,
+    getKey: getKey
+  });
+};