secullum-react-native-ui 4.3.8-beta.2 → 4.3.10

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,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const theme_1 = require("../modules/theme");
+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, name: icon, size: iconSize || 20, color: iconColor || theme.textColor1 })));
+    }
+}
+exports.ImageButton = ImageButton;
+const theme = 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>;
+    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,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 = react_native_1.findNodeHandle(currentlyFocusedInput);
+            // @ts-ignore: no types :(
+            react_native_1.UIManager.viewIsDescendantOf(currentlyFocusedInputNode, 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 } = this.props;
+        // 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 -
+            this.state.keyboardHeight -
+            this.props.extraWindowHeight;
+        return (React.createElement(react_native_1.View, { style: [{ height: availableHeight }, !keyBoardShow && { flex: 1 }] },
+            React.createElement(react_native_1.ScrollView, { ref: this.scrollViewRef, refreshControl: refreshControl, scrollEnabled: scrollEnabled, onScroll: (e) => {
+                    if (onScroll) {
+                        onScroll(e.nativeEvent);
+                    }
+                }, scrollEventThrottle: 16 }, children({ availableHeight }))));
+    }
+}
+KeyboardAvoidingView.defaultProps = {
+    extraFieldHeight: 0,
+    extraWindowHeight: 0,
+    scrollEnabled: true
+};
+exports.KeyboardAvoidingView = KeyboardAvoidingView;

package/lib/components/Link.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { StyleProp, TextStyle } from 'react-native';
+export interface LinkProperties {
+    text: string;
+    style?: StyleProp<TextStyle>;
+    onPress: () => void;
+}
+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,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const theme_1 = require("../modules/theme");
+const react_native_1 = require("react-native");
+class Link extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = 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 } = this.props;
+        const styles = this.getStyles();
+        return (React.createElement(react_native_1.TouchableOpacity, { activeOpacity: 0.7, onPress: onPress },
+            React.createElement(react_native_1.Text, { style: [styles.link, style] }, text)));
+    }
+}
+exports.Link = Link;

package/lib/components/Loading.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare class Loading extends React.Component {
+    render(): JSX.Element;
+}

package/lib/components/Loading.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_native_1 = require("react-native");
+class Loading extends React.Component {
+    render() {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(react_native_1.View, { style: styles.backgroundView }),
+            React.createElement(react_native_1.ActivityIndicator, { style: styles.indicator, size: "large", color: "#aaa" })));
+    }
+}
+exports.Loading = Loading;
+const styles = react_native_1.StyleSheet.create({
+    backgroundView: {
+        zIndex: 9998,
+        position: 'absolute',
+        width: react_native_1.Dimensions.get('screen').width,
+        height: react_native_1.Dimensions.get('screen').height,
+        opacity: 0.6,
+        backgroundColor: '#ccc',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0 // IE fix
+    },
+    indicator: {
+        zIndex: 9999,
+        position: 'absolute',
+        width: react_native_1.Dimensions.get('screen').width,
+        height: react_native_1.Dimensions.get('screen').height,
+        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 | undefined) => void;
+    getStyles: () => {
+        submenuText: {
+            paddingLeft: number;
+            paddingVertical: number;
+        };
+    };
+    render(): JSX.Element;
+}

package/lib/components/Menu.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const theme_1 = require("../modules/theme");
+const layout_1 = require("../modules/layout");
+const react_native_1 = require("react-native");
+function MenuItem(props) {
+    const theme = 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: layout_1.isTablet() ? 20 : 16,
+            paddingVertical: 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, 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: 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,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 = 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 })));
+    }
+}
+MenuDesktop.defaultProps = {
+    headerHeight: 0
+};
+exports.MenuDesktop = MenuDesktop;

package/lib/components/MenuMobile.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import DrawerLayout from 'react-native-drawer-layout';
+import { MenuProperties } from './Menu';
+export declare type MenuMobileProperties = MenuProperties & {
+    children: React.ReactNode;
+    drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open';
+    renderLogo: () => React.ReactNode;
+    renderUserData?: () => React.ReactNode;
+};
+export interface MenuMobileState {
+    opened: boolean;
+}
+export declare class MenuMobile extends React.Component<MenuMobileProperties, MenuMobileState> {
+    state: MenuMobileState;
+    drawer: DrawerLayout | null;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleBackButton: () => boolean;
+    handleMenuPress: (path: string) => void;
+    open: () => void;
+    close: () => void;
+    getStyles: () => {
+        container: {
+            flex: number;
+        };
+        logoContainer: {
+            paddingVertical: number;
+            paddingLeft: number;
+            borderBottomColor: string;
+            borderBottomWidth: number;
+            flexDirection: "row";
+        };
+        userContainer: {
+            paddingVertical: number;
+            paddingLeft: number;
+            paddingRight: number;
+            borderBottomColor: string;
+            borderBottomWidth: number;
+        };
+        menuContainer: {
+            paddingLeft: number;
+            flex: number;
+        };
+    };
+    renderNavigationView: () => JSX.Element;
+    render(): JSX.Element;
+}

