Skip to content

Commit a3282b8

Browse files
ChenlingasMxrenovate[bot]renovate-botjaywcjlovedependabot[bot]
authored
feat(Card): Add selected props & Update example & Update menu to webiste (#175)
* 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文档 * fix:Card组件增加点击选中功能 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 67430ea commit a3282b8

File tree

8 files changed

+125
-25
lines changed

8 files changed

+125
-25
lines changed

‎example/examples/src/routes.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -314,14 +314,14 @@ export const stackPageData: Routes[] = [
314314
description: 'QuickList 快速请求上拉下拉数据列表',
315315
},
316316
},
317-
// {
318-
// name: 'Card',
319-
// component: require('./routes/Card').default,
320-
// params: {
321-
// title: 'Card 卡片',
322-
// description: 'QuickList 最基础的卡片容器，可承载文字、列表、图片、段落。',
323-
// },
324-
// },
317+
{
318+
name: 'Card',
319+
component: require('./routes/Card').default,
320+
params: {
321+
title: 'Card 卡片',
322+
description: 'Card 最基础的卡片容器，可承载文字、列表、图片、段落。',
323+
},
324+
},
325325
{
326326
name: 'NoticeBar',
327327
component: require('./routes/NoticeBar').default,

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

Lines changed: 45 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,63 @@
1-
import React from 'react';
2-
import {SafeAreaView, View, Image} from 'react-native';
3-
import {Card} from '@uiw/react-native';
1+
import React, { useState } from 'react';
2+
import { ScrollView, View, Image } from 'react-native';
3+
import { Card, Divider, Loader } from '@uiw/react-native';
44
import Layout from '../../Layout';
55
const CardDemo = (props: any) => {
6-
const {Header} = Layout;
7-
const {route} = props;
6+
const { Header } = Layout;
7+
const { route } = props;
88
const description = route.params.description;
99
const title = route.params.title;
10+
const [selected, setSelected] = useState(false)
11+
const [loading, setLoad] = useState(true)
1012
return (
11-
<SafeAreaView style={{flex: 1}}>
13+
<ScrollView style={{ flex: 1 }}>
1214
<Header title={title} description={description} />
15+
<Header description={'基本使用'} />
1316
<Card
17+
>
18+
<Loader loading={loading}>
19+
<Image
20+
onLoad={() => setLoad(false)}
21+
source={{
22+
uri: 'https://image11.m1905.cn/uploadfile/2020/ss/0624/20200624104507290748.jpg',
23+
}}
24+
style={{ height: 200 }}
25+
/>
26+
</Loader>
27+
</Card>
28+
<Divider />
29+
<Header description={'带标题下划线圆角卡片'} />
30+
<Card
31+
title="我是标题"
32+
showDriver={true}
33+
borderRadius={12}
34+
>
35+
<Image
36+
source={{
37+
uri: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2019%2F04%2F22%2Fca22d8623fe7454ea9cdb33f3137d14e.jpeg&thumbnail=650x2147483647&quality=80&type=jpg',
38+
}}
39+
style={{ height: 200 }}
40+
/>
41+
</Card>
42+
<Divider />
43+
<Header description={'可点击选中卡片'} />
44+
<Card
45+
selected={selected}
1446
title="我是标题"
1547
showDriver={true}
16-
borderRadius={0}
17-
// onLongPress={() => {}}
48+
borderRadius={12}
49+
onPress={() => { setSelected(!selected) }}
1850
>
19-
<View>
51+
<Loader loading={loading}>
2052
<Image
2153
source={{
22-
uri: 'https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg',
54+
uri: 'https://image11.m1905.cn/uploadfile/2020/ss/0624/20200624104507290748.jpg',
2355
}}
24-
style={{height: 150}}
56+
style={{ height: 200 }}
2557
/>
26-
</View>
58+
</Loader>
2759
</Card>
28-
</SafeAreaView>
60+
</ScrollView>
2961
);
3062
};
3163
export default CardDemo;

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ class Demo extends Component {
1717
<Card
1818
title="我是标题"
1919
showDriver={true}
20-
borderRadius={0}
20+
// borderRadius={12}
2121
// onLongPress={() => {}}
2222
>
2323
<View>
@@ -42,6 +42,7 @@ class Demo extends Component {
4242
| `titleStyle` | 标题样式（可选） | object (style) | none |
4343
| `showDriver` | 是否展示下划线（可选） | Boolean | false |
4444
| `borderRadius` | 设置卡片圆角度数（可选） | Number | none |
45+
| `selected` | 是否选中（可选） | Boolean | none |
4546
| `onPress` | 按下卡片时的动作（可选） | TouchableOpacityProps['onPress']| none |
4647
| `onLongPress` | 长按下卡片时的动作（可选） | TouchableOpacityProps['onLongPress']| none |
4748

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

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { check } from 'prettier';
12
import React from 'react';
23
import {
34
View,
@@ -8,9 +9,12 @@ import {
89
ViewStyle,
910
TextStyle,
1011
TouchableOpacity,
11-
TouchableOpacityProps
12+
TouchableOpacityProps,
13+
Animated
1214
} from 'react-native';
1315
import Divider from '../Divider'
16+
import Icon from '../Icon'
17+
import { checked } from './svg'
1418

1519
export type CardProps = {
1620
containerStyle?: StyleProp<ViewStyle>;
@@ -19,11 +23,13 @@ export type CardProps = {
1923
titleStyle?: StyleProp<TextStyle>;
2024
showDriver?: boolean;
2125
borderRadius?: number;
26+
selected?: boolean;
2227
children?: React.ReactNode;
2328
onPress?: TouchableOpacityProps['onPress'];
2429
onLongPress?: TouchableOpacityProps['onLongPress'];
2530
};
2631

32+
2733
const Card = ({
2834
children,
2935
containerStyle,
@@ -32,14 +38,15 @@ const Card = ({
3238
titleStyle,
3339
showDriver = false,
3440
borderRadius,
41+
selected,
3542
onPress,
3643
onLongPress,
3744
...attributes
3845
}: CardProps) => {
3946
const Container: any = onPress || onLongPress ? TouchableOpacity : View;
4047
// 获取卡片圆角度数
4148
const getBorderRadius = () => {
42-
return borderRadius === undefined ? 12 : borderRadius;
49+
return !borderRadius ? 0 : borderRadius;
4350
}
4451
// 卡片标题
4552
const CardTitle = (
@@ -50,6 +57,31 @@ const Card = ({
5057
</Text>
5158
)
5259

60+
// 卡片选中icon
61+
const renderSelection = () => {
62+
if (!selected) {
63+
return null;
64+
}
65+
return (
66+
<Animated.View
67+
style={[
68+
styles.selectedBorder,
69+
{
70+
opacity: 1,
71+
borderRadius: getBorderRadius()
72+
}
73+
]}
74+
pointerEvents="none"
75+
>
76+
<View
77+
style={styles.selectedIndicator}
78+
>
79+
<Icon xml={checked} size={30} />
80+
</View>
81+
</Animated.View>
82+
);
83+
}
84+
5385
return (
5486
<Container
5587
{...attributes}
@@ -74,10 +106,11 @@ const Card = ({
74106
>
75107
{title && CardTitle}
76108
{
77-
title && showDriver && <Divider style={StyleSheet.flatten([styles.divider])} />
109+
title && showDriver && <Divider style={StyleSheet.flatten([styles.divider])} />
78110
}
79111
{children}
80112
</View>
113+
{renderSelection()}
81114
</Container>
82115
);
83116
};
@@ -120,6 +153,22 @@ const styles = StyleSheet.create({
120153
divider: {
121154
marginBottom: 15,
122155
},
156+
selectedBorder: {
157+
...StyleSheet.absoluteFillObject,
158+
borderRadius: 12,
159+
borderWidth: 2,
160+
borderColor: '#5847FF'
161+
},
162+
selectedIndicator: {
163+
borderRadius: 999,
164+
position: 'absolute',
165+
top: 0,
166+
right: 0,
167+
width: 20,
168+
height: 20,
169+
alignItems: 'center',
170+
justifyContent: 'center',
171+
},
123172
wrapper: {
124173
backgroundColor: 'transparent',
125174
},

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const checked:string = `
2+
<svg t="1628911378978" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13528" width="200" height="200"><path d="M846.336 0H1.536l1024.512 1024V179.2c-0.512-98.816-80.896-179.2-179.712-179.2zM916.48 137.216c0.512 2.048 1.536 4.096 0 4.608-2.048 0-3.584 0-5.12 0.512 2.048-1.536 3.584-3.072 5.12-5.12z m-11.776 15.872c0.512-1.024 1.024-2.56 1.536-3.584v-1.536l1.024-1.024c-0.512 0.512-0.512 1.536-1.024 2.048 0 1.536 1.536 2.56 3.072 2.56s2.56 0 4.096 0.512c-1.024 0-2.56 0-4.096-0.512-2.048 0.512-3.584 1.024-4.608 1.536-1.024 2.048-2.048 3.584-3.584 5.12 0.512-2.56 1.536-4.096 3.584-5.12z m1.536 34.816c-2.048-1.536-4.608-3.072-6.656-2.56v5.12c-8.704 0-10.24 6.144-12.288 12.288 1.536 0.512 3.584 0.512 5.12 1.024 1.536-3.072 0-5.12-3.584-4.096 5.632-1.024 9.728-3.072 12.8-6.144 1.536 1.024 1.024 1.024 2.56 1.536-3.072 8.704-6.144 18.432-7.68 27.648 0 0.512-1.024 1.024-1.536 1.024 0.512 0 0.512 0.512 1.024 0.512-0.512 1.536-0.512 3.072-1.024 4.608v0.512c-1.024 2.048-2.56 3.072-4.608 4.608-3.072 1.536-6.656 3.584-10.24 5.12-5.12 2.048 0 14.848-3.584 22.016 0 1.536-7.168-4.608-7.168-1.536-1.536 6.144-1.536 12.8-5.12 16.896 0 3.072-10.752-0.512-10.752 2.56-1.536 6.144-1.536 25.6 3.584 18.432 7.168-10.752 10.752-18.944 17.408-29.184-3.584 10.752-8.192 21.504-16.384 31.232-5.12 6.144-15.36 11.264-20.992 19.968v0.512c-5.12 13.312-7.68 30.208-17.92 42.496-20.992 22.528-37.376 46.592-54.272 69.632-8.704 11.264-16.896 22.528-26.624 33.28l-7.68 8.704c-4.608 5.12-9.728 10.24-14.336 15.36-9.728 10.24-15.872 20.48-25.088 29.184l-5.632 6.144c-11.776 13.312-17.92 24.064-30.208 31.232-1.536 1.024-5.12-3.072-6.656-5.12-13.824-14.848-27.136-26.112-41.472-36.864-7.168-5.632-14.336-10.752-22.016-16.384-7.168-5.12-13.824-10.24-20.992-15.36-15.872-11.264-28.672-24.576-28.672-48.128-1.024-31.744-37.376-48.64-27.648-25.6-11.776-36.864-33.792-30.208-24.064-67.072 0.512-2.56 16.384-41.984 46.08-37.376h0.512c15.872 11.776 47.104 32.768 57.344 52.224 10.24 21.504 24.064 37.888 38.912 52.736l1.536 1.536 0.512 0.512 1.024 1.024 2.048 2.048 4.096 4.096c2.56 2.56 5.12 5.12 8.192 8.704 0.512 0.512 1.024 0.512 1.536 0.512 2.048-1.024 4.608-2.048 7.168-3.072 2.56-0.512 5.12-2.048 8.192-3.584 3.072-2.048 5.12-2.56 11.264-8.192 10.24-8.704 20.48-18.432 30.208-28.16 36.352-36.352 65.024-72.192 101.888-105.984 5.632-5.12 11.264-10.752 16.384-15.872v0.512c0-0.512 0-0.512 0.512-0.512 2.56-2.56 5.12-5.12 8.192-7.68h1.536-1.024c0.512-0.512 1.536-1.024 2.048-2.048 5.12 1.024 6.144-2.56 7.68-6.144l1.536-3.072 1.536-1.536h-2.56c3.072-3.072 6.144-6.144 9.216-8.704l-1.536 3.072c0 0.512-0.512 1.024-0.512 1.536l4.608-4.608v1.536c0-0.512 0.512-0.512 0.512-1.024 3.584-2.048 6.656-4.608 9.728-6.656 1.536-0.512 1.024-2.048 0.512-4.096v-1.024c10.24-10.752 20.48-22.016 30.72-34.816l0.512-0.512c1.536-0.512 10.24-2.56 15.36-1.536-1.536 0-2.56 1.536-3.072 2.56z m33.792-33.792c-3.584 9.728-6.144 19.456-9.728 29.696-6.144 10.24-9.728 18.432-17.408 29.184-5.12 7.168-5.12-12.288-3.584-18.432 0-3.072 10.752 0.512 10.24-2.56 3.584-4.096 3.584-10.752 5.12-16.896 0-3.072 7.168 3.072 7.168 1.536 3.584-7.168-2.048-19.968 3.584-22.016 3.584-2.048 6.656-3.584 10.24-5.12-2.048 1.024-4.096 2.048-5.632 4.608z m22.016-49.664l-0.512-0.512c-3.584 5.632-8.192 9.728-16.896 11.264 3.584-1.024 5.12 1.024 3.584 4.096-1.536-0.512-3.584-0.512-5.12-1.024 1.536-6.144 3.584-12.288 12.288-12.288v-5.12c2.048-0.512 4.608 1.536 6.656 2.56 0.512-1.024 1.536-2.048 2.048-3.584h0.512c-1.536 2.048-2.048 3.072-2.56 4.608z" fill="#5847FF" p-id="13529"></path><path d="M845.824 242.176c2.048-1.536 3.072-3.072 3.584-5.12-1.536 1.024-3.072 2.56-3.584 5.12zM854.016 236.032c-1.536-0.512-3.072-1.024-3.072-2.56-0.512 1.024-1.024 2.56-1.536 3.584 1.536-0.512 3.072-1.024 4.608-1.024zM854.016 236.032c1.536 0.512 3.072 0 4.096 0.512-1.536-0.512-3.072-0.512-4.096-0.512zM803.84 282.624c5.632 0 9.728-2.048 11.264-5.632 0-0.512 0.512-0.512 1.024-0.512h-1.024c-5.632-0.512-11.264 0-11.264 6.144z" fill="#5847FF" p-id="13530"></path></svg>
3+
`

‎website/src/pages/components/card/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/Card/README.md"
5+
getMarkdown = async () => {
6+
const md = await import('@uiw/react-native/lib/Card/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
@@ -37,6 +37,7 @@ export const componentMenus: MenuData[] = [
3737
{ path: "/components/steps", name: "Steps 步骤条" },
3838
{ path: "/components/timeLine", name: "Timeline 时间轴" },
3939
{ path: "/components/quicklist", name: "QuicList 快速列表" },
40+
{ path: "/components/card", name: "Card 卡片" },
4041
{ divider: true, name: "Feedback" },
4142
{ path: "/components/loader", name: "Loader 加载" },
4243
{ path: "/components/modal", name: "Modal 模态框" },

‎website/src/routes/router.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,4 +180,7 @@ export const getRouterData = {
180180
'/components/quicklist': {
181181
component: dynamicWrapper([], () => import('../pages/components/quicklist')),
182182
},
183+
'/components/card': {
184+
component: dynamicWrapper([], () => import('../pages/components/card')),
185+
},
183186
};

0 commit comments

Comments
 (0)