@xhsreds/reds-rn-next 0.2.2 → 0.2.3-beta202411091721

package/src/components/Tab/Tabs.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useMemo } from "react";
-import { View, TouchableWithoutFeedback, Text, ScrollView } from "react-native";
+import React, { useState, useEffect, useMemo, useRef } from "react";
+import { View, TouchableWithoutFeedback, Text, ScrollView, Animated, Easing } from "react-native";
 import { RedsTab, TabDefaultProps } from "./interface/index";
 import styles, { getRedsDropDownVariantStyles } from "./styles";
 import { TabItemType, TabThemeType, TabLayoutType, TabChild } from "./interface";
@@ -13,6 +13,16 @@ export const Tab = (props: TabChild) => {
 const Tabs = (props: RedsTab) => {
   const [activeIndex, setActiveIndex] = useState<number>(0);
 
+  const childRefs = useRef<any[]>([]);
+
+  const parentRef = useRef(null);
+
+  const [offsets, setOffsets] = useState<number[]>([]);
+
+  const [widths, setWidths] = useState<number[]>([]);
+
+  const offset = useRef(new Animated.Value(0)).current;
+
   /**
    * 列表数据
    */
@@ -41,15 +51,6 @@ const Tabs = (props: RedsTab) => {
     ];
   }, [props?.layout]);
 
-  /**
-   * 不同layout tab样式
-   */
-  const tabItemStyle = (item: TabItemType) => {
-    return props?.theme === TabThemeType.capsule && props.active === item.value
-      ? [styles.tabItem, styles.capsule, getRedsDropDownVariantStyles().backgroundColor.fill1]
-      : [styles.tabItem];
-  };
-
   /**
    * text wrapper 样式
    */
@@ -66,6 +67,25 @@ const Tabs = (props: RedsTab) => {
     };
   }, [props.tabPadding, props.spaceWidth]);
 
+  useEffect(() => {
+    let activeIdx = 0;
+    list.forEach((i, idx) => {
+      if (i.value === props.active) {
+        activeIdx = idx;
+      }
+    });
+    setActiveIndex(activeIdx);
+  }, [list, props.active]);
+
+  /**
+   * 不同layout tab样式
+   */
+  const tabItemStyle = (item: TabItemType) => {
+    return props?.theme === TabThemeType.capsule && props.active === item.value
+      ? [styles.tabItem, styles.capsule, getRedsDropDownVariantStyles().backgroundColor.fill1]
+      : [styles.tabItem];
+  };
+
   /**
    * 是否展示icon
    */
