secullum-react-native-ui 4.16.2-beta.9 → 4.17.0

package/lib/components/DropDown.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { IconProps } from 'react-native-vector-icons/Icon';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+declare type DropDownItemData = {
+    label: string;
+    value: any;
+    icon?: string;
+    nativeID?: string;
+};
+export interface DropDownProperties {
+    label?: string;
+    items: DropDownItemData[];
+    value: any | null;
+    onChange: (value: any) => void;
+    onPress?: () => void | boolean | Promise<void> | Promise<boolean>;
+    emptyMessage: string;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    disabledStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+    iconComponent?: React.ComponentClass<IconProps>;
+    nativeID?: string;
+    icon?: string | undefined;
+    arrowColor?: string | undefined;
+    searchable?: SearchableProps;
+    virtualized?: true | VirtualizedProps;
+    useKeyboardAvoidingView?: boolean;
+}
+export interface SearchableProps {
+    placeHolder: string;
+    minItemsToSearch?: number;
+}
+export interface VirtualizedProps {
+    initialNumToRender?: number;
+    maxToRenderPerBatch?: number;
+    windowSize?: number;
+}
+export interface DropDownState {
+    modalOpen: boolean;
+    searchText: string;
+}
+export declare class DropDown extends React.Component<DropDownProperties, DropDownState> {
+    state: DropDownState;
+    handleItemPress: (value: any) => void;
+    filterItems: () => DropDownItemData[];
+    shouldDisplaySearchField: () => boolean | undefined;
+    renderClosedDropDown: (item: any, inputStyle: any) => JSX.Element | null;
+    getStyles: () => any;
+    renderItemsList: (filteredItems: DropDownItemData[]) => JSX.Element;
+    render(): JSX.Element;
+}
+export {};

package/lib/components/DropDown.js

