Skip to content

Commit 4dcd2fb

Browse files
ChenlingasMxChenlingasMx
committed
fix:utils add colorsPalette&Update Table and Card
1 parent 11983fb commit 4dcd2fb

File tree

5 files changed

+125
-46
lines changed

5 files changed

+125
-46
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@ const SearchBarDemo = (props: ComProps) => {
5353
{ id: '2', partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
5454
{ id: '3', partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
5555
{ id: '4', partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
56+
{ id: '5', partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
57+
{ id: '6', partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
5658
]}
5759
rowKey="id"
5860
/>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { check } from 'prettier';
21
import React from 'react';
32
import {
43
View,
@@ -15,6 +14,7 @@ import {
1514
import Divider from '../Divider'
1615
import Icon from '../Icon'
1716
import { checked } from './svg'
17+
import { colors } from '../utils'
1818

1919
export type CardProps = {
2020
containerStyle?: StyleProp<ViewStyle>;
@@ -117,18 +117,18 @@ const Card = ({
117117

118118
const styles = StyleSheet.create({
119119
container: {
120-
backgroundColor: '#fff',
120+
backgroundColor: colors.white,
121121
borderWidth: 1,
122122
padding: 15,
123123
margin: 15,
124124
marginBottom: 0,
125-
borderColor: '#F5F5F5',
125+
borderColor: colors.colorsPalette.grey80,
126126
...Platform.select({
127127
android: {
128128
elevation: 1,
129129
},
130130
default: {
131-
shadowColor: '#D3D3D3',
131+
shadowColor: colors.colorsPalette.grey40,
132132
shadowOffset: { height: 5, width: 0 },
133133
shadowOpacity: 0.25,
134134
shadowRadius: 12,
@@ -137,7 +137,7 @@ const styles = StyleSheet.create({
137137
},
138138
title: {
139139
fontSize: 14,
140-
color: '#808080',
140+
color: colors.colorsPalette.grey30,
141141
...Platform.select({
142142
android: {
143143
fontFamily: 'sans-serif',
@@ -157,7 +157,7 @@ const styles = StyleSheet.create({
157157
...StyleSheet.absoluteFillObject,
158158
borderRadius: 12,
159159
borderWidth: 2,
160-
borderColor: '#5847FF'
160+
borderColor: colors.colorsPalette.violet30
161161
},
162162
selectedIndicator: {
163163
borderRadius: 999,

‎packages/core/src/Table/BodyRow.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { View, Text, StyleSheet } from 'react-native';
3-
3+
import { colors } from '../utils'
44
interface BodyRowProps {
55
columns: Array<columnsState>;
66
record: Object | any;
@@ -36,13 +36,13 @@ export default function BodyRow({ columns, record, style }: BodyRowProps) {
3636
let textEllipsize: textEllipsizeState | any =
3737
itm.ellipsis && itm.ellipsis
3838
? {
39-
numberOfLines: 1,
40-
ellipsizeMode: 'tail',
41-
}
39+
numberOfLines: 1,
40+
ellipsizeMode: 'tail',
41+
}
4242
: null;
4343

4444
return (
45-
<View key={itm.dataIndex} style={[styles.cell, itm.style]}>
45+
<View key={itm.dataIndex} style={[idx === 0 && styles.firstLeftCell, styles.cell, itm.style]}>
4646
{itm.render ? (
4747
itm.render(record)
4848
) : (
@@ -63,18 +63,22 @@ const styles = StyleSheet.create({
6363
justifyContent: 'center',
6464
alignContent: 'center',
6565
borderBottomWidth: 1,
66-
borderColor: '#E5E5E5',
66+
borderColor: colors.colorsPalette.dark70,
6767
},
6868
cell: {
6969
flex: 1,
7070
flexDirection: 'row',
7171
justifyContent: 'center',
7272
borderRightWidth: 1,
73-
borderRightColor: '#E5E5E5',
73+
borderColor: colors.colorsPalette.dark70,
7474
paddingTop: 4,
7575
paddingBottom: 4,
7676
backgroundColor: '#fff',
7777
},
78+
firstLeftCell: {
79+
borderLeftWidth: 1,
80+
borderColor: colors.colorsPalette.dark70,
81+
},
7882
content: {
7983
color: '#888888',
8084
},

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

Lines changed: 12 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { View, Text, StyleSheet, Dimensions, ScrollView } from 'react-native';
33
import BodyRow from './BodyRow';
4+
import { colors } from '../utils'
45

56
interface TableProps {
67
data: Array<Object>;
@@ -26,7 +27,7 @@ const Table = ({ data, columns, rowKey, horizontal = true, style }: TableProps)
2627

2728
return (
2829
<ScrollView style={[styles.conW, style]} horizontal={horizontal} >
29-
<View>
30+
<ScrollView horizontal={!horizontal}>
3031
<View style={styles.conTitle}>
3132
{columns.map((itm, idx) => (
3233
<View
@@ -44,40 +45,34 @@ const Table = ({ data, columns, rowKey, horizontal = true, style }: TableProps)
4445
key={key}
4546
columns={columns}
4647
record={item}
47-
style={{ borderBottomWidth: idx === data.length - 1 ? 0 : 1 }}
48+
style={{ borderBottomWidth: idx === data.length - 1 ? 1 : 1 }}
4849
/>
4950
);
5051
})}
5152
{data.length === 0 && <Text style={styles.noDataText}>暂无数据...</Text>}
52-
</View>
53+
</ScrollView>
5354
</ScrollView>
5455
);
5556
};
5657

5758
const styles = StyleSheet.create({
5859
title: {
59-
backgroundColor: '#fff',
60+
backgroundColor: colors.white,
6061
height: 30,
6162
},
6263
conTitle: {
6364
flexDirection: 'row',
64-
borderBottomWidth: 1,
65-
borderColor: '#E5E5E5',
65+
borderWidth: 1,
66+
borderColor: colors.colorsPalette.dark70,
6667
},
6768
content: {
68-
color: '#888888',
69-
},
70-
conn: {
71-
flexDirection: 'row',
72-
borderBottomWidth: 1,
73-
borderColor: '#E5E5E5',
69+
color: colors.colorsPalette.dark30,
7470
},
75-
7671
contRight: {
7772
borderRightWidth: 1,
7873
flex: 1,
79-
borderRightColor: '#E5E5E5',
80-
borderBottomColor: '#E5E5E5',
74+
borderRightColor: colors.colorsPalette.dark70,
75+
borderBottomColor: colors.colorsPalette.dark70,
8176
color: '#888888',
8277
flexDirection: 'row',
8378
alignItems: 'center',
@@ -86,30 +81,14 @@ const styles = StyleSheet.create({
8681
paddingBottom: 5,
8782
},
8883
conW: {
89-
borderTopLeftRadius: 5,
90-
borderTopRightRadius: 5,
91-
// overflow: 'hidden',
92-
borderWidth: 1,
93-
borderTopWidth: 0,
94-
borderColor: '#E5E5E5',
95-
// marginTop: 10,
96-
width: Dimensions.get('window').width,
97-
backgroundColor: '#fff',
98-
// marginBottom: 20
84+
backgroundColor: colors.white,
9985
},
10086
noDataText: {
10187
color: '#888888',
10288
textAlign: 'center',
10389
paddingTop: 4,
10490
paddingBottom: 4,
105-
},
106-
row: {
107-
flex: 1,
108-
flexDirection: 'row',
109-
justifyContent: 'center',
110-
borderBottomWidth: 1,
111-
borderColor: '#E5E5E5',
112-
},
91+
}
11392
});
11493

11594
export default Table;

‎packages/core/src/utils/colors.ts‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,97 @@ export const red = '#dc3545'; // 危险-红色
1010

1111
export const black = '#000000';
1212
export const white = '#ffffff';
13+
14+
export const colorsPalette = {
15+
// DARKS TODO: deprecate and use greys
16+
dark10: '#20303C',
17+
dark20: '#43515C',
18+
dark30: '#66737C',
19+
dark40: '#858F96',
20+
dark50: '#A3ABB0',
21+
dark60: '#C2C7CB',
22+
dark70: '#E0E3E5',
23+
dark80: '#F2F4F5',
24+
// GREYS
25+
grey10: '#20303C',
26+
grey20: '#4D5963',
27+
grey30: '#79838A',
28+
grey40: '#A6ACB1',
29+
grey50: '#D2D6D8',
30+
grey60: '#E8ECF0',
31+
grey70: '#F0F4F7',
32+
grey80: '#F8f9FA',
33+
// BLUES
34+
blue10: '#0097C3',
35+
blue20: '#00A8DA',
36+
blue30: '#00BBF2',
37+
blue40: '#40CCF6',
38+
blue50: '#85DFF9',
39+
blue60: '#B2EAFB',
40+
blue70: '#CFF3FD',
41+
blue80: '#E3F8FE',
42+
// CYAN,
43+
cyan10: '#00AAAF',
44+
cyan20: '#32BABC',
45+
cyan30: '#3CC7C5',
46+
cyan40: '#64D4D2',
47+
cyan50: '#8BDFDD',
48+
cyan60: '#B1E9E9',
49+
cyan70: '#D8F4F4',
50+
cyan80: '#EBF9F9',
51+
// GREENS
52+
green10: '#00A36F',
53+
green20: '#00B47A',
54+
green30: '#00CD8B',
55+
green40: '#45DBAA',
56+
green50: '#87E7C8',
57+
green60: '#B2F0DC',
58+
green70: '#CFF6E9',
59+
green80: '#E3FAF2',
60+
// YELLOWS
61+
yellow10: '#E19800',
62+
yellow20: '#F0A700',
63+
yellow30: '#FFB600',
64+
yellow40: '#FFCA45',
65+
yellow50: '#FFDD87',
66+
yellow60: '#FFEAB5',
67+
yellow70: '#FFF2D1',
68+
yellow80: '#FFF7E3',
69+
// ORANGE,
70+
orange10: '#D9644A',
71+
orange20: '#E66A4E',
72+
orange30: '#F27052',
73+
orange40: '#F37E63',
74+
orange50: '#F7A997',
75+
orange60: '#FAC6BA',
76+
orange70: '#FCE2DC',
77+
orange80: '#FEF0ED',
78+
// REDS
79+
red10: '#D72E15',
80+
red20: '#EB4229',
81+
red30: '#FF563D',
82+
red40: '#FF8472',
83+
red50: '#FFB2A6',
84+
red60: '#FFD0C9',
85+
red70: '#FFE3DE',
86+
red80: '#FFF0ED',
87+
// PURPLE,
88+
purple10: '#8B1079',
89+
purple20: '#A0138E',
90+
purple30: '#B13DAC',
91+
purple40: '#C164BD',
92+
purple50: '#D08BCD',
93+
purple60: '#E0B1DE',
94+
purple70: '#EFD8EE',
95+
purple80: '#F7EBF7',
96+
// VIOLETS
97+
violet10: '#3022D0',
98+
violet20: '#4434EB',
99+
violet30: '#5847FF',
100+
violet40: '#8579FF',
101+
violet50: '#B2ABFF',
102+
violet60: '#D1CCFF',
103+
violet70: '#E3E0FF',
104+
violet80: '#F0EEFF',
105+
transparent: 'transparent'
106+
};

0 commit comments

Comments
 (0)