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

package/lib/components/AppShell.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { HeaderButton } from './Header';
+import { GreetingMessage } from './HeaderDesktop';
+import { MenuProperties } from './Menu';
+import { MenuMobile } from './MenuMobile';
+import { StyleSheet, StyleProp, TextStyle } from 'react-native';
+export declare type AppShellProperties = MenuProperties & {
+    logoHeader: () => React.ReactNode;
+    logoMenu: () => React.ReactNode;
+    title?: string;
+    greeting?: GreetingMessage;
+    screenTitle: string;
+    renderUserData?: () => React.ReactNode;
+    rightButton?: HeaderButton;
+    headerStyle?: StyleProp<TextStyle>;
+    alwaysDesktop?: boolean;
+    children?: React.ReactNode;
+};
+export declare class AppShell extends React.Component<AppShellProperties> {
+    menu: MenuMobile | null;
+    getMobileStyles: () => StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+        container: {
+            flex: number;
+            padding: number;
+            height: number;
+            overflow: "auto";
+        };
+        logoText: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+            marginLeft: number;
+            display: "flex";
+            alignItems: "center";
+        };
+    }>;
+    getDesktopStyles: () => StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+        container: {
+            flexDirection: "row";
+            flex: number;
+        };
+        content: {
+            flex: number;
+            padding: number;
+            height: number;
+            overflow: "auto";
+        };
+    }>;
+    renderMobile: () => JSX.Element;
+    renderDesktop: () => JSX.Element;
+    render(): JSX.Element;
+}

package/lib/components/AppShell.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppShell = void 0;
+const React = require("react");
+const DimensionsMonitor_1 = require("./DimensionsMonitor");
+const Header_1 = require("./Header");
+const HeaderDesktop_1 = require("./HeaderDesktop");
+const MenuMobile_1 = require("./MenuMobile");
+const MenuDesktop_1 = require("./MenuDesktop");
+const theme_1 = require("../modules/theme");
+const react_native_1 = require("react-native");
+class AppShell extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.menu = null;
+        this.getMobileStyles = () => {
+            const theme = (0, theme_1.getTheme)();
+            const styles = react_native_1.StyleSheet.create({
+                container: {
+                    flex: 1,
+                    padding: 16,
+                    height: react_native_1.Dimensions.get('window').height - HeaderDesktop_1.HeaderDesktop.height,
+                    // @ts-ignore: O react-native não tem auto, mas o react-native-web aceita
+                    overflow: 'auto'
+                },
+                logoText: {
+                    color: theme.textColor1,
+                    fontFamily: theme.fontFamily3,
+                    fontSize: 22,
+                    marginLeft: 10,
+                    display: 'flex',
+                    alignItems: 'center'
+                }
+            });
+            return styles;
+        };
+        this.getDesktopStyles = () => {
+            const styles = react_native_1.StyleSheet.create({
+                container: {
+                    flexDirection: 'row',
+                    flex: 1
+                },
+                content: {
+                    flex: 1,
+                    padding: 16,
+                    height: react_native_1.Dimensions.get('window').height - HeaderDesktop_1.HeaderDesktop.height,
+                    // @ts-ignore: O react-native não tem auto, mas o react-native-web aceita
+                    overflow: 'auto'
+                }
+            });
+            return styles;
+        };
+        this.renderMobile = () => {
+            const { title, logoMenu, screenTitle, renderUserData, menu, onMenuPress, isCurrentMenuPath, children, rightButton } = this.props;
+            const styles = this.getMobileStyles();
+            return (React.createElement(MenuMobile_1.MenuMobile, { ref: ref => (this.menu = ref), menu: menu, onMenuPress: onMenuPress, isCurrentMenuPath: isCurrentMenuPath, renderLogo: () => (React.createElement(React.Fragment, null,
+                    logoMenu(),
+                    title && React.createElement(react_native_1.Text, { style: styles.logoText }, title))), renderUserData: renderUserData },
+                React.createElement(Header_1.Header, { title: screenTitle, leftButton: {
+                        nativeID: 'menu-hamburguer',
+                        icon: 'bars',
+                        onPress: () => this.menu.open()
+                    }, rightButton: rightButton }),
+                React.createElement(react_native_1.View, { style: styles.container }, children)));
+        };
+        this.renderDesktop = () => {
+            const { title, logoHeader, greeting, menu, onMenuPress, isCurrentMenuPath, children, rightButton, renderUserData, headerStyle } = this.props;
+            const styles = this.getDesktopStyles();
+            return (React.createElement(React.Fragment, null,
+                React.createElement(HeaderDesktop_1.HeaderDesktop, { title: title, logo: logoHeader, greeting: greeting, rightButton: rightButton, headerStyle: headerStyle }),
+                React.createElement(react_native_1.View, { style: styles.container },
+                    React.createElement(MenuDesktop_1.MenuDesktop, { menu: menu, headerHeight: HeaderDesktop_1.HeaderDesktop.height, onMenuPress: onMenuPress, isCurrentMenuPath: isCurrentMenuPath, renderUserData: renderUserData }),
+                    React.createElement(react_native_1.View, { nativeID: "app-shell-desktop-content", style: styles.content }, children))));
+        };
+    }
+    render() {
+        return (React.createElement(DimensionsMonitor_1.DimensionsMonitor, null, ({ isDesktop }) => isDesktop || this.props.alwaysDesktop
+            ? this.renderDesktop()
+            : this.renderMobile()));
+    }
+}
+exports.AppShell = AppShell;

