fix: example明暗主题色

uiwjs · Apr 7, 2023 · b71b67d · b71b67d
1 parent a4593c7
commit b71b67d
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 413 deletions.
diff --git a/example/examples/src/App.tsx b/example/examples/src/App.tsx
@@ -17,7 +17,6 @@ const styles = StyleSheet.create({
 
 const App = () => {
   const colorScheme = useColorScheme();
-  console.log('colorScheme', colorScheme);
   return (
     <RootSiblingParent>
       <SafeAreaView style={styles.block}>

diff --git a/example/examples/src/Layout/index.tsx b/example/examples/src/Layout/index.tsx
@@ -1,6 +1,8 @@
 import React, {PureComponent} from 'react';
 import {StyleSheet, View, ViewProps, ViewStyle, SafeAreaView, ScrollView, ScrollViewProps, Text, TextStyle, Image, StyleProp} from 'react-native';
 import PropTypes from 'prop-types';
+import {Theme} from '@uiw/react-native';
+import {useTheme} from '@shopify/restyle';
 
 export interface HeaderProps {
   title?: string;
@@ -36,8 +38,9 @@ export interface BodyProps extends ScrollViewProps {
 
 const Body = (props: BodyProps) => {
   const {children, style, isScroll, ...other} = props;
+  const theme = useTheme<Theme>();
   return (
-    <ScrollView style={[styles.body, style]} automaticallyAdjustContentInsets={false} {...other}>
+    <ScrollView style={[style, {backgroundColor: theme.colors.background || '#fff'}]} automaticallyAdjustContentInsets={false} {...other}>
       {children}
     </ScrollView>
   );
@@ -150,9 +153,6 @@ const styles = StyleSheet.create({
     // shadowOpacity: 0.8,
     zIndex: 999,
   },
-  body: {
-    backgroundColor: '#ededed',
-  },
   logo: {
     flex: 1,
     flexDirection: 'row',

diff --git a/example/examples/src/routes/Divider/index.tsx b/example/examples/src/routes/Divider/index.tsx
@@ -1,51 +1,50 @@
 import React from 'react';
 import {Text, View} from 'react-native';
-import {Divider} from '@uiw/react-native';
+import {Divider, Theme} from '@uiw/react-native';
 import {ComProps} from '../../routes';
 import Layout, {Container} from '../../Layout';
+import {useTheme} from '@shopify/restyle';
 
 const {Header, Body, Card, Footer} = Layout;
 
 export interface DividerViewProps extends ComProps {}
 
-export default class DividerView extends React.Component<DividerViewProps> {
-  render() {
-    const {route} = this.props;
-    const description = route.params.description;
-    const title = route.params.title;
-    return (
-      <Container>
-        <Layout>
-          <Header title={title} description={description} />
-          <Body>
-            <Card title="横向分割线" style={{backgroundColor: '#ffffff'}}>
-              <Text>分割线</Text>
-              <Divider label="OR" />
-              <Text>分割线</Text>
-              <Divider label="暂无数据" />
-              <Text>分割线</Text>
-              <Divider label="调整间隔" gutter={30} />
-              <Text>分割线</Text>
-            </Card>
+export default function DividerView(props: DividerViewProps) {
+  const {route} = props;
+  const description = route.params.description;
+  const title = route.params.title;
+  const theme = useTheme<Theme>();
+  return (
+    <Container>
+      <Layout style={{backgroundColor: theme.colors.background}}>
+        <Header title={title} description={description} />
+        <Body>
+          <Card title="横向分割线" style={{backgroundColor: theme.colors.background}}>
+            <Divider label="OR" />
+            <Text />
+            <Divider label="暂无数据" />
+            <Text />
+            <Divider label="调整间隔" gutter={30} />
+            <Text />
+          </Card>
 
-            <Card title="分割线标题位置" style={{backgroundColor: '#ffffff'}}>
-              <Text>分割线</Text>
-              <Divider label="left" orientation="left" labelStyle={{fontWeight: 'bold'}} />
-              <Text>分割线</Text>
-              <Divider label="center" labelStyle={{fontWeight: 'bold'}} />
-              <Text>分割线</Text>
-              <Divider label="right" orientation="right" labelStyle={{fontWeight: 'bold'}} />
-            </Card>
+          <Card title="分割线标题位置" style={{backgroundColor: theme.colors.background}}>
+            <Text />
+            <Divider label="left" orientation="left" labelStyle={{fontWeight: 'bold'}} />
+            <Text />
+            <Divider label="center" labelStyle={{fontWeight: 'bold'}} />
+            <Text />
+            <Divider label="right" orientation="right" labelStyle={{fontWeight: 'bold'}} />
+          </Card>
 
-            <Card title="纵向分割线" style={{backgroundColor: '#ffffff'}}>
-              <View style={{height: 200}}>
-                <Divider type="vertical" label="OR" />
-              </View>
-            </Card>
-          </Body>
-          <Footer />
-        </Layout>
-      </Container>
-    );
-  }
+          <Card title="纵向分割线" style={{backgroundColor: theme.colors.background}}>
+            <View style={{height: 200}}>
+              <Divider type="vertical" label="OR" />
+            </View>
+          </Card>
+        </Body>
+        <Footer />
+      </Layout>
+    </Container>
+  );
 }
diff --git a/packages/core/src/CheckBox/index.tsx b/packages/core/src/CheckBox/index.tsx
@@ -74,27 +74,20 @@ function CheckBox(props: CheckBoxProps) {
   let colorIcon = $color;
   let divStyl: ViewProps['style'] = {};
   if (disabled) {
-    colorIcon = color(colorIcon).alpha(0.52).rgb().string();
+    colorIcon = theme.colors.disabled || color(colorIcon).alpha(0.52).rgb().string();
     divStyl.opacity = 0.5;
   }
+  const textColor = theme.colors.primary_text || 'black';
   return (
     <TouchableOpacity disabled={disabled} {...otherProps} style={[styles.default, style]} onPress={onPress}>
       <View style={[styIcon]}>
         {typeof iconName === 'string' ? <Icon size={size} fill={colorIcon} name={iconName} /> : iconName}
       </View>
-      {children && <Div children={children} style={[divStyl, textStyle]} />}
+      {children && <Div children={children} style={[divStyl, { color: textColor }, textStyle]} />}
     </TouchableOpacity>
   );
 }
 
-// console.log('theme', theme);
-// CheckBox.defaultProps = {
-//   checkedIcon: 'circle-check',
-//   unCheckedIcon: 'circle-o',
-//   color: '#3578e5', //theme.colors.primary_background,
-//   size: 16,
-// };
-
 export default CheckBox;
 
 const styles = StyleSheet.create({

diff --git a/packages/core/src/Divider/index.tsx b/packages/core/src/Divider/index.tsx
@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 import { View, Text, ViewProps, TextProps, StyleSheet } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 export interface DividerProps extends ViewProps {
   label?: string;
@@ -24,6 +26,13 @@ export default function Divider(props: DividerProps) {
     orientation = 'center',
     ...restProps
   } = props;
+
+  const theme = useTheme<Theme>();
+
+  const styles = createStyles({
+    textColor: theme.colors.primary_text || 'rgba(0, 0, 0, 0.54)',
+  });
+
   if (typeof children === 'string') {
     label = children;
     children = null;
@@ -47,7 +56,7 @@ export default function Divider(props: DividerProps) {
       labelStyle = StyleSheet.flatten(labelStyle);
     }
     children = (
-      <Text testID="RNE__Divider__label" style={[styles.label, labelStyle]}>
+      <Text testID="RNE__Divider__label" style={[styles.label, labelStyle, {}]}>
         {' '}
         {label}{' '}
       </Text>
@@ -77,46 +86,52 @@ export default function Divider(props: DividerProps) {
   );
 }
 
-const styles = StyleSheet.create({
-  warpper: {
-    alignItems: 'center',
-  },
-  horizontal: {
-    justifyContent: 'center',
-    flexDirection: 'row',
-    flexGrow: 1,
-    flexShrink: 1,
-  },
-  vertical: {
-    justifyContent: 'center',
-    flexDirection: 'column',
-    flexGrow: 1,
-    flexShrink: 1,
-  },
-  lineStart: {
-    backgroundColor: 'rgb(229, 229, 229)',
-    flexDirection: 'column',
-    flexShrink: 100,
-    flexGrow: 1,
-  },
-  lineEnd: {
-    backgroundColor: 'rgb(229, 229, 229)',
-    flexDirection: 'column',
-    flexShrink: 100,
-    flexGrow: 1,
-  },
-  lineHorizontal: {
-    height: 1,
-    minHeight: 1,
-    minWidth: 16,
-  },
-  lineVertical: {
-    width: 1,
-    minHeight: 16,
-    minWidth: 1,
-  },
-  label: {
-    color: 'rgba(0, 0, 0, 0.54)',
-    fontSize: 14,
-  },
-});
+type CreStyle = {
+  textColor: string;
+};
+
+function createStyles({ textColor }: CreStyle) {
+  return StyleSheet.create({
+    warpper: {
+      alignItems: 'center',
+    },
+    horizontal: {
+      justifyContent: 'center',
+      flexDirection: 'row',
+      flexGrow: 1,
+      flexShrink: 1,
+    },
+    vertical: {
+      justifyContent: 'center',
+      flexDirection: 'column',
+      flexGrow: 1,
+      flexShrink: 1,
+    },
+    lineStart: {
+      backgroundColor: 'rgb(229, 229, 229)',
+      flexDirection: 'column',
+      flexShrink: 100,
+      flexGrow: 1,
+    },
+    lineEnd: {
+      backgroundColor: 'rgb(229, 229, 229)',
+      flexDirection: 'column',
+      flexShrink: 100,
+      flexGrow: 1,
+    },
+    lineHorizontal: {
+      height: 1,
+      minHeight: 1,
+      minWidth: 16,
+    },
+    lineVertical: {
+      width: 1,
+      minHeight: 16,
+      minWidth: 1,
+    },
+    label: {
+      color: textColor,
+      fontSize: 14,
+    },
+  });
+}
diff --git a/packages/core/src/Empty/index.tsx b/packages/core/src/Empty/index.tsx
@@ -1,7 +1,9 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { StyleSheet, Text, TextProps } from 'react-native';
 import Icon from '../Icon';
 import Flex, { FlexProps } from '../Flex';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 export const iconStr = `
 <svg width="64" height="41" viewBox="0 0 64 41">
@@ -40,19 +42,17 @@ export interface EmptyProps extends FlexProps {
 
 export default function Empty(props: EmptyProps) {
   const { size = 64, label = '暂无数据', xml = iconStr, labelStyle, children, ...otherProps } = props;
+  const theme = useTheme<Theme>();
+  const textColor = theme.colors.primary_text || 'rgba(0,0,0,0.25)';
   return (
     <Flex direction="column" justify="center" align="center" {...otherProps}>
       {xml && <Icon xml={xml} size={size} />}
       {!!children
         ? children
         : label &&
-          typeof label === 'string' && <Text style={StyleSheet.flatten([styles.label, labelStyle])}>{label}</Text>}
+          typeof label === 'string' && (
+            <Text style={StyleSheet.flatten([{ color: textColor }, labelStyle])}>{label}</Text>
+          )}
     </Flex>
   );
 }
-
-const styles = StyleSheet.create({
-  label: {
-    color: 'rgba(0,0,0,0.25)',
-  },
-});
diff --git a/packages/core/src/Form/styles.tsx b/packages/core/src/Form/styles.tsx
@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
   warpper: {
-    backgroundColor: '#fff5',
+    backgroundColor: '#fff',
   },
   form_items_container: {
     flex: 1,

diff --git a/packages/core/src/Grid/index.tsx b/packages/core/src/Grid/index.tsx
@@ -81,11 +81,9 @@ export interface GridProps extends ViewProps {
 
 export default function Grid(props: GridProps) {
   const theme = useTheme<Theme>();
-
   const styles = createStyles({
-    color: theme.colors.white || '#fff',
+    color: theme.colors.background || '#fff',
   });
-
   const {
     style,
     data = [],