fix(MenuDropdownView):适配多个组件明暗主题色优化MenuDropdownView组件ICON展示

uiwjs · Apr 8, 2023 · 7921acf · 7921acf
1 parent 80916ea
commit 7921acf
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 72 deletions.
diff --git a/example/examples/src/routes/ExpandableSection/index.tsx b/example/examples/src/routes/ExpandableSection/index.tsx
@@ -1,12 +1,12 @@
-import React, {Component} from 'react';
-import {Text, StyleSheet, Image, View} from 'react-native';
-import {ExpandableSection} from '@uiw/react-native';
-import Layout, {Container} from '../../Layout';
-import {ComProps} from '../../routes';
+import React, { Component } from 'react';
+import { StyleSheet, Image, View } from 'react-native';
+import { ExpandableSection, Text, Icon } from '@uiw/react-native';
+import Layout, { Container } from '../../Layout';
+import { ComProps } from '../../routes';
 import map from 'lodash/map';
-const {Header, Body, Card, Footer} = Layout;
+const { Header, Body, Card, Footer } = Layout;
 
-export interface ExpandableSection extends ComProps {}
+export interface ExpandableSection extends ComProps { }
 
 const contents = [
   'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg',
@@ -22,47 +22,36 @@ export default class MenuDropdownView extends Component<ExpandableSection> {
   getChevron() {
     if (this.state.expanded) {
       return this.state.top ? (
-        <Image
-          style={styles.icon}
-          source={require('../../image/chevronDown.png')}
-        />
+        <Icon name='right' size={15} />
       ) : (
-        <Image
-          style={styles.icon}
-          source={require('../../image/chevronUp.png')}
-        />
+        <Icon name='down' size={15} />
       );
     }
     return this.state.top ? (
-      <Image
-        style={styles.icon}
-        source={require('../../image/chevronUp.png')}
-      />
+      <Icon name='down' size={15} />
     ) : (
-      <Image
-        style={styles.icon}
-        source={require('../../image/chevronDown.png')}
-      />
+      <Icon name='right' size={15} />
     );
   }
+
   getHeaderElement() {
     return (
       <View style={styles.row}>
-        <Text>{!this.state.expanded ? '展开' : '折叠'}</Text>
+        <Text color="text">{!this.state.expanded ? '展开' : '折叠'}</Text>
         {this.getChevron()}
       </View>
     );
   }
   renderItem = (_: string, index: number) => {
     return (
-      <View key={index} style={{padding: 12}}>
-        <Image source={{uri: contents[index]}} style={{height: 180}} />
+      <View key={index} style={{ padding: 12 }}>
+        <Image source={{ uri: contents[index] }} style={{ height: 180 }} />
       </View>
     );
   };
   render() {
-    const {route} = this.props;
-    const {expanded, top} = this.state;
+    const { route } = this.props;
+    const { expanded, top } = this.state;
     const description = route.params.description;
     const title = route.params.title;
     return (
@@ -73,7 +62,7 @@ export default class MenuDropdownView extends Component<ExpandableSection> {
             <Card title="基础实例" style={styles.card}>
               <ExpandableSection
                 expanded={expanded}
-                onPress={() => this.setState({expanded: !expanded})}
+                onPress={() => this.setState({ expanded: !expanded })}
                 sectionHeader={this.getHeaderElement()}
                 top={top}>
                 {map(contents, (item, index) => {
@@ -91,12 +80,12 @@ export default class MenuDropdownView extends Component<ExpandableSection> {
 
 const styles = StyleSheet.create({
   card: {
-    backgroundColor: '#fff',
     paddingLeft: 20,
     paddingRight: 20,
   },
   icon: {
     alignSelf: 'center',
+
   },
   row: {
     display: 'flex',

diff --git a/example/examples/src/routes/SwipeAction/index.tsx b/example/examples/src/routes/SwipeAction/index.tsx
@@ -1,17 +1,17 @@
-import React, {Component} from 'react';
-import {View, Text, StyleSheet} from 'react-native';
-import {SwipeAction} from '@uiw/react-native';
-import Layout, {Container} from '../../Layout';
-import {ComProps} from '../../routes';
+import React, { Component } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { SwipeAction } from '@uiw/react-native';
+import Layout, { Container } from '../../Layout';
+import { ComProps } from '../../routes';
 
-const {Header, Body, Card, Footer} = Layout;
+const { Header, Body, Card, Footer } = Layout;
 
-export interface SwipeActionProps extends ComProps {}
+export interface SwipeActionProps extends ComProps { }
 
 export default class SwipeActionView extends Component<SwipeActionProps> {
   newRef: any;
   render() {
-    const {route} = this.props;
+    const { route } = this.props;
     const description = route.params.description;
     const title = route.params.title;
     const right = [
@@ -45,7 +45,7 @@ export default class SwipeActionView extends Component<SwipeActionProps> {
             <Card title="左右滑动，显示按钮" style={styles.card}>
               <SwipeAction
                 buttonWidth={80}
-                rectButtonStyle={{marginLeft: -20, marginRight: 20}}
+                rectButtonStyle={{ marginLeft: -20, marginRight: 20 }}
                 ref={ref => (this.newRef = ref)}
                 right={right}
                 onSwipeableRightOpen={() => console.log('right')}
@@ -65,7 +65,6 @@ export default class SwipeActionView extends Component<SwipeActionProps> {
 
 const styles = StyleSheet.create({
   card: {
-    backgroundColor: '#fff',
     paddingLeft: 20,
     paddingRight: 20,
     paddingBottom: 30,

diff --git a/example/examples/src/routes/Toast/index.tsx b/example/examples/src/routes/Toast/index.tsx
@@ -1,16 +1,16 @@
-import React, {Component} from 'react';
-import {StyleSheet} from 'react-native';
-import {Toast, Button} from '@uiw/react-native';
-import Layout, {Container} from '../../Layout';
-import {ComProps} from '../../routes';
+import React, { Component } from 'react';
+import { StyleSheet } from 'react-native';
+import { Toast, Button } from '@uiw/react-native';
+import Layout, { Container } from '../../Layout';
+import { ComProps } from '../../routes';
 
-const {Header, Body, Card, Footer} = Layout;
+const { Header, Body, Card, Footer } = Layout;
 
-export interface ToastProps extends ComProps {}
+export interface ToastProps extends ComProps { }
 
 export default class ToastView extends Component<ToastProps> {
   render() {
-    const {route} = this.props;
+    const { route } = this.props;
     const description = route.params.description;
     const title = route.params.title;
     return (
@@ -60,7 +60,6 @@ export default class ToastView extends Component<ToastProps> {
 
 const styles = StyleSheet.create({
   card: {
-    backgroundColor: '#fff',
     paddingLeft: 20,
     paddingRight: 20,
   },

diff --git a/packages/core/src/ExpandableSection/index.tsx b/packages/core/src/ExpandableSection/index.tsx
@@ -36,7 +36,7 @@ function ExpandableSection(props: ExpandableSectionProps) {
   return (
     <View style={styles.container}>
       {top && expanded && children}
-      <TouchableOpacity onPress={onPress}>{sectionHeader}</TouchableOpacity>
+      <TouchableOpacity onPress={onPress} >{sectionHeader}</TouchableOpacity>
       {!top && expanded && children}
     </View>
   );

diff --git a/packages/core/src/Result/index.tsx b/packages/core/src/Result/index.tsx
@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 import { View, ViewProps, Text, TextProps, StyleSheet } from 'react-native';
+import { Theme } from '../theme';
+import { color, useTheme } from '@shopify/restyle';
 
 interface MaybeTextOrViewProps {
   children?: React.ReactNode;
@@ -12,28 +14,6 @@ function MaybeTextOrView({ children, ...otherProps }: MaybeTextOrViewProps & Tex
   return <View {...otherProps}>{children}</View>;
 }
 
-const styles = StyleSheet.create({
-  defalut: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#fff',
-    paddingTop: 30,
-    paddingBottom: 21,
-  },
-  title: {
-    fontSize: 21,
-    marginTop: 15,
-    paddingHorizontal: 15,
-  },
-  message: {
-    fontSize: 16,
-    marginTop: 9,
-    paddingHorizontal: 15,
-    lineHeight: 18,
-    color: '#888',
-  },
-});
-
 export interface ResultProps extends ViewProps {
   /**
    * 插图元素 (可以为<img src="" />/<Icon type="" />等)
@@ -51,6 +31,12 @@ export interface ResultProps extends ViewProps {
 
 export default function Result(props: ResultProps) {
   const { style, title, message, img, ...otherProps } = props;
+  const theme = useTheme<Theme>();
+  const styles = createStyles({
+    bgColor: theme.colors.mask,
+    textColor: theme.colors.primary_text,
+    messageColor: theme.colors.text,
+  });
   return (
     <View style={[styles.defalut, style]} {...otherProps}>
       {img}
@@ -61,3 +47,34 @@ export default function Result(props: ResultProps) {
 }
 
 Result.defaultProps = {} as ResultProps;
+
+type CreStyle = {
+  bgColor: string;
+  textColor: string;
+  messageColor: string;
+};
+
+function createStyles({ bgColor, textColor, messageColor }: CreStyle) {
+  return StyleSheet.create({
+    defalut: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: bgColor,
+      paddingTop: 30,
+      paddingBottom: 21,
+    },
+    title: {
+      fontSize: 21,
+      marginTop: 15,
+      paddingHorizontal: 15,
+      color: textColor,
+    },
+    message: {
+      fontSize: 16,
+      marginTop: 9,
+      paddingHorizontal: 15,
+      lineHeight: 18,
+      color: messageColor,
+    },
+  });
+}