Skip to content

Commit 2db9c6a

Browse files
ChenlingasMxrenovate[bot]renovate-botjaywcjlovedependabot[bot]
authored
feat: 添加 Card 组件 & 更新 QuickList官网文档 & 删除TableDemo多余代码 (#167)
* chore(deps): add renovate.json (#6) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): pin dependencies (#7) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore(deps): update react-navigation monorepo * fix(deps): update dependency @types/color to v3.0.1 * chore(deps): update dependency react-navigation-stack to v2 * released v1.6.1 * feat(CheckBox): Enhance checkedIcon/unCheckedIcon props. * chore: Update @uiw/icons to v2.4.3 * released v1.6.2 * doc(CheckBox): Update README.md * feat: Modify unCheckedIcon default value. * released v1.6.3 * chore(deps): Update react-native to v0.62.2 * chore(deps): pin dependencies * chore(deps): update dependency tsbb to v1.7.3 * chore: Modify example. * chore: Fix homepage layout issue. * chore: Format the code. * released v1.7.0 * released v1.7.1 * chore: Remove redundant codes. * released v1.7.2 * feat: Add MaskLayer component. * feat: Add usePrevious. * fix: Fix Animated errors. * fix: Fix Modal style. * released v1.7.3 * released v1.7.4 * Update dependency tsbb to v1.7.4 * Update dependency react-native-safe-area-context to v2 * Update dependency @types/react-native to v0.62.11 * Update react-navigation monorepo * Update dependency react-native-safe-area-context to v2.0.1 * Update react-navigation monorepo * Update dependency react-native-safe-area-context to v3 * chore(deps): bump lodash from 4.17.15 to 4.17.19 Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.19. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](lodash/lodash@4.17.15...4.17.19) Signed-off-by: dependabot[bot] <support@github.com> * Update dependency tsbb to v1.7.6 * Upgrade react-native to v0.63.2 (#61) Co-authored-by: songjie@nihaosi.com <songjie@nihaosi.com> * 恢复babel.config的eslink,删除不需要上传的flowconfig (#65) * react-native升级0.63.2 * 恢复babel的eslink * flx删除不需要上传的flowconfig Co-authored-by: songjie@nihaosi.com <songjie@nihaosi.com> * chore(deps): bump logkitty from 0.6.1 to 0.7.1 Bumps [logkitty](https://github.com/zamotany/logkitty) from 0.6.1 to 0.7.1. - [Release notes](https://github.com/zamotany/logkitty/releases) - [Commits](zamotany/logkitty@v0.6.1...v0.7.1) Signed-off-by: dependabot[bot] <support@github.com> * doc: Update README.md * fix:解决MenuDropdown组件下拉报错 * 升级TypeScript，注释babel.config.js两行代码 (#68) * react-native升级0.63.2 * 恢复babel的eslink * flx删除不需要上传的flowconfig * flx升级TypeScript，注释babel.config.js两行代码 Co-authored-by: songjie@nihaosi.com <songjie@nihaosi.com> * Create LICENSE * fix(SelectCascader): update native Pick * chore: Update ios/UIW.xcodeproj/project.pbxproj &yarn.lock * chore: Update dependencies * released v1.7.5 * fix: update react-native-svg * fix: update react-native-svg * doc: Update README.md * chore: Update dependencies. * released v1.7.5 * released v1.7.6 * chore(deps): pin dependencies * chore: remove package-lock.json * chore(deps): update dependency typescript to v4 * chore: Update yarn.lock * doc: Update README.md * chore(deps): update dependency tsbb to v1.7.8 * fix(Icon): Add fill default value. * chore(deps): update dependency react-native to v0.64 * chore: update yarn.lock * released v1.7.6 * type: Fix type errors. * released v1.7.6 * released v1.8.0 * fix:SearchBar组件 * released v1.9.0 * type(SearchBar): Fix type errors. #93 * released v1.9.1 * fix:SearchBar组件 * fix:Table表格 * #95 * released v1.10.0 * chore(doc): Update README.md * fix(deps): update dependency @react-native-picker/picker to v1.16.0 * chore(deps): update react-navigation monorepo * Wx (#103) * fix:解决MenuDropdown组件下拉报错 * fix:SearchBar组件 * fix:Table表格 * fix:展开组件封装,修复xcode14.5无法运行问题 * fix:update package.json * released v1.11.0 * chore: publish npm using workflows. * chore: update workflows config. * type: fix tsconfig.json errors. * chore(deps): update dependency fs-extra to v10 * chore(deps): update dependency prettier to v2.3.1 * chore(deps): update dependency tsbb to v2.2.1 * fix(deps): update dependency @uiw/icons to v2.5.1 * chore(deps): update dependencies. * released v1.12.0 * fix:team团队页面调用github用户信息接口 * fix:解决svg报错 * fix:Tab example报错和封装quickList 组件 * fix:QuickList routes Demo * fix:删除Table demo 多余代码 * fix:Card 组件 * fix:QuickLidt文档 Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: jaywcjlove <398188662@qq.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: cc <33281802+matuanc@users.noreply.github.com> Co-authored-by: songjie@nihaosi.com <songjie@nihaosi.com> Co-authored-by: 小弟调调™ <kennyiseeyou@gmail.com> Co-authored-by: xingyuefeng <15262870437@163.com>
1 parent e8ed97c commit 2db9c6a

File tree

9 files changed

+245
-19
lines changed

9 files changed

+245
-19
lines changed

‎example/examples/src/routes.tsx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -306,12 +306,20 @@ export const stackPageData: Routes[] = [
306306
description: 'Tabs 选项卡组件跨不同屏幕、数据集和其他交互的内容。',
307307
},
308308
},
309+
{
310+
name: 'QuickList',
311+
component: require('./routes/QuickList').default,
312+
params: {
313+
title: 'QuickList 快速请求列表',
314+
description: 'QuickList 快速请求上拉下拉数据列表',
315+
},
316+
},
309317
// {
310-
// name: 'QuickList',
311-
// component: require('./routes/QuickList').default,
318+
// name: 'Card',
319+
// component: require('./routes/Card').default,
312320
// params: {
313-
// title: 'QuickList 快速请求列表',
314-
// description: 'QuickList 快速请求上拉下拉数据列表',
321+
// title: 'Card 卡片',
322+
// description: 'QuickList 最基础的卡片容器，可承载文字、列表、图片、段落。',
315323
// },
316324
// },
317325
];

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import {SafeAreaView, View, Image} from 'react-native';
3+
import {Card} from '@uiw/react-native';
4+
import Layout from '../../Layout';
5+
const CardDemo = (props: any) => {
6+
const {Header} = Layout;
7+
const {route} = props;
8+
const description = route.params.description;
9+
const title = route.params.title;
10+
return (
11+
<SafeAreaView style={{flex: 1}}>
12+
<Header title={title} description={description} />
13+
<Card
14+
title="我是标题"
15+
showDriver={true}
16+
borderRadius={0}
17+
// onLongPress={() => {}}
18+
>
19+
<View>
20+
<Image
21+
source={{
22+
uri: 'https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg',
23+
}}
24+
style={{height: 150}}
25+
/>
26+
</View>
27+
</Card>
28+
</SafeAreaView>
29+
);
30+
};
31+
export default CardDemo;

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

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,18 @@
1-
import React, { useState } from 'react';
2-
import { SafeAreaView,TouchableHighlight,Text } from 'react-native';
3-
import { Table } from '@uiw/react-native';
1+
import React from 'react';
2+
import {SafeAreaView, TouchableHighlight, Text} from 'react-native';
3+
import {Table} from '@uiw/react-native';
44
import {ComProps} from '../../routes';
55
import Layout from '../../Layout';
66
const SearchBarDemo = (props: ComProps) => {
7-
8-
const { Header } = Layout;
7+
const {Header} = Layout;
98
const {route} = props;
109
const description = route.params.description;
1110
const title = route.params.title;
1211

13-
const [data, setData] = useState([
14-
{ label: '上海', value: 1 },
15-
{ label: '南京', value: 2 }
16-
])
1712
return (
18-
<SafeAreaView style={{ flex: 1 }}>
19-
<Header title={title} description={description} />
20-
<Table
13+
<SafeAreaView style={{flex: 1}}>
14+
<Header title={title} description={description} />
15+
<Table
2116
columns={[
2217
{
2318
title: '类型',
@@ -32,9 +27,9 @@ const SearchBarDemo = (props: ComProps) => {
3227
{
3328
title: '操作',
3429
dataIndex: 'id',
35-
render: (record: any) => {
30+
render: () => {
3631
return (
37-
<TouchableHighlight onPress={()=>{ }}>
32+
<TouchableHighlight onPress={() => {}}>
3833
<Text style={{color: '#888'}}>查看</Text>
3934
</TouchableHighlight>
4035
);
@@ -52,4 +47,4 @@ const SearchBarDemo = (props: ComProps) => {
5247
</SafeAreaView>
5348
);
5449
};
55-
export default SearchBarDemo;
50+
export default SearchBarDemo;

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
Card 卡片
2+
---
3+
4+
最基础的卡片容器，可承载文字、列表、图片、段落。
5+
6+
### 基础示例
7+
8+
<!--DemoStart-->
9+
```jsx
10+
import { SafeAreaView, View, Image } from 'react-native';
11+
import { Card } from '@uiw/react-native';
12+
13+
class Demo extends Component {
14+
render() {
15+
return (
16+
<SafeAreaView style={{ flex: 1 }}>
17+
<Card
18+
title="我是标题"
19+
showDriver={true}
20+
borderRadius={0}
21+
// onLongPress={() => {}}
22+
>
23+
<View>
24+
<Image source={{ uri: 'https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg' }} style={{ height: 150 }} />
25+
</View>
26+
</Card>
27+
</SafeAreaView>
28+
)
29+
}
30+
}
31+
```
32+
<!--End-->
33+
34+
35+
## Props
36+
37+
| 参数 | 说明 | 类型 | 默认值 |
38+
|------|------|-----|------|
39+
| `containerStyle` | 外容器样式（可选） | object (style) | none |
40+
| `wrapperStyle` | 内容器样式（可选） | object (style) | none |
41+
| `title` | 标题（可选） | String | none |
42+
| `titleStyle` | 标题样式（可选） | object (style) | none |
43+
| `showDriver` | 是否展示下划线（可选） | Boolean | false |
44+
| `borderRadius` | 设置卡片圆角度数（可选） | Number | none |
45+
| `onPress` | 按下卡片时的动作（可选） | TouchableOpacityProps['onPress']| none |
46+
| `onLongPress` | 长按下卡片时的动作（可选） | TouchableOpacityProps['onLongPress']| none |
47+

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

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import React from 'react';
2+
import {
3+
View,
4+
Text,
5+
Platform,
6+
StyleSheet,
7+
StyleProp,
8+
ViewStyle,
9+
TextStyle,
10+
TouchableOpacity,
11+
TouchableOpacityProps
12+
} from 'react-native';
13+
import Divider from '../Divider'
14+
15+
export type CardProps = {
16+
containerStyle?: StyleProp<ViewStyle>;
17+
wrapperStyle?: StyleProp<ViewStyle>;
18+
title?: string
19+
titleStyle?: StyleProp<TextStyle>;
20+
showDriver?: boolean;
21+
borderRadius?: number;
22+
children?: React.ReactNode;
23+
onPress?: TouchableOpacityProps['onPress'];
24+
onLongPress?: TouchableOpacityProps['onLongPress'];
25+
};
26+
27+
const Card = ({
28+
children,
29+
containerStyle,
30+
wrapperStyle,
31+
title,
32+
titleStyle,
33+
showDriver = false,
34+
borderRadius,
35+
onPress,
36+
onLongPress,
37+
...attributes
38+
}: CardProps) => {
39+
const Container: any = onPress || onLongPress ? TouchableOpacity : View;
40+
// 获取卡片圆角度数
41+
const getBorderRadius = () => {
42+
return borderRadius === undefined ? 12 : borderRadius;
43+
}
44+
// 卡片标题
45+
const CardTitle = (
46+
<Text
47+
testID="cardTitle"
48+
style={StyleSheet.flatten([styles.title, titleStyle]) as TextStyle}>
49+
{title}
50+
</Text>
51+
)
52+
53+
return (
54+
<Container
55+
{...attributes}
56+
onPress={onPress}
57+
delayPressIn={10}
58+
activeOpacity={0.6}
59+
style={StyleSheet.flatten([
60+
styles.container,
61+
containerStyle && containerStyle,
62+
// 圆角
63+
{
64+
borderRadius: getBorderRadius(),
65+
elevation: 2
66+
}
67+
])}
68+
>
69+
<View
70+
style={StyleSheet.flatten([
71+
styles.wrapper,
72+
wrapperStyle && wrapperStyle,
73+
])}
74+
>
75+
{title && CardTitle}
76+
{
77+
title && showDriver && <Divider style={StyleSheet.flatten([styles.divider])} />
78+
}
79+
{children}
80+
</View>
81+
</Container>
82+
);
83+
};
84+
85+
const styles = StyleSheet.create({
86+
container: {
87+
backgroundColor: '#fff',
88+
borderWidth: 1,
89+
padding: 15,
90+
margin: 15,
91+
marginBottom: 0,
92+
borderColor: '#F5F5F5',
93+
...Platform.select({
94+
android: {
95+
elevation: 1,
96+
},
97+
default: {
98+
shadowColor: '#D3D3D3',
99+
shadowOffset: { height: 5, width: 0 },
100+
shadowOpacity: 0.25,
101+
shadowRadius: 12,
102+
},
103+
}),
104+
},
105+
title: {
106+
fontSize: 14,
107+
color: '#808080',
108+
...Platform.select({
109+
android: {
110+
fontFamily: 'sans-serif',
111+
fontWeight: 'bold',
112+
},
113+
default: {
114+
fontWeight: 'bold',
115+
},
116+
}),
117+
textAlign: 'center',
118+
marginBottom: 15,
119+
},
120+
divider: {
121+
marginBottom: 15,
122+
},
123+
wrapper: {
124+
backgroundColor: 'transparent',
125+
},
126+
});
127+
128+
export default Card

‎packages/core/src/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,8 @@ export { default as Tabs } from './Tabs'
7272
export * from './Tabs'
7373
export { default as QuickList } from './QuickList'
7474
export * from './QuickList'
75+
export { default as Card } from './Card'
76+
export * from './Card'
7577

7678
/**
7779
* Typography

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Markdown, { importAll } from '../../../component/Markdown';
2+
3+
export default class Page extends Markdown {
4+
path="/packages/core/src/QuickList/README.md"
5+
getMarkdown = async () => {
6+
const md = await import('@uiw/react-native/lib/QuickList/README.md');
7+
// 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
8+
importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
9+
return md.default || md;
10+
}
11+
}

‎website/src/routes/menus.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export const componentMenus: MenuData[] = [
3636
{ path: "/components/list", name: "List 列表" },
3737
{ path: "/components/steps", name: "Steps 步骤条" },
3838
{ path: "/components/timeLine", name: "Timeline 时间轴" },
39+
{ path: "/components/quicklist", name: "QuicList 快速列表" },
3940
{ divider: true, name: "Feedback" },
4041
{ path: "/components/loader", name: "Loader 加载" },
4142
{ path: "/components/modal", name: "Modal 模态框" },

‎website/src/routes/router.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,4 +177,7 @@ export const getRouterData = {
177177
'/components/tabs': {
178178
component: dynamicWrapper([], () => import('../pages/components/tabs')),
179179
},
180+
'/components/quicklist': {
181+
component: dynamicWrapper([], () => import('../pages/components/quicklist')),
182+
},
180183
};

0 commit comments

Comments
 (0)