Skip to content

Commit af0c7ff

Browse files
ChenlingasMxChenlingasMx
committed
Merge branch 'dev'
2 parents 65f6c2c + 7bdd489 commit af0c7ff

File tree

36 files changed

+1263
-372
lines changed

36 files changed

+1263
-372
lines changed

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import {ScrollView, View, Image} from 'react-native';
3-
import {CardCollapse} from '@uiw/react-native';
2+
import { ScrollView, View, Image } from 'react-native';
3+
import { CardCollapse } from '@uiw/react-native';
44
import Layout from '../../Layout';
55
import map from 'lodash/map';
66

@@ -12,20 +12,20 @@ const contents = [
1212
];
1313

1414
const CardCollapseDemo = (props: any) => {
15-
const {Header} = Layout;
16-
const {route} = props;
15+
const { Header } = Layout;
16+
const { route } = props;
1717
const description = route.params.description;
1818
const title = route.params.title;
1919

2020
const renderItem = (_: string, index: number) => {
2121
return (
22-
<View key={index} style={{padding: 12}}>
23-
<Image source={{uri: contents[index]}} style={{height: 180}} />
22+
<View key={index} style={{ padding: 12 }}>
23+
<Image source={{ uri: contents[index] }} style={{ height: 180 }} />
2424
</View>
2525
);
2626
};
2727
return (
28-
<ScrollView style={{flex: 1}}>
28+
<ScrollView style={{ flex: 1 }}>
2929
<Header title={title} description={description} />
3030
<Header description={'基本使用'} />
3131
<CardCollapse isCollapsed={false} disablePresses={false}>

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

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -274,12 +274,22 @@ export default class IconPage extends React.Component<IconPageProps> {
274274
const {route} = this.props;
275275
const description = route.params.description;
276276
const title = route.params.title;
277+
const xml = `
278+
<svg width="20" height="20" viewBox="0 0 20 20">
279+
<path
280+
fill-rule="evenodd"
281+
fill="#000"
282+
d="M19 8h-1.26c-.19-.73-.48-1.42-.85-2.06l.94-.94a.996.996 0 0 0 0-1.41l-1.41-1.41a.996.996 0 0 0-1.41 0l-.94.94c-.65-.38-1.34-.67-2.07-.86V1c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1.26c-.76.2-1.47.5-2.13.89L5 2.28a.972.972 0 0 0-1.36 0L2.28 3.64c-.37.38-.37.98 0 1.36l.87.87c-.39.66-.69 1.37-.89 2.13H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h1.26c.19.73.48 1.42.85 2.06l-.94.94a.996.996 0 0 0 0 1.41l1.41 1.41c.39.39 1.02.39 1.41 0l.94-.94c.64.38 1.33.66 2.06.85V19c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1.26c.76-.2 1.47-.5 2.13-.89l.88.87c.37.37.98.37 1.36 0l1.36-1.36c.37-.38.37-.98 0-1.36l-.87-.87c.4-.65.7-1.37.89-2.13H19c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-9 7c-2.76 0-5-2.24-5-5s2.24-5 5-5v10z"
283+
/>
284+
</svg>
285+
`;
277286
return (
278287
<Container>
279288
<Layout>
280289
<Header title={title} description={description} />
281290
<Body>
282291
<Card title="自定义图标">
292+
<Icon name="apple" size={18} color="#50CB42" />
283293
<Icon
284294
paths={[
285295
'M19 0H7c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h5.59l3.71 3.71c.17.18.42.29.7.29.55 0 1-.45 1-1v-3h1c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zM7 13c-1.1 0-2-.9-2-2V4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h1v3a1.003 1.003 0 0 0 1.71.71L7.41 16H13c.55 0 1-.45 1-1v-.17L12.17 13H7z',
@@ -295,7 +305,28 @@ export default class IconPage extends React.Component<IconPageProps> {
295305
size={18}
296306
style={styles.icon}
297307
/>
298-
<Icon name="apple" size={18} color="#50CB42" />
308+
<Icon
309+
size={40}
310+
xml={`
311+
<svg
312+
width="130"
313+
height="130"
314+
fill="blue"
315+
stroke="red"
316+
color="green"
317+
viewBox="-16 -16 544 544"
318+
>
319+
<path
320+
d="M318.37,85.45L422.53,190.11,158.89,455,54.79,350.38ZM501.56,60.2L455.11,13.53a45.93,45.93,0,0,0-65.11,0L345.51,58.24,449.66,162.9l51.9-52.15A35.8,35.8,0,0,0,501.56,60.2ZM0.29,497.49a11.88,11.88,0,0,0,14.34,14.17l116.06-28.28L26.59,378.72Z"
321+
strokeWidth="32"
322+
/>
323+
<path d="M0,0L512,512" stroke="currentColor" strokeWidth="32" />
324+
</svg>
325+
`}
326+
/>
327+
<Icon size={46} xml={xml} />
328+
<Icon name="apple" height={42} width={40} fill="#E3BD8D" stroke="#4d4030" />
329+
<Icon name="apple" height={42} width={40} fill="#E2D849" stroke="#FF9900" />
299330
</Card>
300331
<Card title="UIW Icon" extra={<LinkButtons />}>
301332
<View style={styles.list}>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,14 +132,15 @@ export default class ButtonView<T> extends React.Component<ButtonProps> {
132132
}
133133
return (
134134
<TouchableOpacity
135+
testID="RNE__Button__wrap"
135136
style={[styles.button, styles.content, buttonStyle, boxStyle, style]}
136137
disabled={disabled}
137138
{...restProps}
138139
>
139140
{loading && <ActivityIndicator size={16} color={textColor} style={styles.icon} />}
140141
{React.Children.toArray(children).map((child: any, idx) => {
141142
return (
142-
<Div key={idx} style={[sizeStyle, styles.label, textStyle, childStyle]}>
143+
<Div testID="RNE__Button__div" key={idx} style={[sizeStyle, styles.label, textStyle, childStyle]}>
143144
{child}
144145
</Div>
145146
);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export default class ButtonGroup extends Component<ButtonGroupProps> {
5555
}
5656

5757
return (
58-
<Flex style={styles.default} {...flexProps} {...otherProps}>
58+
<Flex testID="RNE__ButtonGroup__wrap" style={styles.default} {...flexProps} {...otherProps}>
5959
{childs.map((child: React.ReactNode, idx: number) => {
6060
if (!React.isValidElement(child)) {
6161
return null;
@@ -80,7 +80,7 @@ export default class ButtonGroup extends Component<ButtonGroupProps> {
8080
childStyle.borderWidth = 0;
8181
}
8282
if (bordered && !gutter) {
83-
if (((idx > 0 && idx < (children as ButtonProps[]).length - 1)) || idx === 0) {
83+
if ((idx > 0 && idx < (children as ButtonProps[]).length - 1) || idx === 0) {
8484
childStyle.borderRightWidth = StyleSheet.hairlineWidth;
8585
}
8686
if (idx > 0 && idx < (children as ButtonProps[]).length) {

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -298,10 +298,10 @@ const styles = StyleSheet.create({
298298
},
299299
calendarWeekdays: {
300300
flexDirection: 'row',
301-
justifyContent: 'space-between',
301+
justifyContent: 'space-around',
302302
alignItems: 'center',
303303
paddingHorizontal: MainWidth < 1000 ? MainWidth / 7 - 33 : MainWidth / 30,
304-
paddingTop: 10,
304+
paddingTop: 12,
305305
},
306306
calendarWedText: {
307307
color: '#616161',
@@ -312,10 +312,10 @@ const styles = StyleSheet.create({
312312
},
313313
weekDay: {
314314
flexDirection: 'row',
315-
paddingHorizontal: 2,
315+
paddingHorizontal: 22,
316316
},
317317
dateBase: {
318-
marginHorizontal: 2,
318+
marginHorizontal: 8,
319319
width: MainWidth < 1000 ? MainWidth / 7 - 4.5 : MainWidth / 14,
320320
height: MainHeight < 300 ? MainWidth / 7 - 4.5 : MainWidth / 14,
321321
...Platform.select({
@@ -327,15 +327,15 @@ const styles = StyleSheet.create({
327327
},
328328
currentMonth: {
329329
backgroundColor: '#329BCB',
330-
borderRadius: 50,
330+
borderRadius: 60,
331331
},
332332
selectMonth: {
333333
borderWidth: 1,
334334
borderColor: '#329BCB',
335-
borderRadius: 50,
335+
borderRadius: 60,
336336
},
337337
otherMonth: {
338-
borderRadius: 50,
338+
borderRadius: 60,
339339
},
340340
dayText: {
341341
textAlign: 'center',

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

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,56 +3,55 @@ CardCollapse 可折叠卡片列表
33

44
可折叠卡片列表
55

6-
![](https://user-images.githubusercontent.com/66067296/137702190-e48c11e3-77d9-40c3-8d59-09ac6ddc9efb.gif)
7-
86
### 基础示例
97

108
<!--DemoStart-->
11-
```jsx
12-
import React from 'react';
9+
```jsx mdx:preview
10+
import React,{ Component } from 'react';
1311
import { ScrollView, View,Image } from 'react-native';
1412
import { CardCollapse } from '@uiw/react-native';
15-
import Layout from '../../Layout';
13+
import Layout from '../Layout';
1614
import map from 'lodash/map'
1715

16+
const { Header} = Layout;
1817
const contents = [
19-
'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2019%2F04%2F22%2Fca22d8623fe7454ea9cdb33f3137d14e.jpeg&thumbnail=650x2147483647&quality=80&type=jpg',
20-
'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2019%2F04%2F22%2Fca22d8623fe7454ea9cdb33f3137d14e.jpeg&thumbnail=650x2147483647&quality=80&type=jpg',
21-
'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2019%2F04%2F22%2Fca22d8623fe7454ea9cdb33f3137d14e.jpeg&thumbnail=650x2147483647&quality=80&type=jpg',
22-
'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2019%2F04%2F22%2Fca22d8623fe7454ea9cdb33f3137d14e.jpeg&thumbnail=650x2147483647&quality=80&type=jpg'
18+
'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg',
19+
'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg',
20+
'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg',
21+
'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg',
2322
];
2423

25-
const CardCollapseDemo = (props: any) => {
26-
const { Header } = Layout;
27-
const { route } = props;
28-
const description = route.params.description;
29-
const title = route.params.title;
30-
31-
const renderItem = (_: string, index: number) => {
24+
class Demo extends Component {
25+
render() {
26+
const renderItem = (_, index) => {
3227
return (
33-
<View key={index} style={{ padding: 18 }}>
34-
<Image source={{uri: contents[index]}} style={{ height: 150 }} />
28+
<View key={index} style={{ padding: 20,backgroundColor: '#fff'}}>
29+
<Image source={{uri: contents[index]}} style={{ height: 120 }} />
3530
</View>
3631
);
3732
}
38-
return (
33+
return (
3934
<ScrollView style={{ flex: 1 }}>
40-
<Header title={title} description={description} />
4135
<Header description={'基本使用'} />
4236
<CardCollapse
43-
isCollapsed
44-
disablePresses={true}
37+
isCollapsed={false}//是否折叠
38+
disablePresses={true}//卡片是否可以点击
39+
onCollapseWillChange={()=>{}}
40+
onCollapseChanged={()=>{}}
4541
>
4642
{map(contents, (item, index) => {
4743
return renderItem(item, index);
4844
})}
4945
</CardCollapse>
5046
</ScrollView>
51-
);
52-
};
53-
export default CardCollapseDemo;
47+
)
48+
}
49+
}
50+
51+
export default Demo
5452

5553
```
54+
5655
<!--End-->
5756

5857
### Props

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

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -92,17 +92,6 @@ export default function CardCollapse(props: CardCollapseProps) {
9292
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
9393
}, [collapsed]);
9494

95-
function getItemScale(index: number) {
96-
if (collapsed) {
97-
if (index === itemsCount - 2) {
98-
return 0.95;
99-
}
100-
if (index === itemsCount - 1) {
101-
return 0.9;
102-
}
103-
}
104-
return 1;
105-
}
10695
// 动画
10796
const animate = async () => {
10897
return Promise.all([animateValues(), animateCards()]);
@@ -133,6 +122,13 @@ export default function CardCollapse(props: CardCollapseProps) {
133122
});
134123
};
135124

125+
function getItemScale(index: number) {
126+
if (collapsed) {
127+
return 0.9;
128+
}
129+
return 1;
130+
}
131+
136132
const animateCards = () => {
137133
const promises = [];
138134
for (let index = 0; index < itemsCount; index++) {
@@ -210,21 +206,23 @@ export default function CardCollapse(props: CardCollapseProps) {
210206

211207
const renderItem = (item: JSX.Element | JSX.Element[], index: number) => {
212208
return (
213-
<Animated.View
209+
< Animated.View
214210
key={index}
215-
onLayout={index === 0 ? onLayout : undefined}
216-
style={[
217-
Platform.OS === 'ios' && styles.containerShadow,
218-
getStyle(index),
219-
{
220-
borderRadius: Platform.OS === 'ios' ? itemBorderRadius : undefined,
221-
alignSelf: 'center',
222-
zIndex: itemsCount - index,
223-
transform: [{ scaleX: animatedScaleArray[index] }],
224-
width: Dimensions.get('screen').width - 40,
225-
height: collapsed ? firstItemHeight : undefined,
226-
},
227-
]}
211+
onLayout={index === 0 ? onLayout : undefined
212+
}
213+
style={
214+
[
215+
Platform.OS === 'ios' && styles.containerShadow,
216+
getStyle(index),
217+
{
218+
borderRadius: Platform.OS === 'ios' ? itemBorderRadius : undefined,
219+
alignSelf: 'center',
220+
zIndex: itemsCount - index,
221+
transform: [{ scaleX: animatedScaleArray[index] }],
222+
width: Dimensions.get('screen').width - 40,
223+
height: collapsed ? firstItemHeight : undefined,
224+
},
225+
]}
228226
collapsable={false}
229227
>
230228
<Container
@@ -237,7 +235,7 @@ export default function CardCollapse(props: CardCollapseProps) {
237235
</Animated.View>
238236
</TouchableOpacity>
239237
</Container>
240-
</Animated.View>
238+
</Animated.View >
241239
);
242240
};
243241
return (

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

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,12 @@ export default class Divider extends Component<DividerProps> {
4242
if (labelStyle && typeof labelStyle === 'number') {
4343
labelStyle = StyleSheet.flatten(labelStyle);
4444
}
45-
children = <Text style={[styles.label, labelStyle]}> {label} </Text>;
45+
children = (
46+
<Text testID="RNE__Divider__label" style={[styles.label, labelStyle]}>
47+
{' '}
48+
{label}{' '}
49+
</Text>
50+
);
4651
}
4752
if (lineStyle && typeof lineStyle === 'number') {
4853
lineStyle = StyleSheet.flatten(lineStyle);
@@ -53,10 +58,14 @@ export default class Divider extends Component<DividerProps> {
5358
if (orientation === 'right') {
5459
startStyles.unshift({ flexGrow: 100 });
5560
}
56-
const lineStart = <View style={[styles.lineStart, ...lineStyleArr, ...startStyles, lineStyle]} />;
57-
const lineEnd = <View style={[styles.lineEnd, ...lineStyleArr, ...endStyles, lineStyle]} />;
61+
const lineStart = (
62+
<View testID="RNE__Divider__start" style={[styles.lineStart, ...lineStyleArr, ...startStyles, lineStyle]} />
63+
);
64+
const lineEnd = (
65+
<View testID="RNE__Divider__end" style={[styles.lineEnd, ...lineStyleArr, ...endStyles, lineStyle]} />
66+
);
5867
return (
59-
<View style={[styles.warpper, ...warpperStyles, style]} {...restProps}>
68+
<View testID="RNE__Divider__wrap" style={[styles.warpper, ...warpperStyles, style]} {...restProps}>
6069
{lineStart}
6170
{children}
6271
{children && lineEnd}

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

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -132,27 +132,11 @@ class Demo extends Component {
132132

133133
### Props
134134

135-
```ts
136-
export interface EmptyProps extends FlexProps {
137-
/**
138-
* 设置提示文本
139-
*/
140-
label?: string;
141-
/**
142-
* 设置提示音样式
143-
*/
144-
labelStyle?: TextProps['style'];
145-
/**
146-
* 设置 图标尺寸
147-
*/
148-
size?: number;
149-
/**
150-
* 传递 SVG xml 字符串，自定义图标，设为 `null` 将不展示图标。
151-
*/
152-
xml?: string;
153-
/**
154-
* 不光提示文本，还有更多内容，`label` 将不起作用
155-
*/
156-
children?: React.ReactNode;
157-
}
158-
```
135+
| 属性 | 说明 | 类型 | 默认值 |
136+
| --- | --- | --- | --- |
137+
| label | 设置提示文本 | `string` | - |
138+
| labelStyle | 设置提示音样式 | `TextProps['style']` | - |
139+
| size | 设置图标尺寸 | `number` | - |
140+
| xml | 传递 SVG xml 字符串，自定义图标，设为 `null` 将不展示图标 | `string` | - |
141+
| children | 不光提示文本，还有更多内容，`label` 将不起作用 | `React.ReactNode` | - |
142+

0 commit comments

Comments
 (0)