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

package/lib/components/Question.js

@@ -1,72 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const react_native_web_modal_1 = require("react-native-web-modal");
-const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
-const theme_1 = require("../modules/theme");
-const layout_1 = require("../modules/layout");
-const Button_1 = require("./Button");
-const Space_1 = require("./Space");
-const react_native_1 = require("react-native");
-class Question extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.getStyles = () => {
-            const theme = theme_1.getTheme();
-            const styles = react_native_1.StyleSheet.create({
-                botoesAcao: {
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-evenly',
-                    width: '100%'
-                },
-                overlay: {
-                    flex: 1,
-                    backgroundColor: 'rgba(33, 33, 33, 0.7)',
-                    alignItems: 'center'
-                },
-                text: {
-                    color: theme.questionTextColor,
-                    fontFamily: theme.fontFamily1,
-                    fontSize: layout_1.isTablet() ? 25 : 16,
-                    textAlign: 'center',
-                    marginTop: layout_1.isTablet() ? 15 : 5,
-                    width: '100%'
-                },
-                container: {
-                    backgroundColor: theme.backgroundColor1,
-                    borderRadius: 6,
-                    padding: layout_1.isTablet() ? 25 : 16,
-                    width: layout_1.isTablet() ? 350 : 250,
-                    marginTop: layout_1.isTablet() ? 250 : 140,
-                    alignItems: 'center'
-                },
-                icon: {
-                    color: theme.textColor3,
-                    fontSize: layout_1.isTablet() ? 52 : 42
-                }
-            });
-            return styles;
-        };
-    }
-    render() {
-        const { message, visible, nativeID, okButton, cancelButton } = this.props;
-        const styles = this.getStyles();
-        return (React.createElement(react_native_web_modal_1.default, { animationType: "fade", transparent: true, visible: visible },
-            React.createElement(react_native_1.View, { style: [styles.overlay], nativeID: nativeID },
-                React.createElement(react_native_1.View, { style: styles.container },
-                    React.createElement(FontAwesome_1.default, { name: 'question-circle', style: styles.icon }),
-                    React.createElement(react_native_1.Text, { style: styles.text }, message),
-                    React.createElement(Space_1.Space, null),
-                    React.createElement(react_native_1.View, { style: styles.botoesAcao },
-                        React.createElement(Button_1.Button, { text: cancelButton.text, onPress: cancelButton.onPress, style: [
-                                { flex: 1, marginRight: layout_1.isTablet() ? 13 : 8 },
-                                cancelButton.style
-                            ], textStyle: cancelButton.textStyle, primary: false, nativeID: cancelButton.nativeID }),
-                        React.createElement(Button_1.Button, { text: okButton.text, onPress: okButton.onPress, style: [
-                                { flex: 1, marginLeft: layout_1.isTablet() ? 13 : 8 },
-                                okButton.style
-                            ], textStyle: okButton.textStyle, primary: true, nativeID: okButton.nativeID }))))));
-    }
-}
-exports.Question = Question;

package/lib/components/RadioButton.d.ts

@@ -1,42 +0,0 @@
-import * as React from 'react';
-export interface RadioButtonProps {
-    items: Array<{
-        label: string;
-        value: number;
-    }>;
-    value: number;
-    onChange: (value: number) => void;
-}
-export declare class RadioButton extends React.Component<RadioButtonProps> {
-    getStyles: () => {
-        radioContainer: {
-            flexDirection: "row";
-            paddingVertical: number;
-        };
-        radioButtom: {
-            height: number;
-            width: number;
-            borderRadius: number;
-            borderWidth: number;
-            borderColor: string;
-            alignItems: "center";
-            justifyContent: "center";
-            top: number;
-        };
-        radioMark: {
-            height: number;
-            width: number;
-            borderRadius: number;
-            backgroundColor: string;
-        };
-        labelRadioButtom: {
-            flex: number;
-            fontSize: number;
-            color: string;
-            alignSelf: "flex-start";
-            left: number;
-            fontFamily: string;
-        };
-    };
-    render(): JSX.Element;
-}

