@xhsreds/reds-rn-next 0.0.3 → 0.0.4

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

@@ -1,14 +1,26 @@
 import { ReactNode } from "react";
-
 export interface RedsPopover {
   visible?: boolean;
   placement?: "top" | "bottom";
   content?: string;
   opacity?: number;
   mode?: "light" | "dark";
-  children?: ReactNode;
-  closeOnClickAgain?: boolean;
   trigger?: "click" | "touch";
   zIndex?: number;
-  onVisibleChange?: (v: boolean) => void;
+  closeOnClickAgain?: boolean;
+  children?: ReactNode;
+  onClickMask?: (evnet: Event) => void;
+  onVisibleChange?: (value: boolean) => void;
 }
+
+export interface RedsPopoverEvent {}
+export const defaultProps: RedsPopover = {
+  visible: undefined,
+  placement: "top",
+  content: "",
+  opacity: 0,
+  mode: "light",
+  trigger: "click",
+  zIndex: 1000,
+  closeOnClickAgain: true,
+};

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

@@ -8,17 +8,17 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性            | 描述             | 类型    | 默认值                |
-| --------------- | ---------------- | ------- | --------------------- |
-| value           | 当前的状态       | boolean |                       |
-| default-value   | 默认状态         | boolean | false                 |
-| disabled        | 是否显示气泡     | boolean | false                 |
-| track-on-color  | 开关开启时的颜色 | string  | rgba(255, 36, 66, 1)  |
-| track-off-color | 开关关闭时的颜色 | string  | rgba(48, 48, 52, 0.1) |
+| 属性            | 描述             | 类型    | 默认值             |
+| --------------- | ---------------- | ------- | ------------------ |
+| value           | 当前的状态       | boolean | undefined          |
+| default-value   | 默认状态         | boolean | false              |
+| disabled        | 是否显示气泡     | boolean | false              |
+| track-on-color  | 开关开启时的颜色 | string  | lightColor.Primary |
+| track-off-color | 开关关闭时的颜色 | string  | lightColor.Fill2   |
 
 ### Events
 
-| 事件   | 描述               | 类型                     | 默认值 |
-| ------ | ------------------ | ------------------------ | ------ |
-| change | 当值发生变化时触发 | (value: boolean) => void |        |
-| click  | 被点击时触发       | (value: Event) => void   |        |
+| 事件   | 描述               | 类型                                   | 默认值 |
+| ------ | ------------------ | -------------------------------------- | ------ |
+| change | 当值发生变化时触发 | (value: boolean) => void               |        |
+| click  | 被点击时触发       | (value: GestureResponderEvent) => void |        |

package/src/components/Switch/index.tsx

@@ -19,7 +19,6 @@ const Switch = ({ value: isOn, defaultValue, onChange, onClick, trackOnColor, tr
       useNativeDriver: true,
     }).start();
   }, [value]);
-
   useEffect(() => {
     isControlled && setValue(isOn);
   }, [isOn]);

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

@@ -1,21 +1,21 @@
 import { GestureResponderEvent } from "react-native";
 import { lightColor } from "@xhs/reds-token-next";
-
 export interface RedsSwitch {
   value?: boolean;
   defaultValue?: boolean;
   disabled?: boolean;
-  onClick?: (event: GestureResponderEvent) => void;
-  onChange?: (value: boolean) => void;
   trackOnColor?: string;
   trackOffColor?: string;
+  onChange?: (value: boolean) => void;
+  onClick?: (value: GestureResponderEvent) => void;
 }
 
 export const defaultProps: RedsSwitch = {
+  value: undefined,
   defaultValue: false,
   disabled: false,
-  onClick: (event: GestureResponderEvent) => {},
-  onChange: (value: boolean) => {},
   trackOnColor: lightColor.Primary,
   trackOffColor: lightColor.Fill2,
 };
+
+export interface RedsSwitchEvent {}

package/src/index.ts

@@ -1,6 +1,5 @@
-import Bu from "./components/Bu";
 import Button from "./components/Button";
 import Popover from "./components/Popover";
 import Switch from "./components/Switch";
 import ConfigProvider, { useThemeColor } from "./components/ConfigProvider";
-export { Button, Popover, Switch, ConfigProvider, useThemeColor, Bu };
+export { Button, Popover, Switch, ConfigProvider, useThemeColor };

