secullum-react-native-ui 4.16.2-beta.7 → 4.16.2-beta.8

package/lib/components/DatePicker.js

@@ -1,106 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePicker = void 0;
-const React = require("react");
-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 test_1 = require("../modules/test");
-const react_native_1 = require("react-native");
-class DatePicker extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            showModal: false,
-            isDarkModeEnabled: react_native_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 = (0, 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: (0, 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_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 = (0, theme_1.getTheme)();
-        return (React.createElement(react_native_1.TouchableWithoutFeedback, { disabled: disabled, onPress: this.handlePress },
-            React.createElement(react_native_1.View, { nativeID: nativeID, testID: (0, test_1.getTestID)(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 ? (0, format_1.formatDate)(value, 'cccc, 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 || undefined, isVisible: showModal, onConfirm: this.handleConfirm, onCancel: this.handleCancel, isDarkModeEnabled: isDarkModeEnabled, 
-                    //@ts-ignore
-                    display: react_native_1.Platform.OS == 'ios' ? 'inline' : 'default' })))));
-    }
-}
-exports.DatePicker = DatePicker;
-DatePicker.defaultProps = {
-    clearable: true
-};

package/lib/components/DatePicker.web.d.ts

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import 'react-date-range/dist/styles.css';
-import '../../styles/RangeDatePicker.css';
-export interface DatePickerProperties {
-    label: string;
-    value?: Date;
-    clearable?: boolean;
-    onChange: (value?: Date) => void;
-    style?: StyleProp<ViewStyle>;
-    dateFormat: string;
-    nativeID?: string;
-}
-export interface DatePickerState {
-    showModal: boolean;
-}
-export declare class DatePicker extends React.Component<DatePickerProperties, DatePickerState> {
-    static defaultProps: {
-        clearable: boolean;
-        dateFormat: string;
-    };
-    state: DatePickerState;
-    private calendarRef;
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    handleClick: (event: MouseEvent) => void;
-    handlePress: () => void;
-    handleClear: () => void;
-    handleConfirm: (value: any) => void;
-    getStyles: () => {
-        container: {
-            paddingLeft: number;
-            paddingRight: number;
-            paddingVertical: number;
-            borderWidth: number;
-            borderColor: string;
-            borderRadius: number;
-            flexDirection: "row";
-            alignItems: "center";
-        };
-        modalOverlay: {
-            justifyContent: "center";
-            alignItems: "center";
-        };
-        label: {
-            color: string;
-            fontFamily: string;
-            fontSize: number;
-            lineHeight: number;
-        };
-        value: {
-            color: string;
-            fontFamily: string;
-            fontSize: number;
-            lineHeight: number;
-            minHeight: number;
-        };
-        clearIcon: {
-            borderWidth: number;
-            marginLeft: string;
-        };
-    };
-    render(): JSX.Element;
-}

package/lib/components/DatePicker.web.js

