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

package/lib/components/Message.js

@@ -1,50 +0,0 @@
-"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

@@ -1,11 +0,0 @@
-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

@@ -1,20 +0,0 @@
-"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

@@ -1,51 +0,0 @@
-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

@@ -1,376 +0,0 @@
-"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

@@ -1,23 +0,0 @@
-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

@@ -1,35 +0,0 @@
-"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

@@ -1,57 +0,0 @@
-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;
-}