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

package/lib/components/Table.d.ts

@@ -0,0 +1,30 @@
+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;
+}

package/lib/components/Table.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = void 0;
+const React = require("react");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const theme_1 = require("../modules/theme");
+const test_1 = require("../modules/test");
+const react_native_1 = require("react-native");
+const CheckBox_1 = require("./CheckBox");
+class Table extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.renderHeaderColumn = (column) => {
+            const { data, onSelectAll } = this.props;
+            if (column.type === 'checkbox') {
+                return (React.createElement(CheckBox_1.CheckBox, { key: column.key, style: { marginLeft: 8 }, value: data.every(x => x.selected) || false, onChange: value => onSelectAll && onSelectAll(value) }));
+            }
+            return (React.createElement(react_native_1.Text, { key: column.key, style: [
+                    styles.cell,
+                    styles.cellHeader,
+                    column.style,
+                    column.headerStyle
+                ] }, column.title));
+        };
+        this.renderDataTable = (row, rowIndex) => {
+            const { idAttribute, columns, cellStyle, onSelect } = this.props;
+            return (React.createElement(react_native_1.View, { key: row[idAttribute].toString(), style: [
+                    styles.row,
+                    {
+                        backgroundColor: rowIndex % 2 === 0
+                            ? theme.backgroundColor2
+                            : theme.backgroundColor1
+                    }
+                ] }, columns.map(column => {
+                const style = cellStyle &&
+                    cellStyle[row[idAttribute].toString()] &&
+                    cellStyle[row[idAttribute].toString()][column.key];
+                return column.type === 'icon' ? (React.createElement(FontAwesome_1.default, { key: column.key, name: row[column.key].toString(), 
+                    // @ts-ignore : The component uses a different version of typing
+                    style: [styles.cellIcon, style, column.style] })) : column.type === 'checkbox' ? (React.createElement(CheckBox_1.CheckBox, { key: column.key, style: { marginLeft: 8 }, value: row.selected || false, onChange: value => onSelect && onSelect(row[column.key].toString(), value) })) : (React.createElement(react_native_1.Text, { key: column.key, style: [styles.cell, style, column.style] }, row[column.key].toString()));
+            })));
+        };
+    }
+    render() {
+        const { columns, data, style, nativeID, subHeaderData } = this.props;
+        return (React.createElement(react_native_1.ScrollView, { horizontal: true },
+            React.createElement(react_native_1.View, { nativeID: nativeID, style: style, testID: (0, test_1.getTestID)(nativeID) },
+                React.createElement(react_native_1.View, { style: styles.row }, columns.map(column => this.renderHeaderColumn(column))),
+                subHeaderData && (React.createElement(react_native_1.View, { style: styles.row }, subHeaderData.map(column => this.renderHeaderColumn(column)))),
+                data.map((row, rowIndex) => this.renderDataTable(row, rowIndex)))));
+    }
+}
+exports.Table = Table;
+const theme = (0, theme_1.getTheme)();
+const styles = react_native_1.StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 8,
+        minHeight: 45
+    },
+    cell: {
+        fontFamily: theme.fontFamily2,
+        fontSize: 14,
+        marginLeft: 8,
+        lineHeight: 18,
+        color: theme.textColor1
+    },
+    cellHeader: {
+        fontFamily: theme.fontFamily1,
+        color: theme.textColor1
+    },
+    cellIcon: {
+        fontSize: 24,
+        marginLeft: 8,
+        textAlign: 'center',
+        textAlignVertical: 'center'
+    }
+});

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { TableProperties, TableColumn } from './Table';
+interface State {
+    leftHeader: number;
+}
+interface Props {
+    heightContainer: number;
+}
+export declare class Table extends React.Component<Props & TableProperties, State> {
+    state: State;
+    static defaultProps: {
+        heightContainer: number;
+    };
+    renderHeaderTable: (headerData: Array<TableColumn>) => JSX.Element;
+    renderDataTable: () => JSX.Element;
+    render(): JSX.Element;
+}
+export {};

