add DatePicker, translate DatePicker and DateTimePicker into Polish
This commit is contained in:
parent
48da47a8ab
commit
0bdb7cdcdf
23
src/common/Picker/DatePicker.tsx
Normal file
23
src/common/Picker/DatePicker.tsx
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
import React from 'react';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
import {
|
||||||
|
DatePicker as MUIDatePicker,
|
||||||
|
DatePickerProps,
|
||||||
|
} from '@material-ui/pickers';
|
||||||
|
import useI18N from './useI18N';
|
||||||
|
import useDialogStyles from './useDialogStyles';
|
||||||
|
|
||||||
|
function DatePicker({ className, ...props }: DatePickerProps) {
|
||||||
|
const classes = useDialogStyles();
|
||||||
|
const translations = useI18N();
|
||||||
|
return (
|
||||||
|
<MUIDatePicker
|
||||||
|
{...props}
|
||||||
|
DialogProps={{ className: clsx(className, classes.dialog) }}
|
||||||
|
okLabel={translations.okLabel}
|
||||||
|
cancelLabel={translations.cancelLabel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DatePicker;
|
|
@ -4,39 +4,25 @@ import {
|
||||||
DateTimePicker as MUIDateTimePicker,
|
DateTimePicker as MUIDateTimePicker,
|
||||||
DateTimePickerProps,
|
DateTimePickerProps,
|
||||||
} from '@material-ui/pickers';
|
} from '@material-ui/pickers';
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
import useI18N from './useI18N';
|
||||||
|
import useDialogStyles from './useDialogStyles';
|
||||||
|
|
||||||
function DateTimePicker({
|
function DateTimePicker({
|
||||||
className,
|
className,
|
||||||
ampm = false,
|
ampm = false,
|
||||||
...props
|
...props
|
||||||
}: DateTimePickerProps) {
|
}: DateTimePickerProps) {
|
||||||
const classes = useStyles();
|
const classes = useDialogStyles();
|
||||||
|
const translations = useI18N();
|
||||||
return (
|
return (
|
||||||
<MUIDateTimePicker
|
<MUIDateTimePicker
|
||||||
{...props}
|
{...props}
|
||||||
ampm={ampm}
|
ampm={ampm}
|
||||||
DialogProps={{ className: clsx(className, classes.dialog) }}
|
DialogProps={{ className: clsx(className, classes.dialog) }}
|
||||||
|
okLabel={translations.okLabel}
|
||||||
|
cancelLabel={translations.cancelLabel}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const useStyles = makeStyles(theme => ({
|
|
||||||
dialog: {
|
|
||||||
'& .MuiTabs-indicator': {
|
|
||||||
backgroundColor: theme.palette.secondary.main,
|
|
||||||
},
|
|
||||||
'& .MuiPickersDay-daySelected': {
|
|
||||||
backgroundColor: theme.palette.secondary.main,
|
|
||||||
color: theme.palette.secondary.contrastText,
|
|
||||||
},
|
|
||||||
'& .MuiPickersDay-current:not(.MuiPickersDay-daySelected)': {
|
|
||||||
color: theme.palette.secondary.main,
|
|
||||||
},
|
|
||||||
'& .MuiDialogActions-root .MuiButton-root': {
|
|
||||||
color: theme.palette.secondary.contrastText,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
export default DateTimePicker;
|
export default DateTimePicker;
|
||||||
|
|
21
src/common/Picker/useDialogStyles.ts
Normal file
21
src/common/Picker/useDialogStyles.ts
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
|
||||||
|
const useStyles = makeStyles(theme => ({
|
||||||
|
dialog: {
|
||||||
|
'& .MuiTabs-indicator': {
|
||||||
|
backgroundColor: theme.palette.secondary.main,
|
||||||
|
},
|
||||||
|
'& .MuiPickersDay-daySelected': {
|
||||||
|
backgroundColor: theme.palette.secondary.main,
|
||||||
|
color: theme.palette.secondary.contrastText,
|
||||||
|
},
|
||||||
|
'& .MuiPickersDay-current:not(.MuiPickersDay-daySelected)': {
|
||||||
|
color: theme.palette.secondary.main,
|
||||||
|
},
|
||||||
|
'& .MuiDialogActions-root .MuiButton-root': {
|
||||||
|
color: theme.palette.secondary.contrastText,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default useStyles;
|
18
src/common/Picker/useI18N.ts
Normal file
18
src/common/Picker/useI18N.ts
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { DATE_PICKER } from '@config/namespaces';
|
||||||
|
|
||||||
|
type Translations = {
|
||||||
|
cancelLabel: string;
|
||||||
|
okLabel: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const useI18N = (): Translations => {
|
||||||
|
const { t } = useTranslation(DATE_PICKER);
|
||||||
|
|
||||||
|
return {
|
||||||
|
cancelLabel: t('cancelLabel'),
|
||||||
|
okLabel: t('okLabel'),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useI18N;
|
|
@ -4,6 +4,7 @@ export const LINE_CHART = 'line-chart';
|
||||||
export const INDEX_PAGE = 'index-page';
|
export const INDEX_PAGE = 'index-page';
|
||||||
export const SEARCH_PAGE = 'search-page';
|
export const SEARCH_PAGE = 'search-page';
|
||||||
export const NOT_FOUND_PAGE = 'not-found-page';
|
export const NOT_FOUND_PAGE = 'not-found-page';
|
||||||
|
export const DATE_PICKER = 'date-picker';
|
||||||
export const SERVER_PAGE = {
|
export const SERVER_PAGE = {
|
||||||
COMMON: 'server-page/common',
|
COMMON: 'server-page/common',
|
||||||
INDEX_PAGE: 'server-page/index-page',
|
INDEX_PAGE: 'server-page/index-page',
|
||||||
|
|
6
src/libs/i18n/en/date-picker.ts
Normal file
6
src/libs/i18n/en/date-picker.ts
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
const translations = {
|
||||||
|
okLabel: 'OK',
|
||||||
|
cancelLabel: 'Cancel',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default translations;
|
|
@ -4,6 +4,7 @@ import indexPage from './index-page';
|
||||||
import searchPage from './search-page';
|
import searchPage from './search-page';
|
||||||
import notFoundPage from './not-found-page';
|
import notFoundPage from './not-found-page';
|
||||||
import serverPage from './server-page';
|
import serverPage from './server-page';
|
||||||
|
import datePicker from './date-picker';
|
||||||
import table from './table';
|
import table from './table';
|
||||||
import lineChart from './line-chart';
|
import lineChart from './line-chart';
|
||||||
|
|
||||||
|
@ -13,6 +14,7 @@ const translations = {
|
||||||
[NAMESPACES.SEARCH_PAGE]: searchPage,
|
[NAMESPACES.SEARCH_PAGE]: searchPage,
|
||||||
[NAMESPACES.NOT_FOUND_PAGE]: notFoundPage,
|
[NAMESPACES.NOT_FOUND_PAGE]: notFoundPage,
|
||||||
[NAMESPACES.TABLE]: table,
|
[NAMESPACES.TABLE]: table,
|
||||||
|
[NAMESPACES.DATE_PICKER]: datePicker,
|
||||||
[NAMESPACES.LINE_CHART]: lineChart,
|
[NAMESPACES.LINE_CHART]: lineChart,
|
||||||
...serverPage,
|
...serverPage,
|
||||||
};
|
};
|
||||||
|
|
6
src/libs/i18n/pl/date-picker.ts
Normal file
6
src/libs/i18n/pl/date-picker.ts
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
const translations = {
|
||||||
|
okLabel: 'OK',
|
||||||
|
cancelLabel: 'Anuluj',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default translations;
|
|
@ -4,6 +4,7 @@ import indexPage from './index-page';
|
||||||
import searchPage from './search-page';
|
import searchPage from './search-page';
|
||||||
import notFoundPage from './not-found-page';
|
import notFoundPage from './not-found-page';
|
||||||
import serverPage from './server-page';
|
import serverPage from './server-page';
|
||||||
|
import datePicker from './date-picker';
|
||||||
import table from './table';
|
import table from './table';
|
||||||
import lineChart from './line-chart';
|
import lineChart from './line-chart';
|
||||||
|
|
||||||
|
@ -13,6 +14,7 @@ const translations = {
|
||||||
[NAMESPACES.SEARCH_PAGE]: searchPage,
|
[NAMESPACES.SEARCH_PAGE]: searchPage,
|
||||||
[NAMESPACES.NOT_FOUND_PAGE]: notFoundPage,
|
[NAMESPACES.NOT_FOUND_PAGE]: notFoundPage,
|
||||||
[NAMESPACES.TABLE]: table,
|
[NAMESPACES.TABLE]: table,
|
||||||
|
[NAMESPACES.DATE_PICKER]: datePicker,
|
||||||
[NAMESPACES.LINE_CHART]: lineChart,
|
[NAMESPACES.LINE_CHART]: lineChart,
|
||||||
...serverPage,
|
...serverPage,
|
||||||
};
|
};
|
||||||
|
|
Reference in New Issue
Block a user