Merge pull request #24 from Ruffrl/priyapower/add-focus-scroll

Add focus scroll and other small niceties in form behavior
Ruffrl · Sep 27, 2024 · 4ccf279 · 4ccf279
2 parents a524e11 + 6b03915
commit 4ccf279
Show file tree

Hide file tree

Showing 22 changed files with 1,182 additions and 613 deletions.
diff --git a/types/src/store/pets.ts b/types/src/store/pets.ts
@@ -24,6 +24,7 @@ export type PetDetails = {
   size: FieldOption;
   status: FieldOption;
 };
+export type PetDetailField = keyof PetDetails;
 export type PetAvatar = {
   uri?: string;
 };
@@ -42,44 +43,48 @@ export type PetPersonality = {
 export interface CatPersonality extends PetPersonality {
   declawed?: boolean;
 }
+export type CatPersonalityField = keyof CatPersonality;
 export interface DogPersonality extends PetPersonality {
   houseTrained?: boolean;
 }
+export type DogPersonalityField = keyof DogPersonality;
 export type PetCareplan = {
   feeding?: {
     activated: boolean;
-    quantity?: FieldOption;
-    frequency?: FieldOption;
-    specialInstructions?: string;
+    quantity?: FieldOption | null;
+    frequency?: FieldOption | null;
+    specialInstructions?: string | null;
   };
   overnight?: {
     activated: boolean;
-    specialInstructions?: string;
+    specialInstructions?: string | null;
   };
   medical?: {
     activated: boolean;
-    specialInstructions?: string;
+    specialInstructions?: string | null;
   };
   specialNeeds?: {
     activated: boolean;
-    specialInstructions?: string;
+    specialInstructions?: string | null;
   };
   additionalNotes?: {
     activated: boolean;
-    specialInstructions?: string;
+    specialInstructions?: string | null;
   };
 };
 export interface CatCarePlan extends PetCareplan {
   harness?: {
     activated: boolean;
-    comfortableHarness?: FieldOption;
-    specialInstructions?: string;
+    comfortableHarness?: FieldOption | null;
+    specialInstructions?: string | null;
   };
 }
+export type CatCareplanField = keyof CatCarePlan;
 export interface DogCarePlan extends PetCareplan {
   houseTraining?: {
     activated: boolean;
-    hasAccidents?: FieldOption;
-    specialInstructions?: string;
+    hasAccidents?: FieldOption | null;
+    specialInstructions?: string | null;
   };
 }
+export type DogCareplanField = keyof DogCarePlan;
diff --git a/types/src/ui/atoms.ts b/types/src/ui/atoms.ts
@@ -20,8 +20,11 @@ import {
 } from '..';
 
 export interface AccordianProps {
+  accordionDirty: boolean;
+  activeSections: number[];
+  scrollTracker: (component: React.ReactNode, inputKey: string) => JSX.Element;
   sections: AccordionSection[];
-  activeSection: number[];
+  setAccordionDirty: (dirty: boolean) => void;
   setActiveSections: (indexes: number[]) => void;
 }
 
@@ -117,11 +120,13 @@ export interface FieldCharacterCountProps {
   max: number;
 }
 
-export interface FieldInputProps extends Omit<TextInputProps, 'onChange'> {
+export interface FieldInputProps
+  extends Omit<TextInputProps, 'onChange' | 'value'> {
   onChange: (text: string) => void;
   onSubmit?: () => void;
   size?: FieldSize;
   state?: FieldState;
+  value: string | undefined | null;
 }
 
 export interface LabelProps {
@@ -218,5 +223,3 @@ export interface ToggleProps extends Omit<SwitchToggleProps, 'onPress'> {
   onChange: (value: boolean) => void;
   switchOn: boolean;
 }
-
-
diff --git a/types/src/ui/molecules.ts b/types/src/ui/molecules.ts
@@ -54,7 +54,7 @@ export interface RadioGroupProps {
   label?: string;
   onBlur?: () => void;
   onChange: (item: FieldOption) => void;
-  value?: FieldOption;
+  value?: FieldOption | null;
 }
 
 export interface SelectProps extends FieldSelectProps<FieldOption> {

diff --git a/types/src/ui/templates.ts b/types/src/ui/templates.ts
@@ -1,6 +1,8 @@
+import { ScrollView } from 'react-native';
 import { FeatureNavigationProps } from './organisms';
 
 export interface FeatureTemplateProps extends FeatureNavigationProps {
   bgColor?: string;
   paddingX?: string;
+  scrollRef?: (ref: ScrollView | null) => void;
 }
diff --git a/ui/src/components/atoms/accordian/accordian.tsx b/ui/src/components/atoms/accordian/accordian.tsx
@@ -12,16 +12,26 @@ import { HorizontalDivider } from '../horizontal-divider/horizontal-divider';
 
 import { Switch } from '../switch/switch';
 
+import { useCallback } from 'react';
 import * as RNCAccordian from 'react-native-collapsible/Accordion';
 const CollapsibleAccordion = RNCAccordian.default;
 
 export const Accordian = ({
-  activeSection,
+  accordionDirty,
+  activeSections,
+  scrollTracker,
   sections,
+  setAccordionDirty,
   setActiveSections,
 }: AccordianProps) => {
+  const handleDirty = useCallback(() => {
+    if (!accordionDirty) {
+      setAccordionDirty(true);
+    }
+  }, [accordionDirty, setAccordionDirty]);
+
   // renders
-  const renderSectionHeader = (section: AccordionSection) => {
+  const renderSectionHeader = (section: AccordionSection, index: number) => {
     return (
       <View
         style={ruffwind`
@@ -47,22 +57,27 @@ export const Accordian = ({
           {section.title}
         </Text>
         {section.switch && (
-          <Controller
-            name={section.switch.fieldName}
-            control={section.switch.control}
-            render={({ field: { onBlur, onChange, value } }) =>
-              section.switch ? (
-                <Switch
-                  value={value}
-                  onBlur={onBlur}
-                  onChange={onChange}
-                  handleChange={section.switch.handleChange}
-                />
-              ) : (
-                <View />
-              )
-            }
-          />
+          <>
+            {scrollTracker(
+              <Controller
+                name={section.switch.fieldName}
+                control={section.switch.control}
+                render={({ field: { onBlur, onChange, value } }) =>
+                  section.switch ? (
+                    <Switch
+                      value={value}
+                      onBlur={onBlur}
+                      onChange={onChange}
+                      handleChange={section.switch.handleChange}
+                    />
+                  ) : (
+                    <View />
+                  )
+                }
+              />,
+              `${section.switch.fieldName}`
+            )}
+          </>
         )}
         <Image
           style={ruffwind.style(
@@ -102,10 +117,14 @@ export const Accordian = ({
     <CollapsibleAccordion
       expandMultiple
       sections={sections}
-      activeSections={activeSection}
-      renderHeader={renderSectionHeader}
+      activeSections={activeSections}
+      renderHeader={(content, index) => renderSectionHeader(content, index)}
       renderContent={renderSectionContent}
-      onChange={(indexes: number[]) => setActiveSections(indexes)}
+      // onChange={setActiveSections}
+      onChange={(indexes) => {
+        handleDirty();
+        setActiveSections(indexes);
+      }}
       // BLARG - import from tailwind config electricViolet[700]
       underlayColor={'#9525CB'}
       sectionContainerStyle={ruffwind`

diff --git a/ui/src/components/atoms/bottomsheet/bottomsheet.tsx b/ui/src/components/atoms/bottomsheet/bottomsheet.tsx
@@ -1,7 +1,7 @@
 import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';
 import { ruffwind } from '@rufferal/tailwind';
 import { BottomsheetProps } from '@rufferal/types';
-import React, { PropsWithChildren, useCallback, useRef } from 'react';
+import { PropsWithChildren, useRef } from 'react';
 
 export const Bottomsheet = ({
   animateOnMount = true,
@@ -13,16 +13,16 @@ export const Bottomsheet = ({
   // ref
   const bottomSheetRef = useRef<BottomSheet>(null);
 
-  // callbacks
-  const handleSheetChanges = useCallback((index: number) => {
-    console.log('handleSheetChanges', index);
-  }, []);
+  // // callbacks
+  // const handleSheetChanges = useCallback((index: number) => {
+  //   console.log('handleSheetChanges', index);
+  // }, []);
 
   // renders
   return (
     <BottomSheet
       ref={bottomSheetRef}
-      onChange={handleSheetChanges}
+      // onChange={handleSheetChanges}
       snapPoints={snapPoints}
       backgroundStyle={ruffwind.style(backgroundColor)}
       handleStyle={ruffwind`h-[30px] justify-end p-0 mb-2.5`}

diff --git a/ui/src/components/molecules/input-photo/photo-modal.tsx b/ui/src/components/molecules/input-photo/photo-modal.tsx
@@ -86,7 +86,7 @@ export const PhotoModal = ({
     if (photo?.uri) {
       onChange(photo.uri);
     }
-    setCameraView(false)
+    setCameraView(false);
     handleDismissModalPress();
   };
 
@@ -98,10 +98,10 @@ export const PhotoModal = ({
     pickerModalRef.current?.dismiss();
     handleModalDismiss();
   }, [handleModalDismiss]);
-  // BLARG:TODO: determine best way to replace or remove this
-  const handleSheetChanges = useCallback((index: number) => {
-    console.log('handleSheetChanges', index);
-  }, []);
+  // // BLARG:TODO: determine best way to replace or remove this
+  // const handleSheetChanges = useCallback((index: number) => {
+  //   console.log('handleSheetChanges', index);
+  // }, []);
 
   // BLARG:TODO: how can I remove this?
   useEffect(() => {
@@ -111,7 +111,7 @@ export const PhotoModal = ({
   }, [handlePresentModalPress, modalPresent]);
 
   /* STYLES */
-  const cameraPaddingX = `px-${moderateScaleTW(16)}`
+  const cameraPaddingX = `px-${moderateScaleTW(16)}`;
   let cameraPaddingY = `py-${verticalScaleTW(16)}`;
   switch (Platform.OS) {
     case 'android':
@@ -148,15 +148,20 @@ export const PhotoModal = ({
           style={ruffwind.style(
             `flex-1 bg-black`,
             cameraPaddingX,
-            cameraPaddingY,
+            cameraPaddingY
           )}
         >
           {permission?.granted ? (
             <View style={ruffwind`flex-1`}>
-              <View style={ruffwind.style(`bg-black flex-row justify-between`, `pb-${moderateScaleTW(4)}`)}>
+              <View
+                style={ruffwind.style(
+                  `bg-black flex-row justify-between`,
+                  `pb-${moderateScaleTW(4)}`
+                )}
+              >
                 <Pressable
                   style={ruffwind`flex-1 items-start`}
-                  onPress={() => setCameraView(false)}
+                  onPress={toggleCameraFacing}
                 >
                   <Image
                     style={ruffwind.style(
@@ -169,7 +174,7 @@ export const PhotoModal = ({
                 </Pressable>
                 <Pressable
                   style={ruffwind`flex-1 items-end`}
-                  onPress={toggleCameraFacing}
+                  onPress={() => setCameraView(false)}
                 >
                   <Image
                     style={ruffwind.style(
@@ -186,7 +191,9 @@ export const PhotoModal = ({
                 facing={facing}
                 ref={cameraRef}
               />
-              <View style={ruffwind.style(`bg-black`, `pt-${moderateScaleTW(4)}`)}>
+              <View
+                style={ruffwind.style(`bg-black`, `pt-${moderateScaleTW(4)}`)}
+              >
                 <Pressable
                   style={ruffwind`flex-1 items-center`}
                   onPress={takePhoto}
@@ -227,7 +234,7 @@ export const PhotoModal = ({
         detached={true}
         index={1}
         name="Photo Gallery or Camera"
-        onChange={handleSheetChanges}
+        // onChange={handleSheetChanges}
         ref={pickerModalRef}
         snapPoints={snapPoints}
         style={ruffwind`m-2.5`}

diff --git a/ui/src/components/pages/pets/create/cats/cat-avatar/cat-avatar.tsx b/ui/src/components/pages/pets/create/cats/cat-avatar/cat-avatar.tsx
@@ -31,7 +31,7 @@ export const CatAvatar = observer(({ navigation }: PageNavigationProps) => {
   const form = useForm<PetAvatar>({
     resolver: yupResolver(petAvatarSchema),
     mode: 'onBlur',
-    defaultValues: defaults
+    defaultValues: defaults,
   });
   const {
     control,
@@ -65,7 +65,7 @@ export const CatAvatar = observer(({ navigation }: PageNavigationProps) => {
     <OverrideSafeFeatureTemplate
       backNavigation={() => navigation.navigate('Cat Details')}
       forwardNavigation={() => navigation.navigate('Cat Personality')}
-      forwardText="Skip"
+      forwardText={defaults?.uri ? 'Next' : 'Skip'}
     >
       <FormProvider {...form}>
         <BottomSheetModalProvider>
@@ -104,7 +104,7 @@ export const CatAvatar = observer(({ navigation }: PageNavigationProps) => {
               )}
             >
               {error && <FieldHelper text={error} align={'text-center'} />}
-              <Button text="Next" onPress={onSubmit} loading={loading} />
+              <Button text={defaults?.uri ? 'Update' : 'Next'} onPress={onSubmit} loading={loading} />
               <Button
                 text="Cancel"
                 type="transparent"