@@ -0,0 +1,351 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropDown = void 0;
+const React = require("react");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const Modal_1 = require("./Modal");
+const layout_1 = require("../modules/layout");
+const theme_1 = require("../modules/theme");
+const test_1 = require("../modules/test");
+const react_native_1 = require("react-native");
+class DropDownItem extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, theme_1.getTheme)();
+            const styles = react_native_1.StyleSheet.create({
+                modalItem: {
+                    paddingHorizontal: 16,
+                    paddingVertical: 16,
+                    fontFamily: theme.fontFamily1,
+                    fontSize: 16,
+                    color: theme.dropDownTextColor
+                },
+                icon: {
+                    fontSize: 26
+                },
+                rowView: {
+                    flexDirection: 'row'
+                },
+                iconView: {
+                    width: 100,
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                iconOnlyView: {
+                    width: 200,
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                iconOnly: {
+                    paddingHorizontal: 16,
+                    paddingVertical: 16,
+                    fontSize: 60
+                }
+            });
+            return styles;
+        };
+        this.renderOpenDropDownItem = () => {
+            const { label, icon, iconComponent, nativeID } = this.props;
+            const theme = (0, theme_1.getTheme)();
+            const styles = this.getStyles();
+            if (label && icon) {
+                return (React.createElement(react_native_1.View, { nativeID: nativeID, style: styles.rowView },
+                    React.createElement(react_native_1.View, { style: styles.iconView }, iconComponent ? (React.createElement(iconComponent, {
+                        name: icon,
+                        style: styles.icon,
+                        color: theme.textColor1
+                    })) : (React.createElement(FontAwesome_1.default, { name: icon, color: theme.textColor1, style: styles.icon }))),
+                    React.createElement(react_native_1.View, null,
+                        React.createElement(react_native_1.Text, { style: styles.modalItem }, label))));
+            }
+            else if (label && !icon) {
+                return (React.createElement(react_native_1.View, { nativeID: nativeID, style: styles.rowView },
+                    React.createElement(react_native_1.Text, { style: styles.modalItem }, label)));
+            }
+            else if (!label && icon) {
+                return (React.createElement(react_native_1.View, { nativeID: nativeID, style: styles.iconOnlyView }, iconComponent ? (React.createElement(iconComponent, {
+                    name: icon,
+                    style: styles.iconOnly,
+                    color: theme.textColor1
+                })) : (React.createElement(FontAwesome_1.default, { name: icon, color: theme.textColor1, style: styles.iconOnly }))));
+            }
+            return null;
+        };
+    }
+    render() {
+        const { first, last, value, onPress, nativeID } = this.props;
+        const theme = (0, theme_1.getTheme)();
+        return (React.createElement(react_native_1.TouchableHighlight, { onPress: () => onPress(value), testID: (0, test_1.getTestID)(nativeID), underlayColor: theme.backgroundColor2, style: {
+                borderTopLeftRadius: first ? 5 : 0,
+                borderTopRightRadius: first ? 5 : 0,
+                borderBottomLeftRadius: last ? 5 : 0,
+                borderBottomRightRadius: last ? 5 : 0
+            } }, this.renderOpenDropDownItem()));
+    }
+}
+const DEFAULT_VIRTUALIZED_PROPS = {
+    initialNumToRender: 20,
+    maxToRenderPerBatch: 30,
+    windowSize: 10
+};
+class DropDown extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            modalOpen: false,
+            searchText: ''
+        };
+        this.handleItemPress = (value) => {
+            const { onChange } = this.props;
+            this.setState({ modalOpen: false });
+            onChange(value);
+        };
+        this.filterItems = () => {
+            const { items } = this.props;
+            const { searchText } = this.state;
+            return items.filter(item => item.label.toLowerCase().includes(searchText.toLowerCase()));
+        };
+        this.shouldDisplaySearchField = () => {
+            const { items, searchable } = this.props;
+            const defaultQuantityToSearch = 10;
+            return (searchable &&
+                items.length >= (searchable.minItemsToSearch || defaultQuantityToSearch));
+        };
+        this.renderClosedDropDown = (item, inputStyle) => {
+            const { iconComponent } = this.props;
+            const theme = (0, theme_1.getTheme)();
+            const styles = this.getStyles();
+            if (!item) {
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(react_native_1.Text, { style: [styles.text, inputStyle] }, "-"),
+                    React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
+            }
+            else if (item.label && item.icon) {
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(react_native_1.View, { style: styles.rowView },
+                        React.createElement(react_native_1.View, { style: styles.iconView }, iconComponent ? (React.createElement(iconComponent, {
+                            name: item.icon,
+                            style: styles.icon,
+                            color: theme.textColor1
+                        })) : (React.createElement(FontAwesome_1.default, { name: item.icon, color: theme.textColor1, style: styles.icon }))),
+                        React.createElement(react_native_1.Text, { style: [styles.textIcon, inputStyle] }, item.label)),
+                    React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
+            }
+            else if (item.label && !item.icon) {
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(react_native_1.Text, { style: [styles.text, inputStyle] }, item.label),
+                    React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
+            }
+            else if (!item.label && item.icon) {
+                return (React.createElement(React.Fragment, null,
+                    iconComponent ? (React.createElement(iconComponent, {
+                        name: item.icon,
+                        style: styles.iconOnly,
+                        color: theme.textColor1
+                    })) : (React.createElement(FontAwesome_1.default, { name: item.icon, color: theme.textColor1, style: styles.iconOnly })),
+                    React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.setaIcone })));
+            }
+            return null;
+        };
+        this.getStyles = () => {
+            const theme = (0, theme_1.getTheme)();
+            const { icon, arrowColor } = this.props;
+            const styles = react_native_1.StyleSheet.create({
+                container: Object.assign({ paddingHorizontal: 16, paddingVertical: 8, borderWidth: 1, borderColor: theme.borderColor1, borderRadius: 3 }, (icon
+                    ? {
+                        flexDirection: 'row',
+                        minHeight: react_native_1.Platform.OS === 'web' || react_native_1.Platform.OS === 'ios' ? 40 : 46
+                    }
+                    : {})),
+                label: {
+                    color: theme.textColor2,
+                    fontFamily: theme.fontFamily3,
+                    fontSize: (0, layout_1.isTablet)() ? 15 : 12,
+                    lineHeight: 16
+                },
+                text: {
+                    lineHeight: (0, layout_1.isTablet)() ? 28 : 22,
+                    minHeight: (0, layout_1.isTablet)() ? 28 : 22,
+                    textAlignVertical: 'center',
+                    color: theme.textColor1,
+                    fontFamily: theme.fontFamily1,
+                    fontSize: 16
+                },
+                textIcon: {
+                    height: 27,
+                    alignSelf: 'center',
+                    color: theme.textColor1,
+                    fontFamily: theme.fontFamily1,
+                    fontSize: 16
+                },
+                seta: {
+                    color: arrowColor ? arrowColor : theme.textColor1,
+                    fontSize: 16,
+                    position: 'absolute',
+                    bottom: 10,
+                    right: 16
+                },
+                setaIcone: {
+                    color: arrowColor ? arrowColor : theme.textColor1,
+                    fontSize: 16,
+                    position: 'absolute',
+                    bottom: 25,
+                    right: 16
+                },
+                modalOverlay: {
+                    justifyContent: this.shouldDisplaySearchField()
+                        ? 'flex-start'
+                        : 'center',
+                    paddingTop: this.shouldDisplaySearchField() && react_native_1.Platform.OS === 'ios' ? 44 : 0
+                },
+                modalContainer: {
+                    maxHeight: '95%',
+                    borderRadius: 5,
+                    backgroundColor: theme.backgroundColor1,
+                    margin: 16
+                },
+                modalItem: {
+                    paddingHorizontal: 16,
+                    paddingVertical: 16,
+                    fontFamily: theme.fontFamily1,
+                    fontSize: 16
+                },
+                emptyMessageContainer: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingHorizontal: 16
+                },
+                readonly: {
+                    backgroundColor: theme.disabledColor
+                },
+                icon: {
+                    fontSize: 26
+                },
+                rowView: {
+                    flexDirection: 'row'
+                },
+                iconView: {
+                    width: 50,
+                    alignItems: 'center'
+                },
+                iconOnlyView: {
+                    width: 200,
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                iconOnly: {
+                    paddingHorizontal: 16,
+                    paddingVertical: 8,
+                    fontSize: 26
+                },
+                iconOnLine: {
+                    color: theme.textColor2,
+                    fontSize: (0, layout_1.isTablet)() ? 21 : 19,
+                    marginRight: 10,
+                    minWidth: 25,
+                    textAlignVertical: 'center',
+                    flex: 0
+                },
+                searchContainer: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginBottom: 10,
+                    marginTop: 8,
+                    marginRight: 16
+                },
+                searchLabel: {
+                    fontSize: 16,
+                    marginLeft: 16,
+                    fontFamily: theme.fontFamily1
+                },
+                inputWrapper: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    borderWidth: 1,
+                    borderColor: '#ccc',
+                    paddingHorizontal: 10,
+                    backgroundColor: 'white',
+                    flex: 1,
+                    maxWidth: '100%',
+                    minWidth: 150,
+                    overflow: 'hidden',
+                    marginLeft: 16
+                },
+                searchInput: {
+                    flex: 1,
+                    height: 40
+                },
+                searchIcon: {
+                    marginLeft: 10
+                }
+            });
+            return styles;
+        };
+        this.renderItemsList = (filteredItems) => {
+            const { iconComponent, virtualized } = this.props;
+            const renderItem = ({ item, index }) => (React.createElement(DropDownItem, { nativeID: item.nativeID, first: index === 0, last: index === filteredItems.length - 1, label: item.label, value: item.value, onPress: this.handleItemPress, icon: item.icon, iconComponent: iconComponent }));
+            if (virtualized == null) {
+                return (React.createElement(react_native_1.FlatList, { data: filteredItems, initialNumToRender: filteredItems.length, keyExtractor: item => item.value.toString(), renderItem: renderItem }));
+            }
+            const virtualizedProps = typeof virtualized === 'object'
+                ? Object.assign(Object.assign({}, DEFAULT_VIRTUALIZED_PROPS), virtualized) : DEFAULT_VIRTUALIZED_PROPS;
+            return (React.createElement(react_native_1.VirtualizedList, { getItem: (_, index) => filteredItems[index], getItemCount: () => filteredItems.length, keyExtractor: item => item.value.toString(), renderItem: renderItem, initialNumToRender: virtualizedProps.initialNumToRender, maxToRenderPerBatch: virtualizedProps.maxToRenderPerBatch, windowSize: virtualizedProps.windowSize }));
+        };
+    }
+    render() {
+        const { modalOpen, searchText } = this.state;
+        const { label, items, value, emptyMessage, style, disabledStyle, disabled, labelStyle, inputStyle, nativeID, onPress, icon, searchable, useKeyboardAvoidingView } = this.props;
+        const selectedItem = items.find(x => x.value === value);
+        const styles = this.getStyles();
+        const theme = (0, theme_1.getTheme)();
+        const filteredItems = searchable ? this.filterItems() : items;
+        const conteudoModal = (React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: react_native_1.Keyboard.dismiss },
+            React.createElement(react_native_1.View, { style: [
+                    styles.modalContainer,
+                    react_native_1.Platform.OS === 'web' && {
+                        marginVertical: '10px',
+                        marginHorizontal: 'auto',
+                        width: '90%',
+                        maxWidth: 450,
+                        maxHeight: 300,
+                        justifyContent: 'center'
+                    }
+                ] },
+                this.shouldDisplaySearchField() && (React.createElement(react_native_1.View, { style: styles.searchContainer },
+                    React.createElement(react_native_1.View, { style: styles.inputWrapper },
+                        React.createElement(react_native_1.TextInput, { nativeID: nativeID + '-text-search', style: styles.searchInput, value: searchText, placeholder: searchable && searchable.placeHolder, onChangeText: text => this.setState({ searchText: text }) }),
+                        React.createElement(FontAwesome_1.default, { name: "search", size: 16, color: "gray", style: styles.searchIcon })))),
+                filteredItems.length > 0 ? (this.renderItemsList(filteredItems)) : (React.createElement(react_native_1.View, { style: styles.emptyMessageContainer },
+                    React.createElement(FontAwesome_1.default, { name: "warning", color: theme.warningColor, size: 24 }),
+                    React.createElement(react_native_1.Text, { style: styles.modalItem }, emptyMessage))))));
+        return (React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: () => __awaiter(this, void 0, void 0, function* () {
+                if (onPress) {
+                    const result = yield onPress();
+                    if (result === false) {
+                        return;
+                    }
+                }
+                this.setState({ modalOpen: true, searchText: '' });
+            }), disabled: disabled },
+            React.createElement(react_native_1.View, { nativeID: nativeID, testID: (0, test_1.getTestID)(nativeID), style: [
+                    styles.container,
+                    style,
+                    disabled ? [styles.readonly, disabledStyle] : null
+                ] },
+                icon ? (React.createElement(FontAwesome_1.default, { name: icon, style: styles.iconOnLine })) : (React.createElement(react_native_1.Text, { style: [styles.label, labelStyle] }, label)),
+                this.renderClosedDropDown(selectedItem, inputStyle),
+                React.createElement(Modal_1.Modal, { visible: modalOpen, onRequestClose: () => this.setState({ modalOpen: false }), overlayStyle: styles.modalOverlay }, useKeyboardAvoidingView ? (React.createElement(react_native_1.KeyboardAvoidingView, { behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : 'height' }, conteudoModal)) : (conteudoModal)))));
+    }
+}
+exports.DropDown = DropDown;

