merge changes to calendarDay

keystonejs · Jul 9, 2020 · 2664c8c · 2664c8c
1 parent c1ac823
commit 2664c8c
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 30 deletions.
diff --git a/docs/tutorials/add-lists.md b/docs/tutorials/add-lists.md
@@ -69,9 +69,8 @@ module.exports = {
     // added fields
     deadline: {
       type: CalendarDay,
-      format: 'do MMMM yyyy',
-      yearRangeFrom: '2019',
-      yearRangeTo: '2029',
+      dateFrom: '2019-01-01',
+      dateTo: '2029-01-01',
       isRequired: false,
       defaultValue: new Date().toISOString('YYYY-MM-DD').substring(0, 10), // Today's date
     },

diff --git a/packages/fields/src/types/CalendarDay/Implementation.js b/packages/fields/src/types/CalendarDay/Implementation.js
@@ -36,9 +36,7 @@ export class CalendarDay extends Implementation {
   gqlOutputFields() {
     return [`${this.path}: String`];
   }
-  gqlOutputFieldResolvers() {
-    return { [`${this.path}`]: item => item[this.path] };
-  }
+
   gqlQueryInputFields() {
     return [
       ...this.equalityInputFields('String'),

diff --git a/packages/fields/src/types/CalendarDay/README.md b/packages/fields/src/types/CalendarDay/README.md
@@ -52,7 +52,7 @@ All date values must be in the 10 character ISO8601 format:`YYYY-MM-DD`.
 
 ### Filters
 
-All filter fields expect values in the ISO8601 (`yyyy-MM-dd`) format.
+All filter fields expect values in the ISO8601 (`YYYY-MM-DD`) format.
 
 | Field name       | Type       | Description                                |
 | :--------------- | :--------- | :----------------------------------------- |
@@ -69,7 +69,7 @@ All filter fields expect values in the ISO8601 (`yyyy-MM-dd`) format.
 
 ### Mongoose adapter
 
-In Mongoose the field is stored using the `String` schema type.
+In Mongoose the field is added using the `String` schema type.
 
 The `isRequired` config option is enforced by KeystoneJS only.
 

diff --git a/packages/fields/src/types/CalendarDay/views/Cell.js b/packages/fields/src/types/CalendarDay/views/Cell.js
@@ -1,4 +1,15 @@
 import { format, parseISO } from 'date-fns';
 
-export default ({ data, field: { format: formatString } }) =>
-  data ? (formatString ? format(parseISO(data), formatString) : data) : null;
+const CalendarDayCell = ({ data, field: { config } }) => {
+  if (!data) {
+    return null;
+  }
+
+  if (!config.format) {
+    return data;
+  }
+
+  return format(parseISO(data), config.format);
+};
+
+export default CalendarDayCell;
diff --git a/packages/fields/src/types/CalendarDay/views/Controller.js b/packages/fields/src/types/CalendarDay/views/Controller.js
@@ -1,12 +1,6 @@
 import FieldController from '../../../Controller';
 
 export default class CalendarDayController extends FieldController {
-  constructor({ format, yearRangeFrom, yearRangeTo, ...config }, ...args) {
-    super({ ...config }, ...args);
-    this.format = format;
-    this.yearRangeFrom = yearRangeFrom;
-    this.yearRangeTo = yearRangeTo;
-  }
   getFilterGraphQL = ({ type, value }) => {
     const key = type === 'is' ? `${this.path}` : `${this.path}_${type}`;
     return { [key]: value };

diff --git a/packages/fields/src/types/CalendarDay/views/Field.js b/packages/fields/src/types/CalendarDay/views/Field.js
@@ -8,20 +8,14 @@ import 'react-day-picker/dist/style.css';
 import { DayPicker } from 'react-day-picker';
 import { parseISO, compareAsc, formatISO, isValid } from 'date-fns';
 
-const CalendarDayField = ({
-  autoFocus,
-  field: { format, path, label, isRequired, adminDoc },
-  value,
-  errors,
-  onChange,
-  isDisabled,
-}) => {
-  const htmlID = `ks-daypicker-${path}`;
+const CalendarDayField = ({ autoFocus, field, value, errors, onChange, isDisabled }) => {
+  const htmlID = `ks-daypicker-${field.path}`;
+  const handleDayClick = day => onChange(formatISO(day, { representation: 'date' }));
 
   return (
     <FieldContainer>
-      <FieldLabel htmlFor={htmlID} field={{ label, isRequired }} errors={errors} />
-      <FieldDescription text={adminDoc} />
+      <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
+      <FieldDescription text={field.adminDoc} />
       <FieldInput>
         <DayPicker
           disabled={[
@@ -39,9 +33,25 @@ const CalendarDayField = ({
         <Input
           id={htmlID}
           autoFocus={autoFocus}
-          date={value}
-          format={format}
-          onChange={onChange}
+          onKeyDown={e => {
+            // There is a strange bug where after interacting with the day picker
+            // and then pressing enter on the input the value is changed to the start
+            // of the month. I think this is bug with the day picker.
+            // The following is a work-around:
+            if (e.key === 'Enter') {
+              e.preventDefault();
+            }
+          }}
+          onChange={e => {
+            // Tiny bit of date format normalisation for convenience
+            const normalisedValue = e.target.value.replace('/', '-').replace('\\', '-');
+            const parsedValue = parseISO(normalisedValue);
+            if (normalisedValue.length === 10 && isValid(parsedValue)) {
+              handleDayClick(parsedValue);
+            } else {
+              onChange(normalisedValue);
+            }
+          }}
           disabled={isDisabled}
           css={{ color: isValid(parseISO(value)) ? undefined : 'darkred' }}
           value={value}