package/lib/components/RadioButton.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const react_native_1 = require("react-native");
-const theme_1 = require("../modules/theme");
-class RadioButton extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.getStyles = () => {
-            const theme = theme_1.getTheme();
-            const styles = react_native_1.StyleSheet.create({
-                radioContainer: {
-                    flexDirection: 'row',
-                    paddingVertical: 5
-                },
-                radioButtom: {
-                    height: 14,
-                    width: 14,
-                    borderRadius: 12,
-                    borderWidth: 1.2,
-                    borderColor: '#cfcfcf',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    top: 5
-                },
-                radioMark: {
-                    height: 8,
-                    width: 8,
-                    borderRadius: 6,
-                    backgroundColor: theme.textColor2
-                },
-                labelRadioButtom: {
-                    flex: 1,
-                    fontSize: 16,
-                    color: theme.textColor1,
-                    alignSelf: 'flex-start',
-                    left: 10,
-                    fontFamily: theme.fontFamily1
-                }
-            });
-            return styles;
-        };
-    }
-    render() {
-        const { items, value, onChange } = this.props;
-        const styles = this.getStyles();
-        return (React.createElement(react_native_1.View, null, items.map(item => (React.createElement(react_native_1.TouchableWithoutFeedback, { key: item.value, onPress: () => onChange(item.value) },
-            React.createElement(react_native_1.View, { style: styles.radioContainer },
-                React.createElement(react_native_1.View, { style: styles.radioButtom }, item.value === value && React.createElement(react_native_1.View, { style: styles.radioMark })),
-                React.createElement(react_native_1.Text, { style: styles.labelRadioButtom }, item.label)))))));
-    }
-}
-exports.RadioButton = RadioButton;

package/lib/components/RadioGroup.d.ts

@@ -1,44 +0,0 @@
-import * as React from 'react';
-export interface RadioGroupProperties {
-    items: Array<{
-        label: string;
-        value: string;
-    }>;
-    value: string;
-    onChange: (value: string) => void;
-    disabled?: Array<string>;
-}
-export declare class RadioGroup extends React.Component<RadioGroupProperties> {
-    getStyles: () => {
-        container: {
-            borderColor: string;
-            borderWidth: number;
-            borderRadius: number;
-            backgroundColor: string;
-            flexDirection: "row";
-            justifyContent: "space-around";
-        };
-        item: {
-            paddingVertical: number;
-            borderColor: string;
-            flex: number;
-            alignItems: "center";
-        };
-        itemText: {
-            fontFamily: string;
-            fontSize: number;
-            lineHeight: number;
-            color: string;
-        };
-        selectedItem: {
-            backgroundColor: string;
-        };
-        selectedItemText: {
-            color: string;
-        };
-        readonly: {
-            backgroundColor: string;
-        };
-    };
-    render(): JSX.Element;
-}

package/lib/components/RadioGroup.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const react_native_1 = require("react-native");
-const theme_1 = require("../modules/theme");
-const layout_1 = require("../modules/layout");
-class RadioGroup extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.getStyles = () => {
-            const theme = theme_1.getTheme();
-            const styles = react_native_1.StyleSheet.create({
-                container: {
-                    borderColor: theme.borderColor1,
-                    borderWidth: 1,
-                    borderRadius: 3,
-                    backgroundColor: theme.backgroundColor2,
-                    flexDirection: 'row',
-                    justifyContent: 'space-around'
-                },
-                item: {
-                    paddingVertical: layout_1.isTablet() ? 10 : 5,
-                    borderColor: theme.borderColor1,
-                    flex: 1,
-                    alignItems: 'center'
-                },
-                itemText: {
-                    fontFamily: theme.fontFamily1,
-                    fontSize: layout_1.isTablet() ? 16 : 12,
-                    lineHeight: layout_1.isTablet() ? 20 : 16,
-                    color: theme.textColor3
-                },
-                selectedItem: {
-                    backgroundColor: theme.backgroundColor3
-                },
-                selectedItemText: {
-                    color: theme.textColor4
-                },
-                readonly: {
-                    backgroundColor: theme.disabledColor
-                }
-            });
-            return styles;
-        };
-    }
-    render() {
-        const { items, value, onChange, disabled } = this.props;
-        const styles = this.getStyles();
-        return (React.createElement(react_native_1.View, { style: styles.container }, items.map((item, index) => (React.createElement(react_native_1.TouchableWithoutFeedback, { key: index, disabled: disabled && disabled.includes(item.value), onPress: () => onChange(item.value) },
-            React.createElement(react_native_1.View, { style: [
-                    styles.item,
-                    { borderRightWidth: index === items.length - 1 ? 0 : 1 },
-                    item.value === value ? styles.selectedItem : null,
-                    disabled && disabled.includes(item.value)
-                        ? styles.readonly
-                        : null
-                ] },
-                React.createElement(react_native_1.Text, { style: [
-                        styles.itemText,
-                        item.value === value ? styles.selectedItemText : null
-                    ] }, item.label)))))));
-    }
-}
-exports.RadioGroup = RadioGroup;

