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

package/lib/components/MenuMobile.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { NativeEventSubscription } from 'react-native';
+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;
+    backButtonHandlerSubscription: NativeEventSubscription | null;
+    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,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuMobile = void 0;
+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.backButtonHandlerSubscription = null;
+        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 = (0, 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() {
+        this.backButtonHandlerSubscription = react_native_1.BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
+    }
+    componentWillUnmount() {
+        if (this.backButtonHandlerSubscription) {
+            this.backButtonHandlerSubscription.remove();
+        }
+    }
+    render() {
+        const theme = (0, 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: (0, layout_1.isTablet)() ? 450 : 300, drawerPosition: react_native_drawer_layout_1.default.positions.Left, renderNavigationView: this.renderNavigationView, onDrawerOpen: () => this.setState({ opened: true }), 
+            // When closing the app, we encountered the error 'useInsertionEffect must not schedule updates',
+            // because we were trying to update the state during the component render cycle. To avoid this,
+            // a setTimeout was introduced with a small delay (enough time to complete the render) before executing other functions.
+            // Related issue on GitLab: 11635
+            onDrawerClose: () => setTimeout(() => this.setState({ opened: false }), 1) }, 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;
+}

package/lib/components/Message.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Message = void 0;
+const React = require("react");
+const react_native_1 = require("react-native");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const Modal_1 = require("./Modal");
+const theme_1 = require("../modules/theme");
+const layout_1 = require("../modules/layout");
+const test_1 = require("../modules/test");
+class Message extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, theme_1.getTheme)();
+            return react_native_1.StyleSheet.create({
+                overlay: {
+                    alignItems: 'center'
+                },
+                container: {
+                    backgroundColor: theme.backgroundColor1,
+                    borderRadius: 6,
+                    padding: (0, layout_1.isTablet)() ? 25 : 16,
+                    width: (0, layout_1.isTablet)() ? 350 : 250,
+                    marginTop: (0, layout_1.isTablet)() ? 250 : 140,
+                    alignItems: 'center'
+                },
+                text: {
+                    color: theme.textColor3,
+                    fontFamily: theme.fontFamily1,
+                    fontSize: (0, layout_1.isTablet)() ? 25 : 16,
+                    textAlign: 'center',
+                    marginTop: (0, layout_1.isTablet)() ? 15 : 5,
+                    width: '100%'
+                }
+            });
+        };
+    }
+    render() {
+        const { message, visible, type, onRequestClose, nativeID, textStyle } = this.props;
+        const styles = this.getStyles();
+        const theme = (0, theme_1.getTheme)();
+        return (React.createElement(Modal_1.Modal, { visible: visible, onRequestClose: onRequestClose, overlayStyle: styles.overlay },
+            React.createElement(react_native_1.View, { nativeID: nativeID, style: styles.container },
+                React.createElement(FontAwesome_1.default, { name: type === 'warning' ? 'warning' : 'check-circle', color: type === 'warning' ? theme.warningColor : theme.successColor, size: (0, layout_1.isTablet)() ? 52 : 42 }),
+                React.createElement(react_native_1.Text, { style: [styles.text, textStyle], testID: (0, test_1.getTestID)(nativeID) }, message))));
+    }
+}
+exports.Message = Message;
+Message.defaultProps = {
+    type: 'info'
+};

package/lib/components/Modal.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface ModalProperties {
+    children: React.ReactNode;
+    visible: boolean;
+    overlayStyle?: StyleProp<ViewStyle>;
+    onRequestClose?: () => void;
+}
+interface ModalState {
+    isMounted: boolean;
+}
+export declare class Modal extends React.Component<ModalProperties> {
+    state: ModalState;
+    componentDidUpdate(prevProps: ModalProperties): void;
+    handleShow: () => void;
+    render(): JSX.Element;
+}
+export {};

package/lib/components/Modal.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+const React = require("react");
+const react_native_1 = require("react-native");
+class Modal extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            isMounted: false
+        };
+        this.handleShow = () => {
+            this.setState({ isMounted: true });
+        };
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.visible && !this.props.visible) {
+            this.setState({ isMounted: false });
+        }
+    }
+    render() {
+        const { children, visible, overlayStyle, onRequestClose } = this.props;
+        const { isMounted } = this.state;
+        return (React.createElement(react_native_1.Modal, { animationType: "fade", transparent: true, visible: visible, supportedOrientations: ['landscape', 'portrait'], onRequestClose: onRequestClose, onShow: this.handleShow },
+            React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: onRequestClose },
+                React.createElement(react_native_1.View, { style: [styles.overlay, overlayStyle] }, react_native_1.Platform.OS !== 'android' || isMounted ? children : React.createElement(react_native_1.View, null)))));
+    }
+}
+exports.Modal = Modal;
+const styles = react_native_1.StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(33, 33, 33, 0.7)'
+    }
+});

package/lib/components/MultiSelect.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { IconProps } from 'react-native-vector-icons/Icon';
+export interface MultiSelectProperties {
+    label: string;
+    items: Array<{
+        label: string;
+        value: any;
+        icon?: string;
+    }>;
+    values: any[] | null;
+    onChange: (value: any) => void;
+    selectedAllDescription?: string;
+    selectedManyDescription?: string;
+    selectedNoneDescription?: string;
+    okButtonDescription?: string;
+    cancelButtonDescription?: string;
+    emptyMessage?: string;
+    disabled?: boolean;
+    iconComponent?: React.ComponentClass<IconProps>;
+}
+export interface MultiSelectState {
+    modalOpen: boolean;
+    selectedValues: any[];
+    selectedValuesInitial: any[];
+}
+export declare class MultiSelect extends React.Component<MultiSelectProperties, MultiSelectState> {
+    static defaultProps: {
+        emptyMessage: string;
+        selectedAllDescription: string;
+        selectedManyDescription: string;
+        selectedNoneDescription: string;
+        okButtonDescription: string;
+        cancelButtonDescription: string;
+    };
+    state: MultiSelectState;
+    componentDidMount: () => void;
+    componentDidUpdate: (prevProps: MultiSelectProperties) => void;
+    handleAddValue: (value: any) => void;
+    handleRemoveValue: (value: any) => void;
+    handleSave: () => void;
+    renderClosedWithNone: () => JSX.Element;
+    renderClosedWithAll: () => JSX.Element;
+    renderClosedWithOneLabel: (label: string) => JSX.Element;
+    renderClosedWithOneIcon: (icon: string) => JSX.Element;
+    renderClosedWithOneLabelAndIcon: (label: string, icon: string) => JSX.Element;
+    renderClosedWithOne: (label?: string, icon?: string) => JSX.Element | null;
+    renderClosedWithMany: () => JSX.Element;
+    renderClosedMultiSelect: (items: any, numOptions: number) => JSX.Element | null;
+    getStyles: () => any;
+    render(): JSX.Element;
+}