Skip to content

fix: remove un-needed sass file #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 20, 2019
Merged

fix: remove un-needed sass file #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dc37ec9
fix: remove scss dep
lottamus May 20, 2019
177b5fe
fix: negative margin-left instead of absolute left
lottamus May 20, 2019
6ac60b0
fix: truncate pattern props too
lottamus May 20, 2019
9b62d28
test: update snapshots
lottamus May 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/__fixtures__/default-schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"properties": {
"name": {
"type": "string",
"description": "The user's full name."
"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!"
},
"age": {
"type": "number",
Expand All @@ -19,7 +19,8 @@
"type": ["null", "array"],
"items": {
"type": ["string", "number"]
}
},
"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!"
},
"email": {
"type": "string",
Expand Down
6 changes: 2 additions & 4 deletions src/__stories__/_styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,2 @@
@import '../styles/json-schema-viewer';

@import '~@stoplight/tree-list/styles/_tree-list.scss';
@import '~@stoplight/ui-kit/styles/_ui-kit.scss';
@import "~@stoplight/tree-list/styles/_tree-list.scss";
@import "~@stoplight/ui-kit/styles/_ui-kit.scss";
113 changes: 52 additions & 61 deletions src/components/SchemaRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,19 +39,16 @@ export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({ node, treeStore
const validationCount = Object.keys(nodeValidations).length;

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

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

{schemaNode.divider && (
<div className="flex items-center w-full absolute" style={{ top: -9, height: 1 }}>
<div
className="font-medium text-darken-7 dark:text-lighten-7 pr-2 uppercase text-xs"
style={{ marginLeft: -10 }}
>
{schemaNode.divider}
</div>
<div className="text-darken-7 dark:text-lighten-7 uppercase text-xs pr-2 -ml-4">{schemaNode.divider}</div>
<div className="flex-1 bg-darken-5 dark:bg-lighten-5" style={{ height: 1 }} />
</div>
)}

<div className="flex-1 truncate">
<div className="flex items-baseline">
{name && <span className="mr-2">{name}</span>}

<Types type={type} subtype={subtype}>
{type === '$ref' ? `[${$ref}]` : null}
</Types>

{node.canHaveChildren && (
<span className="ml-2 text-darken-7 dark:text-lighten-6">{`{${childrenCount}}`}</span>
)}

{'pattern' in schemaNode && schemaNode.pattern ? (
<span className="text-darken-7 dark:text-lighten-6 ml-2">(pattern property)</span>
) : null}

{description && (
<Popover
boundary="window"
interactionKind="hover"
className="overflow-hidden JSV--Popover"
targetClassName="overflow-hidden block"
target={<div className="ml-2 text-darken-7 dark:text-lighten-6 truncate">{description}</div>}
content={
<div className="p-5" style={{ maxHeight: 500, maxWidth: 400 }}>
<MarkdownViewer markdown={description} />
</div>
}
/>
)}
</div>
<div className="flex-1 flex truncate">
{name && <div className="mr-2">{name}</div>}

<Types type={type} subtype={subtype}>
{type === '$ref' ? `[${$ref}]` : null}
</Types>

{node.canHaveChildren && <div className="ml-2 text-darken-7 dark:text-lighten-6">{`{${childrenCount}}`}</div>}

{'pattern' in schemaNode && schemaNode.pattern ? (
<div className="ml-2 text-darken-7 dark:text-lighten-6 truncate">(pattern property)</div>
) : null}

{description && (
<Popover
boundary="window"
interactionKind="hover"
className="ml-2 flex-1 truncate flex items-baseline"
target={<div className="text-darken-7 dark:text-lighten-6 w-full truncate">{description}</div>}
targetClassName="text-darken-7 dark:text-lighten-6 w-full truncate"
content={
<div className="p-5" style={{ maxHeight: 500, maxWidth: 400 }}>
<MarkdownViewer markdown={description} />
</div>
}
/>
)}
</div>

{validationCount ? (
<Popover
boundary="window"
interactionKind="hover"
content={
<div className="p-3">
<div className="p-5" style={{ maxHeight: 500, maxWidth: 400 }}>
{map(Object.keys(nodeValidations), (key, index) => {
const validation = nodeValidations[key];

let elem = [];
let elem = null;
if (Array.isArray(validation)) {
elem = validation.map(v => (
<span key={v} className="px-1 bg-red-2 text-red-7 text-sm rounded">
{v}
</span>
elem = validation.map((v, i) => (
<div className="mt-1 mr-1 flex items-center">
<div className="px-1 bg-gray-2 font-bold text-sm rounded" key={i}>
{v}
</div>
{i < validation.length - 1 ? <div>,</div> : null}
</div>
));
} else if (typeof validation === 'object') {
elem = [
<span key={index} className="px-1 bg-red-2 text-red-7 text-sm rounded">
elem = (
<div className="m-1 px-1 bg-gray-2 font-bold text-sm rounded" key={index}>
{'{...}'}
</span>,
];
</div>
);
} else {
elem = [
<span key={index} className="px-1 bg-red-2 text-red-7 text-sm rounded">
elem = (
<div className="m-1 px-1 bg-gray-2 font-bold text-sm rounded" key={index}>
{JSON.stringify(validation)}
</span>,
];
</div>
);
}

return (
<div key={index} className="py-1">
<span className="font-medium pr-2">{key}:</span>
<span className="px-1 bg-red-2 text-red-7 text-sm rounded">{elem}</span>
<div key={index} className="py-1 flex items-baseline">
<div className="font-medium pr-2 w-24">{key}:</div>
<div className="flex-1 flex flex-wrap text-center">{elem}</div>
</div>
);
})}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Types.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export interface IType {

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

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

return (
<div className={cn(className, 'overflow-hidden')}>
<div className={cn(className, 'truncate')}>
<>
{type.map((name, i, { length }) => (
<React.Fragment key={i}>
Expand Down
11 changes: 0 additions & 11 deletions src/styles/_json-schema-viewer.scss
View file
Open in desktop

This file was deleted.

9 changes: 6 additions & 3 deletions src/utils/__tests__/__snapshots__/renderSchema.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,6 +374,7 @@ Array [
"type": "string",
},
"items": Object {
"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!",
"items": Object {
"type": Array [
"string",
Expand All @@ -386,7 +387,7 @@ Array [
],
},
"name": Object {
"description": "The user's full name.",
"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!",
"type": "string",
},
"permissions": Object {
Expand Down Expand Up @@ -442,7 +443,7 @@ Array [
"level": 1,
"metadata": Object {
"annotations": Object {
"description": "The user's full name.",
"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!",
},
"enum": undefined,
"id": "random-id",
Expand Down Expand Up @@ -503,7 +504,9 @@ Array [
"level": 1,
"metadata": Object {
"additionalItems": undefined,
"annotations": Object {},
"annotations": Object {
"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!",
},
"enum": undefined,
"id": "random-id",
"items": undefined,
Expand Down