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

package/lib/components/Message.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+class Message extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = theme_1.getTheme();
+            return react_native_1.StyleSheet.create({
+                overlay: {
+                    alignItems: 'center'
+                },
+                container: {
+                    backgroundColor: theme.backgroundColor1,
+                    borderRadius: 6,
+                    padding: layout_1.isTablet() ? 25 : 16,
+                    width: layout_1.isTablet() ? 350 : 250,
+                    marginTop: layout_1.isTablet() ? 250 : 140,
+                    alignItems: 'center'
+                },
+                text: {
+                    color: theme.textColor3,
+                    fontFamily: theme.fontFamily1,
+                    fontSize: layout_1.isTablet() ? 25 : 16,
+                    textAlign: 'center',
+                    marginTop: layout_1.isTablet() ? 15 : 5,
+                    width: '100%'
+                }
+            });
+        };
+    }
+    render() {
+        const { message, visible, type, onRequestClose, nativeID, textStyle } = this.props;
+        const styles = this.getStyles();
+        const theme = 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: layout_1.isTablet() ? 52 : 42 }),
+                React.createElement(react_native_1.Text, { style: [styles.text, textStyle] }, message))));
+    }
+}
+Message.defaultProps = {
+    type: 'info'
+};
+exports.Message = Message;

package/lib/components/Modal.d.ts

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

package/lib/components/Modal.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_native_web_modal_1 = require("react-native-web-modal");
+const react_native_1 = require("react-native");
+class Modal extends React.Component {
+    render() {
+        const { children, visible, overlayStyle, onRequestClose } = this.props;
+        return (React.createElement(react_native_web_modal_1.default, { animationType: "fade", transparent: true, visible: visible, supportedOrientations: ['landscape', 'portrait'], onRequestClose: onRequestClose },
+            React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: onRequestClose },
+                React.createElement(react_native_1.View, { style: [styles.overlay, overlayStyle] }, children))));
+    }
+}
+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 | undefined, icon?: string | undefined) => JSX.Element | null;
+    renderClosedWithMany: () => JSX.Element;
+    renderClosedMultiSelect: (items: any, numOptions: number) => JSX.Element | null;
+    getStyles: () => any;
+    render(): JSX.Element;
+}

package/lib/components/MultiSelect.js

