Skip to content

Commit e816a13

Browse files
ChenlingasMxChenlingasMx
committed
Merge branch 'dev'
2 parents 70a8523 + 8701050 commit e816a13

File tree

8 files changed

+52
-59
lines changed

8 files changed

+52
-59
lines changed

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

Lines changed: 13 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const {Header, Body, Card, Footer} = Layout;
88
export interface VerificationCodeProps extends ComProps {
99
onBefore?: () => Promise<boolean>;
1010
onSend?: () => Promise<boolean> | boolean;
11+
inputBorder?: boolean;
1112
}
1213

1314
const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
@@ -40,13 +41,14 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
4041
<Header title={title} description={description} />
4142
<Body style={{paddingLeft: 16, paddingRight: 16}}>
4243
<Card title="基础实例">
43-
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
44+
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderColor: '#ccc'}} />
4445
</Card>
4546
<Card title="无边框">
4647
<VerificationCode
4748
bordered={false}
4849
label="我没框框哦"
4950
count={3}
51+
inputBorder={false}
5052
onChange={(text: string) => onChange(text)}
5153
outerStyle={{backgroundColor: '#FFF'}}
5254
buttonStyle={{backgroundColor: '#fff'}}
@@ -59,48 +61,30 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
5961
value={value}
6062
count={3}
6163
onChange={(text: string) => onChange(text)}
62-
outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
64+
outerStyle={{borderColor: '#ccc'}}
6365
/>
6466
</Card>
6567
<Card title="自定义倒计时时长">
66-
<VerificationCode count={10} value={value} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
68+
<VerificationCode count={10} value={value} onChange={(text: string) => onChange(text)} outerStyle={{borderColor: '#ccc'}} />
6769
</Card>
6870
<Card title="输入改变事件">
69-
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
71+
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderColor: '#ccc'}} />
7072
</Card>
7173
<Card title="发验证码之前的回调">
72-
<VerificationCode
73-
value={value}
74-
count={3}
75-
onChange={(text: string) => onChange(text)}
76-
onBefore={onBefore}
77-
outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
78-
/>
74+
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} onBefore={onBefore} outerStyle={{borderColor: '#ccc'}} />
7975
</Card>
8076
<Card title="发送验证码">
81-
<VerificationCode
82-
value={value}
83-
count={3}
84-
onChange={(text: string) => onChange(text)}
85-
onSend={onSend}
86-
outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
87-
/>
77+
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} onSend={onSend} outerStyle={{borderColor: '#ccc'}} />
8878
</Card>
8979
<Card title="倒计时结束后的回调">
90-
<VerificationCode
91-
value={value}
92-
count={3}
93-
onChange={(text: string) => onChange(text)}
94-
onEnd={onEnd}
95-
outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
96-
/>
80+
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} onEnd={onEnd} outerStyle={{borderColor: '#ccc'}} />
9781
</Card>
9882
<Card title="自定义外层输入框样式">
9983
<VerificationCode
10084
value={value}
10185
count={3}
10286
onChange={(text: string) => onChange(text)}
103-
outerStyle={{backgroundColor: '#FFD21D', borderWidth: 1, borderColor: '#ccc'}}
87+
outerStyle={{backgroundColor: '#FFD21D', borderColor: '#ccc'}}
10488
/>
10589
</Card>
10690
<Card title="自定义内层按钮样式">
@@ -110,11 +94,11 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
11094
count={3}
11195
onChange={(text: string) => onChange(text)}
11296
buttonStyle={{backgroundColor: '#F86E21'}}
113-
outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
97+
outerStyle={{borderColor: '#ccc'}}
11498
/>
11599
</Card>
116100
<Card title="自定义按钮文字样式">
117-
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
101+
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderColor: '#ccc'}} />
118102
</Card>
119103
<Card title="自定义输入框提示文字">
120104
<VerificationCode
@@ -123,7 +107,7 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
123107
count={3}
124108
onChange={(text: string) => onChange(text)}
125109
placeholder="请输入112233....."
126-
outerStyle={{borderBottomWidth: 1, borderBottomColor: '#CCC'}}
110+
outerStyle={{borderBottomColor: '#CCC'}}
127111
/>
128112
</Card>
129113
</Body>

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44

