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

package/lib/components/DropDown.js

@@ -1,255 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
-const Modal_1 = require("./Modal");
-const layout_1 = require("../modules/layout");
-const theme_1 = require("../modules/theme");
-const react_native_1 = require("react-native");
-class DropDownItem extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this.getStyles = () => {
-            const theme = theme_1.getTheme();
-            const styles = react_native_1.StyleSheet.create({
-                modalItem: {
-                    paddingHorizontal: 16,
-                    paddingVertical: 16,
-                    fontFamily: theme.fontFamily1,
-                    fontSize: 16,
-                    color: theme.dropDownTextColor
-                },
-                icon: {
-                    fontSize: 26
-                },
-                rowView: {
-                    flexDirection: 'row'
-                },
-                iconView: {
-                    width: 100,
-                    alignItems: 'center',
-                    justifyContent: 'center'
-                },
-                iconOnlyView: {
-                    width: 200,
-                    alignItems: 'center',
-                    justifyContent: 'center'
-                },
-                iconOnly: {
-                    paddingHorizontal: 16,
-                    paddingVertical: 16,
-                    fontSize: 60
-                }
-            });
-            return styles;
-        };
-        this.renderOpenDropDownItem = () => {
-            const { label, icon, iconComponent, nativeID } = this.props;
-            const theme = theme_1.getTheme();
-            const styles = this.getStyles();
-            if (label && icon) {
-                return (React.createElement(react_native_1.View, { nativeID: nativeID, 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, null,
-                        React.createElement(react_native_1.Text, { style: styles.modalItem }, label))));
-            }
-            else if (label && !icon) {
-                return (React.createElement(react_native_1.View, { nativeID: nativeID, style: styles.rowView },
-                    React.createElement(react_native_1.Text, { style: styles.modalItem }, label)));
-            }
-            else if (!label && icon) {
-                return (React.createElement(react_native_1.View, { nativeID: nativeID, 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 }))));
-            }
-            return null;
-        };
-    }
-    render() {
-        const { first, last, value, onPress } = this.props;
-        const theme = theme_1.getTheme();
-        return (React.createElement(react_native_1.TouchableHighlight, { onPress: () => onPress(value), underlayColor: theme.backgroundColor2, style: {
-                borderTopLeftRadius: first ? 5 : 0,
-                borderTopRightRadius: first ? 5 : 0,
-                borderBottomLeftRadius: last ? 5 : 0,
-                borderBottomRightRadius: last ? 5 : 0
-            } }, this.renderOpenDropDownItem()));
-    }
-}
-class DropDown extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            modalOpen: false
-        };
-        this.handleItemPress = (value) => {
-            const { onChange } = this.props;
-            this.setState({ modalOpen: false });
-            onChange(value);
-        };
-        this.renderClosedDropDown = (item, inputStyle) => {
-            const { iconComponent } = this.props;
-            const theme = theme_1.getTheme();
-            const styles = this.getStyles();
-            if (!item) {
-                return (React.createElement(React.Fragment, null,
-                    React.createElement(react_native_1.Text, { style: [styles.text, inputStyle] }, "-"),
-                    React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
-            }
-            else if (item.label && item.icon) {
-                return (React.createElement(React.Fragment, null,
-                    React.createElement(react_native_1.View, { style: styles.rowView },
-                        React.createElement(react_native_1.View, { style: styles.iconView }, iconComponent ? (React.createElement(iconComponent, {
-                            name: item.icon,
-                            style: styles.icon,
-                            color: theme.textColor1
-                        })) : (React.createElement(FontAwesome_1.default, { name: item.icon, color: theme.textColor1, style: styles.icon }))),
-                        React.createElement(react_native_1.Text, { style: [styles.textIcon, inputStyle] }, item.label)),
-                    React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
-            }
-            else if (item.label && !item.icon) {
-                return (React.createElement(React.Fragment, null,
-                    React.createElement(react_native_1.Text, { style: [styles.text, inputStyle] }, item.label),
-                    React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
-            }
-            else if (!item.label && item.icon) {
-                return (React.createElement(React.Fragment, null,
-                    iconComponent ? (React.createElement(iconComponent, {
-                        name: item.icon,
-                        style: styles.iconOnly,
-                        color: theme.textColor1
-                    })) : (React.createElement(FontAwesome_1.default, { name: item.icon, color: theme.textColor1, style: styles.iconOnly })),
-                    React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.setaIcone })));
-            }
-            return null;
-        };
-        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.fontFamily3,
-                    fontSize: layout_1.isTablet() ? 15 : 12,
-                    lineHeight: 16
-                },
-                text: {
-                    lineHeight: 22,
-                    minHeight: 22,
-                    alignSelf: 'flex-start',
-                    color: theme.textColor1,
-                    fontFamily: theme.fontFamily1,
-                    fontSize: 16
-                },
-                textIcon: {
-                    height: 27,
-                    alignSelf: 'center',
-                    color: theme.textColor1,
-                    fontFamily: theme.fontFamily1,
-                    fontSize: 16
-                },
-                seta: {
-                    color: theme.textColor1,
-                    fontSize: 16,
-                    position: 'absolute',
-                    bottom: 10,
-                    right: 16
-                },
-                setaIcone: {
-                    color: theme.textColor1,
-                    fontSize: 16,
-                    position: 'absolute',
-                    bottom: 25,
-                    right: 16
-                },
-                modalOverlay: {
-                    justifyContent: 'center'
-                },
-                modalContainer: {
-                    borderRadius: 5,
-                    backgroundColor: theme.backgroundColor1,
-                    margin: 16
-                },
-                modalItem: {
-                    paddingHorizontal: 16,
-                    paddingVertical: 16,
-                    fontFamily: theme.fontFamily1,
-                    fontSize: 16
-                },
-                emptyMessageContainer: {
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    paddingHorizontal: 16
-                },
-                readonly: {
-                    backgroundColor: theme.disabledColor
-                },
-                icon: {
-                    fontSize: 26
-                },
-                rowView: {
-                    flexDirection: 'row'
-                },
-                iconView: {
-                    width: 50,
-                    alignItems: 'center'
-                },
-                iconOnlyView: {
-                    width: 200,
-                    alignItems: 'center',
-                    justifyContent: 'center'
-                },
-                iconOnly: {
-                    paddingHorizontal: 16,
-                    paddingVertical: 8,
-                    fontSize: 26
-                }
-            });
-            return styles;
-        };
-    }
-    render() {
-        const { modalOpen } = this.state;
-        const { label, items, value, emptyMessage, style, disabled, labelStyle, inputStyle, iconComponent, nativeID } = this.props;
-        const selectedItem = items.find(x => x.value === 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, { nativeID: nativeID, style: [styles.container, style, disabled ? styles.readonly : null] },
-                React.createElement(react_native_1.Text, { style: [styles.label, labelStyle] }, label),
-                this.renderClosedDropDown(selectedItem, inputStyle),
-                React.createElement(Modal_1.Modal, { visible: modalOpen, onRequestClose: () => this.setState({ modalOpen: false }), overlayStyle: styles.modalOverlay },
-                    React.createElement(react_native_1.TouchableWithoutFeedback, null,
-                        React.createElement(react_native_1.View, { style: [
-                                styles.modalContainer,
-                                react_native_1.Platform.OS === 'web' && {
-                                    marginVertical: '10px',
-                                    marginHorizontal: 'auto',
-                                    width: '90%',
-                                    maxWidth: 450,
-                                    maxHeight: 300,
-                                    justifyContent: 'center'
-                                }
-                            ] }, items.length > 0 ? (React.createElement(react_native_1.FlatList, { data: items, initialNumToRender: items.length, keyExtractor: item => item.value.toString(), renderItem: ({ item, index }) => {
-                                return (React.createElement(DropDownItem, { nativeID: item.nativeID, first: index === 0, last: index === items.length - 1, label: item.label, value: item.value, onPress: this.handleItemPress, icon: item.icon, iconComponent: iconComponent }));
-                            } })) : (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.modalItem }, emptyMessage)))))))));
-    }
-}
-DropDown.defaultProps = {
-    emptyMessage: 'Não há registros cadastrados'
-};
-exports.DropDown = DropDown;

