Attempt to style select input and shipdate input

readmeio · Sep 14, 2017 · 4ce4faf · 4ce4faf
1 parent 6fb63d6
commit 4ce4faf
Show file tree

Hide file tree

Showing 12 changed files with 1,029 additions and 373 deletions.
diff --git a/packages/api-explorer-ui/.babelrc b/packages/api-explorer-ui/.babelrc
@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015", "react"]
+  "presets": ["es2015", "react"],
+  "plugins": ["transform-object-rest-spread"]
 }
diff --git a/packages/api-explorer-ui/lib/create-docs.js b/packages/api-explorer-ui/lib/create-docs.js
@@ -29,109 +29,7 @@ module.exports = (oas, apiSetting) => {
           category: { apiSetting },
           api: { method },
           swagger: { path },
-          body: `
-          [block:textarea]
-          {
-            "text": "# This is text area"
-          }
-          [/block]
-          [block:html]
-          {
-            "html": "<p>This is an html</p>"
-
-          }
-          [/block]
-          [block:api-header]
-          {
-            "title": "This is cool header",
-            "sidebar": true
-          }
-          [/block]
-
-          [block:callout]
-          {
-            "type": "info",
-            "title": "Callout"
-          }
-          [/block]
-
-          [block:image]
-          {
-             "images": [
-              {
-                "image": [
-                  "https://files.readme.io/924824e-fullsizeoutput_314.jpeg",
-                  "fullsizeoutput_314.jpeg",
-                  640,
-                  1136,
-                  "#c8b396"
-                ]
-              }
-            ]
-          }
-          [/block]
-
-          [block:image]
-          {
-            "images": [
-              {
-                "image": [
-                  "https://files.readme.io/dce21f0-IMG_0418.JPG",
-                  "IMG_0418.JPG",
-                  640,
-                  1136,
-                  "#9e918d"
-                ],
-                "caption": "*doggo*"
-              }
-            ]
-          }
-          [/block]
-
-          [block:code]
-          {
-            "codes": [
-               {
-                  "code": "whjdwhjwejhkwhjk",
-                  "language": "text",
-                  "status": 400,
-                  "name": "    "
-                },
-                {
-                  "code": "var a = 1;",
-                  "language": "javascript"
-                }
-            ]
-          }
-          [/block]
-
-          [block:parameters]
-          {
-            "data": {
-              "0-0": "*arbitrary*",
-              "0-1": "info",
-              "0-2": "test",
-              "h-0": "test",
-              "h-1": "1",
-              "h-2": "2"
-            },
-            "cols": 3,
-            "rows": 1
-          }
-          [/block]
-
-        [block:embed]
-        {
-          "html": "<iframe class=\\"embedly-embed\\" src=\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FjYjDqzZ4gjY%3Ffeature%3Doembed&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DjYjDqzZ4gjY&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FjYjDqzZ4gjY%2Fhqdefault.jpg&key=f2aa6fc3595946d0afc3d76cbbd25dc3&type=text%2Fhtml&schema=youtube\\" width=\\"640\\" height=\\"480\\" scrolling=\\"no\\" frameborder=\\"0\\" allowfullscreen></iframe>",
-          "url": "https://www.youtube.com/watch?v=jYjDqzZ4gjY",
-          "title": "White kids Watch me whip school Chorus - chorus white kids singing Watch me whip",
-          "favicon": "https://s.ytimg.com/yts/img/ringo/img/favicon-vfl8qSV2F.ico",
-          "image": "https://i.ytimg.com/vi/jYjDqzZ4gjY/hqdefault.jpg",
-          "sidebar": true
-        }
-        [/block]
-
-          `,
+          body: '',
         });
       }
     });

diff --git a/packages/api-explorer-ui/package-lock.json b/packages/api-explorer-ui/package-lock.json
diff --git a/packages/api-explorer-ui/package.json b/packages/api-explorer-ui/package.json
@@ -41,6 +41,7 @@
   "devDependencies": {
     "babel-jest": "^20.0.3",
     "babel-loader": "^7.1.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babelify": "^7.3.0",

diff --git a/packages/api-explorer-ui/src/Params.jsx b/packages/api-explorer-ui/src/Params.jsx
@@ -3,9 +3,18 @@ const PropTypes = require('prop-types');
 const Form = require('react-jsonschema-form').default;
 const UpDownWidget = require('react-jsonschema-form/lib/components/widgets/UpDownWidget').default;
 const TextWidget = require('react-jsonschema-form/lib/components/widgets/TextWidget').default;
-
+const SelectWidget = require('react-jsonschema-form/lib/components/widgets/SelectWidget').default;
+const DateTimeWidget = require('react-jsonschema-form/lib/components/widgets/DateTimeWidget')
+  .default;
+// const BaseInput = require('react-jsonschema-form/lib/components/widgets/BaseInput').default;
+const rangeSpec = require('react-jsonschema-form/lib/utils').rangeSpec;
 const TitleField = require('./form-components/TitleField');
 const ObjectField = require('./form-components/ObjectField');
+const FieldTemplate = require('./form-components/FieldTemplate');
+const ArrayField = require('./form-components/FieldTemplate');
+const BaseInput = require('./form-components/BaseInput');
+const SelectInput = require('./form-components/SelectInput');
+const CustomDateTime = require('./form-components/DateTimeWidget');
 
 const Oas = require('./lib/Oas');
 
@@ -55,6 +64,12 @@ const parametersToJsonSchema = require('./lib/parameters-to-json-schema');
 //   );
 // }
 
+const CustomTextWidget = props => <BaseInput {...props} />;
+
+const CustomUpDownWidget = props => (
+  <BaseInput type="number" {...props} {...rangeSpec(props.schema)} />
+);
+
 function Params({ oas, operation, formData, onChange }) {
   const jsonSchema = parametersToJsonSchema(operation, oas);
 
@@ -69,20 +84,24 @@ function Params({ oas, operation, formData, onChange }) {
                   <h3>{schema.label}</h3>
                   <div className="param-header-border" />
                 </div>
+                <div className="param-item-info" />
                 <Form
                   id={`form-${operation.operationId}`}
                   schema={schema.schema}
-                  widgets={{ int64: UpDownWidget, int32: UpDownWidget, uuid: TextWidget }}
+                  widgets={{
+                    int64: CustomUpDownWidget,
+                    int32: CustomUpDownWidget,
+                    TextWidget: CustomTextWidget,
+                  }}
                   // eslint-disable-next-line no-console
                   onSubmit={form => console.log('submit', form.formData)}
                   formData={formData[schema.type]}
                   onChange={form => {
                     // return onChange({ [schema.type]: { $set: form.formData } })
-                    return onChange({ [schema.type]: form.formData })
+                    return onChange({ [schema.type]: form.formData });
                   }}
-                  // FieldTemplate={CustomFieldTemplate}
-                  fields={{ObjectField, TitleField}}
-                  className="param-table"
+                  FieldTemplate={FieldTemplate}
+                  fields={{ ObjectField, TitleField }}
                 >
                   <button type="submit" style={{ display: 'none' }} />
                 </Form>
@@ -101,4 +120,8 @@ Params.propTypes = {
   onChange: PropTypes.func.isRequired,
 };
 
+CustomUpDownWidget.propTypes = {
+  schema: PropTypes.shape({}).isRequired,
+};
+
 module.exports = Params;