Skip to content

Commit

Permalink
fix:utils add colorsPalette&Update Table and Card
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChenlingasMx
ChenlingasMx committed Aug 17, 2021
1 parent 11983fb commit 4dcd2fb
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 46 deletions.
2 changes: 2 additions & 0 deletions example/examples/src/routes/Table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ const SearchBarDemo = (props: ComProps) => {
{ id: '2', partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
{ id: '3', partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
{ id: '4', partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
{ id: '5', partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
{ id: '6', partName: 'Chanel', partBrand: '香奈儿', partModel: 'xl', remark: 'ff爱zz,三生三世用相随' },
]}
rowKey="id"
/>
Expand Down
12 changes: 6 additions & 6 deletions packages/core/src/Card/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { check } from 'prettier';
import React from 'react';
import {
View,
Expand All @@ -15,6 +14,7 @@ import {
import Divider from '../Divider'
import Icon from '../Icon'
import { checked } from './svg'
import { colors } from '../utils'

export type CardProps = {
containerStyle?: StyleProp<ViewStyle>;
Expand Down Expand Up @@ -117,18 +117,18 @@ const Card = ({

const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
backgroundColor: colors.white,
borderWidth: 1,
padding: 15,
margin: 15,
marginBottom: 0,
borderColor: '#F5F5F5',
borderColor: colors.colorsPalette.grey80,
...Platform.select({
android: {
elevation: 1,
},
default: {
shadowColor: '#D3D3D3',
shadowColor: colors.colorsPalette.grey40,
shadowOffset: { height: 5, width: 0 },
shadowOpacity: 0.25,
shadowRadius: 12,
Expand All @@ -137,7 +137,7 @@ const styles = StyleSheet.create({
},
title: {
fontSize: 14,
color: '#808080',
color: colors.colorsPalette.grey30,
...Platform.select({
android: {
fontFamily: 'sans-serif',
Expand All @@ -157,7 +157,7 @@ const styles = StyleSheet.create({
...StyleSheet.absoluteFillObject,
borderRadius: 12,
borderWidth: 2,
borderColor: '#5847FF'
borderColor: colors.colorsPalette.violet30
},
selectedIndicator: {
borderRadius: 999,
Expand Down
18 changes: 11 additions & 7 deletions packages/core/src/Table/BodyRow.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

import { colors } from '../utils'
interface BodyRowProps {
columns: Array<columnsState>;
record: Object | any;
Expand Down Expand Up @@ -36,13 +36,13 @@ export default function BodyRow({ columns, record, style }: BodyRowProps) {
let textEllipsize: textEllipsizeState | any =
itm.ellipsis && itm.ellipsis
? {
numberOfLines: 1,
ellipsizeMode: 'tail',
}
numberOfLines: 1,
ellipsizeMode: 'tail',
}
: null;

return (
<View key={itm.dataIndex} style={[styles.cell, itm.style]}>
<View key={itm.dataIndex} style={[idx === 0 && styles.firstLeftCell, styles.cell, itm.style]}>
{itm.render ? (
itm.render(record)
) : (
Expand All @@ -63,18 +63,22 @@ const styles = StyleSheet.create({
justifyContent: 'center',
alignContent: 'center',
borderBottomWidth: 1,
borderColor: '#E5E5E5',
borderColor: colors.colorsPalette.dark70,
},
cell: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
borderRightWidth: 1,
borderRightColor: '#E5E5E5',
borderColor: colors.colorsPalette.dark70,
paddingTop: 4,
paddingBottom: 4,
backgroundColor: '#fff',
},
firstLeftCell: {
borderLeftWidth: 1,
borderColor: colors.colorsPalette.dark70,
},
content: {
color: '#888888',
},
Expand Down
45 changes: 12 additions & 33 deletions packages/core/src/Table/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { View, Text, StyleSheet, Dimensions, ScrollView } from 'react-native';
import BodyRow from './BodyRow';
import { colors } from '../utils'

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

return (
<ScrollView style={[styles.conW, style]} horizontal={horizontal} >
<View>
<ScrollView horizontal={!horizontal}>
<View style={styles.conTitle}>
{columns.map((itm, idx) => (
<View
Expand All @@ -44,40 +45,34 @@ const Table = ({ data, columns, rowKey, horizontal = true, style }: TableProps)
key={key}
columns={columns}
record={item}
style={{ borderBottomWidth: idx === data.length - 1 ? 0 : 1 }}
style={{ borderBottomWidth: idx === data.length - 1 ? 1 : 1 }}
/>
);
})}
{data.length === 0 && <Text style={styles.noDataText}>暂无数据...</Text>}
</View>
</ScrollView>
</ScrollView>
);
};

const styles = StyleSheet.create({
title: {
backgroundColor: '#fff',
backgroundColor: colors.white,
height: 30,
},
conTitle: {
flexDirection: 'row',
borderBottomWidth: 1,
borderColor: '#E5E5E5',
borderWidth: 1,
borderColor: colors.colorsPalette.dark70,
},
content: {
color: '#888888',
},
conn: {
flexDirection: 'row',
borderBottomWidth: 1,
borderColor: '#E5E5E5',
color: colors.colorsPalette.dark30,
},

contRight: {
borderRightWidth: 1,
flex: 1,
borderRightColor: '#E5E5E5',
borderBottomColor: '#E5E5E5',
borderRightColor: colors.colorsPalette.dark70,
borderBottomColor: colors.colorsPalette.dark70,
color: '#888888',
flexDirection: 'row',
alignItems: 'center',
Expand All @@ -86,30 +81,14 @@ const styles = StyleSheet.create({
paddingBottom: 5,
},
conW: {
borderTopLeftRadius: 5,
borderTopRightRadius: 5,
// overflow: 'hidden',
borderWidth: 1,
borderTopWidth: 0,
borderColor: '#E5E5E5',
// marginTop: 10,
width: Dimensions.get('window').width,
backgroundColor: '#fff',
// marginBottom: 20
backgroundColor: colors.white,
},
noDataText: {
color: '#888888',
textAlign: 'center',
paddingTop: 4,
paddingBottom: 4,
},
row: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
borderBottomWidth: 1,
borderColor: '#E5E5E5',
},
}
});

export default Table;
94 changes: 94 additions & 0 deletions packages/core/src/utils/colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,97 @@ export const red = '#dc3545'; // 危险-红色

export const black = '#000000';
export const white = '#ffffff';

export const colorsPalette = {
// DARKS TODO: deprecate and use greys
dark10: '#20303C',
dark20: '#43515C',
dark30: '#66737C',
dark40: '#858F96',
dark50: '#A3ABB0',
dark60: '#C2C7CB',
dark70: '#E0E3E5',
dark80: '#F2F4F5',
// GREYS
grey10: '#20303C',
grey20: '#4D5963',
grey30: '#79838A',
grey40: '#A6ACB1',
grey50: '#D2D6D8',
grey60: '#E8ECF0',
grey70: '#F0F4F7',
grey80: '#F8f9FA',
// BLUES
blue10: '#0097C3',
blue20: '#00A8DA',
blue30: '#00BBF2',
blue40: '#40CCF6',
blue50: '#85DFF9',
blue60: '#B2EAFB',
blue70: '#CFF3FD',
blue80: '#E3F8FE',
// CYAN,
cyan10: '#00AAAF',
cyan20: '#32BABC',
cyan30: '#3CC7C5',
cyan40: '#64D4D2',
cyan50: '#8BDFDD',
cyan60: '#B1E9E9',
cyan70: '#D8F4F4',
cyan80: '#EBF9F9',
// GREENS
green10: '#00A36F',
green20: '#00B47A',
green30: '#00CD8B',
green40: '#45DBAA',
green50: '#87E7C8',
green60: '#B2F0DC',
green70: '#CFF6E9',
green80: '#E3FAF2',
// YELLOWS
yellow10: '#E19800',
yellow20: '#F0A700',
yellow30: '#FFB600',
yellow40: '#FFCA45',
yellow50: '#FFDD87',
yellow60: '#FFEAB5',
yellow70: '#FFF2D1',
yellow80: '#FFF7E3',
// ORANGE,
orange10: '#D9644A',
orange20: '#E66A4E',
orange30: '#F27052',
orange40: '#F37E63',
orange50: '#F7A997',
orange60: '#FAC6BA',
orange70: '#FCE2DC',
orange80: '#FEF0ED',
// REDS
red10: '#D72E15',
red20: '#EB4229',
red30: '#FF563D',
red40: '#FF8472',
red50: '#FFB2A6',
red60: '#FFD0C9',
red70: '#FFE3DE',
red80: '#FFF0ED',
// PURPLE,
purple10: '#8B1079',
purple20: '#A0138E',
purple30: '#B13DAC',
purple40: '#C164BD',
purple50: '#D08BCD',
purple60: '#E0B1DE',
purple70: '#EFD8EE',
purple80: '#F7EBF7',
// VIOLETS
violet10: '#3022D0',
violet20: '#4434EB',
violet30: '#5847FF',
violet40: '#8579FF',
violet50: '#B2ABFF',
violet60: '#D1CCFF',
violet70: '#E3E0FF',
violet80: '#F0EEFF',
transparent: 'transparent'
};

0 comments on commit 4dcd2fb

Please sign in to comment.