package/lib/components/RangeDatePicker.d.ts

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-export interface RangeDatePickerProperties {
-    label: string;
-    startDate: Date;
-    endDate: Date;
-    onStartDateChange: (date: Date) => void;
-    onEndDateChange: (date: Date) => void;
-    onEndDateCancel?: () => void;
-    style?: StyleProp<ViewStyle>;
-    nativeID?: string;
-}
-export interface RangeDatePickerState {
-    showStartDateModal: boolean;
-    showEndDateModal: boolean;
-    isDarkModeEnabled: boolean;
-}
-export declare class RangeDatePicker extends React.Component<RangeDatePickerProperties, RangeDatePickerState> {
-    state: RangeDatePickerState;
-    appearanceSubscription: any;
-    componentDidMount(): void;
-    UNSAFE_componentWillUnmount(): void;
-    handleDatePickerPress: () => void;
-    handleStartDateConfirm: (date: Date) => void;
-    handleStartDateCancel: () => void;
-    handleEndDateConfirm: (date: Date) => void;
-    handleEndDateCancel: () => void;
-    getStyles: () => {
-        container: {
-            paddingHorizontal: 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;
-        };
-        icon: {
-            marginLeft: string;
-            color: string;
-            fontSize: number;
-        };
-    };
-    render(): JSX.Element;
-}

package/lib/components/RangeDatePicker.js