package/lib/components/Table.web.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = void 0;
+const React = require("react");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const theme_1 = require("../modules/theme");
+const react_native_1 = require("react-native");
+const browser_1 = require("../modules/browser");
+const CheckBox_1 = require("./CheckBox");
+class Table extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            leftHeader: 0
+        };
+        this.renderHeaderTable = (headerData) => {
+            const { onSelectAll, data, nativeID } = this.props;
+            const { leftHeader } = this.state;
+            return (React.createElement("div", { style: {
+                    overflow: 'hidden',
+                    position: 'relative',
+                    height: 45
+                } },
+                React.createElement("div", { style: {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        paddingBottom: 8,
+                        minHeight: 45,
+                        position: 'absolute',
+                        left: leftHeader,
+                        display: 'flex',
+                        paddingTop: (0, browser_1.ehIE)() ? 15 : 0
+                    } }, headerData.map((column, index) => {
+                    const headerId = nativeID && `${nativeID}-header-${index + 1}`;
+                    return column.type === 'checkbox' ? (React.createElement(CheckBox_1.CheckBox, { nativeID: headerId, key: column.key, style: { marginLeft: 8 }, value: data.every(x => x.selected) || false, onChange: value => onSelectAll && onSelectAll(value) })) : (React.createElement(react_native_1.Text, { nativeID: headerId, key: column.key, style: [
+                            styles.cell,
+                            styles.cellHeader,
+                            column.style,
+                            column.headerStyle
+                        ] }, column.title));
+                }))));
+        };
+        this.renderDataTable = () => {
+            const { columns, data, idAttribute, cellStyle, heightContainer, subHeaderData, onSelect, nativeID } = this.props;
+            const height = subHeaderData ? heightContainer - 45 : heightContainer;
+            return (React.createElement("div", { style: {
+                    height,
+                    display: 'flex',
+                    overflowX: 'scroll',
+                    overflowY: 'scroll'
+                }, onScroll: (event) => {
+                    this.setState({ leftHeader: event ? -event.target.scrollLeft : 0 });
+                } },
+                React.createElement("div", null,
+                    React.createElement(react_native_1.FlatList, { data: data, keyExtractor: item => item.id.toString(), renderItem: ({ item, index }) => (React.createElement(react_native_1.View, { key: index, style: [
+                                styles.row,
+                                {
+                                    backgroundColor: index % 2 === 0
+                                        ? theme.backgroundColor2
+                                        : theme.backgroundColor1
+                                }
+                            ] }, columns.map((column, columnIndex) => {
+                            const style = cellStyle &&
+                                cellStyle[item[idAttribute].toString()] &&
+                                cellStyle[item[idAttribute].toString()][column.key];
+                            const cellID = nativeID && `${nativeID}-${index + 1}-${columnIndex + 1}`;
+                            return column.type === 'icon' ? (React.createElement(FontAwesome_1.default, { nativeID: cellID, key: column.key, name: item[column.key].toString(), 
+                                // @ts-ignore : The component uses a different version of typing
+                                style: [styles.cellIcon, style, column.style] })) : column.type === 'checkbox' ? (React.createElement(CheckBox_1.CheckBox, { nativeID: cellID, key: column.key, style: { marginLeft: 8 }, value: item.selected || false, onChange: value => onSelect && onSelect(item[column.key].toString(), value) })) : (React.createElement(react_native_1.Text, { nativeID: cellID, key: column.key, style: [styles.cell, style, column.style] }, item[column.key].toString()));
+                        }))) }))));
+        };
+    }
+    render() {
+        const { columns, nativeID, subHeaderData } = this.props;
+        return (React.createElement(react_native_1.View, { nativeID: nativeID },
+            this.renderHeaderTable(columns),
+            subHeaderData && this.renderHeaderTable(subHeaderData),
+            this.renderDataTable()));
+    }
+}
+exports.Table = Table;
+Table.defaultProps = {
+    //Top = 60px, padding = 16px, filters = 143px, padding = 16px, header = 45px, padding = 16
+    heightContainer: react_native_1.Dimensions.get('window').height - 296
+};
+const theme = (0, theme_1.getTheme)();
+const styles = react_native_1.StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 8,
+        minHeight: 45
+    },
+    cell: {
+        fontFamily: theme.fontFamily2,
+        fontSize: 14,
+        marginLeft: 8,
+        lineHeight: 18,
+        color: theme.textColor1
+    },
+    cellHeader: {
+        fontFamily: theme.fontFamily1,
+        color: theme.textColor1
+    },
+    cellIcon: {
+        fontSize: 24,
+        marginLeft: 8,
+        textAlign: 'center',
+        textAlignVertical: 'center'
+    }
+});

