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

package/lib/components/MultiSelect.js

@@ -0,0 +1,377 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSelect = 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 layout_1 = require("../modules/layout");
+const Switch_1 = require("./Switch");
+const Modal_1 = require("./Modal");
+const Button_1 = require("./Button");
+const Space_1 = require("./Space");
+class MultiSelectItem extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, theme_1.getTheme)();
+            const width = react_native_1.Dimensions.get('screen').width;
+            const styles = react_native_1.StyleSheet.create({
+                text: {
+                    paddingHorizontal: 16,
+                    paddingVertical: 16,
+                    fontFamily: theme.fontFamily1,
+                    fontSize: 16,
+                    flexWrap: 'wrap',
+                    maxWidth: width - 150,
+                    color: theme.textColor1
+                },
+                icon: {
+                    fontSize: 26
+                },
+                rowView: {
+                    flexDirection: 'row',
+                    paddingLeft: 16
+                },
+                switch: {
+                    alignContent: 'center',
+                    justifyContent: 'center'
+                },
+                iconView: {
+                    width: 50,
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                iconOnlyView: {
+                    width: 100,
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                iconOnly: {
+                    paddingHorizontal: 16,
+                    paddingVertical: 16,
+                    fontSize: 60
+                },
+                switchStyle: {
+                    paddingHorizontal: 8,
+                    borderWidth: 0
+                }
+            });
+            return styles;
+        };
+        this.renderWithLabelAndIcon = (label, icon) => {
+            const { value, iconComponent, handleAdd, handleRemove } = this.props;
+            const theme = (0, theme_1.getTheme)();
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                React.createElement(react_native_1.View, { style: styles.switch },
+                    React.createElement(Switch_1.Switch, { value: this.props.checked, onChange: () => {
+                            if (this.props.checked) {
+                                handleRemove(value);
+                            }
+                            else {
+                                handleAdd(value);
+                            }
+                        }, style: styles.switchStyle })),
+                React.createElement(react_native_1.View, { style: styles.iconView }, iconComponent ? (React.createElement(iconComponent, {
+                    name: icon,
+                    style: styles.icon,
+                    color: theme.textColor1
+                })) : (React.createElement(FontAwesome_1.default, { name: icon, color: theme.textColor1, style: styles.icon }))),
+                React.createElement(react_native_1.View, null,
+                    React.createElement(react_native_1.Text, { style: styles.text }, label))));
+        };
+        this.renderWithLabel = (label) => {
+            const { value, handleAdd, handleRemove } = this.props;
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                React.createElement(react_native_1.View, { style: styles.switch },
+                    React.createElement(Switch_1.Switch, { value: this.props.checked, onChange: () => {
+                            if (this.props.checked) {
+                                handleRemove(value);
+                            }
+                            else {
+                                handleAdd(value);
+                            }
+                        }, style: styles.switchStyle })),
+                React.createElement(react_native_1.Text, { style: styles.text }, label)));
+        };
+        this.renderWithIcon = (icon) => {
+            const { value, iconComponent, handleAdd, handleRemove } = this.props;
+            const theme = (0, theme_1.getTheme)();
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                React.createElement(react_native_1.View, { style: styles.switch },
+                    React.createElement(Switch_1.Switch, { value: this.props.checked, onChange: () => {
+                            if (this.props.checked) {
+                                handleRemove(value);
+                            }
+                            else {
+                                handleAdd(value);
+                            }
+                        }, style: styles.switchStyle })),
+                React.createElement(react_native_1.View, { style: styles.iconOnlyView }, iconComponent ? (React.createElement(iconComponent, {
+                    name: icon,
+                    style: styles.iconOnly,
+                    color: theme.textColor1
+                })) : (React.createElement(FontAwesome_1.default, { name: icon, color: theme.textColor1, style: styles.iconOnly })))));
+        };
+    }
+    render() {
+        const { label, icon } = this.props;
+        if (label && icon) {
+            return this.renderWithLabelAndIcon(label, icon);
+        }
+        else if (label && !icon) {
+            return this.renderWithLabel(label);
+        }
+        else if (!label && icon) {
+            return this.renderWithIcon(icon);
+        }
+        return null;
+    }
+}
+class MultiSelect extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            modalOpen: false,
+            selectedValues: [],
+            selectedValuesInitial: []
+        };
+        this.componentDidMount = () => {
+            this.setState({
+                selectedValues: this.props.values || [],
+                selectedValuesInitial: this.props.values || []
+            });
+        };
+        this.componentDidUpdate = (prevProps) => {
+            if (prevProps.values !== this.props.values) {
+                this.setState({
+                    selectedValues: this.props.values || [],
+                    selectedValuesInitial: this.props.values || []
+                });
+            }
+        };
+        this.handleAddValue = (value) => {
+            this.setState({ selectedValues: [...this.state.selectedValues, value] });
+        };
+        this.handleRemoveValue = (value) => {
+            this.setState({
+                selectedValues: this.state.selectedValues.filter(x => x !== value)
+            });
+        };
+        this.handleSave = () => {
+            const { onChange } = this.props;
+            const { selectedValues } = this.state;
+            this.setState({ modalOpen: false, selectedValuesInitial: selectedValues });
+            onChange(selectedValues);
+        };
+        this.renderClosedWithNone = () => {
+            const { selectedNoneDescription } = this.props;
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                React.createElement(react_native_1.Text, { style: styles.text }, selectedNoneDescription),
+                React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
+        };
+        this.renderClosedWithAll = () => {
+            const { selectedAllDescription } = this.props;
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                React.createElement(react_native_1.Text, { style: styles.text }, selectedAllDescription),
+                React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
+        };
+        this.renderClosedWithOneLabel = (label) => {
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                React.createElement(react_native_1.Text, { style: styles.text }, label),
+                React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
+        };
+        this.renderClosedWithOneIcon = (icon) => {
+            const { iconComponent } = this.props;
+            const theme = (0, theme_1.getTheme)();
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                iconComponent ? (React.createElement(iconComponent, {
+                    name: icon,
+                    style: styles.iconOnly,
+                    color: theme.textColor1
+                })) : (React.createElement(FontAwesome_1.default, { name: icon, color: theme.textColor1, style: styles.iconOnly })),
+                React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
+        };
+        this.renderClosedWithOneLabelAndIcon = (label, icon) => {
+            const { iconComponent } = this.props;
+            const theme = (0, theme_1.getTheme)();
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                React.createElement(react_native_1.View, { style: styles.iconView }, iconComponent ? (React.createElement(iconComponent, {
+                    name: icon,
+                    style: styles.icon,
+                    color: theme.textColor1
+                })) : (React.createElement(FontAwesome_1.default, { name: icon, color: theme.textColor1, style: styles.icon }))),
+                React.createElement(react_native_1.View, { style: styles.textView },
+                    React.createElement(react_native_1.Text, { style: styles.text }, label)),
+                React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
+        };
+        this.renderClosedWithOne = (label, icon) => {
+            if (label && icon) {
+                return this.renderClosedWithOneLabelAndIcon(label, icon);
+            }
+            else if (label && !icon) {
+                return this.renderClosedWithOneLabel(label);
+            }
+            else if (!label && icon) {
+                return this.renderClosedWithOneIcon(icon);
+            }
+            return null;
+        };
+        this.renderClosedWithMany = () => {
+            const { selectedManyDescription } = this.props;
+            const styles = this.getStyles();
+            return (React.createElement(react_native_1.View, { style: styles.rowView },
+                React.createElement(react_native_1.Text, { style: styles.text }, selectedManyDescription),
+                React.createElement(FontAwesome_1.default, { name: "caret-down", style: styles.seta })));
+        };
+        this.renderClosedMultiSelect = (items, numOptions) => {
+            if (items.length === 0) {
+                return this.renderClosedWithNone();
+            }
+            else if (items.length === numOptions) {
+                return this.renderClosedWithAll();
+            }
+            else if (items.length === 1) {
+                return this.renderClosedWithOne(items[0].label, items[0].icon);
+            }
+            else {
+                return this.renderClosedWithMany();
+            }
+        };
+        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
+                },
+                label: {
+                    color: theme.textColor2,
+                    fontFamily: theme.fontFamily2,
+                    fontSize: (0, layout_1.isTablet)() ? 15 : 12,
+                    lineHeight: 16
+                },
+                textView: {
+                    flexDirection: 'column',
+                    justifyContent: 'center'
+                },
+                text: {
+                    height: 27,
+                    alignSelf: 'flex-start',
+                    color: theme.textColor1,
+                    fontFamily: theme.fontFamily1,
+                    fontSize: 16
+                },
+                seta: {
+                    color: theme.textColor1,
+                    fontSize: 16,
+                    position: 'absolute',
+                    bottom: 0,
+                    right: 0
+                },
+                modalOverlay: {
+                    justifyContent: 'center',
+                    paddingBottom: 16,
+                    paddingTop: 16
+                },
+                modalContainer: {
+                    borderRadius: 5,
+                    backgroundColor: theme.backgroundColor1,
+                    margin: 16
+                },
+                emptyMessageContainer: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingHorizontal: 16
+                },
+                readonly: {
+                    backgroundColor: theme.disabledColor
+                },
+                icon: {
+                    fontSize: 26
+                },
+                rowView: {
+                    flexDirection: 'row'
+                },
+                iconView: {
+                    width: 50,
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                iconOnly: {
+                    fontSize: 30,
+                    paddingLeft: 16
+                },
+                buttonCancelar: {
+                    flex: 1,
+                    backgroundColor: theme.backgroundColor1
+                },
+                buttonOk: {
+                    flex: 1
+                },
+                buttons: {
+                    flexDirection: 'row',
+                    padding: 16
+                }
+            });
+            return styles;
+        };
+    }
+    render() {
+        const { modalOpen, selectedValues, selectedValuesInitial } = this.state;
+        const { label, items, emptyMessage, disabled, iconComponent, okButtonDescription, cancelButtonDescription } = this.props;
+        const selectedItems = items.filter(x => selectedValues.includes(x.value));
+        const styles = this.getStyles();
+        const theme = (0, theme_1.getTheme)();
+        return (React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: () => this.setState({ modalOpen: true }), disabled: disabled },
+            React.createElement(react_native_1.View, { style: [styles.container, disabled ? styles.readonly : null] },
+                React.createElement(react_native_1.Text, { style: styles.label }, label),
+                this.renderClosedMultiSelect(selectedItems, items.length),
+                React.createElement(Modal_1.Modal, { visible: modalOpen, overlayStyle: styles.modalOverlay },
+                    React.createElement(react_native_1.View, { style: [
+                            styles.modalContainer,
+                            react_native_1.Platform.OS === 'web' && {
+                                margin: 'auto',
+                                width: '90%',
+                                maxWidth: 450,
+                                justifyContent: 'center',
+                                marginBottom: '10px',
+                                marginTop: '10px'
+                            }
+                        ] },
+                        items.length > 0 ? (React.createElement(react_native_1.FlatList, { data: items, initialNumToRender: items.length, keyExtractor: item => item.value.toString(), extraData: selectedValues, renderItem: ({ item }) => {
+                                return (React.createElement(MultiSelectItem, { label: item.label, value: item.value, icon: item.icon, iconComponent: iconComponent, handleAdd: value => this.handleAddValue(value), handleRemove: value => this.handleRemoveValue(value), checked: selectedValues.includes(item.value) }));
+                            } })) : (React.createElement(react_native_1.View, { style: styles.emptyMessageContainer },
+                            React.createElement(FontAwesome_1.default, { name: "warning", color: theme.warningColor, size: 24 }),
+                            React.createElement(react_native_1.Text, { style: styles.text }, emptyMessage))),
+                        React.createElement(react_native_1.View, { style: styles.buttons },
+                            React.createElement(Button_1.Button, { text: cancelButtonDescription || 'Cancelar', style: styles.buttonCancelar, primary: false, onPress: () => {
+                                    this.setState({
+                                        modalOpen: false,
+                                        selectedValues: selectedValuesInitial
+                                    });
+                                } }),
+                            React.createElement(Space_1.Space, { width: 20 }),
+                            React.createElement(Button_1.Button, { text: okButtonDescription || 'Ok', style: styles.buttonOk, onPress: this.handleSave })))))));
+    }
+}
+exports.MultiSelect = MultiSelect;
+MultiSelect.defaultProps = {
+    emptyMessage: 'Não há registros cadastrados',
+    selectedAllDescription: 'Todos',
+    selectedManyDescription: 'Vários',
+    selectedNoneDescription: 'Nenhum',
+    okButtonDescription: 'Ok',
+    cancelButtonDescription: 'Cancelar'
+};

