PR feedback, abstract constraints away from UI

Author: Brendan Abbott

src/components/ArrayProperty/ArrayProperty.js

@@ -2,12 +2,9 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import ArrayProperty from '../ArrayProperty/ArrayProperty';
 import Description from '../Description/Description';
 import Indicator from '../Indicator/Indicator';
-import NumericProperty from '../NumericProperty/NumericProperty';
-import ObjectProperty from '../ObjectProperty/ObjectProperty';
-import StringProperty from '../StringProperty/StringProperty';
+import PropertyConstraints from '../PropertyConstraints/PropertyConstraints';
 
 import './Property.scss';
 
@@ -43,21 +40,15 @@ export default class Property extends Component {
           'property--isclickable': isClickable
         })}>
           <span>{name}</span>
-          {isClickable &&
-          <Indicator className="property-indicator" status={status}/>
-          }
+          {isClickable && <Indicator className="property-indicator" status={status}/>}
         </td>
         <td className="property-info">
           <span className="property-type">
             {!subtype ? type.join(', ') : <span className="property-subtype">{subtype}[]</span>}
             {!subtype && constraints && constraints.format &&
               <span className="property-format">&lt;{constraints.format}&gt;</span>}
           </span>
-          {isRequired && <span className="property-required">Required</span>}
-          {['number', 'integer'].some(t => type.includes(t)) && <NumericProperty constraints={constraints} />}
-          {type.includes('string') && <StringProperty constraints={constraints} />}
-          {type.includes('array') && <ArrayProperty constraints={constraints} />}
-          {type.includes('object') && <ObjectProperty constraints={constraints} />}
+          <PropertyConstraints constraints={constraints} type={type} isRequired={isRequired} />
           {enumValues && this.renderEnumValues(enumValues)}
           {defaultValue !== undefined && this.renderDefaultValue(defaultValue)}
           {description && <Description description={description}/>}
@@ -96,9 +87,8 @@ export default class Property extends Component {
     }
 
     return (
-      <div>
-        <span>Default: </span>
-        <span className="default">{displayValue}</span>
+      <div className="default">
+        Default: <span>{displayValue}</span>
       </div>
     );
   }

src/components/NumericProperty/NumericProperty.js

@@ -0,0 +1,81 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+import { getConstraintHints as getArrayHints } from './../../parser/open-api/constraints/array';
+import { getConstraintHints as getNumericHints } from './../../parser/open-api/constraints/numeric';
+import { getConstraintHints as getObjectHints } from './../../parser/open-api/constraints/object';
+import { getConstraintHints as getStringHints } from './../../parser/open-api/constraints/string';
+
+export default class PropertyConstraints extends PureComponent {
+  render() {
+    const { type, isRequired, constraints } = this.props;
+
+    return (
+      <span className="property-constraints">
+        {isRequired && <span className="property-required">required</span>}
+        {constraints && ['number', 'integer'].some(t => type.includes(t)) && this.renderConstraints(constraints, 'numeric')}
+        {constraints && type.includes('string') && this.renderConstraints(constraints, 'string')}
+        {constraints && type.includes('array') && this.renderConstraints(constraints, 'array')}
+        {constraints && type.includes('object') && this.renderConstraints(constraints, 'object')}
+      </span>
+    );
+  }
+
+  /**
+   * Renders validation hints for the given constraints and type.
+   *
+   * @param {object} constraints
+   * @param {string} type
+   */
+  renderConstraints(constraints, type) {
+    let validations = [];
+
+    switch (type) {
+    case 'numeric':
+      validations = getNumericHints(constraints);
+      break;
+    case 'object':
+      validations = getObjectHints(constraints);
+      break;
+    case 'array':
+      validations = getArrayHints(constraints);
+      break;
+    case 'string':
+    default:
+      validations = getStringHints(constraints);
+    }
+
+    if (!validations.length) {
+      return null;
+    }
+
+    return (
+      <span>
+        {validations.map(constraint =>
+          <span key={constraint} className={`${type}-constraints`}>{constraint}</span>
+        )}
+      </span>
+    );
+  }
+}
+
+PropertyConstraints.propTypes = {
+  type: PropTypes.arrayOf(PropTypes.string).isRequired,
+  isRequired: PropTypes.bool.isRequired,
+  constraints: PropTypes.shape({
+    format: PropTypes.string,
+    exclusiveMinimum: PropTypes.number,
+    exclusiveMaximum: PropTypes.number,
+    maximum: PropTypes.number,
+    maxItems: PropTypes.number,
+    maxLength: PropTypes.number,
+    maxProperties: PropTypes.number,
+    minimum: PropTypes.number,
+    minItems: PropTypes.number,
+    minLength: PropTypes.number,
+    minProperties: PropTypes.number,
+    multipleOf: PropTypes.number,
+    pattern: PropTypes.string,
+    uniqueItems: PropTypes.bool
+  })
+};

src/components/ObjectProperty/ObjectProperty.js

@@ -0,0 +1,35 @@
+/**
+ * Returns an array of hints that relate to the constraints for an array,
+ * `maxItems`, `minItems` and `uniqueItems`.
+ *
+ * @param {object} constraints
+ * @return {array}
+ */
+export function getConstraintHints(constraints) {
+  if (!constraints) {
+    return [];
+  }
+
+  const { maxItems, minItems, uniqueItems } = constraints;
+  const validations = [];
+
+  if (uniqueItems) {
+    validations.push('unique items');
+  }
+
+  if (maxItems !== undefined && minItems !== undefined) {
+    // Be succint if the minItems is the same maxItems
+    // ie. value can only be of `x` length.
+    if (maxItems === minItems) {
+      validations.push(`${minItems} items`);
+    } else {
+      validations.push(`${minItems}-${maxItems} items`);
+    }
+  } else if (minItems !== undefined) {
+    validations.push(`at least ${minItems} items`);
+  } else if (maxItems !== undefined) {
+    validations.push(`at most ${maxItems} items`);
+  }
+
+  return validations;
+}