package/lib/components/Text.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { StyleProp, TextStyle } from 'react-native';
+export interface TextProperties {
+    style?: StyleProp<TextStyle>;
+    bold: boolean;
+    size: number;
+    flex?: number;
+    color: string;
+    align?: 'auto' | 'left' | 'right' | 'center' | 'justify';
+    nativeID?: string;
+    children?: React.ReactNode;
+}
+export declare class Text extends React.Component<TextProperties> {
+    getStyles: () => {
+        text: {
+            color: string;
+            flex: number | undefined;
+            fontSize: number;
+            textAlign: "left" | "right" | "auto" | "center" | "justify" | undefined;
+            fontFamily: string;
+        };
+    };
+    static defaultProps: {
+        bold: boolean;
+        size: number;
+        color: string;
+    };
+    render(): JSX.Element;
+}

package/lib/components/Text.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = void 0;
+const React = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../modules/theme");
+const test_1 = require("../modules/test");
+const theme = (0, theme_1.getTheme)();
+class Text extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const { bold, color, size, flex, align } = this.props;
+            const theme = (0, theme_1.getTheme)();
+            const styles = react_native_1.StyleSheet.create({
+                text: {
+                    color,
+                    flex,
+                    fontSize: size,
+                    textAlign: align,
+                    fontFamily: bold ? theme.fontFamily1 : theme.fontFamily2
+                }
+            });
+            return styles;
+        };
+    }
+    render() {
+        const { style, children, nativeID } = this.props;
+        const textStyle = this.getStyles();
+        return (React.createElement(react_native_1.Text, { nativeID: nativeID, testID: (0, test_1.getTestID)(nativeID), style: [textStyle.text, style] }, children));
+    }
+}
+exports.Text = Text;
+Text.defaultProps = {
+    bold: false,
+    size: 14,
+    color: theme.textColor1
+};

package/lib/components/TextBox.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { KeyboardType, StyleProp, TextInput, TextInputKeyPressEventData, TextStyle, ViewStyle, TextInputProps, ReturnKeyTypeOptions } from 'react-native';
+export interface TextBoxInputProps extends TextInputProps {
+    ref: (ref: TextInput) => void;
+}
+export interface TextBoxProperties {
+    autoFocus?: boolean;
+    label?: string;
+    icon?: string;
+    placeholder?: string;
+    value: string;
+    onChange?: (value: string) => void;
+    onKeyPress?: (nativeEvent: TextInputKeyPressEventData) => void;
+    onBlur?: () => void;
+    renderInput?: (props: TextBoxInputProps) => JSX.Element;
+    onSubmitEditing?: () => void;
+    inputRef?: (value: TextInput) => void;
+    onPress?: () => void;
+    secureTextEntry?: boolean;
+    multiline?: boolean;
+    keyboardType?: KeyboardType;
+    style?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+    editable?: boolean;
+    autoCorrect?: boolean;
+    maxLength?: number;
+    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+    returnKeyType?: ReturnKeyTypeOptions;
+    blurOnSubmit?: boolean;
+    nativeID?: string;
+    selection?: {
+        start: number;
+        end?: number;
+    };
+}
+export declare class TextBox extends React.Component<TextBoxProperties> {
+    input: TextInput | null;
+    static defaultProps: {
+        editable: boolean;
+        autoCorrect: boolean;
+        blurOnSubmit: boolean;
+    };
+    getStyles: () => {
+        container: {
+            flexDirection?: "row" | undefined;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+        };
+        icon: {
+            color: string;
+            fontSize: number;
+            marginRight: number;
+            alignSelf: "center";
+            minHeight: number;
+        };
+        label: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+            lineHeight: number;
+        };
+        input: {
+            flex?: number | undefined;
+            outlineStyle?: string | undefined;
+            color: string;
+            fontFamily: string;
+            fontWeight: "normal";
+            fontSize: number;
+            minHeight: number;
+            padding: number;
+            margin: number;
+        };
+        readonly: {
+            backgroundColor: string;
+        };
+    };
+    focus: () => void;
+    renderInput: (props: TextInputProps) => JSX.Element;
+    render(): JSX.Element;
+}

