From 5a21ace999d503545f6589a23adff53003fecfeb Mon Sep 17 00:00:00 2001 From: PhongPV Date: Sun, 17 Feb 2019 20:43:05 +0700 Subject: [PATCH 1/5] [wip] name card component --- .../src/components/Anchors.tsx | 3 + .../react-silk-docs/src/demo/NameCardDemo.tsx | 40 +++++++++ .../src/pages/components/namecard.tsx | 9 ++ .../react-silk-ui/src/components/NameCard.tsx | 89 +++++++++++++++++++ packages/react-silk-ui/src/index.ts | 3 + 5 files changed, 144 insertions(+) create mode 100644 packages/react-silk-docs/src/demo/NameCardDemo.tsx create mode 100644 packages/react-silk-docs/src/pages/components/namecard.tsx create mode 100644 packages/react-silk-ui/src/components/NameCard.tsx diff --git a/packages/react-silk-docs/src/components/Anchors.tsx b/packages/react-silk-docs/src/components/Anchors.tsx index 9935b69..4e8926a 100644 --- a/packages/react-silk-docs/src/components/Anchors.tsx +++ b/packages/react-silk-docs/src/components/Anchors.tsx @@ -33,5 +33,8 @@ export default () => ( Input Pins + + Name Card + ) diff --git a/packages/react-silk-docs/src/demo/NameCardDemo.tsx b/packages/react-silk-docs/src/demo/NameCardDemo.tsx new file mode 100644 index 0000000..52817d3 --- /dev/null +++ b/packages/react-silk-docs/src/demo/NameCardDemo.tsx @@ -0,0 +1,40 @@ +import * as React from 'react' +import { NameCard } from 'react-silk-ui' +import styled from 'styled-components' + +const NameCardWrapper = styled.div` + > div > div { + margin-bottom: 0.5rem; + } +` + +export default () => ( +
+ +
+ + + + +
+ +
+) diff --git a/packages/react-silk-docs/src/pages/components/namecard.tsx b/packages/react-silk-docs/src/pages/components/namecard.tsx new file mode 100644 index 0000000..36ea30a --- /dev/null +++ b/packages/react-silk-docs/src/pages/components/namecard.tsx @@ -0,0 +1,9 @@ +import * as React from 'react' +import MyMom from '.' +import NameCardDemo from '../../demo/NameCardDemo' + +export default () => ( + + + +) diff --git a/packages/react-silk-ui/src/components/NameCard.tsx b/packages/react-silk-ui/src/components/NameCard.tsx new file mode 100644 index 0000000..4d7fcc8 --- /dev/null +++ b/packages/react-silk-ui/src/components/NameCard.tsx @@ -0,0 +1,89 @@ +import * as React from 'react' +import { View, Image, StyleSheet, Dimensions } from 'react-native' +import { Text } from './Text' +import Colors from './Colors' + +const { width } = Dimensions.get('window') + +const styles = StyleSheet.create({ + container: { + paddingVertical: 15, + paddingHorizontal: 10, + width, + backgroundColor: Colors.light, + flexDirection: 'row', + elevation: 4, + shadowOpacity: 0.5, + shadowOffset: { width: 1, height: 2 }, + shadowColor: Colors.light, + }, + imageWrapper: { + flex: 3, + padding: 3, + }, + contentWrapper: { + flex: 7, + padding: 3, + }, + image: { + alignSelf: 'center', + width: '100%', + height: '100%', + }, + title: { + fontSize: 20, + color: Colors.primary, + fontWeight: '500', + }, + subTitle: { + fontSize: 16, + color: Colors.gray, + }, +}) + +export interface Props { + image?: string + title: string + subTitle?: string + rtl?: boolean +} + +export const NameCard = ({ image, title, subTitle, rtl }: Props) => { + return ( + + {rtl ? ( + + + {title} + {subTitle} + + + + + + ) : ( + + + + + + {title} + {subTitle} + + + )} + + ) +} + +NameCard.defaultProps = { + rtl: false, +} diff --git a/packages/react-silk-ui/src/index.ts b/packages/react-silk-ui/src/index.ts index 1efa1bb..6296d2a 100644 --- a/packages/react-silk-ui/src/index.ts +++ b/packages/react-silk-ui/src/index.ts @@ -18,6 +18,7 @@ import { DropdownItem } from './components/Dropdown/Item' import { Carousel } from './components/Carousel' import * as Colors from './components/Colors' import { InputPin } from './components/InputPin' +import { NameCard } from './components/NameCard' export { Text, @@ -39,6 +40,7 @@ export { DropdownItem, Carousel, InputPin, + NameCard, } export default { @@ -61,4 +63,5 @@ export default { DropdownItem, Carousel, InputPin, + NameCard, } From cb887f9d0fb9ab38d7ea4d151987406aaa92d052 Mon Sep 17 00:00:00 2001 From: PhongPV Date: Tue, 19 Feb 2019 21:13:34 +0700 Subject: [PATCH 2/5] [feat] name card component --- .../react-silk-docs/src/demo/NameCardDemo.tsx | 32 +++++++++++++------ .../react-silk-ui/src/components/NameCard.tsx | 26 +++++++-------- 2 files changed, 35 insertions(+), 23 deletions(-) diff --git a/packages/react-silk-docs/src/demo/NameCardDemo.tsx b/packages/react-silk-docs/src/demo/NameCardDemo.tsx index 52817d3..45354e5 100644 --- a/packages/react-silk-docs/src/demo/NameCardDemo.tsx +++ b/packages/react-silk-docs/src/demo/NameCardDemo.tsx @@ -3,6 +3,7 @@ import { NameCard } from 'react-silk-ui' import styled from 'styled-components' const NameCardWrapper = styled.div` + display: flex; > div > div { margin-bottom: 0.5rem; } @@ -13,25 +14,36 @@ export default () => (
+ +
diff --git a/packages/react-silk-ui/src/components/NameCard.tsx b/packages/react-silk-ui/src/components/NameCard.tsx index 4d7fcc8..ec0d4fe 100644 --- a/packages/react-silk-ui/src/components/NameCard.tsx +++ b/packages/react-silk-ui/src/components/NameCard.tsx @@ -3,36 +3,36 @@ import { View, Image, StyleSheet, Dimensions } from 'react-native' import { Text } from './Text' import Colors from './Colors' -const { width } = Dimensions.get('window') - const styles = StyleSheet.create({ container: { - paddingVertical: 15, + flex: 1, + paddingVertical: 30, paddingHorizontal: 10, - width, - backgroundColor: Colors.light, + backgroundColor: Colors.white, flexDirection: 'row', - elevation: 4, + borderWidth: 1, + borderRadius: 2, + borderColor: Colors.smokeWhite, + borderBottomWidth: 0, + shadowColor: Colors.gray, + shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.5, - shadowOffset: { width: 1, height: 2 }, - shadowColor: Colors.light, + shadowRadius: 2, + elevation: 1, }, imageWrapper: { flex: 3, - padding: 3, }, contentWrapper: { flex: 7, - padding: 3, }, image: { - alignSelf: 'center', width: '100%', height: '100%', }, title: { fontSize: 20, - color: Colors.primary, + color: Colors.dark, fontWeight: '500', }, subTitle: { @@ -53,7 +53,7 @@ export const NameCard = ({ image, title, subTitle, rtl }: Props) => { {rtl ? ( - + {title} {subTitle} From 9086e5e49541764480d9b91195d06b4723560c52 Mon Sep 17 00:00:00 2001 From: PhongPV Date: Tue, 19 Feb 2019 22:07:51 +0700 Subject: [PATCH 3/5] [chore] remove unused code --- .../react-silk-docs/src/demo/NameCardDemo.tsx | 24 +------------------ 1 file changed, 1 insertion(+), 23 deletions(-) diff --git a/packages/react-silk-docs/src/demo/NameCardDemo.tsx b/packages/react-silk-docs/src/demo/NameCardDemo.tsx index 45354e5..ed95107 100644 --- a/packages/react-silk-docs/src/demo/NameCardDemo.tsx +++ b/packages/react-silk-docs/src/demo/NameCardDemo.tsx @@ -18,32 +18,10 @@ export default () => ( title="Bill Gate" subTitle="goblin@gmail.com" /> - - - - From b3ccb56f0f092cf17b9d1ea5b93c7638cb4400a2 Mon Sep 17 00:00:00 2001 From: PhongPV Date: Wed, 20 Feb 2019 11:48:20 +0700 Subject: [PATCH 4/5] [update] resolve issue code --- .../react-silk-docs/src/demo/NameCardDemo.tsx | 2 +- .../react-silk-ui/src/components/NameCard.tsx | 76 +++++++++---------- .../react-silk-ui/src/components/Spacing.ts | 10 +++ 3 files changed, 46 insertions(+), 42 deletions(-) create mode 100644 packages/react-silk-ui/src/components/Spacing.ts diff --git a/packages/react-silk-docs/src/demo/NameCardDemo.tsx b/packages/react-silk-docs/src/demo/NameCardDemo.tsx index ed95107..a0b4529 100644 --- a/packages/react-silk-docs/src/demo/NameCardDemo.tsx +++ b/packages/react-silk-docs/src/demo/NameCardDemo.tsx @@ -21,7 +21,7 @@ export default () => ( diff --git a/packages/react-silk-ui/src/components/NameCard.tsx b/packages/react-silk-ui/src/components/NameCard.tsx index ec0d4fe..02869ce 100644 --- a/packages/react-silk-ui/src/components/NameCard.tsx +++ b/packages/react-silk-ui/src/components/NameCard.tsx @@ -1,12 +1,16 @@ import * as React from 'react' -import { View, Image, StyleSheet, Dimensions } from 'react-native' -import { Text } from './Text' +import { View, Image, StyleSheet } from 'react-native' +import { Heading6, Text } from './Text' import Colors from './Colors' +import Spacing from './Spacing' const styles = StyleSheet.create({ container: { flex: 1, - paddingVertical: 30, + }, + nameCardWrapper: { + flex: 1, + paddingVertical: 15, paddingHorizontal: 10, backgroundColor: Colors.white, flexDirection: 'row', @@ -22,22 +26,22 @@ const styles = StyleSheet.create({ }, imageWrapper: { flex: 3, + alignItems: 'center', + justifyContent: 'center', }, contentWrapper: { flex: 7, + justifyContent: 'center', }, image: { - width: '100%', - height: '100%', - }, - title: { - fontSize: 20, - color: Colors.dark, - fontWeight: '500', + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, }, - subTitle: { - fontSize: 16, - color: Colors.gray, + orderReverse: { + flexDirection: 'row-reverse', }, }) @@ -49,37 +53,27 @@ export interface Props { } export const NameCard = ({ image, title, subTitle, rtl }: Props) => { + const orderStyles = [] + if (!rtl) { + orderStyles.push(styles.orderReverse) + } return ( - - {rtl ? ( - - - {title} - {subTitle} - - - - + + + + {title} + {subTitle} - ) : ( - - - - - - {title} - {subTitle} - + + - )} + ) } diff --git a/packages/react-silk-ui/src/components/Spacing.ts b/packages/react-silk-ui/src/components/Spacing.ts new file mode 100644 index 0000000..f95dfab --- /dev/null +++ b/packages/react-silk-ui/src/components/Spacing.ts @@ -0,0 +1,10 @@ +import { StyleSheet } from 'react-native' + +export default StyleSheet.create({ + pr10: { + paddingRight: 10, + }, + pl10: { + paddingLeft: 10, + }, +}) From 1d98e357e80c21574cc0217455be9b3541a2c0af Mon Sep 17 00:00:00 2001 From: Hieu Tran Date: Wed, 20 Feb 2019 21:22:22 +0700 Subject: [PATCH 5/5] Change demo avatar --- .../react-silk-docs/src/demo/NameCardDemo.tsx | 6 +-- .../react-silk-ui/src/components/NameCard.tsx | 41 +++++-------------- 2 files changed, 14 insertions(+), 33 deletions(-) diff --git a/packages/react-silk-docs/src/demo/NameCardDemo.tsx b/packages/react-silk-docs/src/demo/NameCardDemo.tsx index a0b4529..5bc5095 100644 --- a/packages/react-silk-docs/src/demo/NameCardDemo.tsx +++ b/packages/react-silk-docs/src/demo/NameCardDemo.tsx @@ -14,14 +14,14 @@ export default () => (
diff --git a/packages/react-silk-ui/src/components/NameCard.tsx b/packages/react-silk-ui/src/components/NameCard.tsx index 02869ce..1b233dd 100644 --- a/packages/react-silk-ui/src/components/NameCard.tsx +++ b/packages/react-silk-ui/src/components/NameCard.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { View, Image, StyleSheet } from 'react-native' -import { Heading6, Text } from './Text' +import { Heading5, Heading6, Text } from './Text' import Colors from './Colors' import Spacing from './Spacing' @@ -10,39 +10,26 @@ const styles = StyleSheet.create({ }, nameCardWrapper: { flex: 1, - paddingVertical: 15, - paddingHorizontal: 10, + padding: 10, backgroundColor: Colors.white, flexDirection: 'row', borderWidth: 1, - borderRadius: 2, - borderColor: Colors.smokeWhite, - borderBottomWidth: 0, - shadowColor: Colors.gray, - shadowOffset: { width: 0, height: 1 }, - shadowOpacity: 0.5, - shadowRadius: 2, - elevation: 1, - }, - imageWrapper: { - flex: 3, - alignItems: 'center', - justifyContent: 'center', + borderColor: Colors.gray, }, contentWrapper: { - flex: 7, + flex: 1, justifyContent: 'center', }, image: { - position: 'absolute', - top: 0, - left: 0, - bottom: 0, - right: 0, + width: 80, + height: 80, }, orderReverse: { flexDirection: 'row-reverse', }, + title: { + marginBottom: 0, + }, }) export interface Props { @@ -63,16 +50,10 @@ export const NameCard = ({ image, title, subTitle, rtl }: Props) => { - {title} + {title} {subTitle} - - - + )