fix(MaskLayer&NoticeBar&Pagination):调整 MaskLayer & NoticeBar & Pagination主题色配置

panbibi · panbibi · commit 6b7c4a296c96 · 2023-04-04T10:17:08.000+08:00
diff --git a/packages/core/src/MaskLayer/index.tsx b/packages/core/src/MaskLayer/index.tsx
@@ -1,25 +1,34 @@
 import React, { useState, useMemo } from 'react';
 import { Modal, ModalProps as RNModalProps, Animated, TouchableOpacity, StyleSheet } from 'react-native';
 import { usePrevious } from '../utils';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
-const styles = StyleSheet.create({
-  position: {
-    position: 'absolute',
-    backgroundColor: 'transparent',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    zIndex: 9998,
-  },
-  backdrop: {
-    backgroundColor: '#000',
-  },
-  content: {
-    backgroundColor: '#fff',
-    position: 'absolute',
-  },
-});
+type CreStyle = {
+  whiteColor: string;
+  blackBackground: string;
+};
+
+function createStyles({ whiteColor, blackBackground }: CreStyle) {
+  return StyleSheet.create({
+    position: {
+      position: 'absolute',
+      backgroundColor: 'transparent',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 9998,
+    },
+    backdrop: {
+      backgroundColor: blackBackground,
+    },
+    content: {
+      backgroundColor: whiteColor,
+      position: 'absolute',
+    },
+  });
+}
 
 export interface MaskLayerProps extends RNModalProps {
   /**
@@ -46,6 +55,12 @@ export interface MaskLayerProps extends RNModalProps {
 }
 
 const MaskLayer = (props: MaskLayerProps = {}) => {
+  const theme = useTheme<Theme>();
+  const styles = createStyles({
+    whiteColor: theme.colors.white,
+    blackBackground: theme.colors.black,
+  });
+
   const {
     maskClosable = true,
     children,
@@ -115,4 +130,4 @@ const MaskLayer = (props: MaskLayerProps = {}) => {
   );
 };
 
-export default MaskLayer;
+export default MaskLayer;
diff --git a/packages/core/src/NoticeBar/index.tsx b/packages/core/src/NoticeBar/index.tsx
@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { StyleProp, Text, TouchableWithoutFeedback, View, ViewStyle, TextStyle, StyleSheet } from 'react-native';
 import Icon from '../Icon';
 import Marquee, { MarqueeProps } from './Marquee';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 export type NoticeBarProps = {
   children?: any;
@@ -15,6 +17,11 @@ export type NoticeBarProps = {
 };
 
 const NoticeBar = (props: NoticeBarProps) => {
+  const theme = useTheme<Theme>();
+  const styles = createStyles({
+    bgColor: theme.colors.func100,
+    smalCol: theme.colors.func600,
+  });
   const [show, setShow] = useState(true);
 
   const onPress = () => {
@@ -29,7 +36,7 @@ const NoticeBar = (props: NoticeBarProps) => {
   let { children, mode, icon, style, action, marqueeProps, textStyle } = props;
 
   let operationDom: any = null;
-  icon = typeof icon === 'undefined' ? <Icon name="notification" color="#f4333c" size={15} /> : icon;
+  icon = typeof icon === 'undefined' ? <Icon name="notification" color={theme.colors.func600} size={15} /> : icon;
   if (mode === 'closable') {
     operationDom = (
       <TouchableWithoutFeedback onPress={onPress}>
@@ -54,54 +61,63 @@ const NoticeBar = (props: NoticeBarProps) => {
         mode === 'closable' ? (
           main
         ) : (
-          <TouchableWithoutFeedback onPress={onPress} testID="RNE__NoticeBar__link" >{main}</TouchableWithoutFeedback>
+          <TouchableWithoutFeedback onPress={onPress} testID="RNE__NoticeBar__link">
+            {main}
+          </TouchableWithoutFeedback>
         )
       ) : null}
     </View>
   );
 };
 
-const styles = StyleSheet.create({
-  notice: {
-    backgroundColor: '#fffada',
-    height: 36,
-    overflow: 'hidden',
-    flexDirection: 'row',
-    alignItems: 'center',
-    color: '#f4333c',
-  },
-  container: {
-    flex: 1,
-    marginRight: 15,
-    overflow: 'hidden',
-    width: 0, // ios bug: width size is wrong (usecase: with react-navigation).
-  },
-  content: {
-    fontSize: 15,
-    color: '#f4333c',
-  },
-  left6: {
-    marginLeft: 5,
-  },
-  left15: {
-    marginLeft: 15,
-  },
-  actionWrap: {
-    marginRight: 15,
-  },
-  close: {
-    color: '#f4333c',
-    fontSize: 18,
-    fontWeight: '200',
-    textAlign: 'left',
-  },
-  link: {
-    transform: [{ rotate: '225deg' }],
-    color: '#f4333c',
-    fontSize: 10,
-    fontWeight: '500',
-    textAlign: 'left',
-  },
-});
+type CreStyle = {
+  bgColor: string;
+  smalCol: string;
+};
+
+function createStyles({ bgColor, smalCol }: CreStyle) {
+  return StyleSheet.create({
+    notice: {
+      backgroundColor: bgColor,
+      height: 36,
+      overflow: 'hidden',
+      flexDirection: 'row',
+      alignItems: 'center',
+      color: smalCol,
+    },
+    container: {
+      flex: 1,
+      marginRight: 15,
+      overflow: 'hidden',
+      width: 0, // ios bug: width size is wrong (usecase: with react-navigation).
+    },
+    content: {
+      fontSize: 15,
+      color: smalCol,
+    },
+    left6: {
+      marginLeft: 5,
+    },
+    left15: {
+      marginLeft: 15,
+    },
+    actionWrap: {
+      marginRight: 15,
+    },
+    close: {
+      color: smalCol,
+      fontSize: 18,
+      fontWeight: '200',
+      textAlign: 'left',
+    },
+    link: {
+      transform: [{ rotate: '225deg' }],
+      color: smalCol,
+      fontSize: 10,
+      fontWeight: '500',
+      textAlign: 'left',
+    },
+  });
+}
 
 export default NoticeBar;
diff --git a/packages/core/src/Pagination/DirText.tsx b/packages/core/src/Pagination/DirText.tsx
@@ -3,6 +3,8 @@ import { View, ViewStyle, StyleSheet, Text } from 'react-native';
 import Icon from '../Icon';
 import Button from '../Button';
 import { size } from './index';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 export enum containerSize {
   small = 30,
@@ -25,7 +27,9 @@ export interface DirTextProps {
 }
 
 const DirText = (props: DirTextProps) => {
-  const { size, direction, disabled, icon, onPageChange, borderColor = '#8d8d8d', color } = props;
+  const theme = useTheme<Theme>();
+
+  const { size, direction, disabled, icon, onPageChange, borderColor = theme.colors.gray300, color } = props;
   const dirText: '上一页' | '下一页' = useRef<'上一页' | '下一页'>(direction === 'left' ? '上一页' : '下一页').current;
   const [disabledStyle, setDisabledStyle] = useState(1);
   useEffect(() => {
@@ -38,7 +42,7 @@ const DirText = (props: DirTextProps) => {
         {
           minWidth: containerSize[size],
           borderColor: borderColor,
-          backgroundColor: '#fff',
+          backgroundColor: theme.colors.white,
           paddingHorizontal: icon ? 0 : 5,
           opacity: disabled ? disabledStyle : disabledStyle - 0.2,
         },
@@ -53,9 +57,9 @@ const DirText = (props: DirTextProps) => {
         }}
       >
         {icon ? (
-          <Icon name={direction} size={contentSize[size]} color={color || '#3d3d3d'} />
+          <Icon name={direction} size={contentSize[size]} color={color || theme.colors.gray500} />
         ) : (
-          <Text style={{ color: color || '#3d3d3d' }}>{dirText}</Text>
+          <Text style={{ color: color || theme.colors.gray500 }}>{dirText}</Text>
         )}
       </Button>
     </View>
diff --git a/packages/core/src/Pagination/MoreDir.tsx b/packages/core/src/Pagination/MoreDir.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { View, ViewStyle, TextStyle, StyleSheet, Text, TextInput } from 'react-native';
 import { size } from './index';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 export enum containerSize {
   small = 30,
@@ -21,6 +23,11 @@ export interface MoreDirProps {
 }
 
 const MoreDir = (props: MoreDirProps) => {
+  const theme = useTheme<Theme>();
+  const styles = createStyles({
+    boxColor: theme.colors.primary_background,
+  });
+
   const { setCurrent, current } = props;
   const [jumpCurrent, setJumpCurrent] = useState(1);
 
@@ -51,23 +58,27 @@ const MoreDir = (props: MoreDirProps) => {
   );
 };
 
-export const containerStyle: ViewStyle = {
-  flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
-  marginLeft: 5,
-};
-export const inputStyle: ViewStyle | TextStyle = {
-  height: 27,
-  width: 33,
-  borderColor: 'gray',
-  borderWidth: 0.5,
-  textAlign: 'center',
-  padding: 2,
-  marginHorizontal: 3,
+type CreStyle = {
+  boxColor: string;
 };
-const styles = StyleSheet.create({
-  containerStyle,
-  inputStyle,
-});
+
+function createStyles({ boxColor }: CreStyle) {
+  return StyleSheet.create({
+    containerStyle: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginLeft: 5,
+    },
+    inputStyle: {
+      height: 27,
+      width: 33,
+      borderColor: boxColor,
+      borderWidth: 0.5,
+      textAlign: 'center',
+      padding: 2,
+      marginHorizontal: 3,
+    },
+  });
+}
 export default MoreDir;
diff --git a/packages/core/src/Pagination/Page.tsx b/packages/core/src/Pagination/Page.tsx