@@ -0,0 +1,376 @@
+"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");
+const layout_1 = require("../modules/layout");
+const Switch_1 = require("./Switch");
+const Modal_1 = require("./Modal");
+const Button_1 = require("./Button");
+const Space_1 = require("./Space");
+class MultiSelectItem extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = theme_1.getTheme();
+            const width = react_native_1.Dimensions.get('screen').width;
+            const styles = react_native_1.StyleSheet.create({
+                text: {
+                    paddingHorizontal: 16,
+                    paddingVertical: 16,
+                    fontFamily: theme.fontFamily1,
+                    fontSize: 16,
+                    flexWrap: 'wrap',
+                    maxWidth: width - 150,
+                    color: theme.textColor1
+                },
+                icon: {
+                    fontSize: 26
+                },
+                rowView: {
+                    flexDirection: 'row',
+                    paddingLeft: 16
+                },
+                switch: {
+                    alignContent: 'center',
+                    justifyContent: 'center'
+                },
+                iconView: {
+                    width: 50,
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                iconOnlyView: {
+                    width: 100,
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                iconOnly: {
+                    paddingHorizontal: 16,
+                    paddingVertical: 16,
+                    fontSize: 60
+                },
+                switchStyle: {
+                    paddingHorizontal: 8,
+                    borderWidth: 0
+                }
+            });
+            return styles;
+        };
+        this.renderWithLabelAndIcon = (label, icon) => {
+            const { value, iconComponent, handleAdd, handleRemove } = this.props;
+            const theme = theme_1.getTheme();
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                React.createElement(react_native_1.View, { style: styles.switch },
+                    React.createElement(Switch_1.Switch, { value: this.props.checked, onChange: () => {
+                            if (this.props.checked) {
+                                handleRemove(value);
+                            }
+                            else {
+                                handleAdd(value);
+                            }
+                        }, style: styles.switchStyle })),
+                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.text }, label))));
+        };
+        this.renderWithLabel = (label) => {
+            const { value, handleAdd, handleRemove } = this.props;
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                React.createElement(react_native_1.View, { style: styles.switch },
+                    React.createElement(Switch_1.Switch, { value: this.props.checked, onChange: () => {
+                            if (this.props.checked) {
+                                handleRemove(value);
+                            }
+                            else {
+                                handleAdd(value);
+                            }
+                        }, style: styles.switchStyle })),
+                React.createElement(react_native_1.Text, { style: styles.text }, label)));
+        };
+        this.renderWithIcon = (icon) => {
+            const { value, iconComponent, handleAdd, handleRemove } = this.props;
+            const theme = theme_1.getTheme();
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                React.createElement(react_native_1.View, { style: styles.switch },
+                    React.createElement(Switch_1.Switch, { value: this.props.checked, onChange: () => {
+                            if (this.props.checked) {
+                                handleRemove(value);
+                            }
+                            else {
+                                handleAdd(value);
+                            }
+                        }, style: styles.switchStyle })),
+                React.createElement(react_native_1.View, { 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 })))));
+        };
+    }
+    render() {
+        const { label, icon } = this.props;
+        if (label && icon) {
+            return this.renderWithLabelAndIcon(label, icon);
+        }
+        else if (label && !icon) {
+            return this.renderWithLabel(label);
+        }
+        else if (!label && icon) {
+            return this.renderWithIcon(icon);
+        }
+        return null;
+    }
+}
+class MultiSelect extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            modalOpen: false,
+            selectedValues: [],
+            selectedValuesInitial: []
+        };
+        this.componentDidMount = () => {
+            this.setState({
+                selectedValues: this.props.values || [],
+                selectedValuesInitial: this.props.values || []
+            });
+        };
+        this.componentDidUpdate = (prevProps) => {
+            if (prevProps.values !== this.props.values) {
+                this.setState({
+                    selectedValues: this.props.values || [],
+                    selectedValuesInitial: this.props.values || []
+                });
+            }
+        };
+        this.handleAddValue = (value) => {
+            this.setState({ selectedValues: [...this.state.selectedValues, value] });
+        };
+        this.handleRemoveValue = (value) => {
+            this.setState({
+                selectedValues: this.state.selectedValues.filter(x => x !== value)
+            });
+        };
+        this.handleSave = () => {
+            const { onChange } = this.props;
+            const { selectedValues } = this.state;
+            this.setState({ modalOpen: false, selectedValuesInitial: selectedValues });
+            onChange(selectedValues);
+        };
+        this.renderClosedWithNone = () => {
+            const { selectedNoneDescription } = this.props;
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                React.createElement(react_native_1.Text, { style: styles.text }, selectedNoneDescription),
+                React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
+        };
+        this.renderClosedWithAll = () => {
+            const { selectedAllDescription } = this.props;
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                React.createElement(react_native_1.Text, { style: styles.text }, selectedAllDescription),
+                React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
+        };
+        this.renderClosedWithOneLabel = (label) => {
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                React.createElement(react_native_1.Text, { style: styles.text }, label),
+                React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
+        };
+        this.renderClosedWithOneIcon = (icon) => {
+            const { iconComponent } = this.props;
+            const theme = theme_1.getTheme();
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                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 })),
+                React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
+        };
+        this.renderClosedWithOneLabelAndIcon = (label, icon) => {
+            const { iconComponent } = this.props;
+            const theme = theme_1.getTheme();
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { 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, { style: styles.textView },
+                    React.createElement(react_native_1.Text, { style: styles.text }, label)),
+                React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
+        };
+        this.renderClosedWithOne = (label, icon) => {
+            if (label && icon) {
+                return this.renderClosedWithOneLabelAndIcon(label, icon);
+            }
+            else if (label && !icon) {
+                return this.renderClosedWithOneLabel(label);
+            }
+            else if (!label && icon) {
+                return this.renderClosedWithOneIcon(icon);
+            }
+            return null;
+        };
+        this.renderClosedWithMany = () => {
+            const { selectedManyDescription } = this.props;
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                React.createElement(react_native_1.Text, { style: styles.text }, selectedManyDescription),
+                React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
+        };
+        this.renderClosedMultiSelect = (items, numOptions) => {
+            if (items.length === 0) {
+                return this.renderClosedWithNone();
+            }
+            else if (items.length === numOptions) {
+                return this.renderClosedWithAll();
+            }
+            else if (items.length === 1) {
+                return this.renderClosedWithOne(items[0].label, items[0].icon);
+            }
+            else {
+                return this.renderClosedWithMany();
+            }
+        };
+        this.getStyles = () => {
+            const theme = theme_1.getTheme();
+            const styles = react_native_1.StyleSheet.create({
+                container: {
+                    paddingHorizontal: 16,
+                    paddingVertical: 8,
+                    borderWidth: 1,
+                    borderColor: theme.borderColor1,
+                    borderRadius: 3
+                },
+                label: {
+                    color: theme.textColor2,
+                    fontFamily: theme.fontFamily2,
+                    fontSize: layout_1.isTablet() ? 15 : 12,
+                    lineHeight: 16
+                },
+                textView: {
+                    flexDirection: 'column',
+                    justifyContent: 'center'
+                },
+                text: {
+                    height: 27,
+                    alignSelf: 'flex-start',
+                    color: theme.textColor1,
+                    fontFamily: theme.fontFamily1,
+                    fontSize: 16
+                },
+                seta: {
+                    color: theme.textColor1,
+                    fontSize: 16,
+                    position: 'absolute',
+                    bottom: 0,
+                    right: 0
+                },
+                modalOverlay: {
+                    justifyContent: 'center',
+                    paddingBottom: 16,
+                    paddingTop: 16
+                },
+                modalContainer: {
+                    borderRadius: 5,
+                    backgroundColor: theme.backgroundColor1,
+                    margin: 16
+                },
+                emptyMessageContainer: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingHorizontal: 16
+                },
+                readonly: {
+                    backgroundColor: theme.disabledColor
+                },
+                icon: {
+                    fontSize: 26
+                },
+                rowView: {
+                    flexDirection: 'row'
+                },
+                iconView: {
+                    width: 50,
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                iconOnly: {
+                    fontSize: 30,
+                    paddingLeft: 16
+                },
+                buttonCancelar: {
+                    flex: 1,
+                    backgroundColor: theme.backgroundColor1
+                },
+                buttonOk: {
+                    flex: 1
+                },
+                buttons: {
+                    flexDirection: 'row',
+                    padding: 16
+                }
+            });
+            return styles;
+        };
+    }
+    render() {
+        const { modalOpen, selectedValues, selectedValuesInitial } = this.state;
+        const { label, items, emptyMessage, disabled, iconComponent, okButtonDescription, cancelButtonDescription } = this.props;
+        const selectedItems = items.filter(x => selectedValues.includes(x.value));
+        const styles = this.getStyles();
+        const theme = theme_1.getTheme();
+        return (React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: () => this.setState({ modalOpen: true }), disabled: disabled },
+            React.createElement(react_native_1.View, { style: [styles.container, disabled ? styles.readonly : null] },
+                React.createElement(react_native_1.Text, { style: styles.label }, label),
+                this.renderClosedMultiSelect(selectedItems, items.length),
+                React.createElement(Modal_1.Modal, { visible: modalOpen, overlayStyle: styles.modalOverlay },
+                    React.createElement(react_native_1.View, { style: [
+                            styles.modalContainer,
+                            react_native_1.Platform.OS === 'web' && {
+                                margin: 'auto',
+                                width: '90%',
+                                maxWidth: 450,
+                                justifyContent: 'center',
+                                marginBottom: '10px',
+                                marginTop: '10px'
+                            }
+                        ] },
+                        items.length > 0 ? (React.createElement(react_native_1.FlatList, { data: items, initialNumToRender: items.length, keyExtractor: item => item.value.toString(), extraData: selectedValues, renderItem: ({ item }) => {
+                                return (React.createElement(MultiSelectItem, { label: item.label, value: item.value, icon: item.icon, iconComponent: iconComponent, handleAdd: value => this.handleAddValue(value), handleRemove: value => this.handleRemoveValue(value), checked: selectedValues.includes(item.value) }));
+                            } })) : (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.text }, emptyMessage))),
+                        React.createElement(react_native_1.View, { style: styles.buttons },
+                            React.createElement(Button_1.Button, { text: cancelButtonDescription || 'Cancelar', style: styles.buttonCancelar, primary: false, onPress: () => {
+                                    this.setState({
+                                        modalOpen: false,
+                                        selectedValues: selectedValuesInitial
+                                    });
+                                } }),
+                            React.createElement(Space_1.Space, { width: 20 }),
+                            React.createElement(Button_1.Button, { text: okButtonDescription || 'Ok', style: styles.buttonOk, onPress: this.handleSave })))))));
+    }
+}
+MultiSelect.defaultProps = {
+    emptyMessage: 'Não há registros cadastrados',
+    selectedAllDescription: 'Todos',
+    selectedManyDescription: 'Vários',
+    selectedNoneDescription: 'Nenhum',
+    okButtonDescription: 'Ok',
+    cancelButtonDescription: 'Cancelar'
+};
+exports.MultiSelect = MultiSelect;