package/lib/components/NoRecordMessage.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+interface NoRecordMessageProps {
+    visible: boolean;
+    message: string;
+}
+export declare class NoRecordMessage extends React.Component<NoRecordMessageProps> {
+    getStyles: () => {
+        text: {
+            fontSize: number;
+            color: string;
+            textAlign: "center";
+        };
+        icon: {
+            color: string;
+        };
+        view: {
+            alignItems: "center";
+            marginTop: number;
+        };
+    };
+    render(): JSX.Element;
+}
+export {};

package/lib/components/NoRecordMessage.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoRecordMessage = void 0;
+const React = require("react");
+const react_native_1 = require("react-native");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const layout_1 = require("../modules/layout");
+const Space_1 = require("./Space");
+class NoRecordMessage extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            return react_native_1.StyleSheet.create({
+                text: {
+                    fontSize: (0, layout_1.isTablet)() ? 28 : 18,
+                    color: '#969696',
+                    textAlign: 'center'
+                },
+                icon: { color: '#969696' },
+                view: { alignItems: 'center', marginTop: 25 }
+            });
+        };
+    }
+    render() {
+        const { visible, message } = this.props;
+        if (!visible) {
+            return React.createElement(React.Fragment, null);
+        }
+        const styles = this.getStyles();
+        return (React.createElement(react_native_1.View, { style: styles.view },
+            React.createElement(FontAwesome_1.default, { name: 'exclamation-triangle', size: (0, layout_1.isTablet)() ? 80 : 60, style: styles.icon }),
+            React.createElement(Space_1.Space, { height: 5 }),
+            React.createElement(react_native_1.Text, { style: styles.text }, message)));
+    }
+}
+exports.NoRecordMessage = NoRecordMessage;

