import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
const DEFAULT_SEPARATOR_WIDTH = 15;
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    item: {
        flex: 1
    }
});
export class ActionBar extends Component {
    render() {
        const numChildren = React.Children.count(this.props.children);
        const separatorStyle = { width: this.props.separatorWidth || DEFAULT_SEPARATOR_WIDTH };
        return (<View style={[styles.container, this.props.style]}>
        {React.Children.map(this.props.children, (child, index) => {
            let returnElem;
            if (React.isValidElement(child)) {
                child = child;
                returnElem = React.cloneElement(child, {
                    style: [
                        styles.item,
                        child.props.style
                    ]
                });
            }
            else {
                returnElem = child;
            }
            return [
                returnElem,
                index !== numChildren - 1 && (<View style={separatorStyle}/>)
            ];
        })}
      </View>);
    }
}
//# sourceMappingURL=ActionBar.js.map