Skip to content

Commit 502876d

Browse files
nullptr-znullptr-z
committed
refactor(Button): 使用函数组件重构 Class组件写法
1 parent d1d6864 commit 502876d

File tree

2 files changed

+112
-113
lines changed

2 files changed

+112
-113
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ class Demo extends Component {
2323
<Spacing/>
2424
<Button disabled>disabled</Button>
2525
<Spacing/>
26-
<Button type="primary">primary</Button>
26+
<Button type="primary" onPress={()=>console.log("The Button")}>primary</Button>
2727
<Spacing/>
2828
<Button type="warning">warning</Button>
2929
<Spacing/>
@@ -181,7 +181,7 @@ export default Demo
181181

182182
```
183183

184-
### 自定义图标
184+
### 自定义图标
185185

186186
```jsx mdx:preview
187187

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

Lines changed: 110 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -35,121 +35,120 @@ export interface ButtonProps extends TouchableOpacityProps {
3535
bordered?: boolean;
3636
}
3737

38-
export default class ButtonView<T> extends React.Component<ButtonProps> {
39-
static defaultProps: ButtonProps = {
40-
activeOpacity: 0.5,
41-
rounded: 5,
42-
bordered: true,
43-
size: 'default',
44-
};
45-
render() {
46-
const {
47-
children,
48-
style,
49-
textStyle: childStyle,
50-
rounded,
51-
bordered,
52-
color: buttonColor,
53-
type,
54-
size,
55-
disabled,
56-
loading,
57-
...restProps
58-
} = this.props;
59-
let backgroundColor, textColor, borderColor, borderWidth, borderRadius;
38+
export default function ButtonView<T>(props: ButtonProps) {
39+
const {
40+
children,
41+
style,
42+
textStyle: childStyle,
43+
rounded,
44+
bordered,
45+
color: buttonColor,
46+
type,
47+
size,
48+
disabled,
49+
loading,
50+
...restProps
51+
} = props;
52+
let backgroundColor, textColor, borderColor, borderWidth, borderRadius;
6053

61-
switch (type) {
62-
case 'warning':
63-
backgroundColor = colors.yellow;
64-
break;
65-
case 'primary':
66-
backgroundColor = colors.blue;
67-
break;
68-
case 'success':
69-
backgroundColor = colors.green;
70-
break;
71-
case 'danger':
72-
backgroundColor = colors.red;
73-
break;
74-
case 'light':
75-
backgroundColor = colors.white;
76-
break;
77-
case 'dark':
78-
backgroundColor = colors.black;
79-
break;
80-
default:
81-
break;
82-
}
83-
if (backgroundColor) {
84-
backgroundColor = color(backgroundColor).rgb().string();
85-
}
86-
if (type) {
87-
textColor = color(backgroundColor).isLight()
88-
? color(colors.black).rgb().string()
89-
: color(colors.white).rgb().string();
90-
}
91-
if (!type) {
92-
borderColor = color(colors.black).alpha(0.32).rgb().string();
93-
borderWidth = 1;
94-
}
95-
if (disabled) {
96-
textColor = color(textColor).alpha(0.3).rgb().string();
97-
}
98-
if (buttonColor) {
99-
backgroundColor = color(buttonColor).rgb().string();
100-
textColor = color(buttonColor).isLight()
101-
? color(buttonColor).darken(0.9).string()
102-
: color(buttonColor).lighten(0.9).string();
103-
}
104-
if (rounded && (typeof rounded === 'number' || typeof rounded === 'boolean')) {
105-
borderRadius = rounded;
106-
}
107-
if (backgroundColor) {
108-
borderColor = color(backgroundColor).darken(0.2).string();
109-
borderWidth = 1;
110-
}
111-
if (!bordered) {
112-
borderWidth = 0;
113-
}
114-
const buttonStyle = {
115-
backgroundColor,
116-
borderColor,
117-
borderWidth,
118-
borderRadius,
119-
};
120-
const textStyle = { color: textColor };
121-
let sizeStyle = {};
122-
if (size && styles[size]) {
123-
sizeStyle = styles[size];
124-
}
125-
let boxStyle = {};
126-
const styleKey = `${size}Box` as keyof typeof styles;
127-
if (size && styles[styleKey]) {
128-
boxStyle = styles[styleKey];
129-
}
130-
if (!children) {
131-
return null;
132-
}
133-
return (
134-
<TouchableOpacity
135-
testID="RNE__Button__wrap"
136-
style={[styles.button, styles.content, buttonStyle, boxStyle, style]}
137-
disabled={disabled}
138-
{...restProps}
139-
>
140-
{loading && <ActivityIndicator size={16} color={textColor} style={styles.icon} />}
141-
{React.Children.toArray(children).map((child: any, idx) => {
142-
return (
143-
<Div testID="RNE__Button__div" key={idx} style={[sizeStyle, styles.label, textStyle, childStyle]}>
144-
{child}
145-
</Div>
146-
);
147-
})}
148-
</TouchableOpacity>
149-
);
54+
switch (type) {
55+
case 'warning':
56+
backgroundColor = colors.yellow;
57+
break;
58+
case 'primary':
59+
backgroundColor = colors.blue;
60+
break;
61+
case 'success':
62+
backgroundColor = colors.green;
63+
break;
64+
case 'danger':
65+
backgroundColor = colors.red;
66+
break;
67+
case 'light':
68+
backgroundColor = colors.white;
69+
break;
70+
case 'dark':
71+
backgroundColor = colors.black;
72+
break;
73+
default:
74+
break;
75+
}
76+
if (backgroundColor) {
77+
backgroundColor = color(backgroundColor).rgb().string();
78+
}
79+
if (type) {
80+
textColor = color(backgroundColor).isLight()
81+
? color(colors.black).rgb().string()
82+
: color(colors.white).rgb().string();
83+
}
84+
if (!type) {
85+
borderColor = color(colors.black).alpha(0.32).rgb().string();
86+
borderWidth = 1;
87+
}
88+
if (disabled) {
89+
textColor = color(textColor).alpha(0.3).rgb().string();
90+
}
91+
if (buttonColor) {
92+
backgroundColor = color(buttonColor).rgb().string();
93+
textColor = color(buttonColor).isLight()
94+
? color(buttonColor).darken(0.9).string()
95+
: color(buttonColor).lighten(0.9).string();
96+
}
97+
if (rounded && (typeof rounded === 'number' || typeof rounded === 'boolean')) {
98+
borderRadius = rounded;
15099
}
100+
if (backgroundColor) {
101+
borderColor = color(backgroundColor).darken(0.2).string();
102+
borderWidth = 1;
103+
}
104+
if (!bordered) {
105+
borderWidth = 0;
106+
}
107+
const buttonStyle = {
108+
backgroundColor,
109+
borderColor,
110+
borderWidth,
111+
borderRadius,
112+
};
113+
const textStyle = { color: textColor };
114+
let sizeStyle = {};
115+
if (size && styles[size]) {
116+
sizeStyle = styles[size];
117+
}
118+
let boxStyle = {};
119+
const styleKey = `${size}Box` as keyof typeof styles;
120+
if (size && styles[styleKey]) {
121+
boxStyle = styles[styleKey];
122+
}
123+
if (!children) {
124+
return null;
125+
}
126+
return (
127+
<TouchableOpacity
128+
testID="RNE__Button__wrap"
129+
style={[styles.button, styles.content, buttonStyle, boxStyle, style]}
130+
disabled={disabled}
131+
{...restProps}
132+
>
133+
{loading && <ActivityIndicator size={16} color={textColor} style={styles.icon} />}
134+
{React.Children.toArray(children).map((child: any, idx) => {
135+
return (
136+
<Div testID="RNE__Button__div" key={idx} style={[sizeStyle, styles.label, textStyle, childStyle]}>
137+
{child}
138+
</Div>
139+
);
140+
})}
141+
</TouchableOpacity>
142+
);
151143
}
152144

145+
ButtonView.defaultProps = {
146+
activeOpacity: 0.5,
147+
rounded: 5,
148+
bordered: true,
149+
size: 'default',
150+
} as ButtonProps;
151+
153152
const styles = StyleSheet.create({
154153
button: {
155154
borderStyle: 'solid',

0 commit comments

Comments
 (0)