package/lib/components/ErrorMessage.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { StyleProp, TextStyle } from 'react-native';
-export interface Props {
-    message?: string | null;
-    style?: StyleProp<TextStyle>;
-    nativeID?: string;
-}
-export declare class ErrorMessage extends React.Component<Props> {
-    getStyles: () => {
-        errorMessage: {
-            fontFamily: string;
-            color: string;
-        };
-    };
-    render(): JSX.Element | null;
-}

package/lib/components/ErrorMessage.js

@@ -1,29 +0,0 @@
-"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");
-class ErrorMessage extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.getStyles = () => {
-            const theme = theme_1.getTheme();
-            const styles = react_native_1.StyleSheet.create({
-                errorMessage: {
-                    fontFamily: theme.fontFamily3,
-                    color: theme.errorColor
-                }
-            });
-            return styles;
-        };
-    }
-    render() {
-        const { message, style, nativeID } = this.props;
-        const styles = this.getStyles();
-        if (!message) {
-            return null;
-        }
-        return (React.createElement(react_native_1.Text, { nativeID: nativeID, style: [styles.errorMessage, style] }, message));
-    }
-}
-exports.ErrorMessage = ErrorMessage;

package/lib/components/FilePicker.d.ts

@@ -1,28 +0,0 @@
-import * as React from 'react';
-export interface FilePickerProperties {
-    label: string;
-    onPress: () => void;
-    icon: string;
-}
-export declare class FilePicker extends React.Component<FilePickerProperties> {
-    static defaultProps: {
-        icon: string;
-    };
-    getStyles: () => {
-        container: {
-            borderRadius: number;
-            backgroundColor: string;
-            height: number;
-            alignItems: "center";
-            justifyContent: "center";
-        };
-        text: {
-            fontFamily: string;
-            fontSize: number;
-            color: string;
-            width: number;
-            textAlign: "center";
-        };
-    };
-    render(): JSX.Element;
-}

