@soyfri/shared-library 1.4.8 → 1.4.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/DateTimePicker/DateTimePicker.cjs +6 -3
- package/components/DateTimePicker/DateTimePicker.cjs.map +1 -1
- package/components/DateTimePicker/DateTimePicker.d.ts +1 -0
- package/components/DateTimePicker/DateTimePicker.js +6 -3
- package/components/DateTimePicker/DateTimePicker.js.map +1 -1
- package/package.json +1 -1
|
@@ -88,7 +88,8 @@ const DateTimePicker = (_a) => {
|
|
|
88
88
|
minutesStep,
|
|
89
89
|
minTime,
|
|
90
90
|
viewRenderers,
|
|
91
|
-
timeSteps
|
|
91
|
+
timeSteps,
|
|
92
|
+
ampm
|
|
92
93
|
} = _b, rest = __objRest(_b, [
|
|
93
94
|
"label",
|
|
94
95
|
"selectedDateTime",
|
|
@@ -106,7 +107,8 @@ const DateTimePicker = (_a) => {
|
|
|
106
107
|
"minutesStep",
|
|
107
108
|
"minTime",
|
|
108
109
|
"viewRenderers",
|
|
109
|
-
"timeSteps"
|
|
110
|
+
"timeSteps",
|
|
111
|
+
"ampm"
|
|
110
112
|
]);
|
|
111
113
|
var _a2, _b2, _c;
|
|
112
114
|
const [error, setError] = React.useState(null);
|
|
@@ -195,7 +197,8 @@ const DateTimePicker = (_a) => {
|
|
|
195
197
|
})
|
|
196
198
|
})
|
|
197
199
|
}),
|
|
198
|
-
localeText: __spreadValues({}, customLocaleText)
|
|
200
|
+
localeText: __spreadValues({}, customLocaleText),
|
|
201
|
+
ampm: false
|
|
199
202
|
}, rest)
|
|
200
203
|
)
|
|
201
204
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimePicker.cjs","sources":["../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField, TextFieldProps } from '@mui/material';\n\n// Define las props para el DateTimePicker\nexport interface DateTimePickerProps {\n label: string;\n selectedDateTime: Dayjs | null;\n onDateTimeChange: (dateTime: Dayjs | null) => void;\n minDateTime?: Dayjs;\n maxDateTime?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n inputFormat?: string;\n slotProps?: any;\n clearButtonText?: string;\n cancelButtonText?: string;\n acceptButtonText?: string;\n minutesStep?: number;\n minTime?: Dayjs;\n customClass?: string;\n viewRenderers?: any\n timeSteps?: any\n}\n\n// 1. Crear un componente estilizado para el TextField\n// Este componente tendrá los mismos estilos de altura, padding y label que tu Input.tsx\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n },\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n/**\n * Custom Material UI DateTimePicker component.\n * Allows selecting a date and time, and updates a Dayjs state.\n */\nexport const DateTimePicker: React.FC<DateTimePickerProps> = ({\n label,\n selectedDateTime,\n onDateTimeChange,\n minDateTime,\n maxDateTime,\n disabled,\n readOnly,\n customClass= '',\n inputFormat,\n slotProps,\n clearButtonText,\n cancelButtonText,\n acceptButtonText,\n minutesStep,\n minTime,\n viewRenderers,\n timeSteps,\n ...rest\n}) => {\n const [error, setError] = React.useState<DateValidationError | null>(null);\n\n const errorMessage = useMemo(() => {\n switch (error) {\n case 'minDate':\n case 'maxDate':\n case 'invalidDate': {\n return 'Formato de fecha/hora inválido';\n }\n case 'disableFuture': {\n return 'No se permiten fechas/horas futuras';\n }\n case 'disablePast': {\n return 'No se permiten fechas/horas pasadas';\n }\n default: {\n return '';\n }\n }\n }, [error]);\n\n const customLocaleText = useMemo(() => {\n const text: Record<string, string> = {};\n if (clearButtonText) text.clearButtonLabel = clearButtonText;\n if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;\n if (acceptButtonText) text.okButtonLabel = acceptButtonText;\n return text;\n }, [clearButtonText, cancelButtonText, acceptButtonText]);\n\n return (\n <LocalizationProvider dateAdapter={AdapterDayjs}>\n <Box\n sx={{\n width: '100%',\n display: 'grid',\n marginBottom: '10px',\n marginTop: '10px'\n }}\n\n >\n <MuiDateTimePicker\n className={customClass}\n label={label}\n value={selectedDateTime}\n onChange={onDateTimeChange}\n minDateTime={minDateTime}\n maxDateTime={maxDateTime}\n minutesStep={minutesStep}\n disabled={disabled}\n readOnly={readOnly}\n minTime={minTime}\n format={inputFormat ? inputFormat: 'DD/MM/YYYY HH:mm'}\n viewRenderers={viewRenderers}\n timeSteps={timeSteps}\n sx={{\n '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n maxHeight: '28px',\n borderRadius: '10px',\n },\n '& .MuiInputLabel-root': {\n // El label se alinea con el padding del input base.\n top: '50%',\n transform: 'translate(14px, -50%)',\n \n // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n fontSize: '16px !important',\n '> legend': {\n display: 'none', // Ocultar el legend del outline\n }\n },\n },\n '& .MuiPickersInputBase-root > fieldset > legend':{\n display: 'none', // Ocultar el legend del outline\n },\n }}\n slotProps={{\n ...slotProps,\n // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n textField: {\n ...slotProps?.textField,\n helperText: errorMessage || slotProps?.textField?.helperText,\n error: !!errorMessage || slotProps?.textField?.error,\n InputProps: {\n ...slotProps?.textField?.InputProps,\n inputComponent: StyledTextField,\n },\n },\n }}\n localeText={{ ...customLocaleText }}\n {...rest}\n />\n </Box>\n </LocalizationProvider>\n );\n};\n\nexport default DateTimePicker;"],"names":["styled","TextField","useMemo","jsx","LocalizationProvider","AdapterDayjs","Box","MuiDateTimePicker","_a","_b"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"DateTimePicker.cjs","sources":["../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField, TextFieldProps } from '@mui/material';\n\n// Define las props para el DateTimePicker\nexport interface DateTimePickerProps {\n label: string;\n selectedDateTime: Dayjs | null;\n onDateTimeChange: (dateTime: Dayjs | null) => void;\n minDateTime?: Dayjs;\n maxDateTime?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n inputFormat?: string;\n slotProps?: any;\n clearButtonText?: string;\n cancelButtonText?: string;\n acceptButtonText?: string;\n minutesStep?: number;\n minTime?: Dayjs;\n customClass?: string;\n viewRenderers?: any\n timeSteps?: any\n ampm?: boolean;\n}\n\n// 1. Crear un componente estilizado para el TextField\n// Este componente tendrá los mismos estilos de altura, padding y label que tu Input.tsx\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n },\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n/**\n * Custom Material UI DateTimePicker component.\n * Allows selecting a date and time, and updates a Dayjs state.\n */\nexport const DateTimePicker: React.FC<DateTimePickerProps> = ({\n label,\n selectedDateTime,\n onDateTimeChange,\n minDateTime,\n maxDateTime,\n disabled,\n readOnly,\n customClass= '',\n inputFormat,\n slotProps,\n clearButtonText,\n cancelButtonText,\n acceptButtonText,\n minutesStep,\n minTime,\n viewRenderers,\n timeSteps,\n ampm,\n ...rest\n}) => {\n const [error, setError] = React.useState<DateValidationError | null>(null);\n\n const errorMessage = useMemo(() => {\n switch (error) {\n case 'minDate':\n case 'maxDate':\n case 'invalidDate': {\n return 'Formato de fecha/hora inválido';\n }\n case 'disableFuture': {\n return 'No se permiten fechas/horas futuras';\n }\n case 'disablePast': {\n return 'No se permiten fechas/horas pasadas';\n }\n default: {\n return '';\n }\n }\n }, [error]);\n\n const customLocaleText = useMemo(() => {\n const text: Record<string, string> = {};\n if (clearButtonText) text.clearButtonLabel = clearButtonText;\n if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;\n if (acceptButtonText) text.okButtonLabel = acceptButtonText;\n return text;\n }, [clearButtonText, cancelButtonText, acceptButtonText]);\n\n return (\n <LocalizationProvider dateAdapter={AdapterDayjs}>\n <Box\n sx={{\n width: '100%',\n display: 'grid',\n marginBottom: '10px',\n marginTop: '10px'\n }}\n\n >\n <MuiDateTimePicker\n className={customClass}\n label={label}\n value={selectedDateTime}\n onChange={onDateTimeChange}\n minDateTime={minDateTime}\n maxDateTime={maxDateTime}\n minutesStep={minutesStep}\n disabled={disabled}\n readOnly={readOnly}\n minTime={minTime}\n format={inputFormat ? inputFormat: 'DD/MM/YYYY HH:mm'}\n viewRenderers={viewRenderers}\n timeSteps={timeSteps}\n sx={{\n '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n maxHeight: '28px',\n borderRadius: '10px',\n },\n '& .MuiInputLabel-root': {\n // El label se alinea con el padding del input base.\n top: '50%',\n transform: 'translate(14px, -50%)',\n \n // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n fontSize: '16px !important',\n '> legend': {\n display: 'none', // Ocultar el legend del outline\n }\n },\n },\n '& .MuiPickersInputBase-root > fieldset > legend':{\n display: 'none', // Ocultar el legend del outline\n },\n }}\n slotProps={{\n ...slotProps,\n // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n textField: {\n ...slotProps?.textField,\n helperText: errorMessage || slotProps?.textField?.helperText,\n error: !!errorMessage || slotProps?.textField?.error,\n InputProps: {\n ...slotProps?.textField?.InputProps,\n inputComponent: StyledTextField,\n },\n },\n }}\n localeText={{ ...customLocaleText }}\n ampm={false}\n {...rest}\n />\n </Box>\n </LocalizationProvider>\n );\n};\n\nexport default DateTimePicker;"],"names":["styled","TextField","useMemo","jsx","LocalizationProvider","AdapterDayjs","Box","MuiDateTimePicker","_a","_b"],"mappings":"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"}
|
|
@@ -86,7 +86,8 @@ const DateTimePicker = (_a) => {
|
|
|
86
86
|
minutesStep,
|
|
87
87
|
minTime,
|
|
88
88
|
viewRenderers,
|
|
89
|
-
timeSteps
|
|
89
|
+
timeSteps,
|
|
90
|
+
ampm
|
|
90
91
|
} = _b, rest = __objRest(_b, [
|
|
91
92
|
"label",
|
|
92
93
|
"selectedDateTime",
|
|
@@ -104,7 +105,8 @@ const DateTimePicker = (_a) => {
|
|
|
104
105
|
"minutesStep",
|
|
105
106
|
"minTime",
|
|
106
107
|
"viewRenderers",
|
|
107
|
-
"timeSteps"
|
|
108
|
+
"timeSteps",
|
|
109
|
+
"ampm"
|
|
108
110
|
]);
|
|
109
111
|
var _a2, _b2, _c;
|
|
110
112
|
const [error, setError] = React__default.useState(null);
|
|
@@ -193,7 +195,8 @@ const DateTimePicker = (_a) => {
|
|
|
193
195
|
})
|
|
194
196
|
})
|
|
195
197
|
}),
|
|
196
|
-
localeText: __spreadValues({}, customLocaleText)
|
|
198
|
+
localeText: __spreadValues({}, customLocaleText),
|
|
199
|
+
ampm: false
|
|
197
200
|
}, rest)
|
|
198
201
|
)
|
|
199
202
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimePicker.js","sources":["../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField, TextFieldProps } from '@mui/material';\n\n// Define las props para el DateTimePicker\nexport interface DateTimePickerProps {\n label: string;\n selectedDateTime: Dayjs | null;\n onDateTimeChange: (dateTime: Dayjs | null) => void;\n minDateTime?: Dayjs;\n maxDateTime?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n inputFormat?: string;\n slotProps?: any;\n clearButtonText?: string;\n cancelButtonText?: string;\n acceptButtonText?: string;\n minutesStep?: number;\n minTime?: Dayjs;\n customClass?: string;\n viewRenderers?: any\n timeSteps?: any\n}\n\n// 1. Crear un componente estilizado para el TextField\n// Este componente tendrá los mismos estilos de altura, padding y label que tu Input.tsx\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n },\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n/**\n * Custom Material UI DateTimePicker component.\n * Allows selecting a date and time, and updates a Dayjs state.\n */\nexport const DateTimePicker: React.FC<DateTimePickerProps> = ({\n label,\n selectedDateTime,\n onDateTimeChange,\n minDateTime,\n maxDateTime,\n disabled,\n readOnly,\n customClass= '',\n inputFormat,\n slotProps,\n clearButtonText,\n cancelButtonText,\n acceptButtonText,\n minutesStep,\n minTime,\n viewRenderers,\n timeSteps,\n ...rest\n}) => {\n const [error, setError] = React.useState<DateValidationError | null>(null);\n\n const errorMessage = useMemo(() => {\n switch (error) {\n case 'minDate':\n case 'maxDate':\n case 'invalidDate': {\n return 'Formato de fecha/hora inválido';\n }\n case 'disableFuture': {\n return 'No se permiten fechas/horas futuras';\n }\n case 'disablePast': {\n return 'No se permiten fechas/horas pasadas';\n }\n default: {\n return '';\n }\n }\n }, [error]);\n\n const customLocaleText = useMemo(() => {\n const text: Record<string, string> = {};\n if (clearButtonText) text.clearButtonLabel = clearButtonText;\n if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;\n if (acceptButtonText) text.okButtonLabel = acceptButtonText;\n return text;\n }, [clearButtonText, cancelButtonText, acceptButtonText]);\n\n return (\n <LocalizationProvider dateAdapter={AdapterDayjs}>\n <Box\n sx={{\n width: '100%',\n display: 'grid',\n marginBottom: '10px',\n marginTop: '10px'\n }}\n\n >\n <MuiDateTimePicker\n className={customClass}\n label={label}\n value={selectedDateTime}\n onChange={onDateTimeChange}\n minDateTime={minDateTime}\n maxDateTime={maxDateTime}\n minutesStep={minutesStep}\n disabled={disabled}\n readOnly={readOnly}\n minTime={minTime}\n format={inputFormat ? inputFormat: 'DD/MM/YYYY HH:mm'}\n viewRenderers={viewRenderers}\n timeSteps={timeSteps}\n sx={{\n '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n maxHeight: '28px',\n borderRadius: '10px',\n },\n '& .MuiInputLabel-root': {\n // El label se alinea con el padding del input base.\n top: '50%',\n transform: 'translate(14px, -50%)',\n \n // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n fontSize: '16px !important',\n '> legend': {\n display: 'none', // Ocultar el legend del outline\n }\n },\n },\n '& .MuiPickersInputBase-root > fieldset > legend':{\n display: 'none', // Ocultar el legend del outline\n },\n }}\n slotProps={{\n ...slotProps,\n // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n textField: {\n ...slotProps?.textField,\n helperText: errorMessage || slotProps?.textField?.helperText,\n error: !!errorMessage || slotProps?.textField?.error,\n InputProps: {\n ...slotProps?.textField?.InputProps,\n inputComponent: StyledTextField,\n },\n },\n }}\n localeText={{ ...customLocaleText }}\n {...rest}\n />\n </Box>\n </LocalizationProvider>\n );\n};\n\nexport default DateTimePicker;"],"names":["React","MuiDateTimePicker","_a","_b"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"DateTimePicker.js","sources":["../../../src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField, TextFieldProps } from '@mui/material';\n\n// Define las props para el DateTimePicker\nexport interface DateTimePickerProps {\n label: string;\n selectedDateTime: Dayjs | null;\n onDateTimeChange: (dateTime: Dayjs | null) => void;\n minDateTime?: Dayjs;\n maxDateTime?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n inputFormat?: string;\n slotProps?: any;\n clearButtonText?: string;\n cancelButtonText?: string;\n acceptButtonText?: string;\n minutesStep?: number;\n minTime?: Dayjs;\n customClass?: string;\n viewRenderers?: any\n timeSteps?: any\n ampm?: boolean;\n}\n\n// 1. Crear un componente estilizado para el TextField\n// Este componente tendrá los mismos estilos de altura, padding y label que tu Input.tsx\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n },\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n/**\n * Custom Material UI DateTimePicker component.\n * Allows selecting a date and time, and updates a Dayjs state.\n */\nexport const DateTimePicker: React.FC<DateTimePickerProps> = ({\n label,\n selectedDateTime,\n onDateTimeChange,\n minDateTime,\n maxDateTime,\n disabled,\n readOnly,\n customClass= '',\n inputFormat,\n slotProps,\n clearButtonText,\n cancelButtonText,\n acceptButtonText,\n minutesStep,\n minTime,\n viewRenderers,\n timeSteps,\n ampm,\n ...rest\n}) => {\n const [error, setError] = React.useState<DateValidationError | null>(null);\n\n const errorMessage = useMemo(() => {\n switch (error) {\n case 'minDate':\n case 'maxDate':\n case 'invalidDate': {\n return 'Formato de fecha/hora inválido';\n }\n case 'disableFuture': {\n return 'No se permiten fechas/horas futuras';\n }\n case 'disablePast': {\n return 'No se permiten fechas/horas pasadas';\n }\n default: {\n return '';\n }\n }\n }, [error]);\n\n const customLocaleText = useMemo(() => {\n const text: Record<string, string> = {};\n if (clearButtonText) text.clearButtonLabel = clearButtonText;\n if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;\n if (acceptButtonText) text.okButtonLabel = acceptButtonText;\n return text;\n }, [clearButtonText, cancelButtonText, acceptButtonText]);\n\n return (\n <LocalizationProvider dateAdapter={AdapterDayjs}>\n <Box\n sx={{\n width: '100%',\n display: 'grid',\n marginBottom: '10px',\n marginTop: '10px'\n }}\n\n >\n <MuiDateTimePicker\n className={customClass}\n label={label}\n value={selectedDateTime}\n onChange={onDateTimeChange}\n minDateTime={minDateTime}\n maxDateTime={maxDateTime}\n minutesStep={minutesStep}\n disabled={disabled}\n readOnly={readOnly}\n minTime={minTime}\n format={inputFormat ? inputFormat: 'DD/MM/YYYY HH:mm'}\n viewRenderers={viewRenderers}\n timeSteps={timeSteps}\n sx={{\n '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n maxHeight: '28px',\n borderRadius: '10px',\n },\n '& .MuiInputLabel-root': {\n // El label se alinea con el padding del input base.\n top: '50%',\n transform: 'translate(14px, -50%)',\n \n // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n fontSize: '16px !important',\n '> legend': {\n display: 'none', // Ocultar el legend del outline\n }\n },\n },\n '& .MuiPickersInputBase-root > fieldset > legend':{\n display: 'none', // Ocultar el legend del outline\n },\n }}\n slotProps={{\n ...slotProps,\n // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n textField: {\n ...slotProps?.textField,\n helperText: errorMessage || slotProps?.textField?.helperText,\n error: !!errorMessage || slotProps?.textField?.error,\n InputProps: {\n ...slotProps?.textField?.InputProps,\n inputComponent: StyledTextField,\n },\n },\n }}\n localeText={{ ...customLocaleText }}\n ampm={false}\n {...rest}\n />\n </Box>\n </LocalizationProvider>\n );\n};\n\nexport default DateTimePicker;"],"names":["React","MuiDateTimePicker","_a","_b"],"mappings":"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"}
|