@@ -1,106 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePicker = void 0;
-const React = require("react");
-const theme_1 = require("../modules/theme");
-const layout_1 = require("../modules/layout");
-const format_1 = require("../modules/format");
-const ImageButton_1 = require("./ImageButton");
-const Modal_1 = require("./Modal");
-const react_date_range_1 = require("react-date-range");
-const react_native_1 = require("react-native");
-require("react-date-range/dist/styles.css");
-require("../../styles/RangeDatePicker.css");
-class DatePicker extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            showModal: false
-        };
-        this.calendarRef = React.createRef();
-        this.handleClick = (event) => {
-            if (this.calendarRef.current &&
-                !this.calendarRef.current.contains(event.target)) {
-                this.setState({ showModal: false });
-            }
-        };
-        this.handlePress = () => {
-            this.setState({ showModal: true });
-        };
-        this.handleClear = () => {
-            this.props.onChange(undefined);
-        };
-        this.handleConfirm = (value) => {
-            this.props.onChange(value);
-            this.setState({ showModal: false });
-        };
-        this.getStyles = () => {
-            const theme = (0, 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'
-                },
-                modalOverlay: {
-                    justifyContent: 'center',
-                    alignItems: 'center'
-                },
-                label: {
-                    color: theme.textColor2,
-                    fontFamily: theme.fontFamily3,
-                    fontSize: (0, layout_1.isTablet)() ? 15 : 12,
-                    lineHeight: 16
-                },
-                value: {
-                    color: theme.textColor1,
-                    fontFamily: theme.fontFamily1,
-                    fontSize: 16,
-                    lineHeight: 22,
-                    minHeight: 22
-                },
-                clearIcon: {
-                    borderWidth: 0,
-                    marginLeft: 'auto'
-                }
-            });
-            return styles;
-        };
-    }
-    componentWillMount() {
-        document.addEventListener('mousedown', this.handleClick, false);
-    }
-    componentWillUnmount() {
-        document.removeEventListener('mousedown', this.handleClick, false);
-    }
-    render() {
-        const { label, value, clearable, style, dateFormat, nativeID } = this.props;
-        const styles = this.getStyles();
-        const theme = (0, theme_1.getTheme)();
-        return (React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: this.handlePress },
-            React.createElement(react_native_1.View, { nativeID: nativeID, style: [styles.container, style] },
-                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 ? (0, format_1.formatDate)(value, dateFormat) : '')),
-                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.createElement(Modal_1.Modal, { visible: this.state.showModal, overlayStyle: styles.modalOverlay },
-                    React.createElement("div", { ref: this.calendarRef, style: {
-                            borderRadius: '5px',
-                            position: 'absolute',
-                            top: '50%',
-                            marginTop: '-150px',
-                            fontFamily: theme.fontFamily1
-                        } },
-                        React.createElement(react_date_range_1.Calendar, { locale: (0, format_1.getDateFnsLocale)(), date: value, onChange: this.handleConfirm, weekdayDisplayFormat: (0, format_1.getLocale)() === 'pt' ? 'EEEEEE' : 'E' }))))));
-    }
-}
-exports.DatePicker = DatePicker;
-DatePicker.defaultProps = {
-    clearable: true,
-    dateFormat: 'cccc, dd/MM/yyyy'
-};

package/lib/components/Delay.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-export interface DelayProperties {
-    wait: number;
-}
-export interface DelayState {
-    hidden: boolean;
-}
-export declare class Delay extends React.Component<DelayProperties, DelayState> {
-    state: DelayState;
-    componentDidMount(): void;
-    render(): React.ReactNode;
-}

package/lib/components/Delay.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Delay = void 0;
-const React = require("react");
-class Delay extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            hidden: true
-        };
-    }
-    componentDidMount() {
-        const { wait } = this.props;
-        setTimeout(() => {
-            this.setState({ hidden: false });
-        }, wait);
-    }
-    render() {
-        return this.state.hidden ? null : this.props.children;
-    }
-}
-exports.Delay = Delay;

package/lib/components/Details.d.ts

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { StyleProp, TextStyle } from 'react-native';
-export interface DetailsIcon {
-    name: string;
-    color: string;
-    size: number;
-    onPress?: () => void;
-}
-export interface DetailsLine {
-    title?: string;
-    value?: string;
-    icons?: Array<DetailsIcon>;
-    render?: () => React.ReactNode;
-}
-export interface DetailsProperties {
-    title: string;
-    titleNativeId?: string;
-    lines: Array<DetailsLine>;
-    lineTitleStyle?: StyleProp<TextStyle>;
-    lineValueStyle?: StyleProp<TextStyle>;
-}
-export declare class Details extends React.Component<DetailsProperties> {
-    getStyles: () => {
-        title: {
-            fontFamily: string;
-            fontSize: number;
-            color: string;
-        };
-        lineSection: {
-            paddingVertical: number;
-            flexDirection: "row";
-            justifyContent: "space-between";
-            alignItems: "center";
-            minHeight: number;
-        };
-        lineSectionCustomRender: {
-            padding: number;
-        };
-        lineText: {
-            fontFamily: string;
-            fontSize: number;
-            color: string;
-            minWidth: number;
-        };
-        lineValue: {
-            textAlign: "center";
-        };
-        lineTitle: {
-            textAlign: "left";
-            flexShrink: number;
-        };
-        lineValueContainer: {
-            flexDirection: "row";
-            flexGrow: number;
-            flexShrink: number;
-            alignItems: "center";
-            justifyContent: "flex-end";
-        };
-        lineValueIcon: {
-            width: number;
-            textAlign: "center";
-        };
-    };
-    renderIcon: (icon: DetailsIcon, index: number) => JSX.Element;
-    renderLine: (line: DetailsLine, index: number) => JSX.Element;
-    render(): JSX.Element;
-}

package/lib/components/Details.js

