Skip to content

Commit d86423c

Browse files
ChenlingasMxChenlingasMx
committed
Merge branch 'dev'
2 parents ebdaa89 + 601882c commit d86423c

File tree

26 files changed

+1039
-589
lines changed

26 files changed

+1039
-589
lines changed

‎example/examples/src/routes/Empty/index.tsx‎

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -31,35 +31,33 @@ const xml = `
3131

3232
export interface DividerViewProps extends ComProps {}
3333

34-
export default class DividerView extends React.Component<DividerViewProps> {
35-
render() {
36-
const {route} = this.props;
37-
const description = route.params.description;
38-
const title = route.params.title;
39-
return (
40-
<Container>
41-
<Layout>
42-
<Header title={title} description={description} />
43-
<Body>
44-
<Card title="默认基础实例">
45-
<Empty />
46-
</Card>
47-
<Card title="自定义文字 label?: string">
48-
<Empty label="冇得数据咯" />
49-
</Card>
50-
<Card title="替换默认图标 xml?: string;">
51-
<Empty label="冇得数据咯" xml={xml} />
52-
</Card>
53-
<Card title="自定义图标尺寸 size?: number">
54-
<Empty label="冇得数据咯" size={120} />
55-
</Card>
56-
<Card title="自定义文字样式 labelStyle?: TextProps['style']">
57-
<Empty label="冇得数据咯" labelStyle={{color: 'red'}} />
58-
</Card>
59-
</Body>
60-
<Footer />
61-
</Layout>
62-
</Container>
63-
);
64-
}
34+
export default function DividerView(props: DividerViewProps) {
35+
const {route} = props || {};
36+
const description = route.params.description;
37+
const title = route.params.title;
38+
return (
39+
<Container>
40+
<Layout>
41+
<Header title={title} description={description} />
42+
<Body>
43+
<Card title="默认基础实例">
44+
<Empty />
45+
</Card>
46+
<Card title="自定义文字 label?: string">
47+
<Empty label="冇得数据咯" />
48+
</Card>
49+
<Card title="替换默认图标 xml?: string;">
50+
<Empty label="冇得数据咯" xml={xml} />
51+
</Card>
52+
<Card title="自定义图标尺寸 size?: number">
53+
<Empty label="冇得数据咯" size={120} />
54+
</Card>
55+
<Card title="自定义文字样式 labelStyle?: TextProps['style']">
56+
<Empty label="冇得数据咯" labelStyle={{color: 'red'}} />
57+
</Card>
58+
</Body>
59+
<Footer />
60+
</Layout>
61+
</Container>
62+
);
6563
}

‎example/examples/src/routes/SpeedDial/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default class Index extends Component<IndexProps, IndexState> {
4242
children={[
4343
{
4444
icon: <Icon name="plus" color="#fff" size={18} />,
45-
title: <Text>'Add'</Text>,
45+
title: <Text>Add</Text>,
4646
onPress: () => console.log('Add'),
4747
},
4848
{

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

Lines changed: 64 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import { View, Dimensions, StyleSheet, TextStyle, StyleProp, ViewStyle } from 'react-native';
33
import Modal, { ModalProps } from '../Modal';
44
import ActionSheetItem from './item';
@@ -33,84 +33,80 @@ interface ActionSheetState {
3333
control: 'props' | 'state';
3434
}
3535

36-
export default class ActionSheet extends React.Component<ActionSheetProps, ActionSheetState> {
37-
constructor(props: ActionSheetProps) {
38-
super(props);
39-
this.state = {
40-
stateVisible: !!props.visible,
41-
control: 'props',
42-
};
43-
}
44-
static getDerivedStateFromProps(props: ActionSheetProps, state: ActionSheetState) {
36+
export default function ActionSheet(props: ActionSheetProps) {
37+
const {
38+
children,
39+
visible: props_visible,
40+
activeOpacity,
41+
underlayColor,
42+
cancelText = '取消',
43+
dividerStyle,
44+
onCancel,
45+
containerStyle,
46+
textStyle,
47+
...other
48+
} = props;
49+
50+
const visible = !!props_visible;
51+
52+
const [state, setState] = useState({
53+
stateVisible: !!visible,
54+
control: 'props',
55+
});
56+
57+
useEffect(() => {
4558
if (props.visible === state.stateVisible && state.control === 'state') {
46-
return {
59+
setState({
4760
control: 'props',
4861
stateVisible: props.visible,
49-
};
62+
});
5063
}
5164
if (props.visible !== state.stateVisible) {
5265
if (state.control === 'state') {
53-
return {
54-
control: 'props',
55-
};
66+
setState({ ...state, control: 'props' });
5667
}
57-
return {
68+
setState({
5869
control: 'props',
59-
stateVisible: props.visible,
60-
};
70+
stateVisible: !!props.visible,
71+
});
6172
}
62-
return null;
63-
}
64-
onClose = () => {
65-
this.setState({ stateVisible: false, control: 'state' });
73+
}, [state.stateVisible]);
74+
75+
const onClose = () => {
76+
setState({ stateVisible: false, control: 'state' });
6677
};
6778

68-
render() {
69-
const {
70-
children,
71-
visible,
72-
activeOpacity,
73-
underlayColor,
74-
cancelText = '取消',
75-
dividerStyle,
76-
onCancel,
77-
containerStyle,
78-
textStyle,
79-
...other
80-
} = this.props;
81-
const { stateVisible } = this.state;
82-
return (
83-
<Modal
84-
placement="bottom"
85-
animationType="fade" // slide none fade
86-
transparent={true}
87-
{...other}
88-
visible={stateVisible}
89-
onClosed={this.onClose}
90-
>
91-
<>
92-
{React.Children.toArray(children).map((item, index) => (
93-
<View key={index}>
94-
{index !== 0 && <View style={StyleSheet.flatten([styles.itemDivider, dividerStyle?.itemDivider])} />}
95-
{React.cloneElement(item as React.DetailedReactHTMLElement<any, HTMLElement>, {
96-
activeOpacity: activeOpacity,
97-
underlayColor: underlayColor,
98-
})}
99-
</View>
100-
))}
101-
<View style={StyleSheet.flatten([styles.actionDivider, dividerStyle?.actionDivider])} />
102-
<ActionSheetItem
103-
activeOpacity={activeOpacity}
104-
underlayColor={underlayColor}
105-
onPress={this.onClose}
106-
children={cancelText}
107-
containerStyle={containerStyle}
108-
textStyle={textStyle}
109-
/>
110-
</>
111-
</Modal>
112-
);
113-
}
79+
return (
80+
<Modal
81+
placement="bottom"
82+
animationType="fade" // slide none fade
83+
transparent={true}
84+
{...other}
85+
visible={state.stateVisible}
86+
onClosed={onClose}
87+
>
88+
<>
89+
{React.Children.toArray(children).map((item, index) => (
90+
<View key={index}>
91+
{index !== 0 && <View style={StyleSheet.flatten([styles.itemDivider, dividerStyle?.itemDivider])} />}
92+
{React.cloneElement(item as React.DetailedReactHTMLElement<any, HTMLElement>, {
93+
activeOpacity: activeOpacity,
94+
underlayColor: underlayColor,
95+
})}
96+
</View>
97+
))}
98+
<View style={StyleSheet.flatten([styles.actionDivider, dividerStyle?.actionDivider])} />
99+
<ActionSheetItem
100+
activeOpacity={activeOpacity}
101+
underlayColor={underlayColor}
102+
onPress={onClose}
103+
children={cancelText}
104+
containerStyle={containerStyle}
105+
textStyle={textStyle}
106+
/>
107+
</>
108+
</Modal>
109+
);
114110
}
115111

116112
const styles = StyleSheet.create({

‎packages/core/src/ActionSheet/item.tsx‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,24 +27,23 @@ export interface ActionSheetItemProps {
2727

2828
export interface ActionSheetItemState {}
2929

30-
export default class ActionSheetItem extends React.Component<ActionSheetItemProps, ActionSheetItemState> {
31-
render() {
32-
const {
33-
onPress = () => {},
34-
activeOpacity = 1,
35-
underlayColor = '#f1f1f1',
36-
containerStyle,
37-
textStyle,
38-
children,
39-
} = this.props;
40-
return (
41-
<TouchableHighlight activeOpacity={activeOpacity} underlayColor={underlayColor} onPress={onPress}>
42-
<View style={StyleSheet.flatten([styles.actionSheetItem, containerStyle])}>
43-
<Text style={StyleSheet.flatten([styles.actionSheetItemText, textStyle])}>{children}</Text>
44-
</View>
45-
</TouchableHighlight>
46-
);
47-
}
30+
export default function ActionSheetItem(props: ActionSheetItemProps) {
31+
const {
32+
onPress = () => {},
33+
activeOpacity = 1,
34+
underlayColor = '#f1f1f1',
35+
containerStyle,
36+
textStyle,
37+
children,
38+
} = props;
39+
40+
return (
41+
<TouchableHighlight activeOpacity={activeOpacity} underlayColor={underlayColor} onPress={onPress}>
42+
<View style={StyleSheet.flatten([styles.actionSheetItem, containerStyle])}>
43+
<Text style={StyleSheet.flatten([styles.actionSheetItemText, textStyle])}>{children}</Text>
44+
</View>
45+
</TouchableHighlight>
46+
);
4847
}
4948

5049
const styles = StyleSheet.create({

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ export interface AvatarProps extends ViewProps {
3737
}
3838

3939
export default function Avatar(props: AvatarProps) {
40-
const { style, src = defaultImage, size = 40, shape = 'square', rounded = 3, imageProps, ...otherProps } = props;
40+
const { style, src, size, shape, rounded, imageProps, ...otherProps } = props;
41+
4142
return (
4243
<View
4344
style={[
@@ -56,3 +57,10 @@ export default function Avatar(props: AvatarProps) {
5657
</View>
5758
);
5859
}
60+
61+
Avatar.defaultProps = {
62+
src: defaultImage,
63+
shape: 'square',
64+
rounded: 3,
65+
size: 40,
66+
} as AvatarProps;

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

Lines changed: 3 additions & 3 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

@@ -227,7 +227,7 @@ export default Demo
227227

228228
| 属性 | 说明 | 类型 | 默认值 |
229229
| --- | --- | --- | --- |
230-
| color | 自定义颜色 | `string` |
230+
| color | 自定义颜色 | `string` | -｜
231231
| disabled | 是否禁用 | `boolean` | `false` |
232232
| bordered | 设置是否显示边框 | `boolean` | `true` |
233233
| loading | 加载状态 | `boolean` | `false` |

0 commit comments

Comments
 (0)