@@ -85,9 +105,7 @@ const Tabs = (props: RedsTab) => {
    * Icon颜色
    */
   const iconColor = (item: TabItemType) => {
-    return props.active === item.value
-      ? item.iconProps?.fill || getRedsDropDownVariantStyles().iconColor.title
-      : getRedsDropDownVariantStyles().iconColor.description;
+    return props.active === item.value ? item.iconProps?.fill : "";
   };
 
   /**
@@ -95,18 +113,11 @@ const Tabs = (props: RedsTab) => {
    */
   const Wrapper = (wrapperProps: any) => {
     return props?.layout === TabLayoutType.left ? (
-      <ScrollView
-        style={[wrapperProps.style]}
-        horizontal={true}
-        testID={wrapperProps.testID}
-        showsHorizontalScrollIndicator={false}
-      >
+      <ScrollView horizontal={true} testID={wrapperProps.testID} showsHorizontalScrollIndicator={false}>
         {wrapperProps.children}
       </ScrollView>
     ) : (
-      <View style={wrapperProps.style} testID={wrapperProps.testID}>
-        {wrapperProps.children}
-      </View>
+      wrapperProps.children
     );
   };
 
@@ -116,8 +127,10 @@ const Tabs = (props: RedsTab) => {
 
   const BadgeContainer = (badgeProps: { badgeProps: BadgeType.RedsBadge; key: string; children: React.ReactNode }) => {
     return props?.badge ? (
-      <Badge {...badgeProps.badgeProps}>
-        <View style={[styles.flexCenter, { height: "100%" }]}>{badgeProps.children}</View>
+      <Badge {...badgeProps.badgeProps} key={badgeProps.key}>
+        <View style={[styles.flexCenter, { height: "100%" }]} key={badgeProps.key}>
+          {badgeProps.children}
+        </View>
       </Badge>
     ) : (
       badgeProps.children
@@ -125,51 +138,98 @@ const Tabs = (props: RedsTab) => {
   };
 
   useEffect(() => {
-    let activeIdx = 0;
-    list.forEach((i, idx) => {
-      if (i.value === props.active) {
-        activeIdx = idx;
-      }
-    });
-    setActiveIndex(activeIdx);
-  }, [list, props.active]);
+    console.log("offsets?.[activeIndex]", offsets?.[activeIndex]);
+    if (offsets?.[activeIndex]) {
+      Animated.timing(offset, {
+        toValue: (offsets?.[activeIndex] || 0) + 1,
+        duration: 500,
+        useNativeDriver: false,
+      }).start(() => {
+        offset.setValue((offsets?.[activeIndex] || 0) + 1);
+      });
+    }
+  }, [activeIndex, offsets, offset]);
 
   return (
-    <View>
-      <Wrapper style={[...containerStyle, props.containerStyle]} testID="TabContainer">
-        {list.map((item: TabItemType, index: number) => {
-          return (
-            <BadgeContainer key={item.value} badgeProps={item?.badgeProps}>
-              <TouchableWithoutFeedback
-                onPress={() => {
-                  setActiveIndex(index);
-                  props?.onChange?.(item.value, index);
-                }}
-                key={item.value}
-              >
-                <View style={[tabItemStyle(item), tabItemStyles]} testID={`TabItemContainer${index}`}>
-                  {/* 左侧icon */}
-                  {showIcon("leftIcon", item) ? (
-                    <View style={[styles.leftIcon, iconStyle(item)]}>
-                      <Icon icon={item.iconProps?.icon} size={item.iconProps?.size || 12} type={item.iconProps?.type} />
-                    </View>
-                  ) : (
-                    <></>
-                  )}
-                  <View style={styles.columnFlex}>
-                    <View style={styles.flexCenter}>
+    <>
+      <Wrapper testID="TabContainer">
+        <View style={{ position: "relative" }}>
+          {/* 下划线  */}
+          {props.theme === TabThemeType.underline ? (
+            <Animated.View
+              style={[
+                styles.underline,
+                { width: (widths?.[activeIndex] || 0) - 2 },
+                { transform: [{ translateX: offset }] },
+                getRedsDropDownVariantStyles().backgroundColor.primary,
+              ]}
+            ></Animated.View>
+          ) : (
+            <></>
+          )}
+          <View style={[...containerStyle, props.containerStyle]} ref={parentRef}>
+            {list.map((item: TabItemType, index: number) => {
+              return (
+                <BadgeContainer badgeProps={item?.badgeProps} key={`${item.name}${item.value}`}>
+                  <TouchableWithoutFeedback
+                    onPress={() => {
+                      setActiveIndex(index);
+                      props?.onChange?.(item.value, index);
+                    }}
+                    key={item.value}
+                  >
+                    <View style={[tabItemStyle(item), tabItemStyles]} testID={`TabItemContainer${index}`}>
+                      {/* 左侧icon */}
+                      {showIcon("leftIcon", item) ? (
+                        <View style={[styles.leftIcon, iconStyle(item)]}>
+                          <Icon
+                            icon={item.iconProps?.icon}
+                            fill={iconColor(item)}
+                            size={item.iconProps?.size || 12}
+                            type={item.iconProps?.type}
+                          />
+                        </View>
+                      ) : (
+                        <></>
+                      )}
                       {/* 中间文字 */}
-                      <View style={styles.tabItemTextWrapper}>
-                        <Text
-                          style={
-                            props.active === item.value
-                              ? [styles.activeText, getRedsDropDownVariantStyles().color.title]
-                              : [styles.normalText, getRedsDropDownVariantStyles().color.description]
-                          }
-                        >
-                          {item.name}
-                        </Text>
-                      </View>
+                      <Text
+                        ref={(el: any) => (childRefs.current[index] = el)}
+                        style={[
+                          styles.tabItemTextWrapper,
+                          props.active === item.value
+                            ? [styles.activeText, getRedsDropDownVariantStyles().color.title]
+                            : [styles.normalText, getRedsDropDownVariantStyles().color.description],
+                        ]}
+                        onLayout={() => {
+                          childRefs.current[index].measureLayout(
+                            parentRef.current,
+                            (x: number, y: number, width: number, height: number) => {
+                              if (offsets.filter((i) => i).length !== list.length) {
+                                setOffsets((offsets) => {
+                                  if (!offsets[index]) {
+                                    offsets[index] = x;
+                                  }
+                                  return [...offsets];
+                                });
+                              }
+                              if (widths.filter((i) => i).length !== list.length) {
+                                setWidths((widths) => {
+                                  if (!widths[index]) {
+                                    widths[index] = width;
+                                  }
+                                  return [...widths];
+                                });
+                              }
+                            },
+                            (error: any) => {
+                              console.error("error", error);
+                            },
+                          );
+                        }}
+                      >
+                        {item.name}
+                      </Text>
                       {/* 右侧文字样式 */}
                       {item.labelNumber ? (
                         <View style={styles.labelNumber}>
@@ -193,30 +253,29 @@ const Tabs = (props: RedsTab) => {
                       ) : (
                         <></>
                       )}
+                      {/* 右侧icon */}
+                      {showIcon("rightIcon", item) ? (
+                        <View style={[styles.rightIcon, iconStyle(item)]}>
+                          <Icon
+                            icon={item.iconProps?.icon}
+                            fill={iconColor(item)}
+                            size={item.iconProps?.size || 12}
+                            type={item.iconProps?.type}
+                          />
+                        </View>
+                      ) : (
+                        <></>
+                      )}
                     </View>
-                    {/* 下划线  */}
-                    {props.theme === TabThemeType.underline && props.active === item.value ? (
-                      <View style={[styles.underline, getRedsDropDownVariantStyles().backgroundColor.primary]}></View>
-                    ) : (
-                      <></>
-                    )}
-                  </View>
-                  {/* 右侧icon */}
-                  {showIcon("rightIcon", item) ? (
-                    <View style={[styles.rightIcon, iconStyle(item)]}>
-                      <Icon icon={item.iconProps?.icon} size={item.iconProps?.size || 12} type={item.iconProps?.type} />
-                    </View>
-                  ) : (
-                    <></>
-                  )}
-                </View>
-              </TouchableWithoutFeedback>
-            </BadgeContainer>
-          );
-        })}
+                  </TouchableWithoutFeedback>
+                </BadgeContainer>
+              );
+            })}
+          </View>
+        </View>
       </Wrapper>
       {props.children[activeIndex]}
-    </View>
+    </>
   );
 };
 

package/src/components/Tab/demo/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Text, StyleSheet, ScrollView, View } from "react-native";
 import { Tab, TabType, Tabs } from "@xhs/reds-rn-next";
-import { Add } from "@xhs/reder-icon-svg-ReDs_icon";
+import { Activity } from "@xhs/reder-icon-svg-ReDs_icon";
 
 const { TabThemeType, TabSizeType, TabLabelType, TabLayoutType } = TabType;
 
@@ -27,21 +27,30 @@ const iconData = [
     name: "标签",
     key: "0",
     iconProps: {
-      icon: Add,
+      icon: Activity,
+      type: "svg",
+      size: 24,
+      fill: "#000",
     },
   },
   {
     name: "标签",
     key: "1",
     iconProps: {
-      icon: Add,
+      icon: Activity,
+      type: "svg",
+      size: 24,
+      fill: "#000",
     },
   },
   {
     name: "标签",
     key: "2",
     iconProps: {
-      icon: Add,
+      icon: Activity,
+      type: "svg",
+      size: 24,
+      fill: "#000",
     },
   },
 ];
