@xhsreds/reds-rn-next 0.8.4-image-optimization202510222117 → 0.9.1-feat-image-2202510231126

package/src/components/DropDown/DropDown.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo, forwardRef, useImperativeHandle } from "react";
 import { TouchableWithoutFeedback, View, Text, ScrollView } from "react-native";
 import { useColorMode, useThemeColor } from "../ConfigProvider";
 import { RedsDropDown, DropDownDefaultProps, DROPDOWNITEMTYPE, FILTER_TYPE } from "./interface/index";
@@ -8,7 +8,7 @@ import { Icon, IconType } from "../Icon";
 import { Button } from "../Button";
 import useMounted from "../../pvCount/useUnmountedProcess";
 import { useLanguage } from "../LanguageProvider";
-const DropDown = (props: RedsDropDown) => {
+const DropDown = forwardRef((props: RedsDropDown, ref) => {
   useMounted("DropDown");
   const colorMode = useColorMode();
   const themeColor = useThemeColor();
@@ -65,6 +65,7 @@ const DropDown = (props: RedsDropDown) => {
       setActiveTab(key);
       setActiveDropDownItemIndex(index);
     }
+    props?.onChange?.(key, index);
   };
 
   /**
@@ -73,6 +74,7 @@ const DropDown = (props: RedsDropDown) => {
   const handleFilter = () => {
     setFilter((v) => !v);
     setActiveTab(undefined);
+    setActiveDropDownItemIndex(undefined);
   };
 
   /**
@@ -80,7 +82,13 @@ const DropDown = (props: RedsDropDown) => {
    */
   const defaultVnode = useMemo(() => {
     if (activeDropDownItemIndex !== undefined) {
-      return props?.children?.[activeDropDownItemIndex];
+      return props?.children.length ? (
+        props?.children?.[activeDropDownItemIndex]
+      ) : activeDropDownItemIndex === 0 ? (
+        props.children
+      ) : (
+        <></>
+      );
     } else {
       return null;
     }
@@ -100,6 +108,7 @@ const DropDown = (props: RedsDropDown) => {
   const handleMask = () => {
     setActiveTab("");
     setFilter(false);
+    props?.onClose?.();
   };
 
   /**
@@ -136,20 +145,31 @@ const DropDown = (props: RedsDropDown) => {
 
   const computedStyles = getRedsDropDownVariantStyles(themeColor);
 
+  const tabLayout = useMemo(() => {
+    if (props.tabLayout) {
+      return props.tabLayout;
+    }
+    return props?.filter ? TabType.TabLayoutType.left : TabType.TabLayoutType.space;
+  }, [props.tabLayout, props?.filter]);
+
+  useImperativeHandle(ref, () => {
+    return {
+      handleMask,
+    };
+  });
   return (
-    <>
+    <View style={[{ position: "relative", zIndex: 999 }]}>
       {/* 标签 */}
       <View style={[styles.labelContainer, computedStyles.backgroundColor.bg, props.tabStyle]}>
+        <View>{props.header}</View>
         {/** 渲染tab内容 */}
         <Tabs
           onChange={handleChange}
           active={activeTab}
           labelType={TabType.TabLabelType.rightIcon}
           theme={TabType.TabThemeType.text}
-          layout={props?.filter ? TabType.TabLayoutType.left : TabType.TabLayoutType.space}
-          spaceWidth={6}
-          tabPadding={6}
-          containerStyle={{ backgroundColor: computedStyles.backgroundColor.bg }}
+          layout={tabLayout as TabType.TabLayoutType}
+          containerStyle={{ backgroundColor: computedStyles.backgroundColor.bg, width: "auto", flex: 1 }}
         >
           {tabData.map((i) => (
             <Tab name={i.text} value={i.key} iconProps={i.iconProps} key={i.text + i.key}>
@@ -181,24 +201,30 @@ const DropDown = (props: RedsDropDown) => {
           <></>
         )}
       </View>
+      <View
+        style={{
+          backgroundColor: themeColor.Separator,
+          height: 0.5,
+        }}
+      ></View>
       {/** 渲染DropDownItem */}
       {activeTab || filter ? (
-        <View style={[{ position: "relative", height: "100%" }, props.dropdownItemContainerStyle]}>
+        <View style={[{ position: "absolute", top: 44, left: 0, zIndex: 999 }, props.dropdownItemContainerStyle]}>
           <TouchableWithoutFeedback onPress={handleMask}>
-            <View style={[styles.mask, computedStyles.backgroundColor.fill5]}></View>
+            <View style={[styles.mask, computedStyles.backgroundColor.fill5, props.maskStyle]}></View>
           </TouchableWithoutFeedback>
           <View style={[styles.DropDownContainer, computedStyles.backgroundColor.bg]}>
             <View style={[styles.DropDownItemWrapper, { paddingHorizontal: 12 }]}>
               <ScrollView
                 style={styles.ScrollStyles}
                 showsVerticalScrollIndicator={false}
-                contentContainerStyle={{ paddingBottom: 50, marginBottom: 20 }}
+                // contentContainerStyle={{ paddingTop: 44 }}
                 testID="filter-active"
               >
                 {/* 展示筛选插槽内容 */}
                 {filter ? props?.filter : <View testID="filter-inactive" />}
                 {/* 展示默认插槽内容 */}
-                {activeTab ? <View>{defaultVnode}</View> : <></>}
+                {<View>{defaultVnode}</View>}
               </ScrollView>
               {/* 底部按钮 */}
               {displayAction || filter ? (
@@ -229,9 +255,9 @@ const DropDown = (props: RedsDropDown) => {
       ) : (
         <></>
       )}
-    </>
+    </View>
   );
-};
+});
 
 DropDown.defaultProps = DropDownDefaultProps;
 

package/src/components/DropDown/DropDownItem.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { TouchableWithoutFeedback, View, Text, ViewStyle, TextInput } from "react-native";
+import { TouchableWithoutFeedback, View, Text, ViewStyle, TextInput, Dimensions, Image } from "react-native";
 import {
   RedsDropDownItem,
   DropDownItemDefaultProps,
@@ -15,8 +15,8 @@ import useMounted from "../../pvCount/useUnmountedProcess";
 export const getMultiStyles = (props: RedsDropDownItem, index: number, dropDownItemWidth: number) => {
   const columns = props?.optionColumns || MULTIPLEOPTIONCOLUMN.TWO;
   return {
-    width: Math.floor((dropDownItemWidth - 10 * (columns - 1)) / columns),
-    marginRight: (index + 1) % columns ? 10 : 0,
+    width: Math.floor((dropDownItemWidth - 12 * (columns - 1)) / columns),
+    marginRight: (index + 1) % columns ? 12 : 0,
   };
 };
 
@@ -127,6 +127,7 @@ const DropDownItem = (props: RedsDropDownItem) => {
       onLayout={(e) => {
         setDropDownItemWidth(e.nativeEvent.layout.width);
       }}
+      style={{ width: Dimensions.get("window").width - 24 }}
     >
       {/* label 标签 */}
       {props.label ? (
@@ -164,7 +165,7 @@ const DropDownItem = (props: RedsDropDownItem) => {
               >
                 {opt.value}
               </Text>
-              {_value === opt.key ? <Icon icon={Check} size={20} type={IconType.iconType.image} /> : <></>}
+              {_value === opt.key ? <Image source={{ uri: Check }} style={{ height: 20, width: 20 }} /> : <></>}
             </View>
           </TouchableWithoutFeedback>
         ))

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, Text } from "react-native";
 import { DropDown, DropDownItem, DropDownType, useThemeColor } from "@xhs/reds-rn-next";
 
 const styles = StyleSheet.create({
@@ -19,7 +19,7 @@ const dropDownItemOptions = new Array(15).fill(0).map((_, idx) => ({
   value: `选项${idx + 1}`,
 }));
 
-const dropDownOptions = new Array(4).fill(0).map((_, idx) => ({
+const dropDownOptions = new Array(3).fill(0).map((_, idx) => ({
   key: `${idx + 1}`,
   value: `选项${idx + 1}`,
 }));
@@ -30,13 +30,6 @@ const FilterRender = () => {
   const [inputValue, setInputValue] = useState<string[]>();
   return (
     <View>
-      <DropDownItem
-        type={DROPDOWNITEMTYPE.MULTIPLE}
-        options={dropDownItemOptions}
-        defaultValue={"1"}
-        label={"标题"}
-        optionColumns={MULTIPLEOPTIONCOLUMN.FOUR}
-      />
       <DropDownItem
         type={DROPDOWNITEMTYPE.MORE_MULTIPLE}
         options={dropDownItemOptions}
@@ -66,21 +59,19 @@ export default function App() {
 
   const [multiValue, setMultiValue] = useState<string[]>();
 
+  const [aa, setAA] = useState(false);
+
   const handleReset = () => {
     console.log("onReset");
   };
 
   return (
     <View style={styles.container}>
-      <DropDown options={dropDownOptions} onReset={handleReset} filterType={FILTER_TYPE.TEXT}>
+      <DropDown options={dropDownOptions} onReset={handleReset}>
         <DropDownItem
           type={DROPDOWNITEMTYPE.RADIO}
           options={dropDownItemOptions}
           defaultValue={"1"}
-          onChange={(key: string | number[] | string[]) => {
-            setRadioValue(key as string);
-            console.log("key", key);
-          }}
           value={radioValue}
         />
         <DropDownItem
@@ -99,11 +90,35 @@ export default function App() {
           defaultValue={"1"}
           optionColumns={MULTIPLEOPTIONCOLUMN.THREE}
         />
+      </DropDown>
+      <DropDown
+        options={dropDownOptions}
+        onReset={handleReset}
+        filterType={FILTER_TYPE.TEXT}
+        header={<Text>自定义header</Text>}
+        tabLayout="right"
+      >
+        <DropDownItem
+          type={DROPDOWNITEMTYPE.RADIO}
+          options={dropDownItemOptions}
+          defaultValue={"1"}
+          value={radioValue}
+        />
+        <DropDownItem
+          type={DROPDOWNITEMTYPE.MULTIPLE}
+          options={dropDownItemOptions}
+          defaultValue={["1", "2"]}
+          onChange={(key: string | number[] | string[]) => {
+            setMultiValue(key as string[]);
+            console.log("key", key);
+          }}
+          value={multiValue}
+        />
         <DropDownItem
           type={DROPDOWNITEMTYPE.MULTIPLE}
           options={dropDownItemOptions}
           defaultValue={"1"}
-          optionColumns={MULTIPLEOPTIONCOLUMN.FOUR}
+          optionColumns={MULTIPLEOPTIONCOLUMN.THREE}
         />
       </DropDown>
       <DropDown options={dropDownOptions} onReset={handleReset} filterType={FILTER_TYPE.TEXT} filter={FilterRender()}>
@@ -133,13 +148,8 @@ export default function App() {
           defaultValue={"1"}
           optionColumns={MULTIPLEOPTIONCOLUMN.THREE}
         />
-        <DropDownItem
-          type={DROPDOWNITEMTYPE.MULTIPLE}
-          options={dropDownItemOptions}
-          defaultValue={"1"}
-          optionColumns={MULTIPLEOPTIONCOLUMN.FOUR}
-        />
       </DropDown>
+      <View style={{ width: "100%", height: 600, backgroundColor: "pink" }}></View>
     </View>
   );
 }

package/src/components/DropDown/doc/index.mdx

@@ -59,10 +59,15 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | dropdownItemContainerStyle | 自定义dropdownItemContainer样式 | ViewStyle       | `{}`             |
 | children                   | dropDownItem                    | ReactNode[]     |                  |
 | filter                     | filter dropdownItem             | React.ReactNode |                  |
+| header                     | header                          | any             |                  |
+| maskStyle                  | maskStyle                       | any             |                  |
+| tabLayout                  | tabLayout                       | string          |                  |
 
 ### Events
 
-| 事件      | 描述            | 类型       | 默认值   |
-| --------- | --------------- | ---------- | -------- |
-| onReset   | filter 重置选项 | () => void | () => {} |
-| onConfirm | 确定选项        | () => void | () => {} |
+| 事件      | 描述            | 类型                                 | 默认值   |
+| --------- | --------------- | ------------------------------------ | -------- |
+| onReset   | filter 重置选项 | () => void                           | () => {} |
+| onConfirm | 确定选项        | () => void                           | () => {} |
+| onClose   | 关闭            | () => void                           | () => {} |
+| onChange  | 选择onChange    | (key: string, index: number) => void | () => {} |

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

@@ -10,7 +10,6 @@ export const enum DROPDOWNITEMTYPE {
 export const enum MULTIPLEOPTIONCOLUMN {
   TWO = 2,
   THREE = 3,
-  FOUR = 4,
 }
 
 export interface SelectItem {
@@ -27,12 +26,17 @@ export interface RedsDropDown {
   filterType?: FILTER_TYPE;
   onReset?: () => void;
   onConfirm?: () => void;
+  onClose?: () => void;
   finishText?: string;
   resetText?: string;
   tabStyle?: ViewStyle;
   dropdownItemContainerStyle?: ViewStyle;
   children: ReactNode[];
   filter?: React.ReactNode;
+  header?: any;
+  maskStyle?: any;
+  tabLayout?: string;
+  onChange?: (key: string, index: number) => void;
 }
 
 export interface RedsDropDownEvent {}
@@ -41,8 +45,10 @@ export const DropDownDefaultProps = {
   filterType: FILTER_TYPE.TEXT,
   onReset: () => {},
   onConfirm: () => {},
+  onClose: () => {},
   tabStyle: {},
   dropdownItemContainerStyle: {},
+  onChange: () => {},
 };
 
 export interface RedsDropDownItem {

package/src/components/DropDown/styles.ts

@@ -8,7 +8,7 @@ const styles = StyleSheet.create({
   },
   DropDownContainer: {
     width: "100%",
-    maxHeight: "75%",
+    maxHeight: Dimensions.get("window").height * 0.75,
     position: "relative",
     // paddingLeft: 16,
     // paddingRight: 16,
@@ -91,8 +91,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     flexDirection: "row",
-    marginTop: 10,
-    marginBottom: 10,
+    marginTop: 12,
     borderRadius: 6,
   },
   multiActiveContainer: {
@@ -102,8 +101,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     flexDirection: "row",
-    marginTop: 10,
-    marginBottom: 10,
+    marginTop: 12,
     borderRadius: 6,
   },
   multiNormalText: {
@@ -126,6 +124,7 @@ const styles = StyleSheet.create({
     height: 40,
     boxSizing: "border-box",
     width: "100%",
+    marginBottom: 16,
   },
   input: {
     height: "100%",

package/src/components/Empty/Empty.tsx

@@ -14,16 +14,23 @@ const Empty = (props: RedsEmpty) => {
   const styles = createStyles();
   const colorMode = useColorMode();
 
+  const url = useMemo(() => {
+    return colorMode === "light" ? lightTypes[type as typeList] : darkTypes[type as typeList];
+  }, [colorMode, lightTypes, darkTypes, type]);
+
   const defaultImage = useMemo(
     () =>
-      image || (
+      image ||
+      (url ? (
         <Image
           style={{ height: 80, width: 80 }}
           source={{
-            uri: colorMode === "light" ? lightTypes[type as typeList] : darkTypes[type as typeList],
+            uri: url,
           }}
         ></Image>
-      ),
+      ) : (
+        <></>
+      )),
     [image, colorMode],
   );
 

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

@@ -44,6 +44,15 @@ export default function App() {
         <Empty type={type}></Empty>
       ))}
       <Br />
+      <Desc>仅文案</Desc>
+      <Empty
+        type={"text"}
+        link={"《协议》"}
+        onClick={() => {
+          console.log("点击协议");
+        }}
+      ></Empty>
+      <Br />
       <Desc>描述</Desc>
       <Empty description="我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行"></Empty>
       <Br />

package/src/components/FAB/FAB.tsx

@@ -34,6 +34,17 @@ const FAB = (props: RedsFAB) => {
             avatar={avatar}
             outlineType={"shadow"}
             onClick={onClick}
+            // @ts-ignore
+            style={[
+              shape === "circle" ? { width: 48, height: 48 } : {},
+              shape === "circle"
+                ? {}
+                : {
+                    paddingLeft: iconLeft ? 20 : 24,
+                    paddingRight: iconRight ? 20 : 24,
+                  },
+              props.style,
+            ]}
           >
             {children}
           </Button>

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, Text, StyleSheet, Alert, ScrollView } from "react-native";
-import { FAB, Icon } from "@xhs/reds-rn-next";
+import { FAB, Icon, useThemeColor } from "@xhs/reds-rn-next";
 import { Add } from "@xhs/reder-icon-svg-ReDs_icon";
 
 const styles = StyleSheet.create({
@@ -21,6 +21,8 @@ const Br = (props: { height?: number }) => <View style={{ height: props.height |
 export default function App() {
   const onClick = () => Alert.alert(Math.random().toFixed(2));
 
+  const themeColor = useThemeColor();
+
   return (
     <ScrollView>
       <View style={styles.container}>
@@ -31,18 +33,30 @@ export default function App() {
           top={150}
           right={280}
           shape="circle"
-          iconLeft={<Icon icon={Add} size={20} />}
+          iconLeft={<Icon icon={Add} size={20} fill={themeColor.Black} />}
         >
-          large 大
+          xLarge 大
         </FAB>
-        <FAB onClick={onClick} size="large" top={150} right={150} iconLeft={<Icon icon={Add} size={20} />}>
-          large 大
+        <FAB
+          onClick={onClick}
+          size="xLarge"
+          top={150}
+          right={150}
+          iconLeft={<Icon icon={Add} size={20} fill={themeColor.Black} />}
+        >
+          xLarge 大
         </FAB>
-        <FAB onClick={onClick} size="large" top={150} right={20} iconRight={<Icon icon={Add} size={20} />}>
+        <FAB
+          onClick={onClick}
+          size="large"
+          top={150}
+          right={20}
+          iconRight={<Icon icon={Add} size={20} fill={themeColor.Black} />}
+        >
           large 大
         </FAB>
         <FAB onClick={onClick}>默认用法</FAB>
-        <FAB onClick={onClick} horizontalCenter>
+        <FAB onClick={onClick} horizontalCenter type={"primary"}>
           居中用法
         </FAB>
       </View>

package/src/components/FAB/doc/index.mdx

@@ -24,6 +24,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | avatar           | 头像，只有 size 在 xLarge | large 时生效   | React.ReactNode |         |
 | iconLeft         | 左图标，只有 size 在 xLarge | large 时生效 | React.ReactNode |         |
 | iconRight        | 右图标，只有 size 在 xLarge | large 时生效 | React.ReactNode |         |
+| style            | 设置样式                                        | any             | `{}`    |
 
 ### Events
 

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

@@ -18,6 +18,7 @@ export interface RedsFAB {
   iconLeft?: React.ReactNode;
   iconRight?: React.ReactNode;
   onClick?: (value: GestureResponderEvent) => void;
+  style?: any;
 }
 
 export interface RedsFABEvent {}
@@ -28,4 +29,5 @@ export const FABDefaultProps = {
   right: 16,
   bottom: 58,
   horizontalCenter: false,
+  style: {},
 };