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

package/lib/components/AppShell.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { HeaderButton } from './Header';
+import { GreetingMessage } from './HeaderDesktop';
+import { MenuProperties } from './Menu';
+import { MenuMobile } from './MenuMobile';
+import { 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>;
+};
+export declare class AppShell extends React.Component<AppShellProperties> {
+    menu: MenuMobile | null;
+    getMobileStyles: () => any;
+    getDesktopStyles: () => any;
+    renderMobile: () => JSX.Element;
+    renderDesktop: () => JSX.Element;
+    render(): JSX.Element;
+}

package/lib/components/AppShell.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 = 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.renderDesktop() : this.renderMobile()));
+    }
+}
+exports.AppShell = AppShell;

package/lib/components/Button.d.ts

@@ -0,0 +1,47 @@
+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;
+    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,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const theme_1 = require("../modules/theme");
+const react_native_1 = require("react-native");
+const layout_1 = require("../modules/layout");
+class Button extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = theme_1.getTheme();
+            const styles = react_native_1.StyleSheet.create({
+                touchable: {
+                    backgroundColor: theme.backgroundColor1,
+                    borderColor: theme.borderColor1,
+                    borderWidth: 1,
+                    borderRadius: 3,
+                    height: layout_1.isTablet() ? 45 : 40,
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                touchablePrimary: {
+                    backgroundColor: theme.backgroundColor3,
+                    borderWidth: 0
+                },
+                text: {
+                    fontFamily: theme.fontFamily1,
+                    fontSize: layout_1.isTablet() ? 18 : 13,
+                    paddingHorizontal: 11,
+                    color: theme.textColor1
+                },
+                textPrimary: {
+                    color: theme.textColor4
+                },
+                disabled: {
+                    backgroundColor: theme.backgroundColor2
+                },
+                textDisabled: {
+                    color: '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 },
+            React.createElement(react_native_1.Text, { nativeID: nativeID, style: [
+                    styles.text,
+                    primary && styles.textPrimary,
+                    textStyle,
+                    disabled && styles.textDisabled
+                ] }, text)));
+    }
+}
+Button.defaultProps = {
+    primary: true
+};
+exports.Button = Button;

package/lib/components/Card.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { StyleProp, TextStyle, ViewProperties, ViewStyle } from 'react-native';
+export interface CardHeaderProperties {
+    title: string;
+    titleStyle?: StyleProp<TextStyle>;
+    containerStyle?: StyleProp<TextStyle>;
+    nativeID?: string;
+    numberOfLines?: number;
+    onHelpPress?: () => void;
+}
+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<ViewProperties> {
+    render(): JSX.Element;
+}
+export declare class CardSection extends React.Component<ViewProperties> {
+    render(): JSX.Element;
+}
+export declare class CardModal extends React.Component<ViewProperties> {
+    render(): JSX.Element;
+}
+export interface CardProperties extends ViewProperties {
+    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,125 @@
+"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)
+            t[p[i]] = s[p[i]];
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 react_native_1 = require("react-native");
+class CardHeader extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = theme_1.getTheme();
+            const styles = react_native_1.StyleSheet.create({
+                container: {
+                    padding: 16
+                },
+                title: {
+                    color: theme.textColor1,
+                    fontFamily: theme.fontFamily1,
+                    fontSize: layout_1.isTablet() ? 22 : 18,
+                    marginRight: 10
+                },
+                help: {
+                    position: 'absolute',
+                    right: 5,
+                    top: 5
+                },
+                helpIcon: {
+                    fontSize: 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, { 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 } = _a, otherProps = __rest(_a, ["children"]);
+        return (React.createElement(react_native_1.View, Object.assign({ style: [cardFooterStyles.container] }, otherProps), children));
+    }
+}
+exports.CardFooter = CardFooter;
+class CardSection extends React.Component {
+    render() {
+        const _a = this.props, { children, style } = _a, otherProps = __rest(_a, ["children", "style"]);
+        return (React.createElement(react_native_1.View, Object.assign({ 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 = 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, style: [styles.container, style] }, otherProps), childrenMapped));
+    }
+}
+Card.Header = CardHeader;
+Card.Section = CardSection;
+Card.Footer = CardFooter;
+Card.Modal = CardModal;
+exports.Card = Card;
+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,34 @@
+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>;
+    nativeID?: string;
+}
+export declare class CheckBox extends React.Component<Props> {
+    getStyles: () => {
+        container: {
+            flexDirection: "row";
+            alignItems: "center";
+        };
+        icon: {
+            color: string;
+            fontSize: number;
+            height: number;
+            width: number;
+            lineHeight: number;
+        };
+        label: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+    };
+    render(): JSX.Element;
+}
+export {};

package/lib/components/CheckBox.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 react_native_1 = require("react-native");
+class CheckBox extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = theme_1.getTheme();
+            const { disabled } = this.props;
+            return react_native_1.StyleSheet.create({
+                container: {
+                    flexDirection: 'row',
+                    alignItems: 'center'
+                },
+                icon: {
+                    color: disabled ? theme.disabledColor : theme.textColor1,
+                    fontSize: 20,
+                    height: 20,
+                    width: 24,
+                    lineHeight: 20
+                },
+                label: {
+                    color: disabled ? theme.disabledColor : theme.textColor1,
+                    fontFamily: theme.fontFamily3,
+                    fontSize: layout_1.isTablet() ? 15 : 12
+                }
+            });
+        };
+    }
+    render() {
+        const { label, value, onChange, disabled, style, labelStyle, 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, name: value ? 'check-square-o' : 'square-o', style: styles.icon }),
+            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;
+}