@@ -162,7 +171,10 @@ const badgeData2 = [
     name: "标签",
     key: "0",
     iconProps: {
-      icon: Add,
+      icon: Activity,
+      type: "svg",
+      size: 24,
+      fill: "#000",
     },
     badgeProps: {
       max: 99,
@@ -173,7 +185,10 @@ const badgeData2 = [
     name: "标签",
     key: "1",
     iconProps: {
-      icon: Add,
+      icon: Activity,
+      type: "svg",
+      size: 24,
+      fill: "#000",
     },
     badgeProps: {
       position: "centerRight",
@@ -184,7 +199,10 @@ const badgeData2 = [
     name: "标签",
     key: "2",
     iconProps: {
-      icon: Add,
+      icon: Activity,
+      type: "svg",
+      size: 24,
+      fill: "#000",
     },
     badgeProps: {
       offset: [30, -30],
@@ -202,7 +220,7 @@ export default function App() {
 
   return (
     <ScrollView style={styles.container}>
-      <Desc>纯文字选项卡</Desc>
+      {/* <Desc>纯文字选项卡</Desc>
       <Tabs active={active} onChange={handleChange} theme={TabThemeType.text} layout={TabLayoutType.space}>
         {data.map((item, index) => {
           return (
@@ -213,7 +231,7 @@ export default function App() {
             </Tab>
           );
         })}
-      </Tabs>
+      </Tabs> */}
 
       <Desc>指示线选项卡</Desc>
       <Tabs active={active} onChange={handleChange} layout={TabLayoutType.space}>
@@ -228,7 +246,7 @@ export default function App() {
         })}
       </Tabs>
 
-      <Desc>胶囊选项卡</Desc>
+      {/* <Desc>胶囊选项卡</Desc>
       <Tabs active={active} onChange={handleChange} theme={TabThemeType.capsule} layout={TabLayoutType.space}>
         {data.map((item, index) => {
           return (
@@ -271,6 +289,7 @@ export default function App() {
       >
         {iconData.map((item, index) => {
           return (
+            // @ts-expect-error
             <Tab name={item.name} value={item.key} iconProps={item.iconProps}>
               <View style={{ backgroundColor: "pink", height: 100, width: "100%" }}>
                 <Text>内容{index}</Text>
@@ -291,6 +310,7 @@ export default function App() {
       >
         {iconData.map((item, index) => {
           return (
+            // @ts-expect-error
             <Tab name={item.name} value={item.key} iconProps={item.iconProps}>
               <View style={{ backgroundColor: "pink", height: 100, width: "100%" }}>
                 <Text>内容{index}</Text>
@@ -426,6 +446,7 @@ export default function App() {
       >
         {iconData.map((item, index) => {
           return (
+            // @ts-expect-error
             <Tab name={item.name} value={item.key} iconProps={item.iconProps}>
               <View style={{ backgroundColor: "pink", height: 100, width: "100%" }}>
                 <Text>内容{index}</Text>
@@ -469,6 +490,7 @@ export default function App() {
       >
         {iconData.map((item, index) => {
           return (
+            // @ts-expect-error
             <Tab name={item.name} value={item.key} iconProps={item.iconProps}>
               <View style={{ backgroundColor: "pink", height: 100, width: "100%" }}>
                 <Text>内容{index}</Text>
@@ -488,7 +510,7 @@ export default function App() {
             </Tab>
           );
         })}
-      </Tabs>
+      </Tabs> */}
     </ScrollView>
   );
 }

package/src/components/Tab/styles.ts

@@ -1,6 +1,7 @@
 import { alwaysColor } from "@xhs/reds-token-next";
 import { StyleSheet } from "react-native";
 import { useThemeColor } from "../ConfigProvider";
+import { relative } from "path";
 
 const styles = StyleSheet.create({
   tabCenterContainer: {
@@ -9,10 +10,15 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
+    width: "100%",
   },
   tabLeftContainer: {
     width: "100%",
     height: 44,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start",
   },
   tabSpaceContainer: {
     width: "100%",
@@ -33,9 +39,10 @@ const styles = StyleSheet.create({
   },
   underline: {
     height: 2,
-    width: "90%",
     borderRadius: 2,
     paddingHorizontal: 2,
+    position: "absolute",
+    bottom: 2,
   },
   smallText: {
     fontSize: 14,
@@ -68,7 +75,6 @@ const styles = StyleSheet.create({
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
-    position: "relative",
   },
   leftIcon: {
     marginRight: 2,
@@ -103,10 +109,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     flexDirection: "row",
   },
-  columnFlex: {
-    display: "flex",
-    alignItems: "center",
-  },
 });
 
 export const getRedsDropDownVariantStyles = () => {

package/src/components/Uploader/Uploader.tsx

@@ -218,17 +218,17 @@ const Uploader = (props: RedsUploader) => {
           {item.status && item.status !== "success" ? (
             <View style={styles.progressIndicator}>
               {/** initial */}
-              {item.status === "initial" ? <ProgressIndicator size={18} strokeColor={themeColor.White} /> : <></>}
+              {item.status === "initial" ? <ProgressIndicator size={18} strokeColor={"#fff"} /> : <></>}
               {/** uploading */}
               {item.status === "uploading" ? (
                 <ProgressIndicator
                   size={item.statusNumber === undefined ? 18 : 40}
                   showPercent={!!item.statusNumber}
                   type="progress"
-                  strokeColor={themeColor.White}
+                  strokeColor={"#fff"}
                   percent={item.statusNumber}
                   textStyle={{
-                    color: themeColor.White,
+                    color: "#fff",
                     fontSize: 10,
                   }}
                 />
@@ -290,17 +290,17 @@ const Uploader = (props: RedsUploader) => {
           {item.status && item.status !== "success" ? (
             <View style={styles.identityProgressIndicator}>
               {/** initial */}
-              {item.status === "initial" ? <ProgressIndicator size={18} strokeColor={themeColor.White} /> : <></>}
+              {item.status === "initial" ? <ProgressIndicator size={18} strokeColor={"#fff"} /> : <></>}
               {/** uploading */}
               {item.status === "uploading" ? (
                 <ProgressIndicator
                   size={item.statusNumber === undefined ? 18 : 40}
                   showPercent={!!item.statusNumber}
                   type="progress"
-                  strokeColor={themeColor.White}
+                  strokeColor={"#fff"}
                   percent={item.statusNumber}
                   textStyle={{
-                    color: themeColor.White,
+                    color: "#fff",
                     fontSize: 10,
                   }}
                 />

package/src/components/Uploader/styles.ts

@@ -22,6 +22,7 @@ function getUploaderStyle(props: RedsUploader, themeColor: any) {
       height: uploadSizeMap[props.size || UploaderSize.NORMAL],
       marginRight: 10,
       marginTop: 10,
+      borderRadius: 6,
     },
     identityView: {
       position: "relative",
@@ -57,10 +58,12 @@ function getUploaderStyle(props: RedsUploader, themeColor: any) {
     identityImage: {
       width: 170,
       height: 85,
+      borderRadius: 6,
     },
     image: {
       width: "100%",
       height: "100%",
+      borderRadius: 6,
     },
     close: {
       width: 16,
@@ -128,7 +131,7 @@ function getUploaderStyle(props: RedsUploader, themeColor: any) {
       flexDirection: "column",
       alignItems: "center",
       justifyContent: "center",
-      backgroundColor: themeColor.Description,
+      backgroundColor: "rgba(48,48,52,0.5)",
     },
     identityProgressIndicator: {
       width: 170,
@@ -142,7 +145,7 @@ function getUploaderStyle(props: RedsUploader, themeColor: any) {
       flexDirection: "column",
       alignItems: "center",
       justifyContent: "center",
-      backgroundColor: themeColor.Description,
+      backgroundColor: "rgba(48,48,52,0.5)",
     },
     progressDesc: {
       color: themeColor.White,

package/types/src/components/ActionSheets/styles.d.ts

@@ -1,9 +1,11 @@
 declare const styles: {
   ActionSheetsContainer: {
     width: "100%";
-    overflowY: string;
     borderTopLeftRadius: number;
     borderTopRightRadius: number;
+    display: "flex";
+    height: "100%";
+    flexDirection: "column";
   };
   description: {
     height: number;
@@ -16,6 +18,7 @@ declare const styles: {
     justifyContent: "center";
     borderTopLeftRadius: number;
     borderTopRightRadius: number;
+    flexShrink: number;
   };
   descriptionText: {
     fontSize: number;

package/types/src/components/CheckBoxGroup/interface/index.d.ts

@@ -53,6 +53,7 @@ export interface RedsCheckBox {
   style?: ViewStyle;
   size?: CheckBoxGroupSize;
   onChange?: (value: string | number, checked: boolean) => void;
+  isControl?: boolean;
 }
 export declare const RedsCheckBoxDefaultProps: {
   placement: CheckBoxPlacement;

package/types/src/components/Form/Form.d.ts

@@ -1,10 +1,4 @@
 import React from "react";
 import { RedsForm } from "./interface/index";
-declare const Form: {
-  (props: RedsForm): React.JSX.Element;
-  defaultProps: {
-    layout: import("./interface/index").LAYOUT;
-    align: import("./interface/index").ALIGN;
-  };
-};
+declare const Form: React.ForwardRefExoticComponent<RedsForm & React.RefAttributes<unknown>>;
 export default Form;

package/types/src/components/Form/interface/index.d.ts

@@ -23,14 +23,18 @@ export interface RedsForm {
   data: FormData;
   rules: FormRules;
   onSubmit?: (value: FormData) => any;
-  children: ReactNode[];
+  children: ReactNode[] | ReactNode;
   layout?: LAYOUT;
   align?: ALIGN;
+  showSubmit?: boolean;
+  submitText?: string;
 }
 export interface RedsFormEvent {}
 export declare const FormDefaultProps: {
   layout: LAYOUT;
   align: ALIGN;
+  showSubmit: boolean;
+  submitText: string;
 };
 export interface RedsFormItem {
   /**
@@ -52,7 +56,7 @@ export interface RedsFormItem {
   /**
    * label
    */
-  label: string;
+  label?: string;
   /**
    * value
    */
@@ -76,11 +80,19 @@ export interface RedsFormItem {
   /**
    * label styles
    */
-  labelStyle?: TextStyle;
+  labelStyle?: ViewStyle;
+  /**
+   * label text styles
+   */
+  labelTextStyle?: TextStyle;
   /**
    * formItem slot styles
    */
   formItemSlotStyles?: ViewStyle;
+  /**
+   * label slot
+   */
+  LabelComponent?: ReactNode;
 }
 export interface RedsFormItemEvent {
   (e: "validate", value: Event): any;