package/lib/components/TextBox.js

@@ -0,0 +1,126 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextBox = void 0;
+const React = require("react");
+const theme_1 = require("../modules/theme");
+const layout_1 = require("../modules/layout");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const test_1 = require("../modules/test");
+const react_native_1 = require("react-native");
+class TextBox extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.input = null;
+        this.getStyles = () => {
+            const theme = (0, theme_1.getTheme)();
+            const { icon } = this.props;
+            const styles = react_native_1.StyleSheet.create({
+                container: Object.assign({ paddingHorizontal: 16, paddingVertical: 8, borderWidth: 1, borderColor: theme.borderColor1, borderRadius: 3 }, (icon ? { flexDirection: 'row' } : {})),
+                icon: {
+                    color: theme.textColor2,
+                    fontSize: (0, layout_1.isTablet)() ? 21 : 19,
+                    marginRight: 10,
+                    alignSelf: 'center',
+                    minHeight: 22
+                },
+                label: {
+                    color: theme.textColor2,
+                    fontFamily: theme.fontFamily3,
+                    fontSize: (0, layout_1.isTablet)() ? 15 : 12,
+                    lineHeight: 16
+                },
+                input: Object.assign(Object.assign({ color: theme.textColor1, fontFamily: this.props.value ? theme.fontFamily1 : theme.fontFamily3, fontWeight: 'normal', fontSize: 16, minHeight: 22, padding: 0, margin: 0 }, (react_native_1.Platform.OS === 'web' ? { outlineStyle: 'none' } : {})), (icon ? { flex: 1 } : {})),
+                readonly: {
+                    backgroundColor: theme.disabledColor
+                }
+            });
+            return styles;
+        };
+        this.focus = () => {
+            if (this.input && this.props.editable) {
+                this.input.focus();
+            }
+        };
+        this.renderInput = (props) => {
+            const { nativeID } = props, otherProps = __rest(props, ["nativeID"]);
+            return (React.createElement(react_native_1.TextInput, Object.assign({ nativeID: nativeID, testID: (0, test_1.getTestID)(nativeID) }, otherProps)));
+        };
+    }
+    render() {
+        const { label, style, labelStyle, editable, inputRef, renderInput, icon, onPress } = this.props;
+        const styles = this.getStyles();
+        const incomingProps = {
+            nativeID: this.props.nativeID,
+            testID: (0, test_1.getTestID)(this.props.nativeID),
+            autoFocus: this.props.autoFocus,
+            value: this.props.value,
+            onChangeText: this.props.onChange,
+            onBlur: this.props.onBlur,
+            style: [
+                styles.input,
+                this.props.inputStyle,
+                this.props.editable ? null : styles.readonly
+            ],
+            underlineColorAndroid: 'transparent',
+            //@ts-ignore: no Android < 6 essa é a prop que deixa o underline transparente. https://stackoverflow.com/questions/40478246/remove-underline-in-inputtext-in-react-native
+            borderWidth: 0,
+            placeholder: this.props.placeholder,
+            // We set a fixed color for the placeholder to prevent it from being affected by the device's theme.
+            // Related issue on GitLab: 12074
+            placeholderTextColor: (0, theme_1.getTheme)().textColor3,
+            secureTextEntry: this.props.secureTextEntry,
+            multiline: this.props.multiline,
+            editable: this.props.editable,
+            keyboardType: this.props.keyboardType,
+            maxLength: this.props.maxLength,
+            onSubmitEditing: this.props.onSubmitEditing,
+            autoCapitalize: this.props.autoCapitalize,
+            autoCorrect: this.props.autoCorrect,
+            returnKeyType: react_native_1.Platform.OS === 'ios' &&
+                this.props.keyboardType === 'numeric' &&
+                this.props.returnKeyType === 'next'
+                ? 'done'
+                : this.props.returnKeyType,
+            ref: (input) => {
+                this.input = input;
+                if (inputRef)
+                    inputRef(input);
+            },
+            selection: this.props.selection,
+            onKeyPress: (event) => {
+                if (!this.props.onKeyPress) {
+                    return;
+                }
+                this.props.onKeyPress(react_native_1.Platform.OS === 'web' ? event : event.nativeEvent);
+            }
+        };
+        return (React.createElement(react_native_1.TouchableWithoutFeedback, { accessible: false, onPress: () => (onPress ? onPress() : this.focus()), ref: ref => {
+                if (react_native_1.Platform.OS === 'web' && ref != null) {
+                    // @ts-ignore na web, a ref recebida é o próprio elemento DOM
+                    ref.tabIndex = -1;
+                }
+            } },
+            React.createElement(react_native_1.View, { style: [styles.container, style, editable ? null : styles.readonly] },
+                icon ? (React.createElement(FontAwesome_1.default, { name: icon, style: styles.icon })) : (React.createElement(react_native_1.Text, { style: [styles.label, labelStyle] }, label)),
+                renderInput
+                    ? renderInput(incomingProps)
+                    : this.renderInput(incomingProps))));
+    }
+}
+exports.TextBox = TextBox;
+TextBox.defaultProps = {
+    editable: true,
+    autoCorrect: false,
+    blurOnSubmit: true
+};

