Skip to content

Commit

Permalink
add use-viewport hook and fix editor height in sarafi
Browse files Browse the repository at this point in the history
  • Loading branch information
@sujinleeme
sujinleeme committed Feb 23, 2021
1 parent 8973a9e commit ece1b52
Show file tree
Hide file tree
Showing 8 changed files with 357 additions and 51 deletions.
111 changes: 74 additions & 37 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 6,20 @@ import { AppBar } from "./components/app-bar";
import { CommandBar } from "./components/command-bar";
import { JSONEditor } from "./components/json-editor";
import { SampleData } from "./components/json-editor/mock-data";
import { useToggle } from "./hooks";
import { useToggle, useViewport, ViewportProvider } from "./hooks";

enum Editor {
Schema = "Schema",
InputJson = "Input Json",
}

// Mutating styles definition
const containerStyle: IStackStyles = {
root: {
height: "100vh",
},
const containerStyle = (): IStackStyles => {
return {
root: {
height: "100vh",
},
};
};

const editorStackStyle: IStackStyles = {
Expand All @@ -26,7 28,13 @@ const editorStackStyle: IStackStyles = {
},
};

export const getEditorClassNames = (isFullWidth: boolean) => {
export const getEditorClassNames = ({
isFullWidth,
}: {
isFullWidth: boolean;
vw: number;
vh: number;
}) => {
return mergeStyleSets({
root: [
{
Expand All @@ -45,6 53,9 @@ const App = (): JSX.Element => {
const [isSchemaEditorOn, toggleASchemaEditorOn] = useToggle(false);
const [isSchemaSampleDataOn, toggleSchemaSampleDataOn] = useToggle(false);
const [schemaValue, setSchemaValue] = useState<string | undefined>(undefined);
const viewportContext = useViewport();
// const [containerCSS, setContainerCSS] = useState<IStackStyles>();
const { vh, vw } = viewportContext;

useEffect(() => {
if (!isSchemaEditorOn && isSchemaSampleDataOn) {
Expand All @@ -57,44 68,70 @@ const App = (): JSX.Element => {
const getSchemaValue = () =>
isSchemaSampleDataOn && !schemaValue ? SampleData.schema : schemaValue;

console.log(window.location.href);
// useEffect(() => {
// const vhTOpx = containerStyle(vh);
// setContainerCSS(vhTOpx);
// }, [vh]);

return (
<Stack styles={containerStyle}>
<Stack.Item>
<AppBar />
<CommandBar
isSchemaEditorOn={isSchemaEditorOn}
onSchemaEditorChange={toggleASchemaEditorOn}
isSchemaSampleDataOn={isSchemaSampleDataOn}
onSchemaSampleDataOn={toggleSchemaSampleDataOn}
/>
</Stack.Item>
<Stack wrap horizontal grow styles={editorStackStyle}>
{isSchemaEditorOn && (
<Stack.Item styles={getEditorClassNames(!isSchemaEditorOn)}>
<ViewportProvider>
<Stack styles={containerStyle}>
<Stack.Item>
<AppBar />
<CommandBar
isSchemaEditorOn={isSchemaEditorOn}
onSchemaEditorChange={toggleASchemaEditorOn}
isSchemaSampleDataOn={isSchemaSampleDataOn}
onSchemaSampleDataOn={toggleSchemaSampleDataOn}
/>
</Stack.Item>
<Stack wrap horizontal grow styles={editorStackStyle}>
{isSchemaEditorOn && (
<Stack.Item
styles={getEditorClassNames({
isFullWidth: !isSchemaEditorOn,
vh,
vw,
})}
>
<JSONEditor
title={Editor.Schema}
path="schema.json"
defaultValue={
isSchemaSampleDataOn ? SampleData.schema : undefined
}
onChange={handleSchemaValueChange}
/>
</Stack.Item>
)}
<Stack.Item
styles={getEditorClassNames({
isFullWidth: !isSchemaEditorOn,
vh,
vw,
})}
>
<JSONEditor
title={Editor.Schema}
path="schema.json"
title={isSchemaEditorOn ? Editor.InputJson : ""}
path="input_json.json"
schemaValue={getSchemaValue()}
defaultValue={
isSchemaSampleDataOn ? SampleData.schema : undefined
isSchemaSampleDataOn ? SampleData.jsonInput : undefined
}
onChange={handleSchemaValueChange}
/>
</Stack.Item>
)}
<Stack.Item styles={getEditorClassNames(!isSchemaEditorOn)}>
<JSONEditor
title={isSchemaEditorOn ? Editor.InputJson : ""}
path="input_json.json"
schemaValue={getSchemaValue()}
defaultValue={
isSchemaSampleDataOn ? SampleData.jsonInput : undefined
}
/>
</Stack.Item>
</Stack>
</Stack>
</Stack>
</ViewportProvider>
);
};

const AppContainer = (): JSX.Element => {
return (
<ViewportProvider>
<App />
</ViewportProvider>
);
};

export default App;
export default AppContainer;
3 changes: 1 addition & 2 deletions src/components/json-editor/components/error-message-bar/error-message-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 21,8 @@ interface ErrorMessageBarProps {

const classNames = mergeStyleSets({
wrapper: {
height: "20vh",
height: "inherit",
position: "relative",
maxHeight: "inherit",
},
});

Expand Down
15 changes: 13 additions & 2 deletions src/components/json-editor/json-editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 115,7 @@ export const JSONEditor: React.FC<JSONEditorProps> = ({
editorRef.current = editor;

editor.getModel()?.updateOptions({ tabSize: 2, insertSpaces: false });
updateEditorLayout();

window.addEventListener("resize", () => {
// automaticLayout isn't working
Expand Down Expand Up @@ -209,7 210,13 @@ export const JSONEditor: React.FC<JSONEditorProps> = ({
/>
</Stack.Item>
<Stack styles={stackStyles}>
<Stack.Item grow align="stretch">
<Stack.Item
grow
align="stretch"
style={{
height: `calc(100% - 20vh)`,
}}
>
<Editor
language="json"
path={path}
Expand All @@ -227,7 234,11 @@ export const JSONEditor: React.FC<JSONEditorProps> = ({
onValidate={handleEditorValidation}
/>
</Stack.Item>
<Stack.Item>
<Stack.Item
style={{
height: `20vh`,
}}
>
<ErrorMessageBar errors={errors} />
</Stack.Item>
</Stack>
Expand Down
16 changes: 8 additions & 8 deletions src/components/json-editor/mock-data.ts
View file
Original file line number Diff line number Diff line change
@@ -1,18 1,18 @@
export const validFormattedJsonInput = `{
"name": "Lucrezia Nethersole",
"email": "l.nethersole@hotmail.com",
"date_of_birth": "2007–01–23"
"name": "Sujin Lee",
"email": "sujinlee.me@gmail.com",
"date_of_birth": "1990-01-01"
}`;

export const invalidFormattedJsonInput = `
"name": "Lucrezia Nethersole",
"email": "l.nethersole@hotmail.com",
"date_of_birth": "2007–01–23"
"name": "Sujin Lee",
"email": "sujinlee.me@gmail.com",
"date_of_birth": "1990-01-01"
}`;

export const validMinifiedJsonInput = `{"name":"Lucrezia Nethersole","email":"l.nethersole@hotmail.com","date_of_birth":"2007–01–23"}`;
export const validMinifiedJsonInput = `{"name":"Sujin Lee","email":"sujinlee.me@gmail.com","date_of_birth":"1990-01-01"}`;

export const invalidMinifiedJsonInput = `name":"Lucrezia Nethersole","email":"l.nethersole@hotmail.com","date_of_birth":"2007–01–23"}`;
export const invalidMinifiedJsonInput = `name":"Sujin Lee","email":"sujinlee.me@gmail.com","date_of_birth":"1990-01-01"}`;

export const schema = `{ "name": "sample schema", "type": "object", "properties": { "name": { "title": "Name", "type": "string", "description": "Users full name supporting unicode but no emojis.", "maxLength": 20 }, "email": { "title": "Email", "description": "Like a postal address but for computers.", "type": "string", "format": "email" }, "date_of_birth": { "title": "Date Of Birth", "type": "string", "description": "Date of uses birth in the one and only date standard: ISO 8601.", "format": "date", "example": "1990–12–28" } }, "required": [ "name" ] }`;

Expand Down
2 changes: 1 addition & 1 deletion src/hooks/__test__/useToggle.test.ts → src/hooks/__test__/use-toggle.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 1,6 @@
import { act, renderHook } from "@testing-library/react-hooks";

import { useToggle } from "../useToggle";
import { useToggle } from "../use-toggle";

describe("useToggle", () => {
test("should change the value to false if the initial value is empty and its first toggle is called.", () => {
Expand Down
3 changes: 2 additions & 1 deletion src/hooks/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 1,2 @@
export * from "./useToggle";
export * from "./use-toggle";
export * from "./use-viewport";
0 src/hooks/useToggle.tsx → src/hooks/use-toggle.tsx
View file
File renamed without changes.
Loading

0 comments on commit ece1b52

Please sign in to comment.