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

package/lib/components/HeaderDesktop.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { HeaderButton } from '../components/Header';
+import { StyleProp, TextStyle } from 'react-native';
+export interface GreetingMessage {
+    message: string;
+    style?: StyleProp<TextStyle>;
+}
+export interface HeaderDesktopProperties {
+    logo: () => React.ReactNode;
+    title?: string;
+    greeting?: GreetingMessage;
+    rightButton?: HeaderButton;
+    headerStyle?: StyleProp<TextStyle>;
+}
+export declare class HeaderDesktop extends React.Component<HeaderDesktopProperties> {
+    static height: number;
+    getStyles: () => {
+        container: {
+            backgroundColor: string;
+            height: number;
+            flexDirection: "row";
+            alignItems: "center";
+            shadowOpacity: number;
+            shadowRadius: number;
+            shadowColor: string;
+        };
+        title: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+        greeting: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+            marginLeft: string;
+            marginRight: 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;
+        };
+    };
+    renderRightButton: (button: HeaderButton) => JSX.Element;
+    render(): JSX.Element;
+}

package/lib/components/HeaderDesktop.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderDesktop = void 0;
+const React = require("react");
+const theme_1 = require("../modules/theme");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const react_native_1 = require("react-native");
+const layout_1 = require("../modules/layout");
+class HeaderDesktop extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, theme_1.getTheme)();
+            const styles = react_native_1.StyleSheet.create({
+                container: {
+                    backgroundColor: theme.backgroundColor3,
+                    height: HeaderDesktop.height,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    shadowOpacity: 0.6,
+                    shadowRadius: 20,
+                    shadowColor: theme.shadowColor1
+                },
+                title: {
+                    color: theme.textColor4,
+                    fontSize: 24,
+                    fontFamily: theme.fontFamily3
+                },
+                greeting: {
+                    color: theme.textColor4,
+                    fontSize: 18,
+                    fontFamily: theme.fontFamily2,
+                    marginLeft: 'auto',
+                    marginRight: 20
+                },
+                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.renderRightButton = (button) => {
+            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, 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, { nativeID: `${button.nativeID}-counter`, style: styles.counterText }, button.counter))) : null));
+            const style = [styles.button];
+            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));
+        };
+    }
+    render() {
+        const { logo, title, greeting, rightButton, headerStyle } = this.props;
+        const styles = this.getStyles();
+        return (React.createElement(react_native_1.View, { style: [styles.container, headerStyle] },
+            logo(),
+            title && React.createElement(react_native_1.Text, { style: styles.title }, title),
+            greeting && (React.createElement(react_native_1.Text, { nativeID: "app-greeting-message", style: [styles.greeting, greeting.style] }, greeting.message)),
+            rightButton && this.renderRightButton(rightButton)));
+    }
+}
+exports.HeaderDesktop = HeaderDesktop;
+HeaderDesktop.height = 60;

package/lib/components/ImageButton.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface ImageButtonProperties {
+    icon: string;
+    style?: StyleProp<ViewStyle>;
+    iconColor?: string;
+    onPress: () => void;
+    iconSize?: number;
+    hitBoxSize?: number;
+    nativeID?: string;
+}
+export declare class ImageButton extends React.Component<ImageButtonProperties> {
+    render(): JSX.Element;
+}

package/lib/components/ImageButton.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageButton = void 0;
+const React = require("react");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const theme_1 = require("../modules/theme");
+const test_1 = require("../modules/test");
+const react_native_1 = require("react-native");
+class ImageButton extends React.Component {
+    render() {
+        const { icon, style, iconColor, onPress, iconSize, hitBoxSize, nativeID } = this.props;
+        return (React.createElement(react_native_1.TouchableOpacity, { onPress: onPress, activeOpacity: 0.5, style: [styles.container, style], hitSlop: hitBoxSize
+                ? {
+                    top: hitBoxSize,
+                    bottom: hitBoxSize,
+                    left: hitBoxSize,
+                    right: hitBoxSize
+                }
+                : undefined },
+            React.createElement(FontAwesome_1.default, { nativeID: nativeID, testID: (0, test_1.getTestID)(nativeID), name: icon, size: iconSize || 20, color: iconColor || theme.textColor1 })));
+    }
+}
+exports.ImageButton = ImageButton;
+const theme = (0, theme_1.getTheme)();
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        borderWidth: 1,
+        borderColor: theme.borderColor1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 40,
+        height: 40
+    }
+});

