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>
uiwjs · Sep 14, 2021 · 60876c2 · 60876c2
1 parent da0c2e8
commit 60876c2
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 21 deletions.
diff --git a/example/examples/src/routes/CheckBox/index.tsx b/example/examples/src/routes/CheckBox/index.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import {List, CheckBox} from '@uiw/react-native';
-import {ComProps} from '../../routes';
-import Layout, {Container} from '../../Layout';
-const {Header, Body, Footer} = Layout;
+import { List, CheckBox } from '@uiw/react-native';
+import { ComProps } from '../../routes';
+import Layout, { Container } from '../../Layout';
+const { Header, Body, Footer } = Layout;
 
-export interface BadgeViewProps extends ComProps {}
+export interface BadgeViewProps extends ComProps { }
 
 export default class BadgeView extends React.Component<BadgeViewProps> {
   render() {
-    const {route} = this.props;
+    const { route } = this.props;
     const description = route.params.description;
     const title = route.params.title;
     return (
@@ -17,62 +17,86 @@ export default class BadgeView extends React.Component<BadgeViewProps> {
           <Header title={title} description={description} />
           <Body>
             <List size="large" flat={false}>
-              <List.Item style={{paddingVertical: 0}}>
+              <List.Item style={{ paddingVertical: 0 }}>
                 <CheckBox
                   checked={true}
-                  style={{paddingVertical: 10}}
+                  style={{ paddingVertical: 10 }}
                   onChange={checked => {
                     console.log(checked);
                   }}>
                   默认点击选中
                 </CheckBox>
               </List.Item>
-              <List.Item style={{paddingVertical: 0}}>
+              <List.Item style={{ paddingVertical: 0 }}>
                 <CheckBox
-                  style={{paddingVertical: 10}}
+                  style={{ paddingVertical: 10 }}
                   onChange={checked => {
                     console.log(checked);
                   }}>
                   默认未选中
                 </CheckBox>
               </List.Item>
-              <List.Item style={{paddingVertical: 0}}>
+              <List.Item style={{ paddingVertical: 0 }}>
                 <CheckBox
                   disabled
-                  style={{paddingVertical: 10}}
+                  style={{ paddingVertical: 10 }}
                   onChange={checked => {
                     console.log(checked);
                   }}>
                   默认禁用未选中
                 </CheckBox>
               </List.Item>
-              <List.Item style={{paddingVertical: 0}}>
+              <List.Item style={{ paddingVertical: 0 }}>
                 <CheckBox
                   checked={true}
                   disabled
-                  style={{paddingVertical: 10}}
+                  style={{ paddingVertical: 10 }}
                   onChange={checked => {
                     console.log(checked);
                   }}>
                   默认禁用选中
                 </CheckBox>
               </List.Item>
-              <List.Item style={{paddingVertical: 0}}>
+              <List.Item style={{ paddingVertical: 0 }}>
                 <CheckBox
-                  style={{paddingVertical: 10}}
+                  style={{ paddingVertical: 10 }}
+                  color={'red'}
                   onChange={checked => {
                     console.log(checked);
                   }}>
-                  默认未选中
+                  改变选择框颜色  {'color={}'}
                 </CheckBox>
               </List.Item>
-              <List.Item style={{paddingVertical: 0}}>
+              <List.Item style={{ paddingVertical: 0 }}>
                 <CheckBox
-                  style={{paddingVertical: 10}}
+                  checked={true}
+                  style={{ paddingVertical: 10 }}
+                  color={'red'}
                   onChange={checked => {
                     console.log(checked);
                   }}>
-                  默认未选中
+                  改变选择框颜色  {'color={}'}
+                </CheckBox>
+              </List.Item>
+              <List.Item style={{ paddingVertical: 0 }}>
+                <CheckBox
+                  style={{ paddingVertical: 10 }}
+                  color={'red'}
+                  textStyle={{ fontSize: 18, color: 'red' }}
+                  onChange={checked => {
+                    console.log(checked);
+                  }}>
+                  改变文字颜色和大小
+                </CheckBox>
+              </List.Item>
+              <List.Item style={{ paddingVertical: 0 }}>
+                <CheckBox
+                  style={{ paddingVertical: 10 }}
+                  size={20}
+                  onChange={checked => {
+                    console.log(checked);
+                  }}>
+                  改变选择框大小 {'size={20}'}
                 </CheckBox>
               </List.Item>
             </List>

diff --git a/packages/core/src/CheckBox/index.tsx b/packages/core/src/CheckBox/index.tsx
@@ -18,6 +18,7 @@ export interface CheckBoxProps extends TouchableOpacityProps {
   checked?: boolean;
   disabled?: boolean;
   color?: string;
+  size?: number;
   checkedIcon?: string | JSX.Element;
   unCheckedIcon?: string | JSX.Element;
   onChange?: (checked: boolean) => void;
@@ -38,6 +39,7 @@ export default class CheckBox extends React.Component<CheckBoxProps, CheckBoxSta
     checkedIcon: 'circle-check',
     unCheckedIcon: 'circle-o',
     color: '#008EF0',
+    size: 16,
   };
   UNSAFE_componentWillReceiveProps(nextProps: CheckBoxProps) {
     if (nextProps.checked !== this.props.checked) {
@@ -61,6 +63,7 @@ export default class CheckBox extends React.Component<CheckBoxProps, CheckBoxSta
       checked,
       disabled,
       color: $color,
+      size,
       ...otherProps
     } = this.props;
     const { checked: $checked } = this.state;
@@ -78,7 +81,7 @@ export default class CheckBox extends React.Component<CheckBoxProps, CheckBoxSta
     return (
       <TouchableOpacity disabled={disabled} {...otherProps} style={[styles.default, style]} onPress={this.onPress}>
         <View style={[styIcon]}>
-          {typeof iconName === 'string' ? <Icon size={16} fill={colorIcon} name={iconName} /> : iconName}
+          {typeof iconName === 'string' ? <Icon size={size} fill={colorIcon} name={iconName} /> : iconName}
         </View>
         {children && <Div children={children} style={[divStyl, textStyle]} />}
       </TouchableOpacity>