Merge pull request #3 from mrowe009/edit-transaction

Edit transaction

Author: srowe0091

android/app/src/main/AndroidManifest.xml

@@ -11,11 +11,11 @@
         android:theme="@style/AppTheme">
 
         <activity
-            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
             android:name="com.finances.app.MainActivity"
             android:label="@string/title_activity_main"
             android:theme="@style/AppTheme.NoActionBarLaunch"
-            android:launchMode="singleTask">
+            android:launchMode="singleTask"
+            android:screenOrientation="portrait">
 
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

package-lock.json

@@ -26,30 +26,31 @@
   "homepage": ".",
   "dependencies": {
     "@apollo/react-hooks": "^3.1.5",
-    "@capacitor/android": "^2.0.2",
-    "@capacitor/core": "^2.0.2",
-    "@ionic/react": "^5.1.0",
-    "@ionic/react-router": "^5.1.0",
-    "apollo-boost": "^0.4.7",
+    "@capacitor/android": "^2.1.0",
+    "@capacitor/core": "^2.1.0",
+    "@ionic/react": "^5.1.1",
+    "@ionic/react-router": "^5.1.1",
+    "apollo-boost": "^0.4.9",
     "clsx": "^1.1.0",
-    "dayjs": "^1.8.26",
+    "dayjs": "^1.8.27",
     "formik": "^2.1.4",
     "graphql": "^15.0.0",
     "graphql-tag": "^2.10.3",
     "lodash": "^4.17.15",
+    "npm-check-updates": "^6.0.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-jss": "^10.1.1",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
-    "react-use": "^14.2.0",
+    "react-use": "^15.1.0",
     "rxjs": "^6.5.5",
-    "yup": "^0.28.5"
+    "yup": "^0.29.0"
   },
   "devDependencies": {
-    "@capacitor/cli": "2.0.2",
+    "@capacitor/cli": "2.1.0",
     "husky": "^4.2.5",
     "prettier": "^2.0.5",
     "pretty-quick": "^2.0.1"

package.json

@@ -5,5 +5,4 @@ export * from './Logo'
 export * from './Modal'
 export * from './Popover'
 export * from './PullToRefresh'
-export * from './Transaction'
 export * from './Toolbar'

src/components/Transaction.js

@@ -13,7 +13,7 @@ const useCheckboxStyle = createUseStyles(theme => ({
   }
 }))
 
-export const Checkbox = ({ label, onChange, ...rest }) => {
+export const Checkbox = ({ label, onChange, color, ...rest }) => {
   const classes = useCheckboxStyle()
   return (
     <IonItem lines="none" className={classes.item} color="transparent">
@@ -25,5 +25,6 @@ export const Checkbox = ({ label, onChange, ...rest }) => {
 
 Checkbox.propTypes = {
   label: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  color: PropTypes.string
 }

src/components/index.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { createUseStyles } from 'react-jss'
+import { IonDatetime, IonItem, IonIcon } from '@ionic/react'
+
+import { calendarOutline } from 'ionicons/icons'
+
+const useDatePickerStyles = createUseStyles({
+  datePicker: {
+    '--border-width': 0,
+    width: '100%',
+    marginBottom: 'var(--inputSpacing)',
+    borderRadius: 'var(--borderRadius)',
+    boxShadow: 'var(--boxShadow)'
+  }
+})
+
+export const DatePicker = ({ onChange, ...props }) => {
+  const classes = useDatePickerStyles()
+  return (
+    <IonItem color="medium" className={classes.datePicker}>
+      <IonDatetime displayFormat="M/D/YYYY" onIonChange={onChange} {...props} />
+      <IonIcon icon={calendarOutline} slot="end" />
+    </IonItem>
+  )
+}
+
+DatePicker.propTypes = {
+  onChange: PropTypes.func
+}

src/elements/Checkbox.js

@@ -8,13 +8,15 @@ const useInputStyles = createUseStyles(theme => ({
   input: {
     flex: 'none',
     width: '100%',
+    minHeight: '48px',
     color: 'var(--white)',
     outline: 'none',
     border: 'none',
     background: 'var(--ion-color-medium)',
     padding: theme.spacing(1.25),
     borderRadius: 'var(--borderRadius)',
-    marginBottom: theme.spacing(3),
+    marginBottom: 'var(--inputSpacing)',
+    boxShadow: 'var(--boxShadow)',
     '&::placeholder': {
       color: 'var(--gray7)',
       opacity: 0.5

src/elements/DatePicker.js

@@ -5,17 +5,19 @@ import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/react'
 import { createUseStyles } from 'react-jss'
 import map from 'lodash/fp/map'
 
-const useSelectStyles = createUseStyles(theme => ({
+const useSelectStyles = createUseStyles({
   select: {
-    '--min-height': '38px',
+    '--min-height': '48px',
+    '--border-width': 0,
     width: '100%',
-    marginBottom: theme.spacing(2),
-    borderRadius: 'var(--borderRadius)'
+    marginBottom: 'var(--inputSpacing)',
+    borderRadius: 'var(--borderRadius)',
+    boxShadow: 'var(--boxShadow)'
   },
   actionSheet: {
     '--max-height': '300px'
   }
-}))
+})
 
 export const Select = ({ className, label, name, onChange, value, options, type = 'action-sheet', ...rest }) => {
   const classes = useSelectStyles()

src/elements/Input.js

@@ -1,6 +1,7 @@
 export * from './AspectRatio'
 export * from './Button'
 export * from './Checkbox'
+export * from './DatePicker'
 export * from './Fab'
 export * from './Input'
 export * from './Select'