package/lib/components/DatePicker.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_native_appearance_1 = require("react-native-appearance");
+const react_native_modal_datetime_picker_1 = require("react-native-modal-datetime-picker");
+const format_1 = require("../modules/format");
+const layout_1 = require("../modules/layout");
+const theme_1 = require("../modules/theme");
+const ImageButton_1 = require("./ImageButton");
+const react_native_1 = require("react-native");
+class DatePicker extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            showModal: false,
+            isDarkModeEnabled: react_native_appearance_1.Appearance.getColorScheme() === 'dark'
+        };
+        this.handlePress = () => {
+            this.setState({ showModal: true });
+        };
+        this.handleConfirm = (value) => {
+            this.setState({ showModal: false }, () => {
+                this.props.onChange(value);
+            });
+        };
+        this.handleCancel = () => {
+            this.setState({ showModal: false }, () => {
+                if (this.props.onCancel) {
+                    this.props.onCancel();
+                }
+            });
+        };
+        this.handleClear = () => {
+            this.props.onChange(undefined);
+        };
+        this.getStyles = () => {
+            const theme = theme_1.getTheme();
+            const styles = react_native_1.StyleSheet.create({
+                container: {
+                    paddingLeft: 16,
+                    paddingRight: 4,
+                    paddingVertical: 8,
+                    borderWidth: 1,
+                    borderColor: theme.borderColor1,
+                    borderRadius: 3,
+                    flexDirection: 'row',
+                    alignItems: 'center'
+                },
+                label: {
+                    color: theme.textColor2,
+                    fontFamily: theme.fontFamily3,
+                    fontSize: layout_1.isTablet() ? 15 : 12,
+                    lineHeight: 16
+                },
+                value: {
+                    color: theme.textColor1,
+                    fontFamily: theme.fontFamily1,
+                    fontSize: 16,
+                    lineHeight: 22,
+                    minHeight: 22
+                },
+                calendarIcon: {
+                    marginLeft: 'auto',
+                    color: theme.textColor2,
+                    fontSize: 22
+                },
+                clearIcon: {
+                    borderWidth: 0,
+                    marginLeft: 'auto'
+                },
+                readonly: {
+                    backgroundColor: theme.disabledColor
+                }
+            });
+            return styles;
+        };
+    }
+    componentDidMount() {
+        this.appearanceSubscription = react_native_appearance_1.Appearance.addChangeListener(({ colorScheme }) => {
+            this.setState({ isDarkModeEnabled: colorScheme === 'dark' });
+        });
+    }
+    componentWillUnmount() {
+        this.appearanceSubscription.remove();
+    }
+    render() {
+        const { label, value, clearable, style, nativeID, disabled } = this.props;
+        const { showModal, isDarkModeEnabled } = this.state;
+        const styles = this.getStyles();
+        const theme = theme_1.getTheme();
+        return (React.createElement(react_native_1.TouchableWithoutFeedback, { disabled: disabled, onPress: this.handlePress },
+            React.createElement(react_native_1.View, { nativeID: nativeID, style: [styles.container, style, disabled ? styles.readonly : null] },
+                React.createElement(react_native_1.View, null,
+                    React.createElement(react_native_1.Text, { style: styles.label }, label),
+                    React.createElement(react_native_1.Text, { style: styles.value }, value != undefined ? format_1.formatDate(value, 'dddd, DD/MM/YYYY') : '')),
+                !disabled && (React.createElement(ImageButton_1.ImageButton, { icon: value && clearable ? 'times' : 'calendar', style: styles.clearIcon, iconColor: value && clearable ? theme.textColor1 : theme.textColor2, onPress: value && clearable ? this.handleClear : this.handlePress, hitBoxSize: 30 })),
+                react_native_1.Platform.OS !== 'web' && (React.createElement(react_native_modal_datetime_picker_1.default, { date: value, isVisible: showModal, onConfirm: this.handleConfirm, onCancel: this.handleCancel, isDarkModeEnabled: isDarkModeEnabled, 
+                    //@ts-ignore
+                    display: react_native_1.Platform.OS == 'ios' ? 'inline' : 'default' })))));
+    }
+}
+DatePicker.defaultProps = {
+    clearable: true
+};
+exports.DatePicker = DatePicker;