package/lib/components/KeyboardAvoidingView.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { EmitterSubscription, KeyboardEvent, NativeScrollEvent, RefreshControlProps, ScrollView } from 'react-native';
+export interface KeyboardAvoidingViewProperties {
+    extraFieldHeight: number;
+    extraWindowHeight: number;
+    refreshControl?: React.ReactElement<RefreshControlProps> | undefined;
+    children: (options: {
+        availableHeight: number;
+    }) => JSX.Element;
+    scrollEnabled?: boolean;
+    onScroll?: (event: NativeScrollEvent) => void;
+    keyBoardShow?: boolean;
+}
+export interface KeyboardAvoidingViewState {
+    keyboardHeight: number;
+}
+export declare class KeyboardAvoidingView extends React.Component<KeyboardAvoidingViewProperties, KeyboardAvoidingViewState> {
+    static defaultProps: {
+        extraFieldHeight: number;
+        extraWindowHeight: number;
+        scrollEnabled: boolean;
+    };
+    keyboardDidShowSubscription?: EmitterSubscription;
+    keyboardDidHideSubscription?: EmitterSubscription;
+    scrollViewRef: React.RefObject<ScrollView>;
+    state: KeyboardAvoidingViewState;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleKeyboardShow: (event: KeyboardEvent) => void;
+    handleKeyboardHide: () => void;
+    scrollTo: (x: number, y: number) => void;
+    scrollToEnd: () => void;
+    render(): JSX.Element;
+}

