💄(frontend) replace to cunningham Datepicker

Replace the Grommet Datepicker with the Cunningham Datepicker.
openfun · Jun 29, 2023 · 2fe1b58 · 2fe1b58
1 parent 520f7df
commit 2fe1b58
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 44 deletions.
diff --git a/src/frontend/packages/lib_components/package.json b/src/frontend/packages/lib_components/package.json
@@ -14,6 +14,7 @@
     "prettier": "prettier --list-different '**/*.+(ts|tsx|json|js|jsx)' --ignore-path ../../../.prettierignore"
   },
   "peerDependencies": {
+    "@openfun/cunningham-react": "*",
     "grommet": "*",
     "grommet-icons": "*",
     "luxon": "3.3.0",

diff --git a/src/frontend/packages/lib_components/src/common/SchedulingFields/index.tsx b/src/frontend/packages/lib_components/src/common/SchedulingFields/index.tsx
@@ -1,4 +1,5 @@
-import { Box, DateInput, FormField, Text, TextInput } from 'grommet';
+import { CunninghamProvider, DatePicker } from '@openfun/cunningham-react';
+import { Box, FormField, Text, TextInput } from 'grommet';
 import { MarginType } from 'grommet/utils';
 import { Nullable } from 'lib-common';
 import { DateTime, Duration, Settings } from 'luxon';
@@ -107,16 +108,7 @@ export const SchedulingFields = ({
     );
   const [startingAtError, setStartingAtError] = useState<Nullable<string>>();
 
-  const onStartingAtDateInputChange = (event: { value: string | string[] }) => {
-    let value: string;
-    if (Array.isArray(event.value)) {
-      value = '';
-      if (event.value.length > 0) {
-        value = event.value[0];
-      }
-    } else {
-      value = event.value;
-    }
+  const onStartingAtDateInputChange = (value: string) => {
     onStartingAtChangeTrigger(value, currentStartingAtTime);
   };
 
@@ -220,42 +212,17 @@ export const SchedulingFields = ({
         gap="small"
       >
         <Box>
-          <FormField
-            label={intl.formatMessage(messages.startingAtDateTextLabel)}
-            htmlFor="starting_at_date"
-            margin="none"
-            background={startingAtError ? 'status-error-off' : 'white'}
-            // Fix of the calendar icon still clickable when component disabled (see below)
-            style={{ pointerEvents: disabled ? 'none' : undefined }}
-            height="80%"
-            disabled={disabled}
-          >
-            <DateInput
-              dropProps={{
-                align: { top: 'bottom', left: 'left' },
-                style: {
-                  borderRadius: '4px',
-                  boxShadow: 'rgb(0 0 0 / 23%) 4px 5px 17px',
-                },
-              }}
-              id="starting_at_date"
-              format={intl.locale === 'fr' ? 'dd/mm/yyyy' : 'yyyy/mm/dd'}
+          <CunninghamProvider>
+            <DatePicker
+              label={intl.formatMessage(messages.startingAtDateTextLabel)}
+              disabled={disabled}
               value={currentStartingAtDate || undefined}
               onChange={onStartingAtDateInputChange}
-              calendarProps={{
-                bounds: [
-                  DateTime.local().toISO() as string,
-                  DateTime.local().plus({ years: 1 }).toISO() as string,
-                ],
-              }}
-              // TODO : calendar icon still clickable even when component is disabled
-              // need to open an issue on grommet's github
-              disabled={disabled}
+              minValue={DateTime.local().toISO() as string}
+              state={startingAtError ? 'error' : 'default'}
+              fullWidth
             />
-          </FormField>
-          <FormHelpText>
-            {intl.locale === 'fr' ? 'dd/mm/yyyy' : 'yyyy/mm/dd'}
-          </FormHelpText>
+          </CunninghamProvider>
         </Box>
         <Box>
           <FormField