doc(SearchInputBar): 重构搜索栏文档

nullptr-z · xingyuefeng · commit 49999c9b764a · 2023-01-06T15:19:16.000+08:00
diff --git a/packages/core/src/SearchInputBar/README.md b/packages/core/src/SearchInputBar/README.md
@@ -1,20 +1,21 @@
-SearchInputBar 动作面板
+SearchInputBar 搜索栏
 ---
 
 可用于用户输入搜索信息
 
-![](https://user-images.githubusercontent.com/66067296/140004397-65ffc69e-a79f-425d-9d75-2928c125e5c8.gif)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
+<!-- ![](https://user-images.githubusercontent.com/66067296/140004397-65ffc69e-a79f-425d-9d75-2928c125e5c8.gif) -->
+<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
 
 
 ### 基础示例
-
-```jsx
-import { Fragment, useState } from 'react';
+```jsx  mdx:preview
+import React, { useState } from 'react';
 import { SearchInputBar } from '@uiw/react-native';
+
 function Demo() {
+  console.log('1')
   const [value, setValue] = useState('')
   return (
-    <Fragment>
       <SearchInputBar
         onChangeText={setValue}
         onClear={()=>setValue('')}
@@ -25,73 +26,42 @@ function Demo() {
           }
         }}
       />
-    </Fragment>
-  );
+  )
 }
+export default Demo
 ```
 
-### 一直显示右侧按钮 && 自定义placeholder && 自定右侧搜索内容
+### 自定义搜索按钮
+```jsx  mdx:preview
+import React, { useState } from 'react';
+import SearchInputBar from '@uiw/react-native/lib/SearchInputBar';
 
-```jsx
-import { Fragment, useState } from 'react';
-import { SearchInputBar } from '@uiw/react-native';
 function Demo() {
   const [value, setValue] = useState('')
   return (
-    <Fragment>
       <SearchInputBar
         onChangeText={setValue}
         onClear={()=>setValue('')}
         value={value}
         placeholder="请输入搜索关键字"
-        searchRender={<View style={styles.search}><Text>搜索</Text></View>}
+        searchRender={<div style={{ display:'flex', alignItems:'center' }}><label>搜索</label></div>}
         actionName="搜一下"
         showActionButton
-        button={{
-          onPress() {
-            // 点击搜索按钮触法
-          }
-        }}
       />
-    </Fragment>
-  );
+  )
 }
+export default Demo
 ```
 
-### 键盘不收起来
-
-**注意: 每层```ScrollView```都要写```keyboardShouldPersistTaps="always"```**
-
-```jsx
-import { Fragment, useState } from 'react';
-import { SearchInputBar } from '@uiw/react-native';
-function Demo() {
-  const [value, setValue] = useState('')
-  return (
-    <ScrollView keyboardShouldPersistTaps="always" >
-      <SearchInputBar
-        onChangeText={setValue}
-        onClear={()=>setValue('')}
-        value={value}
-        showActionButton
-        button={{
-          onPress() {
-            // 点击搜索按钮触法
-          }
-        }}
-      />
-    </ScrollView>
-  );
-}
-```
 
 ### 获取输入框 Ref
+```jsx  mdx:preview
+import React, { useState, Fragment, useRef } from 'react';
+import { SearchInputBar, Button } from '@uiw/react-native';
 
-```jsx
-import { Fragment, useRef } from 'react';
-import { SearchInputBar } from '@uiw/react-native';
 function Demo() {
   const inputRef = useRef()
+  const [value, setValue] = useState('')
   return (
     <Fragment>
       <SearchInputBar
@@ -113,39 +83,32 @@ function Demo() {
           console.log(inputRef.current.inputRef)
         }}
       >获取 输入框 Ref</Button>
-    </Fragment>
-  );
+   </Fragment>
+  )
 }
+export default Demo
 ```
 
 ### Props
 **注意: 组件继承了```TextInput```属性**
-```ts
+
+```js
 import { TextInputProps,StyleProp,ViewStyle } from 'react-native';
 import { ButtonProps,IconsProps } from '@uiw/react-native'
+```
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|-----|------|
+| containerStyle | 容器样式 | StyleProp<ViewStyle> | - |
+| button | 右侧按钮 | ButtonProps | - |
+| actionName | 右侧按钮文案 | string | - |
+| showActionButton | 是否一直显示右侧按钮 null = 永不显示 | `boolean` \| `null` | - |
+| searchIcon | 搜索图标Icon参数 参考Icon组件 | IconsProps | - |
+| onSearch | 点击搜索图标时触发事件 | Function | - |
+| closeIcon | 清除图标Icon参数 参考Icon组件 | IconsProps | - |
+| onClear | 点击清除图标时触发事件 | Function | - |
+| searchRender | 自定义搜索 | React.ReactNode | - |
+| inputStyle | 输入框TextInput样式 | TextStyle | - |
+| loading | loading加载 | any | - |
+
 
