diff --git a/.github/workflows/formatting.yml b/.github/workflows/formatting.yml new file mode 100644 index 00000000..e110f410 --- /dev/null +++ b/.github/workflows/formatting.yml @@ -0,0 +1,31 @@ +name: Auto Formatting + +on: + push: + branches: + - master + - main + +jobs: + formatting: + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Set up Node + uses: actions/setup-node@v4 + with: + node-version: 20 + + - name: Install Prettier + run: | + npm install --global prettier + + - name: Format with Prettier + run: prettier --write "**/*.{js,jsx,ts,tsx,md,mdx,css,yaml,json}" + + - uses: stefanzweifel/git-auto-commit-action@v5 + with: + commit_message: Apply Formatting Fixes + diff --git a/.gitignore b/.gitignore index 600d2d33..9ae0142c 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,75 @@ -.vscode \ No newline at end of file +# OSX +# +.DS_Store + +# Xcode +# +build/ +*.pbxuser +!default.pbxuser +*.mode1v3 +!default.mode1v3 +*.mode2v3 +!default.mode2v3 +*.perspectivev3 +!default.perspectivev3 +xcuserdata +*.xccheckout +*.moved-aside +DerivedData +*.hmap +*.ipa +*.xcuserstate + +# Android/IntelliJ +# +build/ +.idea +.gradle +local.properties +*.iml + +# node.js +# +node_modules/ +npm-debug.log +yarn-error.log + +# BUCK +buck-out/ +\.buckd/ +*.keystore +!debug.keystore + +# fastlane +# +# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the +# screenshots whenever they are needed. +# For more information about the recommended setup visit: +# https://docs.fastlane.tools/best-practices/source-control/ + +*/fastlane/report.xml +*/fastlane/Preview.html +*/fastlane/screenshots + +# Bundle artifact +*.jsbundle + +# CocoaPods +/ios/Pods/ + +# Expo +.expo +.expo-shared + +# Jest +coverage + +# Bob +lib/ + +# Dot Env +.env + +# VSCODE +.vscode/ \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 37b6db5b..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "editor.fontFamily": "'JetBrains Mono'", - "workbench.colorTheme": "GitHub Dark Default", - "workbench.preferredDarkColorTheme": "Default Dark+", - "workbench.preferredHighContrastColorTheme": "Default High Contrast" -} \ No newline at end of file diff --git a/components/MultipleSelectList.tsx b/components/MultipleSelectList.tsx index a3bba1d8..e7b7cf71 100644 --- a/components/MultipleSelectList.tsx +++ b/components/MultipleSelectList.tsx @@ -1,384 +1,472 @@ -import React from 'react'; +import React from "react"; import { - View, - Text, - StyleSheet, - Image, - TouchableOpacity, - ScrollView, - Animated, - TextInput, - ViewStyle, - Pressable, - Keyboard -} from 'react-native'; - -import { MultipleSelectListProps } from '..'; - -type L1Keys = { key?: any; value?: any; disabled?: boolean | undefined } + View, + Text, + StyleSheet, + Image, + TouchableOpacity, + ScrollView, + Animated, + TextInput, + ViewStyle, + Pressable, + Keyboard, +} from "react-native"; + +import { MultipleSelectListProps } from ".."; + +type L1Keys = { key?: any; value?: any; disabled?: boolean | undefined }; const MultipleSelectList: React.FC = ({ - fontFamily, - setSelected, - placeholder, - boxStyles, - inputStyles, - dropdownStyles, - dropdownItemStyles, - dropdownTextStyles, - maxHeight, - data, - searchicon = false, - arrowicon = false, - closeicon = false, - search = true, - searchPlaceholder = "search", - onSelect = () => {}, - label, - notFoundText = "No data found", - disabledItemStyles, - disabledTextStyles, - disabledCheckBoxStyles, - labelStyles, - badgeStyles, - badgeTextStyles, - checkBoxStyles, - save = 'key', - dropdownShown = false - }) => { - - const oldOption = React.useRef(null) - const [_firstRender,_setFirstRender] = React.useState(true); - const [dropdown, setDropdown] = React.useState(dropdownShown); - const [selectedval, setSelectedVal] = React.useState([]); - const [height,setHeight] = React.useState(350) - const animatedvalue = React.useRef(new Animated.Value(0)).current; - const [filtereddata,setFilteredData] = React.useState(data); - - - const slidedown = () => { - setDropdown(true) - - Animated.timing(animatedvalue,{ - toValue:height, - duration:500, - useNativeDriver:false, - - }).start() - } - const slideup = () => { - - Animated.timing(animatedvalue,{ - toValue:0, - duration:500, - useNativeDriver:false, - - }).start(() => setDropdown(false)) + fontFamily, + setSelected, + placeholder, + boxStyles, + inputStyles, + dropdownStyles, + dropdownItemStyles, + dropdownTextStyles, + maxHeight, + data, + searchicon = false, + arrowicon = false, + closeicon = false, + search = true, + searchPlaceholder = "search", + onSelect = () => {}, + label, + notFoundText = "No data found", + disabledItemStyles, + disabledTextStyles, + disabledCheckBoxStyles, + labelStyles, + badgeStyles, + badgeTextStyles, + checkBoxStyles, + save = "key", + dropdownShown = false, +}) => { + const oldOption = React.useRef(null); + const [_firstRender, _setFirstRender] = React.useState(true); + const [dropdown, setDropdown] = React.useState(dropdownShown); + const [selectedval, setSelectedVal] = React.useState([]); + const [height, setHeight] = React.useState(350); + const animatedvalue = React.useRef(new Animated.Value(0)).current; + const [filtereddata, setFilteredData] = React.useState(data); + + const slidedown = () => { + setDropdown(true); + + Animated.timing(animatedvalue, { + toValue: height, + duration: 500, + useNativeDriver: false, + }).start(); + }; + const slideup = () => { + Animated.timing(animatedvalue, { + toValue: 0, + duration: 500, + useNativeDriver: false, + }).start(() => setDropdown(false)); + }; + + React.useEffect(() => { + if (maxHeight) setHeight(maxHeight); + }, [maxHeight]); + + React.useEffect(() => { + setFilteredData(data); + }, [data]); + + React.useEffect(() => { + if (_firstRender) { + _setFirstRender(false); + return; } + onSelect(); + }, [selectedval]); - React.useEffect( () => { - if(maxHeight) - setHeight(maxHeight) - },[maxHeight]) - - - React.useEffect(() => { - setFilteredData(data); - },[data]) - - - React.useEffect(() => { - if(_firstRender){ - _setFirstRender(false); - return; - } - onSelect() - - },[selectedval]) - - React.useEffect(() => { - if(!_firstRender){ - if(dropdownShown) - slidedown(); - else + React.useEffect(() => { + if (!_firstRender) { + if (dropdownShown) slidedown(); + else slideup(); + } + }, [dropdownShown]); + + return ( + + {dropdown && search ? ( + + + {!searchicon ? ( + + ) : ( + searchicon + )} + + { + let result = data.filter((item: L1Keys) => { + val.toLowerCase(); + let row = item.value.toLowerCase(); + return row.search(val.toLowerCase()) > -1; + }); + setFilteredData(result); + }} + style={[ + { padding: 0, height: 20, flex: 1, fontFamily }, + inputStyles, + ]} + /> + { slideup(); - - } - - },[dropdownShown]) - - - - - - - return( - - { - (dropdown && search) - ? - - + // setTimeout(() => setFilteredData(data), 800) + }} + > + {!closeicon ? ( + + ) : ( + closeicon + )} + + + + ) : selectedval?.length > 0 ? ( + { + if (!dropdown) { + Keyboard.dismiss(); + slidedown(); + } else { + slideup(); + } + }} + > + + + {label} + + + {selectedval?.map((item, index) => { + return ( + + + {item} + + + ); + })} + + + + ) : ( + { + if (!dropdown) { + Keyboard.dismiss(); + slidedown(); + } else { + slideup(); + } + }} + > + + {selectedval == "" + ? placeholder + ? placeholder + : "Select option" + : selectedval} + + {!arrowicon ? ( + + ) : ( + arrowicon + )} + + )} + + {dropdown ? ( + + + + {filtereddata.length >= 1 ? ( + filtereddata.map((item: L1Keys, index: number) => { + let key = item.key ?? item.value ?? item; + let value = item.value ?? item; + let disabled = item.disabled ?? false; + if (disabled) { + return ( + + - : - searchicon - } - - { - let result = data.filter((item: L1Keys) => { - val.toLowerCase(); - let row = item.value.toLowerCase() - return row.search(val.toLowerCase()) > -1; - }); - setFilteredData(result) - }} - style={[{padding:0,height:20,flex:1,fontFamily},inputStyles]} + width: 15, + height: 15, + marginRight: 10, + borderRadius: 3, + justifyContent: "center", + alignItems: "center", + backgroundColor: "#c4c5c6", + }, + disabledCheckBoxStyles, + ]} + > + {selectedval?.includes(value) ? ( + - { - slideup() - // setTimeout(() => setFilteredData(data), 800) - }} > - { - (!closeicon) - ? - - : - closeicon - } - - - + ) : null} - - - : - - (selectedval?.length > 0 ) - - ? - { if(!dropdown){ Keyboard.dismiss(); slidedown() }else{ slideup() } }} > - - { label } - - { - selectedval?.map((item,index) => { - return ( - - {item} - - ) - }) - } - - - - : - { if(!dropdown){ Keyboard.dismiss(); slidedown() }else{ slideup() } }}> - { (selectedval == "") ? (placeholder) ? placeholder : 'Select option' : selectedval } - { - (!arrowicon) - ? - - : - arrowicon - } - - - } - - { - (dropdown) - ? - - - - - { - (filtereddata.length >= 1) - ? - filtereddata.map((item: L1Keys,index: number) => { - let key = item.key ?? item.value ?? item; - let value = item.value ?? item; - let disabled = item.disabled ?? false; - if(disabled){ - return( - - - - { - (selectedval?.includes(value)) - ? - - - - : - null - - } - - {value} - - ) - }else{ - return( - { - - - let existing = selectedval?.indexOf(value) - - - // console.log(existing); - - if(existing != -1 && existing != undefined){ - - let sv = [...selectedval]; - sv.splice(existing,1) - setSelectedVal(sv); - - - setSelected((val: any) => { - let temp = [...val]; - temp.splice(existing,1) - return temp; - }); - - // onSelect() - }else{ - if(save === 'value'){ - setSelected((val: any) => { - let temp = [...new Set([...val,value])]; - return temp; - }) - }else{ - setSelected((val: any) => { - let temp = [...new Set([...val,key])]; - return temp; - }) - } - - setSelectedVal((val: any )=> { - let temp = [...new Set([...val,value])]; - return temp; - }) - - - // onSelect() - } - - - - }}> - - - { - (selectedval?.includes(value)) - ? - - - - : - null - - } - - - - - - {value} - - ) - } - - }) - : - { - setSelected(undefined) - setSelectedVal("") - slideup() - setTimeout(() => setFilteredData(data), 800) - }}> - {notFoundText} - - } - - - - - - { - (selectedval?.length > 0) - ? - - - Selected - - - - - { - selectedval?.map((item,index) => { - return ( - - {item} - - ) - }) - } + + {value} + + + ); + } else { + return ( + { + let existing = selectedval?.indexOf(value); + + // console.log(existing); + + if (existing != -1 && existing != undefined) { + let sv = [...selectedval]; + sv.splice(existing, 1); + setSelectedVal(sv); + + setSelected((val: any) => { + let temp = [...val]; + temp.splice(existing, 1); + return temp; + }); + + // onSelect() + } else { + if (save === "value") { + setSelected((val: any) => { + let temp = [...new Set([...val, value])]; + return temp; + }); + } else { + setSelected((val: any) => { + let temp = [...new Set([...val, key])]; + return temp; + }); + } - - - : - null - } - - - + setSelectedVal((val: any) => { + let temp = [...new Set([...val, value])]; + return temp; + }); + + // onSelect() + } + }} + > + + {selectedval?.includes(value) ? ( + + ) : null} - - - : - null - } - - - - ) -} + + {value} + + + ); + } + }) + ) : ( + { + setSelected(undefined); + setSelectedVal(""); + slideup(); + setTimeout(() => setFilteredData(data), 800); + }} + > + {notFoundText} + + )} + + + {selectedval?.length > 0 ? ( + + + + Selected + + + + + {selectedval?.map((item, index) => { + return ( + + + {item} + + + ); + })} + + + ) : null} + + + ) : null} + + ); +}; export default MultipleSelectList; const styles = StyleSheet.create({ - wrapper:{ borderWidth:1,borderRadius:10,borderColor:'gray',paddingHorizontal:20,paddingVertical:12,flexDirection:'row',justifyContent:'space-between',marginBottom:10 }, - dropdown:{ borderWidth:1,borderRadius:10,borderColor:'gray',overflow:'hidden'}, - option:{ paddingHorizontal:20,paddingVertical:8,flexDirection:'row',alignItems:'center'}, - disabledoption:{ paddingHorizontal:20,paddingVertical:8,flexDirection:'row',alignItems:'center', backgroundColor:'whitesmoke'} - -}) + wrapper: { + borderWidth: 1, + borderRadius: 10, + borderColor: "gray", + paddingHorizontal: 20, + paddingVertical: 12, + flexDirection: "row", + justifyContent: "space-between", + marginBottom: 10, + }, + dropdown: { + borderWidth: 1, + borderRadius: 10, + borderColor: "gray", + overflow: "hidden", + }, + option: { + paddingHorizontal: 20, + paddingVertical: 8, + flexDirection: "row", + alignItems: "center", + }, + disabledoption: { + paddingHorizontal: 20, + paddingVertical: 8, + flexDirection: "row", + alignItems: "center", + backgroundColor: "whitesmoke", + }, +}); diff --git a/components/SelectList.tsx b/components/SelectList.tsx index 234a7e10..cad02090 100644 --- a/components/SelectList.tsx +++ b/components/SelectList.tsx @@ -1,263 +1,291 @@ -import React from 'react'; +import React from "react"; import { - View, - Text, - StyleSheet, - Image, - TouchableOpacity, - ScrollView, - Animated, - TextInput, - Keyboard -} from 'react-native'; + View, + Text, + StyleSheet, + Image, + TouchableOpacity, + ScrollView, + Animated, + TextInput, + Keyboard, +} from "react-native"; -import { SelectListProps } from '..'; +import { SelectListProps } from ".."; -type L1Keys = { key?: any; value?: any; disabled?: boolean | undefined } +type L1Keys = { key?: any; value?: any; disabled?: boolean | undefined }; -const SelectList: React.FC = ({ - setSelected, - placeholder, - boxStyles, - inputStyles, - dropdownStyles, - dropdownItemStyles, - dropdownTextStyles, - maxHeight, - data, - defaultOption, - searchicon = false, - arrowicon = false, - closeicon = false, - search = true, - searchPlaceholder = "search", - notFoundText = "No data found", - disabledItemStyles, - disabledTextStyles, - onSelect = () => {}, - save = 'key', - dropdownShown = false, - fontFamily - }) => { +const SelectList: React.FC = ({ + setSelected, + placeholder, + boxStyles, + inputStyles, + dropdownStyles, + dropdownItemStyles, + dropdownTextStyles, + maxHeight, + data, + defaultOption, + searchicon = false, + arrowicon = false, + closeicon = false, + search = true, + searchPlaceholder = "search", + notFoundText = "No data found", + disabledItemStyles, + disabledTextStyles, + onSelect = () => {}, + save = "key", + dropdownShown = false, + fontFamily, +}) => { + const oldOption = React.useRef(null); + const [_firstRender, _setFirstRender] = React.useState(true); + const [dropdown, setDropdown] = React.useState(dropdownShown); + const [selectedval, setSelectedVal] = React.useState(""); + const [height, setHeight] = React.useState(200); + const animatedvalue = React.useRef(new Animated.Value(0)).current; + const [filtereddata, setFilteredData] = React.useState(data); - const oldOption = React.useRef(null) - const [_firstRender,_setFirstRender] = React.useState(true); - const [dropdown, setDropdown] = React.useState(dropdownShown); - const [selectedval, setSelectedVal] = React.useState(""); - const [height,setHeight] = React.useState(200) - const animatedvalue = React.useRef(new Animated.Value(0)).current; - const [filtereddata,setFilteredData] = React.useState(data) + const slidedown = () => { + setDropdown(true); + Animated.timing(animatedvalue, { + toValue: height, + duration: 500, + useNativeDriver: false, + }).start(); + }; + const slideup = () => { + Animated.timing(animatedvalue, { + toValue: 0, + duration: 500, + useNativeDriver: false, + }).start(() => setDropdown(false)); + }; + React.useEffect(() => { + if (maxHeight) setHeight(maxHeight); + }, [maxHeight]); - const slidedown = () => { - setDropdown(true) - Animated.timing(animatedvalue,{ - toValue:height, - duration:500, - useNativeDriver:false, - - }).start() - } - const slideup = () => { - - Animated.timing(animatedvalue,{ - toValue:0, - duration:500, - useNativeDriver:false, - - }).start(() => setDropdown(false)) - } - - React.useEffect( () => { - if(maxHeight) - setHeight(maxHeight) - },[maxHeight]) - - - React.useEffect(() => { - setFilteredData(data); - },[data]) - - - React.useEffect(() => { - if(_firstRender){ - _setFirstRender(false); - return; - } - onSelect() - },[selectedval]) - + React.useEffect(() => { + setFilteredData(data); + }, [data]); - React.useEffect(() => { - if(!_firstRender && defaultOption && oldOption.current != defaultOption.key ){ - // oldOption.current != null - oldOption.current = defaultOption.key - setSelected(defaultOption.key); - setSelectedVal(defaultOption.value); - } - if(defaultOption && _firstRender && defaultOption.key != undefined){ - - oldOption.current = defaultOption.key - setSelected(defaultOption.key); - setSelectedVal(defaultOption.value); - } - - },[defaultOption]) - - React.useEffect(() => { - if(!_firstRender){ - if(dropdownShown) - slidedown(); - else - slideup(); - - } - - },[dropdownShown]) + React.useEffect(() => { + if (_firstRender) { + _setFirstRender(false); + return; + } + onSelect(); + }, [selectedval]); + React.useEffect(() => { + if ( + !_firstRender && + defaultOption && + oldOption.current != defaultOption.key + ) { + // oldOption.current != null + oldOption.current = defaultOption.key; + setSelected(defaultOption.key); + setSelectedVal(defaultOption.value); + } + if (defaultOption && _firstRender && defaultOption.key != undefined) { + oldOption.current = defaultOption.key; + setSelected(defaultOption.key); + setSelectedVal(defaultOption.value); + } + }, [defaultOption]); + React.useEffect(() => { + if (!_firstRender) { + if (dropdownShown) slidedown(); + else slideup(); + } + }, [dropdownShown]); - return( - - { - (dropdown && search) - ? - - - { - (!searchicon) - ? - - : - searchicon - } - - { - let result = data.filter((item: L1Keys) => { - val.toLowerCase(); - let row = item.value.toLowerCase() - return row.search(val.toLowerCase()) > -1; - }); - setFilteredData(result) - }} - style={[{padding:0,height:20,flex:1,fontFamily},inputStyles]} - /> - slideup()} > + return ( + + {dropdown && search ? ( + + + {!searchicon ? ( + + ) : ( + searchicon + )} - { - (!closeicon) - ? - - : - closeicon - } - - - - - - - - : - { if(!dropdown){ Keyboard.dismiss(); slidedown() }else{ slideup() } }}> - { (selectedval == "") ? (placeholder) ? placeholder : 'Select option' : selectedval } - { - (!arrowicon) - ? - - : - arrowicon - } - - + { + let result = data.filter((item: L1Keys) => { + val.toLowerCase(); + let row = item.value.toLowerCase(); + return row.search(val.toLowerCase()) > -1; + }); + setFilteredData(result); + }} + style={[ + { padding: 0, height: 20, flex: 1, fontFamily }, + inputStyles, + ]} + /> + slideup()}> + {!closeicon ? ( + + ) : ( + closeicon + )} + + + + ) : ( + { + if (!dropdown) { + Keyboard.dismiss(); + slidedown(); + } else { + slideup(); } - - { - (dropdown) - ? - - + }} + > + + {selectedval == "" + ? placeholder + ? placeholder + : "Select option" + : selectedval} + + {!arrowicon ? ( + + ) : ( + arrowicon + )} + + )} - { - (filtereddata.length >= 1) - ? - filtereddata.map((item: L1Keys,index: number) => { - let key = item.key ?? item.value ?? item; - let value = item.value ?? item; - let disabled = item.disabled ?? false; - if(disabled){ - return( - {}}> - {value} - - ) - }else{ - return( - { - if(save === 'value'){ - setSelected(value); - }else{ - setSelected(key) - } - - setSelectedVal(value) - slideup() - setTimeout(() => {setFilteredData(data)}, 800) - - }}> - {value} - - ) - } - - }) - : - { - setSelected(undefined) - setSelectedVal("") - slideup() - setTimeout(() => setFilteredData(data), 800) - - }}> - {notFoundText} - - } - - - - - - : - null - } - - - - ) -} + {dropdown ? ( + + + {filtereddata.length >= 1 ? ( + filtereddata.map((item: L1Keys, index: number) => { + let key = item.key ?? item.value ?? item; + let value = item.value ?? item; + let disabled = item.disabled ?? false; + if (disabled) { + return ( + {}} + > + + {value} + + + ); + } else { + return ( + { + if (save === "value") { + setSelected(value); + } else { + setSelected(key); + } + setSelectedVal(value); + slideup(); + setTimeout(() => { + setFilteredData(data); + }, 800); + }} + > + + {value} + + + ); + } + }) + ) : ( + { + setSelected(undefined); + setSelectedVal(""); + slideup(); + setTimeout(() => setFilteredData(data), 800); + }} + > + + {notFoundText} + + + )} + + + ) : null} + + ); +}; export default SelectList; - const styles = StyleSheet.create({ - wrapper:{ borderWidth:1,borderRadius:10,borderColor:'gray',paddingHorizontal:20,paddingVertical:12,flexDirection:'row',justifyContent:'space-between' }, - dropdown:{ borderWidth:1,borderRadius:10,borderColor:'gray',marginTop:10,overflow:'hidden'}, - option:{ paddingHorizontal:20,paddingVertical:8,overflow:'hidden' }, - disabledoption:{ paddingHorizontal:20,paddingVertical:8,flexDirection:'row',alignItems:'center', backgroundColor:'whitesmoke',opacity:0.9} - -}) + wrapper: { + borderWidth: 1, + borderRadius: 10, + borderColor: "gray", + paddingHorizontal: 20, + paddingVertical: 12, + flexDirection: "row", + justifyContent: "space-between", + }, + dropdown: { + borderWidth: 1, + borderRadius: 10, + borderColor: "gray", + marginTop: 10, + overflow: "hidden", + }, + option: { paddingHorizontal: 20, paddingVertical: 8, overflow: "hidden" }, + disabledoption: { + paddingHorizontal: 20, + paddingVertical: 8, + flexDirection: "row", + alignItems: "center", + backgroundColor: "whitesmoke", + opacity: 0.9, + }, +});