Feature/improve modal performance (#10)

* make modal single instance

* bump version

* remove unused

* update docs

docs/asset-manifest.json

@@ -1,7 +1,7 @@
 {
   "files": {
     "0.97dc7c88.iframe.bundle.js": "./0.97dc7c88.iframe.bundle.js",
-    "main.js": "./main.def69772.iframe.bundle.js",
+    "main.js": "./main.c7f46bdf.iframe.bundle.js",
     "runtime~main.js": "./runtime~main.806b4e7e.iframe.bundle.js",
     "vendors~main.js": "./vendors~main.2b0e6e48.iframe.bundle.js",
     "vendors~main.js.map": "./vendors~main.2b0e6e48.iframe.bundle.js.map",
@@ -19,6 +19,6 @@
   "entrypoints": [
     "runtime~main.806b4e7e.iframe.bundle.js",
     "vendors~main.2b0e6e48.iframe.bundle.js",
-    "main.def69772.iframe.bundle.js"
+    "main.c7f46bdf.iframe.bundle.js"
   ]
 }

docs/iframe.html

@@ -130,4 +130,4 @@
 
 
 
-              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.806b4e7e.iframe.bundle.js"></script><script src="vendors~main.2b0e6e48.iframe.bundle.js"></script><script src="main.def69772.iframe.bundle.js"></script></body></html>
+              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.806b4e7e.iframe.bundle.js"></script><script src="vendors~main.2b0e6e48.iframe.bundle.js"></script><script src="main.c7f46bdf.iframe.bundle.js"></script></body></html>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@optum/json-schema-editor",
-	"version": "2.0.3",
+	"version": "2.1.0",
 	"description": "JsonSchema Editor React Control",
 	"repository": "https://github.com/optum/jsonschema-editor-react",
 	"license": "Apache 2.0",
@@ -24,7 +24,7 @@
 		"build": "microbundle --jsx React.createElement",
 		"test": "react-scripts test",
 		"eject": "react-scripts eject",
-		"storybook": "start-storybook -p 6006 -s docs",
+		"storybook": "rimraf docs && start-storybook -p 6006 -s docs",
 		"build-storybook": "rimraf docs && build-storybook --docs -o docs"
 	},
 	"eslintConfig": {

readme.md

@@ -47,7 +47,7 @@ yarn add @optum/json-schema-editor
 | readOnly       | boolean                            | make editor read only                        | false                 |
 | onSchemaChange | callback (results: string) => void | callback method to capture changes to schema | required (no default) |
 
-## Example
+## Usage
 
 ```js
 import JsonSchemaEditor from "@optum/json-schema-editor";

src/JsonSchemaEditor/advanced-string/index.tsx

@@ -86,6 +86,7 @@ export const AdvancedString: React.FunctionComponent<AdvancedItemStateProps> = (
 				<FormLabel mr={2}>Max Length: </FormLabel>
 				<NumberInput
 					size="sm"
+					defaultValue={Number(itemState.maxLength.value)}
 					onChange={(value: number | string) => {
 						itemState.maxLength.set(Number(value));
 					}}

src/JsonSchemaEditor/schema-item/index.tsx

@@ -37,7 +37,7 @@ export interface SchemaItemProps extends FlexProps {
 	parentStateProp: State<JSONSchema7>;
 	name: string;
 	isReadOnly: State<boolean>;
-	showadvanced: (item: State<JSONSchema7>) => void;
+	showadvanced: (item: string) => void;
 }
 
 export const SchemaItem: React.FunctionComponent<SchemaItemProps> = (
@@ -214,7 +214,7 @@ export const SchemaItem: React.FunctionComponent<SchemaItemProps> = (
 							icon={<FiSettings />}
 							aria-label="Advanced Settings"
 							onClick={() => {
-								showadvanced(itemState);
+								showadvanced(name);
 							}}
 						/>
 					</Tooltip>

src/JsonSchemaEditor/schema-object/index.tsx

@@ -39,14 +39,16 @@ export const SchemaObject: React.FunctionComponent<SchemaObjectProps> = (
 		localState.isAdvancedOpen.set(false);
 	};
 
-	const showadvanced = (item: State<JSONSchema7>): void => {
+	const showadvanced = (item: string): void => {
 		localState.isAdvancedOpen.set(true);
+		localState.item.set(item);
 	};
 
 	const focusRef = React.createRef<HTMLElement>();
 
 	const localState = useState({
 		isAdvancedOpen: false,
+		item: "",
 	});
 
 	if (!propertiesOrNull) {
@@ -56,55 +58,53 @@ export const SchemaObject: React.FunctionComponent<SchemaObjectProps> = (
 			<div className="object-style">
 				{propertiesOrNull?.keys?.map((name) => {
 					return (
-						<>
-							<SchemaItem
-								key={String(name)}
+						<SchemaItem
+							key={String(name)}
+							itemStateProp={
+								propertiesOrNull.nested(name as string) as State<JSONSchema7>
+							}
+							parentStateProp={schema}
+							name={name as string}
+							showadvanced={showadvanced}
+							required={schema.required.value as string[]}
+							isReadOnly={isReadOnlyState}
+						/>
+					);
+				})}
+				<Modal
+					isOpen={localState.isAdvancedOpen.get()}
+					finalFocusRef={focusRef}
+					size="lg"
+					onClose={onCloseAdvanced}
+				>
+					<ModalOverlay />
+					<ModalContent>
+						<ModalHeader textAlign="center">
+							Advanced Schema Settings
+						</ModalHeader>
+
+						<ModalBody>
+							<AdvancedSettings
 								itemStateProp={
-									propertiesOrNull.nested(name as string) as State<JSONSchema7>
+									propertiesOrNull.nested(
+										localState.item.value as string
+									) as State<JSONSchema7>
 								}
-								parentStateProp={schema}
-								name={name as string}
-								showadvanced={showadvanced}
-								required={schema.required.value as string[]}
-								isReadOnly={isReadOnlyState}
 							/>
-							<Modal
-								isOpen={localState.isAdvancedOpen.get()}
-								finalFocusRef={focusRef}
-								size="lg"
-								onClose={onCloseAdvanced}
-							>
-								<ModalOverlay />
-								<ModalContent>
-									<ModalHeader textAlign="center">
-										Advanced Schema Settings
-									</ModalHeader>
+						</ModalBody>
 
-									<ModalBody>
-										<AdvancedSettings
-											itemStateProp={
-												propertiesOrNull.nested(
-													name as string
-												) as State<JSONSchema7>
-											}
-										/>
-									</ModalBody>
-
-									<ModalFooter>
-										<Button
-											colorScheme="blue"
-											variant="ghost"
-											mr={3}
-											onClick={onCloseAdvanced}
-										>
-											Close
-										</Button>
-									</ModalFooter>
-								</ModalContent>
-							</Modal>
-						</>
-					);
-				})}
+						<ModalFooter>
+							<Button
+								colorScheme="blue"
+								variant="ghost"
+								mr={3}
+								onClick={onCloseAdvanced}
+							>
+								Close
+							</Button>
+						</ModalFooter>
+					</ModalContent>
+				</Modal>
 			</div>
 		);
 	}

src/JsonSchemaEditor/state/schema.ts

@@ -15,20 +15,6 @@ export const defaultSchema = (): JSONSchema7 => {
 	};
 };
 
-const countKeys = (object: any): number => {
-	if (typeof object !== "object" || object === null) {
-		return 0;
-	}
-
-	const keys = Object.keys(object);
-	let sum = keys.length;
-	for (const key of keys) {
-		sum += countKeys(object[key]);
-	}
-
-	return sum;
-};
-
 const isValidSchema = (schema: JSONSchema7): boolean => {
 	const isValid = ajv.validateSchema(schema);
 	return isValid;

src/stories/JsonSchemaEditor.stories.tsx

@@ -2,30 +2,30 @@ import React from "react";
 
 import { Story, Meta } from "@storybook/react";
 
-import JsonSchemaEditor from "../JsonSchemaEditor";
-import { SchemaEditorProps } from "../JsonSchemaEditor/JsonSchemaEditor.types";
+import JsonSchemaEditor from "..";
+import { SchemaEditorProps } from "../JsonSchemaEditor.types";
 import { readOnlyData, printIt } from "./helper";
 
 export default {
-  title: "Example/SchemaEditor",
-  component: JsonSchemaEditor,
+	title: "Example/SchemaEditor",
+	component: JsonSchemaEditor,
 } as Meta;
 
 const Template: Story<SchemaEditorProps> = (args) => (
-  <JsonSchemaEditor {...args} />
+	<JsonSchemaEditor {...args} />
 );
 
 export const NewJsonSchema = Template.bind({});
 NewJsonSchema.args = {
-  onSchemaChange: (r) => {
-    console.log(r);
-  },
+	onSchemaChange: (r) => {
+		console.log(r);
+	},
 };
 
 export const WithData = Template.bind({});
 WithData.args = {
-  data: readOnlyData,
-  onSchemaChange: (r) => {
-    printIt(r);
-  },
+	data: readOnlyData,
+	onSchemaChange: (r) => {
+		printIt(r);
+	},
 };