setExpanded(!expanded)}
+ data-depth={depth - 1}
+ >
{labelContent}
- {(!label || !expanded) &&
{title}
}
+ {(!label || !expanded) && (
+
{title}
+ )}
+
+
(
diff --git a/src/ReactJsonView/index.less b/src/ReactJsonView/index.less
index f70bcc5..9e5f8ef 100644
--- a/src/ReactJsonView/index.less
+++ b/src/ReactJsonView/index.less
@@ -2,16 +2,18 @@
@fontFamily: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
monospace;
-.rjv-node {
- font-size: @fontSize;
- line-height: 1.4;
+.rjv-ref {
code {
font-family: @fontFamily;
}
- &__title {
+ &-node {
+ font-size: @fontSize;
+ line-height: 1.4;
+ }
+ &-title {
cursor: default;
}
- &__spread-controller {
+ &-arrow {
transform: rotateZ(0);
transform-origin: 35% center;
transition: transform linear 0.1s;
@@ -19,26 +21,11 @@
transform: rotateZ(90deg);
}
}
- &__property {
+ &-property {
margin-left: 12px;
- &-key {
- font-size: @fontSize;
- font-family: @fontFamily;
- color: #7d237c;
- }
- }
- .rjv-load-more {
- color: #7d237c;
- font-size: 13px;
- > span {
- cursor: pointer;
- &:hover {
- text-decoration: underline;
- }
- }
}
}
-.rjv-type-node {
+.rjv-primitive-type {
font-size: @fontSize;
font-family: @fontFamily;
&.number,
@@ -54,15 +41,6 @@
&::after {
content: '"';
}
- .copyable {
- &-icon {
- position: absolute;
- right: 0;
- bottom: 0;
- transform: translate(17px, 4px);
- cursor: pointer;
- }
- }
}
&.symbol {
color: #be3c31;
@@ -76,12 +54,47 @@
}
}
+.rjv-node__property-key {
+ font-size: @fontSize;
+ font-family: @fontFamily;
+ color: #7d237c;
+}
+
+.rjv-load-more {
+ color: #7d237c;
+ font-size: 13px;
+ > span {
+ cursor: pointer;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+}
+
+.rjv-copyable {
+ display: inline-block;
+ margin-left: 4px;
+ cursor: pointer;
+ visibility: hidden;
+ transform: translateY(2px);
+}
+
+
+.rjv-primitive,
+.rjv-ref-title {
+ &:hover {
+ .rjv-copyable {
+ visibility: visible;
+ }
+ }
+}
+
[data-dark-mode='true'] {
.rjv-node__property-key,
.rjv-load-more {
color: #70afd3;
}
- .rjv-type-node {
+ .rjv-primitive-type {
&.number,
&.boolean {
color: #9384f7;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index d9d0b58..2921bbf 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -58,7 +58,7 @@ export function shortTitle(data: any, max = 100) {
if (typeof curVal === 'string') {
curVal = cutOffStringLiteral(curVal);
}
- const curStr = `${key}: ${JSON.stringify(curVal)}`;
+ const curStr = `"${key}": ${JSON.stringify(curVal)}`;
const result = `${content}${curStr}, `;
if (result.length > max) {
hasEllipsis = true;