package/lib/components/Button.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+export interface ButtonProperties {
+    text: string;
+    primary?: boolean;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    onPress: () => void;
+    disabled?: boolean;
+    disabledBackgroundColor?: string;
+    disabledLabelColor?: string;
+    nativeID?: string;
+}
+export declare class Button extends React.Component<ButtonProperties> {
+    static defaultProps: {
+        primary: boolean;
+    };
+    getStyles: () => {
+        touchable: {
+            backgroundColor: string;
+            borderColor: string;
+            borderWidth: number;
+            borderRadius: number;
+            height: number;
+            alignItems: "center";
+            justifyContent: "center";
+        };
+        touchablePrimary: {
+            backgroundColor: string;
+            borderWidth: number;
+        };
+        text: {
+            fontFamily: string;
+            fontSize: number;
+            paddingHorizontal: number;
+            color: string;
+        };
+        textPrimary: {
+            color: string;
+        };
+        disabled: {
+            backgroundColor: string;
+        };
+        textDisabled: {
+            color: string;
+        };
+    };
+    render(): JSX.Element;
+}

package/lib/components/Button.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const React = require("react");
+const theme_1 = require("../modules/theme");
+const test_1 = require("../modules/test");
+const react_native_1 = require("react-native");
+const layout_1 = require("../modules/layout");
+class Button extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const { disabledBackgroundColor, disabledLabelColor } = this.props;
+            const theme = (0, theme_1.getTheme)();
+            const styles = react_native_1.StyleSheet.create({
+                touchable: {
+                    backgroundColor: theme.backgroundColor1,
+                    borderColor: theme.borderColor1,
+                    borderWidth: 1,
+                    borderRadius: 3,
+                    height: (0, layout_1.isTablet)() ? 45 : 40,
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                touchablePrimary: {
+                    backgroundColor: theme.backgroundColor3,
+                    borderWidth: 0
+                },
+                text: {
+                    fontFamily: theme.fontFamily1,
+                    fontSize: (0, layout_1.isTablet)() ? 18 : 13,
+                    paddingHorizontal: 11,
+                    color: theme.textColor1
+                },
+                textPrimary: {
+                    color: theme.textColor4
+                },
+                disabled: {
+                    backgroundColor: disabledBackgroundColor != null
+                        ? disabledBackgroundColor
+                        : theme.backgroundColor2
+                },
+                textDisabled: {
+                    color: disabledLabelColor != null ? disabledLabelColor : 'silver'
+                }
+            });
+            return styles;
+        };
+    }
+    render() {
+        const { text, primary, style, textStyle, onPress, disabled, nativeID } = this.props;
+        const styles = this.getStyles();
+        return (React.createElement(react_native_1.TouchableOpacity, { activeOpacity: 0.7, style: [
+                styles.touchable,
+                primary && styles.touchablePrimary,
+                style,
+                disabled && styles.disabled
+            ], onPress: onPress, disabled: disabled, testID: (0, test_1.getTestID)(nativeID) },
+            React.createElement(react_native_1.Text, { nativeID: nativeID, style: [
+                    styles.text,
+                    primary && styles.textPrimary,
+                    textStyle,
+                    disabled && styles.textDisabled
+                ] }, text)));
+    }
+}
+exports.Button = Button;
+Button.defaultProps = {
+    primary: true
+};

