react-multi-step-form/src/components/AppointmentForm/ButtonAppBar.js at 96afe1d345724ea9b8f8c3652b3283eafbd38f07 · nphivu414/react-multi-step-form · GitHub

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import * as React from "react";
import Box from "@mui/material/Box";
import { makeStyles } from "@material-ui/core/styles";
import { Button, CircularProgress } from "@material-ui/core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faArrowLeftLong,
  faCheck,
  faArrowRightLong,
} from "@fortawesome/free-solid-svg-icons";

const useStyles = makeStyles((theme) => ({
  backButton: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
    "&:hover": {
      backgroundColor: theme.palette.primary.dark,
    },
  },
  nextButton: {
    backgroundColor: theme.palette.primary.main,
    color: "#fff !Important",
    "&.MuiButton-root.Mui-disabled": {
      opacity: "0.4 !Important",
      color: "#fff !Important",
    },
    "&:hover": {
      backgroundColor: theme.palette.primary.dark,
    },
  },
}));

export default function ButtonAppBar(props) {
  const classes = useStyles();
  const {
    nextHide,
    _handleBack,
    isSubmitting,
    isNextdisabled,
    isLastStep,
  } = props;

  return (
    <Box
      component="footer"
      sx={{
        position: "relative",
        width: "100%",
      }}
    >
      <Box
        sx={{
          background: "#F2F5FB",
          color: "#1F2327",
          height: "48px",
          alignItems: "center",
          display: "flex",
          justifyContent: "space-between",
          padding: "8px",
        }}
      >
        <Button
          style={{
            borderRadius: "500px",
            backgroundColor: "#fff",
            boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.09)",
            padding: "2px 12px",
          }}
          startIcon={<FontAwesomeIcon icon={faArrowLeftLong} />}
          className={classes.backButton}
          onClick={_handleBack}
        >
          <span
            style={{ fontSize: "14px", fontWeight: "600", padding: "4px 2px" }}
          >
            Back
          </span>
        </Button>
        {!nextHide ? (
          <Button
            style={{
              display: "flex",
              flexDirection: "row",
              alignItems: "center",
              padding: "8px 12px",
              gap: "4px",
              height: "32px",
              background: "#007BFF",
              borderRadius: "500px",
              backgroundColor: "#007BFF",
            }}
            startIcon={
              isLastStep ? (
                <FontAwesomeIcon icon={faCheck} />
              ) : (
                <FontAwesomeIcon icon={faArrowRightLong} size="sm" />
              )
            }
            className={classes.nextButton}
            disabled={isNextdisabled || isSubmitting}
            type="submit"
          >
            {isLastStep ? (
              <span style={{ padding: "4px 2px" }}>Confirm appointment </span>
            ) : (
              <span
                style={{
                  fontWeight: "600",
                  fontSize: "14px",
                  padding: "4px 2px",
                }}
              >
                Next
              </span>
            )}
          </Button>
        ) : (
          ""
        )}

        {isSubmitting && <CircularProgress style={{position: 'absolute',bottom: '300px',left: '200px',zIndex: '1',color: '#007bff'}} size={100} />}
      </Box>
    </Box>
  );
}