fix(Switch&Timeline&TreeSelect):调整Switch & Timeline & TreeSelect主题色配置

Author: panbibi

example/examples/src/routes/TreeSelect/index.tsx

@@ -54,7 +54,7 @@ export default class TreeSelectDemo extends React.Component<TreeSelectViewProps>
       <React.Fragment>
         <TreeSelect
           defaultValue={['01', '01-1', '01-1-1']}
-          activeColor="red"
+          // activeColor="red"
           options={option}
           onChange={(value: any, nodes: any) => {
             console.log(value, nodes);

packages/core/src/Switch/index.tsx

@@ -9,6 +9,8 @@ import {
   LayoutChangeEvent,
   StyleSheet,
 } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 export interface SwitchProps extends SwitchPropsDefault {
   trackStyle?: ViewStyle;
@@ -35,14 +37,15 @@ export interface SwitchState {
 }
 
 function Switch(props: SwitchProps) {
+  const theme = useTheme<Theme>();
   const {
     style,
     size,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     checked = false,
-    color,
+    color = theme.colors.primary_background || '#3578e5',
     disabled,
-    thumbColor,
+    thumbColor = theme.colors.text_active || '#fff',
     trackStyle,
     thumbStyle,
     ...otherProps
@@ -196,8 +199,6 @@ function Switch(props: SwitchProps) {
 Switch.defaultProps = {
   checked: false,
   size: 'default',
-  thumbColor: '#fff',
-  color: '#4DD964',
   onValueChange: () => {},
 };
 

packages/core/src/Timeline/index.tsx

@@ -3,6 +3,8 @@ import { View, Text, StyleSheet, ViewProps } from 'react-native';
 import { TabsItemIconTypes } from '../Tabs/TabsItem';
 import Icon, { IconsName } from '../Icon';
 import { number } from 'prop-types';
+import { useTheme } from '@shopify/restyle';
+import { Theme } from '../theme';
 
 export interface TimelineItemsProps {
   /** 标题 */
@@ -46,23 +48,31 @@ const Desc = (desc?: string | string[]) => {
   }
 };
 
-const IconCustom = (icon?: IconsName | React.ReactElement | React.ReactNode, size?: number, color?: string) => {
-  if (icon) {
-    return (
-      <>
-        {typeof icon === 'string' ? (
-          <Icon name={icon as IconsName} size={size ? size : 15} color={color ? color : 'red'} />
-        ) : (
-          icon
-        )}
-      </>
-    );
-  } else {
-    return <Icon name="circle-o" size={size ? size : 15} color={color ? color : '#e4e7ed'} />;
-  }
-};
-
 const TimeLine = (props: TimelineProps) => {
+  const theme = useTheme<Theme>();
+
+  const IconCustom = (icon?: IconsName | React.ReactElement | React.ReactNode, size?: number, color?: string) => {
+    if (icon) {
+      return (
+        <>
+          {typeof icon === 'string' ? (
+            <Icon name={icon as IconsName} size={size ? size : 15} color={color ? color : 'red'} />
+          ) : (
+            icon
+          )}
+        </>
+      );
+    } else {
+      return (
+        <Icon
+          name="circle-o"
+          size={size ? size : 15}
+          color={color ? color : theme.colors.primary_background || '#3578e5'}
+        />
+      );
+    }
+  };
+
   const { items = [], isReverse, style, mode } = props;
 
   const [lineItem, setLineItem] = useState<TimelineItemsProps[]>([]);

packages/core/src/TreeSelect/styles.tsx

@@ -14,7 +14,7 @@ export const style = StyleSheet.create({
     backgroundColor: '#f6f7f9',
   },
   active_nth_item: {
-    backgroundColor: '#fef4f3',
+    backgroundColor: '#EEF4FF',
     borderWidth: 1,
     borderRadius: 5,
     marginLeft: 10,

packages/core/src/TreeSelect/tree-select.tsx

@@ -6,6 +6,8 @@ import Icon from '../Icon';
 import Ellipsis from '../Ellipsis';
 import Modal, { ModalProps } from '../Modal';
 import { style } from './styles';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 export interface TreeSelectOption {
   [key: string]: any;
@@ -28,22 +30,24 @@ export type TreeSelectProps = {
   modalProps?: ModalProps;
 };
 
-const defaultProps = {
-  options: [],
-  fieldNames: {},
-  defaultValue: [],
-  activeColor: '#5847FF',
-  placeholder: '请选择',
-  extra: undefined,
-  showClear: true,
-  contentStyle: {},
-  placeholderColor: '',
-  disabled: false,
-  height: 300,
-  modalProps: {},
-};
-
 export const TreeSelect: FC<TreeSelectProps> = (p) => {
+  const theme = useTheme<Theme>();
+
+  const defaultProps = {
+    options: [],
+    fieldNames: {},
+    defaultValue: [],
+    activeColor: theme.colors.primary_background || '#3578e5',
+    placeholder: '请选择',
+    extra: undefined,
+    showClear: true,
+    contentStyle: {},
+    placeholderColor: '',
+    disabled: false,
+    height: 300,
+    modalProps: {},
+  };
+
   const props = { ...defaultProps, ...p };
   const labelName = props.fieldNames.label || 'label';
   const valueName = props.fieldNames.value || 'value';