package/lib/components/TextBoxMask.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { TextBoxProperties } from './TextBox';
+import { TextInputMaskTypeProp, TextInputMaskOptionProp } from 'react-native-masked-text';
+export declare type MaskType = TextInputMaskTypeProp;
+export declare type MaskOptions = TextInputMaskOptionProp;
+export interface TextBoxMaskProperties extends TextBoxProperties {
+    type: MaskType;
+    options?: MaskOptions;
+}
+export declare class TextBoxMask extends React.Component<TextBoxMaskProperties> {
+    render(): JSX.Element;
+}

package/lib/components/TextBoxMask.js

@@ -0,0 +1,34 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextBoxMask = void 0;
+const React = require("react");
+const TextBox_1 = require("./TextBox");
+const react_native_1 = require("react-native");
+const react_native_masked_text_1 = require("react-native-masked-text");
+class TextBoxMask extends React.Component {
+    render() {
+        const _a = this.props, { type, options } = _a, textBoxProps = __rest(_a, ["type", "options"]);
+        return (React.createElement(TextBox_1.TextBox, Object.assign({}, textBoxProps, { renderInput: props => {
+                const { ref } = props, otherProps = __rest(props, ["ref"]);
+                return react_native_1.Platform.OS === 'web' ? (
+                // @ts-ignore :Waiting for typing https://github.com/benhurott/react-native-masked-text/pull/74
+                React.createElement(react_native_masked_text_1.TextInputMask, Object.assign({}, otherProps, { type: type, options: options }))) : (
+                // @ts-ignore :Waiting for typing https://github.com/benhurott/react-native-masked-text/pull/74
+                React.createElement(react_native_masked_text_1.TextInputMask, Object.assign({}, otherProps, { 
+                    // @ts-ignore : The component uses a different version of typing
+                    refInput: ref, type: type, options: options })));
+            } })));
+    }
+}
+exports.TextBoxMask = TextBoxMask;

package/lib/components/TimePicker.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface TimePickerProperties {
+    label: string;
+    value: string;
+    clearable?: boolean;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    onCancel?: () => void;
+    style?: StyleProp<ViewStyle>;
+    nativeID?: string;
+}
+export interface TimePickerState {
+    showModal: boolean;
+    isDarkModeEnabled: boolean;
+}
+export declare class TimePicker extends React.Component<TimePickerProperties, TimePickerState> {
+    static defaultProps: {
+        clearable: boolean;
+    };
+    state: TimePickerState;
+    appearanceSubscription: any;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handlePress: () => void;
+    handleConfirm: (value: Date) => void;
+    handleCancel: () => void;
+    handleClear: () => 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;
+            minHeight: number;
+        };
+        readonly: {
+            backgroundColor: string;
+        };
+        clearIcon: {
+            borderWidth: number;
+            marginLeft: string;
+            height: string;
+            width: string;
+        };
+    };
+    render(): JSX.Element;
+}