Skip to content

Commit

Permalink
Avatar (#84)
Browse files Browse the repository at this point in the history
* Avatar component

* Flow fixes

* CR fix

* Changed avatar examples
  • Loading branch information
adamTrz authored and souhe committed Jan 15, 2018
1 parent 6a29baf commit c3412d0
Show file tree
Hide file tree
Showing 12 changed files with 216 additions and 22 deletions.
Binary file added docs/assets/avatar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 46 additions & 0 deletions docs/avatar.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
---
id: avatar
title: Avatar
---

Avatar component.

![Avatar component](assets/avatar.png)

Example usage:
```javascript
<Avatar initials="CK" size={30} />
```

## 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.
5 changes: 1 addition & 4 deletions example/rn-cli.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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/*`)]);
},
};
37 changes: 21 additions & 16 deletions example/src/ExampleList.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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',
},
]);

Expand Down
52 changes: 52 additions & 0 deletions example/src/scenes/Avatars.js
Original file line number Diff line number Diff line change
@@ -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<Props> {
render() {
return (
<View>
<View style={styles.row}>
<Body>Default</Body>
<Avatar />
</View>
<View style={styles.row}>
<Body>Url prop</Body>
<Avatar url="https://callstack.com/static/favicon.png" />
</View>
<View style={styles.row}>
<Body>Initials</Body>
<Avatar initials="CK" />
</View>
<View style={styles.row}>
<Body>With onPress handler</Body>
<Avatar
url="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCIl1UiHXVbyY2UVAWE6aflhrlA7CN8BGv4Ej7lkWp0wnJtody"
onPress={() => alert('Hello')}
/>
</View>
</View>
);
}
}

export default withTheme(AvatarExample);

const styles = StyleSheet.create({
row: {
flexDirection: 'row',
padding: 10,
borderBottomColor: '#333',
borderBottomWidth: StyleSheet.hairlineWidth,
justifyContent: 'space-between',
alignItems: 'center',
},
});
Binary file added src/assets/avatartGradient.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
91 changes: 91 additions & 0 deletions src/components/Avatar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
/* @flow */
import * as React from 'react';
import {
StyleSheet,
Image,
ImageBackground,
View,
Text,
TouchableOpacity,
} from 'react-native';

import type { Theme } from '../types/Theme';
import { withTheme } from '../';
import type { StyleObj } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';

type Props = {
theme: Theme,
initials: string,
url?: string,
size: number,
style?: StyleObj,
onPress?: void => void,
};

class Avatar extends React.Component<Props> {
static defaultProps = {
initials: '',
size: 50,
};

renderTouchableAvatar = () => {
const styles = getStyles(this.props.size);
return (
<TouchableOpacity style={styles.avatar} onPress={this.props.onPress}>
{this.renderAvatar()}
</TouchableOpacity>
);
};

renderAvatar = () => {
const { url, style, initials, size } = this.props;
const styles = getStyles(size);

if (url) {
return <Image style={[styles.avatar, style]} source={{ uri: url }} />;
}
const overlay = require('../assets/avatartGradient.png');
return (
<ImageBackground
imageStyle={[styles.avatar]}
style={[styles.avatar, style]}
source={overlay}
>
<View style={styles.letterWrapper}>
<Text style={styles.letters}>{initials.slice(0, 2)}</Text>
</View>
</ImageBackground>
);
};

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,
},
});
1 change: 1 addition & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion website/core/Footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ class Footer extends React.Component {
<div>
<h5>Docs</h5>
<a href={this.docUrl('installation.html')}>Getting Started</a>
<a href={this.docUrl('button.html')}>API Reference</a>
<a href={this.docUrl('avatar.html')}>API Reference</a>
</div>
<div>
<h5>Community</h5>
Expand Down
1 change: 1 addition & 0 deletions website/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions website/sidebars.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"docs": {
"Getting Started": ["installation", "usage", "customization", "theme"],
"API": [
"avatar",
"button",
"checkbox-row",
"icon",
Expand Down
2 changes: 1 addition & 1 deletion website/siteConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit c3412d0

Please sign in to comment.