fix: reverting date and date-time changes in #895 (#950)

readmeio · Sep 18, 2020 · e4e1670 · e4e1670
1 parent 7685402
commit e4e1670
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/example/swagger-files/types.json b/example/swagger-files/types.json
@@ -97,6 +97,7 @@
                     "format": "date"
                   },
                   "string (format: date-time)": {
+                    "description": "Unsupported due to the varying ways that `date-time` is utilized in API definitions for representing dates, the [lack of wide browser support for the input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local#Browser_compatibility), and that it's not [RFC 3339](https://tools.ietf.org/html/rfc3339) compliant.",
                     "type": "string",
                     "format": "date-time"
                   },

diff --git a/packages/api-explorer/__tests__/Params.test.jsx b/packages/api-explorer/__tests__/Params.test.jsx
@@ -264,9 +264,9 @@ describe('schema handling', () => {
       });
 
       it.each([
-        ['date', 'date', stringOas.operation('/format-date', 'get'), 'date'],
-        ['date-time', 'datetime-local', stringOas.operation('/format-date-time', 'get'), 'date-time'],
-        ['dateTime', 'datetime-local', stringOas.operation('/format-dateTime', 'get'), 'date-time'],
+        ['date', 'text', stringOas.operation('/format-date', 'get'), 'date'],
+        ['date-time', 'text', stringOas.operation('/format-date-time', 'get'), 'date-time'],
+        ['dateTime', 'text', stringOas.operation('/format-dateTime', 'get'), 'date-time'],
         ['password', 'password', stringOas.operation('/format-password', 'get'), 'password'],
         ['uri', 'url', stringOas.operation('/format-uri', 'get'), 'uri'],
         ['url', 'url', stringOas.operation('/format-url', 'get'), 'url'],

diff --git a/packages/api-explorer/src/Params.jsx b/packages/api-explorer/src/Params.jsx
@@ -4,7 +4,6 @@ const Form = require('@readme/react-jsonschema-form').default;
 const slug = require('lodash.kebabcase');
 
 const {
-  DateWidget,
   PasswordWidget,
   TextWidget,
   UpDownWidget,
@@ -15,7 +14,6 @@ const { parametersToJsonSchema } = require('@readme/oas-tooling/utils');
 
 const createArrayField = require('./form-components/ArrayField');
 const createBaseInput = require('./form-components/BaseInput');
-const createDateTimeWidget = require('./form-components/DateTimeWidget');
 const createFileWidget = require('./form-components/FileWidget');
 const createSchemaField = require('./form-components/SchemaField');
 const createSelectWidget = require('./form-components/SelectWidget');
@@ -47,7 +45,6 @@ class Params extends React.Component {
     const {
       ArrayField,
       BaseInput,
-      DateTimeWidget,
       FileWidget,
       formData,
       onChange,
@@ -93,9 +90,17 @@ class Params extends React.Component {
                   binary: FileWidget,
                   blob: TextareaWidget,
                   byte: TextWidget,
-                  date: DateWidget,
-                  dateTime: DateTimeWidget,
-                  'date-time': DateTimeWidget,
+
+                  // Due to the varying ways that `date` and `date-time` is utilized in API definitions for representing
+                  // dates the lack of wide browser support, and that it's not RFC 3339 compliant we don't support the
+                  // `date-time-local` input for `date-time` formats, instead treating them as general strings.
+                  //
+                  // @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local#Browser_compatibility
+                  // @link https://tools.ietf.org/html/rfc3339
+                  date: TextWidget,
+                  dateTime: TextWidget,
+                  'date-time': TextWidget,
+
                   double: UpDownWidget,
                   duration: TextWidget,
                   float: UpDownWidget,
@@ -131,7 +136,6 @@ class Params extends React.Component {
 Params.propTypes = {
   ArrayField: PropTypes.func.isRequired,
   BaseInput: PropTypes.func.isRequired,
-  DateTimeWidget: PropTypes.func.isRequired,
   FileWidget: PropTypes.func.isRequired,
   formData: PropTypes.shape({}).isRequired,
   oas: PropTypes.instanceOf(Oas).isRequired,
@@ -152,7 +156,6 @@ Params.defaultProps = {
 function createParams(oas) {
   const ArrayField = createArrayField(oas);
   const BaseInput = createBaseInput(oas);
-  const DateTimeWidget = createDateTimeWidget(oas);
   const FileWidget = createFileWidget(oas);
   const SchemaField = createSchemaField();
   const SelectWidget = createSelectWidget(oas);
@@ -166,7 +169,6 @@ function createParams(oas) {
         {...props}
         ArrayField={ArrayField}
         BaseInput={BaseInput}
-        DateTimeWidget={DateTimeWidget}
         FileWidget={FileWidget}
         SchemaField={SchemaField}
         SelectWidget={SelectWidget}