package/lib/components/FilePicker.js

@@ -1,44 +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 theme_1 = require("../modules/theme");
-const layout_1 = require("../modules/layout");
-class FilePicker extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.getStyles = () => {
-            const theme = theme_1.getTheme();
-            const styles = react_native_1.StyleSheet.create({
-                container: {
-                    borderRadius: 3,
-                    backgroundColor: theme.backgroundColor2,
-                    height: 100,
-                    alignItems: 'center',
-                    justifyContent: 'center'
-                },
-                text: {
-                    fontFamily: theme.fontFamily1,
-                    fontSize: layout_1.isTablet() ? 15 : 12,
-                    color: theme.textColor3,
-                    width: 200,
-                    textAlign: 'center'
-                }
-            });
-            return styles;
-        };
-    }
-    render() {
-        const { label, onPress, icon } = this.props;
-        const theme = theme_1.getTheme();
-        const styles = this.getStyles();
-        return (React.createElement(react_native_1.TouchableOpacity, { activeOpacity: 0.5, style: styles.container, onPress: onPress },
-            React.createElement(FontAwesome_1.default, { name: icon, color: theme.textColor3, size: 30 }),
-            React.createElement(react_native_1.Text, { style: styles.text }, label)));
-    }
-}
-FilePicker.defaultProps = {
-    icon: 'cloud-upload'
-};
-exports.FilePicker = FilePicker;

