json样式优化，mapping优化

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) => {

src/renderers/Mapping.tsx

@@ -20,23 +20,20 @@ export class MappingField extends React.Component<MappingProps, object> {
   };
 
   render() {
-    const {
+    const {className, placeholder, map, render, classnames: cx} = this.props;
-      className,
+    let key = this.props.value;
-      value,
-      placeholder,
-      map,
-      render,
-      classnames: cx
-    } = this.props;
 
     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['*'])) {
+    if (typeof key !== 'undefined' && map && (map[key] ?? map['*'])) {
-      viewValue = render('tpl', 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>;