Header Tool-Bar (#65)

* Style and Doc fixes

* Add header tool-bar

* Adjust unit test

* Define default alignment for header items

* Bump minor version

Author: CarstenWickner

CHANGELOG.MD

@@ -5,6 +5,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- allow for addition of tool-bar items in the header besides the search input via `renderHeaderToolBar` prop
+
+### Fixed
+- height of breadcrumb items should not grow with custom trailing content
 
 ## [4.0.1] - 2019-11-01
 ### Fixed

README.md

@@ -57,6 +57,7 @@ npm i react-jsonschema-inspector
 | `searchOptions.inputPlaceholder` | String: for setting the input hint in the search field. This defaults to `"Search"`. |
 | `searchOptions.debounceWait` | Number indicating the delay in milliseconds between the last change to the search term being entered and it actually being applied. This defaults to `200` but may be increased when used with exceptionally large schemas and you experience performance issues. Please refer to the documentation on [`lodash.debounce`](https://lodash.com/docs/4.17.11#debounce). |
 | `searchOptions.debounceMaxWait` | Number indicating the maximum delay in milliseconds after the search term was changed. This defaults to `500`. Please refer to the documentation on [`lodash.debounce`](https://lodash.com/docs/4.17.11#debounce). |
+| `renderHeaderToolBar` | Function: custom render function for additional header tool-bar besides search input. Receives one parameter: object with a: "columnData" property |
 | `renderItemContent` | Function: custom render function for name of single property/sub-schema in a column. Receives one parameter: object with the following properties: "name", "hasNestedItems", "selected", "schemaGroup" |
 | `renderSelectionDetails` | Function: custom render function for the "Details" block on the right for the single property/sub-schema being selected. Receives one parameter: object with the following properties: "itemSchemaGroup", "columnData", "selectionColumnIndex", "optionIndexes" |
 | `renderEmptyDetails` | Function: custom render function for the "Details" block on the right if nothing is selected yet. Receives one parameter, which is an object with the "rootColumnSchemas" property, which holds the array of top-level schemas (as derived from the `schemas` prop and augmented by any given `referenceSchemas`)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-jsonschema-inspector",
-    "version": "4.0.2-SNAPSHOT",
+    "version": "4.1.0-SNAPSHOT",
     "description": "View component for traversing/searching in a JSON Schema",
     "homepage": "https://CarstenWickner.github.io/react-jsonschema-inspector",
     "author": "Carsten Wickner",

src/component/Inspector.scss

@@ -154,13 +154,23 @@
     &-header {
         flex-direction: row-reverse;
         margin-bottom: $verticalSpacingOutside;
+        align-items: end;
+    }
+    &-toolbar {
+        padding: $spacingInside;
+        min-height: 2em;
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
     }
     &-search {
         padding: $spacingInside;
 
         &-input {
             font: inherit;
-            line-height: 2em;   
+            line-height: 2em;
+            min-height: 2em;
             border: $innerBorder;
             border-radius: $borderRadius;
             padding: 0 $spacingInside;
@@ -194,6 +204,7 @@
             margin-right: -0.75em;
             padding: 0 0.25em 0 1.25em;
             line-height: 2em;
+            height: 2em;
             text-overflow: ellipsis;
 
             &.has-nested-items {

src/component/Inspector.tsx

@@ -214,25 +214,31 @@ export class Inspector extends React.Component<
             buildArrayProperties,
             searchOptions,
             breadcrumbs,
+            renderHeaderToolBar,
             renderItemContent,
             renderSelectionDetails,
             renderEmptyDetails
         } = this.props;
         const { selectedItems, appendEmptyColumn, enteredSearchFilter, appliedSearchFilter } = this.state;
-        const { columnData } = this.getRenderDataForSelection(schemas, referenceSchemas, selectedItems, parserConfig, buildArrayProperties);
+        const renderDataForSelection = this.getRenderDataForSelection(schemas, referenceSchemas, selectedItems, parserConfig, buildArrayProperties);
+        const { columnData } = renderDataForSelection;
         // apply search filter if enabled or clear (potentially left-over) search results
         columnData.forEach(this.setFilteredItemsForColumn(searchOptions, appliedSearchFilter));
         const searchFeatureEnabled =
             searchOptions && (searchOptions.byPropertyName || (searchOptions.fields && searchOptions.fields.length) || searchOptions.filterBy);
+        const shouldShowHeaderToolBar = renderHeaderToolBar || searchFeatureEnabled;
         return (
             <div className="jsonschema-inspector">
-                {searchFeatureEnabled && (
+                {shouldShowHeaderToolBar && (
                     <div className="jsonschema-inspector-header">
-                        <InspectorSearchField
-                            searchFilter={enteredSearchFilter}
-                            onSearchFilterChange={this.onSearchFilterChange}
-                            placeholder={searchOptions.inputPlaceholder}
-                        />
+                        {searchFeatureEnabled && (
+                            <InspectorSearchField
+                                searchFilter={enteredSearchFilter}
+                                onSearchFilterChange={this.onSearchFilterChange}
+                                placeholder={searchOptions.inputPlaceholder}
+                            />
+                        )}
+                        {renderHeaderToolBar && <div className="jsonschema-inspector-toolbar">{renderHeaderToolBar(renderDataForSelection)}</div>}
                     </div>
                 )}
                 <div className="jsonschema-inspector-body">
@@ -285,6 +291,7 @@ export class Inspector extends React.Component<
             debounceMaxWait: PropTypes.number
         }),
         onSelect: PropTypes.func,
+        renderHeaderToolBar: PropTypes.func,
         renderItemContent: PropTypes.func,
         renderSelectionDetails: PropTypes.func,
         renderEmptyDetails: PropTypes.func
@@ -303,6 +310,7 @@ export class Inspector extends React.Component<
             fields: ["title", "description"]
         },
         onSelect: undefined,
+        renderHeaderToolBar: undefined,
         renderItemContent: undefined,
         renderSelectionDetails: undefined,
         renderEmptyDetails: undefined

src/component/InspectorTypes.ts

@@ -104,6 +104,10 @@ export interface InspectorDefaultProps {
         newRenderData: { columnData: Array<RenderColumn> },
         breadcrumbsTexts?: Array<string>
     ) => void;
+    /**
+     * Custom render function for the header tool-bar (to the left of the search field).
+     */
+    renderHeaderToolBar?: (props: { columnData: Array<RenderColumn> }) => React.ReactElement;
     /**
      * Custom render function for the content of a single item in a column.
      * Expects a single object as input with the following keys:
@@ -125,6 +129,7 @@ export interface InspectorDefaultProps {
      * - "itemSchemaGroup": the full `JsonSchemaGroup` associated with the currently selected trailing item (i.e. right-most selection)
      * - "columnData": the full render information for all columns
      * - "selectionColumnIndex": indicating the index of the right-most column containing a selected item (for convenient use of "columnData")
+     * - "optionIndexes": in case of an optional path being selected
      */
     renderSelectionDetails?: (props: {
         itemSchemaGroup: JsonSchemaGroup;

stories/Inspector.RenderHeaderToolBar.stories.mdx

@@ -0,0 +1,41 @@
+import { Meta, Preview, Story, Props } from '@storybook/addon-docs/blocks';
+import { action } from "@storybook/addon-actions";
+import "./style-overrides.css";
+
+import { Inspector, getCommonFieldValuesFromSchemaGroup } from "../src/index";
+
+import personSchema from "./schema-person.json";
+import shopSelectionSchema from "./schema-shop-selection.json";
+
+<Meta title="Inspector (renderHeaderToolBar)" component={Inspector} />
+
+# Inspector (renderHeaderToolBar)
+## Focus: Customise Header Tool-Bar
+
+<Props of={Inspector} exclude={Object.keys(Inspector.propTypes).filter(propName => propName !== "renderHeaderToolBar")} />
+
+----
+
+### with custom tool-bar items
+The `renderHeaderToolBar` prop allows you to define additional content to be displayed besides the search filter in the header.
+
+<Preview>
+    <Story name="with custom tool-bar items">
+        <Inspector
+            schemas={{
+                Person: personSchema,
+                Shop: shopSelectionSchema
+            }}
+            defaultSelectedItems={["Person", "friends"]}
+            renderHeaderToolBar={({ columnData }) => (
+                <>
+                    <button type="button" style={{ padding: "0.25em", lineHeight: "2em", marginRight: ".5em" }}>Static</button>
+                    {columnData.filter(column => column.selectedItem).map((column, index) => (
+                        <button key={index} type="button" style={{ padding: "0.25em", lineHeight: "2em" }}>{`#${index}: ${column.selectedItem}`}</button>
+                    ))}
+                </>
+            )}
+            onSelect={action("onSelect")}
+        />
+    </Story>
+</Preview>

test/component/Inspector.test.tsx

@@ -162,6 +162,35 @@ describe("renders correctly", () => {
             expect(filteredItems).toBeUndefined();
         });
     });
+    describe("with header tool-bar", () => {
+        const renderHeaderToolBar = (): React.ReactChild => <div>tool-bar-item</div>;
+        it("without search field", () => {
+            const component = shallow(<Inspector schemas={schemas} renderHeaderToolBar={renderHeaderToolBar} searchOptions={null} />);
+            const header = component.find(".jsonschema-inspector-header");
+            expect(header.exists()).toBe(true);
+            expect(header.childAt(0).text()).toBe("tool-bar-item");
+            expect(header.childAt(1).exists()).toBe(false);
+        });
+        it("in addition to search field", () => {
+            const component = shallow(
+                <Inspector
+                    schemas={schemas}
+                    renderHeaderToolBar={renderHeaderToolBar}
+                    searchOptions={{
+                        byPropertyName: true
+                    }}
+                />
+            );
+            const header = component.find(".jsonschema-inspector-header");
+            expect(header.exists()).toBe(true);
+            expect(header.childAt(0).prop("searchFilter")).toBe("");
+            expect(header.childAt(1).text()).toBe("tool-bar-item");
+        });
+    });
+    it("without header", () => {
+        const component = shallow(<Inspector schemas={schemas} searchOptions={null} />);
+        expect(component.find(".jsonschema-inspector-header").exists()).toBe(false);
+    });
     it("without footer", () => {
         const component = shallow(<Inspector schemas={schemas} breadcrumbs={null} />);
         expect(component.find(".jsonschema-inspector-footer").exists()).toBe(false);