diff --git a/src/common/Picker/DatePicker.tsx b/src/common/Picker/DatePicker.tsx new file mode 100644 index 0000000..dd0d53a --- /dev/null +++ b/src/common/Picker/DatePicker.tsx @@ -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 ( + + ); +} + +export default DatePicker; diff --git a/src/common/Picker/DateTimePicker.tsx b/src/common/Picker/DateTimePicker.tsx index 9a171ac..ee745f6 100644 --- a/src/common/Picker/DateTimePicker.tsx +++ b/src/common/Picker/DateTimePicker.tsx @@ -4,39 +4,25 @@ import { DateTimePicker as MUIDateTimePicker, DateTimePickerProps, } from '@material-ui/pickers'; -import { makeStyles } from '@material-ui/core/styles'; +import useI18N from './useI18N'; +import useDialogStyles from './useDialogStyles'; function DateTimePicker({ className, ampm = false, ...props }: DateTimePickerProps) { - const classes = useStyles(); + const classes = useDialogStyles(); + const translations = useI18N(); return ( ); } -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; diff --git a/src/common/Picker/useDialogStyles.ts b/src/common/Picker/useDialogStyles.ts new file mode 100644 index 0000000..af61fad --- /dev/null +++ b/src/common/Picker/useDialogStyles.ts @@ -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; diff --git a/src/common/Picker/useI18N.ts b/src/common/Picker/useI18N.ts new file mode 100644 index 0000000..909de73 --- /dev/null +++ b/src/common/Picker/useI18N.ts @@ -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; diff --git a/src/config/namespaces.ts b/src/config/namespaces.ts index e519049..783e5d0 100644 --- a/src/config/namespaces.ts +++ b/src/config/namespaces.ts @@ -4,6 +4,7 @@ export const LINE_CHART = 'line-chart'; export const INDEX_PAGE = 'index-page'; export const SEARCH_PAGE = 'search-page'; export const NOT_FOUND_PAGE = 'not-found-page'; +export const DATE_PICKER = 'date-picker'; export const SERVER_PAGE = { COMMON: 'server-page/common', INDEX_PAGE: 'server-page/index-page', diff --git a/src/libs/i18n/en/date-picker.ts b/src/libs/i18n/en/date-picker.ts new file mode 100644 index 0000000..eb5d270 --- /dev/null +++ b/src/libs/i18n/en/date-picker.ts @@ -0,0 +1,6 @@ +const translations = { + okLabel: 'OK', + cancelLabel: 'Cancel', +}; + +export default translations; diff --git a/src/libs/i18n/en/index.ts b/src/libs/i18n/en/index.ts index f46ce8e..7121024 100644 --- a/src/libs/i18n/en/index.ts +++ b/src/libs/i18n/en/index.ts @@ -4,6 +4,7 @@ import indexPage from './index-page'; import searchPage from './search-page'; import notFoundPage from './not-found-page'; import serverPage from './server-page'; +import datePicker from './date-picker'; import table from './table'; import lineChart from './line-chart'; @@ -13,6 +14,7 @@ const translations = { [NAMESPACES.SEARCH_PAGE]: searchPage, [NAMESPACES.NOT_FOUND_PAGE]: notFoundPage, [NAMESPACES.TABLE]: table, + [NAMESPACES.DATE_PICKER]: datePicker, [NAMESPACES.LINE_CHART]: lineChart, ...serverPage, }; diff --git a/src/libs/i18n/pl/date-picker.ts b/src/libs/i18n/pl/date-picker.ts new file mode 100644 index 0000000..fbf101c --- /dev/null +++ b/src/libs/i18n/pl/date-picker.ts @@ -0,0 +1,6 @@ +const translations = { + okLabel: 'OK', + cancelLabel: 'Anuluj', +}; + +export default translations; diff --git a/src/libs/i18n/pl/index.ts b/src/libs/i18n/pl/index.ts index f46ce8e..7121024 100644 --- a/src/libs/i18n/pl/index.ts +++ b/src/libs/i18n/pl/index.ts @@ -4,6 +4,7 @@ import indexPage from './index-page'; import searchPage from './search-page'; import notFoundPage from './not-found-page'; import serverPage from './server-page'; +import datePicker from './date-picker'; import table from './table'; import lineChart from './line-chart'; @@ -13,6 +14,7 @@ const translations = { [NAMESPACES.SEARCH_PAGE]: searchPage, [NAMESPACES.NOT_FOUND_PAGE]: notFoundPage, [NAMESPACES.TABLE]: table, + [NAMESPACES.DATE_PICKER]: datePicker, [NAMESPACES.LINE_CHART]: lineChart, ...serverPage, };