Skip to content

Commit cb1dd7c

Browse files
author
Ryan Sites
authored
Feature/improve modal performance (#10)
* make modal single instance * bump version * remove unused * update docs
1 parent a074508 commit cb1dd7c

File tree

10 files changed

+68
-81
lines changed

10 files changed

+68
-81
lines changed

‎docs/asset-manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"files": {
33
"0.97dc7c88.iframe.bundle.js": "./0.97dc7c88.iframe.bundle.js",
4-
"main.js": "./main.def69772.iframe.bundle.js",
4+
"main.js": "./main.c7f46bdf.iframe.bundle.js",
55
"runtime~main.js": "./runtime~main.806b4e7e.iframe.bundle.js",
66
"vendors~main.js": "./vendors~main.2b0e6e48.iframe.bundle.js",
77
"vendors~main.js.map": "./vendors~main.2b0e6e48.iframe.bundle.js.map",
@@ -19,6 +19,6 @@
1919
"entrypoints": [
2020
"runtime~main.806b4e7e.iframe.bundle.js",
2121
"vendors~main.2b0e6e48.iframe.bundle.js",
22-
"main.def69772.iframe.bundle.js"
22+
"main.c7f46bdf.iframe.bundle.js"
2323
]
2424
}

‎docs/iframe.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,4 +130,4 @@
130130

131131

132132

133-
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>
133+
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>

‎docs/main.def69772.iframe.bundle.js‎ renamed to ‎docs/main.c7f46bdf.iframe.bundle.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@optum/json-schema-editor",
3-
"version": "2.0.3",
3+
"version": "2.1.0",
44
"description": "JsonSchema Editor React Control",
55
"repository": "https://github.com/optum/jsonschema-editor-react",
66
"license": "Apache 2.0",
@@ -24,7 +24,7 @@
2424
"build": "microbundle --jsx React.createElement",
2525
"test": "react-scripts test",
2626
"eject": "react-scripts eject",
27-
"storybook": "start-storybook -p 6006 -s docs",
27+
"storybook": "rimraf docs && start-storybook -p 6006 -s docs",
2828
"build-storybook": "rimraf docs && build-storybook --docs -o docs"
2929
},
3030
"eslintConfig": {

‎readme.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ yarn add @optum/json-schema-editor
4747
| readOnly | boolean | make editor read only | false |
4848
| onSchemaChange | callback (results: string) => void | callback method to capture changes to schema | required (no default) |
4949

50-
## Example
50+
## Usage
5151

5252
```js
5353
import JsonSchemaEditor from "@optum/json-schema-editor";

‎src/JsonSchemaEditor/advanced-string/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ export const AdvancedString: React.FunctionComponent<AdvancedItemStateProps> = (
8686
<FormLabel mr={2}>Max Length: </FormLabel>
8787
<NumberInput
8888
size="sm"
89+
defaultValue={Number(itemState.maxLength.value)}
8990
onChange={(value: number | string) => {
9091
itemState.maxLength.set(Number(value));
9192
}}

‎src/JsonSchemaEditor/schema-item/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export interface SchemaItemProps extends FlexProps {
3737
parentStateProp: State<JSONSchema7>;
3838
name: string;
3939
isReadOnly: State<boolean>;
40-
showadvanced: (item: State<JSONSchema7>) => void;
40+
showadvanced: (item: string) => void;
4141
}
4242

4343
export const SchemaItem: React.FunctionComponent<SchemaItemProps> = (
@@ -214,7 +214,7 @@ export const SchemaItem: React.FunctionComponent<SchemaItemProps> = (
214214
icon={<FiSettings />}
215215
aria-label="Advanced Settings"
216216
onClick={() => {
217-
showadvanced(itemState);
217+
showadvanced(name);
218218
}}
219219
/>
220220
</Tooltip>

‎src/JsonSchemaEditor/schema-object/index.tsx‎

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,16 @@ export const SchemaObject: React.FunctionComponent<SchemaObjectProps> = (
3939
localState.isAdvancedOpen.set(false);
4040
};
4141

42-
const showadvanced = (item: State<JSONSchema7>): void => {
42+
const showadvanced = (item: string): void => {
4343
localState.isAdvancedOpen.set(true);
44+
localState.item.set(item);
4445
};
4546

4647
const focusRef = React.createRef<HTMLElement>();
4748

4849
const localState = useState({
4950
isAdvancedOpen: false,
51+
item: "",
5052
});
5153

5254
if (!propertiesOrNull) {
@@ -56,55 +58,53 @@ export const SchemaObject: React.FunctionComponent<SchemaObjectProps> = (
5658
<div className="object-style">
5759
{propertiesOrNull?.keys?.map((name) => {
5860
return (
59-
<>
60-
<SchemaItem
61-
key={String(name)}
61+
<SchemaItem
62+
key={String(name)}
63+
itemStateProp={
64+
propertiesOrNull.nested(name as string) as State<JSONSchema7>
65+
}
66+
parentStateProp={schema}
67+
name={name as string}
68+
showadvanced={showadvanced}
69+
required={schema.required.value as string[]}
70+
isReadOnly={isReadOnlyState}
71+
/>
72+
);
73+
})}
74+
<Modal
75+
isOpen={localState.isAdvancedOpen.get()}
76+
finalFocusRef={focusRef}
77+
size="lg"
78+
onClose={onCloseAdvanced}
79+
>
80+
<ModalOverlay />
81+
<ModalContent>
82+
<ModalHeader textAlign="center">
83+
Advanced Schema Settings
84+
</ModalHeader>
85+
86+
<ModalBody>
87+
<AdvancedSettings
6288
itemStateProp={
63-
propertiesOrNull.nested(name as string) as State<JSONSchema7>
89+
propertiesOrNull.nested(
90+
localState.item.value as string
91+
) as State<JSONSchema7>
6492
}
65-
parentStateProp={schema}
66-
name={name as string}
67-
showadvanced={showadvanced}
68-
required={schema.required.value as string[]}
69-
isReadOnly={isReadOnlyState}
7093
/>
71-
<Modal
72-
isOpen={localState.isAdvancedOpen.get()}
73-
finalFocusRef={focusRef}
74-
size="lg"
75-
onClose={onCloseAdvanced}
76-
>
77-
<ModalOverlay />
78-
<ModalContent>
79-
<ModalHeader textAlign="center">
80-
Advanced Schema Settings
81-
</ModalHeader>
94+
</ModalBody>
8295

83-
<ModalBody>
84-
<AdvancedSettings
85-
itemStateProp={
86-
propertiesOrNull.nested(
87-
name as string
88-
) as State<JSONSchema7>
89-
}
90-
/>
91-
</ModalBody>
92-
93-
<ModalFooter>
94-
<Button
95-
colorScheme="blue"
96-
variant="ghost"
97-
mr={3}
98-
onClick={onCloseAdvanced}
99-
>
100-
Close
101-
</Button>
102-
</ModalFooter>
103-
</ModalContent>
104-
</Modal>
105-
</>
106-
);
107-
})}
96+
<ModalFooter>
97+
<Button
98+
colorScheme="blue"
99+
variant="ghost"
100+
mr={3}
101+
onClick={onCloseAdvanced}
102+
>
103+
Close
104+
</Button>
105+
</ModalFooter>
106+
</ModalContent>
107+
</Modal>
108108
</div>
109109
);
110110
}

‎src/JsonSchemaEditor/state/schema.ts‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,6 @@ export const defaultSchema = (): JSONSchema7 => {
1515
};
1616
};
1717

18-
const countKeys = (object: any): number => {
19-
if (typeof object !== "object" || object === null) {
20-
return 0;
21-
}
22-
23-
const keys = Object.keys(object);
24-
let sum = keys.length;
25-
for (const key of keys) {
26-
sum += countKeys(object[key]);
27-
}
28-
29-
return sum;
30-
};
31-
3218
const isValidSchema = (schema: JSONSchema7): boolean => {
3319
const isValid = ajv.validateSchema(schema);
3420
return isValid;

‎src/stories/JsonSchemaEditor.stories.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,30 @@ import React from "react";
22

33
import { Story, Meta } from "@storybook/react";
44

5-
import JsonSchemaEditor from "../JsonSchemaEditor";
6-
import { SchemaEditorProps } from "../JsonSchemaEditor/JsonSchemaEditor.types";
5+
import JsonSchemaEditor from "..";
6+
import { SchemaEditorProps } from "../JsonSchemaEditor.types";
77
import { readOnlyData, printIt } from "./helper";
88

99
export default {
10-
title: "Example/SchemaEditor",
11-
component: JsonSchemaEditor,
10+
title: "Example/SchemaEditor",
11+
component: JsonSchemaEditor,
1212
} as Meta;
1313

1414
const Template: Story<SchemaEditorProps> = (args) => (
15-
<JsonSchemaEditor {...args} />
15+
<JsonSchemaEditor {...args} />
1616
);
1717

1818
export const NewJsonSchema = Template.bind({});
1919
NewJsonSchema.args = {
20-
onSchemaChange: (r) => {
21-
console.log(r);
22-
},
20+
onSchemaChange: (r) => {
21+
console.log(r);
22+
},
2323
};
2424

2525
export const WithData = Template.bind({});
2626
WithData.args = {
27-
data: readOnlyData,
28-
onSchemaChange: (r) => {
29-
printIt(r);
30-
},
27+
data: readOnlyData,
28+
onSchemaChange: (r) => {
29+
printIt(r);
30+
},
3131
};

0 commit comments

Comments
 (0)