package/lib/components/ErrorMessage.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { StyleProp, TextStyle } from 'react-native';
+export interface Props {
+    message?: string | null;
+    style?: StyleProp<TextStyle>;
+    nativeID?: string;
+}
+export declare class ErrorMessage extends React.Component<Props> {
+    getStyles: () => {
+        errorMessage: {
+            fontFamily: string;
+            color: string;
+        };
+    };
+    render(): JSX.Element | null;
+}

package/lib/components/ErrorMessage.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = void 0;
+const React = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../modules/theme");
+const test_1 = require("../modules/test");
+class ErrorMessage extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, theme_1.getTheme)();
+            const styles = react_native_1.StyleSheet.create({
+                errorMessage: {
+                    fontFamily: theme.fontFamily3,
+                    color: theme.errorColor
+                }
+            });
+            return styles;
+        };
+    }
+    render() {
+        const { message, style, nativeID } = this.props;
+        const styles = this.getStyles();
+        if (!message) {
+            return null;
+        }
+        return (React.createElement(react_native_1.Text, { nativeID: nativeID, testID: (0, test_1.getTestID)(nativeID), style: [styles.errorMessage, style] }, message));
+    }
+}
+exports.ErrorMessage = ErrorMessage;

package/lib/components/FilePicker.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export interface FilePickerProperties {
+    label: string;
+    onPress: () => void;
+    icon: string;
+    nativeID?: string;
+}
+export declare class FilePicker extends React.Component<FilePickerProperties> {
+    static defaultProps: {
+        icon: string;
+    };
+    getStyles: () => {
+        container: {
+            borderRadius: number;
+            backgroundColor: string;
+            height: number;
+            alignItems: "center";
+            justifyContent: "center";
+        };
+        text: {
+            fontFamily: string;
+            fontSize: number;
+            color: string;
+            width: number;
+            textAlign: "center";
+        };
+    };
+    render(): JSX.Element;
+}