@@ -1,96 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Details = void 0;
-const React = require("react");
-const react_native_1 = require("react-native");
-const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
-const Card_1 = require("./Card");
-const Space_1 = require("./Space");
-const theme_1 = require("../modules/theme");
-const test_1 = require("../modules/test");
-const layout_1 = require("../modules/layout");
-class Details extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.getStyles = () => {
-            const theme = (0, theme_1.getTheme)();
-            const styles = react_native_1.StyleSheet.create({
-                title: {
-                    fontFamily: theme.fontFamily1,
-                    fontSize: (0, layout_1.isTablet)() ? 22 : 18,
-                    color: theme.textColor1
-                },
-                lineSection: {
-                    paddingVertical: 10,
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    minHeight: 45
-                },
-                lineSectionCustomRender: {
-                    padding: 0
-                },
-                lineText: {
-                    fontFamily: theme.fontFamily2,
-                    fontSize: (0, layout_1.isTablet)() ? 18 : 14,
-                    color: theme.textColor1,
-                    minWidth: 40
-                },
-                lineValue: {
-                    textAlign: 'center'
-                },
-                lineTitle: {
-                    textAlign: 'left',
-                    flexShrink: 0
-                },
-                lineValueContainer: {
-                    flexDirection: 'row',
-                    flexGrow: 1,
-                    flexShrink: 1,
-                    alignItems: 'center',
-                    justifyContent: 'flex-end'
-                },
-                lineValueIcon: {
-                    width: 25,
-                    textAlign: 'center'
-                }
-            });
-            return styles;
-        };
-        this.renderIcon = (icon, index) => {
-            const styles = this.getStyles();
-            const fa = (React.createElement(FontAwesome_1.default, { key: index, testID: (0, test_1.getTestID)(icon.name), name: icon.name, color: icon.color, size: icon.size, style: styles.lineValueIcon }));
-            if (icon.onPress) {
-                return (React.createElement(react_native_1.TouchableOpacity, { key: index, onPress: icon.onPress }, fa));
-            }
-            return fa;
-        };
-        this.renderLine = (line, index) => {
-            const styles = this.getStyles();
-            const { lineTitleStyle, lineValueStyle } = this.props;
-            const { title, value, icons, render } = line;
-            const sectionStyle = render
-                ? styles.lineSectionCustomRender
-                : styles.lineSection;
-            const children = render ? (render()) : (React.createElement(React.Fragment, null,
-                React.createElement(react_native_1.Text, { style: [styles.lineText, styles.lineTitle, lineTitleStyle] }, title),
-                React.createElement(react_native_1.View, { style: styles.lineValueContainer },
-                    icons && icons.map(this.renderIcon),
-                    React.createElement(react_native_1.Text, { style: [styles.lineText, styles.lineValue, lineValueStyle] }, value))));
-            return (React.createElement(React.Fragment, { key: index },
-                React.createElement(Space_1.Space, { height: 3 }),
-                React.createElement(Card_1.Card, null,
-                    React.createElement(Card_1.Card.Section, { style: sectionStyle }, children))));
-        };
-    }
-    render() {
-        const { title, lines, titleNativeId } = this.props;
-        const styles = this.getStyles();
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Card_1.Card, null,
-                React.createElement(Card_1.Card.Section, null,
-                    React.createElement(react_native_1.Text, { nativeID: titleNativeId, testID: (0, test_1.getTestID)(titleNativeId), style: styles.title }, title))),
-            lines.map(this.renderLine)));
-    }
-}
-exports.Details = Details;

package/lib/components/DetailsHeader.d.ts

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { StyleProp, TextStyle } from 'react-native';
-export interface DetailsHeaderProperties {
-    text: string;
-    textStyle?: StyleProp<TextStyle>;
-    onLeftPress?: () => void;
-    onRightPress?: () => void;
-    leftNativeID?: string;
-    rightNativeID?: string;
-}
-export declare class DetailsHeader extends React.Component<DetailsHeaderProperties> {
-    getStyles: () => {
-        container: {
-            flexDirection: "row";
-            alignItems: "center";
-            justifyContent: "space-between";
-        };
-        text: {
-            fontFamily: string;
-            fontSize: number;
-            color: string;
-            width: string;
-            textAlign: "center";
-        };
-        button: {
-            height: number;
-            width: number;
-            alignItems: "center";
-            justifyContent: "center";
-            borderColor: string;
-            borderWidth: number;
-            borderRadius: number;
-        };
-        buttonPlaceholder: {
-            height: number;
-            width: number;
-        };
-    };
-    renderButton: (type: 'left' | 'right', onPress: (() => void) | undefined, nativeID?: string) => JSX.Element;
-    render(): JSX.Element;
-}

