diff --git a/package.json b/package.json index 7b46eaea..1afcf090 100644 --- a/package.json +++ b/package.json @@ -47,8 +47,7 @@ "@stoplight/react-error-boundary": "^1.0.0", "@stoplight/tree-list": "^5.0.3", "classnames": "^2.2.6", - "lodash": "^4.17.15", - "mobx-react-lite": "^1.4.1" + "lodash": "^4.17.15" }, "devDependencies": { "@rollup/plugin-commonjs": "^11.1.0", diff --git a/src/__stories__/JsonSchemaViewer.tsx b/src/__stories__/JsonSchemaViewer.tsx index 05f226c5..1bfea806 100644 --- a/src/__stories__/JsonSchemaViewer.tsx +++ b/src/__stories__/JsonSchemaViewer.tsx @@ -1,6 +1,6 @@ import { Button, Checkbox, Icon } from '@stoplight/ui-kit'; import { action } from '@storybook/addon-actions'; -import { boolean, number, object, select, text, withKnobs } from '@storybook/addon-knobs'; +import { boolean, number, object, select, withKnobs } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react'; import { JSONSchema4 } from 'json-schema'; import * as React from 'react'; @@ -17,11 +17,9 @@ storiesOf('JsonSchemaViewer', module) .addDecorator(storyFn => {storyFn()}) .add('default', () => ( (
)) .add('error boundary', () => ( @@ -159,7 +146,6 @@ storiesOf('JsonSchemaViewer', module) }} expanded={boolean('expanded', false)} defaultExpandedDepth={number('defaultExpandedDepth', 2)} - hideTopBar={boolean('hideTopBar', false)} onGoToRef={action('onGoToRef')} mergeAllOf={boolean('mergeAllOf', true)} /> @@ -167,11 +153,9 @@ storiesOf('JsonSchemaViewer', module) .add('dark', () => (
diff --git a/src/components/JsonSchemaViewer.tsx b/src/components/JsonSchemaViewer.tsx index 562e4bdb..a6c51237 100644 --- a/src/components/JsonSchemaViewer.tsx +++ b/src/components/JsonSchemaViewer.tsx @@ -12,13 +12,10 @@ import { SchemaTree as SchemaTreeComponent } from './SchemaTree'; export interface IJsonSchemaViewer { schema: JSONSchema4; - style?: object; emptyText?: string; defaultExpandedDepth?: number; expanded?: boolean; className?: string; - name?: string; - hideTopBar?: boolean; maxRows?: number; onGoToRef?: GoToRefHandler; mergeAllOf?: boolean; @@ -113,7 +110,7 @@ export class JsonSchemaViewerComponent extends React.PureComponent - +
); diff --git a/src/components/SchemaTree.tsx b/src/components/SchemaTree.tsx index 1928a3a1..0b93428e 100644 --- a/src/components/SchemaTree.tsx +++ b/src/components/SchemaTree.tsx @@ -1,6 +1,5 @@ -import { TreeList, TreeListEvents, TreeStore } from '@stoplight/tree-list'; +import { isParentNode, TreeList, TreeListEvents, TreeStore } from '@stoplight/tree-list'; import { JSONSchema4 } from 'json-schema'; -import { observer } from 'mobx-react-lite'; import * as React from 'react'; import { GoToRefHandler, RowRenderer } from '../types'; @@ -9,22 +8,18 @@ import { SchemaRow } from './SchemaRow'; export interface ISchemaTree { treeStore: TreeStore; schema: JSONSchema4; - name?: string; - hideTopBar?: boolean; expanded?: boolean; maxRows?: number; onGoToRef?: GoToRefHandler; rowRenderer?: RowRenderer; } -const canDrag = () => false; - -export const SchemaTree = observer(props => { - const { hideTopBar, name, treeStore, maxRows, onGoToRef, rowRenderer: customRowRenderer } = props; +export const SchemaTree: React.FC = props => { + const { treeStore, maxRows, onGoToRef, rowRenderer: customRowRenderer } = props; React.useEffect(() => { treeStore.events.on(TreeListEvents.NodeClick, (e, node) => { - if ('children' in node) { + if (isParentNode(node)) { treeStore.toggleExpand(node); } }); @@ -46,21 +41,13 @@ export const SchemaTree = observer(props => { ); return ( - <> - {name && !hideTopBar && ( -
- {name} -
- )} - - - + ); -}); +}; SchemaTree.displayName = 'JsonSchemaViewer.SchemaTree'; diff --git a/src/components/__tests__/SchemaTree.spec.tsx b/src/components/__tests__/SchemaTree.spec.tsx index 7c213daf..eda2156e 100644 --- a/src/components/__tests__/SchemaTree.spec.tsx +++ b/src/components/__tests__/SchemaTree.spec.tsx @@ -8,9 +8,6 @@ import * as React from 'react'; import { useMetadata } from '../../hooks/useMetadata'; import { SchemaTree } from '../index'; -jest.mock('mobx-react-lite', () => ({ - observer: (children: any) => children, -})); jest.mock('../../hooks/useMetadata'); const schema: JSONSchema4 = { @@ -64,8 +61,7 @@ describe('SchemaTree component', () => { it('should be not draggable', () => { const treeList = shallow().find(TreeList); - expect(treeList.prop('canDrag')).toHaveLength(0); - expect(treeList.prop('canDrag')!({} as any)).toBe(false); + expect(treeList.prop('draggable')).toBe(false); }); }); }); diff --git a/yarn.lock b/yarn.lock index 160a5d23..89a623fd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10966,7 +10966,7 @@ mkdirp@1.x, mkdirp@^1.0.4: dependencies: minimist "0.0.8" -mobx-react-lite@^1.4.1, mobx-react-lite@^1.5.2: +mobx-react-lite@^1.5.2: version "1.5.2" resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-1.5.2.tgz#c4395b0568b9cb16f07669d8869cc4efa1b8656d" integrity sha512-PyZmARqqWtpuQaAoHF5pKX7h6TKNLwq6vtovm4zZvG6sEbMRHHSqioGXSeQbpRmG8Kw8uln3q/W1yMO5IfL5Sg==