package/lib/components/Card.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+export interface CardHeaderProperties {
+    title: string;
+    titleStyle?: StyleProp<TextStyle>;
+    containerStyle?: StyleProp<TextStyle>;
+    nativeID?: string;
+    numberOfLines?: number;
+    onHelpPress?: () => void;
+    children?: React.ReactNode;
+}
+export declare class CardHeader extends React.Component<CardHeaderProperties> {
+    getStyles: () => {
+        container: {
+            padding: number;
+        };
+        title: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+            marginRight: number;
+        };
+        help: {
+            position: "absolute";
+            right: number;
+            top: number;
+        };
+        helpIcon: {
+            fontSize: number;
+            color: string;
+        };
+    };
+    render(): JSX.Element;
+}
+export declare class CardFooter extends React.Component<ViewProps> {
+    render(): JSX.Element;
+}
+export declare class CardSection extends React.Component<ViewProps> {
+    render(): JSX.Element;
+}
+export declare class CardModal extends React.Component<ViewProps> {
+    render(): JSX.Element;
+}
+export interface CardProperties extends ViewProps {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare class Card extends React.Component<CardProperties> {
+    static Header: typeof CardHeader;
+    static Section: typeof CardSection;
+    static Footer: typeof CardFooter;
+    static Modal: typeof CardModal;
+    getStyles: () => {
+        container: {
+            borderRadius: number;
+            backgroundColor: string;
+            shadowOpacity: number;
+            shadowRadius: number;
+        };
+        cardChild: {
+            borderTopColor: string;
+            borderTopWidth: number;
+        };
+    };
+    render(): JSX.Element;
+}

package/lib/components/Card.js

@@ -0,0 +1,131 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = exports.CardModal = exports.CardSection = exports.CardFooter = exports.CardHeader = void 0;
+const React = require("react");
+const react_native_elevated_view_1 = require("react-native-elevated-view");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const theme_1 = require("../modules/theme");
+const layout_1 = require("../modules/layout");
+const test_1 = require("../modules/test");
+const react_native_1 = require("react-native");
+class CardHeader extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, theme_1.getTheme)();
+            const styles = react_native_1.StyleSheet.create({
+                container: {
+                    padding: 16
+                },
+                title: {
+                    color: theme.textColor1,
+                    fontFamily: theme.fontFamily1,
+                    fontSize: (0, layout_1.isTablet)() ? 22 : 18,
+                    marginRight: 10
+                },
+                help: {
+                    position: 'absolute',
+                    right: 5,
+                    top: 5
+                },
+                helpIcon: {
+                    fontSize: (0, layout_1.isTablet)() ? 24 : 20,
+                    color: '#6d819c'
+                }
+            });
+            return styles;
+        };
+    }
+    render() {
+        const { title, titleStyle, onHelpPress, nativeID, containerStyle, numberOfLines } = this.props;
+        const styles = this.getStyles();
+        return (React.createElement(react_native_1.View, { nativeID: nativeID, style: [styles.container, containerStyle] },
+            React.createElement(react_native_1.Text, { testID: (0, test_1.getTestID)(nativeID), style: [styles.title, titleStyle], numberOfLines: numberOfLines }, title),
+            onHelpPress && (React.createElement(react_native_1.TouchableOpacity, { onPress: onHelpPress, style: styles.help },
+                React.createElement(FontAwesome_1.default, { name: "question-circle", style: styles.helpIcon })))));
+    }
+}
+exports.CardHeader = CardHeader;
+class CardFooter extends React.Component {
+    render() {
+        const _a = this.props, { children, nativeID } = _a, otherProps = __rest(_a, ["children", "nativeID"]);
+        return (React.createElement(react_native_1.View, Object.assign({ nativeID: nativeID, testID: (0, test_1.getTestID)(nativeID), style: [cardFooterStyles.container] }, otherProps), children));
+    }
+}
+exports.CardFooter = CardFooter;
+class CardSection extends React.Component {
+    render() {
+        const _a = this.props, { children, style, nativeID } = _a, otherProps = __rest(_a, ["children", "style", "nativeID"]);
+        return (React.createElement(react_native_1.View, Object.assign({ nativeID: nativeID, testID: (0, test_1.getTestID)(nativeID), style: [cardSectionStyles.container, style] }, otherProps), children));
+    }
+}
+exports.CardSection = CardSection;
+class CardModal extends React.Component {
+    render() {
+        const _a = this.props, { children, style } = _a, otherProps = __rest(_a, ["children", "style"]);
+        return (React.createElement(react_native_1.TouchableOpacity, Object.assign({ activeOpacity: 1, style: [{ padding: 16 }, style] }, otherProps), children));
+    }
+}
+exports.CardModal = CardModal;
+class Card extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, theme_1.getTheme)();
+            const styles = react_native_1.StyleSheet.create({
+                container: {
+                    borderRadius: 3,
+                    backgroundColor: theme.backgroundColor1,
+                    shadowOpacity: 0.15,
+                    shadowRadius: 5
+                },
+                cardChild: {
+                    borderTopColor: theme.borderColor1,
+                    borderTopWidth: 1
+                }
+            });
+            return styles;
+        };
+    }
+    render() {
+        const _a = this.props, { children, style } = _a, otherProps = __rest(_a, ["children", "style"]);
+        const styles = this.getStyles();
+        const childrenMapped = React.Children.map(children, (child, index) => {
+            if (index === 0 || !child) {
+                return child;
+            }
+            return (React.createElement(React.Fragment, null,
+                React.createElement(react_native_1.View, { style: styles.cardChild }),
+                child));
+        });
+        return react_native_1.Platform.OS == 'web' ? (React.createElement(react_native_1.View, Object.assign({ style: [styles.container, style] }, otherProps), childrenMapped)) : (React.createElement(react_native_elevated_view_1.default, Object.assign({ elevation: 5, 
+            // @ts-ignore : The component uses a different version of typing
+            style: [styles.container, style] }, otherProps), childrenMapped));
+    }
+}
+exports.Card = Card;
+Card.Header = CardHeader;
+Card.Section = CardSection;
+Card.Footer = CardFooter;
+Card.Modal = CardModal;
+const cardSectionStyles = react_native_1.StyleSheet.create({
+    container: {
+        padding: 16
+    }
+});
+const cardFooterStyles = react_native_1.StyleSheet.create({
+    container: {
+        padding: 16
+    }
+});