package/lib/components/Header.d.ts

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { StyleProp, TextStyle } from 'react-native';
-export interface HeaderButton {
-    icon: string;
-    disabled?: boolean;
-    counter?: number;
-    onPress: () => void;
-    nativeID?: string;
-    buttonStyle?: StyleProp<TextStyle>;
-}
-export interface HeaderProperties {
-    title: string;
-    leftButton?: HeaderButton;
-    rightButton?: HeaderButton;
-}
-export declare class Header extends React.Component<HeaderProperties> {
-    static defaultProps: {
-        leftButtonType: string;
-    };
-    static height: number;
-    getStyles: () => {
-        header: {
-            backgroundColor: string;
-            height: number;
-            flexDirection: "row";
-            alignItems: "center";
-            justifyContent: "center";
-        };
-        title: {
-            color: string;
-            fontFamily: string;
-            fontSize: number;
-            marginHorizontal: number;
-        };
-        button: {
-            padding: number;
-        };
-        counterContainer: {
-            position: "absolute";
-            backgroundColor: string;
-            height: number;
-            width: number;
-            top: number;
-            left: number;
-            borderRadius: number;
-        };
-        counterText: {
-            textAlign: "center";
-            color: string;
-            fontSize: number;
-        };
-    };
-    renderButton: (button: HeaderButton, type: "left" | "right") => JSX.Element;
-    renderButtonInvisible: (type: "left" | "right") => JSX.Element;
-    render(): JSX.Element;
-}

package/lib/components/Header.js

@@ -1,89 +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 theme_1 = require("../modules/theme");
-const layout_1 = require("../modules/layout");
-class Header extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.getStyles = () => {
-            const theme = theme_1.getTheme();
-            const styles = react_native_1.StyleSheet.create({
-                header: {
-                    backgroundColor: theme.backgroundColor3,
-                    height: layout_1.isTablet() ? 65 : 50,
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'center'
-                },
-                title: {
-                    color: theme.textColor4,
-                    fontFamily: theme.fontFamily1,
-                    fontSize: layout_1.isTablet() ? 25 : 18,
-                    marginHorizontal: 35
-                },
-                button: {
-                    padding: layout_1.isTablet() ? 14 : 10
-                },
-                counterContainer: {
-                    position: 'absolute',
-                    backgroundColor: theme.counterBackgroundColor,
-                    height: layout_1.isTablet() ? 20 : 15,
-                    width: layout_1.isTablet() ? 20 : 15,
-                    top: 5,
-                    left: 18,
-                    borderRadius: 50
-                },
-                counterText: {
-                    textAlign: 'center',
-                    color: theme.counterTextColor,
-                    fontSize: layout_1.isTablet() ? 15 : 10
-                }
-            });
-            return styles;
-        };
-        this.renderButton = (button, type) => {
-            const styles = this.getStyles();
-            const theme = theme_1.getTheme();
-            const icon = (React.createElement(React.Fragment, null,
-                React.createElement(FontAwesome_1.default, { nativeID: button.nativeID, name: button.icon, size: layout_1.isTablet() ? 30 : 20, color: button.disabled ? theme.textColor1 : theme.textColor4, style: button.buttonStyle }),
-                button.counter ? (React.createElement(react_native_1.View, { style: styles.counterContainer },
-                    React.createElement(react_native_1.Text, { style: styles.counterText }, button.counter))) : null));
-            const style = [
-                styles.button,
-                type === 'left' ? { marginRight: 'auto' } : { marginLeft: 'auto' }
-            ];
-            if (button.disabled) {
-                return React.createElement(react_native_1.View, { style: style }, icon);
-            }
-            return (React.createElement(react_native_1.TouchableOpacity, { onPress: button.onPress, style: style }, icon));
-        };
-        this.renderButtonInvisible = (type) => {
-            const styles = this.getStyles();
-            const style = [
-                styles.button,
-                type === 'left' ? { marginRight: 'auto' } : { marginLeft: 'auto' }
-            ];
-            return React.createElement(react_native_1.View, { style: style });
-        };
-    }
-    render() {
-        const { title, leftButton, rightButton } = this.props;
-        const styles = this.getStyles();
-        return (React.createElement(react_native_1.View, { style: styles.header },
-            leftButton
-                ? this.renderButton(leftButton, 'left')
-                : this.renderButtonInvisible('left'),
-            React.createElement(react_native_1.Text, { style: styles.title }, title),
-            rightButton
-                ? this.renderButton(rightButton, 'right')
-                : this.renderButtonInvisible('right')));
-    }
-}
-Header.defaultProps = {
-    leftButtonType: 'menu'
-};
-Header.height = layout_1.isTablet() ? 65 : 50;
-exports.Header = Header;

