Skip to content

Commit 48d67f4

Browse files
ChenlingasMxChenlingasMx
committed
fix: 解决冲突
2 parents b46f8d0 + 1a128a7 commit 48d67f4

File tree

10 files changed

+294
-19
lines changed

10 files changed

+294
-19
lines changed

‎example/examples/lib2/ImagePicker/index.js‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,6 @@ const ImagePicker = ({
3131
},
3232
launchLibraryText = '打开相册',
3333
launchCameraText = '打开摄像头',
34-
previewImgText = '预览图片',
35-
deleteImgText = '删除图片',
3634
}) => {
3735
const theme = useTheme();
3836
const styles = createStyles({
@@ -94,11 +92,6 @@ const ImagePicker = ({
9492
<View style={styles.box}>
9593
<TouchableOpacity
9694
activeOpacity={0.5}
97-
// onPress={() => {
98-
// if (loading) return;
99-
// setCurrent(key)
100-
// handleLongPress()
101-
// }}
10295
disabled={true}
10396
style={{
10497
justifyContent: 'center',

‎example/examples/src/routes.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -498,4 +498,12 @@ export const stackPageData: Routes[] = [
498498
description: '图片上传',
499499
},
500500
},
501+
{
502+
name: 'Accordion',
503+
component: require('./routes/Accordion').default,
504+
params: {
505+
title: 'Accordion 手风琴',
506+
description: '可以折叠/展开的内容区域。',
507+
},
508+
},
501509
];

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React, {Component} from 'react';
2+
import {View, Image} from 'react-native';
3+
import {Accordion, Text} from '@uiw/react-native';
4+
import Layout, {Container} from '../../Layout';
5+
import {ComProps} from '../../routes';
6+
const {Header, Body, Card, Footer} = Layout;
7+
8+
export interface Accordion extends ComProps {}
9+
10+
const contents = [
11+
{
12+
title: <Text>Section 1</Text>,
13+
content: (
14+
<View>
15+
<Text>Content of section 1</Text>
16+
<Image source={{uri: 'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg'}} style={{height: 180}} />
17+
</View>
18+
),
19+
},
20+
{
21+
title: <Text>Section 2</Text>,
22+
content: (
23+
<View>
24+
<Text>Content of section 2</Text>
25+
<Image source={{uri: 'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg'}} style={{height: 180}} />
26+
</View>
27+
),
28+
},
29+
{
30+
title: <Text>Section 3</Text>,
31+
content: (
32+
<View>
33+
<Text>Content of section 3</Text>
34+
<Image source={{uri: 'https://iknow-pic.cdn.bcebos.com/810a19d8bc3eb135828572d2ab1ea8d3fd1f441d'}} style={{height: 180}} />
35+
</View>
36+
),
37+
},
38+
];
39+
export default class MenuDropdownView extends Component<Accordion> {
40+
state = {
41+
expanded: false,
42+
top: false,
43+
};
44+
render() {
45+
const {route} = this.props;
46+
const description = route.params.description;
47+
const title = route.params.title;
48+
return (
49+
<Container>
50+
<Layout>
51+
<Header title={title} description={description} />
52+
<Body>
53+
<Card title="基础实例">
54+
<Accordion sections={contents} />
55+
</Card>
56+
<Card title="是否可以展开多个.默认为是,当前为否">
57+
<Accordion sections={contents} isMultiple={false} />
58+
</Card>
59+
<Card title="是否展示右侧图标,默认为是,当前为否">
60+
<Accordion sections={contents} iconShow={false} />
61+
</Card>
62+
<Card title="设置右侧图标尺寸大小">
63+
<Accordion sections={contents} iconSize={30} />
64+
</Card>
65+
<Card title="每行列表手风琴样式">
66+
<Accordion sections={contents} accordionStyle={{backgroundColor: '#3578e5'}} />
67+
</Card>
68+
<Card title="展开手风琴内容样式">
69+
<Accordion sections={contents} contentStyle={{backgroundColor: '#FFD21D'}} />
70+
</Card>
71+
</Body>
72+
<Footer />
73+
</Layout>
74+
</Container>
75+
);
76+
}
77+
}

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
Accordion 手风琴组件
2+
---
3+
可以折叠/展开的内容区域。
4+
5+
### 基础示例
6+
7+
```jsx mdx:preview&background=#bebebe29
8+
import React,{ Component } from "react"
9+
import { View, Text,Image,Card } from 'react-native';
10+
import { Accordion } from '@uiw/react-native';
11+
12+
const contents = [
13+
{
14+
title: <Text>Section 1</Text>,
15+
content: (
16+
<View>
17+
<Text>Content of section 1</Text>
18+
<Image source={{ uri: 'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg' }} style={{ height: 180 }} />
19+
</View>
20+
),
21+
},
22+
{
23+
title: <Text>Section 2</Text>,
24+
content: (
25+
<View>
26+
<Text>Content of section 2</Text>
27+
<Image source={{ uri: 'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg' }} style={{ height: 180 }} />
28+
</View>
29+
),
30+
},
31+
{
32+
title: <Text>Section 3</Text>,
33+
content: (
34+
<View>
35+
<Text>Content of section 3</Text>
36+
<Image source={{ uri: 'https://iknow-pic.cdn.bcebos.com/810a19d8bc3eb135828572d2ab1ea8d3fd1f441d' }} style={{ height: 180 }} />
37+
</View>
38+
),
39+
},
40+
];
41+
42+
function Demo() {
43+
return (
44+
<View style={{ marginTop: 50 }}>
45+
<Accordion sections={contents} />
46+
</View>
47+
);
48+
}
49+
```
50+
51+
### Props
52+
53+
| 参数 | 说明 | 类型 | 默认值 |
54+
|------|------|-----|------|
55+
| `sections` | 自定义手风琴列表，通过`title`参数设置标题，通过`content`参数设置展示内容，通过`isOnPress`参数设置是否禁用 | JSX.Element | - |
56+
| `isMultiple` | 是否同时展示多个内容| boolean | true |
57+
| `accordionStyle` | 手风琴每行列表样式 | ViewStyle | - |
58+
| `contentStyle` | 点击展开内容样式 | ViewStyle | - |
59+
| `iconShow` | 是否展示图标 | boolean | true |
60+
| `iconSize` | 设置图标尺寸 | number | - |
61+

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

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import React, { FC, useState, useRef } from 'react';
2+
import { StyleSheet, View, TouchableOpacity, StyleProp, ViewStyle, LayoutAnimation, Animated } from 'react-native';
3+
import { Theme } from '../theme';
4+
import { useTheme } from '@shopify/restyle';
5+
import Icon from '../Icon';
6+
7+
interface AccordionProps {
8+
/** 自定义手风琴列表*/
9+
sections: {
10+
/** 列表标题内容*/
11+
title: JSX.Element;
12+
/** 展开内容*/
13+
content: JSX.Element;
14+
/** 是否可以点击，默认可以点击*/
15+
isOnPress?: boolean;
16+
}[];
17+
/** 是否展示多个，默认展示多个*/
18+
isMultiple?: boolean;
19+
/** 手风琴每行列表样式 */
20+
accordionStyle?: StyleProp<ViewStyle>;
21+
/** 点击展开内容样式 */
22+
contentStyle?: StyleProp<ViewStyle>;
23+
/** 是否展示图标 */
24+
iconShow?: boolean;
25+
/** 图标源 */
26+
customIcon?: string | JSX.Element;
27+
/** 图标尺寸 */
28+
iconSize?: number;
29+
}
30+
31+
const Accordion: FC<AccordionProps> = (props) => {
32+
const { sections, isMultiple = true, iconShow = true, iconSize = 18, accordionStyle, contentStyle } = props;
33+
const [activeIndex, setActiveIndex] = useState<number[] | number>(isMultiple ? [] : -1);
34+
const theme = useTheme<Theme>();
35+
const styles = createStyles({
36+
bgColor: theme.colors.mask,
37+
headerColor: theme.colors.background,
38+
borderColor: theme.colors.border,
39+
});
40+
const animatedController = useRef(new Animated.Value(0)).current;
41+
42+
const onPress = (index: number | never) => {
43+
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
44+
if (isMultiple) {
45+
const currentIndex = Array.isArray(activeIndex) ? activeIndex.indexOf(index) : -1;
46+
if (currentIndex > -1) {
47+
const newActiveIndex = Array.isArray(activeIndex) ? [...activeIndex] : [];
48+
if (currentIndex > -1) {
49+
newActiveIndex.splice(currentIndex, 1);
50+
}
51+
setActiveIndex(newActiveIndex);
52+
} else {
53+
setActiveIndex(Array.isArray(activeIndex) ? [...activeIndex, index] : [index]);
54+
}
55+
} else {
56+
setActiveIndex(activeIndex === index ? -1 : index);
57+
}
58+
Animated.timing(animatedController, {
59+
toValue: activeIndex === index ? 0 : 1,
60+
duration: 500,
61+
useNativeDriver: true,
62+
}).start();
63+
};
64+
65+
const rotateZ = animatedController.interpolate({
66+
inputRange: [0, 1],
67+
outputRange: ['0deg', '90deg'],
68+
});
69+
70+
return (
71+
<View>
72+
{sections.map((item, index) => (
73+
<View key={index}>
74+
<TouchableOpacity
75+
disabled={item?.isOnPress || false}
76+
activeOpacity={0.8}
77+
onPress={() => onPress(index)}
78+
style={[styles.header, accordionStyle]}
79+
>
80+
<View style={styles.titleBy} key={index}>
81+
{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+
)}
98+
</View>
99+
</TouchableOpacity>
100+
{((isMultiple && Array.isArray(activeIndex) && activeIndex.indexOf(index) > -1) ||
101+
(!isMultiple && activeIndex === index)) && (
102+
<View style={[styles.content, contentStyle]}>{item.content}</View>
103+
)}
104+
</View>
105+
))}
106+
</View>
107+
);
108+
};
109+
110+
type CreStyle = {
111+
bgColor: string;
112+
headerColor: string;
113+
borderColor: string;
114+
};
115+
116+
function createStyles({ bgColor, borderColor, headerColor }: CreStyle) {
117+
return StyleSheet.create({
118+
titleBy: {
119+
flexDirection: 'row',
120+
justifyContent: 'space-between',
121+
},
122+
header: {
123+
borderBottomWidth: 1,
124+
borderBottomColor: borderColor,
125+
padding: 15,
126+
backgroundColor: headerColor,
127+
},
128+
content: {
129+
padding: 15,
130+
backgroundColor: bgColor,
131+
},
132+
});
133+
}
134+
135+
export default Accordion;

‎packages/core/src/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,8 @@ export { default as ImageViewer } from './ImageViewer';
125125
export * from './ImageViewer';
126126
export { default as Form } from './Form';
127127
export * from './Form';
128-
128+
export { default as Accordion } from './Accordion';
129+
export * from './Accordion';
129130
/**
130131
* Typography
131132
*/

‎packages/react-native-image-picker/src/ImagePicker/index.tsx‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,6 @@ export type ImagePickerProps = PropsWithChildren<{
5151
launchLibraryText?: string;
5252
/** 打开摄像头文本 */
5353
launchCameraText?: string;
54-
/** 预览图片文本 */
55-
previewImgText?: string;
56-
/** 删除图片文本 */
57-
deleteImgText?: string;
5854
}>;
5955

6056
const ImagePicker = ({
@@ -85,8 +81,6 @@ const ImagePicker = ({
8581
},
8682
launchLibraryText = '打开相册',
8783
launchCameraText = '打开摄像头',
88-
previewImgText = '预览图片',
89-
deleteImgText = '删除图片',
9084
}: ImagePickerProps) => {
9185
const theme = useTheme<Theme>();
9286
const styles = createStyles({
@@ -144,11 +138,6 @@ const ImagePicker = ({
144138
<View style={styles.box}>
145139
<TouchableOpacity
146140
activeOpacity={0.5}
147-
// onPress={() => {
148-
// if (loading) return;
149-
// setCurrent(key)
150-
// handleLongPress()
151-
// }}
152141
disabled={true}
153142
style={{ justifyContent: 'center', alignItems: 'center', width, height }}
154143
>

‎website/src/pages/components/accordion/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Preview from 'src/component/Preview';
2+
import md from '@uiw/react-native/README.md';
3+
4+
const Demo = () => <Preview {...md} path="/packages/core/src/Accordion/README.md" />;
5+
6+
export default Demo;

‎website/src/routes/menus.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export const componentMenus: MenuData[] = [
2424
{ path: '/components/swipeaction', name: 'SwipeAction 滑动操作组件' },
2525
{ path: '/components/expandablesection', name: 'ExpandableSection 展开缩放组件' },
2626
{ path: '/components/cardcollapse', name: 'CardCollapse 可折叠卡片列表' },
27+
{ path: '/components/accordion', name: 'Accordion 可折叠/展开的内容区域' },
2728
{ divider: true, name: 'Data Entry' },
2829
{ path: '/components/form', name: 'Form 表单 🚧' },
2930
{ path: '/components/checkbox', name: 'CheckBox 复选框' },

‎website/src/routes/router.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -293,6 +293,10 @@ export const routeData = [
293293
path: '/components/cardcollapse',
294294
component: lazy(() => import('../pages/components/cardcollapse')),
295295
},
296+
{
297+
path: '/components/accordion',
298+
component: lazy(() => import('../pages/components/accordion')),
299+
},
296300
{
297301
path: '/components/actionSheet',
298302
component: lazy(() => import('../pages/components/actionSheet')),

0 commit comments

Comments
 (0)