updated-copy-behavior

Author: mac-s-g

dev-server/src/index.js

@@ -76,8 +76,10 @@ ReactDom.render(
             }}
             name={false}
             iconStyle="triangle"
-            shouldCollapse={({ src, namespace, type }) =>
-                namespace.indexOf("moment") > -1}
+            shouldCollapse={({ src, type }) =>
+                type === "object" &&
+                src.constructor &&
+                src.constructor.name === "Moment"}
         />
 
         <br />
@@ -197,7 +199,8 @@ function getExampleJson1() {
         },
         string_number: "1234",
         date: new Date(),
-        moment: Moment()
+        moment: Moment(),
+        regexp: /[0-9]/gi
     }
 }
 

src/js/components/CopyToClipboard.js

@@ -1,4 +1,7 @@
-import React from 'react'
+import React from "react"
+
+import { toType } from "./../helpers/util"
+import stringifyVariable from "./../helpers/stringifyVariable"
 
 //clibboard icon
 import { Clippy } from "./icons"
@@ -8,24 +11,28 @@ import Theme from "./../themes/getStyle"
 
 export default class extends React.Component {
     constructor(props) {
-        super(props);
-        this.copiedTimer = null;
+        super(props)
+        this.copiedTimer = null
     }
 
-    state = {copied: false}
+    state = { copied: false }
 
     componentWillUnmount() {
         if (this.copiedTimer) {
-            clearTimeout(this.copiedTimer);
-            this.copiedTimer = null;
+            clearTimeout(this.copiedTimer)
+            this.copiedTimer = null
         }
     }
 
     handleCopy = () => {
         const container = document.createElement("textarea")
         const { clickCallback, src, namespace } = this.props
 
-        container.innerHTML = JSON.stringify(src, null, "  ")
+        container.innerHTML = JSON.stringify(
+            this.clipboardValue(src),
+            null,
+            "  "
+        )
 
         document.body.appendChild(container)
         container.select()
@@ -67,6 +74,18 @@ export default class extends React.Component {
         return <Clippy class="copy-icon" {...Theme(theme, "copy-icon")} />
     }
 
+    clipboardValue = value => {
+        const type = toType(value)
+        switch (type) {
+            case "function":
+                return value.toString()
+            case "regexp":
+                return value.toString()
+            default:
+                return value
+        }
+    }
+
     render() {
         const { src, theme, hidden } = this.props
         let style = Theme(theme, "copy-to-clipboard").style
@@ -90,4 +109,4 @@ export default class extends React.Component {
             </span>
         )
     }
-}
+}

src/js/components/DataTypes/Function.js

@@ -1,71 +1,82 @@
-import React from 'react';
-import DataTypeLabel from './DataTypeLabel';
+import React from "react"
+import DataTypeLabel from "./DataTypeLabel"
 
 //theme
-import Theme from './../../themes/getStyle';
+import Theme from "./../../themes/getStyle"
 
 //attribute store for storing collapsed state
-import AttributeStore from './../../stores/ObjectAttributes';
+import AttributeStore from "./../../stores/ObjectAttributes"
 
 export default class extends React.Component {
-
     constructor(props) {
-        super(props);
+        super(props)
 
         this.state.collapsed = AttributeStore.get(
             props.rjvId,
             props.namespace,
-            'collapsed',
+            "collapsed",
             true
-        );
+        )
     }
 
     state = {
         collapsed: true
     }
 
     toggleCollapsed = () => {
-        this.state.collapsed = !this.state.collapsed;
+        this.state.collapsed = !this.state.collapsed
         AttributeStore.set(
             this.props.rjvId,
             this.props.namespace,
-            'collapsed',
+            "collapsed",
             this.state.collapsed
-        );
-        this.setState(this.state);
+        )
+        this.setState(this.state)
     }
 
     render() {
-        const type_name = 'function';
-        const {props} = this;
-        const {collapsed} = this.state;
+        const type_name = "function"
+        const { props } = this
+        const { collapsed } = this.state
 
         return (
-        <div {...Theme(props.theme, 'function')} >
-            <DataTypeLabel type_name={type_name} {...props} />
-            <span class="rjv-function-container"
-            onClick={()=>{this.toggleCollapsed()}} >
-            {this.getFunctionDisplay(collapsed)}
-            </span>
-        </div>
-        );
+            <div {...Theme(props.theme, "function")}>
+                <DataTypeLabel type_name={type_name} {...props} />
+                <span
+                    {...Theme(props.theme, "function-value")}
+                    class="rjv-function-container"
+                    onClick={() => {
+                        this.toggleCollapsed()
+                    }}
+                >
+                    {this.getFunctionDisplay(collapsed)}
+                </span>
+            </div>
+        )
     }
 
