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

package/lib/components/RadioGroup.d.ts

@@ -1,45 +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>;
-    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

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

@@ -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,127 +0,0 @@
-"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

@@ -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,120 +0,0 @@
-"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");
-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;
-        };
-    }
-    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 = (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(react_date_range_1.DateRange, { locale: (0, format_1.getDateFnsLocale)(), showDateDisplay: false, ranges: [
-                                {
-                                    startDate: startDate,
-                                    endDate: endDate,
-                                    key: 'selection'
-                                }
-                            ], rangeColors: [theme.backgroundColor3], onChange: this.handleRangeDateConfirm, weekdayDisplayFormat: (0, format_1.getLocale)() === 'pt' ? 'EEEEEE' : 'E' }))))));
-    }
-}
-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,15 +0,0 @@
-"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

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

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

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

@@ -1,50 +0,0 @@
-"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;

package/lib/components/Table.d.ts

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { StyleProp, TextStyle, ViewStyle } from 'react-native';
-export interface TableColumn {
-    key: string;
-    title: string;
-    headerStyle?: StyleProp<TextStyle>;
-    style?: StyleProp<TextStyle>;
-    type: 'text' | 'icon' | 'checkbox';
-}
-export interface TableCellStyle {
-    [id: string]: {
-        [column: string]: StyleProp<TextStyle>;
-    };
-}
-export interface TableProperties {
-    columns: Array<TableColumn>;
-    subHeaderData?: Array<TableColumn>;
-    data: Array<any>;
-    idAttribute: string;
-    style?: StyleProp<ViewStyle>;
-    cellStyle?: TableCellStyle;
-    nativeID?: string;
-    onSelect?: (name: string, value: boolean) => void;
-    onSelectAll?: (value: boolean) => void;
-}
-export declare class Table extends React.Component<TableProperties> {
-    renderHeaderColumn: (column: TableColumn) => JSX.Element;
-    renderDataTable: (row: any, rowIndex: number) => JSX.Element;
-    render(): JSX.Element;
-}