package/lib/components/HeaderDesktop.d.ts

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

package/lib/components/HeaderDesktop.js

@@ -1,80 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const theme_1 = require("../modules/theme");
-const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
-const react_native_1 = require("react-native");
-const layout_1 = require("../modules/layout");
-class HeaderDesktop extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.getStyles = () => {
-            const theme = theme_1.getTheme();
-            const styles = react_native_1.StyleSheet.create({
-                container: {
-                    backgroundColor: theme.backgroundColor3,
-                    height: HeaderDesktop.height,
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    shadowOpacity: 0.6,
-                    shadowRadius: 20,
-                    shadowColor: theme.shadowColor1
-                },
-                title: {
-                    color: theme.textColor4,
-                    fontSize: 24,
-                    fontFamily: theme.fontFamily3
-                },
-                greeting: {
-                    color: theme.textColor4,
-                    fontSize: 18,
-                    fontFamily: theme.fontFamily2,
-                    marginLeft: 'auto',
-                    marginRight: 20
-                },
-                button: {
-                    padding: layout_1.isTablet() ? 14 : 10
-                },
-                counterContainer: {
-                    position: 'absolute',
-                    backgroundColor: theme.counterBackgroundColor,
-                    height: layout_1.isTablet() ? 20 : 15,
-                    width: layout_1.isTablet() ? 20 : 15,
-                    top: 5,
-                    left: 18,
-                    borderRadius: 50
-                },
-                counterText: {
-                    textAlign: 'center',
-                    color: theme.counterTextColor,
-                    fontSize: layout_1.isTablet() ? 15 : 10
-                }
-            });
-            return styles;
-        };
-        this.renderRightButton = (button) => {
-            const styles = this.getStyles();
-            const theme = theme_1.getTheme();
-            const icon = (React.createElement(React.Fragment, null,
-                React.createElement(FontAwesome_1.default, { nativeID: button.nativeID, name: button.icon, size: layout_1.isTablet() ? 30 : 20, color: button.disabled ? theme.textColor1 : theme.textColor4, style: button.buttonStyle }),
-                button.counter ? (React.createElement(react_native_1.View, { style: styles.counterContainer },
-                    React.createElement(react_native_1.Text, { nativeID: `${button.nativeID}-counter`, style: styles.counterText }, button.counter))) : null));
-            const style = [styles.button];
-            if (button.disabled) {
-                return React.createElement(react_native_1.View, { style: style }, icon);
-            }
-            return (React.createElement(react_native_1.TouchableOpacity, { onPress: button.onPress, style: style }, icon));
-        };
-    }
-    render() {
-        const { logo, title, greeting, rightButton, headerStyle } = this.props;
-        const styles = this.getStyles();
-        return (React.createElement(react_native_1.View, { style: [styles.container, headerStyle] },
-            logo(),
-            title && React.createElement(react_native_1.Text, { style: styles.title }, title),
-            greeting && (React.createElement(react_native_1.Text, { nativeID: "app-greeting-message", style: [styles.greeting, greeting.style] }, greeting.message)),
-            rightButton && this.renderRightButton(rightButton)));
-    }
-}
-HeaderDesktop.height = 60;
-exports.HeaderDesktop = HeaderDesktop;

package/lib/components/ImageButton.d.ts

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