@@ -1,126 +0,0 @@
-"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 FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
-const format_1 = require("../modules/format");
-const layout_1 = require("../modules/layout");
-const theme_1 = require("../modules/theme");
-const Delay_1 = require("./Delay");
-const react_native_1 = require("react-native");
-class RangeDatePicker extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            showStartDateModal: false,
-            showEndDateModal: false,
-            isDarkModeEnabled: react_native_appearance_1.Appearance.getColorScheme() === 'dark'
-        };
-        this.handleDatePickerPress = () => {
-            this.setState({
-                showStartDateModal: true
-            });
-        };
-        this.handleStartDateConfirm = (date) => {
-            this.setState({
-                showStartDateModal: false,
-                showEndDateModal: true
-            }, () => {
-                // When using RangeDatePicker on Android devices the end date modal were not being displayed, in order to avoid it,
-                // the setTimeOut was implemented so as it will set a little delay (enough time to update the state) before execute other functions.
-                // Related issue on gitlab: 3487
-                setTimeout(() => {
-                    if (date > this.props.endDate) {
-                        this.props.onEndDateChange(date);
-                    }
-                    this.props.onStartDateChange(date);
-                }, 1);
-            });
-        };
-        this.handleStartDateCancel = () => {
-            this.setState({
-                showStartDateModal: false,
-                showEndDateModal: true
-            });
-        };
-        this.handleEndDateConfirm = (date) => {
-            this.setState({
-                showEndDateModal: false
-            }, () => {
-                this.props.onEndDateChange(date);
-            });
-        };
-        this.handleEndDateCancel = () => {
-            if (this.props.onEndDateCancel) {
-                this.props.onEndDateCancel();
-            }
-            this.setState({
-                showEndDateModal: false
-            });
-        };
-        this.getStyles = () => {
-            const theme = theme_1.getTheme();
-            const styles = react_native_1.StyleSheet.create({
-                container: {
-                    paddingHorizontal: 16,
-                    paddingVertical: 8,
-                    borderWidth: 1,
-                    borderColor: theme.borderColor1,
-                    borderRadius: 3,
-                    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
-                },
-                icon: {
-                    marginLeft: 'auto',
-                    color: theme.textColor2,
-                    fontSize: 22
-                }
-            });
-            return styles;
-        };
-    }
-    componentDidMount() {
-        this.appearanceSubscription = react_native_appearance_1.Appearance.addChangeListener(({ colorScheme }) => {
-            this.setState({ isDarkModeEnabled: colorScheme === 'dark' });
-        });
-    }
-    UNSAFE_componentWillUnmount() {
-        this.appearanceSubscription.remove();
-    }
-    render() {
-        const { label, startDate, endDate, style, nativeID } = this.props;
-        const { showStartDateModal, showEndDateModal, isDarkModeEnabled } = this.state;
-        const displayFormat = 'MMM D, YYYY';
-        const displayText = format_1.formatDate(startDate, displayFormat) +
-            ' - ' +
-            format_1.formatDate(endDate, displayFormat);
-        const styles = this.getStyles();
-        return (React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: this.handleDatePickerPress },
-            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 }, displayText)),
-                React.createElement(FontAwesome_1.default, { name: "calendar", style: styles.icon }),
-                react_native_1.Platform.OS !== 'web' &&
-                    (showStartDateModal ? (React.createElement(react_native_modal_datetime_picker_1.default, { date: startDate, isVisible: true, onConfirm: this.handleStartDateConfirm, onCancel: this.handleStartDateCancel, isDarkModeEnabled: isDarkModeEnabled, 
-                        //@ts-ignore
-                        display: react_native_1.Platform.OS == 'ios' ? 'inline' : 'default' })) : showEndDateModal ? (React.createElement(Delay_1.Delay, { wait: 5 },
-                        React.createElement(react_native_modal_datetime_picker_1.default, { date: endDate, isVisible: true, onConfirm: this.handleEndDateConfirm, onCancel: this.handleEndDateCancel, isDarkModeEnabled: isDarkModeEnabled, 
-                            //@ts-ignore
-                            display: react_native_1.Platform.OS == 'ios' ? 'inline' : 'default' }))) : null))));
-    }
-}
-exports.RangeDatePicker = RangeDatePicker;

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

@@ -1,61 +0,0 @@
-import * as React from 'react';
-import { SelectedRanges } from 'react-date-range';
-import 'react-date-range/dist/styles.css';
-import { StyleProp, ViewStyle } from 'react-native';
-import '../../styles/RangeDatePicker.css';
-export interface RangeDatePickerProperties {
-    label: string;
-    startDate: Date;
-    endDate: Date;
-    onStartDateChange: (date: Date) => void;
-    onEndDateChange: (date: Date) => void;
-    onEndDateCancel?: () => void;
-    style?: StyleProp<ViewStyle>;
-    nativeID?: string;
-}
-export interface RangeDatePickerState {
-    showStartDateModal: boolean;
-    count: number;
-}
-export declare class RangeDatePicker extends React.Component<RangeDatePickerProperties, RangeDatePickerState> {
-    state: RangeDatePickerState;
-    private calendarRef;
-    componentWillMount(): void;
-    componentWillUnmount(): void;
-    handleClick: (event: MouseEvent) => void;
-    handleDatePickerPress: () => void;
-    handleRangeDateConfirm: (ranges: SelectedRanges) => void;
-    getStyles: () => {
-        container: {
-            paddingHorizontal: 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;
-        };
-        icon: {
-            marginLeft: string;
-            color: string;
-            fontSize: number;
-        };
-    };
-    render(): JSX.Element;
-}

package/lib/components/RangeDatePicker.web.js

