Replace datetimepickers

Removes the datetimepickers from mui and replaces them with the native input elements.
opencast · Jul 14, 2023 · 856544a · 856544a
1 parent 3800f4f
commit 856544a
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 87 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,14 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@date-io/date-fns": "^2.16.0",
     "@emotion/babel-preset-css-prop": "^11.10.0",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@fontsource-variable/roboto-flex": "^5.0.3",
     "@iarna/toml": "^2.2.5",
     "@mui/material": "^5.13.3",
-    "@mui/x-date-pickers": "^5.0.20",
     "@opencast/appkit": "^0.1.2",
     "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.16.5",

diff --git a/src/index.tsx b/src/index.tsx
@@ -8,8 +8,6 @@ import store from './redux/store'
 import { init } from './config'
 import { sleep } from './util/utilityFunctions'
 
-import { LocalizationProvider } from "@mui/x-date-pickers";
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { GlobalHotKeys } from 'react-hotkeys';
 
 import "@fontsource-variable/roboto-flex";
@@ -36,12 +34,10 @@ initialize.then(
     ReactDOM.render(
       <React.StrictMode>
         <Provider store={store}>
-          <LocalizationProvider dateAdapter={AdapterDateFns}>
-            {/* Workaround for getApplicationKeyMap based on https://github.com/greena13/react-hotkeys/issues/228 */}
-            <GlobalHotKeys>
-              <App />
-            </GlobalHotKeys>
-          </LocalizationProvider>
+          {/* Workaround for getApplicationKeyMap based on https://github.com/greena13/react-hotkeys/issues/228 */}
+          <GlobalHotKeys>
+            <App />
+          </GlobalHotKeys>
         </Provider>
       </React.StrictMode>,
       document.getElementById('root')

diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
@@ -13,13 +13,6 @@ import { Form, Field, FieldInputProps } from 'react-final-form'
 import Select from 'react-select'
 import CreatableSelect from 'react-select/creatable';
 
-import {
-  DateTimePicker,
-  TimePicker,
-  showErrorOnBlur,
-} from 'mui-rff';
-import DateFnsUtils from "@date-io/date-fns";
-
 import { useTranslation } from 'react-i18next';
 import { DateTime as LuxonDateTime} from "luxon";
 
@@ -28,6 +21,7 @@ import { AppDispatch } from "../redux/store";
 import { selectTheme } from "../redux/themeSlice";
 import { ThemeProvider } from "@mui/material/styles";
 import { TFuncKey } from "i18next";
+import { cloneDeep } from "lodash";
 
 /**
  * Creates a Metadata form
@@ -152,42 +146,6 @@ const Metadata: React.FC = () => {
     );
   }
 
-  const dateTimeTypeStyle = (isReadOnly: boolean) => {
-    return (
-      css({
-        padding: '5px 10px',
-        border: isReadOnly ? '0px solid #ccc' : '1px solid #ccc',
-        background: isReadOnly ? `${theme.background}` : `${theme.element_bg}`,
-        '.Mui-disabled, .Mui-disabled button > svg': {
-          color: `${theme.disabled} !important`,
-          'WebkitTextFillColor': `${theme.disabled}`,
-        },
-        'button > svg': {
-          color: `${theme.indicator_color}`
-        },
-        '.MuiInput-input, button': {
-          color: `${theme.text}`,
-          background: 'transparent !important',
-          '&:hover': {
-            background: 'transparent !important',
-            outline: 'none'
-          },
-        },
-        // Stop the underline from changing
-        '.MuiInput-root': {
-          '&:before, &:after': {
-            transition: 'unset',
-            transform: 'unset',
-            borderBottom: `1px solid ${theme.text}`,
-          },
-          '&:hover:not::before': {
-            borderBottom: `0px solid ${theme.text}`,
-          }
-        }
-      })
-    );
-  }
-
   const validateStyle = (isError: boolean) => {
     return css({
       lineHeight: '32px',
@@ -564,41 +522,38 @@ const Metadata: React.FC = () => {
 
     } else if (field.type === "date") {
       return (
-        <div data-testid="dateTimePicker" css={[fieldTypeStyle(field.readOnly), dateTimeTypeStyle(field.readOnly)]}>
-          <ThemeProvider theme={calendarStyle(theme)}>
-            <DateTimePicker {...input}
-              name={field.id}
-              inputFormat="yyyy/MM/dd HH:mm"
-              disabled={field.readOnly}
-              dateFunsUtils={DateFnsUtils}
-              TextFieldProps={{
-                variant: 'standard', // Removes default outline
-                onBlur: (e: any) => { blurWithSubmit(e, input) },
-                showError: showErrorOnBlur
-              }}
-              leftArrowButtonText={t('metadata.calendar-prev')}
-              rightArrowButtonText={t('metadata.calendar-next')}
-            />
-          </ThemeProvider>
-        </div>
+        <ThemeProvider theme={calendarStyle(theme)}>
+          <input {...input}
+            type="datetime-local"
+            name={field.id}
+            // inputFormat="yyyy/MM/dd HH:mm"
+            onBlur={e => { blurWithSubmit(e, input) }}
+            readOnly={field.readOnly}
+            css={[fieldTypeStyle(field.readOnly), inputFieldTypeStyle(field.readOnly),
+              {
+                resize: 'none',
+              }
+            ]}
+            data-testid="dateTimePicker"
+          />
+        </ThemeProvider>
       );
     } else if (field.type === "time") {
       return (
-        <div css={[fieldTypeStyle(field.readOnly), dateTimeTypeStyle(field.readOnly)]}>
-          <ThemeProvider theme={calendarStyle(theme)}>
-            <TimePicker {...input}
-              name={field.id}
-              inputFormat="HH:mm"
-              disabled={field.readOnly}
-              dateFunsUtils={DateFnsUtils}
-              TextFieldProps={{
-                variant: 'standard', // Removes default outline
-                onBlur: (e: any) => { blurWithSubmit(e, input) },
-                showError: showErrorOnBlur
-              }}
-            />
-          </ThemeProvider>
-        </div>
+        <ThemeProvider theme={calendarStyle(theme)}>
+          <input {...input}
+            type="time"
+            name={field.id}
+            // inputFormat="HH:mm"
+            onBlur={e => { blurWithSubmit(e, input) }}
+            readOnly={field.readOnly}
+            css={[fieldTypeStyle(field.readOnly), inputFieldTypeStyle(field.readOnly),
+              {
+                resize: 'none',
+              }
+            ]}
+          />
+        </ThemeProvider>
       );
     } else if (field.type === "text_long") {
       return (
@@ -637,6 +592,18 @@ const Metadata: React.FC = () => {
       if ((field.type === "date" || field.type === "time") && input.value === "") {
         const {value, ...other} = input
         return generateComponent(field, other)
+      }
+      // <input type="datetime-local"> is picky about its value and won't accept
+      // global datetime strings, so we have to convert them to local ourselves.
+      // TODO: Also we really should not be modifying the input element like that
+      // so ideally the conversion happens somewhere else in the code
+      // (see error in the console for further details)
+      if ((field.type === "date" || field.type === "time")) {
+        input = cloneDeep(input)
+        const leDate = new Date(input.value)
+        leDate.setMinutes(leDate.getMinutes() - leDate.getTimezoneOffset());
+        input.value = leDate.toISOString().slice(0, 16);
+        return generateComponent(field, input)
       } else {
         return generateComponent(field, input)
       }