Skip to content

Commit 60876c2

Browse files
Amber-Nan杨楠
Amber-Nan
and
杨楠
authored
feat(CheckBox): Add size props size & 调整及文档描述效果展示 (#214)
* fix:发布 iOS 应用商店:一. 创建AppID * fix:发布 iOS 应用商店优化排版 * fix:ios应用商店文档更新及排版优化 * fix:修改环境安装文档语法错误及部分内容优化 * fix:更新ios应用发布流程 * fix:ios应用商店发布更新 * fix:更新ios及安卓应用商店发布 * fix:安卓上架更新 * fix:增加button自定义文本实例 * fix:增加checkBox复选框size调整及文档描述效果展示 Co-authored-by: 杨楠 <yangnan@nihaosi.com>
1 parent da0c2e8 commit 60876c2

File tree

2 files changed

+48
-21
lines changed

2 files changed

+48
-21
lines changed

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

Lines changed: 44 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from 'react';
2-
import {List, CheckBox} from '@uiw/react-native';
3-
import {ComProps} from '../../routes';
4-
import Layout, {Container} from '../../Layout';
5-
const {Header, Body, Footer} = Layout;
2+
import { List, CheckBox } from '@uiw/react-native';
3+
import { ComProps } from '../../routes';
4+
import Layout, { Container } from '../../Layout';
5+
const { Header, Body, Footer } = Layout;
66

7-
export interface BadgeViewProps extends ComProps {}
7+
export interface BadgeViewProps extends ComProps { }
88

99
export default class BadgeView extends React.Component<BadgeViewProps> {
1010
render() {
11-
const {route} = this.props;
11+
const { route } = this.props;
1212
const description = route.params.description;
1313
const title = route.params.title;
1414
return (
@@ -17,62 +17,86 @@ export default class BadgeView extends React.Component<BadgeViewProps> {
1717
<Header title={title} description={description} />
1818
<Body>
1919
<List size="large" flat={false}>
20-
<List.Item style={{paddingVertical: 0}}>
20+
<List.Item style={{ paddingVertical: 0 }}>
2121
<CheckBox
2222
checked={true}
23-
style={{paddingVertical: 10}}
23+
style={{ paddingVertical: 10 }}
2424
onChange={checked => {
2525
console.log(checked);
2626
}}>
2727
默认点击选中
2828
</CheckBox>
2929
</List.Item>
30-
<List.Item style={{paddingVertical: 0}}>
30+
<List.Item style={{ paddingVertical: 0 }}>
3131
<CheckBox
32-
style={{paddingVertical: 10}}
32+
style={{ paddingVertical: 10 }}
3333
onChange={checked => {
3434
console.log(checked);
3535
}}>
3636
默认未选中
3737
</CheckBox>
3838
</List.Item>
39-
<List.Item style={{paddingVertical: 0}}>
39+
<List.Item style={{ paddingVertical: 0 }}>
4040
<CheckBox
4141
disabled
42-
style={{paddingVertical: 10}}
42+
style={{ paddingVertical: 10 }}
4343
onChange={checked => {
4444
console.log(checked);
4545
}}>
4646
默认禁用未选中
4747
</CheckBox>
4848
</List.Item>
49-
<List.Item style={{paddingVertical: 0}}>
49+
<List.Item style={{ paddingVertical: 0 }}>
5050
<CheckBox
5151
checked={true}
5252
disabled
53-
style={{paddingVertical: 10}}
53+
style={{ paddingVertical: 10 }}
5454
onChange={checked => {
5555
console.log(checked);
5656
}}>
5757
默认禁用选中
5858
</CheckBox>
5959
</List.Item>
60-
<List.Item style={{paddingVertical: 0}}>
60+
<List.Item style={{ paddingVertical: 0 }}>
6161
<CheckBox
62-
style={{paddingVertical: 10}}
62+
style={{ paddingVertical: 10 }}
63+
color={'red'}
6364
onChange={checked => {
6465
console.log(checked);
6566
}}>
66-
默认未选中
67+
改变选择框颜色 {'color={}'}
6768
</CheckBox>
6869
</List.Item>
69-
<List.Item style={{paddingVertical: 0}}>
70+
<List.Item style={{ paddingVertical: 0 }}>
7071
<CheckBox
71-
style={{paddingVertical: 10}}
72+
checked={true}
73+
style={{ paddingVertical: 10 }}
74+
color={'red'}
7275
onChange={checked => {
7376
console.log(checked);
7477
}}>
75-
默认未选中
78+
改变选择框颜色 {'color={}'}
79+
</CheckBox>
80+
</List.Item>
81+
<List.Item style={{ paddingVertical: 0 }}>
82+
<CheckBox
83+
style={{ paddingVertical: 10 }}
84+
color={'red'}
85+
textStyle={{ fontSize: 18, color: 'red' }}
86+
onChange={checked => {
87+
console.log(checked);
88+
}}>
89+
改变文字颜色和大小
90+
</CheckBox>
91+
</List.Item>
92+
<List.Item style={{ paddingVertical: 0 }}>
93+
<CheckBox
94+
style={{ paddingVertical: 10 }}
95+
size={20}
96+
onChange={checked => {
97+
console.log(checked);
98+
}}>
99+
改变选择框大小 {'size={20}'}
76100
</CheckBox>
77101
</List.Item>
78102
</List>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export interface CheckBoxProps extends TouchableOpacityProps {
1818
checked?: boolean;
1919
disabled?: boolean;
2020
color?: string;
21+
size?: number;
2122
checkedIcon?: string | JSX.Element;
2223
unCheckedIcon?: string | JSX.Element;
2324
onChange?: (checked: boolean) => void;
@@ -38,6 +39,7 @@ export default class CheckBox extends React.Component<CheckBoxProps, CheckBoxSta
3839
checkedIcon: 'circle-check',
3940
unCheckedIcon: 'circle-o',
4041
color: '#008EF0',
42+
size: 16,
4143
};
4244
UNSAFE_componentWillReceiveProps(nextProps: CheckBoxProps) {
4345
if (nextProps.checked !== this.props.checked) {
@@ -61,6 +63,7 @@ export default class CheckBox extends React.Component<CheckBoxProps, CheckBoxSta
6163
checked,
6264
disabled,
6365
color: $color,
66+
size,
6467
...otherProps
6568
} = this.props;
6669
const { checked: $checked } = this.state;
@@ -78,7 +81,7 @@ export default class CheckBox extends React.Component<CheckBoxProps, CheckBoxSta
7881
return (
7982
<TouchableOpacity disabled={disabled} {...otherProps} style={[styles.default, style]} onPress={this.onPress}>
8083
<View style={[styIcon]}>
81-
{typeof iconName === 'string' ? <Icon size={16} fill={colorIcon} name={iconName} /> : iconName}
84+
{typeof iconName === 'string' ? <Icon size={size} fill={colorIcon} name={iconName} /> : iconName}
8285
</View>
8386
{children && <Div children={children} style={[divStyl, textStyle]} />}
8487
</TouchableOpacity>

0 commit comments

Comments
 (0)