Skip to content

Commit 7e68e7f

Browse files
cuilanxincuilanxin
committed
chore(SelectCascader): getDerivedStateFromProps replace componentWillReceiveProps
1 parent e30f0f3 commit 7e68e7f

File tree

3 files changed

+46
-29
lines changed

3 files changed

+46
-29
lines changed

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

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {Component} from 'react';
2-
import {StyleSheet} from 'react-native';
2+
import {StyleSheet, Text} from 'react-native';
33
import Layout, {Container} from '../../Layout';
44
import {SelectCascader, SelectCascaderValue, Button} from '@uiw/react-native';
55
import {ComProps} from '../../routes';
@@ -9,8 +9,13 @@ const {Header, Body, Card, Footer} = Layout;
99

1010
export interface SelectCascaderProps extends ComProps {}
1111

12+
interface Value {
13+
key: SelectCascaderValue;
14+
city: string;
15+
}
1216
export interface IState {
1317
visible: boolean;
18+
value: Value;
1419
}
1520

1621
export default class SelectCascaderView extends Component<
@@ -21,18 +26,22 @@ export default class SelectCascaderView extends Component<
2126
super(props);
2227
this.state = {
2328
visible: false,
29+
value: {
30+
key: ['02', '02-2', '02-2-2'],
31+
city: '啥也没',
32+
},
2433
};
2534
}
2635

27-
onChange(val: SelectCascaderValue, label: string) {
28-
console.log('val-------->', val);
29-
console.log('label-------->', label);
30-
}
36+
onChange = (val: SelectCascaderValue, label: string) => {
37+
console.log('label--------> change', label);
38+
this.setState({value: {key: val, city: label}});
39+
};
3140

3241
onOk = (val: SelectCascaderValue, label: string) => {
3342
this.setState({visible: false});
34-
console.log('val-------->', val);
35-
console.log('label-------->', label);
43+
console.log('label--------> ok', label);
44+
this.setState({value: {key: val, city: label}});
3645
};
3746

3847
render() {
@@ -46,6 +55,7 @@ export default class SelectCascaderView extends Component<
4655
<Header title={title} description={description} />
4756
<Body>
4857
<Card title="说明提示" style={styles.card}>
58+
<Text>{this.state.value.city}</Text>
4959
<Button
5060
onPress={() => {
5161
this.setState({visible: true});
@@ -54,7 +64,7 @@ export default class SelectCascaderView extends Component<
5464
</Button>
5565
<SelectCascader
5666
data={data}
57-
value={['02', '02-2', '02-2-2']}
67+
value={this.state.value.key}
5868
onOk={this.onOk}
5969
onDismiss={() => {
6070
this.setState({visible: false});

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@ export default class SelectCascaderDemo extends Component {
139139
| `onChange` | 选中时执行此回调 | Function(value, label) | - |
140140
| `onOk` | 确定选中的值 | Function(value, label) | - |
141141
| `onDismiss` | 隐藏 | Function() | - |
142+
| `maskClosable` | 点击蒙层是否关闭 | boolean | `true` |
142143
| `okText` | 确定button文字 | string | 确定 |
143144
| `dismissText` | 取消button文字 | string | 取消 |
144145
| `title` | 弹框标题 | string | 请选择 |

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

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ export interface SelectCascaderProps {
3030
cols?: number;
3131
pickerItemStyle?: StyleProp<TextStyle>;
3232
headerStyle?: StyleProp<ViewStyle>;
33+
maskClosable?: boolean;
3334
}
3435

3536
export interface Istate {
36-
modalVisible: boolean;
3737
value: SelectCascaderValue;
3838
}
3939

@@ -44,29 +44,35 @@ export default class SelectCascader extends Component<SelectCascaderProps, Istat
4444
title: '请选择',
4545
disabled: false,
4646
cols: 3,
47+
maskClosable: true,
4748
};
4849
state = {
4950
value: this.getValue(this.props.data, this.props.defaultValue || this.props.value),
50-
modalVisible: this.props.visible,
5151
};
5252

53-
outerCtrl = () => {
54-
this.setState({
55-
modalVisible: !this.state.modalVisible,
56-
});
57-
};
58-
59-
componentWillReceiveProps(nextProps: SelectCascaderProps) {
60-
if ('value' in nextProps) {
61-
this.setState({
62-
value: this.getValue(nextProps.data, nextProps.value),
63-
});
64-
}
65-
if ('visible' in nextProps) {
66-
this.setState({
67-
modalVisible: nextProps.visible,
68-
});
53+
static getDerivedStateFromProps(props: SelectCascaderProps, state: Istate) {
54+
if (JSON.stringify(props.value) === JSON.stringify(state.value)) {
55+
return null;
6956
}
57+
const getValue = (d: ICascaderDataItem[], val: SelectCascaderValue | undefined) => {
58+
let data = d || props.data;
59+
let value = val || props.value || props.defaultValue;
60+
if (!value || !value.length || value.indexOf(undefined) > -1) {
61+
value = [];
62+
for (let i = 0; i < props.cols!; i++) {
63+
if (data && data.length) {
64+
value[i] = data[0].value;
65+
if (data[0].children) {
66+
data = data[0].children;
67+
}
68+
}
69+
}
70+
}
71+
return value;
72+
};
73+
return {
74+
value: getValue(props.data, props.value),
75+
};
7076
}
7177

7278
getSel(value: SelectCascaderValue) {
@@ -164,13 +170,13 @@ export default class SelectCascader extends Component<SelectCascaderProps, Istat
164170
};
165171

166172
render() {
167-
const { title, dismissText, okText, onDismiss, headerStyle } = this.props;
173+
const { title, dismissText, okText, onDismiss, headerStyle, visible, maskClosable } = this.props;
168174
const cols = this.getCols();
169175
return (
170176
<Modal
171-
visible={this.state.modalVisible}
177+
visible={visible}
172178
onClosed={() => {
173-
this.setState({ modalVisible: false });
179+
maskClosable && this.props.onDismiss?.();
174180
}}
175181
>
176182
<>

0 commit comments

Comments
 (0)