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

package/lib/components/DropDown.js

@@ -0,0 +1,263 @@
+"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 { icon } = this.props;
+            const styles = react_native_1.StyleSheet.create({
+                container: Object.assign({ paddingHorizontal: 16, paddingVertical: 8, borderWidth: 1, borderColor: theme.borderColor1, borderRadius: 3 }, (icon
+                    ? {
+                        flexDirection: 'row',
+                        minHeight: react_native_1.Platform.OS === 'web' || react_native_1.Platform.OS === 'ios' ? 40 : 46
+                    }
+                    : {})),
+                label: {
+                    color: theme.textColor2,
+                    fontFamily: theme.fontFamily3,
+                    fontSize: layout_1.isTablet() ? 15 : 12,
+                    lineHeight: 16
+                },
+                text: {
+                    lineHeight: 22,
+                    minHeight: 22,
+                    textAlignVertical: 'center',
+                    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
+                },
+                iconOnLine: {
+                    color: theme.textColor2,
+                    fontSize: layout_1.isTablet() ? 21 : 19,
+                    marginRight: 10,
+                    minWidth: 25,
+                    textAlignVertical: 'center',
+                    flex: 0
+                }
+            });
+            return styles;
+        };
+    }
+    render() {
+        const { modalOpen } = this.state;
+        const { label, items, value, emptyMessage, style, disabled, labelStyle, inputStyle, iconComponent, nativeID, icon } = 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] },
+                icon ? (React.createElement(FontAwesome_1.default, { name: icon, style: styles.iconOnLine })) : (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

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

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

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

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

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

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

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

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