Permalink
Browse files

fix: Checkbox & Radio components controllable

  • Loading branch information...
linfaxin committed Oct 18, 2016
1 parent 93396f3 commit 6f47c36b8e3729674dc63eaaa39cfac05b125f3c
Showing with 80 additions and 45 deletions.
  1. +14 −6 components/checkbox/Checkbox.tsx
  2. +33 −10 components/checkbox/demo/basic.tsx
  3. +14 −8 components/radio/Radio.tsx
  4. +19 −21 components/radio/demo/basic.tsx
@@ -10,29 +10,37 @@ export default class Checkbox extends React.Component<CheckboxProps, any> {
constructor(props: CheckboxProps, context: any) {
super(props, context);

let checked = 'checked' in props ? props.checked : props.defaultChecked;
let checked;
if (props.checked !== null && props.checked !== undefined) {
checked = !!props.checked;
} else {
checked = !!props.defaultChecked;
}
this.state = {
checked: checked,
};
}

componentWillReceiveProps(nextProps: CheckboxProps): void {
if ('checked' in nextProps) {
if (nextProps.checked !== null && nextProps.checked !== undefined) {
const oldChecked = this.state.checked;
if (nextProps.checked === oldChecked) {
return;
}
this.setState({
checked: nextProps.checked,
checked: !!nextProps.checked,
});
}
}

toggle() {
let checked = !this.state.checked;
this.setState({
checked: checked,
});

if (this.props.checked === null || this.props.checked === undefined) {
this.setState({
checked: checked,
});
}

if (this.props.onChange) {
this.props.onChange(checked);
@@ -1,15 +1,29 @@
import React from 'react';
import {View} from 'react-native';
import {View, Text} from 'react-native';
import {WhiteSpace, Checkbox, List} from 'antd-mobile';
const AgreeItem = Checkbox.AgreeItem;
const CheckboxItem = Checkbox.CheckboxItem;

export default class BasicCheckboxExample extends React.Component<any, any> {

constructor(props: any, context: any) {
super(props, context);
this.state = {
checkBox1: true,
agreeItem1: true,
checkboxItem1: true,
};
}

render() {
return (
<View>
<View style={{ padding: 10 }}>
<Checkbox checked style={{tintColor:'#f00'}} />
<Checkbox checked={this.state.checkBox1} style={{tintColor:'#f00'}} onChange={(checked) => {
this.setState({
checkBox1: checked,
});
}} />
<WhiteSpace />
<Checkbox />
<WhiteSpace />
@@ -21,19 +35,28 @@ export default class BasicCheckboxExample extends React.Component<any, any> {
<WhiteSpace />
<AgreeItem>同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意</AgreeItem>
<WhiteSpace />
<AgreeItem checked checkboxStyle={{tintColor:'#f00'}}>同意 《信用支付服务合同》</AgreeItem>
<AgreeItem checked={this.state.agreeItem1} checkboxStyle={{tintColor:'#f00'}} onChange={(checked) => {
this.setState({
agreeItem1: checked,
});
}}
>同意 《信用支付服务合同》</AgreeItem>
<WhiteSpace />
<AgreeItem disabled>未选中,不可编辑 《信用支付服务合同》</AgreeItem>
<WhiteSpace />
<AgreeItem checked disabled>强制选中,不可编辑 《信用支付服务合同信用支付服务合同信用支付服务合同》</AgreeItem>

<List>
<List.Header>表单多选项,普通列表中多选项</List.Header>

<CheckboxItem checked>签约</CheckboxItem>
<CheckboxItem>物料铺设</CheckboxItem>
<CheckboxItem disabled>机具维护(不能选)</CheckboxItem>
<CheckboxItem disabled checked>产品问题解决(必选)</CheckboxItem>
<List style={{marginTop: 12}}>
<Text style={{marginTop: 12}}>表单多选项,普通列表中多选项</Text>
<CheckboxItem checked={this.state.checkboxItem1} onChange={(checked) => {
this.setState({
checkboxItem1: checked,
});
}}
>签约</CheckboxItem>
<CheckboxItem>物料铺设</CheckboxItem>
<CheckboxItem disabled>机具维护(不能选)</CheckboxItem>
<CheckboxItem disabled checked>产品问题解决(必选)</CheckboxItem>

</List>
</View>
@@ -9,32 +9,38 @@ export default class Radio extends React.Component<RadioProps, any> {
constructor(props: RadioProps, context: any) {
super(props, context);

let checked = 'checked' in props ? props.checked : props.defaultChecked;
let checked;
if (props.checked !== null && props.checked !== undefined) {
checked = !!props.checked;
} else {
checked = !!props.defaultChecked;
}
this.state = {
checked: checked,
};
}

componentWillReceiveProps(nextProps: RadioProps, nextContext: any): void {
if ('checked' in nextProps) {
if (nextProps.checked !== null && nextProps.checked !== undefined) {
const oldChecked = this.state.checked;
if (nextProps.checked === oldChecked) {
return;
}
this.setState({
checked: nextProps.checked,
checked: !!nextProps.checked,
});
}
}

handleClick = () => {
if (this.props.disabled || this.state.checked) {
if (this.props.disabled) {
return;
}
this.setState({
checked: true,
});

if (this.props.checked === null || this.props.checked === undefined) {
this.setState({
checked: true,
});
}
if (this.props.onChange) {
this.props.onChange(true);
}
@@ -1,5 +1,5 @@
import React from 'react';
import { View } from 'react-native';
import { View, Text } from 'react-native';
import { WhiteSpace, Radio, List } from 'antd-mobile';
const RadioItem = Radio.RadioItem;

@@ -19,36 +19,34 @@ export default class BasicRadioExample extends React.Component<any, any> {
this.setState({ part1Value: 1 });
}
}}
style={{ borderWidth: 1, borderColor: '#ff0000', margin: 10 }}/>
style={{ borderWidth: 1, borderColor: '#999', margin: 10 }}/>
<WhiteSpace />
<Radio checked={this.state.part1Value === 2}
onChange={(checked) => {
if(checked) {
this.setState({ part1Value: 2 });
}
}}
style={{ borderWidth: 1, borderColor: '#ff0000', margin: 10 }}/>
style={{ borderWidth: 1, borderColor: '#999', margin: 10 }}/>
<WhiteSpace />
</View>

<List>
<List.Header>表单多选项,普通列表中多选项</List.Header>

<RadioItem checked={this.state.part2Value === 1}
onChange={(checked) => {
if(checked) {
this.setState({ part2Value: 1 });
}
}}>使用 Ant Desgin Component</RadioItem>
<RadioItem checked={this.state.part2Value === 2}
onChange={(checked) => {
if(checked) {
this.setState({ part2Value: 2 });
}
}}>使用 Ant Desgin Component</RadioItem>
<RadioItem disabled>个性化调整disabled</RadioItem>
<RadioItem disabled checked>个性化调整disabled</RadioItem>

<List style={{marginTop: 12}}>
<Text style={{marginTop: 12}}>表单单选项,普通列表中单选项</Text>
<RadioItem checked={this.state.part2Value === 1}
onChange={(checked) => {
if(checked) {
this.setState({ part2Value: 1 });
}
}}>使用 Ant Desgin Component</RadioItem>
<RadioItem checked={this.state.part2Value === 2}
onChange={(checked) => {
if(checked) {
this.setState({ part2Value: 2 });
}
}}>使用 Ant Desgin Component</RadioItem>
<RadioItem disabled>个性化调整disabled</RadioItem>
<RadioItem disabled checked>个性化调整disabled</RadioItem>
</List>
</View>
);

0 comments on commit 6f47c36

Please sign in to comment.