@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
96 lines • 6.66 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { TextField, Box, FormControl, FormLabel, FormHelperText, InputAdornment, IconButton, } from '@mui/material';
import { DatePicker as MuiDatePicker, TimePicker as MuiTimePicker, DateTimePicker as MuiDateTimePicker, LocalizationProvider, } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { CalendarToday, AccessTime, DateRange, Clear, } from '@mui/icons-material';
import { styled } from '@mui/material/styles';
const StyledFormControl = styled(FormControl)(({ theme, variant = 'default' }) => ({
width: '100%',
'& .MuiInputBase-root': {
...(variant === 'outlined' && {
borderRadius: `calc(${theme.shape.borderRadius}px * 1.5)`,
}),
...(variant === 'filled' && {
backgroundColor: theme.palette.grey[100],
'&:hover': {
backgroundColor: theme.palette.grey[200],
},
'&.Mui-focused': {
backgroundColor: theme.palette.background.paper,
},
}),
},
}));
const renderClearButton = (value, onChange, disabled) => {
if (!value || disabled)
return null;
return (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { size: "small", onClick: () => onChange(null), edge: "end", children: _jsx(Clear, { fontSize: "small" }) }) }));
};
export const DatePicker = ({ type = 'date', value, onChange, label, helperText, error = false, required = false, disabled = false, readOnly = false, placeholder, variant = 'default', size = 'medium', minDate, maxDate, format, showClearButton = false, validate, openOnFocus = false, labelPosition = 'floating', ...props }) => {
const [validationError, setValidationError] = React.useState(null);
const handleChange = (newValue) => {
const dateValue = newValue || null;
const validationResult = validate ? validate(dateValue) : null;
setValidationError(validationResult);
onChange?.(dateValue);
};
const hasError = error || !!validationError;
const displayHelperText = validationError || helperText;
const getTextFieldVariant = () => {
if (variant === 'default')
return 'outlined';
return variant;
};
const commonProps = {
value: value || null,
onChange: handleChange,
disabled,
readOnly,
minDate,
maxDate,
format,
};
const renderPicker = () => {
switch (type) {
case 'time':
const timeProps = props;
return (_jsx(MuiTimePicker, { ...commonProps, views: timeProps.views, minutesStep: timeProps.minutesStep, ampm: timeProps.ampm, renderInput: (params) => (_jsx(TextField, { ...params, variant: getTextFieldVariant(), size: size, error: hasError, required: required, placeholder: placeholder, InputProps: {
...params.InputProps,
endAdornment: showClearButton ? renderClearButton(value || null, handleChange, disabled) : params.InputProps?.endAdornment,
startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(AccessTime, { color: "action" }) })),
} })) }));
case 'datetime':
const dateTimeProps = props;
return (_jsx(MuiDateTimePicker, { ...commonProps, views: dateTimeProps.views, openTo: dateTimeProps.openTo, minutesStep: dateTimeProps.minutesStep, ampm: dateTimeProps.ampm, renderInput: (params) => (_jsx(TextField, { ...params, variant: getTextFieldVariant(), size: size, error: hasError, required: required, placeholder: placeholder, InputProps: {
...params.InputProps,
endAdornment: showClearButton ? renderClearButton(value || null, handleChange, disabled) : params.InputProps?.endAdornment,
startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(DateRange, { color: "action" }) })),
} })) }));
default:
const dateProps = props;
return (_jsx(MuiDatePicker, { ...commonProps, views: dateProps.views, openTo: dateProps.openTo, showDaysOutsideCurrentMonth: dateProps.showDaysOutsideCurrentMonth, renderInput: (params) => (_jsx(TextField, { ...params, variant: getTextFieldVariant(), size: size, error: hasError, required: required, placeholder: placeholder, InputProps: {
...params.InputProps,
endAdornment: showClearButton ? renderClearButton(value || null, handleChange, disabled) : params.InputProps?.endAdornment,
startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(CalendarToday, { color: "action" }) })),
} })) }));
}
};
if (labelPosition === 'top' || labelPosition === 'left') {
return (_jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsxs(StyledFormControl, { variant: variant === 'default' ? undefined : variant, error: hasError, children: [label && (_jsx(FormLabel, { required: required, sx: {
mb: labelPosition === 'top' ? 1 : 0,
mr: labelPosition === 'left' ? 2 : 0,
minWidth: labelPosition === 'left' ? 120 : 'auto',
}, children: label })), _jsx(Box, { sx: { display: labelPosition === 'left' ? 'flex' : 'block', alignItems: 'center' }, children: renderPicker() }), displayHelperText && (_jsx(FormHelperText, { error: hasError, children: displayHelperText }))] }) }));
}
return (_jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsxs(StyledFormControl, { variant: variant === 'default' ? undefined : variant, error: hasError, children: [_jsxs(Box, { sx: { position: 'relative' }, children: [renderPicker(), label && labelPosition === 'floating' && (_jsx(FormLabel, { required: required, sx: {
position: 'absolute',
top: -8,
left: 14,
fontSize: '0.75rem',
backgroundColor: 'background.paper',
px: 0.5,
zIndex: 1,
}, children: label }))] }), displayHelperText && (_jsx(FormHelperText, { error: hasError, children: displayHelperText }))] }) }));
};
//# sourceMappingURL=DatePicker.js.map