package/lib/components/KeyboardAvoidingView.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardAvoidingView = void 0;
+const React = require("react");
+const react_native_1 = require("react-native");
+class KeyboardAvoidingView extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.scrollViewRef = React.createRef();
+        this.state = {
+            keyboardHeight: 0
+        };
+        this.handleKeyboardShow = (event) => {
+            const keyboardHeight = event.endCoordinates.height;
+            const keyboardPosition = event.endCoordinates.screenY;
+            this.setState({
+                keyboardHeight
+            });
+            const scrollView = this.scrollViewRef.current;
+            if (!scrollView) {
+                return;
+            }
+            //@ts-ignore
+            const currentlyFocusedInput = react_native_1.TextInput.State.currentlyFocusedInput();
+            if (!currentlyFocusedInput) {
+                return;
+            }
+            const { extraFieldHeight, extraWindowHeight } = this.props;
+            const currentlyFocusedInputNode = (0, react_native_1.findNodeHandle)(currentlyFocusedInput);
+            // @ts-ignore: no types :(
+            react_native_1.UIManager.viewIsDescendantOf(currentlyFocusedInputNode, (0, react_native_1.findNodeHandle)(scrollView), (isDescendant) => {
+                if (!isDescendant) {
+                    return;
+                }
+                currentlyFocusedInput.measure((x, y, width, height, pageX, pageY) => {
+                    const fieldPosition = pageY + height + extraFieldHeight;
+                    if (fieldPosition <= keyboardPosition) {
+                        return;
+                    }
+                    scrollView.scrollResponderScrollNativeHandleToKeyboard(currentlyFocusedInputNode, extraWindowHeight + extraFieldHeight, true);
+                });
+            });
+        };
+        this.handleKeyboardHide = () => {
+            this.setState({
+                keyboardHeight: 0
+            });
+        };
+        this.scrollTo = (x, y) => {
+            if (!this.scrollViewRef.current) {
+                return;
+            }
+            this.scrollViewRef.current.scrollTo({ x, y });
+        };
+        this.scrollToEnd = () => {
+            if (!this.scrollViewRef.current) {
+                return;
+            }
+            this.scrollViewRef.current.scrollToEnd();
+        };
+    }
+    componentDidMount() {
+        // Android doesn't have 'will' events, but we can use 'did' there without any problem
+        // iOS on the other hand needs to use the 'will' events otherwise the screen would show some empty spaces during keyboard events
+        this.keyboardDidShowSubscription = react_native_1.Keyboard.addListener(react_native_1.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow', this.handleKeyboardShow);
+        this.keyboardDidHideSubscription = react_native_1.Keyboard.addListener(react_native_1.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide', this.handleKeyboardHide);
+    }
+    componentWillUnmount() {
+        this.keyboardDidShowSubscription.remove();
+        this.keyboardDidHideSubscription.remove();
+    }
+    render() {
+        const { refreshControl, scrollEnabled, onScroll, children, keyBoardShow, extraWindowHeight } = this.props;
+        const { keyboardHeight } = this.state;
+        // Android devices with notch will report less `availableHeight` than it should
+        // That's because of this: https://github.com/facebook/react-native/issues/23693
+        // If I change it to 'screen', Android devices with virtual buttons will report more than it should
+        const availableHeight = react_native_1.Dimensions.get('window').height - keyboardHeight - extraWindowHeight;
+        return (React.createElement(react_native_1.View, { style: [{ height: availableHeight }, !keyBoardShow && { flex: 1 }] },
+            React.createElement(react_native_1.ScrollView
+            // On Android 15 (API 35) devices, when the keyboard appears,
+            // the ScrollView does not resize correctly and may hide focused input fields.
+            // Related issue on GitLab: 11635
+            , { 
+                // On Android 15 (API 35) devices, when the keyboard appears,
+                // the ScrollView does not resize correctly and may hide focused input fields.
+                // Related issue on GitLab: 11635
+                contentContainerStyle: react_native_1.Platform.OS === 'android' &&
+                    react_native_1.Platform.Version === 35 &&
+                    keyboardHeight > 0
+                    ? { paddingBottom: keyboardHeight }
+                    : undefined, ref: this.scrollViewRef, 
+                // @ts-ignore: O react-native não tem auto, mas o react-native-web aceita
+                refreshControl: refreshControl, scrollEnabled: scrollEnabled, onScroll: (e) => {
+                    if (onScroll) {
+                        onScroll(e.nativeEvent);
+                    }
+                }, scrollEventThrottle: 16 }, children({ availableHeight }))));
+    }
+}
+exports.KeyboardAvoidingView = KeyboardAvoidingView;
+KeyboardAvoidingView.defaultProps = {
+    extraFieldHeight: 0,
+    extraWindowHeight: 0,
+    scrollEnabled: true
+};

package/lib/components/Link.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { StyleProp, TextStyle } from 'react-native';
+export interface LinkProperties {
+    text: string;
+    style?: StyleProp<TextStyle>;
+    onPress: () => void;
+    nativeID?: string;
+}
+export declare class Link extends React.Component<LinkProperties> {
+    getStyles: () => {
+        link: {
+            fontFamily: string;
+            fontSize: number;
+            color: string;
+        };
+    };
+    render(): JSX.Element;
+}

package/lib/components/Link.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+const React = require("react");
+const theme_1 = require("../modules/theme");
+const react_native_1 = require("react-native");
+const test_1 = require("../modules/test");
+class Link extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, theme_1.getTheme)();
+            const styles = react_native_1.StyleSheet.create({
+                link: {
+                    fontFamily: theme.fontFamily2,
+                    fontSize: 14,
+                    color: theme.textColor2
+                }
+            });
+            return styles;
+        };
+    }
+    render() {
+        const { text, style, onPress, nativeID } = this.props;
+        const styles = this.getStyles();
+        return (React.createElement(react_native_1.TouchableOpacity, { activeOpacity: 0.7, onPress: onPress, testID: (0, test_1.getTestID)(nativeID) },
+            React.createElement(react_native_1.Text, { nativeID: nativeID, style: [styles.link, style] }, text)));
+    }
+}
+exports.Link = Link;

package/lib/components/Loading.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare type Props = {
+    width?: number | string;
+    height?: number | string;
+};
+export declare class Loading extends React.Component<Props> {
+    getWidthAndHeight: () => {
+        width: string | number;
+        height: string | number;
+    };
+    render(): JSX.Element;
+}
+export {};

