fix:ExpandableSection 展开缩放组件文档

Author: ChenlingasMx

packages/core/src/ExpandableSection/README.md

@@ -1,15 +1,16 @@
 ExpandableSection 展开缩放
 ---
 
-展开缩放
+ExpandableSection 组件以在 sectionHeader标题 下方或上方呈现展开的内容部分
 
 ### 基础示例
 
 <!--DemoStart--> 
 ```js
+import React from 'react';
 import { ExpandableSection,H5 } from '@uiw/react-native';
 
-class Demo extends Component {
+export default class ExpandableSectionDemo extends Component {
   state={
     expanded:false,
     top:false
@@ -38,7 +39,6 @@ class Demo extends Component {
 |------|------|-----|------|
 | `sectionHeader` | 设置标题 | JSX.Element | - |
 | `children` | 展开内容| ReactNode | - |
-| `labelStyle` | 设置提示文本样式 | TextProps['style'] | - |
 | `expanded` | 是否展开 | boolean | - |
 | `top` | 展开后显示位置 标题上或标题下 | boolean | - |
-| `top` | 点击事件 | void | - |
+| `onPress` | 点击事件 | void | - |

packages/core/src/ExpandableSection/index.tsx

@@ -25,10 +25,11 @@ export type ExpandableSectionProps = {
 };
 
 function ExpandableSection(props: ExpandableSectionProps) {
-  const { expanded, sectionHeader, children, top } = props;
+  const { expanded = false, sectionHeader, children, top = false } = props;
 
   const onPress = () => {
     props.onPress?.();
+    // 动画效果
     LayoutAnimation.configureNext({ ...LayoutAnimation.Presets.easeInEaseOut, duration: 300 });
   };
 

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

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

website/src/routes/menus.ts

@@ -15,6 +15,7 @@ export const componentMenus: MenuData[] = [
   { path: "/components/drawer", name: "Drawer 抽屉" },
   { path: "/components/menudropdown", name: "MenuDropdown 菜单下拉按钮" },
   { path: "/components/swipeaction", name: "SwipeAction 滑动操作组件" },
+  { path: "/components/expandablesection", name: "ExpandableSection 展开缩放组件" },
   { divider: true, name: "Data Entry" },
   { path: "/components/buttongroup", name: "ButtonGroup 按钮组" },
   { path: "/components/checkbox", name: "CheckBox 复选框" },

website/src/routes/router.tsx

@@ -87,6 +87,9 @@ export const getRouterData = {
   '/components/swipeaction': {
     component: dynamicWrapper([], () => import('../pages/components/swipeaction')),
   },
+  '/components/expandablesection': {
+    component: dynamicWrapper([], () => import('../pages/components/expandablesection')),
+  },
   '/components/button': {
     component: dynamicWrapper([], () => import('../pages/components/button')),
   },