package/lib/components/DetailsHeader.js

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DetailsHeader = void 0;
-const React = require("react");
-const react_native_1 = require("react-native");
-const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
-const Card_1 = require("./Card");
-const theme_1 = require("../modules/theme");
-const layout_1 = require("../modules/layout");
-const test_1 = require("../modules/test");
-class DetailsHeader extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.getStyles = () => {
-            const theme = (0, theme_1.getTheme)();
-            const styles = react_native_1.StyleSheet.create({
-                container: {
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-between'
-                },
-                text: {
-                    fontFamily: theme.fontFamily1,
-                    fontSize: (0, layout_1.isTablet)() ? 22 : 18,
-                    color: theme.textColor1,
-                    width: '80%',
-                    textAlign: 'center'
-                },
-                button: {
-                    height: (0, layout_1.isTablet)() ? 28 : 24,
-                    width: (0, layout_1.isTablet)() ? 28 : 24,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderColor: theme.borderColor1,
-                    borderWidth: 1,
-                    borderRadius: 24
-                },
-                buttonPlaceholder: {
-                    height: (0, layout_1.isTablet)() ? 28 : 24,
-                    width: (0, layout_1.isTablet)() ? 28 : 24
-                }
-            });
-            return styles;
-        };
-        this.renderButton = (type, onPress, nativeID) => {
-            const styles = this.getStyles();
-            const theme = (0, theme_1.getTheme)();
-            if (onPress) {
-                return (React.createElement(react_native_1.TouchableOpacity, { testID: (0, test_1.getTestID)(nativeID), style: styles.button, onPress: onPress },
-                    React.createElement(FontAwesome_1.default, { nativeID: nativeID, name: type === 'left' ? 'angle-left' : 'angle-right', color: theme.textColor3, size: 14 })));
-            }
-            return React.createElement(react_native_1.View, { style: styles.buttonPlaceholder });
-        };
-    }
-    render() {
-        const { text, textStyle, onLeftPress, onRightPress, leftNativeID, rightNativeID } = this.props;
-        const styles = this.getStyles();
-        return (React.createElement(Card_1.Card, null,
-            React.createElement(Card_1.Card.Section, { style: styles.container },
-                this.renderButton('left', onLeftPress, leftNativeID),
-                React.createElement(react_native_1.Text, { style: [styles.text, textStyle] }, text),
-                this.renderButton('right', onRightPress, rightNativeID))));
-    }
-}
-exports.DetailsHeader = DetailsHeader;

package/lib/components/DimensionsMonitor.d.ts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { ScaledSize } from 'react-native';
-export interface DimensionsMonitorProperties {
-    children?: (dimensionsInfo: {
-        isDesktop: boolean;
-    }) => React.ReactNode;
-    onDimensionChange?: (isDesktop: boolean) => void;
-}
-export interface DimensionsMonitorState {
-    isDesktop: boolean;
-}
-export declare class DimensionsMonitor extends React.Component<DimensionsMonitorProperties, DimensionsMonitorState> {
-    constructor(props: DimensionsMonitorProperties);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    handleDimensionsChange: ({ window }: {
-        window: ScaledSize;
-    }) => void;
-    isDesktop: (size: ScaledSize) => boolean;
-    render(): React.ReactNode;
-}

package/lib/components/DimensionsMonitor.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DimensionsMonitor = void 0;
-const React = require("react");
-const react_native_1 = require("react-native");
-class DimensionsMonitor extends React.Component {
-    constructor(props) {
-        super(props);
-        this.handleDimensionsChange = ({ window }) => {
-            const isDesktop = this.isDesktop(window);
-            this.setState({ isDesktop });
-            if (this.props.onDimensionChange && isDesktop !== this.state.isDesktop) {
-                this.props.onDimensionChange(isDesktop);
-            }
-        };
-        this.isDesktop = (size) => {
-            const largura = react_native_1.Platform.OS === 'web' ? window.innerWidth : size.width;
-            return largura >= 1024;
-        };
-        this.state = {
-            isDesktop: this.isDesktop(react_native_1.Dimensions.get('window'))
-        };
-    }
-    componentDidMount() {
-        react_native_1.Dimensions.addEventListener('change', this.handleDimensionsChange);
-    }
-    componentWillUnmount() {
-        react_native_1.Dimensions.removeEventListener('change', this.handleDimensionsChange);
-    }
-    render() {
-        if (!this.props.children) {
-            return null;
-        }
-        return this.props.children({ isDesktop: this.state.isDesktop });
-    }
-}
-exports.DimensionsMonitor = DimensionsMonitor;