Merge branch 'dev' of https://github.com/uiwjs/react-native-uiw into dev

uiwjs · Mar 2, 2023 · d6a36be · d6a36be
2 parents 629a5b0 + 5200131
commit d6a36be
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 18 deletions.
diff --git a/packages/core/src/Calendar/README.md b/packages/core/src/Calendar/README.md
@@ -136,7 +136,7 @@ export default CalendarView
 ### 默认value值
 
 ```jsx mdx:preview&background=#bebebe29
-import React,{Component} from 'react';
+import React,{ Component, useState} from 'react';
 import { View,Text } from 'react-native';
 import { Calendar } from '@uiw/react-native';
 import Layout, { Container }  from '../Layout';

diff --git a/packages/core/src/CardCollapse/README.md b/packages/core/src/CardCollapse/README.md
@@ -31,7 +31,6 @@ function Demo() {
   }
     return (
     <ScrollView style={{ flex: 1 }}>
-      <Header description={'基本使用'} />
       <CardCollapse
        isCollapsed={true}//是否折叠
         disablePresses={true}//卡片是否可以点击
@@ -78,7 +77,6 @@ function Demo() {
   }
     return (
     <ScrollView style={{ flex: 1 }}>
-      <Header description={'基本使用'} />
       <CardCollapse
        isCollapsed={false}//是否折叠
         disablePresses={true}//卡片是否可以点击
@@ -124,7 +122,6 @@ function Demo() {
   }
     return (
     <ScrollView style={{ flex: 1 }}>
-      <Header description={'基本使用'} />
       <CardCollapse
         isCollapsed={true}//是否折叠
         disablePresses={true}//卡片是否可以点击

diff --git a/packages/core/src/Drawer/README.md b/packages/core/src/Drawer/README.md
@@ -2,7 +2,6 @@ Drawer 抽屉
 ---
 
 
-
 用于在屏幕边缘显示应用导航等内容的面板。
 
 ### 基础示例
@@ -116,7 +115,7 @@ function Demo() {
 export default Demo
 
 ```
-### 点击遮罩层是否允许关闭
+### 禁用点击遮罩层关闭
 
 ```jsx mdx:preview&background=#bebebe29
 import  React, { useState } from 'react';
@@ -132,7 +131,6 @@ function Demo() {
         onChange={(isOpen) => setVisible(isOpen)}
         drawerHeight={10}
         maskClosable={false}
-        drawerBackgroundColor='red'
       >
         <View>
           <Text>点击遮罩层不允许关闭</Text>
@@ -145,6 +143,64 @@ function Demo() {
 export default Demo
 
 ```
