Feature/faaliyat rozane cartable

2024-12-23 08:20:46 +00:00
parent f2ef4cd1db
commit 4b25071e41
75 changed files with 3722 additions and 236 deletions
--- a/src/core/components/MuiTimePicker.jsx
+++ b/src/core/components/MuiTimePicker.jsx
@@ -0,0 +1,75 @@
+import React from "react";
+import { LocalizationProvider, MobileTimePicker } from "@mui/x-date-pickers";
+import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import { faIR } from "@mui/x-date-pickers/locales";
+import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import { parseISO, format } from "date-fns";
+
+function MuiTimePicker({ value, setFieldValue, name, minTime, maxTime, helperText, placeholder, error }) {
+    // Ensure value, minTime, maxTime are Date objects
+    const parsedValue = value ? (typeof value === "string" ? parseISO(value) : value) : null;
+    const parsedMinTime = minTime ? (typeof minTime === "string" ? parseISO(minTime) : minTime) : null;
+    const parsedMaxTime = maxTime && (typeof maxTime === "string" ? parseISO(maxTime) : null);
+
+    return (
+        <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
+            <LocalizationProvider
+                dateAdapter={AdapterDateFnsJalali}
+                localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
+            >
+                <MobileTimePicker
+                    value={parsedValue}
+                    sx={{ width: "100%" }}
+                    id={name}
+                    closeOnSelect
+                    label={helperText ? helperText : placeholder}
+                    ampm={false}
+                    timeSteps={{ hours: 1, minutes: 5 }}
+                    views={["hours", "minutes"]}
+                    name={name}
+                    onChange={(newValue) => {
+                        const formattedTime = newValue ? format(new Date(newValue), "HH:mm") : "";
+                        setFieldValue(name, formattedTime);
+                    }}
+                    minTime={parsedMinTime}
+                    maxTime={parsedMaxTime}
+                    slotProps={{
+                        textField: {
+                            placeholder: placeholder,
+                            size: "small",
+                            error: error,
+                            InputProps: {
+                                endAdornment: (
+                                    <InputAdornment position="end">
+                                        <IconButton
+                                            size="small"
+                                            onClick={(event) => {
+                                                event.stopPropagation();
+                                                setFieldValue(name, "");
+                                            }}
+                                            sx={{
+                                                color: "#bfbfbf",
+                                                "&:hover": {
+                                                    backgroundColor: "rgba(189, 189, 189, 0.1)",
+                                                    color: "#363434",
+                                                },
+                                            }}
+                                        >
+                                            <ClearIcon />
+                                        </IconButton>
+                                    </InputAdornment>
+                                ),
+                            },
+                        },
+                    }}
+                />
+                <FormHelperText id="component-helper-text" sx={{ color: error ? "#d32f2f" : "unset" }}>
+                    {helperText ? helperText : ""}
+                </FormHelperText>
+            </LocalizationProvider>
+        </Box>
+    );
+}
+
+export default MuiTimePicker;