优化一下

This commit is contained in:
rickcole 2020-06-18 13:30:19 +08:00
parent 8c26b51063
commit 51d6a77a72
6 changed files with 21 additions and 18 deletions

View File

@ -0,0 +1,7 @@
.#{$ns}JsonField {
&-nodeValue {
white-space: normal;
word-break: break-all;
overflow-wrap: break-word;
}
}

View File

@ -523,6 +523,7 @@ $Satus-icon-width: px2rem(14px);
@import '../components/result-box'; @import '../components/result-box';
@import '../components/search-box'; @import '../components/search-box';
@import '../components/list-menu'; @import '../components/list-menu';
@import '../components/json';
@import '../components/form/fieldset'; @import '../components/form/fieldset';
@import '../components/form/group'; @import '../components/form/group';

View File

@ -209,6 +209,7 @@ pre {
@import '../components/result-box'; @import '../components/result-box';
@import '../components/search-box'; @import '../components/search-box';
@import '../components/list-menu'; @import '../components/list-menu';
@import '../components/json';
@import '../components/form/fieldset'; @import '../components/form/fieldset';
@import '../components/form/group'; @import '../components/form/group';

View File

@ -72,6 +72,7 @@ $Form-input-borderColor: #cfdadd;
@import '../components/result-box'; @import '../components/result-box';
@import '../components/search-box'; @import '../components/search-box';
@import '../components/list-menu'; @import '../components/list-menu';
@import '../components/json';
@import '../components/form/fieldset'; @import '../components/form/fieldset';
@import '../components/form/group'; @import '../components/form/group';

View File

@ -6,6 +6,7 @@ import {filter} from '../utils/tpl';
import cx from 'classnames'; import cx from 'classnames';
import JSONTree from 'react-json-tree'; import JSONTree from 'react-json-tree';
import {autobind} from '../utils/helper';
export interface JSONProps extends RendererProps { export interface JSONProps extends RendererProps {
className?: string; className?: string;
@ -98,16 +99,13 @@ export class JSONField extends React.Component<JSONProps, object> {
jsonTheme: 'twilight' jsonTheme: 'twilight'
}; };
@autobind
valueRenderer(raw: any) { valueRenderer(raw: any) {
const cx = this.props.classnames;
if (typeof raw === 'string' && /^\"?https?:\/\//.test(raw)) { if (typeof raw === 'string' && /^\"?https?:\/\//.test(raw)) {
return ( return (
<a <a
className="word-break" className={cx('JsonField-nodeValue')}
style={{
whiteSpace: 'normal',
wordBreak: 'break-all',
wordWrap: 'break-word'
}}
href={raw.replace(/^\"(.*)\"$/, '$1')} href={raw.replace(/^\"(.*)\"$/, '$1')}
target="_blank" target="_blank"
> >
@ -115,17 +113,7 @@ export class JSONField extends React.Component<JSONProps, object> {
</a> </a>
); );
} }
return ( return <span className={cx('JsonField-nodeValue')}>{raw}</span>;
<span
style={{
whiteSpace: 'normal',
wordBreak: 'break-all',
wordWrap: 'break-word'
}}
>
{raw}
</span>
);
} }
shouldExpandNode = (keyName: any, data: any, level: any) => { shouldExpandNode = (keyName: any, data: any, level: any) => {

View File

@ -32,7 +32,12 @@ export class MappingField extends React.Component<MappingProps, object> {
if (typeof key !== 'undefined' && map && (map[key] ?? map['*'])) { if (typeof key !== 'undefined' && map && (map[key] ?? map['*'])) {
viewValue = render( viewValue = render(
'tpl', '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
); );
} }