feat(DragDrawer):增加自定义图标 & 文档更新 (#342)

Amber-Nan · 杨楠 · web-flow · commit e851f33494ec · 2021-11-24T16:29:57.000+08:00
* fix(Divider):优化 gutter属性不生效问题

* feat(Divider): 增加分割线标题的位置调整功能 &amp; 更新文档

* feat(Rating):增加自定义每项的提示信息 &amp; 更新文档

* feat(Rating):增加只读功能 &amp; 文档更新

* feat(Timeline): 增加改变时间轴内容相对位置功能 &amp; 文档更新

* style(Timeline):Update Readme.md img

* feat(Timeline):增加自定义图标 &amp; 文档更新

* feat(Timeline):优化自定义图标 &amp; 文档更新

* feat:新增Calendar 日历组件

* doc(website): Update Calendar  Readme.md

* feat(Calendar):增加农历及假期展示 &amp;&amp; 文档更新

* feat(Calendar):增加假日文字颜色

* feat(Calendar):左上角按钮增加自定义跳转功能&amp;文档更新

* feat(Calendar):优化农历假日及文字排版

* feat(Calendar):处理文字长度

* fix(Calendar):优化安卓文字排版

* feat(Calendar):增加农历详情展示 &amp; 文档更新

* feat(DragDrawer):新增DragDrawer 拖曳抽屉 &amp; 文档更新

* doc(website): 增加DragDrawer目录

* feat(DragDrawer):增加自定义图标 &amp; 文档更新

Co-authored-by: 杨楠 &lt;yangnan@nihaosi.com&gt;
diff --git a/example/examples/src/routes/DragDrawer/index.tsx b/example/examples/src/routes/DragDrawer/index.tsx
@@ -1,6 +1,6 @@
 import React, {useState, Fragment} from 'react';
-import {View, Text, Dimensions} from 'react-native';
-import {DragDrawer, Card, Button} from '@uiw/react-native';
+import {View, Text} from 'react-native';
+import {DragDrawer, Card, Icon} from '@uiw/react-native';
 import Layout, {Container} from '../../Layout';
 import {ComProps} from '../../routes';
 const {Header, Body, Footer} = Layout;
@@ -11,7 +11,11 @@ export default function DragDrawerView({route}: DragDrawerViewProps) {
   const title = route.params.title;
   return (
     <Fragment>
-      <DragDrawer>
+      <DragDrawer
+        drawerHeight={350}
+        // drawerBackgroundColor='lightblue' //抽屉背景
+        // icon={<Icon name="smile" fill="red" size={30} />} //自定义拖曳图标
+      >
         <View>
           <Text>按住图标可上下拖曳抽屉</Text>
         </View>
diff --git a/packages/core/src/DragDrawer/README.md b/packages/core/src/DragDrawer/README.md
@@ -1,16 +1,16 @@
 DragDrawer 拖曳抽屉
 ---
 
-![](https://user-images.githubusercontent.com/66067296/143007086-5594c9ee-95cc-4802-9434-cc4041a8dae7.gif)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
+![](https://user-images.githubusercontent.com/66067296/143187302-bee614b4-7799-49d1-9cab-470ad8228372.gif)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
 
 可自定义拖曳抽屉高度。
 
 ### 基础示例
 
 ```jsx
 import React, { useState, Fragment } from 'react';
-import { View, Text, Dimensions } from 'react-native';
-import { DragDrawer, Card, Button } from '@uiw/react-native';
+import { View, Text } from 'react-native';
+import { DragDrawer, Card, Icon } from '@uiw/react-native';
 import Layout, { Container } from '../../Layout';
 import { ComProps } from '../../routes';
 const { Header, Body, Footer } = Layout;
@@ -21,27 +21,36 @@ export default function DragDrawerView({ route }: DragDrawerViewProps) {
   const title = route.params.title;
   return (
     <Fragment>
-      <DragDrawer>
+      <DragDrawer
+        drawerHeight={350}
+      // drawerBackgroundColor='lightblue' //抽屉背景
+      // icon={<Icon name="smile" fill="red" size={30} />} //自定义拖曳图标
+      >
         <View>
           <Text>按住图标可上下拖曳抽屉</Text>
         </View>
       </DragDrawer>
-      <Container >
+      <Container>
         <Layout>
           <Header title={title} description={description} />
-          <Body >
+          <Body>
+            <Card title="下边抽屉可上下拖曳">
+              <Text>下边抽屉可上下拖曳</Text>
+            </Card>
           </Body>
           <Footer />
         </Layout>
       </Container>
     </Fragment>
   );
 }
+
 ```
 
 ### props
 
 | 参数 | 说明 | 类型 | 默认值 |
 |------|------|-----|------|
 | `drawerHeight` | 抽屉高度 | Number | `300` |
-| `drawerBackgroundColor` | 指定抽屉背景色 | String | `#fff` |
+| `drawerBackgroundColor` | 指定抽屉背景色 | String | `#fff` |
+| `icon` | 自定义图标 | `IconsName | React.ReactElement | React.ReactNode` |  |
diff --git a/packages/core/src/DragDrawer/index.tsx b/packages/core/src/DragDrawer/index.tsx
@@ -1,5 +1,5 @@
 import { number } from 'prop-types';
-import React, { useState, useRef, useEffect, useMemo, Fragment } from 'react';
+import React, { useState, useRef } from 'react';
 import {
   StyleSheet,
   TouchableOpacity,
@@ -21,25 +21,22 @@ const DEVICE_WIDTH = Dimensions.get('window').width;
 const DEVICE_HEIGHT = Dimensions.get('window').height;
 
 export interface DragDrawerProps extends ViewProps {
+  /** 抽屉高度 */
   drawerHeight?: number;
+  /** 抽屉颜色 */
   drawerBackgroundColor?: string;
+  /** 自定义图标 */
+  icon?: IconsName | React.ReactElement | React.ReactNode;
   children?: React.ReactNode;
 }
-export interface DragDrawerProps extends ViewProps {}
+
 function DragDrawer(props: DragDrawerProps) {
-  const { drawerBackgroundColor = '#fff', drawerHeight = 300, children } = props;
+  const { drawerBackgroundColor = '#fff', drawerHeight = 300, children, icon } = props;
 
-  const [zIndexValue, setZIndexValue] = useState(0);
   const [animatedViewHeight, setAnimatedViewHeight] = useState(new Animated.Value(drawerHeight));
   const [viewHeight, setViewHeight] = useState(drawerHeight);
   const [showAnimate, setShowAnimate] = useState(false);
 
-  const openDrawer = () => {
-    setZIndexValue(3002);
-  };
-  const closeDrawer = () => {
-    setZIndexValue(0);
-  };
   const dynamicDrawerStyles: any = {
     backgroundColor: drawerBackgroundColor,
     top: null,
@@ -48,6 +45,9 @@ function DragDrawer(props: DragDrawerProps) {
     width: '100%',
   };
 
+  /**
+   * 拖曳效果动画
+   *  */
   const panResponder = useRef(
     PanResponder.create({
       onMoveShouldSetPanResponder: () => true,
@@ -65,7 +65,6 @@ function DragDrawer(props: DragDrawerProps) {
           }, // 可选的异步监听函数
         )(evt, gestureState);
       },
-
       onPanResponderRelease: (e, gestureState) => {
         let values = DEVICE_HEIGHT + 30 - gestureState.moveY;
         if (gestureState.dy >= 0) {
@@ -104,30 +103,35 @@ function DragDrawer(props: DragDrawerProps) {
     }),
   ).current;
 
+  /**
+   * 自定义图标
+   *  */
+  const IconCustom = (icon?: IconsName | React.ReactElement | React.ReactNode) => {
+    if (icon) {
+      return <>{typeof icon === 'string' ? <Icon name={icon as IconsName} size={25} color="#8F8F8F" /> : icon}</>;
+    } else {
+      return <Icon name="minus" size={25} color="#8F8F8F" />;
+    }
+  };
+
   return (
-    <Fragment>
-      <Animated.View
-        style={[
-          styles.drawer,
-          dynamicDrawerStyles,
-          {
-            height: animatedViewHeight,
-          },
-        ]}
-        {...panResponder.panHandlers}
-      >
-        <Animated.View style={[styles.viewPosition]}>
-          <View style={{}}>
-            <TouchableOpacity activeOpacity={1}>
-              <View style={[styles.homeContainer]}>
-                <Icon name="minus" size={25} fill="#8F8F8F" />
-              </View>
-            </TouchableOpacity>
-          </View>
-        </Animated.View>
-        {children}
+    <Animated.View
+      style={[
+        styles.drawer,
+        dynamicDrawerStyles,
+        {
+          height: animatedViewHeight,
+        },
+      ]}
+      {...panResponder.panHandlers}
+    >
+      <Animated.View style={[styles.viewPosition]}>
+        <TouchableOpacity activeOpacity={1}>
+          <View style={[styles.homeContainer]}>{IconCustom(icon)}</View>
+        </TouchableOpacity>
       </Animated.View>
-    </Fragment>
+      {children}
+    </Animated.View>
   );
 }
 
@@ -136,7 +140,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#fff',
   },
   homeContainer: {
     width: 50,
@@ -153,17 +156,6 @@ const styles = StyleSheet.create({
     flex: 1,
     zIndex: 3004,
   },
-  positionFull: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-  },
-  overlay: {
-    backgroundColor: '#000',
-    zIndex: 3002,
-  },
 });
 
 export default DragDrawer;