package/lib/components/MenuMobile.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_native_1 = require("react-native");
+const react_native_drawer_layout_1 = require("react-native-drawer-layout");
+const theme_1 = require("../modules/theme");
+const layout_1 = require("../modules/layout");
+const Menu_1 = require("./Menu");
+class MenuMobile extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            opened: false
+        };
+        this.drawer = null;
+        this.handleBackButton = () => {
+            if (this.state.opened) {
+                this.close();
+                return true;
+            }
+            return false;
+        };
+        this.handleMenuPress = (path) => {
+            this.close();
+            this.props.onMenuPress(path);
+        };
+        this.open = () => {
+            if (this.drawer) {
+                this.drawer.openDrawer();
+            }
+        };
+        this.close = () => {
+            if (this.drawer) {
+                this.drawer.closeDrawer();
+            }
+        };
+        this.getStyles = () => {
+            const theme = theme_1.getTheme();
+            const styles = react_native_1.StyleSheet.create({
+                container: {
+                    flex: 1
+                },
+                logoContainer: {
+                    paddingVertical: 5,
+                    paddingLeft: 10,
+                    borderBottomColor: theme.borderColor1,
+                    borderBottomWidth: 1,
+                    flexDirection: 'row'
+                },
+                userContainer: {
+                    paddingVertical: 10,
+                    paddingLeft: 20,
+                    paddingRight: 10,
+                    borderBottomColor: theme.borderColor1,
+                    borderBottomWidth: 1
+                },
+                menuContainer: {
+                    paddingLeft: 20,
+                    flex: 1
+                }
+            });
+            return styles;
+        };
+        this.renderNavigationView = () => {
+            const { renderLogo, renderUserData, menu, isCurrentMenuPath } = this.props;
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.container },
+                React.createElement(react_native_1.View, { style: styles.logoContainer }, renderLogo()),
+                renderUserData && (React.createElement(react_native_1.View, { style: styles.userContainer }, renderUserData())),
+                React.createElement(react_native_1.ScrollView, { style: styles.menuContainer },
+                    React.createElement(Menu_1.Menu, { menu: menu, isCurrentMenuPath: isCurrentMenuPath, onMenuPress: this.handleMenuPress }))));
+        };
+    }
+    componentDidMount() {
+        react_native_1.BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
+    }
+    componentWillUnmount() {
+        react_native_1.BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
+    }
+    render() {
+        const theme = theme_1.getTheme();
+        return (React.createElement(react_native_drawer_layout_1.default, { ref: drawer => (this.drawer = drawer), drawerLockMode: this.props.drawerLockMode, drawerBackgroundColor: theme.backgroundColor1, drawerWidth: layout_1.isTablet() ? 450 : 300, drawerPosition: react_native_drawer_layout_1.default.positions.Left, renderNavigationView: this.renderNavigationView, onDrawerOpen: () => this.setState({ opened: true }), onDrawerClose: () => this.setState({ opened: false }) }, this.props.children));
+    }
+}
+exports.MenuMobile = MenuMobile;

package/lib/components/Message.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { StyleProp, TextStyle } from 'react-native';
+export interface MessageProperties {
+    message: string;
+    visible: boolean;
+    type?: 'info' | 'warning';
+    onRequestClose?: () => void;
+    nativeID?: string;
+    textStyle?: StyleProp<TextStyle>;
+}
+export declare class Message extends React.Component<MessageProperties> {
+    static defaultProps: {
+        type: string;
+    };
+    getStyles: () => {
+        overlay: {
+            alignItems: "center";
+        };
+        container: {
+            backgroundColor: string;
+            borderRadius: number;
+            padding: number;
+            width: number;
+            marginTop: number;
+            alignItems: "center";
+        };
+        text: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+            textAlign: "center";
+            marginTop: number;
+            width: string;
+        };
+    };
+    render(): JSX.Element;
+}