package/lib/components/FilePicker.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilePicker = void 0;
+const React = require("react");
+const react_native_1 = require("react-native");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const theme_1 = require("../modules/theme");
+const layout_1 = require("../modules/layout");
+const test_1 = require("../modules/test");
+class FilePicker extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, theme_1.getTheme)();
+            const styles = react_native_1.StyleSheet.create({
+                container: {
+                    borderRadius: 3,
+                    backgroundColor: theme.backgroundColor2,
+                    height: 100,
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                text: {
+                    fontFamily: theme.fontFamily1,
+                    fontSize: (0, layout_1.isTablet)() ? 15 : 12,
+                    color: theme.textColor3,
+                    width: 200,
+                    textAlign: 'center'
+                }
+            });
+            return styles;
+        };
+    }
+    render() {
+        const { label, onPress, icon, nativeID } = this.props;
+        const theme = (0, theme_1.getTheme)();
+        const styles = this.getStyles();
+        return (React.createElement(react_native_1.TouchableOpacity, { activeOpacity: 0.5, style: styles.container, onPress: onPress },
+            React.createElement(FontAwesome_1.default, { name: icon, color: theme.textColor3, size: 30 }),
+            React.createElement(react_native_1.Text, { nativeID: nativeID, testID: (0, test_1.getTestID)(nativeID), style: styles.text }, label)));
+    }
+}
+exports.FilePicker = FilePicker;
+FilePicker.defaultProps = {
+    icon: 'cloud-upload'
+};