package/lib/components/Question.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+export interface QuestionProperties {
+    message: string;
+    visible: boolean;
+    nativeID?: string;
+    textStyle?: StyleProp<TextStyle>;
+    buttonOrder: 'ok,cancel' | 'cancel,ok';
+    okButton: QuestionButtonProperties;
+    cancelButton: QuestionButtonProperties;
+}
+export interface QuestionButtonProperties {
+    text: string;
+    onPress: () => void;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    nativeID?: string;
+}
+export declare class Question extends React.Component<QuestionProperties> {
+    static defaultProps: {
+        buttonOrder: string;
+    };
+    getStyles: () => {
+        botoesAcao: {
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "space-evenly";
+            width: string;
+        };
+        overlay: {
+            flex: number;
+            backgroundColor: string;
+            alignItems: "center";
+        };
+        text: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+            textAlign: "center";
+            marginTop: number;
+            width: string;
+        };
+        container: {
+            backgroundColor: string;
+            borderRadius: number;
+            padding: number;
+            width: number;
+            marginTop: number;
+            alignItems: "center";
+        };
+        icon: {
+            color: string;
+            fontSize: number;
+        };
+    };
+    render(): JSX.Element;
+}

package/lib/components/Question.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Question = void 0;
+const React = require("react");
+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");
+const test_1 = require("../modules/test");
+class Question extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, 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: (0, layout_1.isTablet)() ? 25 : 16,
+                    textAlign: 'center',
+                    marginTop: (0, layout_1.isTablet)() ? 15 : 5,
+                    width: '100%'
+                },
+                container: {
+                    backgroundColor: theme.backgroundColor1,
+                    borderRadius: 6,
+                    padding: (0, layout_1.isTablet)() ? 25 : 16,
+                    width: (0, layout_1.isTablet)() ? 350 : 250,
+                    marginTop: (0, layout_1.isTablet)() ? 250 : 140,
+                    alignItems: 'center'
+                },
+                icon: {
+                    color: theme.textColor3,
+                    fontSize: (0, layout_1.isTablet)() ? 52 : 42
+                }
+            });
+            return styles;
+        };
+    }
+    render() {
+        const { message, textStyle, visible, nativeID, buttonOrder, okButton, cancelButton } = this.props;
+        const styles = this.getStyles();
+        const [leftButtonProps, rightButtonProps] = buttonOrder === 'ok,cancel'
+            ? [okButton, cancelButton]
+            : [cancelButton, okButton];
+        return (React.createElement(react_native_1.Modal, { 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, textStyle], nativeID: nativeID + '-message', testID: (0, test_1.getTestID)(nativeID + '-message') }, message),
+                    React.createElement(Space_1.Space, null),
+                    React.createElement(react_native_1.View, { style: styles.botoesAcao },
+                        React.createElement(Button_1.Button, { text: leftButtonProps.text, onPress: leftButtonProps.onPress, style: [
+                                { flex: 1, marginRight: (0, layout_1.isTablet)() ? 13 : 8 },
+                                leftButtonProps.style
+                            ], textStyle: leftButtonProps.textStyle, primary: buttonOrder === 'ok,cancel', nativeID: leftButtonProps.nativeID }),
+                        React.createElement(Button_1.Button, { text: rightButtonProps.text, onPress: rightButtonProps.onPress, style: [
+                                { flex: 1, marginLeft: (0, layout_1.isTablet)() ? 13 : 8 },
+                                rightButtonProps.style
+                            ], textStyle: rightButtonProps.textStyle, primary: buttonOrder === 'cancel,ok', nativeID: rightButtonProps.nativeID }))))));
+    }
+}
+exports.Question = Question;
+Question.defaultProps = {
+    buttonOrder: 'cancel,ok'
+};

package/lib/components/RadioButton.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+export interface RadioButtonProps {
+    items: Array<{
+        label: string;
+        value: number;
+        nativeID?: string;
+    }>;
+    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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioButton = void 0;
+const React = require("react");
+const react_native_1 = require("react-native");
+const test_1 = require("../modules/test");
+const theme_1 = require("../modules/theme");
+class RadioButton extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = (0, 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), testID: (0, test_1.getTestID)(item.nativeID) },
+            React.createElement(react_native_1.View, { style: styles.radioContainer, nativeID: item.nativeID },
+                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;