feat(dock): moving to use autocomplete

Simplifies the dock seach logic.
reactivemarkets · Dec 20, 2020 · 0fd9389 · 0fd9389
1 parent 7f920e7
commit 0fd9389
Show file tree

Hide file tree

Showing 54 changed files with 898 additions and 547 deletions.
diff --git a/.eslintrc.yaml b/.eslintrc.yaml
@@ -18,6 +18,7 @@ rules:
   "@typescript-eslint/explicit-module-boundary-types": off
   "@typescript-eslint/interface-name-prefix": off
   "@typescript-eslint/no-non-null-assertion": off
+  "react/display-name": off
   "react/prop-types": off
   "require-await": "error"
   "no-return-await": "error"

diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -94,7 +94,6 @@
             "type": "node",
             "request": "launch",
             "cwd": "${workspaceFolder}",
-            "preLaunchTask": "npm: build:dev:core",
             "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
             "windows": {
                 "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
@@ -118,7 +117,6 @@
             "type": "node",
             "request": "launch",
             "cwd": "${workspaceFolder}",
-            "preLaunchTask": "npm: build:dev:core",
             "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
             "windows": {
                 "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/desktop-dock/package.json b/packages/desktop-dock/package.json
@@ -32,9 +32,10 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@material-ui/core": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.57",
     "@reactivemarkets/desktop-sdk": "file:../desktop-sdk",
-    "fuse.js": "^6.4.3",
     "ix": "^4.0.0",
+    "match-sorter": "^6.0.2",
     "mdi-material-ui": "^6.20.0",
     "mobx": "^5.15.7",
     "mobx-react": "^6.3.0",

diff --git a/packages/desktop-dock/src/components/App/App.tsx b/packages/desktop-dock/src/components/App/App.tsx
@@ -1,24 +1,33 @@
 import * as React from "react";
-import AppShell from "./AppShell";
+import { AppShell } from "./AppShell";
 import { AppTheme } from "./AppTheme";
 import { ApplicationsStoreProvider } from "./ApplicationsStoreProvider";
 import { FocusStoreProvider } from "./FocusStoreProvider";
 import { ResizerStoreProvider } from "./ResizerStoreProvider";
+import { FilterStoreProvider } from "./FilterStoreProvider";
 import { SearchStoreProvider } from "./SearchStoreProvider";
+import { ThemeStoreProvider } from "./ThemeStoreProvider";
+import { TabStoreProvider } from "./TabStoreProvider";
 
 export class App extends React.PureComponent {
     public render() {
         return (
             <FocusStoreProvider>
-                <ResizerStoreProvider>
-                    <ApplicationsStoreProvider>
-                        <SearchStoreProvider>
-                            <AppTheme>
-                                <AppShell />
-                            </AppTheme>
-                        </SearchStoreProvider>
-                    </ApplicationsStoreProvider>
-                </ResizerStoreProvider>
+                <FilterStoreProvider>
+                    <ResizerStoreProvider>
+                        <ApplicationsStoreProvider>
+                            <SearchStoreProvider>
+                                <TabStoreProvider>
+                                    <ThemeStoreProvider>
+                                        <AppTheme>
+                                            <AppShell />
+                                        </AppTheme>
+                                    </ThemeStoreProvider>
+                                </TabStoreProvider>
+                            </SearchStoreProvider>
+                        </ApplicationsStoreProvider>
+                    </ResizerStoreProvider>
+                </FilterStoreProvider>
             </FocusStoreProvider>
         );
     }

diff --git a/packages/desktop-dock/src/components/App/AppShell.tsx b/packages/desktop-dock/src/components/App/AppShell.tsx
@@ -1,33 +1,23 @@
-import { createStyles, Box, Grid, Theme, withStyles, WithStyles } from "@material-ui/core";
+import { Box } from "@material-ui/core";
 import * as React from "react";
-import { Search, SearchHelp, SearchResults } from "../Search";
+import { Search, SearchButton, SearchHelp } from "../Search";
 import { DragHandle, PowerButton } from "../System";
 
-const styles = (theme: Theme) =>
-    createStyles({
-        padding: {
-            padding: theme.spacing(1, 1, 1, 0),
-        },
-    });
-
-class AppShell extends React.PureComponent<WithStyles<typeof styles>> {
+export class AppShell extends React.PureComponent {
     public render() {
-        const { classes } = this.props;
-
         return (
             <Box display="flex" flexDirection="column" flex={1}>
-                <Grid container wrap="nowrap">
-                    <DragHandle />
-                    <Grid className={classes.padding} container wrap="nowrap">
-                        <Search />
-                        <PowerButton />
-                    </Grid>
-                </Grid>
-                <SearchResults />
+                <Search
+                    startAdornment={
+                        <>
+                            <DragHandle />
+                            <SearchButton />
+                        </>
+                    }
+                    endAdornment={<PowerButton />}
+                />
                 <SearchHelp />
             </Box>
         );
     }
 }
-
-export default withStyles(styles)(AppShell);
diff --git a/packages/desktop-dock/src/components/App/AppTheme.tsx b/packages/desktop-dock/src/components/App/AppTheme.tsx
@@ -6,20 +6,27 @@ import {
     CssBaseline,
 } from "@material-ui/core";
 import { computed } from "mobx";
-import { observer } from "mobx-react";
+import { inject, observer } from "mobx-react";
 import * as React from "react";
-import { defaultTheme } from "./defaultTheme";
+import { IThemeStore } from "../../stores";
 
 const generateClassName = createGenerateClassName({
     disableGlobal: true,
     productionPrefix: "d",
 });
 
+interface IAppThemeProps {
+    readonly themeStore?: IThemeStore;
+}
+
+@inject("themeStore")
 @observer
-export class AppTheme extends React.Component {
+export class AppTheme extends React.Component<IAppThemeProps> {
     @computed
     private get currentThemeOptions() {
-        return createMuiTheme(defaultTheme);
+        const { current } = this.props.themeStore!;
+
+        return createMuiTheme(current);
     }
 
     public render() {

diff --git a/packages/desktop-dock/src/components/App/FilterStoreProvider.tsx b/packages/desktop-dock/src/components/App/FilterStoreProvider.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Provider } from "mobx-react";
+import { ObservableFilterStore } from "../../stores";
+
+export class FilterStoreProvider extends React.PureComponent {
+    private readonly filterStore = new ObservableFilterStore();
+
+    public render() {
+        return <Provider filterStore={this.filterStore}>{this.props.children}</Provider>;
+    }
+}
diff --git a/packages/desktop-dock/src/components/App/SearchStoreProvider.tsx b/packages/desktop-dock/src/components/App/SearchStoreProvider.tsx
@@ -1,22 +1,9 @@
 import * as React from "react";
-import { Provider, inject } from "mobx-react";
-import { ISearchStore, IApplicationsStore, ObservableSearchStore, createSearchProvider } from "../../stores";
+import { Provider } from "mobx-react";
+import { ObservableSearchStore } from "../../stores";
 
-interface ISearchStoreProviderProps {
-    readonly applicationsStore?: IApplicationsStore;
-}
-
-@inject("applicationsStore")
-export class SearchStoreProvider extends React.PureComponent<ISearchStoreProviderProps> {
-    private readonly searchStore: ISearchStore;
-
-    public constructor(props: ISearchStoreProviderProps) {
-        super(props);
-
-        const searchProvider = createSearchProvider(props.applicationsStore!);
-
-        this.searchStore = new ObservableSearchStore(searchProvider);
-    }
+export class SearchStoreProvider extends React.PureComponent {
+    private readonly searchStore = new ObservableSearchStore();
 
     public render() {
         return <Provider searchStore={this.searchStore}>{this.props.children}</Provider>;

diff --git a/packages/desktop-dock/src/components/App/TabStoreProvider.tsx b/packages/desktop-dock/src/components/App/TabStoreProvider.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Provider } from "mobx-react";
+import { ObservableTabStore } from "../../stores";
+
+export class TabStoreProvider extends React.PureComponent {
+    private readonly tabStore = new ObservableTabStore();
+
+    public render() {
+        return <Provider tabStore={this.tabStore}>{this.props.children}</Provider>;
+    }
+}
diff --git a/packages/desktop-dock/src/components/App/ThemeStoreProvider.tsx b/packages/desktop-dock/src/components/App/ThemeStoreProvider.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Provider } from "mobx-react";
+import { ObservableThemeStore } from "../../stores";
+
+export class ThemeStoreProvider extends React.PureComponent {
+    private readonly themeStore = new ObservableThemeStore();
+
+    public render() {
+        return <Provider themeStore={this.themeStore}>{this.props.children}</Provider>;
+    }
+}
diff --git a/packages/desktop-dock/src/components/App/defaultTheme.ts b/packages/desktop-dock/src/components/App/defaultTheme.ts
@@ -50,12 +50,63 @@ export const defaultTheme: ThemeOptions = {
                 },
             },
         },
+        MuiListItem: {
+            dense: {
+                paddingTop: 2,
+                paddingBottom: 2,
+            },
+            gutters: {
+                paddingLeft: 16,
+            },
+        },
+        MuiListItemIcon: {
+            root: {
+                minWidth: 40,
+            },
+        },
+        MuiListItemText: {
+            inset: {
+                paddingLeft: 42,
+            },
+        },
+        MuiTab: {
+            root: {
+                "@media (min-width: 600px)": {
+                    minWidth: 48,
+                },
+                fontSize: 13,
+                minHeight: 40,
+                minWidth: 48,
+                padding: "4px 8px",
+                textTransform: "capitalize",
+            },
+        },
+        MuiTabs: {
+            root: {
+                minHeight: 40,
+                paddingLeft: 16,
+            },
+        },
+    },
+    palette: {
+        primary: {
+            main: "#4A90E2",
+        },
+        secondary: {
+            main: "#4A90E2",
+        },
+        type: "dark",
     },
-    palette: { type: "dark" },
     props: {
         MuiTooltip: {
             arrow: true,
             enterDelay: 500,
         },
     },
+    typography: {
+        body2: {
+            fontSize: 13,
+            fontWeight: 500,
+        },
+    },
 };