Skip to content

Commit 9e18327

Browse files
ChenlingasMxChenlingasMx
committed
Merge branch 'dev' of https://github.com/uiwjs/react-native-uiw into dev
2 parents 749b8ed + 62db185 commit 9e18327

File tree

13 files changed

+358
-60
lines changed

13 files changed

+358
-60
lines changed

‎example/examples/src/routes.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -506,4 +506,12 @@ export const stackPageData: Routes[] = [
506506
description: '可以折叠/展开的内容区域。',
507507
},
508508
},
509+
{
510+
name: 'VerificationCode',
511+
component: require('./routes/VerificationCode').default,
512+
params: {
513+
title: 'VerificationCode 验证码倒计时',
514+
description: '验证码倒计时组件',
515+
},
516+
},
509517
];

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

Lines changed: 13 additions & 13 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={{paddingLeft: 16, paddingRight: 16}}>
19+
<Body style={{ paddingLeft: 16, paddingRight: 16 }}>
2020
<Card title="基础实例">
2121
<Flex>
2222
<Button type="primary">蓝色按钮</Button>
@@ -42,7 +42,7 @@ export default class ButtonView extends React.Component<ButtonViewProps> {
4242
加载中 loading
4343
</Button>
4444
<Spacing />
45-
<Button type="light" loading>
45+
<Button type="light" bordered={true} loading>
4646
亮按钮 light
4747
</Button>
4848
<Spacing />
@@ -104,13 +104,13 @@ export default class ButtonView extends React.Component<ButtonViewProps> {
104104
<Button color="#a63d2c">自定义颜色{'color="#a63d2c"'}</Button>
105105
</Card>
106106
<Card title="文本样式">
107-
<Button textStyle={{fontSize: 20}} color="yellow">
107+
<Button textStyle={{ fontSize: 20 }} color="yellow">
108108
字号调整{'textStyle = {{fontSize:20}}'}
109109
</Button>
110110
<Spacing />
111-
<Button textStyle={{color: 'blue'}}>文本颜色{'textStyle={{color:"blue"}}'}</Button>
111+
<Button textStyle={{ color: 'blue' }}>文本颜色{'textStyle={{color:"blue"}}'}</Button>
112112
<Spacing />
113-
<Button color="#a63d2c" textStyle={{letterSpacing: 2}}>
113+
<Button color="#a63d2c" textStyle={{ letterSpacing: 2 }}>
114114
文本间距{'textStyle={{letterSpacing:3}}'}
115115
</Button>
116116
</Card>
@@ -119,7 +119,7 @@ export default class ButtonView extends React.Component<ButtonViewProps> {
119119
不显示边框{'bordered={false}'}
120120
</Button>
121121
<Spacing />
122-
<Button bordered={false} color="#28a745">
122+
<Button bordered={true} color="#28a745">
123123
不显示边框{'bordered={false}'}
124124
</Button>
125125
</Card>

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

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
import React, { Component, useState } from 'react';
2+
import { VerificationCode } from '@uiw/react-native';
3+
import Layout, { Container } from '../../Layout';
4+
import { ComProps } from '../../routes';
5+
6+
const { Header, Body, Card, Footer } = Layout;
7+
8+
export interface VerificationCodeProps extends ComProps {
9+
onBefore?: () => Promise<boolean>;
10+
onSend?: () => Promise<boolean> | boolean;
11+
}
12+
13+
const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({ route }) => {
14+
const [value, setValue] = useState('');
15+
const description = route.params.description;
16+
const title = route.params.title;
17+
18+
const onChange = (val: string) => {
19+
console.log('onChange--> 输入改变事件 ', val);
20+
setValue(val)
21+
};
22+
23+
const onBefore = async () => {
24+
console.log('onBefore--> 发验证码之前的回调 ');
25+
return true;
26+
}
27+
28+
const onSend = async () => {
29+
console.log('onSend--> 发送验证码');
30+
return true;
31+
}
32+
33+
const onEnd = () => {
34+
console.log('onEnd--> 倒计时结束后的回调');
35+
}
36+
37+
return (
38+
<Container>
39+
<Layout>
40+
<Header title={title} description={description} />
41+
<Body style={{ paddingLeft: 16, paddingRight: 16 }}>
42+
<Card title="基础实例">
43+
<VerificationCode
44+
value={value}
45+
count={3}
46+
onChange={(text: string) => onChange(text)}
47+
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
48+
49+
/>
50+
</Card>
51+
<Card title="无边框">
52+
<VerificationCode
53+
bordered={false}
54+
label='我没框框哦'
55+
count={3}
56+
onChange={(text: string) => onChange(text)}
57+
outerStyle={{ backgroundColor: '#FFF' }}
58+
/>
59+
</Card>
60+
<Card title="自定义倒计时文字和重新发送文字">
61+
<VerificationCode
62+
label='点我'
63+
resendLabel='好了'
64+
value={value}
65+
count={3}
66+
onChange={(text: string) => onChange(text)}
67+
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
68+
/>
69+
</Card>
70+
<Card title="自定义倒计时时长">
71+
<VerificationCode
72+
count={10}
73+
value={value}
74+
onChange={(text: string) => onChange(text)}
75+
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
76+
/>
77+
</Card>
78+
<Card title="输入改变事件">
79+
<VerificationCode
80+
value={value}
81+
count={3}
82+
onChange={(text: string) => onChange(text)}
83+
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
84+
/>
85+
</Card>
86+
<Card title="发验证码之前的回调">
87+
<VerificationCode
88+
value={value}
89+
count={3}
90+
onChange={(text: string) => onChange(text)}
91+
onBefore={onBefore}
92+
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
93+
/>
94+
</Card>
95+
<Card title="发送验证码">
96+
<VerificationCode
97+
value={value}
98+
count={3}
99+
onChange={(text: string) => onChange(text)}
100+
onSend={onSend}
101+
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
102+
/>
103+
</Card>
104+
<Card title="倒计时结束后的回调">
105+
<VerificationCode
106+
value={value}
107+
count={3}
108+
onChange={(text: string) => onChange(text)}
109+
onEnd={onEnd}
110+
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
111+
/>
112+
</Card>
113+
<Card title="自定义外层输入框样式">
114+
<VerificationCode
115+
value={value}
116+
count={3}
117+
onChange={(text: string) => onChange(text)}
118+
outerStyle={{ backgroundColor: '#FFD21D', borderWidth: 1, borderColor: "#ccc" }}
119+
/>
120+
</Card>
121+
<Card title="自定义内层按钮样式">
122+
<VerificationCode
123+
bordered={false}
124+
value={value}
125+
count={3}
126+
onChange={(text: string) => onChange(text)}
127+
buttonStyle={{ backgroundColor: '#F86E21' }}
128+
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
129+
/>
130+
</Card>
131+
<Card title="自定义按钮文字样式">
132+
<VerificationCode
133+
value={value}
134+
count={3}
135+
onChange={(text: string) => onChange(text)}
136+
outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
137+
/>
138+
</Card>
139+
<Card title="自定义输入框提示文字">
140+
<VerificationCode
141+
bordered={false}
142+
value={value}
143+
count={3}
144+
onChange={(text: string) => onChange(text)}
145+
placeholder='请输入112233.....'
146+
outerStyle={{ borderBottomWidth: 1, borderBottomColor: '#CCC' }}
147+
/>
148+
</Card>
149+
</Body>
150+
<Footer />
151+
</Layout>
152+
</Container>
153+
);
154+
}
155+
156+
export default VerificationCodeDemo;
157+

‎packages/core/src/Accordion/README.md‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
Accordion 手风琴组件
22
---
3-
可以折叠/展开的内容区域。
43

4+
可以折叠/展开的内容区域。
55
### 基础示例
66

7+
78
```jsx mdx:preview&background=#bebebe29
89
import React,{ Component } from "react"
910
import { View, Text,Image,Card } from 'react-native';
1011
import { Accordion } from '@uiw/react-native';
1112

13+
function Demo() {
14+
1215
const contents = [
1316
{
1417
title: <Text>Section 1</Text>,
@@ -39,16 +42,17 @@ import { Accordion } from '@uiw/react-native';
3942
},
4043
];
4144

42-
function Demo() {
4345
return (
4446
<View style={{ marginTop: 50 }}>
4547
<Accordion sections={contents} />
4648
</View>
4749
);
4850
}
49-
```
5051

51-
### Props
52+
export default Demo;
53+
54+
```
55+
### Props
5256

5357
| 参数 | 说明 | 类型 | 默认值 |
5458
|------|------|-----|------|
@@ -58,4 +62,3 @@ function Demo() {
5862
| `contentStyle` | 点击展开内容样式 | ViewStyle | - |
5963
| `iconShow` | 是否展示图标 | boolean | true |
6064
| `iconSize` | 设置图标尺寸 | number | - |
61-

‎packages/core/src/Accordion/index.tsx‎

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ const Accordion: FC<AccordionProps> = (props) => {
3333
const [activeIndex, setActiveIndex] = useState<number[] | number>(isMultiple ? [] : -1);
3434
const theme = useTheme<Theme>();
3535
const styles = createStyles({
36-
bgColor: theme.colors.mask,
37-
headerColor: theme.colors.background,
38-
borderColor: theme.colors.border,
36+
bgColor: theme.colors.mask || '#FFFFFF',
37+
headerColor: theme.colors.background || '#F5F5F5',
38+
borderColor: theme.colors.border || '#CCCCCC',
3939
});
4040
const animatedController = useRef(new Animated.Value(0)).current;
4141

@@ -79,28 +79,16 @@ const Accordion: FC<AccordionProps> = (props) => {
7979
>
8080
<View style={styles.titleBy} key={index}>
8181
{item.title}
82-
{iconShow && (
83-
<Animated.View
84-
style={{
85-
transform: [
86-
{
87-
rotateZ:
88-
activeIndex === index || (Array.isArray(activeIndex) && activeIndex.indexOf(index) > -1)
89-
? rotateZ
90-
: '0deg',
91-
},
92-
],
93-
}}
94-
>
95-
<Icon name="right" size={iconSize} color={theme.colors.border} />
96-
</Animated.View>
97-
)}
82+
{iconShow &&
83+
<Animated.View style={{ transform: [{ rotateZ: activeIndex === index || (Array.isArray(activeIndex) && activeIndex.indexOf(index) > -1) ? rotateZ : '0deg' }] }}>
84+
<Icon name="right" size={iconSize} color={theme.colors.border || '#CCCCCC'} />
85+
</Animated.View>}
9886
</View>
9987
</TouchableOpacity>
10088
{((isMultiple && Array.isArray(activeIndex) && activeIndex.indexOf(index) > -1) ||
10189
(!isMultiple && activeIndex === index)) && (
102-
<View style={[styles.content, contentStyle]}>{item.content}</View>
103-
)}
90+
<View style={[styles.content, contentStyle]}>{item.content}</View>
91+
)}
10492
</View>
10593
))}
10694
</View>

0 commit comments

Comments
 (0)