-export interface SearchInputBarProps extends TextInputProps {
-  /** 容器样式 */
-  containerStyle?: StyleProp<ViewStyle>;
-  /** 右侧按钮 */
-  button?: ButtonProps;
-  /** 右侧按钮文案 */
-  actionName?: string;
-  /** 是否一直显示右侧按钮 null = 永不显示 */
-  showActionButton?: boolean | null;
-  /** 搜索图标Icon参数 参考Icon组件 */
-  searchIcon?: IconsProps;
-  /** 点击搜索图标时触发事件 */
-  onSearch?: Function;
-  /** 清除图标Icon参数 参考Icon组件 */
-  closeIcon?: IconsProps;
-  /** 点击清除图标时触发事件 */
-  onClear?: Function;
-  /** 自定义搜索 */
-  searchRender?: JSX.Element;
-  /** 输入框TextInput样式 */ 
-  inputStyle?: TextStyle
-  /** loading加载 */
-  loading?: any
-}
-```
diff --git a/packages/core/src/Tooltip/README.md b/packages/core/src/Tooltip/README.md
@@ -3,26 +3,29 @@ Tooltip 工具提示
 
 当用户点击元素时，工具提示将显示信息。
 
-![](https://user-images.githubusercontent.com/57083007/146734166-271ec118-69b6-437a-885e-803e435cc05b.gif)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
+<!-- ![](https://user-images.githubusercontent.com/57083007/146734166-271ec118-69b6-437a-885e-803e435cc05b.gif) -->
+<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
 
 ### 基础示例
 
-```jsx
+```jsx  mdx:preview
+import React, { useState } from 'react';
 import { Tooltip } from '@uiw/react-native';
 
-
 function Demo() {
   return (
-    <Tooltip title='我是一个文本'>
-      <Text>我是一个文本</Text>
+    <Tooltip title={<label style={{ wordBreak: "keep-all" }}>我是一个文本</label>}>
+        我是一个文本1
     </Tooltip>
   );
 }
+export default Demo
 ```
 
-### 使用 自定义提示内容
+### 自定义提示内容
 
-```jsx
+```jsx  mdx:preview
+import React, { useState } from 'react';
 import { Tooltip, Icon } from '@uiw/react-native';
 
 function Demo() {
@@ -31,44 +34,35 @@ function Demo() {
       backgroundColor="pink"
       width={30}
       height={30}
-      title={(<View>
-        <Text>我是一个苹果</Text>
-        <Icon name='apple' color="#fff" />
-    </View>)}
+      title={(
+        <div>
+          <label style={{ wordBreak: "keep-all" }}>我是一个苹果</label>
+          <Icon name='apple' color="#fff" />
+        </div>
+     )}
     >
       <Icon name='apple' color="red" />
     </Tooltip>
   );
 }
+export default Demo
 ```
 
-### Tooltip Props
+### Props
 
-```ts
+```js
 import { ModalProps } from 'react-native';
-
-export interface TooltipProps extends ModalProps {
-  /** cloud 元素 */
-  title: React.ReactNode,
-  /** 子元素 */
-  children: JSX.Element,
-  /** 点击类型 */
-  toggleAction?: 'onPress' | 'onLongPress' | 'onPressIn' | 'onPressOut',
-  /** 高度 */
-  height?: number | 'auto',
-  /** 宽度 */
-  width?: number | 'auto',
-  /** 背景色 */
-  backgroundColor?: string,
-  /** 圆角大小 */
-  borderRadius?: number,
-  /** 
-  * 打开时触发
-  */
-  onOpen?: Function,
-  /** 
-  * 关闭时触发
-  */
-  onClose?: Function,
-}
 ```
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|-----|------|
+| title | cloud 元素 | React.ReactNode | - |
+| children | 子元素 | JSX.Element | - |
+| toggleAction | 点击类型 | `onPress` \| `onLongPress` \| `onPressIn` \| `onPressOut` | - |
+| height | 高度 | number \| `auto` | - |
+| width | 宽度 | number \| `auto` | - |
+| backgroundColor | 背景色 | string | - |
+| borderRadius | 圆角大小 | number | - |
+| onOpen | 打开时触发 | Function | - |
+| onClose | 关闭时触发 | Function | - |
+
