Skip to content

Commit dd8dcf1

Browse files
ChenlingasMxChenlingasMx
authored
Merge pull request #587 from panbibi/dev
fix: 统一组件的间距和MaskLayer遮罩层明暗主题适配
2 parents 0f36090 + 7e428c2 commit dd8dcf1

File tree

47 files changed

+479
-680
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+479
-680
lines changed

‎example/examples/src/routes/Avatar/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default class AvatarView extends React.Component<AvatarViewProps> {
1616
<Container>
1717
<Layout>
1818
<Header title={title} description={description} />
19-
<Body>
19+
<Body style={{paddingLeft: 16, paddingRight: 16}}>
2020
<Card title="默认头像">
2121
<Flex>
2222
<Avatar />

‎example/examples/src/routes/Button/index.tsx

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
import React from 'react';
2-
import { View, Text } from 'react-native';
3-
import { Button, Spacing, Icon, Flex } from '@uiw/react-native';
4-
import { ComProps } from '../../routes';
5-
import Layout, { Container } from '../../Layout';
6-
const { Header, Body, Card, Footer } = Layout;
2+
import {View, Text} from 'react-native';
3+
import {Button, Spacing, Icon, Flex} from '@uiw/react-native';
4+
import {ComProps} from '../../routes';
5+
import Layout, {Container} from '../../Layout';
6+
const {Header, Body, Card, Footer} = Layout;
77

8-
export interface ButtonViewProps extends ComProps { }
8+
export interface ButtonViewProps extends ComProps {}
99

1010
export default class ButtonView extends React.Component<ButtonViewProps> {
1111
render() {
12-
const { route } = this.props;
12+
const {route} = this.props;
1313
const description = route.params.description;
1414
const title = route.params.title;
1515
return (
1616
<Container>
1717
<Layout>
1818
<Header title={title} description={description} />
19-
<Body style={{ padding: 15 }}>
19+
<Body style={{paddingLeft: 16, paddingRight: 16}}>
2020
<Card title="基础实例">
2121
<Flex>
2222
<Button type="primary">蓝色按钮</Button>
@@ -32,15 +32,11 @@ export default class ButtonView extends React.Component<ButtonViewProps> {
3232
<Spacing />
3333
<Button type="primary">主要按钮 primary </Button>
3434
<Spacing />
35-
<Button type="danger">
36-
错误按钮 danger
37-
</Button>
35+
<Button type="danger">错误按钮 danger</Button>
3836
<Spacing />
3937
<Button type="success">成功按钮 success</Button>
4038
<Spacing />
41-
<Button type="warning">
42-
警告禁用按钮 warning
43-
</Button>
39+
<Button type="warning">警告禁用按钮 warning</Button>
4440
<Spacing />
4541
<Button color="#1EABCD" loading>
4642
加载中 loading
@@ -50,7 +46,7 @@ export default class ButtonView extends React.Component<ButtonViewProps> {
5046
亮按钮 light
5147
</Button>
5248
<Spacing />
53-
<Button type="dark" loading >
49+
<Button type="dark" loading>
5450
暗按钮 dark
5551
</Button>
5652
<Spacing />
@@ -108,13 +104,13 @@ export default class ButtonView extends React.Component<ButtonViewProps> {
108104
<Button color="#a63d2c">自定义颜色{'color="#a63d2c"'}</Button>
109105
</Card>
110106
<Card title="文本样式">
111-
<Button textStyle={{ fontSize: 20 }} color="yellow">
107+
<Button textStyle={{fontSize: 20}} color="yellow">
112108
字号调整{'textStyle = {{fontSize:20}}'}
113109
</Button>
114110
<Spacing />
115-
<Button textStyle={{ color: 'blue' }}>文本颜色{'textStyle={{color:"blue"}}'}</Button>
111+
<Button textStyle={{color: 'blue'}}>文本颜色{'textStyle={{color:"blue"}}'}</Button>
116112
<Spacing />
117-
<Button color="#a63d2c" textStyle={{ letterSpacing: 2 }}>
113+
<Button color="#a63d2c" textStyle={{letterSpacing: 2}}>
118114
文本间距{'textStyle={{letterSpacing:3}}'}
119115
</Button>
120116
</Card>

‎example/examples/src/routes/ButtonGroup/index.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default class ButtonGroupView extends Component<ButtonGroupViewProps> {
1515
<Container>
1616
<Layout>
1717
<Header title={title} description={description} />
18-
<Body>
18+
<Body style={{paddingLeft: 16, paddingRight: 16}}>
1919
<Card title="基础实例">
2020
<ButtonGroup>
2121
<Button type="primary">警告</Button>
@@ -52,10 +52,7 @@ export default class ButtonGroupView extends Component<ButtonGroupViewProps> {
5252
<Button>警告</Button>
5353
</ButtonGroup>
5454
<Spacing />
55-
<ButtonGroup
56-
color="#F95C2B"
57-
textStyle={{color: '#fff'}}
58-
size="small">
55+
<ButtonGroup color="#F95C2B" textStyle={{color: '#fff'}} size="small">
5956
<Button>警告</Button>
6057
<Button>警告</Button>
6158
<Button>主要</Button>

‎example/examples/src/routes/DatePicker/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default class BadgeView extends React.Component<BadgeViewProps> {
2222
<Container scrollEnabled={false}>
2323
<Layout>
2424
<Header title={title} description={description} />
25-
<Body scrollEnabled={false}>
25+
<Body scrollEnabled={false} style={{paddingLeft: 16, paddingRight: 16}}>
2626
<Card title="基本使用">
2727
<Button onPress={() => this.setState({visible: true})}>打开</Button>
2828
<View>

‎example/examples/src/routes/Divider/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function DividerView(props: DividerViewProps) {
1818
<Container>
1919
<Layout style={{backgroundColor: theme.colors.background}}>
2020
<Header title={title} description={description} />
21-
<Body>
21+
<Body style={{paddingLeft: 16, paddingRight: 16}}>
2222
<Card title="横向分割线" style={{backgroundColor: theme.colors.background}}>
2323
<Divider label="OR" />
2424
<Text />

‎example/examples/src/routes/Drawer/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export default function DrawerView({route}: DrawerViewProps) {
5353
<Container>
5454
<Layout>
5555
<Header title={title} description={description} />
56-
<Body>
56+
<Body style={{paddingLeft: 16, paddingRight: 16}}>
5757
<WingBlank>
5858
<Button onPress={() => setVisible(!visible)}>左边打开抽屉</Button>
5959
<Spacing />

‎example/examples/src/routes/Ellipsis/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default class DividerView extends React.Component<DividerViewProps> {
1616
<Container>
1717
<Layout>
1818
<Header title={title} description={description} />
19-
<Body>
19+
<Body style={{paddingLeft: 16, paddingRight: 16}}>
2020
<Card title="默认基础实例">
2121
<WingBlank>
2222
<Ellipsis maxLen={5}>用于文本过长，超出长度显示</Ellipsis>

‎example/examples/src/routes/Empty/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default function DividerView(props: DividerViewProps) {
3939
<Container>
4040
<Layout>
4141
<Header title={title} description={description} />
42-
<Body>
42+
<Body style={{paddingLeft: 16, paddingRight: 16}}>
4343
<Card title="默认基础实例">
4444
<Empty />
4545
</Card>

‎example/examples/src/routes/ExpandableSection/index.tsx

Lines changed: 16 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import React, { Component } from 'react';
2-
import { StyleSheet, Image, View } from 'react-native';
3-
import { ExpandableSection, Text, Icon } from '@uiw/react-native';
4-
import Layout, { Container } from '../../Layout';
5-
import { ComProps } from '../../routes';
1+
import React, {Component} from 'react';
2+
import {StyleSheet, Image, View} from 'react-native';
3+
import {ExpandableSection, Text, Icon} from '@uiw/react-native';
4+
import Layout, {Container} from '../../Layout';
5+
import {ComProps} from '../../routes';
66
import map from 'lodash/map';
7-
const { Header, Body, Card, Footer } = Layout;
7+
const {Header, Body, Card, Footer} = Layout;
88

9-
export interface ExpandableSection extends ComProps { }
9+
export interface ExpandableSection extends ComProps {}
1010

1111
const contents = [
1212
'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg',
@@ -21,17 +21,9 @@ export default class MenuDropdownView extends Component<ExpandableSection> {
2121
};
2222
getChevron() {
2323
if (this.state.expanded) {
24-
return this.state.top ? (
25-
<Icon name='right' size={15} />
26-
) : (
27-
<Icon name='down' size={15} />
28-
);
24+
return this.state.top ? <Icon name="right" size={15} /> : <Icon name="down" size={15} />;
2925
}
30-
return this.state.top ? (
31-
<Icon name='down' size={15} />
32-
) : (
33-
<Icon name='right' size={15} />
34-
);
26+
return this.state.top ? <Icon name="down" size={15} /> : <Icon name="right" size={15} />;
3527
}
3628

3729
getHeaderElement() {
@@ -44,14 +36,14 @@ export default class MenuDropdownView extends Component<ExpandableSection> {
4436
}
4537
renderItem = (_: string, index: number) => {
4638
return (
47-
<View key={index} style={{ padding: 12 }}>
48-
<Image source={{ uri: contents[index] }} style={{ height: 180 }} />
39+
<View key={index} style={{padding: 12}}>
40+
<Image source={{uri: contents[index]}} style={{height: 180}} />
4941
</View>
5042
);
5143
};
5244
render() {
53-
const { route } = this.props;
54-
const { expanded, top } = this.state;
45+
const {route} = this.props;
46+
const {expanded, top} = this.state;
5547
const description = route.params.description;
5648
const title = route.params.title;
5749
return (
@@ -60,11 +52,7 @@ export default class MenuDropdownView extends Component<ExpandableSection> {
6052
<Header title={title} description={description} />
6153
<Body>
6254
<Card title="基础实例" style={styles.card}>
63-
<ExpandableSection
64-
expanded={expanded}
65-
onPress={() => this.setState({ expanded: !expanded })}
66-
sectionHeader={this.getHeaderElement()}
67-
top={top}>
55+
<ExpandableSection expanded={expanded} onPress={() => this.setState({expanded: !expanded})} sectionHeader={this.getHeaderElement()} top={top}>
6856
{map(contents, (item, index) => {
6957
return this.renderItem(item, index);
7058
})}
@@ -80,12 +68,11 @@ export default class MenuDropdownView extends Component<ExpandableSection> {
8068

8169
const styles = StyleSheet.create({
8270
card: {
83-
paddingLeft: 20,
84-
paddingRight: 20,
71+
paddingLeft: 16,
72+
paddingRight: 16,
8573
},
8674
icon: {
8775
alignSelf: 'center',
88-
8976
},
9077
row: {
9178
display: 'flex',

‎example/examples/src/routes/Flex/index.tsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export default class FlexView extends React.Component<FlexViewProps> {
5555
<Container>
5656
<Layout>
5757
<Header title={title} description={description} />
58-
<Body>
58+
<Body style={{paddingLeft: 16, paddingRight: 16}}>
5959
<Card title="主轴为水平方向，起点在左端: direction='row'">
6060
<Flex>
6161
<Flex.Item>
@@ -135,20 +135,17 @@ export default class FlexView extends React.Component<FlexViewProps> {
135135
</Card>
136136
<Card title="起点对齐 align='start'">
137137
<Flex align="start">
138-
<Square size={30} /> <Square size={26} /> <Square size={22} />{' '}
139-
<Square size={18} />
138+
<Square size={30} /> <Square size={26} /> <Square size={22} /> <Square size={18} />
140139
</Flex>
141140
</Card>
142141
<Card title="中点对齐 align='center'">
143142
<Flex align="center">
144-
<Square size={30} /> <Square size={26} /> <Square size={22} />{' '}
145-
<Square size={18} />
143+
<Square size={30} /> <Square size={26} /> <Square size={22} /> <Square size={18} />
146144
</Flex>
147145
</Card>
148146
<Card title="终点对齐 align='end'">
149147
<Flex align="end">
150-
<Square size={30} /> <Square size={26} /> <Square size={22} />{' '}
151-
<Square size={18} />
148+
<Square size={30} /> <Square size={26} /> <Square size={22} /> <Square size={18} />
152149
</Flex>
153150
</Card>
154151
<Card title="如果项目未设置高度或设为auto，将占满整个容器的高度 align='stretch'">

0 commit comments

Comments
 (0)