@@ -1,119 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
-const format_1 = require("../modules/format");
-const theme_1 = require("../modules/theme");
-const react_date_range_1 = require("react-date-range");
-const Modal_1 = require("./Modal");
-const layout_1 = require("../modules/layout");
-require("react-date-range/dist/styles.css");
-const react_native_1 = require("react-native");
-require("../../styles/RangeDatePicker.css");
-class RangeDatePicker extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            showStartDateModal: false,
-            count: 0
-        };
-        this.calendarRef = React.createRef();
-        this.handleClick = (event) => {
-            if (this.calendarRef.current &&
-                !this.calendarRef.current.contains(event.target)) {
-                this.setState({ showStartDateModal: false, count: 0 });
-            }
-        };
-        this.handleDatePickerPress = () => {
-            this.setState({
-                showStartDateModal: true
-            });
-        };
-        this.handleRangeDateConfirm = (ranges) => {
-            if (this.state.count == 1) {
-                this.props.onStartDateChange(ranges.selection.startDate);
-                // Sometimes the parent component is not ready because the setState method
-                // is async, so we wait a little.
-                setTimeout(() => this.props.onEndDateChange(ranges.selection.endDate), 1);
-                this.setState({ showStartDateModal: false, count: 0 });
-                return;
-            }
-            this.props.onStartDateChange(ranges.selection.startDate);
-            this.setState({ count: 1 });
-        };
-        this.getStyles = () => {
-            const theme = theme_1.getTheme();
-            const styles = react_native_1.StyleSheet.create({
-                container: {
-                    paddingHorizontal: 16,
-                    paddingVertical: 8,
-                    borderWidth: 1,
-                    borderColor: theme.borderColor1,
-                    borderRadius: 3,
-                    flexDirection: 'row',
-                    alignItems: 'center'
-                },
-                modalOverlay: {
-                    justifyContent: 'center',
-                    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
-                },
-                icon: {
-                    marginLeft: 'auto',
-                    color: theme.textColor2,
-                    fontSize: 22
-                }
-            });
-            return styles;
-        };
-    }
-    componentWillMount() {
-        document.addEventListener('mousedown', this.handleClick, false);
-    }
-    componentWillUnmount() {
-        document.removeEventListener('mousedown', this.handleClick, false);
-    }
-    render() {
-        const { label, startDate, endDate, style, nativeID } = this.props;
-        const { showStartDateModal } = this.state;
-        const displayFormat = 'MMM D, YYYY';
-        const displayText = format_1.formatDate(startDate, displayFormat) +
-            ' - ' +
-            format_1.formatDate(endDate, displayFormat);
-        const theme = theme_1.getTheme();
-        const styles = this.getStyles();
-        return (React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: this.handleDatePickerPress },
-            React.createElement(react_native_1.View, { nativeID: nativeID, style: [styles.container, style] },
-                React.createElement(react_native_1.View, { ref: ref => ref && ref.setNativeProps({ id: 'range-date-picker' }) },
-                    React.createElement(react_native_1.Text, { style: styles.label }, label),
-                    React.createElement(react_native_1.Text, { style: styles.value }, displayText)),
-                React.createElement(FontAwesome_1.default, { name: "calendar", style: styles.icon }),
-                React.createElement(Modal_1.Modal, { visible: showStartDateModal, 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.DateRange, { locale: format_1.getDateFnsLocale(), showDateDisplay: false, ranges: [
-                                {
-                                    startDate: startDate,
-                                    endDate: endDate,
-                                    key: 'selection'
-                                }
-                            ], rangeColors: [theme.backgroundColor3], onChange: this.handleRangeDateConfirm }))))));
-    }
-}
-exports.RangeDatePicker = RangeDatePicker;

package/lib/components/Space.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-export interface SpaceProperties {
-    height?: number;
-    width?: number;
-}
-export declare class Space extends React.Component<SpaceProperties> {
-    static defaultProps: {
-        height: number;
-    };
-    render(): JSX.Element;
-}

package/lib/components/Space.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const react_native_1 = require("react-native");
-class Space extends React.Component {
-    render() {
-        const { height, width } = this.props;
-        return React.createElement(react_native_1.View, { style: { height, width } });
-    }
-}
-Space.defaultProps = {
-    height: 16
-};
-exports.Space = Space;

package/lib/components/StatusBar.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-export declare class StatusBar extends React.Component {
-    static height: number;
-    getStyles: () => {
-        statusBar: {
-            backgroundColor: string;
-            height: number;
-        };
-    };
-    render(): JSX.Element;
-}