doc(ActionSheet): 重构动作面板文档

Author: nullptr-z

packages/core/src/ActionSheet/README.md

@@ -3,34 +3,36 @@ ActionSheet 动作面板
 
 该组件提供了一种动作面板, 底部缓缓出现
 
-![](https://user-images.githubusercontent.com/57083007/137631382-70df5dd3-0200-4ddb-bd11-3578ee99d032.gif)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
+<!-- ![](https://user-images.githubusercontent.com/57083007/137631382-70df5dd3-0200-4ddb-bd11-3578ee99d032.gif) -->
+<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
 
 ### 基础示例
+```jsx  mdx:preview
+import React, { Fragment, useState } from 'react';
+import { Button, ActionSheet }  from '@uiw/react-native';
+import { ActionSheetItem } from '@uiw/react-native/lib/ActionSheet'
 
-```jsx
-import { Fragment, useState } from 'react';
-import { ActionSheet, Button,ActionSheetItem } from '@uiw/react-native';
 function Demo() {
   const [visible, setVisible] = useState(false)
   return (
     <Fragment>
      <Button onPress={()=>setVisible(true)}>打开 ActionSheet</Button>
-      <ActionSheet
-        visible={visible}
-      >
+      <ActionSheet visible={visible}>
         <ActionSheetItem onPress={()=>console.log('按钮一')}>按钮一</ActionSheetItem>
         <ActionSheetItem onPress={()=>console.log('按钮二')}>按钮二</ActionSheetItem>
       </ActionSheet>
     </Fragment>
   );
 }
+export default Demo
 ```
 
-### 弹层关闭 && 自定义取消文本
+### 自定义按钮文字
+```jsx  mdx:preview
+import React, { Fragment, useState } from 'react';
+import { Button, ActionSheet }  from '@uiw/react-native';
+import { ActionSheetItem } from '@uiw/react-native/lib/ActionSheet'
 
-```jsx
-import { Fragment, useState } from 'react';
-import { ActionSheet, Button,ActionSheetItem } from '@uiw/react-native';
 function Demo() {
   const [visible, setVisible] = useState(false)
   return (
@@ -39,56 +41,46 @@ function Demo() {
       <ActionSheet
         visible={visible}
         onCancel={true}
-        cancelText='取消'
+        cancelText='关闭弹层'
       >
         <ActionSheetItem onPress={()=>console.log('按钮一')}>按钮一</ActionSheetItem>
         <ActionSheetItem onPress={()=>console.log('按钮二')}>按钮二</ActionSheetItem>
       </ActionSheet>
     </Fragment>
   );
 }
+export default Demo
 ```
 
 ### Props
 
-```ts
+```js
 import { StyleProp, ViewStyle } from 'react-native';
 import { ModalProps } from '@uiw/react-native';
 
 export interface DividerStyle {
   itemDivider?: StyleProp<ViewStyle>,
   actionDivider?: StyleProp<ViewStyle>,
 }
-
-export interface ActionSheetProps extends ModalProps {
-  /** 点击蒙层是否关闭 */
-  onCancel?: Boolean;
-  /** 分割线样式 */
-  dividerStyle?: DividerStyle;
-  /** 取消的容器样式 */
-  containerStyle?: StyleProp<ViewStyle>;
-  /** 动作在被触摸操作激活时以多少不透明度显示 默认 1 */
-  activeOpacity?: number;
-  /** 动作有触摸操作时显示出来的底层的颜色 默认 #f1f1f1 */
-  underlayColor?: string;
-  /** 取消的文本样式 */
-  textStyle?: StyleProp<TextStyle>;
-  /** 取消的文本 */
-  cancelText?: React.ReactNode;
-}
 ```
 
-### ActionSheetItem Props
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|-----|------|
+| onCancel | 点击蒙层是否关闭 | Boolean | `false` |
+| dividerStyle | 分割线样式 | DividerStyle | - |
+| containerStyle | 取消的容器样式 | StyleProp<ViewStyle> | - |
+| activeOpacity | 动作在被触摸操作激活时以多少不透明度显示 | number | `#f1f1f1` |
+| underlayColor | 动作有触摸操作时显示出来的底层的颜色 | string | `#f1f1f1` |
+| cancelText | 取消的文本 | `React.ReactNode` | - |
+| textStyle | 取消的文本样式 | `StyleProp<TextStyle>` | - |
 
-```ts
+### ActionSheetItem Props
+```js
 import { TextStyle, StyleProp, ViewStyle } from 'react-native';
+```
 
-export interface ActionSheetItemProps {
-  /** 容器样式 */
-  containerStyle?: StyleProp<ViewStyle>;
-  /** 文本样式 */
-  textStyle?: StyleProp<TextStyle>;
-  /** 点击 ActionSheetItem 触发的事件 */
-  onPress?: ((event: GestureResponderEvent) => void),
-}
-```
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|-----|------|
+| containerStyle | 容器样式 | `StyleProp<ViewStyle>` | - |
+| textStyle | 文本样式 | `StyleProp<ViewStyle>` | - |
+| onPress | 点击 ActionSheetItem 触发的事件 | `(event: GestureResponderEvent) => void` | - |

packages/core/src/ActionSheet/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { View, Dimensions, StyleSheet, TextStyle, StyleProp, ViewStyle } from 'react-native';
 import Modal, { ModalProps } from '../Modal';
-export { default as ActionSheetItem } from './item';
 import ActionSheetItem from './item';
+export { default as ActionSheetItem } from './item';
 
 let MainWidth = Dimensions.get('window').width;
 

website/src/pages/components/actionSheet/index.tsx

@@ -1,11 +1,5 @@
-import Markdown, { importAll } from '../../../component/Markdown';
+import Preview from 'src/component/Preview';
+import md from '@uiw/react-native/lib/ActionSheet/README.md';
 
-export default class Page extends Markdown {
-  path = '/packages/core/src/ActionSheet/README.md';
-  getMarkdown = async () => {
-    const md = await import('@uiw/react-native/lib/ActionSheet/README.md');
-    // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
-    importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
-    return md.default || md;
-  };
-}
+const DEMO = () => <Preview {...md} />;
+export default DEMO;