From 257400f23a3e5ec1fa369b802a036d910532a1c3 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 8 Sep 2021 11:19:11 +1000
Subject: [PATCH] partial update mui pickers from lab

---
 src/App.tsx                              | 298 ++++++++++++-----------
 src/components/fields/Date/TableCell.tsx |  93 ++++---
 2 files changed, 209 insertions(+), 182 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 525815d1..f613cefc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,7 @@
 import { lazy, Suspense } from "react";
 import { Route, Switch, Link, Redirect } from "react-router-dom";
+import LocalizationProvider from "@material-ui/lab/LocalizationProvider";
+import AdapterDateFns from "@material-ui/lab/AdapterDateFns";
 
 import { StyledEngineProvider } from "@material-ui/core/styles";
 import { Button } from "@material-ui/core";
@@ -50,155 +52,161 @@ export default function App() {
   return (
     <StyledEngineProvider injectFirst>
       <ErrorBoundary>
-        <AppProvider>
-          <Favicon />
-          <SnackbarProvider>
-            <ConfirmationProvider>
-              <SnackLogProvider>
-                <CustomBrowserRouter>
-                  <Suspense fallback={<Loading fullScreen />}>
-                    <Switch>
-                      <Route
-                        exact
-                        path={routes.auth}
-                        render={() => <AuthView />}
-                      />
-                      <Route
-                        exact
-                        path={routes.impersonatorAuth}
-                        render={() => <ImpersonatorAuthPage />}
-                      />
-                      <Route
-                        exact
-                        path={routes.authSetup}
-                        render={() => <AuthSetupGuidePage />}
-                      />
-                      <Route
-                        exact
-                        path={routes.jwtAuth}
-                        render={() => <JwtAuthPage />}
-                      />
-                      <Route
-                        exact
-                        path={routes.signOut}
-                        render={() => <SignOutView />}
-                      />
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <AppProvider>
+            <Favicon />
+            <SnackbarProvider>
+              <ConfirmationProvider>
+                <SnackLogProvider>
+                  <CustomBrowserRouter>
+                    <Suspense fallback={<Loading fullScreen />}>
+                      <Switch>
+                        <Route
+                          exact
+                          path={routes.auth}
+                          render={() => <AuthView />}
+                        />
+                        <Route
+                          exact
+                          path={routes.impersonatorAuth}
+                          render={() => <ImpersonatorAuthPage />}
+                        />
+                        <Route
+                          exact
+                          path={routes.authSetup}
+                          render={() => <AuthSetupGuidePage />}
+                        />
+                        <Route
+                          exact
+                          path={routes.jwtAuth}
+                          render={() => <JwtAuthPage />}
+                        />
+                        <Route
+                          exact
+                          path={routes.signOut}
+                          render={() => <SignOutView />}
+                        />
 
-                      <Route exact path={"/test"} render={() => <TestView />} />
+                        <Route
+                          exact
+                          path={"/test"}
+                          render={() => <TestView />}
+                        />
 
-                      <PrivateRoute
-                        exact
-                        path={[
-                          routes.home,
-                          routes.tableWithId,
-                          routes.tableGroupWithId,
-                          routes.gridWithId,
-                          routes.settings,
-                          routes.projectSettings,
-                          routes.userSettings,
-                          routes.userManagement,
-                        ]}
-                        render={() => (
-                          <ProjectContextProvider>
-                            <Switch>
-                              <PrivateRoute
-                                exact
-                                path={routes.home}
-                                render={() => (
-                                  <Navigation
-                                    title="Home"
-                                    titleComponent={
-                                      <Logo
-                                        style={{
-                                          display: "block",
-                                          margin: "0 auto",
-                                        }}
-                                      />
-                                    }
+                        <PrivateRoute
+                          exact
+                          path={[
+                            routes.home,
+                            routes.tableWithId,
+                            routes.tableGroupWithId,
+                            routes.gridWithId,
+                            routes.settings,
+                            routes.projectSettings,
+                            routes.userSettings,
+                            routes.userManagement,
+                          ]}
+                          render={() => (
+                            <ProjectContextProvider>
+                              <Switch>
+                                <PrivateRoute
+                                  exact
+                                  path={routes.home}
+                                  render={() => (
+                                    <Navigation
+                                      title="Home"
+                                      titleComponent={
+                                        <Logo
+                                          style={{
+                                            display: "block",
+                                            margin: "0 auto",
+                                          }}
+                                        />
+                                      }
+                                    >
+                                      <HomePage />
+                                    </Navigation>
+                                  )}
+                                />
+                                <PrivateRoute
+                                  path={routes.tableWithId}
+                                  render={() => <TablePage />}
+                                />
+                                <PrivateRoute
+                                  path={routes.tableGroupWithId}
+                                  render={() => <TablePage />}
+                                />
+
+                                <PrivateRoute
+                                  exact
+                                  path={routes.settings}
+                                  render={() => (
+                                    <Redirect to={routes.userSettings} />
+                                  )}
+                                />
+                                <PrivateRoute
+                                  exact
+                                  path={routes.projectSettings}
+                                  render={() => (
+                                    <Navigation title="Project Settings">
+                                      <ProjectSettingsPage />
+                                    </Navigation>
+                                  )}
+                                />
+                                <PrivateRoute
+                                  exact
+                                  path={routes.userSettings}
+                                  render={() => (
+                                    <Navigation title="Settings">
+                                      <UserSettingsPage />
+                                    </Navigation>
+                                  )}
+                                />
+                                <PrivateRoute
+                                  exact
+                                  path={routes.userManagement}
+                                  render={() => (
+                                    <Navigation title="User Management">
+                                      <UserManagementPage />
+                                    </Navigation>
+                                  )}
+                                />
+                              </Switch>
+                            </ProjectContextProvider>
+                          )}
+                        />
+
+                        <PrivateRoute
+                          render={() => (
+                            <Navigation
+                              title="Page Not Found"
+                              titleComponent={<div />}
+                            >
+                              <EmptyState
+                                message="Page Not Found"
+                                description={
+                                  <Button
+                                    component={Link}
+                                    to={routes.home}
+                                    variant="outlined"
+                                    style={{ marginTop: 8 }}
                                   >
-                                    <HomePage />
-                                  </Navigation>
-                                )}
+                                    Go Home
+                                  </Button>
+                                }
+                                fullScreen
+                                style={{ marginTop: -64 }}
                               />
-                              <PrivateRoute
-                                path={routes.tableWithId}
-                                render={() => <TablePage />}
-                              />
-                              <PrivateRoute
-                                path={routes.tableGroupWithId}
-                                render={() => <TablePage />}
-                              />
-
-                              <PrivateRoute
-                                exact
-                                path={routes.settings}
-                                render={() => (
-                                  <Redirect to={routes.userSettings} />
-                                )}
-                              />
-                              <PrivateRoute
-                                exact
-                                path={routes.projectSettings}
-                                render={() => (
-                                  <Navigation title="Project Settings">
-                                    <ProjectSettingsPage />
-                                  </Navigation>
-                                )}
-                              />
-                              <PrivateRoute
-                                exact
-                                path={routes.userSettings}
-                                render={() => (
-                                  <Navigation title="Settings">
-                                    <UserSettingsPage />
-                                  </Navigation>
-                                )}
-                              />
-                              <PrivateRoute
-                                exact
-                                path={routes.userManagement}
-                                render={() => (
-                                  <Navigation title="User Management">
-                                    <UserManagementPage />
-                                  </Navigation>
-                                )}
-                              />
-                            </Switch>
-                          </ProjectContextProvider>
-                        )}
-                      />
-
-                      <PrivateRoute
-                        render={() => (
-                          <Navigation
-                            title="Page Not Found"
-                            titleComponent={<div />}
-                          >
-                            <EmptyState
-                              message="Page Not Found"
-                              description={
-                                <Button
-                                  component={Link}
-                                  to={routes.home}
-                                  variant="outlined"
-                                  style={{ marginTop: 8 }}
-                                >
-                                  Go Home
-                                </Button>
-                              }
-                              fullScreen
-                              style={{ marginTop: -64 }}
-                            />
-                          </Navigation>
-                        )}
-                      />
-                    </Switch>
-                  </Suspense>
-                </CustomBrowserRouter>
-              </SnackLogProvider>
-            </ConfirmationProvider>
-          </SnackbarProvider>
-        </AppProvider>
+                            </Navigation>
+                          )}
+                        />
+                      </Switch>
+                    </Suspense>
+                  </CustomBrowserRouter>
+                </SnackLogProvider>
+              </ConfirmationProvider>
+            </SnackbarProvider>
+          </AppProvider>
+        </LocalizationProvider>
       </ErrorBoundary>
     </StyledEngineProvider>
   );
diff --git a/src/components/fields/Date/TableCell.tsx b/src/components/fields/Date/TableCell.tsx
index 024beb70..9f098cfb 100644
--- a/src/components/fields/Date/TableCell.tsx
+++ b/src/components/fields/Date/TableCell.tsx
@@ -1,6 +1,8 @@
 import { IHeavyCellProps } from "../types";
 
 import { makeStyles, createStyles } from "@material-ui/styles";
+import MobileDatePicker from "@material-ui/lab/MobileDatePicker";
+import { TextField } from "@material-ui/core";
 
 import { transformValue } from "./utils";
 
@@ -48,9 +50,9 @@ const useStyles = makeStyles((theme) =>
   })
 );
 
