@xhsreds/reds-rn-next 0.2.7 → 0.2.9

package/src/components/ConfigProvider/hooks/themeToken/useThemeToken.ts

@@ -43,28 +43,31 @@ export interface MyProxyConstructor {
   new <T, H extends Record<string, unknown>>(target: T, handler: ProxyHandler<H>): H;
 }
 
-export const useThemeColor = (component?: Component, staticColorType: "lightColor" | "darkColor" = "lightColor") => {
-  const id = useContext(ConfigProviderContext).id;
+export const useThemeColor = (
+  component?: Component,
+  staticColorType: "lightColor" | "darkColor" = "lightColor",
+  id: string = "",
+) => {
+  const contextId = useContext(ConfigProviderContext).id;
   const themeColor: ThemeColor = new (Proxy as MyProxyConstructor)(
     {},
     {
       get(this: IThemeInstance, _, key: LightToken | DarkToken) {
-        if (!id) {
+        if (id) {
           return staticColor[staticColorType][key];
         }
-        if (configCache.getColorModeById(id) === "dark") {
+        if (configCache.getColorModeById(contextId) === "dark") {
           return component
-            ? configCache.getDarkTokenByIdAndComponent(id, component)?.[key]
-            : configCache.getDarkTokenById(id, key);
+            ? configCache.getDarkTokenByIdAndComponent(contextId, component)?.[key]
+            : configCache.getDarkTokenById(contextId, key);
         } else {
           return component
-            ? configCache.getLightTokenByIdAndComponent(id, component)?.[key]
-            : configCache.getLightTokenById(id, key);
+            ? configCache.getLightTokenByIdAndComponent(contextId, component)?.[key]
+            : configCache.getLightTokenById(contextId, key);
         }
       },
     },
   );
-
   return themeColor;
 };
 

package/src/components/ConfigProvider/interface/index.ts

@@ -28,7 +28,6 @@ type Component =
   | "Avatar"
   | "DropdownMenu"
   | "AvatarStack"
-  | "ImagePreview"
   | "Search"
   | "Divider"
   | "Slider"

package/src/components/Divider/Divider.tsx

@@ -1,10 +1,10 @@
-import React, { forwardRef } from "react";
+import React from "react";
 import { View, Text } from "react-native";
 import { RedsDivider, DividerDefaultProps } from "./interface";
 import { getStyles } from "./styles";
 import useMounted from "../../pvCount/useUnmountedProcess";
 
-const Divider = forwardRef<View, RedsDivider>((props, ref) => {
+const Divider = (props: RedsDivider) => {
   useMounted("Divider");
   const finalProps: RedsDivider = {
     ...DividerDefaultProps,
@@ -17,7 +17,7 @@ const Divider = forwardRef<View, RedsDivider>((props, ref) => {
   const isPrimary = finalProps.direction === "primary" || finalProps.direction === "secondary";
 
   return (
-    <View ref={ref} style={[styles.divider, styles[finalProps.direction!]]}>
+    <View style={[styles.divider, styles[finalProps.direction!]]}>
       {finalProps.orientation && finalProps.direction !== "vertical" && (
         <View style={styles.textContainer}>
           {isPrimary && <View style={styles.before} />}
@@ -27,6 +27,6 @@ const Divider = forwardRef<View, RedsDivider>((props, ref) => {
       )}
     </View>
   );
-});
+};
 
 export default React.memo(Divider);

package/src/components/FAB/FAB.tsx

@@ -1,5 +1,5 @@
-import React, { memo, forwardRef, useState } from "react";
-import { View, GestureResponderEvent, ViewStyle } from "react-native";
+import React, { memo, useState } from "react";
+import { View, ViewStyle } from "react-native";
 import { RedsFAB, FABDefaultProps } from "./interface/index";
 import { styles, getPositionStyles } from "./styles";
 import { Button } from "../Button";
@@ -43,4 +43,4 @@ const FAB = (props: RedsFAB) => {
   );
 };
 
-export default memo(forwardRef(FAB));
+export default memo(FAB);

package/src/components/Form/Form.tsx

@@ -1,6 +1,5 @@
-import React, { useState, useRef, useEffect, useMemo, useCallback, forwardRef, useImperativeHandle } from "react";
-import { View, TouchableWithoutFeedback } from "react-native";
-import { RedsForm, FormDefaultProps, RedsFormItem } from "./interface/index";
+import React, { useState, forwardRef, useImperativeHandle } from "react";
+import { RedsForm, FormDefaultProps } from "./interface/index";
 import { Button } from "../Button";
 import Schema from "async-validator";
 import { FormContext } from "./hooks/useFormContext";

package/src/components/Form/FormItem.tsx

@@ -1,14 +1,5 @@
-import React, {
-  useState,
-  useRef,
-  useEffect,
-  useMemo,
-  useCallback,
-  forwardRef,
-  useImperativeHandle,
-  useContext,
-} from "react";
-import { View, TouchableWithoutFeedback, Text } from "react-native";
+import React, { useContext } from "react";
+import { View, Text } from "react-native";
 import { RedsFormItem, RedsFormItemDefaultProps } from "./interface/index";
 import { useThemeColor } from "../ConfigProvider";
 import styles, {

package/src/components/Image/Image.tsx

@@ -1,4 +1,4 @@
-import React, { useState, forwardRef, memo, ForwardRefRenderFunction, useEffect } from "react";
+import React, { useState, memo } from "react";
 import {
   View,
   Image as RNImage,

package/src/components/Image/Image69.tsx

@@ -1,4 +1,4 @@
-import React, { useState, forwardRef, memo, ForwardRefRenderFunction, useEffect } from "react";
+import React, { useState, memo } from "react";
 import {
   View,
   Image as RNImage,
@@ -26,105 +26,113 @@ const imageError = {
   dark: "https://picasso-static.xiaohongshu.com/fe-platform/7d8debb5e2c3a1f37299a292342b77d479be6f28.png",
 };
 
-const Image = forwardRef<RNImage, RedsImage & Omit<ImageProps, keyof RedsImage>>(
-  ({ src, source: _source, width, height, borderRadius, errorStyle, loadStyle, style, ...props }, ref) => {
-    const [imageStatus, setImageStatus] = useState(IMAGE_STATUS.LOADING);
-    const [progress, setProgress] = useState(0);
+const Image = ({
+  src,
+  source: _source,
+  width,
+  height,
+  borderRadius,
+  errorStyle,
+  loadStyle,
+  style,
+  ...props
+}: RedsImage & Omit<ImageProps, keyof RedsImage>) => {
+  const [imageStatus, setImageStatus] = useState(IMAGE_STATUS.LOADING);
+  const [progress, setProgress] = useState(0);
 
-    const { source, aveColor, blurSource } = useImage({
-      src,
-      source: _source,
-      errorStyle,
-      loadStyle,
-    });
+  const { source, aveColor, blurSource } = useImage({
+    src,
+    source: _source,
+    errorStyle,
+    loadStyle,
+  });
 
-    const onProgress = (e: NativeSyntheticEvent<ImageProgressEventDataIOS>) => {
-      const {
-        nativeEvent: { total, loaded },
-      } = e;
-      if (total) {
-        setProgress(((loaded / total) * 100) | 0);
-      }
-      props.onProgress?.(e);
-    };
-    const onLoad = (e: NativeSyntheticEvent<ImageLoadEventData>) => {
-      props.onLoad?.(e);
-      setImageStatus(IMAGE_STATUS.LOADED);
-    };
-    const onError = (e: NativeSyntheticEvent<ImageErrorEventData>) => {
-      props.onError?.(e);
-      setImageStatus(errorStyle === TErrorStyle.ERROR ? IMAGE_STATUS.LOADERROR : IMAGE_STATUS.RELOAD);
-    };
-    const onReload = (e: GestureResponderEvent) => {
-      setImageStatus(IMAGE_STATUS.HIDE);
-      props.onReload?.(e);
-      setTimeout(() => {
-        setImageStatus(IMAGE_STATUS.LOADING);
-      });
-    };
+  const onProgress = (e: NativeSyntheticEvent<ImageProgressEventDataIOS>) => {
+    const {
+      nativeEvent: { total, loaded },
+    } = e;
+    if (total) {
+      setProgress(((loaded / total) * 100) | 0);
+    }
+    props.onProgress?.(e);
+  };
+  const onLoad = (e: NativeSyntheticEvent<ImageLoadEventData>) => {
+    props.onLoad?.(e);
+    setImageStatus(IMAGE_STATUS.LOADED);
+  };
+  const onError = (e: NativeSyntheticEvent<ImageErrorEventData>) => {
+    props.onError?.(e);
+    setImageStatus(errorStyle === TErrorStyle.ERROR ? IMAGE_STATUS.LOADERROR : IMAGE_STATUS.RELOAD);
+  };
+  const onReload = (e: GestureResponderEvent) => {
+    setImageStatus(IMAGE_STATUS.HIDE);
+    props.onReload?.(e);
+    setTimeout(() => {
+      setImageStatus(IMAGE_STATUS.LOADING);
+    });
+  };
 
-    const colorMode = useColorMode();
+  const colorMode = useColorMode();
 
-    return (
-      <View style={{ borderRadius, height, width, ...(style as {}) }} ref={ref}>
-        {imageStatus !== IMAGE_STATUS.HIDE && (
-          <RNImage
-            {...props}
-            source={source}
-            onLoad={onLoad}
-            onProgress={onProgress}
-            onError={onError}
-            style={{
-              width,
-              height,
-              borderRadius,
-              opacity: imageStatus === IMAGE_STATUS.LOADED ? 1 : 0,
-            }}
-          ></RNImage>
-        )}
-        {imageStatus === IMAGE_STATUS.LOADING && (
-          <View
-            style={{
-              width,
-              height,
-              borderRadius,
-              ...styles.loadingContainer,
-              backgroundColor: loadStyle === TLoadStyle.AVE ? aveColor : styles.loadingContainer.backgroundColor,
-            }}
-          >
-            {loadStyle === TLoadStyle.BLUR && (
-              <RNImage
-                source={blurSource}
-                style={{
-                  width,
-                  height,
-                  borderRadius,
-                }}
-              ></RNImage>
-            )}
-            {loadStyle === TLoadStyle.LOADING && <></>}
-          </View>
-        )}
-        {(imageStatus === IMAGE_STATUS.LOADERROR || imageStatus === IMAGE_STATUS.RELOAD) && (
-          <TouchableOpacity
-            activeOpacity={1}
-            onPress={(e) => {
-              onReload(e);
-            }}
-            style={{ width, height, borderRadius, ...styles.loadingContainer }}
-          >
+  return (
+    <View style={{ borderRadius, height, width, ...(style as {}) }}>
+      {imageStatus !== IMAGE_STATUS.HIDE && (
+        <RNImage
+          {...props}
+          source={source}
+          onLoad={onLoad}
+          onProgress={onProgress}
+          onError={onError}
+          style={{
+            width,
+            height,
+            borderRadius,
+            opacity: imageStatus === IMAGE_STATUS.LOADED ? 1 : 0,
+          }}
+        ></RNImage>
+      )}
+      {imageStatus === IMAGE_STATUS.LOADING && (
+        <View
+          style={{
+            width,
+            height,
+            borderRadius,
+            ...styles.loadingContainer,
+            backgroundColor: loadStyle === TLoadStyle.AVE ? aveColor : styles.loadingContainer.backgroundColor,
+          }}
+        >
+          {loadStyle === TLoadStyle.BLUR && (
             <RNImage
-              style={{ width: 40, height: 40 }}
-              source={{
-                uri: imageStatus === IMAGE_STATUS.RELOAD ? imageReLoad[colorMode] : imageError[colorMode],
+              source={blurSource}
+              style={{
+                width,
+                height,
+                borderRadius,
               }}
-            />
-          </TouchableOpacity>
-        )}
-      </View>
-    );
-  },
-);
+            ></RNImage>
+          )}
+          {loadStyle === TLoadStyle.LOADING && <></>}
+        </View>
+      )}
+      {(imageStatus === IMAGE_STATUS.LOADERROR || imageStatus === IMAGE_STATUS.RELOAD) && (
+        <TouchableOpacity
+          activeOpacity={1}
+          onPress={(e) => {
+            onReload(e);
+          }}
+          style={{ width, height, borderRadius, ...styles.loadingContainer }}
+        >
+          <RNImage
+            style={{ width: 40, height: 40 }}
+            source={{
+              uri: imageStatus === IMAGE_STATUS.RELOAD ? imageReLoad[colorMode] : imageError[colorMode],
+            }}
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
 
 Image.defaultProps = ImageDefaultProps;
 

package/src/components/Image/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, forwardRef, memo, ForwardRefRenderFunction, useEffect } from "react";
+import React, { useState, memo } from "react";
 import {
   View,
   Image as RNImage,
@@ -15,106 +15,114 @@ import styles from "./styles";
 import { useImage } from "./hook";
 import CircularProgress from "./CircularProgress";
 
-const Image = forwardRef<RNImage, RedsImage & Omit<ImageProps, keyof RedsImage>>(
-  ({ src, source: _source, width, height, borderRadius, errorStyle, loadStyle, style, ...props }, ref) => {
-    const [imageStatus, setImageStatus] = useState(IMAGE_STATUS.LOADING);
-    const [progress, setProgress] = useState(0);
+const Image = ({
+  src,
+  source: _source,
+  width,
+  height,
+  borderRadius,
+  errorStyle,
+  loadStyle,
+  style,
+  ...props
+}: RedsImage & Omit<ImageProps, keyof RedsImage>) => {
+  const [imageStatus, setImageStatus] = useState(IMAGE_STATUS.LOADING);
+  const [progress, setProgress] = useState(0);
 
-    const { source, aveColor, blurSource } = useImage({
-      src,
-      source: _source,
-      errorStyle,
-      loadStyle,
-    });
+  const { source, aveColor, blurSource } = useImage({
+    src,
+    source: _source,
+    errorStyle,
+    loadStyle,
+  });
 
-    const onProgress = (e: NativeSyntheticEvent<ImageProgressEventDataIOS>) => {
-      const {
-        nativeEvent: { total, loaded },
-      } = e;
-      if (total) {
-        setProgress(((loaded / total) * 100) | 0);
-      }
-      props.onProgress?.(e);
-    };
-    const onLoad = (e: NativeSyntheticEvent<ImageLoadEventData>) => {
-      props.onLoad?.(e);
-      setImageStatus(IMAGE_STATUS.LOADED);
-    };
-    const onError = (e: NativeSyntheticEvent<ImageErrorEventData>) => {
-      props.onError?.(e);
-      setImageStatus(errorStyle === TErrorStyle.ERROR ? IMAGE_STATUS.LOADERROR : IMAGE_STATUS.RELOAD);
-    };
-    const onReload = (e: GestureResponderEvent) => {
-      setImageStatus(IMAGE_STATUS.HIDE);
-      props.onReload?.(e);
-      setTimeout(() => {
-        setImageStatus(IMAGE_STATUS.LOADING);
-      });
-    };
+  const onProgress = (e: NativeSyntheticEvent<ImageProgressEventDataIOS>) => {
+    const {
+      nativeEvent: { total, loaded },
+    } = e;
+    if (total) {
+      setProgress(((loaded / total) * 100) | 0);
+    }
+    props.onProgress?.(e);
+  };
+  const onLoad = (e: NativeSyntheticEvent<ImageLoadEventData>) => {
+    props.onLoad?.(e);
+    setImageStatus(IMAGE_STATUS.LOADED);
+  };
+  const onError = (e: NativeSyntheticEvent<ImageErrorEventData>) => {
+    props.onError?.(e);
+    setImageStatus(errorStyle === TErrorStyle.ERROR ? IMAGE_STATUS.LOADERROR : IMAGE_STATUS.RELOAD);
+  };
+  const onReload = (e: GestureResponderEvent) => {
+    setImageStatus(IMAGE_STATUS.HIDE);
+    props.onReload?.(e);
+    setTimeout(() => {
+      setImageStatus(IMAGE_STATUS.LOADING);
+    });
+  };
 
-    return (
-      <View style={{ borderRadius, height, width, ...(style as {}) }} ref={ref}>
-        {imageStatus !== IMAGE_STATUS.HIDE && (
-          <RNImage
-            {...props}
-            source={source}
-            onLoad={onLoad}
-            onProgress={onProgress}
-            onError={onError}
-            style={{
-              width,
-              height,
-              borderRadius,
-              opacity: imageStatus === IMAGE_STATUS.LOADED ? 1 : 0,
-            }}
-          ></RNImage>
-        )}
-        {imageStatus === IMAGE_STATUS.LOADING && (
-          <View
-            style={{
-              width,
-              height,
-              borderRadius,
-              ...styles.loadingContainer,
-              backgroundColor: loadStyle === TLoadStyle.AVE ? aveColor : styles.loadingContainer.backgroundColor,
-            }}
-          >
-            {loadStyle === TLoadStyle.BLUR && (
-              <RNImage
-                source={blurSource}
-                style={{
-                  width,
-                  height,
-                  borderRadius,
-                }}
-              ></RNImage>
-            )}
-            {loadStyle === TLoadStyle.LOADING && <CircularProgress progress={progress}></CircularProgress>}
-          </View>
-        )}
-        {(imageStatus === IMAGE_STATUS.LOADERROR || imageStatus === IMAGE_STATUS.RELOAD) && (
-          <TouchableOpacity
-            activeOpacity={1}
-            onPress={(e) => {
-              onReload(e);
-            }}
-            style={{ width, height, borderRadius, ...styles.loadingContainer }}
-          >
+  return (
+    <View style={{ borderRadius, height, width, ...(style as {}) }}>
+      {imageStatus !== IMAGE_STATUS.HIDE && (
+        <RNImage
+          {...props}
+          source={source}
+          onLoad={onLoad}
+          onProgress={onProgress}
+          onError={onError}
+          style={{
+            width,
+            height,
+            borderRadius,
+            opacity: imageStatus === IMAGE_STATUS.LOADED ? 1 : 0,
+          }}
+        ></RNImage>
+      )}
+      {imageStatus === IMAGE_STATUS.LOADING && (
+        <View
+          style={{
+            width,
+            height,
+            borderRadius,
+            ...styles.loadingContainer,
+            backgroundColor: loadStyle === TLoadStyle.AVE ? aveColor : styles.loadingContainer.backgroundColor,
+          }}
+        >
+          {loadStyle === TLoadStyle.BLUR && (
             <RNImage
-              style={{ width: 40, height: 40 }}
-              source={{
-                uri:
-                  imageStatus === IMAGE_STATUS.RELOAD
-                    ? "https://picasso-static.xiaohongshu.com/fe-platform/06ae169b310c2926e541903b828486a80fcac404.png"
-                    : "https://picasso-static.xiaohongshu.com/fe-platform/76fee5bba4ce3bbf3e9ff5fe1935b737bb27625a.png",
+              source={blurSource}
+              style={{
+                width,
+                height,
+                borderRadius,
               }}
-            />
-          </TouchableOpacity>
-        )}
-      </View>
-    );
-  },
-);
+            ></RNImage>
+          )}
+          {loadStyle === TLoadStyle.LOADING && <CircularProgress progress={progress}></CircularProgress>}
+        </View>
+      )}
+      {(imageStatus === IMAGE_STATUS.LOADERROR || imageStatus === IMAGE_STATUS.RELOAD) && (
+        <TouchableOpacity
+          activeOpacity={1}
+          onPress={(e) => {
+            onReload(e);
+          }}
+          style={{ width, height, borderRadius, ...styles.loadingContainer }}
+        >
+          <RNImage
+            style={{ width: 40, height: 40 }}
+            source={{
+              uri:
+                imageStatus === IMAGE_STATUS.RELOAD
+                  ? "https://picasso-static.xiaohongshu.com/fe-platform/06ae169b310c2926e541903b828486a80fcac404.png"
+                  : "https://picasso-static.xiaohongshu.com/fe-platform/76fee5bba4ce3bbf3e9ff5fe1935b737bb27625a.png",
+            }}
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
 
 Image.defaultProps = ImageDefaultProps;
 

package/src/components/List/styles.ts

@@ -14,7 +14,6 @@ const createStyles = () => {
       marginBottom: 12,
       marginLeft: 32,
       fontSize: typography.T3FontSize,
-      fontWeight: typography.T3FontWeight,
       lineHeight: typography.T3LineHeight,
     },
     headerTextPlain: {
@@ -22,7 +21,6 @@ const createStyles = () => {
       marginHorizontal: 16,
       marginBottom: 12,
       fontSize: typography.T3FontSize,
-      fontWeight: typography.T3FontWeight,
       lineHeight: typography.T3LineHeight,
     },
     footerText: {
@@ -57,7 +55,7 @@ const createStyles = () => {
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "flex-start",
-      paddingVertical: 6,
+      paddingVertical: 12,
     },
     expand: {},
     prefix: {

package/src/components/NavigationBar/NavigationBar.tsx

@@ -9,13 +9,10 @@ import {
   NavigationBarLayoutType,
   NavigationBarSize,
 } from "./interface/index";
-import getStyles from "./styles";
+import getStyles, { getIconStyles } from "./styles";
 import { Icon } from "../Icon";
 import { useThemeColor } from "../ConfigProvider";
 import useMounted from "../../pvCount/useUnmountedProcess";
-import { alwaysColor } from "@xhs/reds-token-next";
-
-const defaultSize = 24;
 
 const NavigationBar = (props: RedsNavigationBar) => {
   useMounted("NavigationBar");
@@ -40,14 +37,14 @@ const NavigationBar = (props: RedsNavigationBar) => {
    * 设置icon size
    */
   const getIconSize = (item: NavigationBarActionProps) => {
-    return Number(item?.iconProps?.size || defaultSize);
+    return Number(item?.iconProps?.size || 24);
   };
 
   /**
    * 设置icon fill
    */
   const getIconFill = (item: NavigationBarActionProps) => {
-    return item?.iconProps?.fill || alwaysColor.White;
+    return item?.iconProps?.fill || themeColor.Title;
   };
 
   /**
@@ -85,19 +82,7 @@ const NavigationBar = (props: RedsNavigationBar) => {
                 {(props.actionType === NavigationBarActionType.Icon ||
                   props.actionType === NavigationBarActionType.BgIcon) &&
                 item?.iconProps?.icon ? (
-                  <View
-                    style={
-                      props.actionType === NavigationBarActionType.BgIcon
-                        ? styles.iconBg
-                        : {
-                            width: getIconSize(item),
-                            height: getIconSize(item),
-                            display: "flex",
-                            justifyContent: "center",
-                            alignItems: "center",
-                          }
-                    }
-                  >
+                  <View style={getIconStyles(props, item, themeColor, type)}>
                     <Icon
                       icon={item?.iconProps?.icon}
                       size={getIconSize(item)}