package/lib/components/CheckBox.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+interface Props {
+    label?: string;
+    value: boolean;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    renderLabel?: () => React.ReactNode;
+    labelStyle?: StyleProp<TextStyle>;
+    iconStyle?: StyleProp<TextStyle>;
+    nativeID?: string;
+}
+export declare class CheckBox extends React.Component<Props> {
+    getStyles: () => {
+        container: {
+            flexDirection: "row";
+            alignItems: "center";
+        };
+        icon: {
+            color: string;
+            width: number;
+            fontSize: number;
+            height: number;
+            lineHeight: number;
+        };
+        label: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+            flexShrink: number;
+        };
+    };
+    render(): JSX.Element;
+}
+export {};

package/lib/components/CheckBox.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckBox = void 0;
+const React = require("react");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const layout_1 = require("../modules/layout");
+const theme_1 = require("../modules/theme");
+const test_1 = require("../modules/test");
+const react_native_1 = require("react-native");
+class CheckBox extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, theme_1.getTheme)();
+            const { disabled } = this.props;
+            const iconSize = (0, layout_1.isTablet)() ? 24 : 20;
+            return react_native_1.StyleSheet.create({
+                container: {
+                    flexDirection: 'row',
+                    alignItems: 'center'
+                },
+                icon: {
+                    color: disabled ? theme.disabledColor : theme.textColor1,
+                    width: (0, layout_1.isTablet)() ? 28 : 24,
+                    fontSize: iconSize,
+                    height: iconSize,
+                    lineHeight: iconSize
+                },
+                label: {
+                    color: disabled ? theme.disabledColor : theme.textColor1,
+                    fontFamily: theme.fontFamily3,
+                    fontSize: (0, layout_1.isTablet)() ? 15 : 12,
+                    flexShrink: 1
+                }
+            });
+        };
+    }
+    render() {
+        const { label, value, onChange, disabled, style, labelStyle, iconStyle, renderLabel, nativeID } = this.props;
+        const styles = this.getStyles();
+        return (React.createElement(react_native_1.TouchableOpacity, { style: [styles.container, style], disabled: disabled, onPress: () => {
+                if (onChange) {
+                    onChange(!value);
+                }
+            } },
+            React.createElement(FontAwesome_1.default, { nativeID: nativeID, testID: (0, test_1.getTestID)(nativeID), name: value ? 'check-square-o' : 'square-o', style: [styles.icon, iconStyle] }),
+            React.createElement(react_native_1.Text, { style: [styles.label, labelStyle] }, renderLabel ? renderLabel() : label)));
+    }
+}
+exports.CheckBox = CheckBox;

package/lib/components/DatePicker.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface DatePickerProperties {
+    label: string;
+    value?: Date;
+    clearable?: boolean;
+    onChange: (value?: Date) => void;
+    onCancel?: () => void;
+    style?: StyleProp<ViewStyle>;
+    nativeID?: string;
+    disabled?: boolean;
+}
+export interface DatePickerState {
+    showModal: boolean;
+    isDarkModeEnabled: boolean;
+}
+export declare class DatePicker extends React.Component<DatePickerProperties, DatePickerState> {
+    static defaultProps: {
+        clearable: boolean;
+    };
+    state: DatePickerState;
+    appearanceSubscription: any;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handlePress: () => void;
+    handleConfirm: (value: Date) => void;
+    handleCancel: () => void;
+    handleClear: () => void;
+    getStyles: () => {
+        container: {
+            paddingLeft: number;
+            paddingRight: number;
+            paddingVertical: number;
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            flexDirection: "row";
+            alignItems: "center";
+        };
+        label: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+            lineHeight: number;
+        };
+        value: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+            lineHeight: number;
+            minHeight: number;
+        };
+        calendarIcon: {
+            marginLeft: string;
+            color: string;
+            fontSize: number;
+        };
+        clearIcon: {
+            borderWidth: number;
+            marginLeft: string;
+        };
+        readonly: {
+            backgroundColor: string;
+        };
+    };
+    render(): JSX.Element;
+}