package/lib/cjs/components/Bu/interface/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Bu/interface/index.ts"],"sourcesContent":["import { GestureResponderEvent } from \"react-native\";\nimport { lightColor } from \"@xhs/reds-token-next\";\n\nexport interface RedsBu {\n  value?: boolean;\n  defaultValue?: boolean;\n  disabled?: boolean;\n  onClick?: (event: GestureResponderEvent) => void;\n  onChange?: (value: boolean) => void;\n  trackOnColor?: string;\n  trackOffColor?: string;\n}\n\nexport const defaultProps: RedsBu = {\n  defaultValue: false,\n  disabled: false,\n  onClick: (event: GestureResponderEvent) => {},\n  onChange: (value: boolean) => {},\n  trackOnColor: lightColor.Primary,\n  trackOffColor: lightColor.Fill2,\n};\n"],"names":["defaultProps","defaultValue","disabled","onClick","event","onChange","value","trackOnColor","lightColor","Primary","trackOffColor","Fill2"],"mappings":";;;;AAaO,IAAMA,YAAuB,GAAA;AAClCC,EAAAA,YAAc,EAAA,KAAA;AACdC,EAAAA,QAAU,EAAA,KAAA;AACVC,EAAAA,OAAA,EAAS,SAAAA,OAAAA,CAACC,KAAiC,EAAA,EAAC;AAC5CC,EAAAA,QAAA,EAAU,SAAAA,QAAAA,CAACC,KAAmB,EAAA,EAAC;EAC/BC,cAAcC,wBAAW,CAAAC,OAAA;EACzBC,eAAeF,wBAAW,CAAAG,KAAAA;AAC5B;;;;"}

package/lib/esm/components/Bu/interface/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Bu/interface/index.ts"],"sourcesContent":["import { GestureResponderEvent } from \"react-native\";\nimport { lightColor } from \"@xhs/reds-token-next\";\n\nexport interface RedsBu {\n  value?: boolean;\n  defaultValue?: boolean;\n  disabled?: boolean;\n  onClick?: (event: GestureResponderEvent) => void;\n  onChange?: (value: boolean) => void;\n  trackOnColor?: string;\n  trackOffColor?: string;\n}\n\nexport const defaultProps: RedsBu = {\n  defaultValue: false,\n  disabled: false,\n  onClick: (event: GestureResponderEvent) => {},\n  onChange: (value: boolean) => {},\n  trackOnColor: lightColor.Primary,\n  trackOffColor: lightColor.Fill2,\n};\n"],"names":["defaultProps","defaultValue","disabled","onClick","event","onChange","value","trackOnColor","lightColor","Primary","trackOffColor","Fill2"],"mappings":";;AAaO,IAAMA,YAAuB,GAAA;AAClCC,EAAAA,YAAc,EAAA,KAAA;AACdC,EAAAA,QAAU,EAAA,KAAA;AACVC,EAAAA,OAAA,EAAS,SAAAA,OAAAA,CAACC,KAAiC,EAAA,EAAC;AAC5CC,EAAAA,QAAA,EAAU,SAAAA,QAAAA,CAACC,KAAmB,EAAA,EAAC;EAC/BC,cAAcC,UAAW,CAAAC,OAAA;EACzBC,eAAeF,UAAW,CAAAG,KAAAA;AAC5B;;;;"}

package/lib/types/src/components/Bu/index.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { RedsBu } from "./interface/index";
-declare const Bu: {
-    ({ value: cValue, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsBu): React.JSX.Element;
-    defaultProps: RedsBu;
-};
-export default Bu;

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

@@ -1,50 +0,0 @@
-import React, { useRef, useEffect, useState } from "react";
-import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
-import { Bu } 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?: any }) => <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) => setValue((v) => !v);
-  const onChange = (v) => setValueStr(v.toString());
-  return (
-    <View style={styles.container}>
-      <Desc>默认用法</Desc>
-      <Bu></Bu>
-      <Br />
-
-      <Desc>设置默认值</Desc>
-      <Bu defaultValue={true}></Bu>
-      <Br />
-
-      <Desc>修改开关颜色</Desc>
-      <Bu trackOnColor={"#1b8bcd"} trackOffColor={"#da36c9"}></Bu>
-      <Br />
-
-      <Desc>受控用法</Desc>
-      <Text>当前值:{valueStr}</Text>
-      <Bu value={value} onClick={onClick} onChange={onChange}></Bu>
-      <Br />
-    </View>
-  );
-}

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

