From 13649fc32c47e52a3d62c1cd2d166643274bc048 Mon Sep 17 00:00:00 2001
From: rickcole <rickcole21@outlook.com>
Date: Thu, 18 Jun 2020 13:30:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=B8=80=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scss/components/_json.scss |  7 +++++++
 scss/themes/cxd.scss       |  1 +
 scss/themes/dark.scss      |  1 +
 scss/themes/default.scss   |  1 +
 src/renderers/Json.tsx     | 22 +++++-----------------
 src/renderers/Mapping.tsx  |  7 ++++++-
 6 files changed, 21 insertions(+), 18 deletions(-)
 create mode 100644 scss/components/_json.scss

diff --git a/scss/components/_json.scss b/scss/components/_json.scss
new file mode 100644
index 00000000..c9a18b98
--- /dev/null
+++ b/scss/components/_json.scss
@@ -0,0 +1,7 @@
+.#{$ns}JsonField {
+  &-nodeValue {
+    white-space: normal;
+    word-break: break-all;
+    overflow-wrap: break-word;
+  }
+}
diff --git a/scss/themes/cxd.scss b/scss/themes/cxd.scss
index 77a0ccf5..8218fa33 100644
--- a/scss/themes/cxd.scss
+++ b/scss/themes/cxd.scss
@@ -523,6 +523,7 @@ $Satus-icon-width: px2rem(14px);
 @import '../components/result-box';
 @import '../components/search-box';
 @import '../components/list-menu';
+@import '../components/json';
 
 @import '../components/form/fieldset';
 @import '../components/form/group';
diff --git a/scss/themes/dark.scss b/scss/themes/dark.scss
index 0c030beb..25bd89bf 100644
--- a/scss/themes/dark.scss
+++ b/scss/themes/dark.scss
@@ -209,6 +209,7 @@ pre {
 @import '../components/result-box';
 @import '../components/search-box';
 @import '../components/list-menu';
+@import '../components/json';
 
 @import '../components/form/fieldset';
 @import '../components/form/group';
diff --git a/scss/themes/default.scss b/scss/themes/default.scss
index 607dfb29..8551bf6d 100644
--- a/scss/themes/default.scss
+++ b/scss/themes/default.scss
@@ -72,6 +72,7 @@ $Form-input-borderColor: #cfdadd;
 @import '../components/result-box';
 @import '../components/search-box';
 @import '../components/list-menu';
+@import '../components/json';
 
 @import '../components/form/fieldset';
 @import '../components/form/group';
diff --git a/src/renderers/Json.tsx b/src/renderers/Json.tsx
index 48d605ce..2f9eb7ea 100644
--- a/src/renderers/Json.tsx
+++ b/src/renderers/Json.tsx
@@ -6,6 +6,7 @@ import {filter} from '../utils/tpl';
 import cx from 'classnames';
 
 import JSONTree from 'react-json-tree';
+import {autobind} from '../utils/helper';
 
 export interface JSONProps extends RendererProps {
   className?: string;
@@ -98,16 +99,13 @@ export class JSONField extends React.Component<JSONProps, object> {
     jsonTheme: 'twilight'
   };
 
+  @autobind
   valueRenderer(raw: any) {
+    const cx = this.props.classnames;
     if (typeof raw === 'string' && /^\"?https?:\/\//.test(raw)) {
       return (
         <a
-          className="word-break"
-          style={{
-            whiteSpace: 'normal',
-            wordBreak: 'break-all',
-            wordWrap: 'break-word'
-          }}
+          className={cx('JsonField-nodeValue')}
           href={raw.replace(/^\"(.*)\"$/, '$1')}
           target="_blank"
         >
@@ -115,17 +113,7 @@ export class JSONField extends React.Component<JSONProps, object> {
         </a>
       );
     }
-    return (
-      <span
-        style={{
-          whiteSpace: 'normal',
-          wordBreak: 'break-all',
-          wordWrap: 'break-word'
-        }}
-      >
-        {raw}
-      </span>
-    );
+    return <span className={cx('JsonField-nodeValue')}>{raw}</span>;
   }
 
   shouldExpandNode = (keyName: any, data: any, level: any) => {
diff --git a/src/renderers/Mapping.tsx b/src/renderers/Mapping.tsx
index ce9c77f7..0eb5a6f4 100644
--- a/src/renderers/Mapping.tsx
+++ b/src/renderers/Mapping.tsx
@@ -32,7 +32,12 @@ export class MappingField extends React.Component<MappingProps, object> {
     if (typeof key !== 'undefined' && map && (map[key] ?? map['*'])) {
       viewValue = render(
         'tpl',
-        map[key] ?? (key === true && map['1'] ? map['1'] : map['*']) // 兼容旧用法，即 value 为 true 时映射 1
+        map[key] ??
+          (key === true && map['1']
+            ? map['1']
+            : key === false && map['0']
+            ? map['0']
+            : map['*']) // 兼容平台旧用法：即 value 为 true 时映射 1 ，为 false 时映射 0
       );
     }