fix(Bottn) 变更Button按钮边框的颜色以解决其他使用Button按钮的组件颜色展示不对的问题

hy · hy · commit 4b3651e0913b · 2023-04-19T17:29:32.000+08:00
diff --git a/example/examples/src/routes/Button/index.tsx b/example/examples/src/routes/Button/index.tsx
@@ -1,22 +1,22 @@
 import React from 'react';
-import { View, Text } from 'react-native';
-import { Button, Spacing, Icon, Flex } from '@uiw/react-native';
-import { ComProps } from '../../routes';
-import Layout, { Container } from '../../Layout';
-const { Header, Body, Card, Footer } = Layout;
+import {View, Text} from 'react-native';
+import {Button, Spacing, Icon, Flex} from '@uiw/react-native';
+import {ComProps} from '../../routes';
+import Layout, {Container} from '../../Layout';
+const {Header, Body, Card, Footer} = Layout;
 
-export interface ButtonViewProps extends ComProps { }
+export interface ButtonViewProps extends ComProps {}
 
 export default class ButtonView extends React.Component<ButtonViewProps> {
   render() {
-    const { route } = this.props;
+    const {route} = this.props;
     const description = route.params.description;
     const title = route.params.title;
     return (
       <Container>
         <Layout>
           <Header title={title} description={description} />
-          <Body style={{ paddingLeft: 16, paddingRight: 16 }}>
+          <Body style={{paddingLeft: 16, paddingRight: 16}}>
             <Card title="基础实例">
               <Flex>
                 <Button type="primary">蓝色按钮</Button>
@@ -104,23 +104,23 @@ export default class ButtonView extends React.Component<ButtonViewProps> {
               <Button color="#a63d2c">自定义颜色{'color="#a63d2c"'}</Button>
             </Card>
             <Card title="文本样式">
-              <Button textStyle={{ fontSize: 20 }} color="yellow">
+              <Button textStyle={{fontSize: 20}} color="yellow">
                 字号调整{'textStyle = {{fontSize:20}}'}
               </Button>
               <Spacing />
-              <Button textStyle={{ color: 'blue' }}>文本颜色{'textStyle={{color:"blue"}}'}</Button>
+              <Button textStyle={{color: 'blue'}}>文本颜色{'textStyle={{color:"blue"}}'}</Button>
               <Spacing />
-              <Button color="#a63d2c" textStyle={{ letterSpacing: 2 }}>
+              <Button color="#a63d2c" textStyle={{letterSpacing: 2}}>
                 文本间距{'textStyle={{letterSpacing:3}}'}
               </Button>
             </Card>
             <Card title="设置边框">
-              <Button bordered={false} color="#dc3545">
-                不显示边框{'bordered={false}'}
+              <Button bordered={true} color="#ffc107">
+                显示边框{'bordered={false}'}
               </Button>
               <Spacing />
-              <Button bordered={true} color="#28a745">
-                不显示边框{'bordered={false}'}
+              <Button bordered={true} color="#1EABCD">
+                显示边框{'bordered={false}'}
               </Button>
             </Card>
             <Card title="显示图标">
diff --git a/example/examples/src/routes/ButtonGroup/index.tsx b/example/examples/src/routes/ButtonGroup/index.tsx
@@ -66,7 +66,7 @@ export default class ButtonGroupView extends Component<ButtonGroupViewProps> {
                 <Button>边框</Button>
               </ButtonGroup>
               <Spacing />
-              <ButtonGroup bordered={false} color="#ffc107">
+              <ButtonGroup bordered={true} color="#ffc107">
                 <Button>警告</Button>
                 <Button>警告</Button>
                 <Button>警告</Button>
diff --git a/packages/core/src/Button/index.tsx b/packages/core/src/Button/index.tsx
@@ -84,8 +84,13 @@ export default function ButtonView<T>(props: ButtonProps) {
   //   borderWidth = 1;
   // }
   if (disabled) {
-    textColor = color(theme.colors.disabled || '#CCCCCC').alpha(0.1).rgb().string();
-    backgroundColor = color(theme.colors.disabled || '#CCCCCC').rgb().string();
+    textColor = color(theme.colors.disabled || '#CCCCCC')
+      .alpha(0.1)
+      .rgb()
+      .string();
+    backgroundColor = color(theme.colors.disabled || '#CCCCCC')
+      .rgb()
+      .string();
   }
   if (buttonColor) {
     backgroundColor = color(buttonColor).rgb().string();
@@ -94,22 +99,29 @@ export default function ButtonView<T>(props: ButtonProps) {
     borderRadius = rounded;
   }
   if (bordered) {
-    borderColor = color(theme.colors.black || '#000000').alpha(0.1).rgb().string();
+    borderColor = color(theme.colors.gray200 || backgroundColor)
+      .alpha(1)
+      .rgb()
+      .string();
     borderWidth = 1;
   }
   // if (!bordered || buttonColor) {
   //   borderWidth = 0;
   // }
   const buttonStyle = {
-    backgroundColor: backgroundColor || "#3578e5",
+    backgroundColor: backgroundColor || '#3578e5',
     borderColor,
     borderWidth,
     borderRadius,
   };
-  if ((type || backgroundColor || buttonColor || buttonStyle.backgroundColor) && type !== "light") {
-    textColor = color(theme.colors.white || '#FFFFFF').rgb().string()
+  if ((type || backgroundColor || buttonColor || buttonStyle.backgroundColor) && type !== 'light') {
+    textColor = color(theme.colors.white || '#FFFFFF')
+      .rgb()
+      .string();
   } else {
-    textColor = color(theme.colors.black || '#000000').rgb().string();
+    textColor = color(theme.colors.black || '#000000')
+      .rgb()
+      .string();
   }
   const textStyle = { color: textColor };
   let sizeStyle = {};
diff --git a/packages/core/src/Progress/README.md b/packages/core/src/Progress/README.md
@@ -14,12 +14,11 @@ Progress 进度条
 import React from 'react';
 import {  SafeAreaView } from 'react-native';
 import { Progress } from '@uiw/react-native';
-import { motorcycle } from './svg';
 
 function Demo() {
   return (
     <SafeAreaView style={{ flex: 1 }}>
-     <Progress type='circle' />
+     <Progress type='circle' value={50}/>
     </SafeAreaView>
   )
 }
@@ -37,7 +36,7 @@ import { Progress } from '@uiw/react-native';
 function Demo() {
   return (
     <SafeAreaView style={{ flex: 1 }}>
-      <Progress type='circle' color={['#FFD080', 'red']} />
+      <Progress type='circle' color={['#FFD080', 'red']} value={50} />
     </SafeAreaView>
   )
 }

Original file line number	Diff line number	Diff line change
`@@ -14,12 +14,11 @@ Progress 进度条`
`14`	`14`	`import React from 'react';`
`15`	`15`	`import { SafeAreaView } from 'react-native';`
`16`	`16`	`import { Progress } from '@uiw/react-native';`
`17`		`-import { motorcycle } from './svg';`
`18`	`17`
`19`	`18`	`function Demo() {`
`20`	`19`	`return (`
`21`	`20`	`<SafeAreaView style={{ flex: 1 }}>`
`22`		`- <Progress type='circle' />`
	`21`	`+ <Progress type='circle' value={50}/>`
`23`	`22`	`</SafeAreaView>`
`24`	`23`	`)`
`25`	`24`	`}`
`@@ -37,7 +36,7 @@ import { Progress } from '@uiw/react-native';`
`37`	`36`	`function Demo() {`
`38`	`37`	`return (`
`39`	`38`	`<SafeAreaView style={{ flex: 1 }}>`
`40`		`- <Progress type='circle' color={['#FFD080', 'red']} />`
	`39`	`+ <Progress type='circle' color={['#FFD080', 'red']} value={50} />`
`41`	`40`	`</SafeAreaView>`
`42`	`41`	`)`
`43`	`42`	`}`