New style theme. Clickable links and other changes

index.d.ts

@@ -276,6 +276,7 @@ export type ThemeKeys =
   | 'pop'
   | 'railscasts'
   | 'rjv-default'
+  | 'rjv_white'
   | 'shapeshifter'
   | 'shapeshifter:inverted'
   | 'solarized'

src/js/components/DataTypes/String.js

@@ -20,6 +20,7 @@ export default class extends React.PureComponent {
                 true
             )
         };
+        this.style = { cursor: 'default' };
     }
 
     toggleCollapsed = () => {
@@ -35,32 +36,54 @@ export default class extends React.PureComponent {
         });
     }
 
+    isLink = (value) => {
+        return /(http(s?)):\/\//i.test(value) ? true : false
+    }
+
+    getHighlightValue = (value) => {
+        let colorLink = Theme(this.props.theme, 'link').style.color;
+        let result = splitAndPushByDelimiter(value, this.props.highlightSearch).map((word, i) => [
+            <span
+                key={i}
+                class="string-value"
+                style={{ backgroundColor: i % 2 === 1 ? this.props.highlightSearchColor : 'transparent', ...this.style }}
+                onClick={this.toggleCollapsed}
+            >
+                {word}
+            </span>
+        ])
+
+        if(this.isLink(value)) {
+            return <a href={value} style={{ cursor: 'pointer', color: colorLink }} rel="noopener noreferrer" target="_blank">{result}</a>
+        }
+
+        return <span>"{result}"</span>
+    }
+
+    getValue = (value) => {
+        let colorLink = Theme(this.props.theme, 'link').style.color;
+        if(this.isLink(value)) {
+            return <a href={value} style={{ cursor: 'pointer', color: colorLink }} rel="noopener noreferrer" target="_blank">{value}</a>
+        }
+        return `"${value}"`
+    }
+
     render() {
         const type_name = 'string';
         const { props } = this;
         const { collapseStringsAfterLength, theme } = props;
         let { value } = props;
         let collapsible = toType(collapseStringsAfterLength) === 'integer';
-        let style = { cursor: 'default' };
 
         if (props.highlightSearch && `"${value}"`.toLowerCase().includes(props.highlightSearch.toLowerCase())) {
             return <div {...Theme(theme, 'string')}>
                 <DataTypeLabel type_name={type_name} {...props} />
-                {splitAndPushByDelimiter(`"${value}"`, props.highlightSearch).map((word, i) => [
-                    <span
-                        key={i}
-                        class="string-value"
-                        style={{backgroundColor: i%2 === 1 ? props.highlightSearchColor : 'transparent', ...style}}
-                        onClick={this.toggleCollapsed}
-                    >
-                        {word}
-                    </span>
-                ])}
+                {this.getHighlightValue(value)}
             </div>
         }
 
         if (collapsible && value.length > collapseStringsAfterLength) {
-            style.cursor = 'pointer';
+            this.style.cursor = 'pointer';
             if (this.state.collapsed) {
                 value = (
                     <span>
@@ -76,10 +99,10 @@ export default class extends React.PureComponent {
                 <DataTypeLabel type_name={type_name} {...props} />
                 <span
                     class="string-value"
-                    style={style}
+                    style={this.style}
                     onClick={this.toggleCollapsed}
                 >
-                    "{value}"
+                    {this.getValue(value)}
                 </span>
             </div>
         );

src/js/components/icons.js

@@ -88,7 +88,7 @@ export class ArrowRight extends React.PureComponent {
         return (
             <span {...rest}>
                 <svg
-                    style={{...getIconStyle(style).style, paddingLeft: '2px', verticalAlign: 'top'}}
+                    style={{...getIconStyle(style).style, paddingLeft: '2px', verticalAlign: 'top', position: 'relative', top: '2px'}}
                     viewBox="0 0 15 15"
                     fill="currentColor"
                 >
@@ -107,7 +107,7 @@ export class ArrowDown extends React.PureComponent {
         return (
             <span {...rest}>
                 <svg
-                    style={{...getIconStyle(style).style, paddingLeft: '2px', verticalAlign: 'top'}}
+                    style={{...getIconStyle(style).style, paddingLeft: '2px', verticalAlign: 'top', position: 'relative', top: '2px'}}
                     viewBox="0 0 15 15"
                     fill="currentColor"
                 >

src/js/themes/base16/rjv-themes.js

@@ -2,20 +2,20 @@ export const rjv_default = {
     scheme: 'rjv-default',
     author: 'mac gainor',
     //transparent main background
-    base00: 'rgba(0, 0, 0, 0)',
+    base00: 'rgb(48, 54, 60)',
     base01: 'rgb(245, 245, 245)',
     base02: 'rgb(235, 235, 235)',
     base03: '#93a1a1',
-    base04: 'rgba(0, 0, 0, 0.3)',
+    base04: 'rgb(192 197 206 / 40%)',
     base05: '#586e75',
     base06: '#073642',
-    base07: '#002b36',
+    base07: 'rgb(192, 197, 206)',
     base08: '#d33682',
-    base09: '#cb4b16',
+    base09: 'rgb(223, 86, 30)',
     base0A: '#dc322f',
     base0B: '#859900',
     base0C: '#6c71c4',
-    base0D: '#586e75',
+    base0D: 'rgb(224 228 236)',
     base0E: '#2aa198',
     base0F: '#268bd2'
 };
@@ -40,3 +40,25 @@ export const rjv_grey = {
     base0E: 'rgba(1, 1, 1, 0.8)',
     base0F: 'rgba(1, 1, 1, 0.8)'
 };
+
+export const rjv_white = {
+    scheme: 'rjv-grey',
+    author: 'mac gainor',
+    base00: 'rgb(48, 54, 60)',
+    base01: 'rgba(255, 255, 255, 0.1)',
+    base02: 'rgba(255, 255, 255, 0.2)',
+    base03: 'rgba(255, 255, 255, 0.3)',
+    base04: 'rgba(255, 255, 255, 0.4)',
+    base05: 'rgba(255, 255, 255, 0.5)',
+    base06: 'rgba(255, 255, 255, 0.6)',
+    base07: 'rgba(255, 255, 255, 0.7)',
+    base08: 'rgba(255, 255, 255, 0.8)',
+    base09: 'rgba(255, 255, 255, 0.8)',
+    base0A: 'rgba(255, 255, 255, 0.8)',
+    base0B: 'rgba(255, 255, 255, 0.8)',
+    base0C: 'rgba(255, 255, 255, 0.8)',
+    base0D: 'rgba(255, 255, 255, 0.8)',
+    base0E: 'rgba(255, 255, 255, 0.8)',
+    base0F: 'rgba(255, 255, 255, 0.8)'
+};
+

src/js/themes/getStyle.js

@@ -1,4 +1,4 @@
-import { rjv_default, rjv_grey } from './base16/rjv-themes';
+import { rjv_default, rjv_grey, rjv_white } from './base16/rjv-themes';
 import constants from './styleConstants';
 import { createStyling } from 'react-base16-styling';
 
@@ -190,6 +190,10 @@ const getDefaultThemeStyling = theme => {
             display: 'inline-block',
             color: colors.dataTypes.string
         },
+        link: {
+            display: 'inline-block',
+            color: '#6d9af3'
+        },
         nan: {
             display: 'inline-block',
             color: colors.dataTypes.nan,
@@ -394,6 +398,8 @@ const getStyle = theme => {
     let rjv_theme = rjv_default;
     if (theme === false || theme === 'none') {
         rjv_theme = rjv_grey;
+    } else if (theme === "rjv_white") {
+        rjv_theme = rjv_white;
     }
 
     return createStyling(getDefaultThemeStyling, { defaultBase16: rjv_theme })(

src/style/scss/global.scss

@@ -1,4 +1,7 @@
 .react-json-view {
+    border-left: 2px dashed rgb(171, 177, 189);
+    padding: 16px;
+
     .copy-to-clipboard-container {
         vertical-align: top;
         display: none;