All files / src/components/PageForm index.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { CSSProperties, useState } from 'react';
 
import { Box, useTheme } from '@mui/material';
 
import useDeviceInfo from '../../utils/useDeviceInfo';
import BusySpinner from '../BusySpinner';
import FormBottomBar, { FormButton } from '../FormBottomBar';
 
export type PageFormProps = {
  children: React.ReactNode;
  cancelID: string;
  saveID: string;
  onCancel: () => void;
  onSave: () => void;
  cancelButtonText: string;
  saveButtonText: string;
  saveDisabled?: boolean;
  className?: string;
  hideEdit?: boolean;
  additionalRightButtons?: FormButton[];
  style?: CSSProperties;
  desktopOffset?: string;
};
 
export default function PageForm(props: PageFormProps): JSX.Element {
  const { children, className, hideEdit, onSave, style, ...bottomBarProps } = props;
  const theme = useTheme();
  const { isMobile } = useDeviceInfo();
  const [processing, setProcessing] = useState(false);
 
  const handleSave = async () => {
    setProcessing(true);
    // eslint-disable-next-line @typescript-eslint/await-thenable
    await onSave(); // <-- we want all onSaves to be async
    setProcessing(false);
  };
 
  return (
    <>
      {processing && <BusySpinner withSkrim={true} />}
      <Box
        className={className}
        paddingBottom={hideEdit ? theme.spacing(4) : theme.spacing(isMobile ? 25 : 15)}
        style={style}
      >
        {children}
      </Box>
      {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
      {!hideEdit && <FormBottomBar onSave={handleSave} {...bottomBarProps} />}
    </>
  );
}