Merge branch 'dev'

Author: ChenlingasMx

example/examples/src/routes/Form/index.tsx

@@ -75,16 +75,19 @@ const FormDemo = () => {
     },
     {
       type: 'search',
-      field: 'search',
-      name: '搜索',
+      field: 'project',
+      required: false,
+      name: '项目',
       options: [
-        {label: '上海', value: 1},
-        {label: '南京', value: 2},
+        {label: '测试系统管理', value: 1},
+        {label: '后台管理', value: 2},
       ],
       attr: {
-        labelInValue: true,
         showClear: true,
+        labelInValue: true,
       },
+      placeholder: '请输入',
+      validate: (val: any) => (!val ? '请输入项目' : ''),
     },
     {
       type: 'stepper',

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';

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}//卡片是否可以点击

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) 文档

packages/core/src/Form/README.md

@@ -285,7 +285,7 @@ export default FormComponent;
 | 参数 | 说明 | 类型 | 默认值 |
 |------|------|-----|------|
 | `field` | 字段名 | string | - |
-| `type` | 字段类型(默认继承了react-native-uiw中的 input | textArea | slider | rate | radio | search | switch | checkBox | stepper ｜ cardList   ) | string | - |
+| `type` | 字段类型(`input` \| `textArea`  \| `slider` \| `rate` \| `radio` \| `search`\| `switch`\| `checkBox`\| `stepper`\| `cardList`) | string | - |
 | `name` | 标签名 | string | - |
 | `validate` | 验证规则 | RulesOption['validate'] | - |
 | `options` | 集合 | Array<{ label: string; value: KeyType }> | - |

packages/core/src/Form/formItems.tsx

@@ -20,7 +20,7 @@ const FormItems = ({ schema = [] }: Pick<FormProps, 'schema'>) => {
 
   const change = (field: KeyType, value: unknown) => {
     updateStore?.({ store: { ...store, [field]: value } });
-    watch[field]?.(value);
+    watch && watch[field]?.(value);
   };
 
   const _renderComponent = (v: FormItemsProps) => {

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>
 }

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,

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,

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 | - |