docs(IconSearch): fix copy to clipboard (#1317)

* fix(IconSearch): fix copy to clipboard * fix(ComponentProps): fix default and required display
Semantic-Org · Feb 13, 2017 · cf3e0c6 · cf3e0c6
1 parent 4a321ec
commit cf3e0c6
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 39 deletions.
diff --git a/docs/app/Components/ComponentDoc/ComponentProps.js b/docs/app/Components/ComponentDoc/ComponentProps.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import React, { Component, PropTypes } from 'react'
 
-import { Label, Table } from 'src'
+import { Icon, Popup, Table } from 'src'
 import { SUI } from 'src/lib'
 
 const descriptionExtraStyle = {
@@ -41,22 +41,24 @@ export default class ComponentProps extends Component {
 
   renderName = item => <code>{item.name}</code>
 
-  requiredRenderer = item => item.required && <Label size='mini' color='red' circular>required</Label>
+  renderRequired = item => item.required && (
+    <Popup
+      positioning='right center'
+      style={{ padding: '0.5em' }}
+      trigger={<Icon size='small' color='red' name='asterisk' />}
+      content='Required'
+      size='tiny'
+      inverted
+    />
+  )
 
-  renderDefaultValue = (item) => {
-    let defaultValue = _.get(item, 'defaultValue.value')
+  renderDefaultValue = item => {
+    const defaultValue = _.get(item, 'defaultValue.value')
+    if (_.isNil(defaultValue)) return null
 
-    if (_.startsWith(defaultValue, 'function ')) {
-      defaultValue = defaultValue.match(/^function(.*)\{/)[1].trim()
-    }
-
-    const defaultIsComputed = <span className='ui mini gray circular label'>computed</span>
+    const defaultIsString = defaultValue[0] === "'"
 
-    return (
-      <div>
-        {defaultValue} {_.get(item, 'defaultValue.computed') && defaultIsComputed}
-      </div>
-    )
+    return <code>{defaultIsString ? `=${defaultValue}` : `={${defaultValue}}`}</code>
   }
 
   renderFunctionSignature = (item) => {
@@ -100,16 +102,15 @@ export default class ComponentProps extends Component {
 
     if (!item.value) return null
 
-    const values = [].concat(item.value).reduce((accumulator, v) =>
-        accumulator.concat(this.expandEnums(_.trim(v.value || v, '.\''))),
-    [])
+    const values = [].concat(item.value).reduce((accumulator, v) => {
+      return accumulator.concat(this.expandEnums(_.trim(v.value || v, '.\'')))
+    }, [])
 
     // show all if there are few
     if (values.length < truncateAt) {
       return (
         <p style={descriptionExtraStyle}>
-          <strong>Enums: </strong>
-          {values.join(', ')}
+          <strong>Enums: </strong> {values.join(', ')}
         </p>
       )
     }
@@ -139,8 +140,26 @@ export default class ComponentProps extends Component {
     )
   }
 
+  renderRow = item => {
+    return (
+      <Table.Row key={item.name}>
+        <Table.Cell>{this.renderName(item)}{this.renderRequired(item)}</Table.Cell>
+        <Table.Cell>{this.renderDefaultValue(item)}</Table.Cell>
+        <Table.Cell>{item.type}</Table.Cell>
+        <Table.Cell>
+          {item.description && (
+            <p>{item.description}</p>
+          )}
+          {this.renderFunctionSignature(item)}
+          {this.renderEnums(item)}
+        </Table.Cell>
+      </Table.Row>
+    )
+  }
+
   render() {
     const { props: propsDefinition } = this.props
+
     const content = _.sortBy(_.map(propsDefinition, (config, name) => {
       const value = _.get(config, 'type.value')
       let type = _.get(config, 'type.name')
@@ -163,30 +182,17 @@ export default class ComponentProps extends Component {
     }), 'name')
 
     return (
-      <Table data={content} className='very basic compact'>
+      <Table compact basic='very'>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell>Name</Table.HeaderCell>
-            <Table.HeaderCell />
-            <Table.HeaderCell>Type</Table.HeaderCell>
             <Table.HeaderCell>Default</Table.HeaderCell>
+            <Table.HeaderCell>Type</Table.HeaderCell>
             <Table.HeaderCell>Description</Table.HeaderCell>
           </Table.Row>
         </Table.Header>
         <Table.Body>
-          {_.map(content, item => (
-            <Table.Row key={item.name}>
-              <Table.Cell>{this.renderName(item)}</Table.Cell>
-              <Table.Cell>{this.requiredRenderer(item)}</Table.Cell>
-              <Table.Cell>{item.type}</Table.Cell>
-              <Table.Cell>{this.renderDefaultValue(item.defaultValue)}</Table.Cell>
-              <Table.Cell>
-                {item.description && <p>{item.description}</p>}
-                {this.renderFunctionSignature(item)}
-                {this.renderEnums(item)}
-              </Table.Cell>
-            </Table.Row>
-          ))}
+          {_.map(content, this.renderRow)}
         </Table.Body>
       </Table>
     )

diff --git a/docs/app/Components/IconSearch/IconSearch.js b/docs/app/Components/IconSearch/IconSearch.js
@@ -66,18 +66,20 @@ export default class IconSearch extends Component {
   handleIncludeSimilarChange = (e, { checked }) => this.setState({ includeSimilar: checked })
 
   copy = (text) => () => {
-    const { sourceCode } = this.state
-    copyToClipboard(sourceCode)
+    copyToClipboard(text)
     this.setState({ copied: true })
     setTimeout(() => this.setState({ copied: false }), 1000)
   }
 
   renderIconColumn = (name) => (
     <Popup
       key={name}
-      mouseEnterDelay={500}
+      mouseEnterDelay={1000}
       inverted
-      hoverable={false}
+      closeOnTriggerClick={false}
+      closeOnRootNodeClick={false}
+      closeOnDocumentClick={false}
+      style={{ width: '8em', textAlign: 'center' }}
       size='mini'
       positioning='top center'
       content={this.state.copied ? 'Copied!' : 'Click to copy'}