@xhsreds/reds-rn-next 0.1.2 → 0.1.4

package/src/components/Sheets/Sheets.tsx

@@ -1,45 +1,318 @@
-import React, { useState, useEffect } from "react";
-import { View, TouchableWithoutFeedback, Text } from "react-native";
-import { RedsSheets, SheetsDefaultProps } from "./interface/index";
+import React, { useState, useRef, useMemo, useEffect } from "react";
+import { alwaysColor } from "@xhs/reds-token-next";
+import {
+  View,
+  TouchableWithoutFeedback,
+  Text,
+  Animated,
+  LayoutChangeEvent,
+  PanResponder,
+  Dimensions,
+} from "react-native";
+import {
+  RedsSheets,
+  SheetsDefaultProps,
+  SheetsMaskMode,
+  SheetsType,
+  SheetsIconType,
+  SheetsActionType,
+  SheetsSize,
+} from "./interface/index";
 import { Portal } from "../Portal";
 import { useThemeColor } from "../ConfigProvider";
 import styles from "./styles";
+import { Button } from "../Button";
+import { Icon } from "../Icon";
+import { Close, ArrowLeft } from "@xhs/reder-icon-svg";
 
 const Sheets = (props: RedsSheets) => {
-  const { visible, onCancel, onConfirm, children, label } = props;
+  const {
+    visible,
+    onCancel,
+    onConfirm,
+    children,
+    label,
+    mask,
+    maskMode,
+    cancelType,
+    closeType,
+    cancelText,
+    closeText,
+    sheetsType,
+    cancel,
+    close,
+    iconType,
+    size,
+  } = props;
+
+  console.log("visible", visible);
 
   const themeColor = useThemeColor();
 
+  /**
+   * Sheets容器高度动画
+   */
+  const [sheetsHeight] = useState(new Animated.Value(0));
+
+  /**
+   * Sheets容器child内容高度
+   */
+  const childHeightRef = useRef(0);
+
+  /**
+   * 底部操作区高度
+   */
+  const [actionHeight, setActionHeight] = useState(0);
+
+  /**
+   * 标题区域高度
+   */
+  const [labelHeight, setLabelHeight] = useState(0);
+
+  /**
+   * child高度
+   */
+  const [childHeight, setChildHeight] = useState(0);
+
+  /**
+   * 是否展示标题
+   */
+  const showLabel = useMemo(() => {
+    return sheetsType === SheetsType.normal && (cancel || close || label);
+  }, [sheetsType, cancel, close, label]);
+
+  /**
+   * 是否展示底部操作栏
+   */
+  const showAction = useMemo(() => {
+    return sheetsType === SheetsType.action && (cancel || close);
+  }, [sheetsType, cancel, close]);
+
+  /**
+   * 关闭Sheets
+   */
   const handleMask = () => {
+    handleClose();
     onCancel?.();
   };
 
+  /**
+   * 确定 or 完成
+   */
   const handleConfirm = () => {
+    handleClose();
     onConfirm?.();
   };
 
+  /**
+   * 返回 or 取消
+   */
   const handleCancel = () => {
+    handleClose();
     onCancel?.();
   };
 
+  /**
+   * 计算子容器高度
+   * @param evt LayoutChangeEvent
+   */
+  const handleLayout = (evt: LayoutChangeEvent) => {
+    const { height } = evt.nativeEvent.layout;
+    setChildHeight(height);
+  };
+
+  /**
+   * 计算底部操作区高度
+   * @param evt
+   */
+  const handleActionLayout = (evt: LayoutChangeEvent) => {
+    const { height } = evt.nativeEvent.layout;
+    setActionHeight(height);
+  };
+
+  /**
+   * 计算标题高度
+   * @param evt
+   */
+  const handleLabelLayout = (evt: LayoutChangeEvent) => {
+    const { height } = evt.nativeEvent.layout;
+    setLabelHeight(height);
+  };
+
+  /**
+   * 外层容器高度变化
+   */
+  useEffect(() => {
+    const factHeight = actionHeight + labelHeight + childHeight + 34;
+    const fullScreenHeight = Dimensions.get("screen").height - 34;
+    const halfScreenHeight = Math.floor(fullScreenHeight / 2) - 34;
+    const threeQuaterScreenHeight = Math.floor(fullScreenHeight * 0.75) - 34;
+    const calculateHeight =
+      sheetsType !== SheetsType.dragable
+        ? size === SheetsSize.auto
+          ? factHeight
+          : size === SheetsSize.half
+            ? halfScreenHeight
+            : size === SheetsSize.threeQuater
+              ? threeQuaterScreenHeight
+              : fullScreenHeight
+        : factHeight;
+    childHeightRef.current = calculateHeight;
+    Animated.timing(sheetsHeight, {
+      toValue: calculateHeight,
+      duration: 100, // 动画持续时间 (毫秒)
+      useNativeDriver: false, // `height` 不支持 useNativeDriver
+    }).start();
+  }, [actionHeight, labelHeight, childHeight]);
+
+  /**
+   * 关闭容器取消动画
+   * @param evt LayoutChangeEvent
+   */
+  const handleClose = () => {
+    Animated.timing(sheetsHeight, { toValue: 0, useNativeDriver: false }).start();
+    sheetsHeight.setValue(0);
+  };
+
+  /**
+   * 手势监听
+   */
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: (event, gestureState) => {
+        console.log("childHeightRef.current", childHeightRef.current);
+        const fullScreenHeight = Dimensions.get("screen").height - 34;
+        const halfScreenHeight = Math.floor(fullScreenHeight / 2) - 34;
+        const threeQuaterScreenHeight = Math.floor(fullScreenHeight * 0.75) - 34;
+        const maxHeight =
+          size === SheetsSize.auto
+            ? fullScreenHeight
+            : size === SheetsSize.half
+              ? halfScreenHeight
+              : size === SheetsSize.threeQuater
+                ? threeQuaterScreenHeight
+                : fullScreenHeight;
+        const newHeight = Math.min(
+          maxHeight,
+          Math.max(childHeightRef.current, childHeightRef.current - gestureState.dy),
+        );
+        sheetsHeight.setValue(newHeight);
+      },
+    }),
+  ).current;
+
+  /** icon wrapper */
+  const iconWrapper = (type: string) => {
+    return iconType === SheetsIconType.bg ? (
+      <TouchableWithoutFeedback onPress={handleCancel}>
+        <View style={[styles.iconBg, { backgroundColor: themeColor.Fill1 }]}>
+          {type === "confirm" ? (
+            <Icon icon={Close} fill={themeColor.Bg} size={20} onClick={handleCancel} />
+          ) : (
+            <Icon icon={ArrowLeft} fill={themeColor.Bg} size={20} onClick={handleCancel} />
+          )}
+        </View>
+      </TouchableWithoutFeedback>
+    ) : type === "confirm" ? (
+      <Icon icon={Close} fill={themeColor.Title} size={20} onClick={handleCancel} />
+    ) : (
+      <Icon icon={ArrowLeft} fill={themeColor.Title} size={20} onClick={handleCancel} />
+    );
+  };
+
+  /** block占位 */
+  const Block = () => {
+    return <View style={styles.block} />;
+  };
+
   return visible ? (
     <Portal>
-      <View style={styles.container}>
-        <TouchableWithoutFeedback onPress={handleMask}>
-          <View style={styles.mask}></View>
-        </TouchableWithoutFeedback>
-        <View style={[styles.picker, { backgroundColor: themeColor.Bg2 }]}>
-          <View style={[styles.labelContainer, { backgroundColor: themeColor.Bg2 }]}>
-            <TouchableWithoutFeedback onPress={handleCancel}>
-              <Text style={[styles.cancel, { color: themeColor.Description }]}>取消</Text>
-            </TouchableWithoutFeedback>
-            <Text style={[styles.label, { color: themeColor.Title }]}>{label}</Text>
-            <TouchableWithoutFeedback onPress={handleConfirm}>
-              <Text style={[styles.confirm, { color: themeColor.Primary }]}>确定</Text>
-            </TouchableWithoutFeedback>
-          </View>
-          {children}
-        </View>
+      <View style={styles.wrapper}>
+        {mask ? (
+          <TouchableWithoutFeedback onPress={handleMask}>
+            <View
+              style={[
+                styles.mask,
+                { backgroundColor: maskMode === SheetsMaskMode.light ? alwaysColor.MaskBg : "rgba(0,0,0,0.8)" },
+              ]}
+            ></View>
+          </TouchableWithoutFeedback>
+        ) : (
+          <></>
+        )}
+        <Animated.View
+          style={[styles.picker, { backgroundColor: themeColor.Bg2 }, { height: sheetsHeight }]}
+          {...panResponder.panHandlers}
+        >
+          {/** normal */}
+          {showLabel ? (
+            <View style={[styles.labelContainer, { backgroundColor: themeColor.Bg2 }]} onLayout={handleLabelLayout}>
+              {cancel ? (
+                <TouchableWithoutFeedback onPress={handleCancel}>
+                  {cancelType === SheetsActionType.text ? (
+                    <Text style={[styles.cancel, { color: themeColor.Description }]}>{cancelText}</Text>
+                  ) : (
+                    iconWrapper("cancel")
+                  )}
+                </TouchableWithoutFeedback>
+              ) : (
+                <Block />
+              )}
+              {label ? <Text style={[styles.label, { color: themeColor.Title }]}>{label}</Text> : <></>}
+              {close ? (
+                <TouchableWithoutFeedback onPress={handleConfirm}>
+                  {closeType === SheetsActionType.text ? (
+                    <Text style={[styles.confirm, { color: themeColor.Primary }]}>{closeText}</Text>
+                  ) : (
+                    iconWrapper("confirm")
+                  )}
+                </TouchableWithoutFeedback>
+              ) : (
+                <Block />
+              )}
+            </View>
+          ) : (
+            <></>
+          )}
+
+          {/** 拖拽按钮 */}
+          {sheetsType === SheetsType.dragable ? (
+            <Animated.View style={[styles.dragableContainer]} {...panResponder.panHandlers}>
+              <View style={[styles.dragable, { backgroundColor: themeColor.Fill3 }]} />
+            </Animated.View>
+          ) : (
+            <></>
+          )}
+
+          <View onLayout={handleLayout}>{children}</View>
+
+          {/** action */}
+          {showAction ? (
+            <View style={[styles.actionContainer]} onLayout={handleActionLayout}>
+              {cancel ? (
+                <View style={styles.action}>
+                  <Button block onClick={handleCancel}>
+                    {cancelText}
+                  </Button>
+                </View>
+              ) : (
+                <></>
+              )}
+              {close ? (
+                <View style={styles.action}>
+                  <Button block onClick={handleConfirm} type="primary">
+                    {closeText}
+                  </Button>
+                </View>
+              ) : (
+                <></>
+              )}
+            </View>
+          ) : (
+            <></>
+          )}
+        </Animated.View>
       </View>
     </Portal>
   ) : (

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

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useState } from "react";
 import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
