add DatePicker, translate DatePicker and DateTimePicker into Polish

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 (
+    <MUIDatePicker
+      {...props}
+      DialogProps={{ className: clsx(className, classes.dialog) }}
+      okLabel={translations.okLabel}
+      cancelLabel={translations.cancelLabel}
+    />
+  );
+}
+
+export default DatePicker;

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 (
     <MUIDateTimePicker
       {...props}
       ampm={ampm}
       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;

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;

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;

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',

src/libs/i18n/en/date-picker.ts

@@ -0,0 +1,6 @@
+const translations = {
+  okLabel: 'OK',
+  cancelLabel: 'Cancel',
+};
+
+export default translations;

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

src/libs/i18n/pl/date-picker.ts

@@ -0,0 +1,6 @@
+const translations = {
+  okLabel: 'OK',
+  cancelLabel: 'Anuluj',
+};
+
+export default translations;

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