Skip to content

Commit

Permalink
feat: addign to prettierrc
Browse files Browse the repository at this point in the history
  • Loading branch information
andrew-weber committed Jun 21, 2023
1 parent 3e344e3 commit a0380e4
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 60 deletions.
5 changes: 4 additions & 1 deletion .prettierrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,8 @@
"trailingComma": "es5",
"useTabs": true,
"tabWidth": 4,
"semi": false
"semi": false,
"bracketSpacing": true,
"endOfLine": "auto",
"printWidth": 120
}
92 changes: 33 additions & 59 deletions src/components/modal/index.tsx
Original file line number Diff line number Diff line change
@@ -1,68 +1,56 @@
import { isIOS } from '@consts'
import { ThemeContext } from '@src/context/Theme'
import { highlight as hi, TPref } from '@styles'
import { useContext } from 'react'
import { KeyboardAvoidingView, Modal, StyleSheet, View } from 'react-native'
import { isIOS } from "@consts"
import { ThemeContext } from "@src/context/Theme"
import { highlight as hi, TPref } from "@styles"
import { useContext } from "react"
import { KeyboardAvoidingView, Modal, StyleSheet, View } from "react-native"

interface IMyModalProps {
type: 'bottom' | 'question' | 'success' | 'error' | 'invoiceAmount'
animation?: 'slide' | 'fade' | 'none'
type: "bottom" | "question" | "success" | "error" | "invoiceAmount"
animation?: "slide" | "fade" | "none"
visible: boolean
success?: boolean
isContactList?: boolean
children: React.ReactNode
}

export default function MyModal({
type,
animation,
visible,
success,
isContactList,
children,
}: IMyModalProps) {
export default function MyModal({ type, animation, visible, success, isContactList, children }: IMyModalProps) {
const { color, highlight } = useContext(ThemeContext)

const getCorrectStyle = () => {
if (type === 'bottom') {
if (type === "bottom") {
return styles(color, highlight).bottomView
}
if (
type === 'question' ||
type === 'success' ||
type === 'error' ||
type === 'invoiceAmount'
) {
if (type === "question" || type === "success" || type === "error" || type === "invoiceAmount") {
return styles(color, highlight).centeredView
}
}

const getViewStyle = () => {
if (type === 'bottom') {
if (type === "bottom") {
return {
...styles(color, highlight).common,
...styles(color, highlight).modalView,
}
}
if (type === 'question') {
if (type === "question") {
return {
...styles(color, highlight).common,
...styles(color, highlight).centeredModalView,
}
}
if (type === 'success') {
if (type === "success") {
return {
...styles(color, highlight).common,
...styles(color, highlight).successModalView,
}
}
if (type === 'error') {
if (type === "error") {
return {
...styles(color, highlight).common,
...styles(color, highlight).promptModalView,
}
}
if (type === 'invoiceAmount') {
if (type === "invoiceAmount") {
let styling = {
...styles(color, highlight).common,
...styles(color, highlight).invoiceAmountModalView,
Expand All @@ -79,23 +67,9 @@ export default function MyModal({

return visible ? (
<View style={styles(color, highlight).modalParent}>
<Modal
animationType={animation}
transparent={true}
visible={visible}
>
<KeyboardAvoidingView
style={getCorrectStyle()}
behavior={isIOS ? 'padding' : 'height'}
>
<View
style={[
getViewStyle(),
success ? { backgroundColor: hi[highlight] } : {},
]}
>
{children}
</View>
<Modal animationType={animation} transparent={true} visible={visible}>
<KeyboardAvoidingView style={getCorrectStyle()} behavior={isIOS ? "padding" : "height"}>
<View style={[getViewStyle(), success ? { backgroundColor: hi[highlight] } : {}]}>{children}</View>
</KeyboardAvoidingView>
</Modal>
</View>
Expand All @@ -105,17 +79,17 @@ export default function MyModal({
const styles = (pref: TPref, h: string) =>
StyleSheet.create({
modalParent: {
position: 'absolute',
position: "absolute",
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: 'rgba(0, 0, 0, .5)',
backgroundColor: "rgba(0, 0, 0, .5)",
},
common: {
backgroundColor: pref.BACKGROUND,
alignItems: 'center',
shadowColor: '#000',
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
Expand All @@ -127,23 +101,23 @@ const styles = (pref: TPref, h: string) =>
// Bottom Modal
bottomView: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
justifyContent: "flex-end",
alignItems: "center",
},
modalView: {
width: '100%',
width: "100%",
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
padding: 20,
},
// Centered Modal
centeredView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
justifyContent: "center",
alignItems: "center",
},
centeredModalView: {
width: '90%',
width: "90%",
borderRadius: 20,
borderWidth: 3,
borderColor: hi[h],
Expand All @@ -154,21 +128,21 @@ const styles = (pref: TPref, h: string) =>
},
// Success Modal
successModalView: {
width: '90%',
width: "90%",
borderRadius: 20,
},
promptModalView: {
width: '90%',
width: "90%",
borderRadius: 20,
borderWidth: 3,
borderColor: hi[h],
padding: 20,
},
invoiceAmountModalView: {
width: '100%',
height: '100%',
width: "100%",
height: "100%",
padding: 20,
justifyContent: 'space-between',
justifyContent: "space-between",
},
contactList: {
paddingHorizontal: 0,
Expand Down

0 comments on commit a0380e4

Please sign in to comment.