(thtme): 增加hooks useTheme

uiwjs · Apr 21, 2023 · 0e36ea5 · 0e36ea5
1 parent cbe56fb
commit 0e36ea5
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 31 deletions.
diff --git a/example/examples/src/Layout/index.tsx b/example/examples/src/Layout/index.tsx
@@ -1,8 +1,7 @@
-import React, { PureComponent } from 'react';
-import { StyleSheet, View, ViewProps, ViewStyle, SafeAreaView, ScrollView, ScrollViewProps, Text, TextStyle, Image, StyleProp } from 'react-native';
+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';
+import {Theme, useTheme} from '@uiw/react-native';
 
 export interface HeaderProps {
   title?: string;
@@ -15,8 +14,8 @@ export interface HeaderProps {
 }
 
 const Header = (props: HeaderProps) => {
-  const { children, title, description, style, hasLogo, titleStyle, descriptionStyle } = props;
-  const theme = useTheme<Theme>();
+  const {children, title, description, style, hasLogo, titleStyle, descriptionStyle} = props;
+  const theme = useTheme() as Theme;
   const styles = createStyles({
     backgroundColor: theme.colors.background,
     shadowColor: theme.colors.border,
@@ -27,7 +26,7 @@ const Header = (props: HeaderProps) => {
       {title && <Text style={[styles.title, titleStyle]}>{title}</Text>}
       {hasLogo && (
         <View style={styles.logo}>
-          <Image source={require('../image/logo.png')} style={{ width: 103, height: 18 }} />
+          <Image source={require('../image/logo.png')} style={{width: 103, height: 18}} />
         </View>
       )}
       {description && <Text style={[styles.description, descriptionStyle]}>{description}</Text>}
@@ -43,8 +42,8 @@ export interface BodyProps extends ScrollViewProps {
 }
 
 const Body = (props: BodyProps) => {
-  const { children, style, isScroll, ...other } = props;
-  const theme = useTheme<Theme>();
+  const {children, style, isScroll, ...other} = props;
+  const theme = useTheme() as Theme;
   const styles = createStyles({
     backgroundColor: theme.colors.background,
     shadowColor: theme.colors.border,
@@ -65,8 +64,8 @@ export interface FooterProps {
 }
 
 const Footer = (props: FooterProps) => {
-  const { children, copyright, style, isShowCopyRight, ...other } = props;
-  const theme = useTheme<Theme>();
+  const {children, copyright, style, isShowCopyRight, ...other} = props;
+  const theme = useTheme() as Theme;
   const styles = createStyles({
     backgroundColor: theme.colors.background,
     shadowColor: theme.colors.border,
@@ -91,8 +90,8 @@ export interface CardProps extends ViewProps {
 }
 
 const Card = (props: CardProps) => {
-  const { title, titleStyle, bodyStyle, children, style, showTitle, extra, ...other } = props;
-  const theme = useTheme<Theme>();
+  const {title, titleStyle, bodyStyle, children, style, showTitle, extra, ...other} = props;
+  const theme = useTheme() as Theme;
   const styles = createStyles({
     backgroundColor: theme.colors.background,
     shadowColor: theme.colors.border,
@@ -103,7 +102,7 @@ const Card = (props: CardProps) => {
       {extra ? (
         <View style={[styles.extra, styles.cardTitle]}>
           {showTitle && (
-            <View style={{ flex: 2 }}>
+            <View style={{flex: 2}}>
               <Text style={[titleStyle]}>{title}</Text>
             </View>
           )}
@@ -123,32 +122,32 @@ export interface ContainerProps extends ScrollViewProps {
 }
 
 export const Container = (props: ContainerProps) => {
-  const { children, ...others } = props;
-  const theme = useTheme<Theme>();
+  const {children, ...others} = props;
+  const theme = useTheme() as Theme;
   return (
-    <SafeAreaView style={{ backgroundColor: theme.colors.background }} {...others}>
-      <ScrollView style={{ height: '100%' }} {...others}>
+    <SafeAreaView style={{backgroundColor: theme.colors.background}} {...others}>
+      <ScrollView style={{height: '100%'}} {...others}>
         {children}
       </ScrollView>
     </SafeAreaView>
   );
 };
 
-export interface LayoutProps extends ViewProps { }
+export interface LayoutProps extends ViewProps {}
 
 export default class Layout extends PureComponent<LayoutProps> {
   static Header = Header;
   static Body = Body;
   static Footer = Footer;
   static Card = Card;
   render() {
-    const { children, style } = this.props;
+    const {children, style} = this.props;
     const styles = createStyles({});
     return <View style={[styles.container, style]}>{children}</View>;
   }
 }
 
-function createStyles({ backgroundColor = '#F7F7F7', shadowColor = '#E6E6E6', color = '#9A9A9A' }) {
+function createStyles({backgroundColor = '#F7F7F7', shadowColor = '#E6E6E6', color = '#9A9A9A'}) {
   return StyleSheet.create({
     container: {
       backgroundColor: backgroundColor,
@@ -162,7 +161,7 @@ function createStyles({ backgroundColor = '#F7F7F7', shadowColor = '#E6E6E6', co
       paddingRight: 16,
       shadowColor: shadowColor,
       backgroundColor: backgroundColor,
-      shadowOffset: { width: 0, height: 3 },
+      shadowOffset: {width: 0, height: 3},
       shadowRadius: 3,
       // shadowOpacity: 0.8,
       shadowOpacity: 0,

diff --git a/example/examples/src/routes/Card/index.tsx b/example/examples/src/routes/Card/index.tsx
@@ -10,6 +10,7 @@ const CardDemo = (props: any) => {
   const TITLE = 'Welcome to @uiw';
   const [selected, setSelected] = useState(false);
   const [loading, setLoad] = useState(true);
+
   const basicRender = (
     <Fragment>
       <View style={{display: 'flex', alignItems: 'center', flexDirection: 'row'}}>

diff --git a/example/examples/src/routes/Divider/index.tsx b/example/examples/src/routes/Divider/index.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import {Text, View} from 'react-native';
-import {Divider, Theme} from '@uiw/react-native';
+import {Divider, useTheme, 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;
 
@@ -13,7 +12,7 @@ export default function DividerView(props: DividerViewProps) {
   const {route} = props;
   const description = route.params.description;
   const title = route.params.title;
-  const theme = useTheme<Theme>();
+  const theme = useTheme() as Theme;
   return (
     <Container>
       <Layout style={{backgroundColor: theme.colors.background}}>

diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
@@ -1,5 +1,5 @@
 import theme from './theme';
-import ThemeProvider from './theme-provider';
+import ThemeProvider, { useTheme } from './theme-provider';
 import type { Theme } from './theme';
 
 export { default as Avatar } from './Avatar';
@@ -172,5 +172,5 @@ export * from './Typography/RnText';
 export * from './Typography/Text';
 export * from './Typography/Box';
 
-export { theme, ThemeProvider };
+export { theme, ThemeProvider, useTheme };
 export type { Theme };
diff --git a/packages/core/src/theme-provider/index.tsx b/packages/core/src/theme-provider/index.tsx
@@ -1,5 +1,5 @@
-import React, { FC, PropsWithChildren } from 'react';
-import { ThemeProvider as ShopifyThemeProvider } from '@shopify/restyle';
+import React, { FC, PropsWithChildren, useContext } from 'react';
+import { ThemeProvider as ShopifyThemeProvider, ThemeContext } from '@shopify/restyle';
 import theme, { Theme } from '../theme';
 
 const { lightTheme } = theme;
@@ -10,6 +10,12 @@ const ThemeProvider: FC<
 > = ({ theme = lightTheme, children }) => {
   return <ShopifyThemeProvider theme={theme}>{children}</ShopifyThemeProvider>;
 };
-ThemeProvider.displayName = 'ThemeProvider';
 
+function useTheme() {
+  const theme = useContext(ThemeContext);
+  return theme as Theme;
+}
+
+ThemeProvider.displayName = 'ThemeProvider';
+export { useTheme };
 export default ThemeProvider;
diff --git a/packages/react-native-image-picker/package.json b/packages/react-native-image-picker/package.json
@@ -30,7 +30,7 @@
     "@shopify/restyle": "~2.4.2",
     "@types/react-native": "0.69.1",
     "@uiw/icons": "2.5.3",
-    "@uiw/react-native": "~3.2.3",
+    "@uiw/react-native": "4.0.1",
     "ahooks": "3.7.6",
     "prop-types": "15.7.2",
     "react-native-image-picker": "^5.3.1",