From c3412d0da76a6a75c4d6de04f5e0083cb0c3f116 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Trzci=C5=84ski?= Date: Mon, 15 Jan 2018 15:09:56 +0100 Subject: [PATCH] Avatar (#84) * Avatar component * Flow fixes * CR fix * Changed avatar examples --- docs/assets/avatar.png | Bin 0 -> 17758 bytes docs/avatar.md | 46 +++++++++++++++++ example/rn-cli.config.js | 5 +- example/src/ExampleList.js | 37 ++++++++------ example/src/scenes/Avatars.js | 52 +++++++++++++++++++ src/assets/avatartGradient.png | Bin 0 -> 2236 bytes src/components/Avatar.js | 91 +++++++++++++++++++++++++++++++++ src/index.js | 1 + website/core/Footer.js | 2 +- website/i18n/en.json | 1 + website/sidebars.json | 1 + website/siteConfig.js | 2 +- 12 files changed, 216 insertions(+), 22 deletions(-) create mode 100644 docs/assets/avatar.png create mode 100644 docs/avatar.md create mode 100644 example/src/scenes/Avatars.js create mode 100644 src/assets/avatartGradient.png create mode 100644 src/components/Avatar.js diff --git a/docs/assets/avatar.png b/docs/assets/avatar.png new file mode 100644 index 0000000000000000000000000000000000000000..7c1c2f02645ea13e7bc0f8d2f715bdfcfee7b700 GIT binary patch literal 17758 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 literal 0 HcmV?d00001 diff --git a/docs/avatar.md b/docs/avatar.md new file mode 100644 index 00000000..1396ffb0 --- /dev/null +++ b/docs/avatar.md @@ -0,0 +1,46 @@ +--- +id: avatar +title: Avatar +--- + +Avatar component. + +![Avatar component](assets/avatar.png) + +Example usage: +```javascript + +``` + +## Props + +### `initials` (optional) +**type:** `string` + +String to be displayed inside Avatar. +**default value:** '' + +### `onPress` (optional) +**type:** `void => void` + +onPress event handler. + +### `size` (optional) +**type:** `number` + +Size of an Avatar. + +### `style` (optional) +**type:** `Object` + +Custom styles to apply to Avatar. + +### `theme` (optional) +**type:** [`Theme`](theme.html) + +Custom theme for component. By default provided by the ThemeProvider. + +### `url` (optional) +**type:** `string` + +Url pointing to remote avatar image. diff --git a/example/rn-cli.config.js b/example/rn-cli.config.js index fe7a0936..273825a9 100644 --- a/example/rn-cli.config.js +++ b/example/rn-cli.config.js @@ -15,9 +15,6 @@ module.exports = { return ['react-native', 'react', ...dependencies]; }, getBlacklistRE() { - return blacklist([ - glob(`${path.resolve(__dirname, '..')}/node_modules/*`), - glob(`${path.resolve(__dirname, '..')}/docs/node_modules/*`), - ]); + return blacklist([glob(`${path.resolve(__dirname, '..')}/node_modules/*`)]); }, }; diff --git a/example/src/ExampleList.js b/example/src/ExampleList.js index bbe28bae..47db07f2 100644 --- a/example/src/ExampleList.js +++ b/example/src/ExampleList.js @@ -7,6 +7,7 @@ import type { Theme } from 'react-native-ios-kit/types'; import withSafeArea from './withSafeArea'; import Buttons from './scenes/Buttons'; +import Avatars from './scenes/Avatars'; import Typography from './scenes/Typography'; import TabBar from './scenes/TabBar'; import Stepper from './scenes/Stepper'; @@ -25,49 +26,53 @@ type Route = { const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); const dataSource = ds.cloneWithRows([ + { + component: Avatars, + title: 'Avatars', + }, { component: Buttons, title: 'Buttons', }, { - component: Typography, - title: 'Typography', + component: Icons, + title: 'Icons', }, { - component: TabBar, - title: 'TabBar', + component: SearchBar, + title: 'SearchBar', }, { - component: Stepper, - title: 'Stepper', + component: SegmentedControl, + title: 'SegmentedControl', }, { - component: SearchBar, - title: 'SearchBar', + component: Slider, + title: 'Slider', + }, + { + component: Stepper, + title: 'Stepper', }, { component: Switch, title: 'Switch', }, { - component: SegmentedControl, - title: 'SegmentedControl', + component: TabBar, + title: 'TabBar', }, { component: TableView, title: 'TableView', }, - { - component: Slider, - title: 'Slider', - }, { component: TextField, title: 'TextField', }, { - component: Icons, - title: 'Icons', + component: Typography, + title: 'Typography', }, ]); diff --git a/example/src/scenes/Avatars.js b/example/src/scenes/Avatars.js new file mode 100644 index 00000000..f729c315 --- /dev/null +++ b/example/src/scenes/Avatars.js @@ -0,0 +1,52 @@ +/* @flow */ +import * as React from 'react'; +import { View, StyleSheet } from 'react-native'; + +import { Avatar, withTheme, Body } from 'react-native-ios-kit'; + +import type { Theme } from 'react-native-ios-kit/types'; + +type Props = { + theme: Theme, +}; + +class AvatarExample extends React.Component { + render() { + return ( + + + Default + + + + Url prop + + + + Initials + + + + With onPress handler + alert('Hello')} + /> + + + ); + } +} + +export default withTheme(AvatarExample); + +const styles = StyleSheet.create({ + row: { + flexDirection: 'row', + padding: 10, + borderBottomColor: '#333', + borderBottomWidth: StyleSheet.hairlineWidth, + justifyContent: 'space-between', + alignItems: 'center', + }, +}); diff --git a/src/assets/avatartGradient.png b/src/assets/avatartGradient.png new file mode 100644 index 0000000000000000000000000000000000000000..bfc87cfe027d621392b0818e16cdbdb2ba7c9ecd GIT binary patch literal 2236 zcmY*b4LFl)A75i_MzhvXBI8}_DH4V9rnP6An9vl?O2iUHDPNby@y0f>m5;NIT9MHu0oD?W zKp+;dyqVj<`cQXc=7Z-Y&gBvW0wZ8C;lQI|@A_E@#qK7;CyLok-scw1VV`S3ju~E0A_hxwIZq@Nvv*O!wsHJ$1Fa>VxaD z_QYSo{p$sq0ULTI6j(754x(&jb|mBkrn@bB&uY?%TBV|40|$L<)BtOjBEB~#O`1oT zw-B>jt!myzG*&X44V2c>Gt=P;X~!+2207np1c9PCKSw9eepw;*q+z@XqG0@dKSSnA zqf?F>fae2(zRgqa#uTAZ1fB9ZT>3#-URS^ClNtK$%a7^oGavII^Ld^#2Guon*iagIUk*;CHDD_(su8PnX(pX)k8sGADST(9-=(DE)A8bS?^dclJ-&1Bk%oqcUGLDFQ$*jdg$iqZ`iT+%w#+Dlf?WB&ol(b(=ozT?aX%x+6cCKA6JBdO#y5kx%uqcVx3aVF7+;4r#0l7oL<(yF6 zYA!B>g6(s*88X8yGb1`zVo+ry7|vTm)e1%gh}jy`&Tj$o+ULT8RONfdKj<(U`&@dQ z|IA7vAiGYJ0vwU(oQpe<+r;#!pzm`iBYQQ|Oh+4IsToE~Ri*)I4oLz?}2h9=2|jh}xWZYMVAnBgY! zBS7kbC)VO29=I&H`KM~77Q4X+BH zzWH)5_MP=W>X3Sn<1Kkr`27DBC_*s0Z1>ly)sW2O!cw30KT@rI8p=pu_)vkqu&10q z0)}lwAf$TRV+0hWT>+%NpS%%o@#5yE2jQB7Hls~ta0t`^bS0>;=GWrjvwCv8CqHsZZoGC(^i>?1D`N?w42*D#Ez0Q3 zRqct96M?JMSgte2AZ~Sd%N5=D?&}pm{XjZH=$rCz>+S~R5>g(N@QYQ)t?b8zC zl55;FhQbVd0d3ulfs+5t1BgVI5tNo#?E6BH$@@C03@V9<6A5QE1c7ORonYAy;LHS1Myp#l>^1B$1_@qB~X4>9yOJ zoP_`e--Cmp3qwTBgAnITs%ydatE_{PD=fDZe;_;UZDwU5R3BaCx_o+f-nMAfc3`%C zGKu(0(2_Y?{2VT`r`PTH@VtLwUKzTFSmMb^T2t| zq0XUg(_Oqawih_<_U9EL{?>?D+&*>VzkZh!GOAguDk1!eY_Sw>` z@halk0cez<%a2{p_PU#zSZ}H*O=YaisI|oMf%-{WJXnpXi9(=AyE)|`mc|~qdX=k? z^FIO2iCPFPZBgJetuj+@@pPMNN11?rY=?Ez7xS9C-?z3g)@g#X&wg+@)f8MX@Q=R_ zvv5eSr(ZJi7I63F+*?F^t9)SlO(CXt7?uPU2)-R)mq>g;7)xTyYI?STChJ~ohqq(9 g<;ZQ3?#MZ0zF$yyp4)<0@K=IhdHORi)5H0H0ysL void, +}; + +class Avatar extends React.Component { + static defaultProps = { + initials: '', + size: 50, + }; + + renderTouchableAvatar = () => { + const styles = getStyles(this.props.size); + return ( + + {this.renderAvatar()} + + ); + }; + + renderAvatar = () => { + const { url, style, initials, size } = this.props; + const styles = getStyles(size); + + if (url) { + return ; + } + const overlay = require('../assets/avatartGradient.png'); + return ( + + + {initials.slice(0, 2)} + + + ); + }; + + render() { + const { onPress } = this.props; + if (onPress) return this.renderTouchableAvatar(); + return this.renderAvatar(); + } +} + +export default withTheme(Avatar); + +const getStyles = (avatarSize: number) => + StyleSheet.create({ + letterWrapper: { + height: avatarSize, + width: avatarSize, + borderRadius: avatarSize / 2, + justifyContent: 'center', + backgroundColor: 'transparent', + }, + letters: { + fontSize: avatarSize / 2.4, + fontFamily: 'ArialRoundedMTBold', + textAlign: 'center', + backgroundColor: 'transparent', + color: 'white', + }, + avatar: { + width: avatarSize, + height: avatarSize, + borderRadius: avatarSize / 2, + }, + }); diff --git a/src/index.js b/src/index.js index d860c63b..ecef7a36 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,7 @@ export { default as ThemeProvider } from './core/ThemeProvider'; export { default as DefaultTheme } from './styles/DefaultTheme'; export { default as DarkTheme } from './styles/DarkTheme'; +export { default as Avatar } from './components/Avatar'; export { default as Button } from './components/Button'; export { default as CheckboxRow } from './components/CheckboxRow'; export { default as Icon } from './components/Icon'; diff --git a/website/core/Footer.js b/website/core/Footer.js index d33ba659..e030f194 100644 --- a/website/core/Footer.js +++ b/website/core/Footer.js @@ -49,7 +49,7 @@ class Footer extends React.Component {
Community
diff --git a/website/i18n/en.json b/website/i18n/en.json index 75e3ddb0..9f874c59 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -4,6 +4,7 @@ "next": "Next", "previous": "Previous", "tagline": "The missing React Native UI Kit for iOS.", + "avatar": "Avatar", "button": "Button", "checkbox-row": "CheckboxRow", "customization": "Customization", diff --git a/website/sidebars.json b/website/sidebars.json index 53129d21..16b56c80 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -2,6 +2,7 @@ "docs": { "Getting Started": ["installation", "usage", "customization", "theme"], "API": [ + "avatar", "button", "checkbox-row", "icon", diff --git a/website/siteConfig.js b/website/siteConfig.js index 52cf4e9e..db0a3be9 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -8,7 +8,7 @@ const siteConfig = { baseUrl: '/react-native-ios-kit/', headerLinks: [ { doc: 'installation', label: 'Docs' }, - { doc: 'button', label: 'API' }, + { doc: 'avatar', label: 'API' }, { page: 'help', label: 'Help' }, ], users,