55
### 1. 基础示例 ImageHeader
66

7-
```jsx
7+
<!--DemoStart-->
8+
```jsx mdx:preview&background=#bebebe29
89
import React, { Component } from 'react';
910
import { ImageHeader,Avatar } from '@uiw/react-native';
1011
import { View, Text } from 'react-native';
@@ -13,7 +14,7 @@ function Demo () {
1314
return (
1415
<ImageHeader
1516
safeBgColor='#010101'
16-
headerHeight={150}
17+
headerHeight={200}
1718
headerLeft={<></>}
1819
>
1920
<View style={{
@@ -65,6 +66,8 @@ function Demo () {
6566
}
6667
export default Demo
6768
```
69+
<!--End-->
70+
6871
## ImageHeader 组件 API
6972

7073
| 属性 | 必填 | 说明 | 类型 | 默认值 |
@@ -74,12 +77,13 @@ export default Demo
7477
| headerLeft | `false` | 头部左侧内容 | `ReactNode` | |
7578
| headerLeftColor | `false` | 左侧返回键和字体颜色 | `string` | `theme.colors.primaryColor` |
7679
| headerBackgroundColor | `false` | 头部背景颜色 | `string` | `transparent` |
77-
| headerBackgroundImg | `true` | 头部背景图片 | `ImageSourcePropType` | |
80+
| safeBgColor | `true` | 设置全局背景色 | `string` | |
7881
| headerHeight | `false` | 头部高度 | `number` | |
7982
| onPress | `false` | 左边图标点击事件 | `() => void` | |
8083
| showLeft | `false` | 是否显示左边图标 | `boolean` | `true` |
84+
| statusBarStyle | `false` | 设置状态栏颜色 | `'default' | 'dark-content' | 'light-content'` | `default` |
8185

82-
## AnimateHeader 组件 API
86+
<!-- ## AnimateHeader 组件 API
8387
8488
| 属性 | 必填 | 说明 | 类型 | 默认值 |
8589
| --- | --- | --- | --- | --- |
@@ -93,4 +97,4 @@ export default Demo
9397
| headerLeftColor | `false` | 左侧返回键和字体颜色 | `string` | `theme.colors.primaryColor` |
9498
| headerBackgroundColor | `false` | 头部背景颜色 | `string` | `transparent` |
9599
| onPress | `false` | 左边按钮点击事件 | `() => void` | |
96-
| showLeft | `false` | 是否显示左边图标 | `boolean` | `true` |
100+
| showLeft | `false` | 是否显示左边图标 | `boolean` | `true` | -->

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { FC, PropsWithChildren, ReactNode } from 'react';
22
import { Text, SafeAreaView, StatusBar, TouchableOpacity, View, Platform } from 'react-native';
3-
import { useSafeAreaInsets } from 'react-native-safe-area-context';
43
import { Theme } from '../theme';
54
import { useTheme } from '@shopify/restyle';
65

@@ -37,7 +36,6 @@ export type ImageHeaderProps = PropsWithChildren<{
3736

3837
const ImageHeader: FC<ImageHeaderProps> = (props) => {
3938
const theme = useTheme<Theme>();
40-
const insets = useSafeAreaInsets();
4139

4240
const {
4341
headerRight,
@@ -71,7 +69,7 @@ const ImageHeader: FC<ImageHeaderProps> = (props) => {
7169
<SafeAreaView style={{ width: '100%', height: headerHeight, backgroundColor: safeBgColor }}>
7270
<Flex
7371
style={{
74-
paddingTop: isIOS ? insets.top + theme.spacing.x2 : theme.spacing.x5,
72+
paddingTop: isIOS ? theme.spacing.x2 : theme.spacing.x5,
7573
paddingBottom: theme.spacing.x2,
7674
paddingRight: theme.spacing.x3,
7775
backgroundColor: headerBackgroundColor,

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,16 @@ LoginPage 登录页
55
### 基础示例
66

77
<!--DemoStart-->
8-
```jsx
8+
9+
```jsx mdx:preview&background=#bebebe29
910
import React,{Fragment} from 'react';
1011
import { View} from 'react-native';
1112
import { LoginPage } from '@uiw/react-native';
1213

1314
const Demo = () => {
1415
return (
1516
<Fragment>
16-
<View>
17-
<LoginPage />
18-
</View>
17+
<LoginPage />
1918
</Fragment>
2019
);
2120
}

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

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Icon from '../Icon';
44
import VerificationCode from '../VerificationCode';
55
import { Theme } from '../theme';
66
import { useTheme } from '@shopify/restyle';
7-
import { logSvg, cEyes, oEyes } from './svg';
7+
// import { logSvg, cEyes, oEyes } from './svg';
88

99
interface LoginPageProps {
1010
/** 自定义账号输入框为空时显示的文字 */
@@ -19,6 +19,8 @@ interface LoginPageProps {
1919
buttonText?: string;
2020
/** 自定义忘记密码，切换登录方式 */
2121
customContent?: React.ReactNode;
22+
/** 自定义登录logo和login文字 */
23+
titleContent?: React.ReactNode;
2224
/** 登录按钮事件 */
2325
onLogin?: (username: string, password: string) => void;
2426
/** 忘记密码按钮事件 */
@@ -32,12 +34,12 @@ const LoginPage: React.FC<LoginPageProps> = ({
3234
buttonStyle = {},
3335
buttonText = 'Login',
3436
customContent,
37+
titleContent,
3538
onLogin,
3639
onForgetPassword,
3740
}) => {
3841
const [showPsd, setShowPsd] = useState(false);
39-
const [showCode, setShowCode] = useState(false); // added state
40-
console.log('showCode', showCode);
42+
const [showCode, setShowCode] = useState(false);
4143

4244
const theme = useTheme<Theme>();
4345
const styles = createStyles({
@@ -48,12 +50,10 @@ const LoginPage: React.FC<LoginPageProps> = ({
4850
const [password, setPassword] = useState('');
4951

5052
const onChangeUsername = (val: string) => {
51-
console.log('onChange--> 输入改变事件 ', val);
5253
setUsername(val);
5354
};
5455

5556
const onChangePassword = (val: string) => {
56-
console.log('onChange--> 输入改变事件 ', val);
5757
setPassword(val);
5858
};
5959

@@ -66,10 +66,12 @@ const LoginPage: React.FC<LoginPageProps> = ({
6666
return (
6767
<View style={[styles.container, { backgroundColor: theme.colors.background }, containerStyle]}>
6868
<View style={styles.content}>
69-
<View style={styles.center}>
70-
<Icon xml={logSvg(theme)} size={30} />
71-
<Text style={styles.title}>Login</Text>
72-
</View>
69+
{titleContent || (
70+
<View style={styles.center}>
71+
<Icon name="uiw" size={35} />
72+
<Text style={styles.title}>Login</Text>
73+
</View>
74+
)}
7375
<View style={[styles.inputContainer, { paddingHorizontal: 15 }, inputContainerStyle]}>
7476
<TextInput
7577
placeholder={usernamePlaceholder ? usernamePlaceholder : `请输入${showCode ? '手机号码' : '用户名'}`}
@@ -80,7 +82,9 @@ const LoginPage: React.FC<LoginPageProps> = ({
8082
/>
8183
</View>
8284
{!showCode ? (
83-
<View style={[styles.inputContainer, styles.inputC, { paddingHorizontal: 15 }, inputContainerStyle]}>
85+
<View
86+
style={[styles.inputContainer, styles.inputC, { paddingLeft: 15, paddingRight: 15 }, inputContainerStyle]}
87+
>
8488
<TextInput
8589
placeholder="请输入密码"
8690
placeholderTextColor={theme.colors.border}
@@ -89,18 +93,18 @@ const LoginPage: React.FC<LoginPageProps> = ({
8993
onChangeText={onChangePassword}
9094
/>
9195
<TouchableOpacity onPress={() => setShowPsd(!showPsd)}>
92-
<Icon xml={showPsd ? cEyes : oEyes} size={20} />
96+
<Icon name={showPsd ? 'eye' : 'eye-o'} size={20} color="#8a8a8a" />
9397
</TouchableOpacity>
9498
</View>
9599
) : (
96100
<VerificationCode
97101
value={password}
98102
count={60}
99103
onChange={onChangePassword}
104+
inputBorder={false}
100105
outerStyle={[styles.inputContainer, styles.inputC, inputContainerStyle]}
101106
/>
102107
)}
103-
104108
<View>
105109
{customContent || (
106110
<View style={styles.textSty1}>
@@ -113,7 +117,6 @@ const LoginPage: React.FC<LoginPageProps> = ({
113117
</View>
114118
)}
115119
</View>
116-
117120
<TouchableOpacity style={[styles.button, buttonStyle]} onPress={handleLogin}>
118121
<Text style={[styles.buttonText, styles.buttonTextStyle]}>{buttonText}</Text>
119122
</TouchableOpacity>
@@ -159,7 +162,7 @@ function createStyles({ border, putCol }: CreStyle) {
159162
alignItems: 'center',
160163
},
161164
inputC: {
162-
paddingHorizontal: 10,
165+
paddingLeft: 10,
163166
marginTop: 20,
164167
marginBottom: 5,
165168
},

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function Demo() {
1919
value={value}
2020
count={60}
2121
onChange={(text) => onChange(text)}
22-
outerStyle={{ backgroundColor: '#FFF', borderWidth: 1, borderColor: "#ccc" }}
22+
outerStyle={{ backgroundColor: '#FFF' }}
2323
/>
2424
</View>
2525
);
@@ -43,3 +43,4 @@ export default Demo
4343
| `outerStyle` | 输入框外层自定义样式 | `StyleProp<ViewStyle>` | - |
4444
| `buttonStyle` | 按钮自定义样式 | `StyleProp<ViewStyle>` | - |
4545
| `placeholder` | 输入框空白时自定义展示 | string | `请输入验证码` |
46+
| `inputBorder` | 是否展示输入框边框 | boolean | true |

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ interface VerificationCodeProps {
3131
buttonStyle?: StyleProp<ViewStyle>;
3232
/**输入框空白时自定义展示 */
3333
placeholder?: string;
34+
/**是否展示输入框边框 */
35+
inputBorder?: boolean;
3436
}
3537

3638
const VerificationCode: FC<VerificationCodeProps> = ({
@@ -46,6 +48,7 @@ const VerificationCode: FC<VerificationCodeProps> = ({
4648
outerStyle = {},
4749
buttonStyle = {},
4850
placeholder = '请输入验证码',
51+
inputBorder = true,
4952
}) => {
5053
const [timer, setTimer] = useState(count);
5154
const [disabled, setDisabled] = useState(false);
@@ -75,7 +78,7 @@ const VerificationCode: FC<VerificationCodeProps> = ({
7578

7679
return (
7780
<Input
78-
border={null}
81+
border={inputBorder ? 'always' : null}
7982
containerStyle={[{ height: 40 }, outerStyle]}
8083
placeholder={placeholder}
8184
placeholderTextColor={theme.colors.border}
@@ -86,8 +89,9 @@ const VerificationCode: FC<VerificationCodeProps> = ({
8689
bordered={bordered}
8790
disabled={disabled}
8891
onPress={handleClick}
89-
color={theme.colors.background || '#fff'}
92+
color={theme.colors.background || 'transparent'}
9093
style={[buttonStyle]}
94+
size="small"
9195
>
9296
<Text color={disabled ? 'disabled' : 'text'}>{disabled ? `${resendLabel}(${timer}s)` : label}</Text>
9397
</Button>

‎website/src/routes/menus.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const componentMenus: MenuData[] = [
4343
{ path: '/components/transitionImage', name: 'TransitionImage 图片过渡' },
4444
{ path: '/components/verificationCode', name: 'VerificationCode 验证码倒计时组件' },
4545
{ path: '/components/loginPage', name: 'LoginPage 登录页组件' },
46-
{ path: '/components/imageHeader', name: 'imageHeader 图片头部组件' },
46+
{ path: '/components/imageHeader', name: 'ImageHeader 图片头部组件' },
4747

4848
{ divider: true, name: 'Data Display 信息录入' },
4949
{ path: '/components/checkbox', name: 'CheckBox 复选框' },

0 commit comments

Comments
 (0)