package/lib/components/Loading.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = void 0;
+const React = require("react");
+const react_native_1 = require("react-native");
+class Loading extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getWidthAndHeight = () => {
+            const dim = react_native_1.Platform.OS === 'web' ? 'window' : 'screen';
+            const { width, height } = this.props;
+            return {
+                width: width ? width : react_native_1.Dimensions.get(dim).width,
+                height: height ? height : react_native_1.Dimensions.get(dim).height
+            };
+        };
+    }
+    render() {
+        const { width, height } = this.getWidthAndHeight();
+        return (React.createElement(react_native_1.View, { style: [styles.backgroundView, { width, height }] },
+            React.createElement(react_native_1.ActivityIndicator, { size: "large", color: "#aaa", style: [styles.indicator, { width, height }] })));
+    }
+}
+exports.Loading = Loading;
+const styles = react_native_1.StyleSheet.create({
+    backgroundView: {
+        zIndex: 9998,
+        position: 'absolute',
+        opacity: 0.6,
+        backgroundColor: '#ccc',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0 // IE fix
+    },
+    indicator: {
+        zIndex: 9999,
+        position: 'absolute',
+        justifyContent: 'space-around',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0 // IE fix
+    }
+});

package/lib/components/Menu.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { StyleProp, TextStyle } from 'react-native';
+export interface MenuItemData {
+    path?: string;
+    text: string;
+    textStyle?: StyleProp<TextStyle>;
+    subText?: string;
+    subTextStyle?: StyleProp<TextStyle>;
+    disabled?: boolean;
+    nativeID?: string;
+}
+export interface MenuItemProperties {
+    menuItem: MenuItemData;
+    icon?: string;
+    textStyle?: StyleProp<TextStyle>;
+    onPress: () => void;
+    isCurrentMenuPath?: (path: string) => boolean;
+}
+export declare function MenuItem(props: MenuItemProperties): JSX.Element;
+export interface MenuProperties {
+    menu: Array<MenuItemData & {
+        submenu?: Array<MenuItemData>;
+    }>;
+    onMenuPress: (path: string) => void;
+    isCurrentMenuPath?: (path: string) => boolean;
+}
+export interface MenuState {
+    indexMenuOpened: number;
+}
+export declare class Menu extends React.Component<MenuProperties, MenuState> {
+    state: MenuState;
+    componentDidMount(): void;
+    handleParentMenuPress: (index: number) => void;
+    handleMenuPress: (path?: string) => void;
+    getStyles: () => {
+        submenuText: {
+            paddingLeft: number;
+            paddingVertical: number;
+        };
+    };
+    render(): JSX.Element;
+}