package/lib/components/NoRecordMessage.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+interface NoRecordMessageProps {
+    visible: boolean;
+    message: string;
+}
+export declare class NoRecordMessage extends React.Component<NoRecordMessageProps> {
+    getStyles: () => {
+        text: {
+            fontSize: number;
+            color: string;
+            textAlign: "center";
+        };
+        icon: {
+            color: string;
+        };
+        view: {
+            alignItems: "center";
+            marginTop: number;
+        };
+    };
+    render(): JSX.Element;
+}
+export {};

package/lib/components/NoRecordMessage.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_native_1 = require("react-native");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const layout_1 = require("../modules/layout");
+const Space_1 = require("./Space");
+class NoRecordMessage extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            return react_native_1.StyleSheet.create({
+                text: {
+                    fontSize: layout_1.isTablet() ? 28 : 18,
+                    color: '#969696',
+                    textAlign: 'center'
+                },
+                icon: { color: '#969696' },
+                view: { alignItems: 'center', marginTop: 25 }
+            });
+        };
+    }
+    render() {
+        const { visible, message } = this.props;
+        if (!visible) {
+            return React.createElement(React.Fragment, null);
+        }
+        const styles = this.getStyles();
+        return (React.createElement(react_native_1.View, { style: styles.view },
+            React.createElement(FontAwesome_1.default, { name: 'exclamation-triangle', size: layout_1.isTablet() ? 80 : 60, style: styles.icon }),
+            React.createElement(Space_1.Space, { height: 5 }),
+            React.createElement(react_native_1.Text, { style: styles.text }, message)));
+    }
+}
+exports.NoRecordMessage = NoRecordMessage;

package/lib/components/Question.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+export interface QuestionProperties {
+    message: string;
+    visible: boolean;
+    nativeID?: string;
+    okButton: {
+        text: string;
+        onPress: () => void;
+        style?: StyleProp<ViewStyle>;
+        textStyle?: StyleProp<TextStyle>;
+        nativeID?: string;
+    };
+    cancelButton: {
+        text: string;
+        onPress: () => void;
+        style?: StyleProp<ViewStyle>;
+        textStyle?: StyleProp<TextStyle>;
+        nativeID?: string;
+    };
+}
+export declare class Question extends React.Component<QuestionProperties> {
+    getStyles: () => {
+        botoesAcao: {
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "space-evenly";
+            width: string;
+        };
+        overlay: {
+            flex: number;
+            backgroundColor: string;
+            alignItems: "center";
+        };
+        text: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+            textAlign: "center";
+            marginTop: number;
+            width: string;
+        };
+        container: {
+            backgroundColor: string;
+            borderRadius: number;
+            padding: number;
+            width: number;
+            marginTop: number;
+            alignItems: "center";
+        };
+        icon: {
+            color: string;
+            fontSize: number;
+        };
+    };
+    render(): JSX.Element;
+}