Skip to content

Commit

Permalink
Merge branch 'dev' of https://github.com/uiwjs/react-native-uiw into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChenlingasMx
ChenlingasMx committed Apr 8, 2023
2 parents 9ada986 + 05924df commit 6885146
Show file tree
Hide file tree
Showing 6 changed files with 134 additions and 133 deletions.
54 changes: 27 additions & 27 deletions example/examples/src/routes/Button/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
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>
<Body style={{ padding: 15 }}>
<Card title="基础实例">
<Flex>
<Button>默认按钮</Button>
<Button type="primary">蓝色按钮</Button>
<Spacing type="horizontal" />
<Button>默认按钮</Button>
<Button>主题色按钮</Button>
<Spacing type="horizontal" />
<Button>按钮</Button>
<Button type="success">绿色按钮</Button>
</Flex>
<Spacing />
<Button>默认按钮</Button>
<Button>主题色按钮</Button>
<Spacing />
<Button disabled>默认禁用按钮</Button>
<Button disabled>禁用按钮</Button>
<Spacing />
<Button type="primary">主要按钮 primary </Button>
<Spacing />
<Button type="danger" disabled>
<Button type="danger">
错误按钮 danger
</Button>
<Spacing />
<Button type="success">成功按钮 success</Button>
<Spacing />
<Button type="warning" disabled>
<Button type="warning">
警告禁用按钮 warning
</Button>
<Spacing />
Expand All @@ -50,14 +50,14 @@ export default class ButtonView extends React.Component<ButtonViewProps> {
亮按钮 light
</Button>
<Spacing />
<Button type="dark" loading disabled>
<Button type="dark" loading >
暗按钮 dark
</Button>
<Spacing />
<Button loading>默认按钮</Button>
<Button loading>主题色按钮</Button>
<Spacing />
<Button loading disabled>
默认按钮 禁用
主题色按钮 禁用
</Button>
</Card>
<Card title="按钮圆角设置">
Expand All @@ -69,7 +69,7 @@ export default class ButtonView extends React.Component<ButtonViewProps> {
自定义圆角 {'rounded={23}'}
</Button>
<Spacing />
<Button rounded={10} color="#f6f8fa">
<Button rounded={10} color="#1EABCD">
自定义圆角 {'rounded={10}'}
</Button>
<Spacing />
Expand All @@ -84,7 +84,7 @@ export default class ButtonView extends React.Component<ButtonViewProps> {
<Spacing />
<Button color="#393E48">按钮尺寸 {'rounded={23}'}</Button>
<Spacing />
<Button size="large" color="#f6f8fa">
<Button size="large" color="#F95C2B">
自定义圆角 {'size="large"'}
</Button>
</Card>
Expand All @@ -105,21 +105,21 @@ export default class ButtonView extends React.Component<ButtonViewProps> {
<Spacing />
<Button color="#dc3545">自定义颜色{'color="#dc3545"'}</Button>
<Spacing />
<Button color="#f6f8fa">自定义颜色{'color="#f6f8fa"'}</Button>
<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="#f6f8fa" textStyle={{letterSpacing: 2}}>
<Button color="#a63d2c" textStyle={{ letterSpacing: 2 }}>
文本间距{'textStyle={{letterSpacing:3}}'}
</Button>
</Card>
<Card title="设置边框">
<Button bordered={false} color="#f6f8fa">
<Button bordered={false} color="#dc3545">
不显示边框{'bordered={false}'}
</Button>
<Spacing />
Expand All @@ -135,12 +135,12 @@ export default class ButtonView extends React.Component<ButtonViewProps> {
flexDirection: 'row',
flexWrap: 'wrap-reverse',
}}>
<Button bordered={false} color="#fff">
<Button bordered={false} color="#ffc107">
<Icon name="apple" size={17} />
<Text> 首页</Text>
</Button>
<Spacing type="horizontal" />
<Button bordered={false} color="#fff">
<Button bordered={false} color="#008EF0">
<Icon name="menu-fold" size={17} />
<Text> 菜单</Text>
</Button>
Expand Down
28 changes: 14 additions & 14 deletions example/examples/src/routes/Picker/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React from 'react';
import {SafeAreaView} from 'react-native';
import {Picker, Button, Spacing} from '@uiw/react-native';
import {ComProps} from '../../routes';
import Layout, {Container} from '../../Layout';
import { SafeAreaView } from 'react-native';
import { Picker, Button, Spacing } from '@uiw/react-native';
import { ComProps } from '../../routes';
import Layout, { Container } from '../../Layout';

const {Header, Body, Card, Footer} = Layout;
const { Header, Body, Card, Footer } = Layout;

export interface PickerViewProps extends ComProps {}
export interface PickerViewProps extends ComProps { }

export default function (props: PickerViewProps) {
const {route} = props;
const { route } = props;
const description = route.params.description;
const title = route.params.title;
const [value, setValue] = React.useState(['2', '22', '221']);
Expand All @@ -24,24 +24,24 @@ export default function (props: PickerViewProps) {
label: '南京市',
value: '11',
children: [
{label: '宣武区', value: '111'},
{label: '雨花台区', value: '112'},
{ label: '宣武区', value: '111' },
{ label: '雨花台区', value: '112' },
],
},
{
label: '苏州市',
value: '12',
children: [{label: '苏州区', value: '121'}],
children: [{ label: '苏州区', value: '121' }],
},
],
},
{label: '北京市', value: '2', children: [{label: '北京市', value: '22', children: [{label: '朝阳区', value: '221'}]}]},
{ label: '北京市', value: '2', children: [{ label: '北京市', value: '22', children: [{ label: '朝阳区', value: '221' }] }] },
];

const arr2 = [
{label: '3', value: '3'},
{label: '4', value: '4'},
{label: '5', value: '5'},
{ label: '3', value: '3' },
{ label: '4', value: '4' },
{ label: '5', value: '5' },
];

return (
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/Button/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,7 @@ export default Demo

组件继承 [`TouchableOpacity`](https://facebook.github.io/react-native/docs/touchableopacity#docsNav)

注：当你设置按钮颜色时如果使用`color`或者`backgroundColor`时，设置的颜色是`黑色`或者`白色`时，文本颜色会和你设置的按钮背景色是一样的哦！！

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
Expand Down
41 changes: 21 additions & 20 deletions packages/core/src/Button/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React from 'react';
import { StyleSheet, TextProps, TouchableOpacity, ActivityIndicator, TouchableOpacityProps } from 'react-native';
import { color, colors } from '../utils';
import { color } from '../utils';
import Div from '../Typography/Div';
import { useTheme } from '@shopify/restyle';
import { Theme } from '../theme';

export interface ButtonProps extends TouchableOpacityProps {
color?: string;
Expand Down Expand Up @@ -49,67 +51,66 @@ export default function ButtonView<T>(props: ButtonProps) {
loading,
...restProps
} = props;
const theme = useTheme<Theme>();
let backgroundColor, textColor, borderColor, borderWidth, borderRadius;

switch (type) {
case 'warning':
backgroundColor = colors.yellow;
backgroundColor = theme.colors.func200;
break;
case 'primary':
backgroundColor = colors.blue;
backgroundColor = theme.colors.func400;
break;
case 'success':
backgroundColor = colors.green;
backgroundColor = theme.colors.func300;
break;
case 'danger':
backgroundColor = colors.red;
backgroundColor = theme.colors.func600;
break;
case 'light':
backgroundColor = colors.white;
backgroundColor = theme.colors.white;
break;
case 'dark':
backgroundColor = colors.black;
backgroundColor = theme.colors.black;
break;
default:
break;
}
if (backgroundColor) {
backgroundColor = color(backgroundColor).rgb().string();
}
if (type) {
textColor = color(backgroundColor).isLight()
? color(colors.black).rgb().string()
: color(colors.white).rgb().string();
}
if (!type) {
borderColor = color(colors.black).alpha(0.32).rgb().string();
borderColor = color(theme.colors.black).alpha(0.32).rgb().string();
borderWidth = 1;
}
if (disabled) {
textColor = color(textColor).alpha(0.3).rgb().string();
textColor = color(theme.colors.disabled).alpha(0.1).rgb().string();
backgroundColor = color(theme.colors.disabled).rgb().string();
}
if (buttonColor) {
backgroundColor = color(buttonColor).rgb().string();
textColor = color(buttonColor).isLight()
? color(buttonColor).darken(0.9).string()
: color(buttonColor).lighten(0.9).string();
}
if (rounded && (typeof rounded === 'number' || typeof rounded === 'boolean')) {
borderRadius = rounded;
}
if (backgroundColor) {
borderColor = color(backgroundColor).darken(0.2).string();
borderColor = color(backgroundColor).alpha(0.2).string();
borderWidth = 1;
}
if (!bordered) {
if (!bordered || buttonColor) {
borderWidth = 0;
}
const buttonStyle = {
backgroundColor: backgroundColor || '#fff5',
backgroundColor: backgroundColor || "#3578e5",
borderColor,
borderWidth,
borderRadius,
};
if ((type || backgroundColor || buttonColor || buttonStyle.backgroundColor) && type !== "light") {
textColor = color(theme.colors.white).rgb().string()
} else {
textColor = color(theme.colors.black).rgb().string();
}
const textStyle = { color: textColor };
let sizeStyle = {};
if (size && styles[size]) {
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/Picker/components/WheelPicker/WheelPickerItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ function WheelPickerItem({ textStyle, style, visibleRest, height, option, index,
return (
<Animated.View style={[styles.option, style, { height, opacity, transform: [{ rotateX }, { scale }] }]}>
<Text style={[{ color: textColor }, textStyle]}>{option?.label}</Text>
</Animated.View>
</Animated.View >
);
}

Expand Down
Loading

0 comments on commit 6885146

Please sign in to comment.