norma-library
Version:
Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.
53 lines • 2.42 kB
JavaScript
import React from 'react';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
import { MobileDatePicker as MuiMobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
import { DesktopDatePicker as MuiDesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { styled } from '@mui/material/styles';
import 'dayjs/locale/pt-br';
import 'dayjs/locale/en';
import 'dayjs/locale/es';
var MuiDatePickerStyled = styled(MuiDatePicker)({
'& .MuiOutlinedInput-notchedOutline': {
border: 'none',
borderRadius: 0,
borderBottom: '1px solid #666666',
},
'& .MuiFormLabel-root': {
backgroundColor: '#fff',
padding: '0 5px',
},
});
var MuiMobileDatePickerStyled = styled(MuiMobileDatePicker)({
'& .MuiOutlinedInput-notchedOutline': {
border: 'none',
borderRadius: 0,
borderBottom: '1px solid #666666',
},
'& .MuiFormLabel-root': {
backgroundColor: '#fff',
padding: '0 5px',
},
});
var MuiDesktopDatePickerStyled = styled(MuiDesktopDatePicker)({
'& .MuiOutlinedInput-notchedOutline': {
border: 'none',
borderRadius: 0,
borderBottom: '1px solid #666666',
},
'& .MuiFormLabel-root': {
backgroundColor: '#fff',
padding: '0 5px',
},
});
export var DatePicker = function (_a) {
var label = _a.label, _b = _a.format, format = _b === void 0 ? 'DD/MM/YYYY' : _b, _c = _a.language, language = _c === void 0 ? 'pt-br' : _c, _d = _a.variant, variant = _d === void 0 ? 'desktop' : _d;
return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: language },
React.createElement(DemoContainer, { components: ['TimePicker', 'MobileTimePicker', 'DesktopTimePicker'] },
variant === 'responsive' && React.createElement(MuiDatePickerStyled, { label: label, format: format }),
variant === 'mobile' && React.createElement(MuiMobileDatePickerStyled, { label: label, format: format }),
variant === 'desktop' && React.createElement(MuiDesktopDatePickerStyled, { label: label, format: format }))));
};
//# sourceMappingURL=DatePicker.js.map