Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TS migration] Migrate 'Form' component to TypeScript #32992

Merged
merged 57 commits into from
Jan 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
57 commits
Select commit Hold shift + click to select a range
4eeca48
Start migrating new form
blazejkustra Dec 13, 2023
8359837
Merge branch 'main' into ts/NewForm
blazejkustra Dec 14, 2023
0d3e243
Merge branch 'main' into ts/NewForm
blazejkustra Dec 17, 2023
22b5aaa
Type FormProvider
blazejkustra Dec 17, 2023
2cba56d
Revert FAB changes
kowczarz Dec 18, 2023
f74be36
Fix FormActions types
kowczarz Dec 18, 2023
6b93011
Fix FormWrapper types
kowczarz Dec 18, 2023
91239d5
Review changes
kowczarz Dec 19, 2023
b0d589c
Update onyx keys
kowczarz Dec 19, 2023
010c221
Merge remote-tracking branch 'expensify/main' into ts/NewForm
kowczarz Dec 20, 2023
e4136e9
Update temporary types
kowczarz Dec 21, 2023
2fb8f0e
WIP
kowczarz Jan 2, 2024
c353d74
Cleanup types and comments
kowczarz Jan 3, 2024
2496e97
Merge remote-tracking branch 'expensify/main' into ts/NewForm
kowczarz Jan 3, 2024
91aca42
Cleanup
kowczarz Jan 3, 2024
592efa8
Fix TS errors
kowczarz Jan 3, 2024
f32eb83
Fix lint
kowczarz Jan 3, 2024
078b577
Remove redundant code
kowczarz Jan 3, 2024
1f3d8dd
Merge branch 'main' into ts/NewForm
blazejkustra Jan 4, 2024
c68ff38
Fix type imports
blazejkustra Jan 4, 2024
c09b5d8
WIP: Improve Form types
blazejkustra Jan 4, 2024
216aad4
Improve TextInput ref types
blazejkustra Jan 5, 2024
77ef442
Register input types tweaks
kowczarz Jan 5, 2024
6895f61
Merge remote-tracking branch 'expensify/main' into ts/NewForm
kowczarz Jan 10, 2024
32d5cc9
Modify Onyx typings
kowczarz Jan 10, 2024
0294932
Code review changes
kowczarz Jan 10, 2024
81d347a
Code review changes
kowczarz Jan 10, 2024
b0bb914
Merge remote-tracking branch 'expensify/main' into ts/NewForm
kowczarz Jan 12, 2024
256b9ae
Update types
kowczarz Jan 12, 2024
f470ff9
WIP
kowczarz Jan 15, 2024
8f34f5b
Merge remote-tracking branch 'expensify/main' into ts/NewForm
kowczarz Jan 16, 2024
9298809
WIP
kowczarz Jan 17, 2024
64ead2b
Rename REIMBURSEMENT_ACCOUNT_FORM_DRAFT
blazejkustra Jan 17, 2024
da57ba4
Clean rest of form PR
blazejkustra Jan 17, 2024
989c850
Merge branch 'main' into ts/NewForm
blazejkustra Jan 17, 2024
e744f15
Move onFixTheErrorsLinkPressed to a function
blazejkustra Jan 18, 2024
bba2f1a
Bring back DisplayNamePage
blazejkustra Jan 18, 2024
48b0867
Adjust the PR after CK review
blazejkustra Jan 18, 2024
defe9f5
Merge branch 'main' into ts/NewForm
blazejkustra Jan 18, 2024
e8bbd93
Add AddressSearch to valid inputs
blazejkustra Jan 18, 2024
5d9ffa9
Improve comments and InputWrapper props
blazejkustra Jan 18, 2024
eb8bb85
Final touches to InputWrapper
blazejkustra Jan 18, 2024
bc997b3
Fix reimbursment form bug
blazejkustra Jan 18, 2024
dc046ad
Merge branch 'main' into ts/NewForm
blazejkustra Jan 18, 2024
e1aa792
Fix prettier
blazejkustra Jan 18, 2024
e9d8f4d
Add clear errors utils
blazejkustra Jan 22, 2024
91a1125
Change the order of deps back to original
blazejkustra Jan 22, 2024
673e83a
Merge branch 'main' into ts/NewForm
blazejkustra Jan 22, 2024
34633dd
Merge branch 'main' into ts/NewForm
blazejkustra Jan 23, 2024
acdd24b
Fix typecheck after merging main
blazejkustra Jan 23, 2024
4bc5494
Use Onyx key instead of plain string
blazejkustra Jan 23, 2024
d4cc5be
Merge branch 'main' into ts/NewForm
blazejkustra Jan 24, 2024
18a10b9
Fix that user wasn't able to focus errors in the form
blazejkustra Jan 24, 2024
8181d2b
Merge branch 'main' into ts/NewForm
blazejkustra Jan 25, 2024
2f91117
Remove ts-expect-error after merging main
blazejkustra Jan 25, 2024
197cbef
Merge branch 'main' into ts/NewForm
blazejkustra Jan 25, 2024
2fa4582
Merge branch 'main' into ts/NewForm
blazejkustra Jan 25, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 18 additions & 17 deletions src/ONYXKEYS.ts
Original file line number Diff line number Diff line change
Expand Up @@ -173,9 +173,6 @@ const ONYXKEYS = {
/** Stores information about the active reimbursement account being set up */
REIMBURSEMENT_ACCOUNT: 'reimbursementAccount',

/** Stores draft information about the active reimbursement account being set up */
REIMBURSEMENT_ACCOUNT_DRAFT: 'reimbursementAccountDraft',

/** Store preferred skintone for emoji */
PREFERRED_EMOJI_SKIN_TONE: 'preferredEmojiSkinTone',

Expand Down Expand Up @@ -358,13 +355,15 @@ const ONYXKEYS = {
GET_PHYSICAL_CARD_FORM_DRAFT: 'getPhysicalCardFormDraft',
POLICY_REPORT_FIELD_EDIT_FORM: 'policyReportFieldEditForm',
POLICY_REPORT_FIELD_EDIT_FORM_DRAFT: 'policyReportFieldEditFormDraft',
REIMBURSEMENT_ACCOUNT_FORM: 'reimbursementAccount',
REIMBURSEMENT_ACCOUNT_FORM_DRAFT: 'reimbursementAccountDraft',
},
} as const;

