Skip to content

Commit 2c722a2

Browse files
lottamusP0lip
lottamus
authored and
P0lip
committed
fix: attempt to align caret
1 parent 02e6779 commit 2c722a2

File tree

3 files changed

+84
-50
lines changed

3 files changed

+84
-50
lines changed

‎src/components/SchemaRow.tsx‎

Lines changed: 75 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { ITreeListNode, TreeStore } from '@stoplight/tree-list';
1+
import { IRowRendererOptions, ITreeListNode, TreeStore } from '@stoplight/tree-list';
22
import { Omit } from '@stoplight/types';
3-
import { Button, Checkbox, Icon } from '@stoplight/ui-kit';
3+
import { Button, Checkbox, Colors, Icon } from '@stoplight/ui-kit';
44
import * as cn from 'classnames';
55
import * as pluralize from 'pluralize';
66
import * as React from 'react';
@@ -11,10 +11,13 @@ import { Divider, Types } from './';
1111

1212
export interface ISchemaRow extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onSelect'>, IMasking {
1313
node: ITreeListNode<object>;
14+
rowOptions: IRowRendererOptions;
1415
onMaskEdit(node: SchemaNodeWithMeta): void;
1516
treeStore: TreeStore;
1617
}
1718

19+
const ICON_SIZE = 12;
20+
1821
export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({
1922
node,
2023
treeStore,
@@ -53,57 +56,82 @@ export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({
5356

5457
const validationCount = 'validations' in schemaNode ? Object.keys(schemaNode.validations).length : 0;
5558

56-
return (
57-
<div className="flex flex-1 items-center text-sm leading-tight relative select-none mr-3">
58-
{showDivider && <Divider>or</Divider>}
59-
60-
<div className="flex-1 truncate">
61-
<div className="flex items-baseline">
62-
{name && <span className="mr-3">{name}</span>}
63-
64-
<Types type={type} subtype={subtype}>
65-
{type === '$ref' ? `[${$ref}]` : null}
66-
</Types>
67-
68-
{inheritedFrom ? (
69-
<>
70-
<span className="text-darken-7 mx-2">{`{${formatRef(inheritedFrom)}}`}</span>
71-
{onMaskEdit !== undefined && <span onClick={handleEditMask}>(edit mask)</span>}
72-
</>
73-
) : null}
74-
</div>
75-
76-
{description && <span className="text-darken-7 text-xs">{description}</span>}
77-
</div>
59+
const showCaretIcon = node.level > 0 && node.canHaveChildren ? true : false;
7860

79-
{(canSelect || validationCount || required) && (
80-
<div className="items-center text-right ml-auto text-xs">
81-
{canSelect ? (
82-
<Checkbox onChange={handleChange} checked={selected && selected.includes(pathToString(path))} />
83-
) : (
84-
<>
85-
{validationCount ? (
86-
<span className="mr-2 text-darken-7">
87-
{validationCount} {pluralize('validation', validationCount)}
88-
</span>
89-
) : null}
90-
91-
{required && <span className="font-semibold">required</span>}
92-
</>
93-
)}
94-
</div>
95-
)}
61+
const marginLeft = ICON_SIZE * node.level;
9662

97-
{(validationCount || description) &&
98-
node.canHaveChildren && (
63+
return (
64+
<div className="flex-1 flex items-center" style={{ marginLeft: ICON_SIZE, marginRight: ICON_SIZE }}>
65+
<div
66+
className="flex flex-1 items-center text-sm leading-tight w-full h-full relative"
67+
style={{ marginLeft, marginRight: ICON_SIZE }}
68+
>
69+
{showCaretIcon && (
9970
<Button
71+
minimal
10072
small
101-
className={cn(required && 'ml-2')}
102-
id={`${node.id}-showMore`}
103-
icon={<Icon icon="info-sign" className="opacity-75" iconSize={12} />}
104-
onClick={handleButtonClick}
73+
className="absolute"
74+
style={{ left: ICON_SIZE * -2 }}
75+
icon={
76+
<Icon
77+
iconSize={ICON_SIZE}
78+
icon={treeStore.isNodeExpanded(node) ? 'caret-down' : 'caret-right'}
79+
color={Colors.GRAY1}
80+
/>
81+
}
10582
/>
10683
)}
84+
85+
{showDivider && <Divider>or</Divider>}
86+
87+
<div className="flex-1 truncate">
88+
<div className="flex items-baseline">
89+
{name && <span className="mr-3">{name}</span>}
90+
91+
<Types type={type} subtype={subtype}>
92+
{type === '$ref' ? `[${$ref}]` : null}
93+
</Types>
94+
95+
{inheritedFrom ? (
96+
<>
97+
<span className="text-darken-7 mx-2">{`{${formatRef(inheritedFrom)}}`}</span>
98+
{onMaskEdit !== undefined && <span onClick={handleEditMask}>(edit mask)</span>}
99+
</>
100+
) : null}
101+
</div>
102+
103+
{description && <span className="text-darken-7 text-xs">{description}</span>}
104+
</div>
105+
106+
{(canSelect || validationCount || required) && (
107+
<div className="items-center text-right ml-auto text-xs">
108+
{canSelect ? (
109+
<Checkbox onChange={handleChange} checked={selected && selected.includes(pathToString(path))} />
110+
) : (
111+
<>
112+
{validationCount ? (
113+
<span className="mr-2 text-darken-7">
114+
{validationCount} {pluralize('validation', validationCount)}
115+
</span>
116+
) : null}
117+
118+
{required && <span className="font-semibold">required</span>}
119+
</>
120+
)}
121+
</div>
122+
)}
123+
124+
{(validationCount || description) &&
125+
node.canHaveChildren && (
126+
<Button
127+
small
128+
className={cn(required && 'ml-2')}
129+
id={`${node.id}-showMore`}
130+
icon={<Icon icon="info-sign" className="opacity-75" iconSize={ICON_SIZE} />}
131+
onClick={handleButtonClick}
132+
/>
133+
)}
134+
</div>
107135
</div>
108136
);
109137
};

‎src/components/SchemaTree.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ export const SchemaTree = observer<ISchemaTree>(props => {
4747
);
4848

4949
treeStore.on(TreeListEvents.NodeClick, (e, node) => {
50+
if (node.level === 0) return; // Don't allow collapsing the root
51+
5052
if (node.canHaveChildren) {
5153
treeStore.toggleExpand(node);
5254
} else {
@@ -62,9 +64,13 @@ export const SchemaTree = observer<ISchemaTree>(props => {
6264
selected,
6365
canSelect,
6466
treeStore,
67+
count: treeStore.nodes.length,
6568
};
6669

67-
const rowRenderer = React.useCallback(node => <SchemaRow node={node} {...itemData} />, [itemData]);
70+
const rowRenderer = React.useCallback(
71+
(node, rowOptions) => <SchemaRow node={node} rowOptions={rowOptions} {...itemData} />,
72+
[itemData]
73+
);
6874

6975
return (
7076
<div className={cn(className, 'flex flex-col h-full w-full')} {...rest}>
@@ -76,7 +82,7 @@ export const SchemaTree = observer<ISchemaTree>(props => {
7682

7783
<DetailDialog treeStore={treeStore} />
7884

79-
<TreeList rowHeight={ROW_HEIGHT} canDrag={canDrag} store={treeStore} rowRenderer={rowRenderer} />
85+
<TreeList striped rowHeight={ROW_HEIGHT} canDrag={canDrag} store={treeStore} rowRenderer={rowRenderer} />
8086
</div>
8187
);
8288
});

‎yarn.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12474,7 +12474,7 @@ read@1, read@~1.0.1, read@~1.0.7:
1247412474
string_decoder "~1.1.1"
1247512475
util-deprecate "~1.0.1"
1247612476

12477-
readable-stream@^3.1.1:
12477+
readable-stream@^3.0.6, readable-stream@^3.1.1:
1247812478
version "3.3.0"
1247912479
resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-3.3.0.tgz#cb8011aad002eb717bf040291feba8569c986fb9"
1248012480
integrity sha512-EsI+s3k3XsW+fU8fQACLN59ky34AZ14LoeVZpYwmZvldCFo0r0gnelwF2TcMjLor/BTL5aDJVBMkss0dthToPw==

0 commit comments

Comments
 (0)