Skip to content

Commit bef08cd

Browse files
ChenlingasMxChenlingasMx
authored
Merge pull request #522 from rulishu/rls
fix(Button&ButtonGroup): 修改Button&ButtonGroup文档为函数组件
2 parents 8401f55 + f1633e4 commit bef08cd

File tree

6 files changed

+144
-182
lines changed

6 files changed

+144
-182
lines changed

‎packages/core/src/Button/README.md‎

Lines changed: 64 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -15,27 +15,25 @@ import React,{ Component } from "react"
1515
import { Button, Spacing, Icon } from '@uiw/react-native';
1616
import { Text} from 'react-native';
1717

18-
class Demo extends Component {
19-
render() {
20-
return (
21-
<>
22-
<Button>default</Button>
23-
<Spacing/>
24-
<Button disabled>disabled</Button>
25-
<Spacing/>
26-
<Button type="primary" onPress={()=>console.log("The Button")}>primary</Button>
27-
<Spacing/>
28-
<Button type="warning">warning</Button>
29-
<Spacing/>
30-
<Button bordered={false} type="danger">
31-
<Icon name="warning" fill="#fff" size={17} />
32-
<Text> warning</Text>
33-
</Button>
34-
<Spacing/>
35-
<Button loading>loading</Button>
36-
</>
37-
)
38-
}
18+
function Demo() {
19+
return (
20+
<>
21+
<Button>default</Button>
22+
<Spacing/>
23+
<Button disabled>disabled</Button>
24+
<Spacing/>
25+
<Button type="primary" onPress={()=>console.log("The Button")}>primary</Button>
26+
<Spacing/>
27+
<Button type="warning">warning</Button>
28+
<Spacing/>
29+
<Button bordered={false} type="danger">
30+
<Icon name="warning" fill="#fff" size={17} />
31+
<Text> warning</Text>
32+
</Button>
33+
<Spacing/>
34+
<Button loading>loading</Button>
35+
</>
36+
)
3937
}
4038
export default Demo
4139
```
@@ -47,17 +45,15 @@ import React,{ Component } from "react"
4745
import { Button, Spacing } from '@uiw/react-native';
4846

4947

50-
class Demo extends Component {
51-
render() {
52-
return (
53-
<>
54-
<Spacing />
55-
<Button rounded={23} type="primary">
56-
自定义rounded
57-
</Button>
58-
</>
59-
)
60-
}
48+
function Demo() {
49+
return (
50+
<>
51+
<Spacing />
52+
<Button rounded={23} type="primary">
53+
自定义rounded
54+
</Button>
55+
</>
56+
)
6157
}
6258
export default Demo
6359
```
@@ -69,26 +65,24 @@ import React,{ Component } from "react"
6965
import { Button, Spacing } from '@uiw/react-native';
7066

7167

72-
class Demo extends Component {
73-
render() {
74-
return (
75-
<>
76-
<Button>default</Button>
77-
<Spacing/>
78-
<Button type="primary">primary</Button>
79-
<Spacing/>
80-
<Button type="warning">warning</Button>
81-
<Spacing/>
82-
<Button type="success">success</Button>
83-
<Spacing/>
84-
<Button type="danger" >danger</Button>
85-
<Spacing/>
86-
<Button type="light" >light</Button>
87-
<Spacing/>
88-
<Button type="dark" >dark</Button>
89-
</>
90-
)
91-
}
68+
function Demo() {
69+
return (
70+
<>
71+
<Button>default</Button>
72+
<Spacing/>
73+
<Button type="primary">primary</Button>
74+
<Spacing/>
75+
<Button type="warning">warning</Button>
76+
<Spacing/>
77+
<Button type="success">success</Button>
78+
<Spacing/>
79+
<Button type="danger" >danger</Button>
80+
<Spacing/>
81+
<Button type="light" >light</Button>
82+
<Spacing/>
83+
<Button type="dark" >dark</Button>
84+
</>
85+
)
9286
}
9387
export default Demo
9488
```
@@ -100,18 +94,16 @@ import React,{ Component } from "react"
10094
import { Button, Spacing } from '@uiw/react-native';
10195

10296

103-
class Demo extends Component {
104-
render() {
105-
return (
106-
<>
107-
<Button color="#333">#333</Button>
108-
<Spacing />
109-
<Button color="#28a745">#28a745</Button>
110-
<Spacing />
111-
<Button color="#008EF0">#008EF0</Button>
112-
</>
113-
)
114-
}
97+
function Demo() {
98+
return (
99+
<>
100+
<Button color="#333">#333</Button>
101+
<Spacing />
102+
<Button color="#28a745">#28a745</Button>
103+
<Spacing />
104+
<Button color="#008EF0">#008EF0</Button>
105+
</>
106+
)
115107
}
116108
export default Demo
117109
```
@@ -123,16 +115,14 @@ export default Demo
123115
import React,{ Component } from "react"
124116
import { Button, Spacing } from '@uiw/react-native';
125117

126-
class Demo extends Component {
127-
render() {
128-
return (
129-
<>
130-
<Button loading>loading</Button>
131-
<Spacing />
132-
<Button loading disabled>loading disabled</Button>
133-
</>
134-
)
135-
}
118+
function Demo() {
119+
return (
120+
<>
121+
<Button loading>loading</Button>
122+
<Spacing />
123+
<Button loading disabled>loading disabled</Button>
124+
</>
125+
)
136126
}
137127
export default Demo
138128
```

‎packages/core/src/ButtonGroup/README.md‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ ButtonGroup 按钮组
1010
import React,{ Component } from "react"
1111
import {Button,ButtonGroup} from '@uiw/react-native';
1212

13-
class Demo extends Component {
14-
render() {
13+
function Demo() {
1514
return (
1615
<ButtonGroup>
1716
<Button type="warning">警告</Button>
@@ -20,7 +19,6 @@ class Demo extends Component {
2019
<Button type="warning">警告</Button>
2120
</ButtonGroup>
2221
)
23-
}
2422
}
2523

2624
export default Demo
@@ -34,8 +32,7 @@ import React,{ Component } from "react"
3432
import { View } from 'react-native';
3533
import {Button,ButtonGroup,Spacing} from '@uiw/react-native';
3634

37-
class Demo extends Component {
38-
render() {
35+
function Demo() {
3936
return (
4037
<View>
4138
<ButtonGroup bordered={false}>
@@ -53,7 +50,6 @@ class Demo extends Component {
5350
</ButtonGroup>
5451
</View>
5552
)
56-
}
5753
}
5854

5955
export default Demo
@@ -69,8 +65,7 @@ import React,{ Component } from "react"
6965
import { View } from 'react-native';
7066
import {Button,ButtonGroup,Spacing} from '@uiw/react-native';
7167

72-
class Demo extends Component {
73-
render() {
68+
function Demo() {
7469
return (
7570
<View>
7671
<ButtonGroup size="small">
@@ -116,7 +111,6 @@ class Demo extends Component {
116111
</ButtonGroup>
117112
</View>
118113
)
119-
}
120114
}
121115

122116
export default Demo

‎packages/core/src/ButtonGroup/index.tsx‎

Lines changed: 69 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -22,85 +22,79 @@ export interface ButtonGroupProps extends ButtonProps, FlexProps {
2222
inline?: boolean;
2323
}
2424

25-
export default class ButtonGroup extends Component<ButtonGroupProps> {
26-
static defaultProps: ButtonGroupProps = {
27-
bordered: true,
28-
inline: false,
29-
};
30-
render() {
31-
const {
32-
children,
33-
gutter,
34-
inline,
35-
size,
36-
rounded, // Button Props
37-
color,
38-
type,
39-
bordered,
40-
disabled,
41-
textStyle, // Button Props
42-
direction,
43-
justify,
44-
align,
45-
wrap, // Flex Props
46-
...otherProps
47-
} = this.props;
48-
const porps = { color, type, bordered, disabled, textStyle };
49-
const flexProps = { direction, justify, align, wrap };
50-
const childs = React.Children.toArray(children);
25+
export default function ButtonGroup(props: ButtonGroupProps) {
26+
const {
27+
children,
28+
gutter,
29+
inline = false,
30+
size,
31+
rounded, // Button Props
32+
color,
33+
type,
34+
bordered = true,
35+
disabled,
36+
textStyle, // Button Props
37+
direction,
38+
justify,
39+
align,
40+
wrap, // Flex Props
41+
...otherProps
42+
} = props;
43+
const porps = { color, type, bordered, disabled, textStyle };
44+
const flexProps = { direction, justify, align, wrap };
45+
const childs = React.Children.toArray(children);
5146

52-
if (inline) {
53-
flexProps.direction = 'row';
54-
flexProps.wrap = 'wrap';
55-
}
47+
if (inline) {
48+
flexProps.direction = 'row';
49+
flexProps.wrap = 'wrap';
50+
}
5651

57-
return (
58-
<Flex testID="RNE__ButtonGroup__wrap" style={styles.default} {...flexProps} {...otherProps}>
59-
{childs.map((child: React.ReactNode, idx: number) => {
60-
if (!React.isValidElement(child)) {
61-
return null;
62-
}
63-
const childStyle: ButtonProps['style'] = {
64-
flex: inline ? 0 : 1,
65-
};
66-
if (inline && gutter) {
67-
childStyle.marginVertical = gutter / 2;
52+
return (
53+
<Flex testID="RNE__ButtonGroup__wrap" style={styles.default} {...flexProps} {...otherProps}>
54+
{childs.map((child: React.ReactNode, idx: number) => {
55+
if (!React.isValidElement(child)) {
56+
return null;
57+
}
58+
const childStyle: ButtonProps['style'] = {
59+
flex: inline ? 0 : 1,
60+
};
61+
if (inline && gutter) {
62+
childStyle.marginVertical = gutter / 2;
63+
}
64+
if (!gutter) {
65+
if (childs.length !== 1 && (idx === 0 || idx < childs.length - 1)) {
66+
childStyle.borderTopRightRadius = 0;
67+
childStyle.borderBottomRightRadius = 0;
6868
}
69-
if (!gutter) {
70-
if (childs.length !== 1 && (idx === 0 || idx < childs.length - 1)) {
71-
childStyle.borderTopRightRadius = 0;
72-
childStyle.borderBottomRightRadius = 0;
73-
}
74-
if (childs.length > 0 && idx !== 0) {
75-
childStyle.borderTopLeftRadius = 0;
76-
childStyle.borderBottomLeftRadius = 0;
77-
}
69+
if (childs.length > 0 && idx !== 0) {
70+
childStyle.borderTopLeftRadius = 0;
71+
childStyle.borderBottomLeftRadius = 0;
7872
}
79-
if (!bordered) {
80-
childStyle.borderWidth = 0;
73+
}
74+
if (!bordered) {
75+
childStyle.borderWidth = 0;
76+
}
77+
if (bordered && !gutter) {
78+
if ((idx > 0 && idx < (children as ButtonProps[]).length - 1) || idx === 0) {
79+
childStyle.borderRightWidth = StyleSheet.hairlineWidth;
8180
}
82-
if (bordered && !gutter) {
83-
if ((idx > 0 && idx < (children as ButtonProps[]).length - 1) || idx === 0) {
84-
childStyle.borderRightWidth = StyleSheet.hairlineWidth;
85-
}
86-
if (idx > 0 && idx < (children as ButtonProps[]).length) {
87-
childStyle.borderLeftWidth = StyleSheet.hairlineWidth;
88-
}
81+
if (idx > 0 && idx < (children as ButtonProps[]).length) {
82+
childStyle.borderLeftWidth = StyleSheet.hairlineWidth;
8983
}
90-
if (gutter && inline) {
91-
childStyle.marginHorizontal = gutter / 2;
92-
} else if (gutter && idx !== 0) {
93-
childStyle.marginLeft = gutter / 2;
94-
}
95-
return React.cloneElement(child, {
96-
...porps,
97-
...child.props,
98-
size,
99-
rounded,
100-
style: [childStyle, child.props.style],
101-
});
102-
})}
103-
</Flex>
104-
);
105-
}
84+
}
85+
if (gutter && inline) {
86+
childStyle.marginHorizontal = gutter / 2;
87+
} else if (gutter && idx !== 0) {
88+
childStyle.marginLeft = gutter / 2;
89+
}
90+
return React.cloneElement(child, {
91+
...porps,
92+
...child.props,
93+
size,
94+
rounded,
95+
style: [childStyle, child.props.style],
96+
});
97+
})}
98+
</Flex>
99+
);
106100
}

0 commit comments

Comments
 (0)