Merge pull request #569 from panbibi/dev

fix(CheckBox&Radio&SegmentedControl):调整CheckBox & Radio & SegmentedCo…
uiwjs · Apr 6, 2023 · 66cc807 · 66cc807
2 parents 3bafa69 + f71c056
commit 66cc807
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 49 deletions.
diff --git a/example/examples/src/routes/Radio/index.tsx b/example/examples/src/routes/Radio/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {Spacing, Radio} from '@uiw/react-native';
 import {ComProps} from '../../routes';
 import Layout, {Container} from '../../Layout';
+import {View} from 'react-native';
 
 const {Header, Body, Card, Footer} = Layout;
 
@@ -11,10 +12,7 @@ export interface RadioViewState {
   value: number | null;
 }
 
-export default class RadioView extends React.Component<
-  RadioViewProps,
-  RadioViewState
-> {
+export default class RadioView extends React.Component<RadioViewProps, RadioViewState> {
   constructor(props: RadioViewProps) {
     super(props);
     this.state = {
@@ -39,41 +37,49 @@ export default class RadioView extends React.Component<
           <Header title={title} description={description} />
           <Body>
             <Card title="基础实例">
-              <Radio checkedColor="#fd8a00" borderColor="#fd8a00">
-                所有人可见
-              </Radio>
-              <Spacing />
-              <Radio>超级管理员</Radio>
+              <View style={{marginLeft: 15}}>
+                <Radio checkedColor="#fd8a00" borderColor="#fd8a00">
+                  所有人可见
+                </Radio>
+                <Spacing />
+                <Radio>超级管理员</Radio>
+              </View>
             </Card>
             <Card title={`受控组件 checked: ${this.state.checked}`}>
-              <Radio
-                checked={this.state.checked}
-                onPress={() => {
-                  this.setState({checked: !this.state.checked});
-                }}>
-                所有人可见
-              </Radio>
+              <View style={{marginLeft: 15}}>
+                <Radio
+                  checked={this.state.checked}
+                  onPress={() => {
+                    this.setState({checked: !this.state.checked});
+                  }}>
+                  所有人可见
+                </Radio>
+              </View>
             </Card>
             <Card title={`单选 value: ${this.state.value}`}>
-              {radioData.map((item, idx) => {
-                return (
-                  <Radio
-                    key={idx}
-                    checked={this.state.value === item.value}
-                    onPress={() => {
-                      this.setState({value: item.value});
-                    }}>
-                    {item.label}
-                  </Radio>
-                );
-              })}
+              <View style={{marginLeft: 15}}>
+                {radioData.map((item, idx) => {
+                  return (
+                    <Radio
+                      key={idx}
+                      checked={this.state.value === item.value}
+                      onPress={() => {
+                        this.setState({value: item.value});
+                      }}>
+                      {item.label}
+                    </Radio>
+                  );
+                })}
+              </View>
             </Card>
             <Card title="禁用 checked?: boolean;">
-              <Radio disabled>所有人可见</Radio>
-              <Spacing />
-              <Radio disabled checked={true}>
-                超级管理员
-              </Radio>
+              <View style={{marginLeft: 15}}>
+                <Radio disabled>所有人可见</Radio>
+                <Spacing />
+                <Radio disabled checked={true}>
+                  超级管理员
+                </Radio>
+              </View>
             </Card>
           </Body>
           <Footer />

diff --git a/packages/core/src/CheckBox/index.tsx b/packages/core/src/CheckBox/index.tsx
@@ -12,6 +12,8 @@ import {
 import Icon, { IconsName } from '../Icon';
 import { color } from '../utils';
 import Div from '../Typography/Div';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 export interface CheckBoxProps extends TouchableOpacityProps {
   textStyle?: StyleProp<TextStyle & ViewStyle>;
@@ -30,6 +32,7 @@ export interface CheckBoxState {
 }
 
 function CheckBox(props: CheckBoxProps) {
+  const theme = useTheme<Theme>();
   const [state, setState] = useState({
     checked: !!props.checked,
     controlChecked: 'props',
@@ -53,13 +56,13 @@ function CheckBox(props: CheckBoxProps) {
     children,
     style,
     textStyle,
-    checkedIcon,
-    unCheckedIcon,
+    checkedIcon = 'circle-check',
+    unCheckedIcon = 'circle-o',
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     checked,
     disabled,
-    color: $color,
-    size,
+    color: $color = theme.colors.primary_background || '#3578e5',
+    size = 16,
     ...otherProps
   } = props;
   const { checked: $checked } = state;
@@ -84,12 +87,13 @@ function CheckBox(props: CheckBoxProps) {
   );
 }
 
-CheckBox.defaultProps = {
-  checkedIcon: 'circle-check',
-  unCheckedIcon: 'circle-o',
-  color: '#008EF0',
-  size: 16,
-};
+// console.log('theme', theme);
+// CheckBox.defaultProps = {
+//   checkedIcon: 'circle-check',
+//   unCheckedIcon: 'circle-o',
+//   color: '#3578e5', //theme.colors.primary_background,
+//   size: 16,
+// };
 
 export default CheckBox;
 

diff --git a/packages/core/src/Radio/index.tsx b/packages/core/src/Radio/index.tsx
@@ -9,6 +9,8 @@ import {
   GestureResponderEvent,
   StyleSheet,
 } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 interface MaybeTextOrViewProps {
   children?: React.ReactNode;
@@ -61,6 +63,7 @@ export interface RadioState {
 }
 
 export default function Radio(props: RadioProps) {
+  const theme = useTheme<Theme>();
   const [state, setState] = useState({
     checked: props.checked,
     sizeValue: new Animated.Value(0),
@@ -101,7 +104,16 @@ export default function Radio(props: RadioProps) {
     onPress && onPress(event);
   };
 
-  const { style, color, circleSize, thumbSize, disabled, checkedColor, borderColor: bdColor, ...otherProps } = props;
+  const {
+    style,
+    color,
+    circleSize,
+    thumbSize,
+    disabled,
+    checkedColor = theme.colors.primary_background || '#3578e5',
+    borderColor: bdColor,
+    ...otherProps
+  } = props;
   const sizeValue = state.sizeValue.interpolate({
     inputRange: [0, thumbSize!],
     outputRange: [0, thumbSize!],
@@ -138,7 +150,6 @@ export default function Radio(props: RadioProps) {
 Radio.defaultProps = {
   checked: false,
   circleSize: 20,
-  checkedColor: '#008EF0',
   borderColor: '#bdc1cc',
   color: '#c3c5c7',
   thumbSize: 12,

diff --git a/packages/core/src/SegmentedControl/index.tsx b/packages/core/src/SegmentedControl/index.tsx
@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { ViewStyle, TextStyle, Text } from 'react-native';
 import ButtonGroup, { ButtonGroupProps } from '../ButtonGroup';
 import Button from '../Button';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 export interface TextColorType {
   actived?: string;
@@ -13,13 +15,15 @@ export interface SegmentedControlProps<T> extends ButtonGroupProps {
   renderItem?: (label: string | T, selectedIndex: number, props: ButtonGroupProps) => JSX.Element;
   onValueChange?: (label: string | T, selectedIndex: number) => void;
   textColor?: TextColorType;
+  colors?: string;
 }
 
 export interface SegmentedControlState {
   selectedIndex: number;
 }
 
 export default function SegmentedControl<T extends React.ReactPortal>(props: SegmentedControlProps<T>) {
+  const theme = useTheme<Theme>();
   const [state, setState] = useState({
     selectedIndex: props.selectedIndex || 0,
   });
@@ -37,9 +41,10 @@ export default function SegmentedControl<T extends React.ReactPortal>(props: Seg
     selectedIndex,
     renderItem,
     textColor = {
-      actived: '#fff',
-      unactived: props.color ?? '#108ee9',
+      actived: theme.colors.text_active || '#fff',
+      unactived: props.color ?? (theme.colors.primary_background || '#3578e5'),
     },
+    colors = props.color || theme.colors.primary_background || '#3578e5',
     ...otherProps
   } = props;
 
@@ -52,7 +57,7 @@ export default function SegmentedControl<T extends React.ReactPortal>(props: Seg
           let textStyleColor: string = textColor.actived!;
           if (state.selectedIndex !== key + 1) {
             styl.backgroundColor = '#fff';
-            textStyle.color = otherProps.color;
+            textStyle.color = colors;
             textStyleColor = textColor.unactived!;
           }
           const props: ButtonGroupProps = {
@@ -78,5 +83,4 @@ SegmentedControl.defaultProps = {
   value: [],
   size: 'small',
   selectedIndex: 0,
-  color: '#108ee9',
 } as SegmentedControlProps<{}>;