@xhsreds/reds-rn-next 0.1.2 → 0.1.3

package/src/components/Sheets/styles.ts

@@ -1,11 +1,7 @@
-import { alwaysColor } from "@xhs/reds-token-next";
 import { StyleSheet } from "react-native";
 
 const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    height: "100%",
-    backgroundColor: alwaysColor.MaskBg,
+  wrapper: {
     position: "absolute",
     bottom: 0,
     left: 0,
@@ -15,7 +11,6 @@ const styles = StyleSheet.create({
   mask: {
     width: "100%",
     height: "100%",
-    backgroundColor: alwaysColor.MaskBg,
     position: "absolute",
     bottom: 0,
     left: 0,
@@ -23,14 +18,12 @@ const styles = StyleSheet.create({
     top: 0,
   },
   picker: {
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
     position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
-    paddingTop: 4,
-    paddingBottom: 34,
-    borderTopLeftRadius: 12,
-    borderTopRightRadius: 12,
   },
   labelContainer: {
     display: "flex",
@@ -55,6 +48,41 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: "400",
   },
+  iconBg: {
+    width: 28,
+    height: 28,
+    borderRadius: 28,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  dragableContainer: {
+    width: "100%",
+    height: 20,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  dragable: {
+    width: 33,
+    height: 4,
+    borderRadius: 10,
+  },
+  block: {
+    width: 28,
+    height: 28,
+  },
+  actionContainer: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexDirection: "row",
+    width: "100%",
+  },
+  action: {
+    flex: 1,
+    marginHorizontal: 12,
+  },
 });
 
 export default styles;

package/src/components/Sheets/test/index.test.tsx

@@ -1,59 +1,82 @@
 import React from "react";
-import { describe, it, expect, vi } from "vitest";
 import { render, fireEvent } from "@testing-library/react-native";
-import "@testing-library/react-native/extend-expect";
 import { Text } from "react-native";
+import { vi, describe, it, expect } from "vitest";
 import Sheets from "../Sheets";
-import { PortalProvider } from "../../Portal";
-
-describe("Sheets", () => {
-  it("renders correctly when visible is true", () => {
-    const onCancel = vi.fn();
-    const onConfirm = vi.fn();
-    const label = "Test Label";
-
-    const { getByText } = render(
-      <PortalProvider>
-        <Sheets visible={true} onCancel={onCancel} onConfirm={onConfirm} label={label}>
-          <Text>Test Children</Text>
-        </Sheets>
-      </PortalProvider>,
-    );
-
-    expect(getByText("Test Label")).toBeTruthy();
+import { SheetsMaskMode, SheetsType, SheetsActionType, SheetsIconType, SheetsSize } from "../interface";
+
+describe("Sheets Component", () => {
+  const defaultProps = {
+    visible: true,
+    onCancel: vi.fn(),
+    onConfirm: vi.fn(),
+    children: <Text>Content</Text>,
+    label: "Test Label",
+    mask: true,
+    maskMode: SheetsMaskMode.dark,
+    cancelType: SheetsActionType.text,
+    closeType: SheetsActionType.icon,
+    cancelText: "Cancel",
+    closeText: "Close",
+    sheetsType: SheetsType.normal,
+    cancel: true,
+    close: true,
+    iconType: SheetsIconType.bg,
+    size: SheetsSize.auto,
+  };
+
+  it("should render correctly when visible", () => {
+    const { getByText } = render(<Sheets {...defaultProps} />);
+    expect(getByText("Content")).toBeTruthy();
+  });
+
+  it("should call onCancel when mask is clicked", () => {
+    const { getByTestId } = render(<Sheets {...defaultProps} />);
+    fireEvent.press(getByTestId("mask"));
+    expect(defaultProps.onCancel).toBeCalled();
   });
 
-  it("calls onCancel and onConfirm on button press", () => {
-    const onCancel = vi.fn();
-    const onConfirm = vi.fn();
-    const label = "Test Label";
-
-    const { getByText } = render(
-      <PortalProvider>
-        <Sheets visible={true} onCancel={onCancel} onConfirm={onConfirm} label={label}>
-          <Text>Test Children</Text>
-        </Sheets>
-      </PortalProvider>,
-    );
-
-    const cancelBtn = getByText("取消");
-    fireEvent.press(cancelBtn);
-    expect(onCancel).toHaveBeenCalledTimes(1);
-
-    const confirmBtn = getByText("确定");
-    fireEvent.press(confirmBtn);
-    expect(onConfirm).toHaveBeenCalledTimes(1);
+  it("should call onConfirm when close is clicked", () => {
+    const { getByText } = render(<Sheets {...defaultProps} />);
+    fireEvent.press(getByText("Close"));
+    expect(defaultProps.onConfirm).toBeCalled();
   });
 
-  it("does not render anything when visible is false", () => {
-    const { queryByText } = render(
-      <PortalProvider>
-        <Sheets visible={false} onCancel={() => {}} onConfirm={() => {}} label={"Test Label"}>
-          <Text>Test Children</Text>
-        </Sheets>
-      </PortalProvider>,
-    );
+  it("should call onCancel when cancel is clicked", () => {
+    const { getByText } = render(<Sheets {...defaultProps} />);
+    fireEvent.press(getByText("Cancel"));
+    expect(defaultProps.onCancel).toBeCalled();
+  });
+
+  it("should handle layout changes correctly", () => {
+    const { getByText } = render(<Sheets {...defaultProps} />);
+    const content = getByText("Content");
+
+    // @ts-expect-error
+    fireEvent.layout(content, {
+      nativeEvent: {
+        layout: { height: 300 },
+      },
+    });
+
+    // 验证 Animated 的高度变化
+    // 由于Animated是异步的，可以使用Mock或Spy进行验证
+  });
+
+  it("should handle pan responder correctly", () => {
+    const { getByTestId } = render(<Sheets {...defaultProps} sheetsType={SheetsType.dragable} />);
+    const draggable = getByTestId("draggable");
+
+    fireEvent(draggable, "panResponderMove", {
+      nativeEvent: { contentOffset: { dy: -100 } },
+    });
+
+    // 验证 Animated 的高度变化
+    // 由于Animated是异步的，可以使用Mock或Spy进行验证
+  });
 
-    expect(queryByText("Test Label")).toBeNull();
+  it("should hide when visible is false", () => {
+    const { queryByText } = render(<Sheets {...defaultProps} visible={false} />);
+    expect(queryByText("Content")).not.toBeTruthy();
   });
 });

package/src/components/Sheets/test/paper.bench.tsx

@@ -6,7 +6,7 @@ import { Modal } from "react-native-paper";
 import { render, fireEvent } from "@testing-library/react-native";
 import { Text } from "react-native";
 
-describe("render", () => {
+describe("paper render", () => {
   redsBench("base", async () => {
     render(
       <Modal visible={true}>

package/src/components/Silder/Silder.tsx

@@ -0,0 +1,49 @@
+import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { View, TouchableWithoutFeedback, Animated, GestureResponderEvent } from "react-native";
+import { RedsSilder, SilderDefaultProps } from "./interface/index";
+import styles from "./styles";
+
+const Silder = ({ value, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsSilder) => {
+  const isControlled = useRef(value !== undefined);
+  const [isOn, setIsOn] = useState(defaultValue);
+
+  const animatedValue = useRef(new Animated.Value(defaultValue ? 18 : 2)).current;
+  const thumbTranslateX = animatedValue.interpolate({ inputRange: [2, 18], outputRange: [2, 18] });
+
+  useEffect(() => {
+    onChange?.(!!isOn);
+  }, [isOn]);
+
+  useEffect(() => {
+    isControlled.current && setIsOn(value);
+  }, [value]);
+
+  const toggleSilder = useCallback((e: GestureResponderEvent) => {
+    onClick?.(e);
+    !isControlled.current && setIsOn((v) => !v);
+  }, []);
+
+  const dynamicStyles = useMemo(() => {
+    Animated.timing(animatedValue, {
+      toValue: isOn ? 18 : 2,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+    return {
+      backgroundColor: isOn ? trackOnColor : trackOffColor,
+      transform: [{ translateX: thumbTranslateX }],
+    };
+  }, [isOn]);
+
+  return (
+    <TouchableWithoutFeedback onPress={(e) => toggleSilder(e)}>
+      <View style={[styles.SilderContainer, { backgroundColor: dynamicStyles.backgroundColor }]}>
+        <Animated.View style={[styles.thumb, { transform: dynamicStyles.transform }]}></Animated.View>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+Silder.defaultProps = SilderDefaultProps;
+
+export default Silder;

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

@@ -0,0 +1,53 @@
+import React, { useRef, useEffect, useState } from "react";
+import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
+import { Silder } from "@xhs/reds-rn-next";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    paddingTop: 100,
+    paddingBottom: 100,
+  },
+  scrollView: {
+    backgroundColor: "pink",
+  },
+  root: {
+    flex: 1,
+    backgroundColor: "blue",
+  },
+});
+const Desc = ({ children = "" }) => {
+  return <Text>{children}</Text>;
+};
+const Br = (props: { height?: number }) => <View style={{ height: props.height || 20 }}></View>;
+
+export default function App() {
+  const [value, setValue] = useState(false);
+  const [valueStr, setValueStr] = useState(value.toString());
+  const onClick = (e: any) => setValue((v) => !v);
+  const onChange = (v: boolean) => {
+    console.log(v);
+    setValueStr(v.toString());
+  };
+  return (
+    <View style={styles.container}>
+      <Desc>默认用法</Desc>
+      <Silder></Silder>
+      <Br />
+
+      <Desc>设置默认值</Desc>
+      <Silder defaultValue={true}></Silder>
+      <Br />
+
+      <Desc>修改开关颜色</Desc>
+      <Silder trackOnColor={"#1b8bcd"} trackOffColor={"#da36c9"}></Silder>
+      <Br />
+
+      <Desc>受控用法</Desc>
+      <Text>当前值:{valueStr}</Text>
+      <Silder value={value} onClick={onClick} onChange={onChange}></Silder>
+      <Br />
+    </View>
+  );
+}

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

@@ -0,0 +1,26 @@
+import BaseDemo from "!!raw-loader!../demo/index.tsx";
+
+## 演示
+
+### 基础用法
+
+::BaseDemo::
+
+## API
+
+### Props
+
+| 属性          | 描述             | 类型    | 默认值             |
+| ------------- | ---------------- | ------- | ------------------ |
+| value         | 当前的状态       | boolean | undefined          |
+| defaultValue  | 默认状态         | boolean | false              |
+| disabled      | 是否显示气泡     | boolean | false              |
+| trackOnColor  | 开关开启时的颜色 | string  | lightColor.Primary |
+| trackOffColor | 开关关闭时的颜色 | string  | lightColor.Fill2   |
+
+### Events
+
+| 事件     | 描述               | 类型                                  | 默认值 |
+| -------- | ------------------ | ------------------------------------- | ------ |
+| onChange | 当值发生变化时触发 | (value: boolean) => any               |        |
+| onClick  | 被点击时触发       | (value: GestureResponderEvent) => any |        |

package/src/components/Silder/index.ts

@@ -0,0 +1,5 @@
+import Silder from "./Silder";
+import * as SilderType from "./interface";
+
+export default Silder;
+export { Silder, SilderType };

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

@@ -0,0 +1,20 @@
+import { GestureResponderEvent } from "react-native";
+import { lightColor } from "@xhs/reds-token-next";
+export interface RedsSilder {
+  value?: boolean;
+  defaultValue?: boolean;
+  disabled?: boolean;
+  trackOnColor?: string;
+  trackOffColor?: string;
+  onChange?: (value: boolean) => any;
+  onClick?: (value: GestureResponderEvent) => any;
+}
+
+export interface RedsSilderEvent {}
+export const SilderDefaultProps = {
+  value: undefined,
+  defaultValue: false,
+  disabled: false,
+  trackOnColor: lightColor.Primary,
+  trackOffColor: lightColor.Fill2,
+};

package/src/components/Silder/styles.ts

@@ -0,0 +1,24 @@
+import { alwaysColor } from "@xhs/reds-token-next";
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  SilderContainer: {
+    width: 40,
+    height: 24,
+    borderRadius: 15,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  thumb: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: alwaysColor.White,
+    justifyContent: "center",
+    alignItems: "center",
+    position: "absolute",
+    left: 0,
+  },
+});
+
+export default styles;

package/src/components/Silder/test/index.bench.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { describe } from "vitest";
+// @ts-ignore
+import { redsBench } from "~root/utils/redsBench";
+import Silder from "..";
+import { render, fireEvent } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+describe("render", () => {
+  redsBench("base", async () => {
+    render(<Silder></Silder>);
+  });
+});

package/src/components/Silder/test/index.test.tsx

@@ -0,0 +1,18 @@
+import { describe, it, expect } from "vitest";
+import { render, fireEvent, userEvent } from "@testing-library/react-native";
+import "@testing-library/react-native/extend-expect";
+import { Pressable, Text, View } from "react-native";
+import Silder from "../index";
+
+describe("Silder", () => {
+  it(":base", async () => {
+    let isOn = false;
+    const wrapper = render(<Silder onChange={(v) => (isOn = v)}></Silder>);
+    expect(wrapper.UNSAFE_root.props.defaultValue).toBe(false);
+    await fireEvent(wrapper.UNSAFE_root.children[0], "press");
+    expect(isOn).toBe(true);
+
+    await fireEvent(wrapper.UNSAFE_root.children[0], "press");
+    expect(isOn).toBe(false);
+  });
+});

package/src/components/TabBar/TabBar.tsx

@@ -11,6 +11,23 @@ import Badge from "../Badge";
 const defaultIconSize = 20;
 
 const TabBar = (props: RedsTabBar) => {
+  /**
+   *  渲染的tab数据
+   */
+
+  const renderTabs = useMemo(() => {
+    if (props.customTabBar) {
+      /** 记录插入位置 */
+      const customIdx = Math.floor(props.list.length / 2);
+      /** 插入数据 */
+      return props.list.reduce((prev: DataType[], cur: DataType, index: number) => {
+        return (index === customIdx ? [...prev, props.customTabBar, cur] : [...prev, cur]) as DataType[];
+      }, [] as DataType[]);
+    } else {
+      return props.list;
+    }
+  }, [props.list, props.customTabBar]);
+
   /**
    * 计算文字class
    * @param item
@@ -49,23 +66,6 @@ const TabBar = (props: RedsTabBar) => {
     props?.onChange?.(item.key);
   };
 
-  /**
-   *  渲染的tab数据
-   */
-
-  const renderTabs = useMemo(() => {
-    if (props.customTabBar) {
-      /** 记录插入位置 */
-      const customIdx = Math.floor(props.list.length / 2);
-      /** 插入数据 */
-      return props.list.reduce((prev: DataType[], cur: DataType, index: number) => {
-        return (index === customIdx ? [...prev, props.customTabBar, cur] : [...prev, cur]) as DataType[];
-      }, [] as DataType[]);
-    } else {
-      return props.list;
-    }
-  }, [props.list, props.customTabBar]);
-
   /**
    * 容器
    */

package/src/components/Toast/test/paper.bench.tsx

@@ -4,15 +4,19 @@ import { Text } from "react-native";
 // @ts-ignore
 import { redsBench } from "~root/utils/redsBench";
 import { render } from "@testing-library/react-native";
-import { Modal as PaperModal } from "react-native-paper";
+import { Modal as PaperModal, Portal, PaperProvider } from "react-native-paper";
 
 describe("render", () => {
   redsBench("base", async () => {
     render(
-      <PaperModal visible={true}>
-        {" "}
-        <Text>Example Modal. Click outside this area to dismiss.</Text>
-      </PaperModal>,
+      <PaperProvider>
+        <Portal>
+          <PaperModal visible={true}>
+            {" "}
+            <Text>Example Modal. Click outside this area to dismiss.</Text>
+          </PaperModal>
+        </Portal>
+      </PaperProvider>,
     );
   });
 });

package/src/index.ts

@@ -1,3 +1,5 @@
+export * from "./components/ActionSheets";
+export * from "./components/Silder";
 export * from "./components/Sheets";
 export * from "./components/PickerView";
 export * from "./components/Picker";

package/lib/cjs/_chunks/DIhBCUjt.js

@@ -1,17 +0,0 @@
-'use strict';
-
-var SheetsDefaultProps = {
-  label: "",
-  onCancel: function onCancel() {},
-  onConfirm: function onConfirm() {},
-  visible: false
-};
-
-var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  SheetsDefaultProps: SheetsDefaultProps
-});
-
-exports.SheetsDefaultProps = SheetsDefaultProps;
-exports.index = index;
-//# sourceMappingURL=DIhBCUjt.js.map

package/lib/cjs/_chunks/DIhBCUjt.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DIhBCUjt.js","sources":["../../../src/components/Sheets/interface/index.ts"],"sourcesContent":["import { ReactNode } from \"react\";\nexport interface RedsSheets {\n  label?: string;\n  onCancel: () => any;\n  onConfirm: () => any;\n  visible: boolean;\n  children: ReactNode;\n}\n\nexport interface RedsSheetsEvent {}\nexport const SheetsDefaultProps = {\n  label: \"\",\n  onCancel: () => {},\n  onConfirm: () => {},\n  visible: false,\n};\n"],"names":["SheetsDefaultProps","label","onCancel","onConfirm","visible"],"mappings":";;AAUO,IAAMA,kBAAqB,GAAA;AAChCC,EAAAA,KAAO,EAAA,EAAA;AACPC,EAAAA,UAAU,SAAVA,WAAgB,EAAC;AACjBC,EAAAA,WAAW,SAAXA,YAAiB,EAAC;AAClBC,EAAAA,OAAS,EAAA,KAAA;AACX;;;;;;;;;;"}

package/lib/esm/_chunks/B3_9dzWY.js

@@ -1,14 +0,0 @@
-var SheetsDefaultProps = {
-  label: "",
-  onCancel: function onCancel() {},
-  onConfirm: function onConfirm() {},
-  visible: false
-};
-
-var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  SheetsDefaultProps: SheetsDefaultProps
-});
-
-export { SheetsDefaultProps as S, index as i };
-//# sourceMappingURL=B3_9dzWY.js.map

package/lib/esm/_chunks/B3_9dzWY.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"B3_9dzWY.js","sources":["../../../src/components/Sheets/interface/index.ts"],"sourcesContent":["import { ReactNode } from \"react\";\nexport interface RedsSheets {\n  label?: string;\n  onCancel: () => any;\n  onConfirm: () => any;\n  visible: boolean;\n  children: ReactNode;\n}\n\nexport interface RedsSheetsEvent {}\nexport const SheetsDefaultProps = {\n  label: \"\",\n  onCancel: () => {},\n  onConfirm: () => {},\n  visible: false,\n};\n"],"names":["SheetsDefaultProps","label","onCancel","onConfirm","visible"],"mappings":"AAUO,IAAMA,kBAAqB,GAAA;AAChCC,EAAAA,KAAO,EAAA,EAAA;AACPC,EAAAA,UAAU,SAAVA,WAAgB,EAAC;AACjBC,EAAAA,WAAW,SAAXA,YAAiB,EAAC;AAClBC,EAAAA,OAAS,EAAA,KAAA;AACX;;;;;;;;;"}