+
+### 自定义遮罩层样式
+
+```jsx mdx:preview&background=#bebebe29
+import React, { useState } from 'react';
+import { View, Text } from 'react-native';
+import { Drawer, Button } from '@uiw/react-native';
+
+function Demo() {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Drawer
+        isOpen={visible}
+        onChange={(isOpen) => setVisible(isOpen)}
+        style={{ backgroundColor:'#fff5', borderRadius: '0px 10px 10px 0px'}}
+      >
+        <View>
+          <Text>左边打开抽屉内容</Text>
+        </View>
+      </Drawer>
+      <Button onPress={() => setVisible(!visible)}>左边打开抽屉</Button>
+    </>
+  );
+}
+
+export default Demo
+
+```
+
+### 内容居中
+```jsx mdx:preview&background=#bebebe29
+import React, { useState } from 'react';
+import { View, Text } from 'react-native';
+import { Drawer, Button } from '@uiw/react-native';
+
+function Demo() {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Drawer
+        isOpen={visible}
+        onChange={(isOpen) => setVisible(isOpen)}
+        style={{ justifyContent: 'center', textAlign: 'center' }}
+      >
+        <View>
+          <Text>内容居中</Text>
+        </View>
+      </Drawer>
+      <Button onPress={() => setVisible(!visible)}>内容居中</Button>
+    </>
+  );
+}
+
+export default Demo
+
+```
+
 ### 抽屉覆盖全屏
 
 - 可查看 [react-native-root-siblings](https://www.npmjs.com/package/react-native-root-siblings) 文档

diff --git a/packages/core/src/Input/README.md b/packages/core/src/Input/README.md
@@ -56,7 +56,6 @@ import  { Input }  from '@uiw/react-native';
  class BasicInputExample extends Component {
   render() {
     return <View>
-      <Text>禁用输入框</Text>
       <Input  disabled/>
     </View>
   }
@@ -73,7 +72,6 @@ import  { Input }  from '@uiw/react-native';
  class BasicInputExample extends Component {
   render() {
     return <View>
-      <Text>禁用输入框</Text>
       <Input  maxLength='5'/>
     </View>
   }
@@ -90,7 +88,6 @@ import  { Input  }  from '@uiw/react-native';
 
 const Demo = () => {
   return <View>
-    <Text>清除按钮</Text>
     <Input clear  />
   </View>
 }
@@ -107,7 +104,6 @@ import  { Input  }  from '@uiw/react-native';
 
 const Demo = () => {
   return <View>
-    <Text>每次输入清除内容</Text>
     <Input clearText={true}  />
   </View>
 }

diff --git a/packages/core/src/Input/index.tsx b/packages/core/src/Input/index.tsx
@@ -190,7 +190,7 @@ const inputStyles = StyleSheet.create({
     color: '#000',
     backgroundColor: 'transparent',
     paddingVertical: 0,
-    paddingTop: 5,
+    paddingTop: 0,
   },
   always: {
     borderWidth: 1,

diff --git a/packages/core/src/List/Item.tsx b/packages/core/src/List/Item.tsx
@@ -88,7 +88,7 @@ export default class ListItem extends React.PureComponent<ListItemProps> {
 
 const styles = StyleSheet.create({
   warpper: {
-    backgroundColor: '#fff',
+    // backgroundColor: '#fff',
   },
   border: {
     borderBottomWidth: StyleSheet.hairlineWidth,

diff --git a/packages/core/src/List/README.md b/packages/core/src/List/README.md
@@ -31,18 +31,18 @@ export default Demo
 
 ```
 
-### 设置头部
+### 设置标题
 
 ```jsx mdx:preview&background=#bebebe29
-
 import { View, Text } from 'react-native';
 import { List } from '@uiw/react-native';
 import React from "react"
 
 export default function Demo() {
   return (
     <List
-      title='这是头部，设置头部设置头部'
+      title='今日股市'
+      titleLabelStyle={{ fontSize: '20px' }}
       data={[
         { date: '8月12日', time: '18:25', orderCode: 'SO18081200005', transCode: '123456', weight: '69.5Kg', money: '+241.00元', type: '收入' },
         { date: '8月10日', time: '12:01', orderCode: 'SO18081000004', transCode: '123789', weight: '968.6Kg', money: '+8834.00元', type: '收入' },
@@ -67,9 +67,9 @@ export default function Demo() {
 
 ```jsx mdx:preview&background=#bebebe29
 
+import React from "react"
 import { View, Text } from 'react-native';
 import { List } from '@uiw/react-native';
-import React from "react"
 
 export default function Demo() {
   return (
@@ -181,6 +181,7 @@ export default function Demo() {
 | `renderItem` | 当使用 `data` 时，可以用 `renderItem` 自定义渲染列表项 | ({item}) => { } | - |
 | `title` | 标题 | React.ReactNode | - |
 | `titleStyle` | 当设置 `title` 参数之后可以设置其标题容器样式。| ViewStyle | - |
+| `titleLabelStyle` | 设置标题文字器样式。| ViewStyle | - |
 | `horizontal` | 设置为 `true` 则变为水平布局模式。(`flat=true` 支持) | Boolean | `false` |
 | `numColumns` | 多列布局只能在非水平模式下使用，即必须是 `horizontal={false}`。此时组件内元素会从左到右从上到下按 `Z` 字形排列，类似启用了 `flexWrap` 的布局。组件内元素必须是等高的——暂时还无法支持瀑布流布局。(`flat=true` 支持) | Number | - |
 | `ListHeaderComponent` | 呈现在列表的顶部。如果设置了 `title` 标题，这个参数将失效  | ReactNode | - |

diff --git a/packages/core/src/List/index.tsx b/packages/core/src/List/index.tsx
@@ -35,6 +35,7 @@ export interface ListProps extends Omit<FlatListProps<{}>, 'renderItem'> {
    */
   extra?: React.ReactNode;
   titleStyle?: StyleProp<ViewStyle>;
+  titleLabelStyle?: StyleProp<ViewStyle>;
   paddingLeft?: ListItemProps['paddingLeft'];
   size?: ListItemProps['size'];
 }
@@ -88,6 +89,7 @@ export default class List extends React.PureComponent<ListProps, ListState> {
       data,
       children,
       titleStyle,
+      titleLabelStyle,
       paddingLeft,
       flat,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -113,7 +115,7 @@ export default class List extends React.PureComponent<ListProps, ListState> {
         <View style={[{ paddingLeft, paddingVertical: 12 }, titleStyle]}>
           {typeof title === 'string' ? (
             // eslint-disable-next-line
-            <Text style={{ color: '#808080' }}>{title}</Text>
+            <Text style={[{ fontWeight: '500' }, titleLabelStyle]}>{title}</Text>
           ) : (
             <View>{title}</View>
           )}