Update React & Material-UI

2019-02-17 17:51:42 +01:00
parent 3f52944f18
commit 03462f7ec8
12 changed files with 72 additions and 54 deletions
--- a/app/package.json
+++ b/app/package.json
@@ -9,7 +9,7 @@
  "author": "",
  "license": "ISC",
  "devDependencies": {
-    "@material-ui/core": "^3.9.0",
+    "@material-ui/core": "^4.0.0-alpha.0",
    "@material-ui/icons": "^3.0.1",
    "@material-ui/styles": "^3.0.0-alpha.8",
    "@types/node": "^10.12.18",
@@ -34,7 +34,7 @@
    "lodash.throttle": "^4.1.1",
    "moving-average": "^1.0.0",
    "number-abbreviate": "^2.0.0",
-    "react": "^16.8.0-alpha.1",
+    "react": "16.8",
    "react-ace": "^6.3.2",
    "react-dom": "^16.7.0",
    "react-json-view": "^1.19.1",
--- a/app/src/ErrorBoundary.tsx
+++ b/app/src/ErrorBoundary.tsx
@@ -89,7 +89,7 @@ const styles = (theme: Theme) => ({
    maxWidth: 650,
    backgroundColor: theme.palette.background.default,
    margin: '10vh auto auto auto',
-    padding: `${2 * theme.spacing.unit}px`,
+    padding: theme.spacing(2),
    outline: 'none',
  },
  title: {
@@ -105,7 +105,7 @@ const styles = (theme: Theme) => ({
  },
  buttonPositioning: {
    textAlign: 'center' as 'center',
-    marginTop: `${theme.spacing.unit * 2}px`,
+    marginTop: theme.spacing(2),
  },
 })

--- a/app/src/UpdateNotifier.tsx
+++ b/app/src/UpdateNotifier.tsx
@@ -232,14 +232,14 @@ const styles = (theme: Theme) => ({
    color: theme.typography.button.color,
  },
  close: {
-    padding: theme.spacing.unit / 2,
+    padding: '4px',
  },
  root: {
    minWidth: '350px',
    maxWidth: '500px',
    backgroundColor: theme.palette.background.default,
    margin: '20vh auto auto auto',
-    padding: `${2 * theme.spacing.unit}px`,
+    padding: theme.spacing(2),
    outline: 'none',
  },
  title: {
@@ -252,7 +252,7 @@ const styles = (theme: Theme) => ({
    maxHeight: '28vh',
  },
  paper: {
-    padding: `${theme.spacing.unit * 2}px`,
+    padding: theme.spacing(2),
    color: theme.palette.text.secondary,
  },
  download: {
--- a/app/src/components/ConnectionSetup/AddButton.tsx
+++ b/app/src/components/ConnectionSetup/AddButton.tsx
@@ -5,12 +5,12 @@ import { Theme, withStyles } from '@material-ui/core/styles'

 const styles = (theme: Theme) => ({
  addButton: {
-    height: `${theme.spacing.unit * 4}px`,
-    width: `${theme.spacing.unit * 4}px`,
+    height: theme.spacing(4),
+    width: theme.spacing(4),
    minHeight: '0',
  },
  addIcon: {
-    height: `${theme.spacing.unit * 2}px`,
+    height: theme.spacing(2),
  },
 })

--- a/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
+++ b/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
@@ -45,7 +45,7 @@ class ConnectionSettings extends React.Component<Props, State> {
    return (
      <div>
        <form className={classes.container} noValidate={true} autoComplete="off">
-          <Grid container={true} spacing={24}>
+          <Grid container={true} spacing={3}>
            <Grid item={true} xs={10} className={classes.gridPadding}>
              <TextField
                className={classes.fullWidth}
@@ -145,7 +145,7 @@ const styles: StyleRulesCallback<string> = (theme: Theme) => {
      backgroundColor: theme.palette.background.default,
    },
    button: {
-      marginTop: `${theme.spacing.unit * 3 + 2}px`,
+      marginTop: theme.spacing(3),
      float: 'right',
    },
  }
--- a/app/src/components/ConnectionSetup/ConnectionSettings.tsx
+++ b/app/src/components/ConnectionSetup/ConnectionSettings.tsx
@@ -120,7 +120,7 @@ class ConnectionSettings extends React.Component<Props, State> {
      <div>
        {renderError}
        <form className={classes.container} noValidate={true} autoComplete="off">
-          <Grid container={true} spacing={24}>
+          <Grid container={true} spacing={3}>
            <Grid item={true} xs={5}>
              <TextField
                label="Name"
@@ -344,7 +344,7 @@ const styles: StyleRulesCallback<string> = (theme: Theme) => {
      marginTop: 0,
    },
    button: {
-      margin: theme.spacing.unit,
+      margin: theme.spacing(1),
    },
    inputFormControl: {
      marginTop: '16px',
--- a/app/src/components/ConnectionSetup/ConnectionSetup.tsx
+++ b/app/src/components/ConnectionSetup/ConnectionSetup.tsx
@@ -87,7 +87,7 @@ const styles = (theme: Theme) => ({
  left: {
    borderRightStyle: 'dotted' as 'dotted',
    borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`,
-    paddingTop: `${2 * theme.spacing.unit}px`,
+    paddingTop: theme.spacing(2),
    flex: 3,
    overflow: 'hidden',
    backgroundColor: theme.palette.background.default,
@@ -96,7 +96,7 @@ const styles = (theme: Theme) => ({
  right: {
    borderRadius: `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`,
    backgroundColor: theme.palette.background.paper,
-    padding: `${2 * theme.spacing.unit}px`,
+    padding: theme.spacing(2),
    flex: 10,
  },
  connectionUri: {
@@ -106,7 +106,7 @@ const styles = (theme: Theme) => ({
    overflow: 'hidden' as 'hidden',
    color: theme.palette.text.hint,
    fontSize: '0.9em',
-    marginLeft: '24px',
+    marginLeft: theme.spacing(4),
  },
 })

--- a/app/src/components/Settings.tsx
+++ b/app/src/components/Settings.tsx
@@ -47,12 +47,12 @@ const styles: StyleRulesCallback = theme => ({
  },
  title: {
    color: theme.palette.text.primary,
-    paddingTop: `${theme.spacing.unit}px`,
+    paddingTop: theme.spacing(1),
    ...theme.mixins.toolbar,
  },
  input: {
    minWidth: '150px',
-    margin: `auto ${theme.spacing.unit}px auto ${2 * theme.spacing.unit}px`,
+    margin: `auto ${theme.spacing(1)} auto ${theme.spacing(2)}px`,
  },
 })

--- a/app/src/components/Sidebar/Sidebar.tsx
+++ b/app/src/components/Sidebar/Sidebar.tsx
@@ -230,7 +230,7 @@ const styles: StyleRulesCallback<string> = (theme: Theme) => {
      height: '100%',
    },
    valuePaper: {
-      margin: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px`,
+      margin: theme.spacing(1),
    },
    heading: {
      fontSize: theme.typography.pxToRem(15),
--- a/app/src/components/TitleBar.tsx
+++ b/app/src/components/TitleBar.tsx
@@ -32,16 +32,16 @@ const styles: StyleRulesCallback = theme => ({
    '&:hover': {
      backgroundColor: fade(theme.palette.common.white, 0.25),
    },
-    marginRight: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
    marginLeft: 0,
    width: '100%',
    [theme.breakpoints.up('sm')]: {
-      marginLeft: theme.spacing.unit * 3,
+      marginLeft: theme.spacing(3),
      width: 'auto',
    },
  },
  searchIcon: {
-    width: theme.spacing.unit * 8,
+    width: theme.spacing(8),
    height: '100%',
    position: 'absolute',
    pointerEvents: 'none',
@@ -54,10 +54,10 @@ const styles: StyleRulesCallback = theme => ({
    width: '100%',
  },
  inputInput: {
-    paddingTop: theme.spacing.unit,
-    paddingRight: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
-    paddingLeft: theme.spacing.unit * 10,
+    paddingTop: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(10),
    transition: theme.transitions.create('width'),
    width: '100%',
    [theme.breakpoints.up('md')]: {
--- a/app/src/components/Tree/TreeNodeSubnodes.tsx
+++ b/app/src/components/Tree/TreeNodeSubnodes.tsx
@@ -101,7 +101,7 @@ const styles = (theme: Theme) => ({
    clear: 'both' as 'both',
  },
  listItem: {
-    padding: `0px 0px 0px ${theme.spacing.unit}px`,
+    padding: `0px 0px 0px ${theme.spacing(1)}`,
  },
 })

--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -21,18 +21,18 @@
  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53"
  integrity sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==

-"@material-ui/core@^3.9.0":
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-3.9.1.tgz#994fa54f0936092556d231d1055b8f76b12be06e"
-  integrity sha512-26GtjuwxPPfSsUnYrTOC8zuCuhWPVhc4SsUSFTZq0n1QvpGi9UEZRFe8yp6FykQE+PmqyyY+eWdrfiXKSUKZ0w==
+"@material-ui/core@^4.0.0-alpha.0":
+  version "4.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.0.0-alpha.0.tgz#7342e6c672d2351a7657af9b92fe7a5411b7dd00"
+  integrity sha512-2bg325ZdSLRHbHMluoXvUzrnLu6WwMyiSfQhDZtwlpaFgWRZSwGskWQLGxNp/O9Lwu/SMYA2A0YHJtaMbvKqFw==
  dependencies:
    "@babel/runtime" "^7.2.0"
-    "@material-ui/system" "^3.0.0-alpha.0"
-    "@material-ui/utils" "^3.0.0-alpha.2"
+    "@material-ui/system" "^4.0.0-alpha.0"
+    "@material-ui/utils" "^4.0.0-alpha.0"
    "@types/jss" "^9.5.6"
    "@types/react-transition-group" "^2.0.8"
    brcast "^3.0.1"
-    classnames "^2.2.5"
+    clsx "^1.0.2"
    csstype "^2.5.2"
    debounce "^1.1.0"
    deepmerge "^3.0.0"
@@ -51,7 +51,6 @@
    prop-types "^15.6.0"
    react-event-listener "^0.6.2"
    react-transition-group "^2.2.1"
-    recompose "0.28.0 - 0.30.0"
    warning "^4.0.1"

 "@material-ui/icons@^3.0.1":
@@ -84,10 +83,10 @@
    prop-types "^15.6.0"
    warning "^4.0.1"

-"@material-ui/system@^3.0.0-alpha.0":
-  version "3.0.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-3.0.0-alpha.2.tgz#096e80c8bb0f70aea435b9e38ea7749ee77b4e46"
-  integrity sha512-odmxQ0peKpP7RQBQ8koly06YhsPzcoVib1vByVPBH4QhwqBXuYoqlCjt02846fYspAqkrWzjxnWUD311EBbxOA==
+"@material-ui/system@^4.0.0-alpha.0":
+  version "4.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.0.0-alpha.0.tgz#9972a797f04e1b96b84ad462243086fe89038f73"
+  integrity sha512-qJLLx+rBmj1AsnuOLja9eN0x/ajZWM6FgCUVV08ecQ2FHEb+TT5QK6b+Lcw5TNnHxakGC8wkmUkIYafwcqGA5g==
  dependencies:
    "@babel/runtime" "^7.2.0"
    deepmerge "^3.0.0"
@@ -103,6 +102,15 @@
    prop-types "^15.6.0"
    react-is "^16.6.3"

+"@material-ui/utils@^4.0.0-alpha.0":
+  version "4.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.0.0-alpha.0.tgz#b8ed6953ae07d36856a5867ffe759bc0e08147b4"
+  integrity sha512-w8zSXDuAyS0J5Z8mnU0+HgFf+GP3vGno8wecHT011DM7P3ZoS/2ngU2SqJGwRxuNk7N65tWX1h8NKvoevDPUyQ==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    prop-types "^15.6.0"
+    react-is "^16.8.0"
+
 "@types/jss@^9.5.6":
  version "9.5.7"
  resolved "https://registry.yarnpkg.com/@types/jss/-/jss-9.5.7.tgz#fa57a6d0b38a3abef8a425e3eb6a53495cb9d5a0"
@@ -1024,6 +1032,11 @@ cliui@^4.0.0:
    strip-ansi "^4.0.0"
    wrap-ansi "^2.0.0"

+clsx@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.2.tgz#2e0d63a900d7fe33218d7a53dee9e3a0c7300e1d"
+  integrity sha512-NQZV7ri2Gfufu9q1P9JDV4MHhdJvUukOadjAoN12pK37P12nrYp/mC05BSoekv0KX/5hGHAe2WQeOlhaWhXC5Q==
+
 code-point-at@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
@@ -4492,6 +4505,11 @@ react-is@^16.6.3, react-is@^16.7.0:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa"
  integrity sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g==

+react-is@^16.8.0:
+  version "16.8.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.2.tgz#09891d324cad1cb0c1f2d91f70a71a4bee34df0f"
+  integrity sha512-D+NxhSR2HUCjYky1q1DwpNUD44cDpUXzSmmFyC3ug1bClcU/iDNy0YNn1iwme28fn+NFhpA13IndOd42CrFb+Q==
+
 react-json-view@^1.19.1:
  version "1.19.1"
  resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.19.1.tgz#95d8e59e024f08a25e5dc8f076ae304eed97cf5c"
@@ -4597,6 +4615,16 @@ react-vis@^1.11.6:
    prop-types "^15.5.8"
    react-motion "^0.5.2"

+react@16.8:
+  version "16.8.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.2.tgz#83064596feaa98d9c2857c4deae1848b542c9c0c"
+  integrity sha512-aB2ctx9uQ9vo09HVknqv3DGRpI7OIGJhCx3Bt0QqoRluEjHSaObJl+nG12GDdYH6sTgE7YiPJ6ZUyMx9kICdXw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.2"
+
 react@^16.6.3:
  version "16.7.0"
  resolved "https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381"
@@ -4607,16 +4635,6 @@ react@^16.6.3:
    prop-types "^15.6.2"
    scheduler "^0.12.0"

-react@^16.8.0-alpha.1:
-  version "16.8.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.0-alpha.1.tgz#c2b32689f3b466d3ce85a634dd9035f789d2cd97"
-  integrity sha512-vLwwnhM2dXrCsiQmcSxF2UdZVV5xsiXjK5Yetmy8dVqngJhQ3aw3YJhZN/YmyonxwdimH40wVqFQfsl4gSu2RA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.13.0-alpha.1"
-
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
  version "2.3.6"
  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
@@ -4886,10 +4904,10 @@ scheduler@^0.12.0:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"

-scheduler@^0.13.0-alpha.1:
-  version "0.13.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.0-alpha.1.tgz#753977fb4fb35d8cdd559868a11e46b640955556"
-  integrity sha512-W0sH0848sVuPKg+I18vTYQyzVtA4X1lrVgSeXK6KnOPUltFdJcY5nkbTkjGUeS/E0x+eBsNYfSdhJtGjT95njw==
+scheduler@^0.13.2:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.2.tgz#969eaee2764a51d2e97b20a60963b2546beff8fa"
+  integrity sha512-qK5P8tHS7vdEMCW5IPyt8v9MJOHqTrOUgPXib7tqm9vh834ibBX5BNhwkplX/0iOzHW5sXyluehYfS9yrkz9+w==
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"