diff --git a/src/index.js b/src/index.js index 52d42f1..7814c5b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,16 +1,16 @@ -import React, { memo, useState, useEffect } from 'react'; +import React, { memo, useState, useEffect } from "react"; import { View, Text, Image, TouchableWithoutFeedback, ActivityIndicator, -} from 'react-native'; -import PropTypes from 'prop-types'; +} from "react-native"; +import PropTypes from "prop-types"; -import styles from './styles'; +import styles from "./styles"; -import iconDropdown from './images/icon-dropdown.png'; +import iconDropdown from "./images/icon-dropdown.png"; const AppSelect = ({ items, @@ -26,6 +26,8 @@ const AppSelect = ({ placeholderContainerStyle, placeholderStyle, textOptionStyle, + roundCheckbox, + roundCheckboxCore, loadingStyle, iconStyle, iconDropdownComponent, @@ -38,15 +40,17 @@ const AppSelect = ({ setOptionSelected(defaultValue); }, [defaultValue]); - const objSelected = items.find((item) => ( - item[valueKey] ? item[valueKey].toString() === optionSelected.toString() : null - )); + const objSelected = items.find((item) => + item[valueKey] + ? item[valueKey].toString() === optionSelected.toString() + : null + ); const onSelectOption = (item) => () => { onChange(item[valueKey]); setOptionSelected(item[valueKey]); - if (theme === 'dropdown') { + if (theme === "dropdown") { setShowOptionsBox(false); } }; @@ -59,54 +63,56 @@ const AppSelect = ({ const IconDropdownComponent = (() => iconDropdownComponent)(); - const optionsList = loading - ? ( - - ) - : ( - items.map((item) => { - const isSelected = item[valueKey] - && (item[valueKey].toString() === optionSelected.toString()); - - return ( - - - - {isSelected && ( - - )} - - - + ) : ( + items.map((item) => { + const isSelected = + item[valueKey] && + item[valueKey].toString() === optionSelected.toString(); + + return ( + + + + {isSelected && ( + + )} + + + - {item[labelKey]} - - - - ); - }) - ); + > + {item[labelKey]} + + + + ); + }) + ); - if (theme === 'dropdown') { + if (theme === "dropdown") { comp = ( <> @@ -116,47 +122,32 @@ const AppSelect = ({ - { - iconDropdownComponent ? ( - - ) : ( - - ) - } + {iconDropdownComponent ? ( + + ) : ( + + )} - { - showOptionsBox && ( - - {optionsList} - - ) - } + {showOptionsBox && {optionsList}} ); } else { comp = optionsList; } - return ( - - {comp} - - ); + return {comp}; }; AppSelect.propTypes = { items: PropTypes.instanceOf(Array), - theme: PropTypes.oneOf(['simple', 'dropdown']), + theme: PropTypes.oneOf(["simple", "dropdown"]), valueKey: PropTypes.string, labelKey: PropTypes.string, placeholder: PropTypes.string, - defaultValue: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number, - ]), + defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), loading: PropTypes.bool, disabled: PropTypes.bool, containerStyle: PropTypes.instanceOf(Object), @@ -164,6 +155,8 @@ AppSelect.propTypes = { placeholderContainerStyle: PropTypes.instanceOf(Object), placeholderStyle: PropTypes.instanceOf(Object), textOptionStyle: PropTypes.instanceOf(Object), + roundCheckbox: PropTypes.instanceOf(Object), + roundCheckboxCore: PropTypes.instanceOf(Object), loadingStyle: PropTypes.instanceOf(Object), iconStyle: PropTypes.instanceOf(Object), iconDropdownComponent: PropTypes.func, @@ -172,11 +165,11 @@ AppSelect.propTypes = { AppSelect.defaultProps = { items: [], - theme: 'simple', - valueKey: 'value', - labelKey: 'label', - placeholder: '', - defaultValue: '', + theme: "simple", + valueKey: "value", + labelKey: "label", + placeholder: "", + defaultValue: "", loading: false, disabled: false, containerStyle: null, @@ -186,8 +179,10 @@ AppSelect.defaultProps = { textOptionStyle: null, loadingStyle: null, iconStyle: null, + roundCheckbox: null, + roundCheckboxCore: null, iconDropdownComponent: null, - onChange: () => { }, + onChange: () => {}, }; export default memo(AppSelect);