@@ -1,26 +0,0 @@
-import BaseDemo from "!!raw-loader!../demo/index.tsx";
-
-## 演示
-
-### 基础用法
-
-::BaseDemo::
-
-## API
-
-### Props
-
-| 属性            | 描述             | 类型    | 默认值                |
-| --------------- | ---------------- | ------- | --------------------- |
-| value           | 当前的状态       | boolean |                       |
-| default-value   | 默认状态         | boolean | false                 |
-| disabled        | 是否显示气泡     | boolean | false                 |
-| track-on-color  | 开关开启时的颜色 | string  | rgba(255, 36, 66, 1)  |
-| track-off-color | 开关关闭时的颜色 | string  | rgba(48, 48, 52, 0.1) |
-
-### Events
-
-| 事件   | 描述               | 类型                     | 默认值 |
-| ------ | ------------------ | ------------------------ | ------ |
-| change | 当值发生变化时触发 | (value: boolean) => void |        |
-| click  | 被点击时触发       | (value: Event) => void   |        |

package/src/components/Bu/index.tsx

@@ -1,60 +0,0 @@
-import React, { useState, useRef, useEffect, useMemo } from "react";
-import { View, TouchableWithoutFeedback, StyleSheet, Animated, GestureResponderEvent } from "react-native";
-import { RedsBu, defaultProps } from "./interface/index";
-import { alwaysColor } from "@xhs/reds-token-next";
-
-const Bu = ({ value: cValue, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsBu) => {
-  const isControlled = cValue !== undefined;
-  const [value, setValue] = useState(defaultValue);
-
-  const animatedValue = useRef(new Animated.Value(defaultValue ? 18 : 2)).current;
-
-  const thumbTranslateX = useMemo(() => animatedValue.interpolate({ inputRange: [2, 18], outputRange: [2, 18] }), []);
-
-  useEffect(() => {
-    isControlled && setValue(cValue);
-    onChange?.(!!value);
-    Animated.timing(animatedValue, {
-      toValue: value ? 18 : 2,
-      duration: 200,
-      useNativeDriver: true,
-    }).start();
-  }, [value, cValue]);
-
-  const toggleBu = (e: GestureResponderEvent) => {
-    onClick?.(e);
-    !isControlled && setValue((v) => !v);
-  };
-
-  return (
-    <TouchableWithoutFeedback onPress={(e) => toggleBu(e)}>
-      <View style={[styles.container, { backgroundColor: value ? trackOnColor : trackOffColor }]}>
-        <Animated.View style={[styles.thumb, { transform: [{ translateX: thumbTranslateX }] }]}></Animated.View>
-      </View>
-    </TouchableWithoutFeedback>
-  );
-};
-
-Bu.defaultProps = defaultProps;
-
-const styles = StyleSheet.create({
-  container: {
-    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 Bu;

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

@@ -1,21 +0,0 @@
-import { GestureResponderEvent } from "react-native";
-import { lightColor } from "@xhs/reds-token-next";
-
-export interface RedsBu {
-  value?: boolean;
-  defaultValue?: boolean;
-  disabled?: boolean;
-  onClick?: (event: GestureResponderEvent) => void;
-  onChange?: (value: boolean) => void;
-  trackOnColor?: string;
-  trackOffColor?: string;
-}
-
-export const defaultProps: RedsBu = {
-  defaultValue: false,
-  disabled: false,
-  onClick: (event: GestureResponderEvent) => {},
-  onChange: (value: boolean) => {},
-  trackOnColor: lightColor.Primary,
-  trackOffColor: lightColor.Fill2,
-};

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

@@ -1,12 +0,0 @@
-import React from "react";
-import { describe } from "vitest";
-import { redsBench } from "~root/utils/redsBench";
-import { Bu } from "@xhs/reds-rn-next";
-import { render, fireEvent } from "@testing-library/react-native";
-import { Text } from "react-native";
-
-describe("render", () => {
-  redsBench("base", async () => {
-    render(<Bu></Bu>);
-  });
-});

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

@@ -1,18 +0,0 @@
-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 Bu from "../index";
-
-describe("Bu", () => {
-  it(":base", async () => {
-    let isOn = false;
-    const wrapper = render(<Bu onChange={(v) => (isOn = v)}></Bu>);
-    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);
-  });
-});