package/lib/components/Menu.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = exports.MenuItem = void 0;
+const React = require("react");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const theme_1 = require("../modules/theme");
+const test_1 = require("../modules/test");
+const layout_1 = require("../modules/layout");
+const react_native_1 = require("react-native");
+function MenuItem(props) {
+    const theme = (0, theme_1.getTheme)();
+    const styles = react_native_1.StyleSheet.create({
+        container: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            width: '100%',
+            paddingRight: 10
+        },
+        text: {
+            color: theme.textColor1,
+            fontFamily: theme.fontFamily1,
+            fontSize: (0, layout_1.isTablet)() ? 20 : 16,
+            paddingVertical: (0, layout_1.isTablet)() ? 15 : 14
+        },
+        textDisabled: {
+            color: theme.borderColor1
+        },
+        textSelected: {
+            color: theme.textColor2
+        },
+        subText: {
+            fontSize: 12,
+            marginLeft: 5
+        },
+        icon: {
+            paddingTop: 12,
+            paddingRight: 10,
+            color: theme.textColor1
+        }
+    });
+    const { menuItem, icon, textStyle, onPress, isCurrentMenuPath } = props;
+    const selected = isCurrentMenuPath != undefined &&
+        menuItem.path != undefined &&
+        isCurrentMenuPath(menuItem.path);
+    return (React.createElement(react_native_1.TouchableOpacity, { disabled: menuItem.disabled, style: styles.container, onPress: onPress },
+        React.createElement(react_native_1.Text, { nativeID: menuItem.nativeID, testID: (0, test_1.getTestID)(menuItem.nativeID), style: [
+                styles.text,
+                menuItem.disabled && styles.textDisabled,
+                selected && styles.textSelected,
+                textStyle,
+                menuItem.textStyle
+            ] },
+            menuItem.text,
+            menuItem.subText && (React.createElement(react_native_1.Text, { style: [styles.subText, menuItem.subTextStyle] }, menuItem.subText))),
+        icon && React.createElement(FontAwesome_1.default, { name: icon, style: styles.icon, size: 20 })));
+}
+exports.MenuItem = MenuItem;
+class Menu extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            indexMenuOpened: -1
+        };
+        this.handleParentMenuPress = (index) => {
+            this.setState({
+                indexMenuOpened: this.state.indexMenuOpened === index ? -1 : index
+            });
+        };
+        this.handleMenuPress = (path) => {
+            if (path != undefined) {
+                this.props.onMenuPress(path);
+            }
+        };
+        this.getStyles = () => {
+            const styles = react_native_1.StyleSheet.create({
+                submenuText: {
+                    paddingLeft: 20,
+                    paddingVertical: (0, layout_1.isTablet)() ? 10 : 8
+                }
+            });
+            return styles;
+        };
+    }
+    componentDidMount() {
+        const { menu, isCurrentMenuPath } = this.props;
+        const indexMenuOpened = menu.findIndex(menuItem => menuItem.submenu != undefined &&
+            menuItem.submenu.some(submenuItem => isCurrentMenuPath != undefined &&
+                submenuItem.path != undefined &&
+                isCurrentMenuPath(submenuItem.path)));
+        this.setState({ indexMenuOpened });
+    }
+    render() {
+        const { menu, isCurrentMenuPath } = this.props;
+        const styles = this.getStyles();
+        return (React.createElement(React.Fragment, null, menu.map((menuItem, menuItemIndex) => {
+            const menuItemIsOpen = this.state.indexMenuOpened === menuItemIndex;
+            const menuItemIcon = menuItem.submenu
+                ? menuItemIsOpen
+                    ? 'caret-up'
+                    : 'caret-down'
+                : undefined;
+            const menuItemOnPress = () => menuItem.submenu
+                ? this.handleParentMenuPress(menuItemIndex)
+                : this.handleMenuPress(menuItem.path);
+            return (React.createElement(react_native_1.View, { key: menuItemIndex },
+                React.createElement(MenuItem, { menuItem: menuItem, icon: menuItemIcon, onPress: menuItemOnPress, isCurrentMenuPath: isCurrentMenuPath }),
+                menuItem.submenu && (React.createElement(react_native_1.View, { style: {
+                        height: menuItemIsOpen ? 'auto' : 0,
+                        overflow: 'hidden'
+                    } }, menuItem.submenu.map((submenuItem, submenuItemIndex) => (React.createElement(MenuItem, { key: submenuItemIndex, menuItem: submenuItem, textStyle: styles.submenuText, onPress: () => this.handleMenuPress(submenuItem.path), isCurrentMenuPath: isCurrentMenuPath })))))));
+        })));
+    }
+}
+exports.Menu = Menu;

package/lib/components/MenuDesktop.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { MenuProperties } from './Menu';
+export declare type MenuDesktopProperties = MenuProperties & {
+    headerHeight: number;
+    renderUserData?: () => React.ReactNode;
+};
+export declare class MenuDesktop extends React.Component<MenuDesktopProperties> {
+    static defaultProps: {
+        headerHeight: number;
+    };
+    getStyles: () => {
+        container: {
+            backgroundColor: string;
+            height: number;
+            width: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            shadowOpacity: number;
+            shadowRadius: number;
+            shadowColor: string;
+        };
+    };
+    render(): JSX.Element;
+}

package/lib/components/MenuDesktop.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuDesktop = void 0;
+const React = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../modules/theme");
+const Menu_1 = require("./Menu");
+class MenuDesktop extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, theme_1.getTheme)();
+            const styles = react_native_1.StyleSheet.create({
+                container: {
+                    backgroundColor: theme.backgroundColor1,
+                    height: react_native_1.Dimensions.get('window').height - this.props.headerHeight,
+                    width: 250,
+                    paddingHorizontal: 15,
+                    paddingVertical: 15,
+                    shadowOpacity: 0.31,
+                    shadowRadius: 20,
+                    shadowColor: theme.shadowColor1
+                }
+            });
+            return styles;
+        };
+    }
+    render() {
+        const { menu, onMenuPress, isCurrentMenuPath, renderUserData } = this.props;
+        const styles = this.getStyles();
+        return (React.createElement(react_native_1.View, { style: styles.container },
+            renderUserData ? React.createElement(react_native_1.View, null, renderUserData()) : null,
+            React.createElement(Menu_1.Menu, { menu: menu, isCurrentMenuPath: isCurrentMenuPath, onMenuPress: onMenuPress })));
+    }
+}
+exports.MenuDesktop = MenuDesktop;
+MenuDesktop.defaultProps = {
+    headerHeight: 0
+};