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,
};