Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | 1x 10x 10x 10x 10x 10x 1x 10x 10x 5x 10x | import { useCallback, useMemo, useRef } from 'react';
import { useForm } from 'react-hook-form';
import { Button } from '@repo/ui/components/Button';
import { FormInput } from '@repo/ui/components/Form/FormInput';
import { FormSelect } from '@repo/ui/components/Form/FormSelect';
import { SelectRef } from '@repo/ui/components/Select';
import { WrapperRequest } from '@repo/ui/components/WrapperRequest';
import { MapIcon } from '@repo/ui/icons/Map';
import { useTheme } from '@repo/ui/themes/ThemeContext';
import { useRequestForm } from '@repo/hooks/request';
import { MaintenanceFormType, OptionBase } from '@repo/types/form';
import { REQUEST_FORM_FIELD_RULES } from '@repo/validation/fieldRules';
interface Props {
scopes?: OptionBase[];
isSubmitting?: boolean;
onSubmit: (data: MaintenanceFormType) => void;
onBack: () => void;
onScreenBlur?: (closeModals: () => void) => void;
}
const Maintenance = ({
scopes = [],
isSubmitting,
onSubmit,
onBack,
onScreenBlur,
}: Props) => {
const { theme } = useTheme();
const methods = useForm<MaintenanceFormType>();
const { control } = methods;
const scopeSelectRef = useRef<SelectRef>(null);
const closeModals = useCallback(() => {
scopeSelectRef.current?.close();
}, []);
const { handlePressBack, handleSendRequest, createClearErrorCallback } =
useRequestForm({
methods,
onBack,
onSubmit,
onScreenBlur,
closeModals,
});
const handleNoteChange = useMemo(
() => createClearErrorCallback('note'),
[createClearErrorCallback],
);
return (
<WrapperRequest
title="Maintenance"
onBack={handlePressBack}
disabled={isSubmitting}
footerComponent={
<Button
onPress={handleSendRequest}
isLoading={isSubmitting}
accessibilityLabel="Submit Request"
testID="submit-button"
>
Submit Request
</Button>
}
>
<FormSelect
ref={scopeSelectRef}
control={control}
name="scope"
rules={REQUEST_FORM_FIELD_RULES.maintenance.scope}
label="Scope"
options={scopes}
disabled={isSubmitting}
placeholder="Select scope"
leftIcon={
<MapIcon width={24} height={24} color={theme.colors.icon.active} />
}
testID="scope-select"
/>
<FormInput
control={control}
name="note"
rules={REQUEST_FORM_FIELD_RULES.maintenance.note}
placeholder="Type something"
label="Reason"
disabled={isSubmitting}
testID="reason-input"
onChangeText={handleNoteChange}
/>
</WrapperRequest>
);
};
export default Maintenance;
|