Skip to content

Commit f01de44

Browse files
lottamuslottamus
authored
fix: remove un-needed sass file (#23)
* fix: remove scss dep * fix: negative margin-left instead of absolute left * fix: truncate pattern props too * test: update snapshots
1 parent c713724 commit f01de44

File tree

6 files changed

+65
-83
lines changed

6 files changed

+65
-83
lines changed

‎src/__fixtures__/default-schema.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"properties": {
55
"name": {
66
"type": "string",
7-
"description": "The user's full name."
7+
"description": "The user's full name. This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!"
88
},
99
"age": {
1010
"type": "number",
@@ -19,7 +19,8 @@
1919
"type": ["null", "array"],
2020
"items": {
2121
"type": ["string", "number"]
22-
}
22+
},
23+
"description": "This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!"
2324
},
2425
"email": {
2526
"type": "string",

‎src/__stories__/_styles.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
1-
@import '../styles/json-schema-viewer';
2-
3-
@import '~@stoplight/tree-list/styles/_tree-list.scss';
4-
@import '~@stoplight/ui-kit/styles/_ui-kit.scss';
1+
@import "~@stoplight/tree-list/styles/_tree-list.scss";
2+
@import "~@stoplight/ui-kit/styles/_ui-kit.scss";

‎src/components/SchemaRow.tsx‎

Lines changed: 52 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -39,19 +39,16 @@ export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({ node, treeStore
3939
const validationCount = Object.keys(nodeValidations).length;
4040

4141
const requiredElem = (
42-
<span className={cn(required ? 'font-medium' : 'text-darken-7 dark:text-lighten-6')}>
42+
<div className={cn('ml-2', required ? 'font-medium' : 'text-darken-7 dark:text-lighten-6')}>
4343
{required ? 'required' : 'optional'}
4444
{validationCount ? `+${validationCount}` : ''}
45-
</span>
45+
</div>
4646
);
4747

4848
return (
49-
<div
50-
className="flex-1 flex items-center overflow-hidden"
51-
style={{ marginLeft: ROW_OFFSET, marginRight: ROW_OFFSET }}
52-
>
49+
<div className="px-2 flex-1 w-full">
5350
<div
54-
className="flex flex-1 items-center text-sm leading-tight w-full h-full relative overflow-hidden"
51+
className="flex items-center text-sm relative"
5552
style={{
5653
marginLeft: ICON_DIMENSION * node.level, // offset for spacing
5754
}}
@@ -76,83 +73,77 @@ export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({ node, treeStore
7673

7774
{schemaNode.divider && (
7875
<div className="flex items-center w-full absolute" style={{ top: -9, height: 1 }}>
79-
<div
80-
className="font-medium text-darken-7 dark:text-lighten-7 pr-2 uppercase text-xs"
81-
style={{ marginLeft: -10 }}
82-
>
83-
{schemaNode.divider}
84-
</div>
76+
<div className="text-darken-7 dark:text-lighten-7 uppercase text-xs pr-2 -ml-4">{schemaNode.divider}</div>
8577
<div className="flex-1 bg-darken-5 dark:bg-lighten-5" style={{ height: 1 }} />
8678
</div>
8779
)}
8880

89-
<div className="flex-1 truncate">
90-
<div className="flex items-baseline">
91-
{name && <span className="mr-2">{name}</span>}
92-
93-
<Types type={type} subtype={subtype}>
94-
{type === '$ref' ? `[${$ref}]` : null}
95-
</Types>
96-
97-
{node.canHaveChildren && (
98-
<span className="ml-2 text-darken-7 dark:text-lighten-6">{`{${childrenCount}}`}</span>
99-
)}
100-
101-
{'pattern' in schemaNode && schemaNode.pattern ? (
102-
<span className="text-darken-7 dark:text-lighten-6 ml-2">(pattern property)</span>
103-
) : null}
104-
105-
{description && (
106-
<Popover
107-
boundary="window"
108-
interactionKind="hover"
109-
className="overflow-hidden JSV--Popover"
110-
targetClassName="overflow-hidden block"
111-
target={<div className="ml-2 text-darken-7 dark:text-lighten-6 truncate">{description}</div>}
112-
content={
113-
<div className="p-5" style={{ maxHeight: 500, maxWidth: 400 }}>
114-
<MarkdownViewer markdown={description} />
115-
</div>
116-
}
117-
/>
118-
)}
119-
</div>
81+
<div className="flex-1 flex truncate">
82+
{name && <div className="mr-2">{name}</div>}
83+
84+
<Types type={type} subtype={subtype}>
85+
{type === '$ref' ? `[${$ref}]` : null}
86+
</Types>
87+
88+
{node.canHaveChildren && <div className="ml-2 text-darken-7 dark:text-lighten-6">{`{${childrenCount}}`}</div>}
89+
90+
{'pattern' in schemaNode && schemaNode.pattern ? (
91+
<div className="ml-2 text-darken-7 dark:text-lighten-6 truncate">(pattern property)</div>
92+
) : null}
93+
94+
{description && (
95+
<Popover
96+
boundary="window"
97+
interactionKind="hover"
98+
className="ml-2 flex-1 truncate flex items-baseline"
99+
target={<div className="text-darken-7 dark:text-lighten-6 w-full truncate">{description}</div>}
100+
targetClassName="text-darken-7 dark:text-lighten-6 w-full truncate"
101+
content={
102+
<div className="p-5" style={{ maxHeight: 500, maxWidth: 400 }}>
103+
<MarkdownViewer markdown={description} />
104+
</div>
105+
}
106+
/>
107+
)}
120108
</div>
121109

122110
{validationCount ? (
123111
<Popover
124112
boundary="window"
125113
interactionKind="hover"
126114
content={
127-
<div className="p-3">
115+
<div className="p-5" style={{ maxHeight: 500, maxWidth: 400 }}>
128116
{map(Object.keys(nodeValidations), (key, index) => {
129117
const validation = nodeValidations[key];
130118

131-
let elem = [];
119+
let elem = null;
132120
if (Array.isArray(validation)) {
133-
elem = validation.map(v => (
134-
<span key={v} className="px-1 bg-red-2 text-red-7 text-sm rounded">
135-
{v}
136-
</span>
121+
elem = validation.map((v, i) => (
122+
<div className="mt-1 mr-1 flex items-center">
123+
<div className="px-1 bg-gray-2 font-bold text-sm rounded" key={i}>
124+
{v}
125+
</div>
126+
{i < validation.length - 1 ? <div>,</div> : null}
127+
</div>
137128
));
138129
} else if (typeof validation === 'object') {
139-
elem = [
140-
<span key={index} className="px-1 bg-red-2 text-red-7 text-sm rounded">
130+
elem = (
131+
<div className="m-1 px-1 bg-gray-2 font-bold text-sm rounded" key={index}>
141132
{'{...}'}
142-
</span>,
143-
];
133+
</div>
134+
);
144135
} else {
145-
elem = [
146-
<span key={index} className="px-1 bg-red-2 text-red-7 text-sm rounded">
136+
elem = (
137+
<div className="m-1 px-1 bg-gray-2 font-bold text-sm rounded" key={index}>
147138
{JSON.stringify(validation)}
148-
</span>,
149-
];
139+
</div>
140+
);
150141
}
151142

152143
return (
153-
<div key={index} className="py-1">
154-
<span className="font-medium pr-2">{key}:</span>
155-
<span className="px-1 bg-red-2 text-red-7 text-sm rounded">{elem}</span>
144+
<div key={index} className="py-1 flex items-baseline">
145+
<div className="font-medium pr-2 w-24">{key}:</div>
146+
<div className="flex-1 flex flex-wrap text-center">{elem}</div>
156147
</div>
157148
);
158149
})}

‎src/components/Types.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export interface IType {
1616

1717
export const Type: React.FunctionComponent<IType> = ({ className, children, type, subtype }) => {
1818
return (
19-
<span className={cn(className, PropertyTypeColors[type])}>
19+
<span className={cn(className, PropertyTypeColors[type], 'truncate')}>
2020
{type === 'array' && subtype && subtype !== 'array' ? `array[${subtype}]` : type}
2121

2222
{children}
@@ -42,7 +42,7 @@ export const Types: React.FunctionComponent<ITypes> = ({ className, type, subtyp
4242
}
4343

4444
return (
45-
<div className={cn(className, 'overflow-hidden')}>
45+
<div className={cn(className, 'truncate')}>
4646
<>
4747
{type.map((name, i, { length }) => (
4848
<React.Fragment key={i}>

‎src/styles/_json-schema-viewer.scss‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/utils/__tests__/__snapshots__/renderSchema.spec.ts.snap‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -374,6 +374,7 @@ Array [
374374
"type": "string",
375375
},
376376
"items": Object {
377+
"description": "This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!",
377378
"items": Object {
378379
"type": Array [
379380
"string",
@@ -386,7 +387,7 @@ Array [
386387
],
387388
},
388389
"name": Object {
389-
"description": "The user's full name.",
390+
"description": "The user's full name. This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!",
390391
"type": "string",
391392
},
392393
"permissions": Object {
@@ -442,7 +443,7 @@ Array [
442443
"level": 1,
443444
"metadata": Object {
444445
"annotations": Object {
445-
"description": "The user's full name.",
446+
"description": "The user's full name. This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!",
446447
},
447448
"enum": undefined,
448449
"id": "random-id",
@@ -503,7 +504,9 @@ Array [
503504
"level": 1,
504505
"metadata": Object {
505506
"additionalItems": undefined,
506-
"annotations": Object {},
507+
"annotations": Object {
508+
"description": "This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!",
509+
},
507510
"enum": undefined,
508511
"id": "random-id",
509512
"items": undefined,

0 commit comments

Comments
 (0)