docs(ButtonGroup): 修改ButtonGroup文档为函数组件

Author: rulishu

packages/core/src/ButtonGroup/README.md

@@ -10,8 +10,7 @@ ButtonGroup 按钮组
 import React,{ Component } from "react"
 import  {Button,ButtonGroup}  from '@uiw/react-native';
 
-class Demo extends Component {
-  render() {
+function Demo() {
     return (
       <ButtonGroup>
         <Button type="warning">警告</Button>
@@ -20,7 +19,6 @@ class Demo extends Component {
         <Button type="warning">警告</Button>
       </ButtonGroup>
     )
-  }
 }
 
 export default Demo
@@ -34,8 +32,7 @@ import React,{ Component } from "react"
 import { View } from 'react-native';
 import  {Button,ButtonGroup,Spacing}  from '@uiw/react-native';
 
-class Demo extends Component {
-  render() {
+function Demo() {
     return (
       <View>
         <ButtonGroup bordered={false}>
@@ -53,7 +50,6 @@ class Demo extends Component {
         </ButtonGroup>
       </View>
     )
-  }
 }
 
 export default Demo
@@ -69,8 +65,7 @@ import React,{ Component } from "react"
 import { View } from 'react-native';
 import  {Button,ButtonGroup,Spacing}  from '@uiw/react-native';
 
-class Demo extends Component {
-  render() {
+function Demo() {
     return (
       <View>
         <ButtonGroup size="small">
@@ -116,7 +111,6 @@ class Demo extends Component {
         </ButtonGroup>
       </View>
     )
-  }
 }
 
 export default Demo

packages/core/src/ButtonGroup/index.tsx

@@ -22,85 +22,79 @@ export interface ButtonGroupProps extends ButtonProps, FlexProps {
   inline?: boolean;
 }
 
-export default class ButtonGroup extends Component<ButtonGroupProps> {
-  static defaultProps: ButtonGroupProps = {
-    bordered: true,
-    inline: false,
-  };
-  render() {
-    const {
-      children,
-      gutter,
-      inline,
-      size,
-      rounded, // Button Props
-      color,
-      type,
-      bordered,
-      disabled,
-      textStyle, // Button Props
-      direction,
-      justify,
-      align,
-      wrap, // Flex Props
-      ...otherProps
-    } = this.props;
-    const porps = { color, type, bordered, disabled, textStyle };
-    const flexProps = { direction, justify, align, wrap };
-    const childs = React.Children.toArray(children);
+export default function ButtonGroup(props: ButtonGroupProps) {
+  const {
+    children,
+    gutter,
+    inline = false,
+    size,
+    rounded, // Button Props
+    color,
+    type,
+    bordered = true,
+    disabled,
+    textStyle, // Button Props
+    direction,
+    justify,
+    align,
+    wrap, // Flex Props
+    ...otherProps
+  } = props;
+  const porps = { color, type, bordered, disabled, textStyle };
+  const flexProps = { direction, justify, align, wrap };
+  const childs = React.Children.toArray(children);
 
-    if (inline) {
-      flexProps.direction = 'row';
-      flexProps.wrap = 'wrap';
-    }
+  if (inline) {
+    flexProps.direction = 'row';
+    flexProps.wrap = 'wrap';
+  }
 
-    return (
-      <Flex testID="RNE__ButtonGroup__wrap" style={styles.default} {...flexProps} {...otherProps}>
-        {childs.map((child: React.ReactNode, idx: number) => {
-          if (!React.isValidElement(child)) {
-            return null;
-          }
-          const childStyle: ButtonProps['style'] = {
-            flex: inline ? 0 : 1,
-          };
-          if (inline && gutter) {
-            childStyle.marginVertical = gutter / 2;
+  return (
+    <Flex testID="RNE__ButtonGroup__wrap" style={styles.default} {...flexProps} {...otherProps}>
+      {childs.map((child: React.ReactNode, idx: number) => {
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+        const childStyle: ButtonProps['style'] = {
+          flex: inline ? 0 : 1,
+        };
+        if (inline && gutter) {
+          childStyle.marginVertical = gutter / 2;
+        }
+        if (!gutter) {
+          if (childs.length !== 1 && (idx === 0 || idx < childs.length - 1)) {
+            childStyle.borderTopRightRadius = 0;
+            childStyle.borderBottomRightRadius = 0;
           }
-          if (!gutter) {
-            if (childs.length !== 1 && (idx === 0 || idx < childs.length - 1)) {
-              childStyle.borderTopRightRadius = 0;
-              childStyle.borderBottomRightRadius = 0;
-            }
-            if (childs.length > 0 && idx !== 0) {
-              childStyle.borderTopLeftRadius = 0;
-              childStyle.borderBottomLeftRadius = 0;
-            }
+          if (childs.length > 0 && idx !== 0) {
+            childStyle.borderTopLeftRadius = 0;
+            childStyle.borderBottomLeftRadius = 0;
           }
-          if (!bordered) {
-            childStyle.borderWidth = 0;
+        }
+        if (!bordered) {
+          childStyle.borderWidth = 0;
+        }
+        if (bordered && !gutter) {
+          if ((idx > 0 && idx < (children as ButtonProps[]).length - 1) || idx === 0) {
+            childStyle.borderRightWidth = StyleSheet.hairlineWidth;
           }
-          if (bordered && !gutter) {
-            if ((idx > 0 && idx < (children as ButtonProps[]).length - 1) || idx === 0) {
-              childStyle.borderRightWidth = StyleSheet.hairlineWidth;
-            }
-            if (idx > 0 && idx < (children as ButtonProps[]).length) {
-              childStyle.borderLeftWidth = StyleSheet.hairlineWidth;
-            }
+          if (idx > 0 && idx < (children as ButtonProps[]).length) {
+            childStyle.borderLeftWidth = StyleSheet.hairlineWidth;
           }
-          if (gutter && inline) {
-            childStyle.marginHorizontal = gutter / 2;
-          } else if (gutter && idx !== 0) {
-            childStyle.marginLeft = gutter / 2;
-          }
-          return React.cloneElement(child, {
-            ...porps,
-            ...child.props,
-            size,
-            rounded,
-            style: [childStyle, child.props.style],
-          });
-        })}
-      </Flex>
-    );
-  }
+        }
+        if (gutter && inline) {
+          childStyle.marginHorizontal = gutter / 2;
+        } else if (gutter && idx !== 0) {
+          childStyle.marginLeft = gutter / 2;
+        }
+        return React.cloneElement(child, {
+          ...porps,
+          ...child.props,
+          size,
+          rounded,
+          style: [childStyle, child.props.style],
+        });
+      })}
+    </Flex>
+  );
 }