From d52a7b03b18f0c94f735a96bca2607fccca9cfa9 Mon Sep 17 00:00:00 2001
From: rickcole <rickcole21@outlook.com>
Date: Thu, 18 Jun 2020 13:04:55 +0800
Subject: [PATCH] =?UTF-8?q?json=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=EF=BC=8Cmapping=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderers/Json.tsx    | 29 +++++++++++++++++++++++++----
 src/renderers/Mapping.tsx | 19 ++++++++-----------
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/renderers/Json.tsx b/src/renderers/Json.tsx
index 5c713828..48d605ce 100644
--- a/src/renderers/Json.tsx
+++ b/src/renderers/Json.tsx
@@ -45,7 +45,8 @@ const twilight = {
     WebkitUserSelect: 'none',
     backgroundColor: 'rgba(255, 255, 255, 0.4)',
     whiteSpace: 'nowrap',
-    display: 'inline-block'
+    display: 'inline-block',
+    width: '100%'
   }
 };
 
@@ -80,7 +81,8 @@ const eighties = {
     WebkitUserSelect: 'none',
     backgroundColor: '#2D2D2D',
     whiteSpace: 'nowrap',
-    display: 'inline-block'
+    display: 'inline-block',
+    width: '100%'
   }
 };
 
@@ -99,12 +101,31 @@ export class JSONField extends React.Component<JSONProps, object> {
   valueRenderer(raw: any) {
     if (typeof raw === 'string' && /^\"?https?:\/\//.test(raw)) {
       return (
-        <a href={raw.replace(/^\"(.*)\"$/, '$1')} target="_blank">
+        <a
+          className="word-break"
+          style={{
+            whiteSpace: 'normal',
+            wordBreak: 'break-all',
+            wordWrap: 'break-word'
+          }}
+          href={raw.replace(/^\"(.*)\"$/, '$1')}
+          target="_blank"
+        >
           {raw}
         </a>
       );
     }
-    return raw;
+    return (
+      <span
+        style={{
+          whiteSpace: 'normal',
+          wordBreak: 'break-all',
+          wordWrap: 'break-word'
+        }}
+      >
+        {raw}
+      </span>
+    );
   }
 
   shouldExpandNode = (keyName: any, data: any, level: any) => {
diff --git a/src/renderers/Mapping.tsx b/src/renderers/Mapping.tsx
index dd20c3e1..ce9c77f7 100644
--- a/src/renderers/Mapping.tsx
+++ b/src/renderers/Mapping.tsx
@@ -20,23 +20,20 @@ export class MappingField extends React.Component<MappingProps, object> {
   };
 
   render() {
-    const {
-      className,
-      value,
-      placeholder,
-      map,
-      render,
-      classnames: cx
-    } = this.props;
+    const {className, placeholder, map, render, classnames: cx} = this.props;
+    let key = this.props.value;
 
     let viewValue: React.ReactNode = (
       <span className="text-muted">{placeholder}</span>
     );
-    let key = value === true ? '1' : value;
+
     key = typeof key === 'string' ? key.trim() : key; // trim 一下，干掉一些空白字符。
 
-    if (typeof value !== 'undefined' && map && (map[key] || map['*'])) {
-      viewValue = render('tpl', map[key] || map['*']);
+    if (typeof key !== 'undefined' && map && (map[key] ?? map['*'])) {
+      viewValue = render(
+        'tpl',
+        map[key] ?? (key === true && map['1'] ? map['1'] : map['*']) // 兼容旧用法，即 value 为 true 时映射 1
+      );
     }
 
     return <span className={cx('MappingField', className)}>{viewValue}</span>;