Merge pull request temando#174 from quangkhoa/issue-173-rendering-sin…

…gle-enum-values tidy up and fix issue with handling enum values
brendo · Jul 11, 2017 · 01c384c · 01c384c
2 parents 26b2f2d + a0287c1
commit 01c384c
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 33 deletions.
diff --git a/docs/demo/demo.81f8cdaf8e92e7c02fcc.js b/docs/demo/demo.81f8cdaf8e92e7c02fcc.js
diff --git a/docs/demo/demo.ecab1944e41f85fb710a.js b/docs/demo/demo.ecab1944e41f85fb710a.js
diff --git a/docs/demo/index.html b/docs/demo/index.html
@@ -5,5 +5,5 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
-  <body><script type="text/javascript" src="manifest.d9e9a07772efbfebb4e9.js"></script><script type="text/javascript" src="vendor.cda98230d6573ec02868.js"></script><script type="text/javascript" src="demo.ecab1944e41f85fb710a.js"></script></body>
+  <body><script type="text/javascript" src="manifest.64e52d4be3e1405eba34.js"></script><script type="text/javascript" src="vendor.cda98230d6573ec02868.js"></script><script type="text/javascript" src="demo.81f8cdaf8e92e7c02fcc.js"></script></body>
 </html>
diff --git a/docs/demo/manifest.d9e9a07772efbfebb4e9.js → docs/demo/manifest.64e52d4be3e1405eba34.js b/docs/demo/manifest.d9e9a07772efbfebb4e9.js → docs/demo/manifest.64e52d4be3e1405eba34.js
diff --git a/src/components/Property/Property.js b/src/components/Property/Property.js
@@ -13,19 +13,30 @@ export default class Property extends PureComponent {
 
     this.handleClick = this.handleClick.bind(this)
     this.displayAllEnums = this.displayAllEnums.bind(this)
-
-    this.state = {
-      enumValues: (props.enumValues ? props.enumValues : null)
-    }
   }
 
   componentWillMount () {
-    const enumValues = this.state.enumValues
-    if (enumValues && enumValues.length > 20) {
-      let updatedValues = enumValues.slice()
-      updatedValues.length = 20
-      this.setState({ enumValues: updatedValues })
+    let {name, enumValues} = this.props
+    let trimmedEnumValues = enumValues
+    let isEnumTrimmed = false
+
+    if (enumValues) {
+      // If enumValues only has one single value, append the single value to name, and not display enum values
+      if (enumValues.length === 1) {
+        name = `${name} = "${enumValues[0]}"`
+        enumValues = trimmedEnumValues = null
+      } else if (enumValues.length > 20) {
+        trimmedEnumValues = enumValues.slice(0, 20)
+        isEnumTrimmed = true
+      }
     }
+
+    this.setState({
+      name,
+      enumValues,
+      trimmedEnumValues,
+      isEnumTrimmed
+    })
   }
 
   handleClick () {
@@ -41,12 +52,13 @@ export default class Property extends PureComponent {
       classes
     } = this.props
 
-    let {name, enumValues} = this.props
+    const {name, isEnumTrimmed} = this.state
+    let enumValues
 
-    // If enumValues only has one single value, append the single value to name, and not display enum values
-    if (enumValues && enumValues.length === 1) {
-      name = `${name} = "${enumValues[0]}"`
-      enumValues = []
+    if (isEnumTrimmed) {
+      enumValues = this.state.trimmedEnumValues
+    } else {
+      enumValues = this.state.enumValues
     }
 
     const isClickable = onClick !== undefined
@@ -88,11 +100,11 @@ export default class Property extends PureComponent {
           </span>
           <PropertyConstraints constraints={constraints} type={type} isRequired={isRequired} />
           {((enumValues && enumValues.length) || defaultValue || description) &&
-            <div className={classes.additionalInfo}>
-              {enumValues && this.renderEnumValues(enumValues)}
-              {defaultValue !== undefined && this.renderDefaultValue(defaultValue)}
-              {description && <div><Description isInline description={description} /></div>}
-            </div>
+          <div className={classes.additionalInfo}>
+            {enumValues && this.renderEnumValues(enumValues, isEnumTrimmed)}
+            {defaultValue !== undefined && this.renderDefaultValue(defaultValue)}
+            {description && <div><Description isInline description={description} /></div>}
+          </div>
           }
         </td>
       </tr>
@@ -103,32 +115,32 @@ export default class Property extends PureComponent {
    * Render enum values
    *
    * @param {Array} values
+   * @param {boolean} isEnumTrimmed
    */
-  renderEnumValues (values) {
-    const { classes } = this.props
-    const valuesToDisplay = this.state.enumValues
-    let isEnumReduced = false
-    if (values.length !== valuesToDisplay.length) {
-      isEnumReduced = true
-    }
+  renderEnumValues (values, isEnumTrimmed) {
+    const {classes} = this.props
 
     return (
       <div>
         <span>Valid values:</span>
-        {valuesToDisplay.map(value => {
+        {values.map(value => {
           return (
             <span key={value} className={classes.enum}>{value}</span>
           )
         })}
-        {isEnumReduced &&
-          <a onClick={this.displayAllEnums}>...</a>
+        {isEnumTrimmed &&
+        <a onClick={this.displayAllEnums}>...</a>
         }
       </div>
     )
   }
 
   displayAllEnums () {
-    this.setState({ enumValues: this.props.enumValues })
+    this.setState(
+      {
+        isEnumTrimmed: false
+      }
+    )
   }
 
   renderDefaultValue (value) {