code

Author: mathuo

.prettierrc

@@ -1,6 +1,6 @@
 {
     "trailingComma": "es5",
     "tabWidth": 4,
-    "semi": false,
+    "semi": true,
     "singleQuote": true
 }

.vscode/extensions.json

@@ -1,13 +1,9 @@
 {
-	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
-	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+    // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+    // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
 
-	// List of extensions which should be recommended for users of this workspace.
-	"recommendations": [
-		"esbenp.prettier-vscode"
-	],
-	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
-	"unwantedRecommendations": [
-		
-	]
-}
+    // List of extensions which should be recommended for users of this workspace.
+    "recommendations": ["esbenp.prettier-vscode"],
+    // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+    "unwantedRecommendations": []
+}

jest.config.js

@@ -13,4 +13,4 @@ module.exports = {
         '<rootDir>/src/__tests__/**/*.spec.tsx',
     ],
     setupFilesAfterEnv: ['<rootDir>/src/__tests__/setupTests.ts'],
-}
+};

package.json

@@ -4,7 +4,8 @@
     "description": "",
     "main": "index.js",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "format": "prettier --write ."
     },
     "repository": {
         "type": "git",

packages/splitview-demo/src/app.tsx

@@ -1,27 +1,27 @@
-import * as React from 'react'
+import * as React from 'react';
 // import { LoadFromConfig } from "./loadFromConfig";
 // import { FromApi } from "./fromApi";
 // import { PaneDemo } from "./pane";
-import { TestGrid } from './layout-grid/reactgrid'
-import { Application } from './layout-grid/application'
+import { TestGrid } from './layout-grid/reactgrid';
+import { Application } from './layout-grid/application';
 
 const options = [
     // { id: "config", component: LoadFromConfig },
     // { id: "api", component: FromApi },
     // { id: "pane", component: PaneDemo },
     { id: 'grid', component: Application },
-]
+];
 
 export const App = () => {
-    const [value, setValue] = React.useState<string>(options[0].id)
+    const [value, setValue] = React.useState<string>(options[0].id);
 
     const onChange = (event: React.ChangeEvent<HTMLSelectElement>) =>
-        setValue(event.target.value)
+        setValue(event.target.value);
 
     const Component = React.useMemo(
         () => options.find((o) => o.id === value)?.component,
         [value]
-    )
+    );
 
     return (
         <div
@@ -48,5 +48,5 @@ export const App = () => {
                 </div>
             )}
         </div>
-    )
-}
+    );
+};

packages/splitview-demo/src/index.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import { App } from './app'
-import './index.scss'
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { App } from './app';
+import './index.scss';
 
-ReactDOM.render(<App />, document.getElementById('app'))
+ReactDOM.render(<App />, document.getElementById('app'));

packages/splitview-demo/src/layout-grid/application.tsx

@@ -1,83 +1,83 @@
-import * as React from 'react'
+import * as React from 'react';
 import {
     Orientation,
     GridviewComponent,
     LayoutPriority,
     GridviewReadyEvent,
     ComponentGridview,
     IGridviewPanelProps,
-} from 'splitview'
-import { TestGrid } from './reactgrid'
+} from 'splitview';
+import { TestGrid } from './reactgrid';
 
 const rootcomponents: {
-    [index: string]: React.FunctionComponent<IGridviewPanelProps>
+    [index: string]: React.FunctionComponent<IGridviewPanelProps>;
 } = {
     sidebar: (props: IGridviewPanelProps) => {
         return (
             <div style={{ backgroundColor: 'rgb(37,37,38)', height: '100%' }}>
                 sidebar
             </div>
-        )
+        );
     },
     editor: TestGrid,
     panel: () => {
         return (
             <div style={{ backgroundColor: 'rgb(30,30,30)', height: '100%' }}>
                 panel
             </div>
-        )
+        );
     },
-}
+};
 
 export const Application = () => {
-    const api = React.useRef<ComponentGridview>()
+    const api = React.useRef<ComponentGridview>();
 
     const onReady = (event: GridviewReadyEvent) => {
         // event.api.deserialize(rootLayout);
         event.api.addComponent({
             id: '1',
             component: 'sidebar',
             snap: true,
-        })
+        });
         event.api.addComponent({
             id: '2',
             component: 'editor',
             snap: true,
             position: { reference: '1', direction: 'right' },
             priority: LayoutPriority.High,
-        })
+        });
 
-        api.current = event.api as ComponentGridview
-    }
+        api.current = event.api as ComponentGridview;
+    };
 
     React.useEffect(() => {
         const callback = (ev: UIEvent) => {
-            const height = window.innerHeight - 20
-            const width = window.innerWidth
+            const height = window.innerHeight - 20;
+            const width = window.innerWidth;
 
-            api.current?.layout(width, height)
-        }
-        window.addEventListener('resize', callback)
-        callback(undefined)
+            api.current?.layout(width, height);
+        };
+        window.addEventListener('resize', callback);
+        callback(undefined);
 
         api.current.addComponent({
             id: '3',
             component: 'panel',
             position: { reference: '2', direction: 'below' },
             size: 200,
             snap: true,
-        })
+        });
 
         return () => {
-            window.removeEventListener('resize', callback)
-        }
-    }, [])
+            window.removeEventListener('resize', callback);
+        };
+    }, []);
 
     return (
         <GridviewComponent
             components={rootcomponents}
             onReady={onReady}
             orientation={Orientation.HORIZONTAL}
         />
-    )
-}
+    );
+};

packages/splitview-demo/src/layout-grid/customTab.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
-import { IPanelProps } from 'splitview'
+import * as React from 'react';
+import { IPanelProps } from 'splitview';
 
 export const CustomTab = (props: IPanelProps) => {
-    return <div>hello</div>
-}
+    return <div>hello</div>;
+};

packages/splitview-demo/src/layout-grid/editorPanel.tsx

@@ -1,25 +1,25 @@
-import * as React from 'react'
-import { Api, IPanelProps } from 'splitview'
+import * as React from 'react';
+import { Api, IPanelProps } from 'splitview';
 
 export const Editor = (props: IPanelProps & { layoutApi: Api }) => {
-    const [tabHeight, setTabHeight] = React.useState<number>(0)
+    const [tabHeight, setTabHeight] = React.useState<number>(0);
 
     React.useEffect(() => {
         if (props.layoutApi) {
-            setTabHeight(props.layoutApi.getTabHeight())
+            setTabHeight(props.layoutApi.getTabHeight());
         }
-    }, [props.layoutApi])
+    }, [props.layoutApi]);
 
     const onTabHeightChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const value = Number(event.target.value)
+        const value = Number(event.target.value);
         if (!Number.isNaN(value)) {
-            setTabHeight(value)
+            setTabHeight(value);
         }
-    }
+    };
 
     const onClick = () => {
-        props.layoutApi.setTabHeight(tabHeight)
-    }
+        props.layoutApi.setTabHeight(tabHeight);
+    };
 
     return (
         <div
@@ -35,5 +35,5 @@ export const Editor = (props: IPanelProps & { layoutApi: Api }) => {
                 <button onClick={onClick}>Apply</button>
             </label>
         </div>
-    )
-}
+    );
+};