├── .eslintrc.js ├── .gitattributes ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── assets └── screenshots │ ├── android │ ├── androidDateCalendar.gif │ ├── androidDateRange.gif │ ├── androidDateSpinner.gif │ ├── androidList.gif │ ├── androidState.gif │ ├── androidTimeClock.gif │ └── androidTimeSpinner.gif │ └── ios │ ├── iosDate.gif │ ├── iosDateRange.gif │ ├── iosDateTime.gif │ ├── iosList.gif │ ├── iosState.gif │ └── iosTime.gif ├── dist ├── components │ ├── dropdowns │ │ ├── DropdownList.d.ts │ │ ├── DropdownList.js │ │ ├── DropdownMeasurements.d.ts │ │ ├── DropdownMeasurements.js │ │ ├── DropdownNumber.d.ts │ │ ├── DropdownNumber.js │ │ ├── DropdownState.d.ts │ │ └── DropdownState.js │ └── pickers │ │ ├── PickerDate.d.ts │ │ ├── PickerDate.js │ │ ├── PickerDateRange.d.ts │ │ ├── PickerDateRange.js │ │ ├── PickerDateTime.d.ts │ │ ├── PickerDateTime.js │ │ ├── PickerTime.d.ts │ │ └── PickerTime.js ├── index.d.ts ├── index.js ├── tsconfig.tsbuildinfo └── types │ ├── types.d.ts │ └── types.js ├── package-lock.json ├── package.json ├── src ├── components │ ├── dropdowns │ │ ├── DropdownList.tsx │ │ ├── DropdownMeasurements.tsx │ │ ├── DropdownNumber.tsx │ │ └── DropdownState.tsx │ └── pickers │ │ ├── PickerDate.tsx │ │ ├── PickerDateRange.tsx │ │ ├── PickerDateTime.tsx │ │ └── PickerTime.tsx ├── index.tsx └── types │ └── types.tsx └── tsconfig.json /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | 24 | # Android/IntelliJ 25 | # 26 | build/ 27 | .idea 28 | .gradle 29 | local.properties 30 | *.iml 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | yarn-error.log 37 | 38 | # BUCK 39 | buck-out/ 40 | \.buckd/ 41 | *.keystore 42 | !debug.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | */fastlane/report.xml 52 | */fastlane/Preview.html 53 | */fastlane/screenshots 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | 58 | # CocoaPods 59 | /ios/Pods/ 60 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Node Modules 2 | **/node_modules 3 | node_modules 4 | 5 | # Assets 6 | assets 7 | 8 | # Example App 9 | ExampleApp -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Jeff Lewis 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /assets/screenshots/android/androidDateCalendar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/002850a30099c3a38bed122fd029628d4e16f2c1/assets/screenshots/android/androidDateCalendar.gif -------------------------------------------------------------------------------- /assets/screenshots/android/androidDateRange.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/002850a30099c3a38bed122fd029628d4e16f2c1/assets/screenshots/android/androidDateRange.gif -------------------------------------------------------------------------------- /assets/screenshots/android/androidDateSpinner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/002850a30099c3a38bed122fd029628d4e16f2c1/assets/screenshots/android/androidDateSpinner.gif -------------------------------------------------------------------------------- /assets/screenshots/android/androidList.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/002850a30099c3a38bed122fd029628d4e16f2c1/assets/screenshots/android/androidList.gif -------------------------------------------------------------------------------- /assets/screenshots/android/androidState.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/002850a30099c3a38bed122fd029628d4e16f2c1/assets/screenshots/android/androidState.gif -------------------------------------------------------------------------------- /assets/screenshots/android/androidTimeClock.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/002850a30099c3a38bed122fd029628d4e16f2c1/assets/screenshots/android/androidTimeClock.gif -------------------------------------------------------------------------------- /assets/screenshots/android/androidTimeSpinner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/002850a30099c3a38bed122fd029628d4e16f2c1/assets/screenshots/android/androidTimeSpinner.gif -------------------------------------------------------------------------------- /assets/screenshots/ios/iosDate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/002850a30099c3a38bed122fd029628d4e16f2c1/assets/screenshots/ios/iosDate.gif -------------------------------------------------------------------------------- /assets/screenshots/ios/iosDateRange.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/002850a30099c3a38bed122fd029628d4e16f2c1/assets/screenshots/ios/iosDateRange.gif -------------------------------------------------------------------------------- /assets/screenshots/ios/iosDateTime.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/002850a30099c3a38bed122fd029628d4e16f2c1/assets/screenshots/ios/iosDateTime.gif -------------------------------------------------------------------------------- /assets/screenshots/ios/iosList.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/002850a30099c3a38bed122fd029628d4e16f2c1/assets/screenshots/ios/iosList.gif -------------------------------------------------------------------------------- /assets/screenshots/ios/iosState.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/002850a30099c3a38bed122fd029628d4e16f2c1/assets/screenshots/ios/iosState.gif -------------------------------------------------------------------------------- /assets/screenshots/ios/iosTime.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/002850a30099c3a38bed122fd029628d4e16f2c1/assets/screenshots/ios/iosTime.gif -------------------------------------------------------------------------------- /dist/components/dropdowns/DropdownList.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ContainerStyle, LabelTextStyle, FieldTextStyle, CancelTextStyle, DoneTextStyle, ModalHeaderContainerStyle, ModalContentContainerStyle, PickerItemTextStyle, PickerItem } from '../../types/types'; 3 | interface Props { 4 | items: Array; 5 | onChange: (value: string) => void; 6 | title?: string; 7 | defaultValue?: string; 8 | darkMode?: boolean; 9 | customStyleContainer?: ContainerStyle; 10 | customStyleLabelText?: LabelTextStyle; 11 | customStyleFieldText?: FieldTextStyle; 12 | customStyleModalHeaderContainer?: ModalHeaderContainerStyle; 13 | customStyleCancelText?: CancelTextStyle; 14 | customStyleDoneText?: DoneTextStyle; 15 | customStyleModalContentContainer?: ModalContentContainerStyle; 16 | customStylePickerItemText?: PickerItemTextStyle; 17 | } 18 | declare const DropdownList: React.FC; 19 | export default DropdownList; 20 | -------------------------------------------------------------------------------- /dist/components/dropdowns/DropdownList.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __importDefault = (this && this.__importDefault) || function (mod) { 3 | return (mod && mod.__esModule) ? mod : { "default": mod }; 4 | }; 5 | Object.defineProperty(exports, "__esModule", { value: true }); 6 | const jsx_runtime_1 = require("react/jsx-runtime"); 7 | const react_1 = require("react"); 8 | const react_native_1 = require("react-native"); 9 | const picker_1 = require("@react-native-picker/picker"); 10 | const react_native_modal_1 = __importDefault(require("react-native-modal")); 11 | ; 12 | // Screen Dimensions 13 | const { height, width } = react_native_1.Dimensions.get('window'); 14 | // Component: Dropdown (List) 15 | const DropdownList = (props) => { 16 | // React Hooks: State 17 | const [modalVisible, toggle] = react_1.useState(false); 18 | const [tempValue, setTempValue] = react_1.useState(''); 19 | const [value, setValue] = react_1.useState(''); 20 | // React Hooks: Lifecycle Method 21 | react_1.useEffect(() => { 22 | // Check If Default Value Exists 23 | if (props.defaultValue) { 24 | setValue(props.defaultValue); 25 | } 26 | else { 27 | // Set State 28 | setValue('Select'); 29 | } 30 | }, [props.defaultValue]); 31 | // Render Container Style 32 | const renderContainerStyle = () => { 33 | // Dark Mode 34 | if (props.darkMode) { 35 | return ({ 36 | display: 'flex', 37 | width: width - 32, 38 | marginLeft: 16, 39 | paddingRight: 16, 40 | paddingBottom: 12, 41 | marginBottom: 12, 42 | borderColor: props.customStyleContainer?.containerDark.borderColor ? props.customStyleContainer.containerDark.borderColor : '#8D8D93', 43 | borderBottomWidth: props.customStyleContainer?.containerDark.borderBottomWidth ? props.customStyleContainer.containerDark.borderBottomWidth : react_native_1.StyleSheet.hairlineWidth, 44 | backgroundColor: props.customStyleContainer?.containerDark.backgroundColor ? props.customStyleContainer.containerDark.backgroundColor : undefined, 45 | }); 46 | } 47 | // Light Mode 48 | else { 49 | return ({ 50 | display: 'flex', 51 | width: width - 32, 52 | marginLeft: 16, 53 | paddingRight: 16, 54 | paddingBottom: 12, 55 | marginBottom: 12, 56 | borderColor: props.customStyleContainer?.containerLight.borderColor ? props.customStyleContainer.containerLight.borderColor : '#8A8A8E', 57 | borderBottomWidth: props.customStyleContainer?.containerLight.borderBottomWidth ? props.customStyleContainer.containerLight.borderBottomWidth : react_native_1.StyleSheet.hairlineWidth, 58 | backgroundColor: props.customStyleContainer?.containerLight.backgroundColor ? props.customStyleContainer.containerLight.backgroundColor : undefined, 59 | }); 60 | } 61 | }; 62 | // Render Label Text Style 63 | const renderLabelTextStyle = () => { 64 | // Dark Mode 65 | if (props.darkMode) { 66 | return ({ 67 | fontFamily: props.customStyleLabelText?.labelTextDark.fontFamily ? props.customStyleLabelText.labelTextDark.fontFamily : 'System', 68 | fontSize: props.customStyleLabelText?.labelTextDark.fontSize ? props.customStyleLabelText.labelTextDark.fontSize : 11, 69 | fontWeight: props.customStyleLabelText?.labelTextDark.fontWeight ? props.customStyleLabelText.labelTextDark.fontWeight : '600', 70 | textTransform: props.customStyleLabelText?.labelTextDark.textTransform ? props.customStyleLabelText.labelTextDark.textTransform : 'uppercase', 71 | color: props.customStyleLabelText?.labelTextDark.color ? props.customStyleLabelText.labelTextDark.color : '#8D8D93', 72 | marginBottom: 7, 73 | }); 74 | } 75 | // Light Mode 76 | else { 77 | return ({ 78 | fontFamily: props.customStyleLabelText?.labelTextLight.fontFamily ? props.customStyleLabelText.labelTextLight.fontFamily : 'System', 79 | fontSize: props.customStyleLabelText?.labelTextLight.fontSize ? props.customStyleLabelText.labelTextLight.fontSize : 11, 80 | fontWeight: props.customStyleLabelText?.labelTextLight.fontWeight ? props.customStyleLabelText.labelTextLight.fontWeight : '600', 81 | textTransform: props.customStyleLabelText?.labelTextLight.textTransform ? props.customStyleLabelText.labelTextLight.textTransform : 'uppercase', 82 | color: props.customStyleLabelText?.labelTextLight.color ? props.customStyleLabelText.labelTextLight.color : '#8A8A8E', 83 | marginBottom: 7, 84 | }); 85 | } 86 | }; 87 | // Render Field Text Style 88 | const renderFieldTextStyle = () => { 89 | // Dark Mode 90 | if (props.darkMode) { 91 | return ({ 92 | fontFamily: props.customStyleFieldText?.fieldTextDark.fontFamily ? props.customStyleFieldText.fieldTextDark.fontFamily : 'System', 93 | fontSize: props.customStyleFieldText?.fieldTextDark.fontSize ? props.customStyleFieldText.fieldTextDark.fontSize : 17, 94 | fontWeight: props.customStyleFieldText?.fieldTextDark.fontWeight ? props.customStyleFieldText.fieldTextDark.fontWeight : '400', 95 | color: props.customStyleFieldText?.fieldTextDark.color ? props.customStyleFieldText.fieldTextDark.color : '#FFFFFF', 96 | alignSelf: 'center', 97 | }); 98 | } 99 | // Light Mode 100 | else { 101 | return ({ 102 | fontFamily: props.customStyleFieldText?.fieldTextLight.fontFamily ? props.customStyleFieldText.fieldTextLight.fontFamily : 'System', 103 | fontSize: props.customStyleFieldText?.fieldTextLight.fontSize ? props.customStyleFieldText.fieldTextLight.fontSize : 17, 104 | fontWeight: props.customStyleFieldText?.fieldTextLight.fontWeight ? props.customStyleFieldText.fieldTextLight.fontWeight : '400', 105 | color: props.customStyleFieldText?.fieldTextLight.color ? props.customStyleFieldText.fieldTextLight.color : '#000000', 106 | alignSelf: 'center', 107 | }); 108 | } 109 | }; 110 | // Render Modal Header Container Style 111 | const renderModalHeaderContainerStyle = () => { 112 | // Dark Mode 113 | if (props.darkMode) { 114 | return ({ 115 | display: 'flex', 116 | flexDirection: 'row', 117 | justifyContent: 'space-between', 118 | alignItems: 'center', 119 | width: width, 120 | height: props.customStyleModalHeaderContainer?.modalHeaderContainerDark.height ? props.customStyleModalHeaderContainer.modalHeaderContainerDark.height : 45, 121 | backgroundColor: props.customStyleModalHeaderContainer?.modalHeaderContainerDark.backgroundColor ? props.customStyleModalHeaderContainer.modalHeaderContainerDark.backgroundColor : '#383838', 122 | borderColor: props.customStyleModalHeaderContainer?.modalHeaderContainerDark.borderColor ? props.customStyleModalHeaderContainer.modalHeaderContainerDark.borderColor : '#E9E9EB', 123 | borderBottomWidth: props.customStyleModalHeaderContainer?.modalHeaderContainerDark.borderBottomWidth ? props.customStyleModalHeaderContainer.modalHeaderContainerDark.borderBottomWidth : react_native_1.StyleSheet.hairlineWidth, 124 | }); 125 | } 126 | // Light Mode 127 | else { 128 | return ({ 129 | display: 'flex', 130 | flexDirection: 'row', 131 | justifyContent: 'space-between', 132 | alignItems: 'center', 133 | width: width, 134 | height: props.customStyleModalHeaderContainer?.modalHeaderContainerLight.height ? props.customStyleModalHeaderContainer.modalHeaderContainerLight.height : 45, 135 | backgroundColor: props.customStyleModalHeaderContainer?.modalHeaderContainerLight.backgroundColor ? props.customStyleModalHeaderContainer.modalHeaderContainerLight.backgroundColor : '#FFFFFF', 136 | borderColor: props.customStyleModalHeaderContainer?.modalHeaderContainerLight.borderColor ? props.customStyleModalHeaderContainer.modalHeaderContainerLight.borderColor : '#CED4DA', 137 | borderBottomWidth: props.customStyleModalHeaderContainer?.modalHeaderContainerLight.borderBottomWidth ? props.customStyleModalHeaderContainer.modalHeaderContainerLight.borderBottomWidth : react_native_1.StyleSheet.hairlineWidth, 138 | }); 139 | } 140 | }; 141 | // Render Cancel Text Style 142 | const renderCancelTextStyle = () => { 143 | // Dark Mode 144 | if (props.darkMode) { 145 | return ({ 146 | marginLeft: 16, 147 | fontFamily: props.customStyleCancelText?.cancelTextDark.fontFamily ? props.customStyleCancelText.cancelTextDark.fontFamily : 'System', 148 | color: props.customStyleCancelText?.cancelTextDark.color ? props.customStyleCancelText.cancelTextDark.color : '#0884FE', 149 | fontWeight: props.customStyleCancelText?.cancelTextDark.fontWeight ? props.customStyleCancelText.cancelTextDark.fontWeight : '400', 150 | fontSize: props.customStyleCancelText?.cancelTextDark.fontSize ? props.customStyleCancelText.cancelTextDark.fontSize : 17, 151 | }); 152 | } 153 | // Light Mode 154 | else { 155 | return ({ 156 | marginLeft: 16, 157 | fontFamily: props.customStyleCancelText?.cancelTextLight.fontFamily ? props.customStyleCancelText.cancelTextLight.fontFamily : 'System', 158 | color: props.customStyleCancelText?.cancelTextLight.color ? props.customStyleCancelText.cancelTextLight.color : '#007AFF', 159 | fontWeight: props.customStyleCancelText?.cancelTextLight.fontWeight ? props.customStyleCancelText.cancelTextLight.fontWeight : '400', 160 | fontSize: props.customStyleCancelText?.cancelTextLight.fontSize ? props.customStyleCancelText.cancelTextLight.fontSize : 17, 161 | }); 162 | } 163 | }; 164 | // Render Done Text Style 165 | const renderDoneTextStyle = () => { 166 | // Dark Mode 167 | if (props.darkMode) { 168 | return props.customStylePickerItemText?.pickerItemTextDark.color ? props.customStylePickerItemText.pickerItemTextDark.color : '#0884FE'; 169 | } 170 | // Light Mode 171 | else { 172 | return props.customStylePickerItemText?.pickerItemTextLight.color ? props.customStylePickerItemText.pickerItemTextLight.color : '#007AFF'; 173 | } 174 | }; 175 | // Render Modal Content Container Style 176 | const renderModalContentContainerStyle = () => { 177 | // Dark Mode 178 | if (props.darkMode) { 179 | return ({ 180 | width: width, 181 | height: props.customStyleModalContentContainer?.modalContentContainerDark.height ? props.customStyleModalContentContainer.modalContentContainerDark.height : 250, 182 | backgroundColor: props.customStyleModalContentContainer?.modalContentContainerDark.backgroundColor ? props.customStyleModalContentContainer.modalContentContainerDark.backgroundColor : '#121312', 183 | }); 184 | } 185 | // Light Mode 186 | else { 187 | return ({ 188 | width: width, 189 | height: props.customStyleModalContentContainer?.modalContentContainerLight.height ? props.customStyleModalContentContainer.modalContentContainerLight.height : 250, 190 | backgroundColor: props.customStyleModalContentContainer?.modalContentContainerLight.backgroundColor ? props.customStyleModalContentContainer.modalContentContainerLight.backgroundColor : '#FFFFFF', 191 | }); 192 | } 193 | }; 194 | // Render Picker Item Text Style 195 | const renderPickerItemStyle = () => { 196 | // Dark Mode 197 | if (props.darkMode) { 198 | return ({ 199 | color: props.customStylePickerItemText?.pickerItemTextDark.color ? props.customStylePickerItemText.pickerItemTextDark.color : '#FFFFFF', 200 | }); 201 | } 202 | // Light Mode 203 | else { 204 | return ({ 205 | color: props.customStylePickerItemText?.pickerItemTextLight.color ? props.customStylePickerItemText.pickerItemTextLight.color : '#000000', 206 | }); 207 | } 208 | }; 209 | // Toggle Modal 210 | const toggleModal = () => { 211 | // Platform: iOS 212 | if (react_native_1.Platform.OS === 'ios') { 213 | // React Hook: Toggle Modal 214 | toggle((modalVisible) => !modalVisible); 215 | } 216 | }; 217 | // Press Cancel 218 | const pressCancel = () => { 219 | // Set State 220 | setTempValue(value); 221 | // Toggle Modal 222 | toggleModal(); 223 | }; 224 | // Press Done 225 | const pressDone = () => { 226 | // Set State 227 | setValue(tempValue); 228 | // Props: onChange 229 | props.onChange(tempValue); 230 | // Toggle Modal 231 | toggleModal(); 232 | }; 233 | // Select Value 234 | const selectValue = (value) => { 235 | // Platform: iOS 236 | if (react_native_1.Platform.OS === 'ios') { 237 | // Set State 238 | setTempValue(value); 239 | } 240 | // Platform: Android 241 | else if (react_native_1.Platform.OS === 'android') { 242 | // Set State 243 | setValue(value); 244 | // Props: onChange 245 | props.onChange(value); 246 | } 247 | }; 248 | // Render Picker 249 | const renderPicker = () => { 250 | // Platform: iOS: 251 | if (react_native_1.Platform.OS === 'ios') { 252 | return (jsx_runtime_1.jsxs(react_native_1.View, Object.assign({ style: renderContainerStyle() }, { children: [jsx_runtime_1.jsx(react_native_1.View, Object.assign({ style: styles.labelContainer }, { children: jsx_runtime_1.jsx(react_native_1.Text, Object.assign({ style: renderLabelTextStyle() }, { children: props.title === undefined ? 'List' : props.title }), void 0) }), void 0), 253 | jsx_runtime_1.jsx(react_native_1.TouchableOpacity, Object.assign({ onPress: () => toggleModal(), style: styles.fieldTextContainer }, { children: jsx_runtime_1.jsx(react_native_1.Text, Object.assign({ style: renderFieldTextStyle(), numberOfLines: 1 }, { children: value ? value : 'Select' }), void 0) }), void 0), 254 | jsx_runtime_1.jsx(react_native_modal_1.default, Object.assign({ isVisible: modalVisible, style: styles.modal, backdropOpacity: .30 }, { children: jsx_runtime_1.jsxs(react_native_1.View, Object.assign({ style: styles.modalContainer }, { children: [jsx_runtime_1.jsxs(react_native_1.View, Object.assign({ style: renderModalHeaderContainerStyle() }, { children: [jsx_runtime_1.jsx(react_native_1.TouchableOpacity, Object.assign({ onPress: () => pressCancel() }, { children: jsx_runtime_1.jsx(react_native_1.Text, Object.assign({ style: renderCancelTextStyle() }, { children: "Cancel" }), void 0) }), void 0), 255 | jsx_runtime_1.jsx(react_native_1.View, Object.assign({ style: styles.doneButtonContainer }, { children: jsx_runtime_1.jsx(react_native_1.Button, { title: "Done", onPress: () => pressDone(), disabled: value === tempValue ? true : false, color: renderDoneTextStyle() }, void 0) }), void 0)] }), void 0), 256 | jsx_runtime_1.jsx(react_native_1.View, Object.assign({ style: renderModalContentContainerStyle() }, { children: jsx_runtime_1.jsx(picker_1.Picker, Object.assign({ selectedValue: tempValue !== undefined ? tempValue : value, onValueChange: (value) => selectValue(value) }, { children: props.items.map((item, i) => { 257 | return (jsx_runtime_1.jsx(picker_1.Picker.Item, { label: item.label, value: item.value, color: renderPickerItemStyle() }, i)); 258 | }) }), void 0) }), void 0)] }), void 0) }), void 0)] }), void 0)); 259 | } 260 | // Platform: Android 261 | else if (react_native_1.Platform.OS === 'android') { 262 | return (jsx_runtime_1.jsxs(react_native_1.View, Object.assign({ style: renderContainerStyle() }, { children: [jsx_runtime_1.jsx(react_native_1.View, Object.assign({ style: styles.labelContainer }, { children: jsx_runtime_1.jsx(react_native_1.Text, Object.assign({ style: renderLabelTextStyle() }, { children: props.title }), void 0) }), void 0), 263 | jsx_runtime_1.jsx(picker_1.Picker, Object.assign({ mode: "dropdown", selectedValue: value, style: { height: 60, width: width - 16 }, onValueChange: (value) => setValue(value) }, { children: props.items.map((item, i) => { 264 | return (jsx_runtime_1.jsx(picker_1.Picker.Item, { label: item.label, value: item.value, color: renderPickerItemStyle() }, i)); 265 | }) }), void 0)] }), void 0)); 266 | } 267 | }; 268 | return (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: renderPicker() }, void 0)); 269 | }; 270 | // Styles 271 | const styles = react_native_1.StyleSheet.create({ 272 | modal: { 273 | margin: 0, 274 | }, 275 | modalContainer: { 276 | height: '100%', 277 | alignItems: 'center', 278 | justifyContent: 'flex-end', 279 | }, 280 | doneButtonContainer: { 281 | marginRight: 7, 282 | }, 283 | labelContainer: { 284 | width: width - 32, 285 | marginBottom: 4, 286 | }, 287 | fieldTextContainer: { 288 | display: 'flex', 289 | flexDirection: 'row', 290 | justifyContent: 'space-between', 291 | alignItems: 'center', 292 | }, 293 | }); 294 | // Exports 295 | exports.default = DropdownList; 296 | -------------------------------------------------------------------------------- /dist/components/dropdowns/DropdownMeasurements.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ContainerStyle, LabelTextStyle, FieldTextStyle, CancelTextStyle, DoneTextStyle, ModalHeaderContainerStyle, ModalContentContainerStyle, PickerItemTextStyle } from '../../types/types'; 3 | interface Props { 4 | onChange: (value: string) => void; 5 | title?: string; 6 | defaultValue?: string; 7 | darkMode?: boolean; 8 | customStyleContainer?: ContainerStyle; 9 | customStyleLabelText?: LabelTextStyle; 10 | customStyleFieldText?: FieldTextStyle; 11 | customStyleModalHeaderContainer?: ModalHeaderContainerStyle; 12 | customStyleCancelText?: CancelTextStyle; 13 | customStyleDoneText?: DoneTextStyle; 14 | customStyleModalContentContainer?: ModalContentContainerStyle; 15 | customStylePickerItemText?: PickerItemTextStyle; 16 | } 17 | declare const DropdownMeasurements: React.FC; 18 | export default DropdownMeasurements; 19 | -------------------------------------------------------------------------------- /dist/components/dropdowns/DropdownNumber.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ContainerStyle, LabelTextStyle, FieldTextStyle, CancelTextStyle, DoneTextStyle, ModalHeaderContainerStyle, ModalContentContainerStyle, PickerItemTextStyle } from '../../types/types'; 3 | interface Props { 4 | onChange: (value: string) => void; 5 | title?: string; 6 | defaultValue?: string; 7 | darkMode?: boolean; 8 | customStyleContainer?: ContainerStyle; 9 | customStyleLabelText?: LabelTextStyle; 10 | customStyleFieldText?: FieldTextStyle; 11 | customStyleModalHeaderContainer?: ModalHeaderContainerStyle; 12 | customStyleCancelText?: CancelTextStyle; 13 | customStyleDoneText?: DoneTextStyle; 14 | customStyleModalContentContainer?: ModalContentContainerStyle; 15 | customStylePickerItemText?: PickerItemTextStyle; 16 | } 17 | declare const DropdownNumber: React.FC; 18 | export default DropdownNumber; 19 | -------------------------------------------------------------------------------- /dist/components/dropdowns/DropdownState.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ContainerStyle, LabelTextStyle, FieldTextStyle, CancelTextStyle, DoneTextStyle, ModalHeaderContainerStyle, ModalContentContainerStyle, PickerItemTextStyle } from '../../types/types'; 3 | interface Props { 4 | onChange: (value: string) => void; 5 | title?: string; 6 | defaultValue?: string; 7 | darkMode?: boolean; 8 | customStyleContainer?: ContainerStyle; 9 | customStyleLabelText?: LabelTextStyle; 10 | customStyleFieldText?: FieldTextStyle; 11 | customStyleModalHeaderContainer?: ModalHeaderContainerStyle; 12 | customStyleCancelText?: CancelTextStyle; 13 | customStyleDoneText?: DoneTextStyle; 14 | customStyleModalContentContainer?: ModalContentContainerStyle; 15 | customStylePickerItemText?: PickerItemTextStyle; 16 | } 17 | declare const DropdownUnitedStates: React.FC; 18 | export default DropdownUnitedStates; 19 | -------------------------------------------------------------------------------- /dist/components/dropdowns/DropdownState.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __importDefault = (this && this.__importDefault) || function (mod) { 3 | return (mod && mod.__esModule) ? mod : { "default": mod }; 4 | }; 5 | Object.defineProperty(exports, "__esModule", { value: true }); 6 | const jsx_runtime_1 = require("react/jsx-runtime"); 7 | const react_1 = require("react"); 8 | const react_native_1 = require("react-native"); 9 | const picker_1 = require("@react-native-picker/picker"); 10 | const react_native_modal_1 = __importDefault(require("react-native-modal")); 11 | ; 12 | // Screen Dimensions 13 | const { height, width } = react_native_1.Dimensions.get('window'); 14 | // Component: Dropdown (United States) 15 | const DropdownUnitedStates = (props) => { 16 | // React Hooks: State 17 | const [modalVisible, toggle] = react_1.useState(false); 18 | const [tempValue, setTempValue] = react_1.useState(''); 19 | const [value, setValue] = react_1.useState(''); 20 | // React Hooks: Lifecycle Method 21 | react_1.useEffect(() => { 22 | // Check If Default Value Exists 23 | if (props.defaultValue) { 24 | setValue(props.defaultValue); 25 | } 26 | else { 27 | // Set State 28 | setValue('Select'); 29 | } 30 | }, [props.defaultValue]); 31 | // United States 32 | const unitedStates = [ 33 | { label: 'AL', value: 'AL' }, 34 | { label: 'AK', value: 'AK' }, 35 | { label: 'AZ', value: 'AZ' }, 36 | { label: 'AR', value: 'AR' }, 37 | { label: 'CA', value: 'CA' }, 38 | { label: 'CO', value: 'CO' }, 39 | { label: 'CT', value: 'CT' }, 40 | { label: 'DE', value: 'DE' }, 41 | { label: 'FL', value: 'FL' }, 42 | { label: 'GA', value: 'GA' }, 43 | { label: 'HI', value: 'HI' }, 44 | { label: 'ID', value: 'ID' }, 45 | { label: 'IL', value: 'IL' }, 46 | { label: 'IN', value: 'IN' }, 47 | { label: 'IA', value: 'IA' }, 48 | { label: 'KS', value: 'KS' }, 49 | { label: 'KY', value: 'KY' }, 50 | { label: 'LA', value: 'LA' }, 51 | { label: 'ME', value: 'ME' }, 52 | { label: 'MD', value: 'MD' }, 53 | { label: 'MA', value: 'MA' }, 54 | { label: 'MI', value: 'MI' }, 55 | { label: 'MN', value: 'MN' }, 56 | { label: 'MS', value: 'MS' }, 57 | { label: 'MO', value: 'MO' }, 58 | { label: 'MT', value: 'MT' }, 59 | { label: 'NE', value: 'NE' }, 60 | { label: 'NV', value: 'NV' }, 61 | { label: 'NH', value: 'NH' }, 62 | { label: 'NJ', value: 'NJ' }, 63 | { label: 'NM', value: 'NM' }, 64 | { label: 'NY', value: 'NY' }, 65 | { label: 'NC', value: 'NC' }, 66 | { label: 'ND', value: 'ND' }, 67 | { label: 'OH', value: 'OH' }, 68 | { label: 'OK', value: 'OK' }, 69 | { label: 'OR', value: 'OR' }, 70 | { label: 'PA', value: 'PA' }, 71 | { label: 'RI', value: 'RI' }, 72 | { label: 'SC', value: 'SC' }, 73 | { label: 'SD', value: 'SD' }, 74 | { label: 'TN', value: 'TN' }, 75 | { label: 'TX', value: 'TX' }, 76 | { label: 'UT', value: 'UT' }, 77 | { label: 'VT', value: 'VT' }, 78 | { label: 'VA', value: 'VA' }, 79 | { label: 'WA', value: 'WA' }, 80 | { label: 'WV', value: 'WV' }, 81 | { label: 'WI', value: 'WI' }, 82 | { label: 'WY', value: 'WY' }, 83 | ]; 84 | // Render Container Style 85 | const renderContainerStyle = () => { 86 | // Dark Mode 87 | if (props.darkMode) { 88 | return ({ 89 | display: 'flex', 90 | width: width - 32, 91 | marginLeft: 16, 92 | paddingRight: 16, 93 | paddingBottom: 12, 94 | marginBottom: 12, 95 | borderColor: props.customStyleContainer?.containerDark.borderColor ? props.customStyleContainer.containerDark.borderColor : '#8D8D93', 96 | borderBottomWidth: props.customStyleContainer?.containerDark.borderBottomWidth ? props.customStyleContainer.containerDark.borderBottomWidth : react_native_1.StyleSheet.hairlineWidth, 97 | backgroundColor: props.customStyleContainer?.containerDark.backgroundColor ? props.customStyleContainer.containerDark.backgroundColor : undefined, 98 | }); 99 | } 100 | // Light Mode 101 | else { 102 | return ({ 103 | display: 'flex', 104 | width: width - 32, 105 | marginLeft: 16, 106 | paddingRight: 16, 107 | paddingBottom: 12, 108 | marginBottom: 12, 109 | borderColor: props.customStyleContainer?.containerLight.borderColor ? props.customStyleContainer.containerLight.borderColor : '#8A8A8E', 110 | borderBottomWidth: props.customStyleContainer?.containerLight.borderBottomWidth ? props.customStyleContainer.containerLight.borderBottomWidth : react_native_1.StyleSheet.hairlineWidth, 111 | backgroundColor: props.customStyleContainer?.containerLight.backgroundColor ? props.customStyleContainer.containerLight.backgroundColor : undefined, 112 | }); 113 | } 114 | }; 115 | // Render Label Text Style 116 | const renderLabelTextStyle = () => { 117 | // Dark Mode 118 | if (props.darkMode) { 119 | return ({ 120 | fontFamily: props.customStyleLabelText?.labelTextDark.fontFamily ? props.customStyleLabelText.labelTextDark.fontFamily : 'System', 121 | fontSize: props.customStyleLabelText?.labelTextDark.fontSize ? props.customStyleLabelText.labelTextDark.fontSize : 11, 122 | fontWeight: props.customStyleLabelText?.labelTextDark.fontWeight ? props.customStyleLabelText.labelTextDark.fontWeight : '600', 123 | textTransform: props.customStyleLabelText?.labelTextDark.textTransform ? props.customStyleLabelText.labelTextDark.textTransform : 'uppercase', 124 | color: props.customStyleLabelText?.labelTextDark.color ? props.customStyleLabelText.labelTextDark.color : '#8D8D93', 125 | marginBottom: 7, 126 | }); 127 | } 128 | // Light Mode 129 | else { 130 | return ({ 131 | fontFamily: props.customStyleLabelText?.labelTextLight.fontFamily ? props.customStyleLabelText.labelTextLight.fontFamily : 'System', 132 | fontSize: props.customStyleLabelText?.labelTextLight.fontSize ? props.customStyleLabelText.labelTextLight.fontSize : 11, 133 | fontWeight: props.customStyleLabelText?.labelTextLight.fontWeight ? props.customStyleLabelText.labelTextLight.fontWeight : '600', 134 | textTransform: props.customStyleLabelText?.labelTextLight.textTransform ? props.customStyleLabelText.labelTextLight.textTransform : 'uppercase', 135 | color: props.customStyleLabelText?.labelTextLight.color ? props.customStyleLabelText.labelTextLight.color : '#8A8A8E', 136 | marginBottom: 7, 137 | }); 138 | } 139 | }; 140 | // Render Field Text Style 141 | const renderFieldTextStyle = () => { 142 | // Dark Mode 143 | if (props.darkMode) { 144 | return ({ 145 | fontFamily: props.customStyleFieldText?.fieldTextDark.fontFamily ? props.customStyleFieldText.fieldTextDark.fontFamily : 'System', 146 | fontSize: props.customStyleFieldText?.fieldTextDark.fontSize ? props.customStyleFieldText.fieldTextDark.fontSize : 17, 147 | fontWeight: props.customStyleFieldText?.fieldTextDark.fontWeight ? props.customStyleFieldText.fieldTextDark.fontWeight : '400', 148 | color: props.customStyleFieldText?.fieldTextDark.color ? props.customStyleFieldText.fieldTextDark.color : '#FFFFFF', 149 | alignSelf: 'center', 150 | }); 151 | } 152 | // Light Mode 153 | else { 154 | return ({ 155 | fontFamily: props.customStyleFieldText?.fieldTextLight.fontFamily ? props.customStyleFieldText.fieldTextLight.fontFamily : 'System', 156 | fontSize: props.customStyleFieldText?.fieldTextLight.fontSize ? props.customStyleFieldText.fieldTextLight.fontSize : 17, 157 | fontWeight: props.customStyleFieldText?.fieldTextLight.fontWeight ? props.customStyleFieldText.fieldTextLight.fontWeight : '400', 158 | color: props.customStyleFieldText?.fieldTextLight.color ? props.customStyleFieldText.fieldTextLight.color : '#000000', 159 | alignSelf: 'center', 160 | }); 161 | } 162 | }; 163 | // Render Modal Header Container Style 164 | const renderModalHeaderContainerStyle = () => { 165 | // Dark Mode 166 | if (props.darkMode) { 167 | return ({ 168 | display: 'flex', 169 | flexDirection: 'row', 170 | justifyContent: 'space-between', 171 | alignItems: 'center', 172 | width: width, 173 | height: props.customStyleModalHeaderContainer?.modalHeaderContainerDark.height ? props.customStyleModalHeaderContainer.modalHeaderContainerDark.height : 45, 174 | backgroundColor: props.customStyleModalHeaderContainer?.modalHeaderContainerDark.backgroundColor ? props.customStyleModalHeaderContainer.modalHeaderContainerDark.backgroundColor : '#383838', 175 | borderColor: props.customStyleModalHeaderContainer?.modalHeaderContainerDark.borderColor ? props.customStyleModalHeaderContainer.modalHeaderContainerDark.borderColor : '#E9E9EB', 176 | borderBottomWidth: props.customStyleModalHeaderContainer?.modalHeaderContainerDark.borderBottomWidth ? props.customStyleModalHeaderContainer.modalHeaderContainerDark.borderBottomWidth : react_native_1.StyleSheet.hairlineWidth, 177 | }); 178 | } 179 | // Light Mode 180 | else { 181 | return ({ 182 | display: 'flex', 183 | flexDirection: 'row', 184 | justifyContent: 'space-between', 185 | alignItems: 'center', 186 | width: width, 187 | height: props.customStyleModalHeaderContainer?.modalHeaderContainerLight.height ? props.customStyleModalHeaderContainer.modalHeaderContainerLight.height : 45, 188 | backgroundColor: props.customStyleModalHeaderContainer?.modalHeaderContainerLight.backgroundColor ? props.customStyleModalHeaderContainer.modalHeaderContainerLight.backgroundColor : '#FFFFFF', 189 | borderColor: props.customStyleModalHeaderContainer?.modalHeaderContainerLight.borderColor ? props.customStyleModalHeaderContainer.modalHeaderContainerLight.borderColor : '#CED4DA', 190 | borderBottomWidth: props.customStyleModalHeaderContainer?.modalHeaderContainerLight.borderBottomWidth ? props.customStyleModalHeaderContainer.modalHeaderContainerLight.borderBottomWidth : react_native_1.StyleSheet.hairlineWidth, 191 | }); 192 | } 193 | }; 194 | // Render Cancel Text Style 195 | const renderCancelTextStyle = () => { 196 | // Dark Mode 197 | if (props.darkMode) { 198 | return ({ 199 | marginLeft: 16, 200 | fontFamily: props.customStyleCancelText?.cancelTextDark.fontFamily ? props.customStyleCancelText.cancelTextDark.fontFamily : 'System', 201 | color: props.customStyleCancelText?.cancelTextDark.color ? props.customStyleCancelText.cancelTextDark.color : '#0884FE', 202 | fontWeight: props.customStyleCancelText?.cancelTextDark.fontWeight ? props.customStyleCancelText.cancelTextDark.fontWeight : '400', 203 | fontSize: props.customStyleCancelText?.cancelTextDark.fontSize ? props.customStyleCancelText.cancelTextDark.fontSize : 17, 204 | }); 205 | } 206 | // Light Mode 207 | else { 208 | return ({ 209 | marginLeft: 16, 210 | fontFamily: props.customStyleCancelText?.cancelTextLight.fontFamily ? props.customStyleCancelText.cancelTextLight.fontFamily : 'System', 211 | color: props.customStyleCancelText?.cancelTextLight.color ? props.customStyleCancelText.cancelTextLight.color : '#007AFF', 212 | fontWeight: props.customStyleCancelText?.cancelTextLight.fontWeight ? props.customStyleCancelText.cancelTextLight.fontWeight : '400', 213 | fontSize: props.customStyleCancelText?.cancelTextLight.fontSize ? props.customStyleCancelText.cancelTextLight.fontSize : 17, 214 | }); 215 | } 216 | }; 217 | // Render Done Text Style 218 | const renderDoneTextStyle = () => { 219 | // Dark Mode 220 | if (props.darkMode) { 221 | return props.customStylePickerItemText?.pickerItemTextDark.color ? props.customStylePickerItemText.pickerItemTextDark.color : '#0884FE'; 222 | } 223 | // Light Mode 224 | else { 225 | return props.customStylePickerItemText?.pickerItemTextLight.color ? props.customStylePickerItemText.pickerItemTextLight.color : '#007AFF'; 226 | } 227 | }; 228 | // Render Modal Content Container Style 229 | const renderModalContentContainerStyle = () => { 230 | // Dark Mode 231 | if (props.darkMode) { 232 | return ({ 233 | width: width, 234 | height: props.customStyleModalContentContainer?.modalContentContainerDark.height ? props.customStyleModalContentContainer.modalContentContainerDark.height : 250, 235 | backgroundColor: props.customStyleModalContentContainer?.modalContentContainerDark.backgroundColor ? props.customStyleModalContentContainer.modalContentContainerDark.backgroundColor : '#121312', 236 | }); 237 | } 238 | // Light Mode 239 | else { 240 | return ({ 241 | width: width, 242 | height: props.customStyleModalContentContainer?.modalContentContainerLight.height ? props.customStyleModalContentContainer.modalContentContainerLight.height : 250, 243 | backgroundColor: props.customStyleModalContentContainer?.modalContentContainerLight.backgroundColor ? props.customStyleModalContentContainer.modalContentContainerLight.backgroundColor : '#FFFFFF', 244 | }); 245 | } 246 | }; 247 | // Render Picker Item Text Style 248 | const renderPickerItemStyle = () => { 249 | // Dark Mode 250 | if (props.darkMode) { 251 | return ({ 252 | color: props.customStylePickerItemText?.pickerItemTextDark.color ? props.customStylePickerItemText.pickerItemTextDark.color : '#FFFFFF', 253 | }); 254 | } 255 | // Light Mode 256 | else { 257 | return ({ 258 | color: props.customStylePickerItemText?.pickerItemTextLight.color ? props.customStylePickerItemText.pickerItemTextLight.color : '#000000', 259 | }); 260 | } 261 | }; 262 | // Toggle Modal 263 | const toggleModal = () => { 264 | // Platform: iOS 265 | if (react_native_1.Platform.OS === 'ios') { 266 | // React Hook: Toggle Modal 267 | toggle((modalVisible) => !modalVisible); 268 | } 269 | }; 270 | // Press Cancel 271 | const pressCancel = () => { 272 | // Set State 273 | setTempValue(value); 274 | // Toggle Modal 275 | toggleModal(); 276 | }; 277 | // Press Done 278 | const pressDone = () => { 279 | // Set State 280 | setValue(tempValue); 281 | // Props: onChange 282 | props.onChange(tempValue); 283 | // Toggle Modal 284 | toggleModal(); 285 | }; 286 | // Select Value 287 | const selectValue = (value) => { 288 | // Platform: iOS 289 | if (react_native_1.Platform.OS === 'ios') { 290 | // Set State 291 | setTempValue(value); 292 | } 293 | // Platform: Android 294 | else if (react_native_1.Platform.OS === 'android') { 295 | // Set State 296 | setValue(value); 297 | // Props: onChange 298 | props.onChange(value); 299 | } 300 | }; 301 | // Render Picker 302 | const renderPicker = () => { 303 | // Platform: iOS: 304 | if (react_native_1.Platform.OS === 'ios') { 305 | return (jsx_runtime_1.jsxs(react_native_1.View, Object.assign({ style: renderContainerStyle() }, { children: [jsx_runtime_1.jsx(react_native_1.View, Object.assign({ style: styles.labelContainer }, { children: jsx_runtime_1.jsx(react_native_1.Text, Object.assign({ style: renderLabelTextStyle() }, { children: props.title === undefined ? 'List' : props.title }), void 0) }), void 0), 306 | jsx_runtime_1.jsx(react_native_1.TouchableOpacity, Object.assign({ onPress: () => toggleModal(), style: styles.fieldTextContainer }, { children: jsx_runtime_1.jsx(react_native_1.Text, Object.assign({ style: renderFieldTextStyle(), numberOfLines: 1 }, { children: value ? value : 'Select' }), void 0) }), void 0), 307 | jsx_runtime_1.jsx(react_native_modal_1.default, Object.assign({ isVisible: modalVisible, style: styles.modal, backdropOpacity: .30 }, { children: jsx_runtime_1.jsxs(react_native_1.View, Object.assign({ style: styles.modalContainer }, { children: [jsx_runtime_1.jsxs(react_native_1.View, Object.assign({ style: renderModalHeaderContainerStyle() }, { children: [jsx_runtime_1.jsx(react_native_1.TouchableOpacity, Object.assign({ onPress: () => pressCancel() }, { children: jsx_runtime_1.jsx(react_native_1.Text, Object.assign({ style: renderCancelTextStyle() }, { children: "Cancel" }), void 0) }), void 0), 308 | jsx_runtime_1.jsx(react_native_1.View, Object.assign({ style: styles.doneButtonContainer }, { children: jsx_runtime_1.jsx(react_native_1.Button, { title: "Done", onPress: () => pressDone(), disabled: value === tempValue ? true : false, color: renderDoneTextStyle() }, void 0) }), void 0)] }), void 0), 309 | jsx_runtime_1.jsx(react_native_1.View, Object.assign({ style: renderModalContentContainerStyle() }, { children: jsx_runtime_1.jsx(picker_1.Picker, Object.assign({ selectedValue: tempValue !== undefined ? tempValue : value, onValueChange: (value) => selectValue(value) }, { children: unitedStates.map((item, i) => { 310 | return (jsx_runtime_1.jsx(picker_1.Picker.Item, { label: item.label, value: item.value, color: renderPickerItemStyle() }, i)); 311 | }) }), void 0) }), void 0)] }), void 0) }), void 0)] }), void 0)); 312 | } 313 | // Platform: Android 314 | else if (react_native_1.Platform.OS === 'android') { 315 | return (jsx_runtime_1.jsxs(react_native_1.View, Object.assign({ style: renderContainerStyle() }, { children: [jsx_runtime_1.jsx(react_native_1.View, Object.assign({ style: styles.labelContainer }, { children: jsx_runtime_1.jsx(react_native_1.Text, Object.assign({ style: renderLabelTextStyle() }, { children: props.title }), void 0) }), void 0), 316 | jsx_runtime_1.jsx(picker_1.Picker, Object.assign({ mode: "dropdown", selectedValue: value, style: { height: 60, width: width - 16 }, onValueChange: (value) => setValue(value) }, { children: unitedStates.map((item, i) => { 317 | return (jsx_runtime_1.jsx(picker_1.Picker.Item, { label: item.label, value: item.value, color: renderPickerItemStyle() }, i)); 318 | }) }), void 0)] }), void 0)); 319 | } 320 | }; 321 | return (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: renderPicker() }, void 0)); 322 | }; 323 | // Styles 324 | const styles = react_native_1.StyleSheet.create({ 325 | modal: { 326 | margin: 0, 327 | }, 328 | modalContainer: { 329 | height: '100%', 330 | alignItems: 'center', 331 | justifyContent: 'flex-end', 332 | }, 333 | doneButtonContainer: { 334 | marginRight: 7, 335 | }, 336 | labelContainer: { 337 | width: width - 32, 338 | marginBottom: 4, 339 | }, 340 | fieldTextContainer: { 341 | display: 'flex', 342 | flexDirection: 'row', 343 | justifyContent: 'space-between', 344 | alignItems: 'center', 345 | }, 346 | }); 347 | // Exports 348 | exports.default = DropdownUnitedStates; 349 | -------------------------------------------------------------------------------- /dist/components/pickers/PickerDate.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ContainerStyle, LabelTextStyle } from '../../types/types'; 3 | interface Props { 4 | mode: 'calendar' | 'spinner' | 'default'; 5 | onChange: (date: Date) => void; 6 | title?: string; 7 | darkMode?: boolean; 8 | customStyleContainer?: ContainerStyle; 9 | customStyleLabelText?: LabelTextStyle; 10 | } 11 | declare const PickerDate: React.FC; 12 | export default PickerDate; 13 | -------------------------------------------------------------------------------- /dist/components/pickers/PickerDate.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __importDefault = (this && this.__importDefault) || function (mod) { 3 | return (mod && mod.__esModule) ? mod : { "default": mod }; 4 | }; 5 | Object.defineProperty(exports, "__esModule", { value: true }); 6 | const jsx_runtime_1 = require("react/jsx-runtime"); 7 | const react_1 = require("react"); 8 | const react_native_1 = require("react-native"); 9 | const datetimepicker_1 = __importDefault(require("@react-native-community/datetimepicker")); 10 | // Screen Dimensions 11 | const { height, width } = react_native_1.Dimensions.get('window'); 12 | ; 13 | // Component: Picker (Date) 14 | const PickerDate = (props) => { 15 | // React Hooks: State 16 | const [iosModalVisible, setIosModalVisible] = react_1.useState(false); 17 | const [androidModalVisible, toggleAndroid] = react_1.useState(false); 18 | const [date, setDate] = react_1.useState(new Date()); 19 | const [tempDate, setTempDate] = react_1.useState(date); 20 | const [today, todaySent] = react_1.useState(false); 21 | // React Hooks: Lifecycle Methods 22 | react_1.useEffect(() => { 23 | // Send Initial Date 24 | if (today === false) { 25 | // Props: onChange 26 | props.onChange(new Date()); 27 | // Today's Date Has Been Sent To Parent Component 28 | todaySent(true); 29 | } 30 | }), [today]; 31 | // Select Date 32 | const selectDate = (event, newDate) => { 33 | // Platform: Android 34 | if (react_native_1.Platform.OS === 'android') { 35 | // Undefined 36 | if (newDate === undefined) { 37 | // Toggle Android 38 | toggleAndroid((androidModalVisible) => !androidModalVisible); 39 | } 40 | // Event Type: Set Date 41 | else if (event.type === 'set') { 42 | // Toggle Android 43 | toggleAndroid((androidModalVisible) => !androidModalVisible); 44 | // Set From Date 45 | setDate(newDate); 46 | // React Props: onChange 47 | props.onChange(newDate); 48 | } 49 | // Event Type: Dismissed 50 | else if (event.type === 'dismissed') { 51 | // Toggle Android 52 | toggleAndroid((androidModalVisible) => !androidModalVisible); 53 | } 54 | } 55 | // Platform: iOS 56 | else if (react_native_1.Platform.OS === 'ios') { 57 | // Undefined 58 | if (newDate !== undefined) { 59 | // Set State 60 | setTempDate(newDate); 61 | } 62 | } 63 | }; 64 | // Render Picker 65 | const renderPicker = () => { 66 | // Platform: Android 67 | if (react_native_1.Platform.OS === 'android' && androidModalVisible === true) { 68 | return (jsx_runtime_1.jsx(datetimepicker_1.default, { mode: "date", display: props.mode, value: date, onChange: (event, date) => selectDate(event, date) }, void 0)); 69 | } 70 | // Platform: iOS 71 | else if (react_native_1.Platform.OS === 'ios') { 72 | // Major Version iOS 73 | const majorVersionIOS = parseInt(react_native_1.Platform.Version, 10); 74 | // iOS 14 75 | if (majorVersionIOS >= 14) { 76 | return (jsx_runtime_1.jsx(datetimepicker_1.default, { mode: "date", value: tempDate ? tempDate : date, onChange: (event, newDate) => selectDate(event, newDate) }, void 0)); 77 | } 78 | // iOS 13 And Under 79 | else { 80 | // 85 | // 86 | // 87 | // pressCancel()} > 89 | // Cancel 90 | // 91 | // 92 | //