package/lib/components/Header.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { StyleProp, TextStyle } from 'react-native';
+export interface HeaderButton {
+    icon: string;
+    disabled?: boolean;
+    counter?: number;
+    onPress: () => void;
+    nativeID?: string;
+    buttonStyle?: StyleProp<TextStyle>;
+}
+export interface HeaderProperties {
+    title: string;
+    leftButton?: HeaderButton;
+    rightButton?: HeaderButton;
+    nativeID?: string;
+}
+export declare class Header extends React.Component<HeaderProperties> {
+    static defaultProps: {
+        leftButtonType: string;
+    };
+    static height: number;
+    getStyles: () => {
+        header: {
+            backgroundColor: string;
+            height: number;
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "center";
+        };
+        title: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+            marginHorizontal: number;
+            flexShrink: number;
+        };
+        button: {
+            padding: number;
+        };
+        counterContainer: {
+            position: "absolute";
+            backgroundColor: string;
+            height: number;
+            width: number;
+            top: number;
+            left: number;
+            borderRadius: number;
+        };
+        counterText: {
+            textAlign: "center";
+            color: string;
+            fontSize: number;
+        };
+    };
+    renderButton: (button: HeaderButton, type: 'left' | 'right') => JSX.Element;
+    renderButtonInvisible: (type: 'left' | 'right') => JSX.Element;
+    render(): JSX.Element;
+}

