UNPKG

react-native-ui-lib

Version:

UI Components Library for React Native ###### Lateset version support RN44

90 lines (81 loc) 2.08 kB
import React, {PropTypes} from 'react'; import {StyleSheet} from 'react-native'; import _ from 'lodash'; import {BaseComponent} from '../../commons'; import View from '../view'; import Button from '../button'; import {Colors, Shadows} from '../../style'; /** * Action Bar */ export default class ActionBar extends BaseComponent { static displayName = 'ActionBar'; static propTypes = { /** * action bar height */ height: PropTypes.number, /** * action bar background color */ backgroundColor: PropTypes.string, /** * actions for the action bar */ actions: PropTypes.arrayOf(PropTypes.shape(Button.propTypes)), /** * should action be equally centered */ centered: PropTypes.bool, /** * style the action bar */ style: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]), }; static defaultProps = { height: 48, backgroundColor: Colors.white, } generateStyles() { this.styles = createStyles(this.props); } getAlignment(actionIndex) { const {actions, centered} = this.props; const first = actionIndex === 0; const last = actionIndex === actions.length - 1; return { left: centered ? false : first, center: centered || (!first && !last) || (first && last), right: centered ? false : last, }; } render() { const {actions, centered, style, ...others} = this.props; return ( <View row centerV paddingH-20={!centered} style={[this.styles.container, style]} {...others}> {_.map(actions, (action, i) => ( <View key={i} flex {...this.getAlignment(i)} > <Button link size="medium" blue30 {...action}/> </View> ))} </View> ); } } function createStyles({height, backgroundColor}) { return StyleSheet.create({ container: { height, backgroundColor, position: 'absolute', bottom: 0, left: 0, right: 0, ...Shadows.white40.top, }, }); }