-export default function Date_({ column, value }: IHeavyCellProps) {
+export default function Date_({ column, value, disabled }: IHeavyCellProps) {
   const classes = useStyles();
-  const {} = useProjectContext();
+  const { updateCell } = useProjectContext();
 
   const transformedValue = transformValue(value);
 
@@ -66,40 +68,57 @@ export default function Date_({ column, value }: IHeavyCellProps) {
   //   500
   // );
 
-  // if (disabled)
-  return (
-    <div className={classes.disabledCell}>
-      <BasicCell value={value} type={(column as any).type} name={column.key} />
-    </div>
-  );
+  if (disabled)
+    return (
+      <div className={classes.disabledCell}>
+        <BasicCell
+          value={value}
+          type={(column as any).type}
+          name={column.key}
+        />
+      </div>
+    );
 
-  // return (
-  //   <MuiPickersUtilsProvider utils={DateFnsUtils}>
-  //     <KeyboardDatePicker
-  //       value={transformedValue}
-  //       onChange={handleDateChange}
-  //       onClick={(e) => e.stopPropagation()}
-  //       format={column.config?.format ?? DATE_FORMAT}
-  //       fullWidth
-  //       clearable
-  //       keyboardIcon={<DateIcon />}
-  //       className={clsx("cell-collapse-padding", classes.root)}
-  //       inputVariant="standard"
-  //       InputProps={{
-  //         disableUnderline: true,
-  //         classes: { root: classes.inputBase, input: classes.input },
-  //       }}
-  //       InputAdornmentProps={{
-  //         position: "start",
-  //         classes: { root: classes.inputAdornment },
-  //       }}
-  //       KeyboardButtonProps={{
-  //         size: "small",
-  //         classes: { root: !disabled ? "row-hover-iconButton" : undefined },
-  //       }}
-  //       DialogProps={{ onClick: (e) => e.stopPropagation() }}
-  //       disabled={disabled}
-  //     />
-  //   </MuiPickersUtilsProvider>
-  // );
+  return (
+    <MobileDatePicker
+      renderInput={(props) => (
+        <TextField
+          {...props}
+          fullWidth
+          variant="standard"
+          InputProps={{
+            disableUnderline: true,
+            classes: { root: classes.inputBase, input: classes.input },
+          }}
+          // InputAdornmentProps={{
+          //   position: "start",
+          //   classes: { root: classes.inputAdornment },
+          // }}
+        />
+      )}
+      value={transformedValue}
+      onChange={console.log}
+      // onChange={handleDateChange}
+      // onClick={(e) => e.stopPropagation()}
+      // format={column.config?.format ?? DATE_FORMAT}
+      clearable
+      // keyboardIcon={<DateIcon />}
+      // className={clsx("cell-collapse-padding", classes.root)}
+      // inputVariant="standard"
+      // InputProps={{
+      //   disableUnderline: true,
+      //   classes: { root: classes.inputBase, input: classes.input },
+      // }}
+      // InputAdornmentProps={{
+      //   position: "start",
+      //   classes: { root: classes.inputAdornment },
+      // }}
+      // KeyboardButtonProps={{
+      //   size: "small",
+      //   classes: { root: !disabled ? "row-hover-iconButton" : undefined },
+      // }}
+      // DialogProps={{ onClick: (e) => e.stopPropagation() }}
+      // disabled={disabled}
+    />
+  );
 }