type OnyxKeysMap = typeof ONYXKEYS;
type OnyxCollectionKey = ValueOf<OnyxKeysMap['COLLECTION']>;
type OnyxKey = DeepValueOf<Omit<OnyxKeysMap, 'COLLECTION'>>;
type OnyxFormKey = ValueOf<OnyxKeysMap['FORMS']> | OnyxKeysMap['REIMBURSEMENT_ACCOUNT'] | OnyxKeysMap['REIMBURSEMENT_ACCOUNT_DRAFT'];
type OnyxFormKey = ValueOf<OnyxKeysMap['FORMS']>;

type OnyxValues = {
[ONYXKEYS.ACCOUNT]: OnyxTypes.Account;
Expand Down Expand Up @@ -419,7 +418,6 @@ type OnyxValues = {
[ONYXKEYS.WALLET_STATEMENT]: OnyxTypes.WalletStatement;
[ONYXKEYS.PERSONAL_BANK_ACCOUNT]: OnyxTypes.PersonalBankAccount;
[ONYXKEYS.REIMBURSEMENT_ACCOUNT]: OnyxTypes.ReimbursementAccount;
[ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT]: OnyxTypes.ReimbursementAccountDraft;
[ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE]: string | number;
[ONYXKEYS.FREQUENTLY_USED_EMOJIS]: OnyxTypes.FrequentlyUsedEmoji[];
[ONYXKEYS.REIMBURSEMENT_ACCOUNT_WORKSPACE_ID]: string;
Expand Down Expand Up @@ -486,8 +484,8 @@ type OnyxValues = {
[ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM_DRAFT]: OnyxTypes.Form;
[ONYXKEYS.FORMS.PROFILE_SETTINGS_FORM]: OnyxTypes.Form;
[ONYXKEYS.FORMS.PROFILE_SETTINGS_FORM_DRAFT]: OnyxTypes.Form;
[ONYXKEYS.FORMS.DISPLAY_NAME_FORM]: OnyxTypes.Form;
[ONYXKEYS.FORMS.DISPLAY_NAME_FORM_DRAFT]: OnyxTypes.Form;
[ONYXKEYS.FORMS.DISPLAY_NAME_FORM]: OnyxTypes.DisplayNameForm;
[ONYXKEYS.FORMS.DISPLAY_NAME_FORM_DRAFT]: OnyxTypes.DisplayNameForm;
[ONYXKEYS.FORMS.ROOM_NAME_FORM]: OnyxTypes.Form;
[ONYXKEYS.FORMS.ROOM_NAME_FORM_DRAFT]: OnyxTypes.Form;
[ONYXKEYS.FORMS.WELCOME_MESSAGE_FORM]: OnyxTypes.Form;
Expand All @@ -500,8 +498,8 @@ type OnyxValues = {
[ONYXKEYS.FORMS.DATE_OF_BIRTH_FORM_DRAFT]: OnyxTypes.DateOfBirthForm;
[ONYXKEYS.FORMS.HOME_ADDRESS_FORM]: OnyxTypes.Form;
[ONYXKEYS.FORMS.HOME_ADDRESS_FORM_DRAFT]: OnyxTypes.Form;
[ONYXKEYS.FORMS.NEW_ROOM_FORM]: OnyxTypes.Form;
[ONYXKEYS.FORMS.NEW_ROOM_FORM_DRAFT]: OnyxTypes.Form;
[ONYXKEYS.FORMS.NEW_ROOM_FORM]: OnyxTypes.NewRoomForm;
[ONYXKEYS.FORMS.NEW_ROOM_FORM_DRAFT]: OnyxTypes.NewRoomForm;
[ONYXKEYS.FORMS.ROOM_SETTINGS_FORM]: OnyxTypes.Form;
[ONYXKEYS.FORMS.ROOM_SETTINGS_FORM_DRAFT]: OnyxTypes.Form;
[ONYXKEYS.FORMS.NEW_TASK_FORM]: OnyxTypes.Form;
Expand All @@ -526,20 +524,23 @@ type OnyxValues = {
[ONYXKEYS.FORMS.SETTINGS_STATUS_CLEAR_DATE_FORM_DRAFT]: OnyxTypes.Form;
[ONYXKEYS.FORMS.SETTINGS_STATUS_SET_CLEAR_AFTER_FORM]: OnyxTypes.Form;
[ONYXKEYS.FORMS.SETTINGS_STATUS_SET_CLEAR_AFTER_FORM_DRAFT]: OnyxTypes.Form;
[ONYXKEYS.FORMS.PRIVATE_NOTES_FORM]: OnyxTypes.Form;
[ONYXKEYS.FORMS.PRIVATE_NOTES_FORM_DRAFT]: OnyxTypes.Form;
[ONYXKEYS.FORMS.I_KNOW_A_TEACHER_FORM]: OnyxTypes.Form;
[ONYXKEYS.FORMS.I_KNOW_A_TEACHER_FORM_DRAFT]: OnyxTypes.Form;
[ONYXKEYS.FORMS.INTRO_SCHOOL_PRINCIPAL_FORM]: OnyxTypes.Form;
[ONYXKEYS.FORMS.INTRO_SCHOOL_PRINCIPAL_FORM_DRAFT]: OnyxTypes.Form;
[ONYXKEYS.FORMS.PRIVATE_NOTES_FORM]: OnyxTypes.PrivateNotesForm;
[ONYXKEYS.FORMS.PRIVATE_NOTES_FORM_DRAFT]: OnyxTypes.PrivateNotesForm;
[ONYXKEYS.FORMS.I_KNOW_A_TEACHER_FORM]: OnyxTypes.IKnowATeacherForm;
[ONYXKEYS.FORMS.I_KNOW_A_TEACHER_FORM_DRAFT]: OnyxTypes.IKnowATeacherForm;
[ONYXKEYS.FORMS.INTRO_SCHOOL_PRINCIPAL_FORM]: OnyxTypes.IntroSchoolPrincipalForm;
[ONYXKEYS.FORMS.INTRO_SCHOOL_PRINCIPAL_FORM_DRAFT]: OnyxTypes.IntroSchoolPrincipalForm;
[ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD]: OnyxTypes.Form;
[ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD_DRAFT]: OnyxTypes.Form;
[ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM]: OnyxTypes.Form;
[ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM_DRAFT]: OnyxTypes.Form;
[ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM]: OnyxTypes.Form;
[ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM_DRAFT]: OnyxTypes.Form | undefined;
[ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM_DRAFT]: OnyxTypes.Form;
[ONYXKEYS.FORMS.POLICY_REPORT_FIELD_EDIT_FORM]: OnyxTypes.Form;
[ONYXKEYS.FORMS.POLICY_REPORT_FIELD_EDIT_FORM_DRAFT]: OnyxTypes.Form | undefined;
[ONYXKEYS.FORMS.POLICY_REPORT_FIELD_EDIT_FORM_DRAFT]: OnyxTypes.Form;
// @ts-expect-error Different values are defined under the same key: ReimbursementAccount and ReimbursementAccountForm
blazejkustra marked this conversation as resolved.
Show resolved Hide resolved
[ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM]: OnyxTypes.Form;
[ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT]: OnyxTypes.Form;
};

type OnyxKeyValue<TOnyxKey extends (OnyxKey | OnyxCollectionKey) & keyof OnyxValues> = OnyxEntry<OnyxValues[TOnyxKey]>;
Expand Down
3 changes: 2 additions & 1 deletion src/components/AmountTextInput.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import type {ForwardedRef} from 'react';
import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
import useThemeStyles from '@hooks/useThemeStyles';
import CONST from '@src/CONST';
Expand Down Expand Up @@ -34,7 +35,7 @@ type AmountTextInputProps = {

function AmountTextInput(
{formattedAmount, onChangeAmount, placeholder, selection, onSelectionChange, style, touchableInputWrapperStyle, onKeyPress}: AmountTextInputProps,
ref: BaseTextInputRef,
ref: ForwardedRef<BaseTextInputRef>,
) {
const styles = useThemeStyles();
return (
Expand Down
3 changes: 2 additions & 1 deletion src/components/Composer/index.android.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type {ForwardedRef} from 'react';
import React, {useCallback, useEffect, useMemo, useRef} from 'react';
import type {TextInput} from 'react-native';
import {StyleSheet} from 'react-native';
import type {AnimatedTextInputRef} from '@components/RNTextInput';
import RNTextInput from '@components/RNTextInput';
import useResetComposerFocus from '@hooks/useResetComposerFocus';
import useTheme from '@hooks/useTheme';
Expand Down Expand Up @@ -37,7 +38,7 @@ function Composer(
/**
* Set the TextInput Ref
*/
const setTextInputRef = useCallback((el: TextInput) => {
const setTextInputRef = useCallback((el: AnimatedTextInputRef) => {
textInput.current = el;
if (typeof ref !== 'function' || textInput.current === null) {
return;
Expand Down
5 changes: 3 additions & 2 deletions src/components/Composer/index.ios.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type {ForwardedRef} from 'react';
import React, {useCallback, useEffect, useMemo, useRef} from 'react';
import type {TextInput} from 'react-native';
import {StyleSheet} from 'react-native';
import type {AnimatedTextInputRef} from '@components/RNTextInput';
import RNTextInput from '@components/RNTextInput';
import useResetComposerFocus from '@hooks/useResetComposerFocus';
import useTheme from '@hooks/useTheme';
Expand All @@ -28,15 +29,15 @@ function Composer(
}: ComposerProps,
ref: ForwardedRef<TextInput>,
) {
const textInput = useRef<TextInput | null>(null);
const textInput = useRef<AnimatedTextInputRef | null>(null);
const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput);
const styles = useThemeStyles();
const theme = useTheme();

/**
* Set the TextInput Ref
*/
const setTextInputRef = useCallback((el: TextInput) => {
const setTextInputRef = useCallback((el: AnimatedTextInputRef) => {
textInput.current = el;
if (typeof ref !== 'function' || textInput.current === null) {
return;
Expand Down
7 changes: 4 additions & 3 deletions src/components/Composer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@ import type {BaseSyntheticEvent, ForwardedRef} from 'react';
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import {flushSync} from 'react-dom';
// eslint-disable-next-line no-restricted-imports
import type {DimensionValue, NativeSyntheticEvent, Text as RNText, TextInput, TextInputKeyPressEventData, TextInputProps, TextInputSelectionChangeEventData} from 'react-native';
import type {DimensionValue, NativeSyntheticEvent, Text as RNText, TextInputKeyPressEventData, TextInputProps, TextInputSelectionChangeEventData} from 'react-native';
import {StyleSheet, View} from 'react-native';
import type {AnimatedProps} from 'react-native-reanimated';
import type {AnimatedTextInputRef} from '@components/RNTextInput';
import RNTextInput from '@components/RNTextInput';
import Text from '@components/Text';
import useIsScrollBarVisible from '@hooks/useIsScrollBarVisible';
Expand Down Expand Up @@ -83,7 +84,7 @@ function Composer(
const {windowWidth} = useWindowDimensions();
const navigation = useNavigation();
const textRef = useRef<HTMLElement & RNText>(null);
const textInput = useRef<(HTMLTextAreaElement & TextInput) | null>(null);
const textInput = useRef<AnimatedTextInputRef | null>(null);
blazejkustra marked this conversation as resolved.
Show resolved Hide resolved
const [numberOfLines, setNumberOfLines] = useState(numberOfLinesProp);
const [selection, setSelection] = useState<
| {
Expand Down Expand Up @@ -359,7 +360,7 @@ function Composer(
autoComplete="off"
autoCorrect={!Browser.isMobileSafari()}
placeholderTextColor={theme.placeholderText}
ref={(el: TextInput & HTMLTextAreaElement) => (textInput.current = el)}
ref={(el) => (textInput.current = el)}
selection={selection}
style={inputStyleMemo}
value={value}
Expand Down
4 changes: 0 additions & 4 deletions src/components/Form/FormContext.js

This file was deleted.

12 changes: 12 additions & 0 deletions src/components/Form/FormContext.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import {createContext} from 'react';
import type {RegisterInput} from './types';

type FormContext = {
registerInput: RegisterInput;
};

export default createContext<FormContext>({
registerInput: () => {
throw new Error('Registered input should be wrapped with FormWrapper');
},
});
Loading
Loading