package/lib/components/Header.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const React = require("react");
+const react_native_1 = require("react-native");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const theme_1 = require("../modules/theme");
+const layout_1 = require("../modules/layout");
+const test_1 = require("../modules/test");
+class Header extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, theme_1.getTheme)();
+            const styles = react_native_1.StyleSheet.create({
+                header: {
+                    backgroundColor: theme.backgroundColor3,
+                    height: (0, layout_1.isTablet)() ? 65 : 50,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                title: {
+                    color: theme.textColor4,
+                    fontFamily: theme.fontFamily1,
+                    fontSize: (0, layout_1.isTablet)() ? 22 : 18,
+                    marginHorizontal: 10,
+                    flexShrink: 1
+                },
+                button: {
+                    padding: (0, layout_1.isTablet)() ? 14 : 10
+                },
+                counterContainer: {
+                    position: 'absolute',
+                    backgroundColor: theme.counterBackgroundColor,
+                    height: (0, layout_1.isTablet)() ? 20 : 15,
+                    width: (0, layout_1.isTablet)() ? 20 : 15,
+                    top: 5,
+                    left: 18,
+                    borderRadius: 50
+                },
+                counterText: {
+                    textAlign: 'center',
+                    color: theme.counterTextColor,
+                    fontSize: (0, layout_1.isTablet)() ? 15 : 10
+                }
+            });
+            return styles;
+        };
+        this.renderButton = (button, type) => {
+            const styles = this.getStyles();
+            const theme = (0, theme_1.getTheme)();
+            const icon = (React.createElement(React.Fragment, null,
+                React.createElement(FontAwesome_1.default, { nativeID: button.nativeID, testID: (0, test_1.getTestID)(button.nativeID), name: button.icon, size: (0, layout_1.isTablet)() ? 30 : 20, color: button.disabled ? theme.textColor1 : theme.textColor4, 
+                    // @ts-ignore : The component uses a different version of typing
+                    style: button.buttonStyle }),
+                button.counter ? (React.createElement(react_native_1.View, { style: styles.counterContainer },
+                    React.createElement(react_native_1.Text, { style: styles.counterText }, button.counter))) : null));
+            const style = [
+                styles.button,
+                type === 'left' ? { marginRight: 'auto' } : { marginLeft: 'auto' }
+            ];
+            if (button.disabled) {
+                return React.createElement(react_native_1.View, { style: style }, icon);
+            }
+            return (React.createElement(react_native_1.TouchableOpacity, { onPress: button.onPress, style: style }, icon));
+        };
+        this.renderButtonInvisible = (type) => {
+            const styles = this.getStyles();
+            const style = [
+                styles.button,
+                type === 'left' ? { marginRight: 'auto' } : { marginLeft: 'auto' }
+            ];
+            return React.createElement(react_native_1.View, { style: style });
+        };
+    }
+    render() {
+        const { title, leftButton, rightButton, nativeID } = this.props;
+        const styles = this.getStyles();
+        return (React.createElement(react_native_1.View, { style: styles.header },
+            leftButton
+                ? this.renderButton(leftButton, 'left')
+                : this.renderButtonInvisible('left'),
+            React.createElement(react_native_1.Text, { nativeID: nativeID, testID: (0, test_1.getTestID)(nativeID), style: styles.title }, title),
+            rightButton
+                ? this.renderButton(rightButton, 'right')
+                : this.renderButtonInvisible('right')));
+    }
+}
+exports.Header = Header;
+Header.defaultProps = {
+    leftButtonType: 'menu'
+};
+Header.height = (0, layout_1.isTablet)() ? 65 : 50;