-import { Sheets, Button } from "@xhs/reds-rn-next";
+import { Sheets, Button, SheetsType } from "@xhs/reds-rn-next";
 
 const styles = StyleSheet.create({
   container: {
@@ -8,6 +8,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     paddingTop: 100,
     paddingBottom: 100,
+    backgroundColor: "#eee",
   },
   scrollView: {
     backgroundColor: "pink",
@@ -18,25 +19,201 @@ const styles = StyleSheet.create({
   },
 });
 
+const Children = () => {
+  return (
+    <View
+      style={{
+        height: 200,
+        backgroundColor: "pink",
+        width: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Text>这是一个默认sheet</Text>
+    </View>
+  );
+};
 export default function App() {
-  const [visible, setVisible] = useState(false);
-
-  const handleChange = () => {
-    setVisible(true);
-  };
+  const [visible1, setVisible1] = useState(false);
+  const [visible2, setVisible2] = useState(false);
+  const [visible3, setVisible3] = useState(false);
+  const [visible4, setVisible4] = useState(false);
+  const [visible5, setVisible5] = useState(false);
+  const [visible6, setVisible6] = useState(false);
+  const [visible7, setVisible7] = useState(false);
+  const [visible8, setVisible8] = useState(false);
+  const [visible9, setVisible9] = useState(false);
+  const [visible10, setVisible10] = useState(false);
+  const [visible11, setVisible11] = useState(false);
 
   return (
     <View style={styles.container}>
-      <Button onClick={handleChange}>打开sheets</Button>
+      <Button onClick={() => setVisible1(true)}>显示标题与关闭按钮</Button>
+      <Sheets
+        visible={visible1}
+        label={"标题"}
+        onCancel={() => setVisible1(false)}
+        onConfirm={() => setVisible1(false)}
+        cancel={false}
+        close={true}
+        closeType={SheetsType.SheetsActionType.icon}
+        mask={true}
+        maskMode={SheetsType.SheetsMaskMode.dark}
+      >
+        <Children />
+      </Sheets>
+
+      <Button onClick={() => setVisible2(true)}>显示返回按钮</Button>
+      <Sheets
+        visible={visible2}
+        label={"标题"}
+        onCancel={() => setVisible2(false)}
+        onConfirm={() => setVisible2(false)}
+        mask={true}
+        cancel={true}
+        close={true}
+        closeType={SheetsType.SheetsActionType.icon}
+        cancelType={SheetsType.SheetsActionType.icon}
+        maskMode={SheetsType.SheetsMaskMode.dark}
+      >
+        <Children />
+      </Sheets>
+
+      <Button onClick={() => setVisible3(true)}>显示圆形关闭按钮</Button>
+      <Sheets
+        visible={visible3}
+        onCancel={() => setVisible3(false)}
+        onConfirm={() => setVisible3(false)}
+        mask={true}
+        cancel={false}
+        close={true}
+        closeType={SheetsType.SheetsActionType.icon}
+        iconType={SheetsType.SheetsIconType.bg}
+        maskMode={SheetsType.SheetsMaskMode.dark}
+      >
+        <Children />
+      </Sheets>
+
+      <Button onClick={() => setVisible4(true)}>显示文字按钮</Button>
+      <Sheets
+        visible={visible4}
+        label={"标题"}
+        onCancel={() => setVisible4(false)}
+        onConfirm={() => setVisible4(false)}
+        mask={true}
+        cancel={true}
+        close={true}
+        closeType={SheetsType.SheetsActionType.text}
+        cancelType={SheetsType.SheetsActionType.text}
+        maskMode={SheetsType.SheetsMaskMode.dark}
+      >
+        <Children />
+      </Sheets>
+
+      <Button onClick={() => setVisible5(true)}>显示底部必选操作、无关闭按钮</Button>
+      <Sheets
+        visible={visible5}
+        label={"标题"}
+        onCancel={() => setVisible5(false)}
+        onConfirm={() => setVisible5(false)}
+        mask={false}
+        cancel={true}
+        close={true}
+        sheetsType={SheetsType.SheetsType.action}
+        cancelText={"暂不开启"}
+        closeText={"按钮"}
+        maskMode={SheetsType.SheetsMaskMode.dark}
+      >
+        <Children />
+      </Sheets>
+
+      <Button onClick={() => setVisible7(true)}>显示底部一个操作按钮</Button>
+      <Sheets
+        visible={visible7}
+        label={"标题"}
+        onCancel={() => setVisible7(false)}
+        onConfirm={() => setVisible7(false)}
+        mask={false}
+        cancel={false}
+        close={true}
+        sheetsType={SheetsType.SheetsType.action}
+        closeText={"按钮"}
+        maskMode={SheetsType.SheetsMaskMode.dark}
+      >
+        <Children />
+      </Sheets>
+
+      <Button onClick={() => setVisible6(true)}>可拖拽（不限制最大高度）</Button>
+      <Sheets
+        visible={visible6}
+        label={"标题"}
+        onCancel={() => setVisible6(false)}
+        onConfirm={() => setVisible6(false)}
+        mask={true}
+        sheetsType={SheetsType.SheetsType.dragable}
+        maskMode={SheetsType.SheetsMaskMode.light}
+      >
+        <Children />
+      </Sheets>
+
+      <Button onClick={() => setVisible8(true)}>可拖拽（限制最大高度是整个屏幕高度的50%）</Button>
+      <Sheets
+        visible={visible8}
+        label={"标题"}
+        onCancel={() => setVisible8(false)}
+        onConfirm={() => setVisible8(false)}
+        mask={true}
+        size={SheetsType.SheetsSize.half}
+        sheetsType={SheetsType.SheetsType.dragable}
+        maskMode={SheetsType.SheetsMaskMode.light}
+      >
+        <Children />
+      </Sheets>
+
+      <Button onClick={() => setVisible9(true)}>可拖拽（限制最大高度是整个屏幕高度的75%）</Button>
+      <Sheets
+        visible={visible9}
+        label={"标题"}
+        onCancel={() => setVisible9(false)}
+        onConfirm={() => setVisible9(false)}
+        mask={true}
+        size={SheetsType.SheetsSize.threeQuater}
+        sheetsType={SheetsType.SheetsType.dragable}
+        maskMode={SheetsType.SheetsMaskMode.light}
+      >
+        <Children />
+      </Sheets>
+
+      <Button onClick={() => setVisible10(true)}>可拖拽（限制最大高度是整个屏幕高度的100%）</Button>
+      <Sheets
+        visible={visible10}
+        label={"标题"}
+        onCancel={() => setVisible10(false)}
+        onConfirm={() => setVisible10(false)}
+        mask={true}
+        size={SheetsType.SheetsSize.full}
+        sheetsType={SheetsType.SheetsType.dragable}
+        maskMode={SheetsType.SheetsMaskMode.light}
+      >
+        <Children />
+      </Sheets>
+
+      <Button onClick={() => setVisible11(true)}>高度整个屏幕高度的50%</Button>
       <Sheets
-        visible={visible}
-        label={"默认Sheets"}
-        onCancel={() => setVisible(false)}
-        onConfirm={() => setVisible(false)}
+        visible={visible11}
+        label={"标题"}
+        onCancel={() => setVisible11(false)}
+        onConfirm={() => setVisible11(false)}
+        cancel={false}
+        close={true}
+        size={SheetsType.SheetsSize.half}
+        closeType={SheetsType.SheetsActionType.icon}
+        mask={true}
+        maskMode={SheetsType.SheetsMaskMode.dark}
       >
-        <View style={{ height: 100, width: "100%", display: "flex", justifyContent: "center", alignItems: "center" }}>
-          <Text>这是一个默认sheet</Text>
-        </View>
+        <Children />
       </Sheets>
     </View>
   );

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

@@ -10,11 +10,22 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性     | 描述           | 类型      | 默认值 |
-| -------- | -------------- | --------- | ------ |
-| label    | 标题           | string    |        |
-| visible  | 是否展示sheets | boolean   | false  |
-| children | sheets内容     | ReactNode |        |
+| 属性       | 描述           | 类型             | 默认值                |
+| ---------- | -------------- | ---------------- | --------------------- |
+| label      | 标题           | string           |                       |
+| mask       | 是否展示遮罩层 | boolean          | true                  |
+| maskMode   | 背景颜色类型   | SheetsMaskMode   | SheetsMaskMode.light  |
+| sheetsType | sheets类型     | SheetsType       | SheetsType.normal     |
+| cancel     | 返回按钮       | boolean          | true                  |
+| close      | 关闭按钮       | boolean          | true                  |
+| cancelType | 返回按钮类型   | SheetsActionType | SheetsActionType.icon |
+| closeType  | 确定按钮类型   | SheetsActionType | SheetsActionType.icon |
+| cancelText | 取消操作文案   | string           | 取消                  |
+| closeText  | 确定操作文案   | string           | 确定                  |
+| iconType   | icon 类型      | SheetsIconType   | SheetsIconType.normal |
+| size       | size           | SheetsSize       | SheetsSize.auto       |
+| visible    | 是否展示sheets | boolean          | false                 |
+| children   | sheets内容     | ReactNode        |                       |
 
 ### Events
 

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

@@ -1,6 +1,45 @@
 import { ReactNode } from "react";
+
+export const enum SheetsMaskMode {
+  light = "light",
+  dark = "dark",
+}
+
+export const enum SheetsType {
+  normal = "narmal",
+  dragable = "dragable",
+  action = "action",
+}
+
+export const enum SheetsActionType {
+  text = "text",
+  icon = "icon",
+}
+
+export const enum SheetsIconType {
+  bg = "bg",
+  normal = "normal",
+}
+
+export const enum SheetsSize {
+  auto = "auto",
+  half = "half",
+  full = "full",
+  threeQuater = "threeQuater",
+}
 export interface RedsSheets {
   label?: string;
+  mask?: boolean;
+  maskMode?: SheetsMaskMode;
+  sheetsType?: SheetsType;
+  cancel?: boolean;
+  close?: boolean;
+  cancelType?: SheetsActionType;
+  closeType?: SheetsActionType;
+  cancelText?: string;
+  closeText?: string;
+  iconType?: SheetsIconType;
+  size?: SheetsSize;
   onCancel: () => any;
   onConfirm: () => any;
   visible: boolean;
@@ -10,6 +49,17 @@ export interface RedsSheets {
 export interface RedsSheetsEvent {}
 export const SheetsDefaultProps = {
   label: "",
+  mask: true,
+  maskMode: SheetsMaskMode.light,
+  sheetsType: SheetsType.normal,
+  cancel: true,
+  close: true,
+  cancelType: SheetsActionType.icon,
+  closeType: SheetsActionType.icon,
+  cancelText: "取消",
+  closeText: "确定",
+  iconType: SheetsIconType.normal,
+  size: SheetsSize.auto,
   onCancel: () => {},
   onConfirm: () => {},
   visible: false,