-    getFunctionDisplay = (collapsed) => {
-        const {props} = this;
+    getFunctionDisplay = collapsed => {
+        const { props } = this
 
         if (collapsed) {
-            return (<span >
-                {this.props.value.toString().slice(9, -1).replace(/\{[\s\S]+/, '')}
-                <span class='function-collapsed' style={{fontWeight: 'bold'}}>
-                    <span>{"{"}</span>
-                    <span {...Theme(props.theme, 'ellipsis')}>...</span>
-                    <span>{"}"}</span>
+            return (
+                <span>
+                    {this.props.value
+                        .toString()
+                        .slice(9, -1)
+                        .replace(/\{[\s\S]+/, "")}
+                    <span
+                        class="function-collapsed"
+                        style={{ fontWeight: "bold" }}
+                    >
+                        <span>{"{"}</span>
+                        <span {...Theme(props.theme, "ellipsis")}>...</span>
+                        <span>{"}"}</span>
+                    </span>
                 </span>
-            </span>);
+            )
         } else {
-            return this.props.value.toString().slice(9, -1);
+            return this.props.value.toString().slice(9, -1)
         }
     }
-
-}
+}

src/js/themes/getStyle.js

@@ -179,6 +179,9 @@ const getDefaultThemeStyling = theme => {
             cursor: "pointer",
             whiteSpace: "pre-line"
         },
+        "function-value": {
+            fontStyle: "italic"
+        },
         integer: {
             display: "inline-block",
             color: colors.dataTypes.integer

test/tests/js/Index-test.js

@@ -30,12 +30,13 @@ describe("<Index />", function() {
                             two: "two"
                         }
                     },
-                    arr: [[1, "two"], { one: "one", two: 2 }]
+                    arr: [[1, "two"], { one: "one", two: 2 }],
+                    regexp: /[0-9]/gi
                 }}
             />
         )
-        expect(wrapper.find(".data-type-label")).to.have.length(13)
-        expect(wrapper.find(".data-type-label")).to.have.length(13)
+        expect(wrapper.find(".data-type-label")).to.have.length(14)
+        expect(wrapper.find(".data-type-label")).to.have.length(14)
     })
 
     it("check object-size labels from index", function() {
@@ -55,7 +56,8 @@ describe("<Index />", function() {
                             two: "two"
                         }
                     },
-                    arr: [[1, "two"], { one: "one", two: 2 }]
+                    arr: [[1, "two"], { one: "one", two: 2 }],
+                    regexp: /[0-9]/gi
                 }}
                 displayObjectSize={true}
                 displayDataTypes={true}
@@ -82,11 +84,12 @@ describe("<Index />", function() {
                     test: true,
                     passing: "hopefully",
                     arr: [5],
-                    obj: {}
+                    obj: {},
+                    regexp: /[0-9]/gi
                 }}
             />
         )
-        expect(wrapper.find(".copy-to-clipboard-container")).to.have.length(6)
+        expect(wrapper.find(".copy-to-clipboard-container")).to.have.length(7)
     })
 
     it("index test componentWillReceiveProps", function() {