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

package/lib/components/RadioGroup.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+export interface RadioGroupProperties {
+    items: Array<{
+        label: string;
+        value: string;
+    }>;
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: Array<string>;
+    nativeID?: 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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
+const React = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../modules/theme");
+const layout_1 = require("../modules/layout");
+const test_1 = require("../modules/test");
+class RadioGroup extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, 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: (0, layout_1.isTablet)() ? 10 : 5,
+                    borderColor: theme.borderColor1,
+                    flex: 1,
+                    alignItems: 'center'
+                },
+                itemText: {
+                    fontFamily: theme.fontFamily1,
+                    fontSize: (0, layout_1.isTablet)() ? 16 : 12,
+                    lineHeight: (0, 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, nativeID } = this.props;
+        const styles = this.getStyles();
+        return (React.createElement(react_native_1.View, { style: styles.container }, items.map((item, index) => {
+            const itemNativeID = nativeID
+                ? nativeID + '-' + item.value
+                : undefined;
+            return (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
+                    ], testID: (0, test_1.getTestID)(itemNativeID), nativeID: itemNativeID },
+                    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

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

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeDatePicker = void 0;
+const React = require("react");
+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 test_1 = require("../modules/test");
+const react_native_1 = require("react-native");
+class RangeDatePicker extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            showStartDateModal: false,
+            showEndDateModal: false,
+            isDarkModeEnabled: react_native_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 = (0, 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: (0, 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_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 = (0, format_1.formatDate)(startDate, displayFormat) +
+            ' - ' +
+            (0, 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, testID: (0, test_1.getTestID)(nativeID), style: [styles.container, style] },
+                React.createElement(react_native_1.View, { style: { flex: 1 } },
+                    React.createElement(react_native_1.Text, { style: styles.label }, label),
+                    React.createElement(react_native_1.Text, { numberOfLines: 1, 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

@@ -0,0 +1,61 @@
+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;
+    componentDidMount(): 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

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeDatePicker = void 0;
+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");
+function compareDates(date1, date2) {
+    if (date1 instanceof Date && date2 instanceof Date) {
+        return date1.getTime() === date2.getTime();
+    }
+    return date1 === date2;
+}
+class PureDateRange extends React.Component {
+    // Without this check, every time the parent re-renders it would
+    // recreate the DateRange with the initial startDate value,
+    // even if the date hasn't actually changed.
+    // This causes the calendar to reset and the user loses the current
+    // selection while interacting.
+    // Related issue on GitLab 12293
+    shouldComponentUpdate(nextProps) {
+        if (nextProps.onChange !== this.props.onChange) {
+            return true;
+        }
+        return (!compareDates(nextProps.startDate, this.props.startDate) ||
+            !compareDates(nextProps.endDate, this.props.endDate));
+    }
+    render() {
+        const { startDate, endDate, onChange } = this.props;
+        const theme = (0, theme_1.getTheme)();
+        return (React.createElement(react_date_range_1.DateRange, { locale: (0, format_1.getDateFnsLocale)(), showDateDisplay: false, ranges: [
+                {
+                    startDate,
+                    endDate,
+                    key: 'selection'
+                }
+            ], rangeColors: [theme.backgroundColor3], onChange: onChange, weekdayDisplayFormat: (0, format_1.getLocale)() === 'pt' ? 'EEEEEE' : 'E' }));
+    }
+}
+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 = (0, 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: (0, 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() {
+        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 = (0, format_1.formatDate)(startDate, displayFormat) +
+            ' - ' +
+            (0, format_1.formatDate)(endDate, displayFormat);
+        const theme = (0, 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, 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.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(PureDateRange, { startDate: startDate, endDate: endDate, onChange: this.handleRangeDateConfirm }))))));
+    }
+}
+exports.RangeDatePicker = RangeDatePicker;

package/lib/components/Space.d.ts

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Space = void 0;
+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 } });
+    }
+}
+exports.Space = Space;
+Space.defaultProps = {
+    height: 16
+};

package/lib/components/StatusBar.d.ts

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

package/lib/components/StatusBar.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusBar = void 0;
+const React = require("react");
+const react_native_1 = require("react-native");
+const react_native_status_bar_height_1 = require("react-native-status-bar-height");
+const theme_1 = require("../modules/theme");
+class StatusBar extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, theme_1.getTheme)();
+            const { extraHeight } = this.props;
+            const styles = react_native_1.StyleSheet.create({
+                statusBar: {
+                    backgroundColor: theme.statusBarColor,
+                    height: (0, react_native_status_bar_height_1.getStatusBarHeight)() + extraHeight
+                }
+            });
+            return styles;
+        };
+    }
+    render() {
+        const styles = this.getStyles();
+        return (React.createElement(react_native_1.View, { style: styles.statusBar },
+            React.createElement(react_native_1.StatusBar, { backgroundColor: "transparent", barStyle: "light-content", translucent: true })));
+    }
+}
+exports.StatusBar = StatusBar;
+StatusBar.height = (0, react_native_status_bar_height_1.getStatusBarHeight)();
+StatusBar.defaultProps = {
+    extraHeight: 0
+};

package/lib/components/Switch.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+export interface SwitchProperties {
+    value: boolean;
+    label?: string;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+}
+export declare class Switch extends React.Component<SwitchProperties> {
+    getStyles: () => {
+        container: {
+            paddingHorizontal: number;
+            paddingVertical: number;
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "space-between";
+        };
+        label: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+            lineHeight: number;
+        };
+        readonly: {
+            backgroundColor: string;
+        };
+    };
+    render(): JSX.Element;
+}

package/lib/components/Switch.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+const React = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../modules/theme");
+const layout_1 = require("../modules/layout");
+class Switch extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, 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',
+                    justifyContent: 'space-between'
+                },
+                label: {
+                    color: theme.textColor2,
+                    fontFamily: theme.fontFamily2,
+                    fontSize: (0, layout_1.isTablet)() ? 15 : 12,
+                    lineHeight: 16
+                },
+                readonly: {
+                    backgroundColor: theme.disabledColor
+                }
+            });
+            return styles;
+        };
+    }
+    render() {
+        const { label, value, onChange, style, labelStyle, disabled } = this.props;
+        const styles = this.getStyles();
+        return (React.createElement(react_native_1.TouchableWithoutFeedback, { disabled: disabled, onPress: () => {
+                if (onChange) {
+                    onChange(!value);
+                }
+            } },
+            React.createElement(react_native_1.View, { style: [styles.container, style, disabled ? styles.readonly : null] },
+                label && React.createElement(react_native_1.Text, { style: [styles.label, labelStyle] }, label),
+                React.createElement(react_native_1.Switch, { disabled: disabled, value: value, onValueChange: onChange }))));
+    }
+}
+exports.Switch = Switch;