Update React & Material-UI

This commit is contained in:
Thomas Nordquist
2019-02-17 17:51:42 +01:00
parent 3f52944f18
commit 03462f7ec8
12 changed files with 72 additions and 54 deletions

View File

@@ -9,7 +9,7 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@material-ui/core": "^3.9.0", "@material-ui/core": "^4.0.0-alpha.0",
"@material-ui/icons": "^3.0.1", "@material-ui/icons": "^3.0.1",
"@material-ui/styles": "^3.0.0-alpha.8", "@material-ui/styles": "^3.0.0-alpha.8",
"@types/node": "^10.12.18", "@types/node": "^10.12.18",
@@ -34,7 +34,7 @@
"lodash.throttle": "^4.1.1", "lodash.throttle": "^4.1.1",
"moving-average": "^1.0.0", "moving-average": "^1.0.0",
"number-abbreviate": "^2.0.0", "number-abbreviate": "^2.0.0",
"react": "^16.8.0-alpha.1", "react": "16.8",
"react-ace": "^6.3.2", "react-ace": "^6.3.2",
"react-dom": "^16.7.0", "react-dom": "^16.7.0",
"react-json-view": "^1.19.1", "react-json-view": "^1.19.1",

View File

@@ -89,7 +89,7 @@ const styles = (theme: Theme) => ({
maxWidth: 650, maxWidth: 650,
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
margin: '10vh auto auto auto', margin: '10vh auto auto auto',
padding: `${2 * theme.spacing.unit}px`, padding: theme.spacing(2),
outline: 'none', outline: 'none',
}, },
title: { title: {
@@ -105,7 +105,7 @@ const styles = (theme: Theme) => ({
}, },
buttonPositioning: { buttonPositioning: {
textAlign: 'center' as 'center', textAlign: 'center' as 'center',
marginTop: `${theme.spacing.unit * 2}px`, marginTop: theme.spacing(2),
}, },
}) })

View File

@@ -232,14 +232,14 @@ const styles = (theme: Theme) => ({
color: theme.typography.button.color, color: theme.typography.button.color,
}, },
close: { close: {
padding: theme.spacing.unit / 2, padding: '4px',
}, },
root: { root: {
minWidth: '350px', minWidth: '350px',
maxWidth: '500px', maxWidth: '500px',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
margin: '20vh auto auto auto', margin: '20vh auto auto auto',
padding: `${2 * theme.spacing.unit}px`, padding: theme.spacing(2),
outline: 'none', outline: 'none',
}, },
title: { title: {
@@ -252,7 +252,7 @@ const styles = (theme: Theme) => ({
maxHeight: '28vh', maxHeight: '28vh',
}, },
paper: { paper: {
padding: `${theme.spacing.unit * 2}px`, padding: theme.spacing(2),
color: theme.palette.text.secondary, color: theme.palette.text.secondary,
}, },
download: { download: {

View File

@@ -5,12 +5,12 @@ import { Theme, withStyles } from '@material-ui/core/styles'
const styles = (theme: Theme) => ({ const styles = (theme: Theme) => ({
addButton: { addButton: {
height: `${theme.spacing.unit * 4}px`, height: theme.spacing(4),
width: `${theme.spacing.unit * 4}px`, width: theme.spacing(4),
minHeight: '0', minHeight: '0',
}, },
addIcon: { addIcon: {
height: `${theme.spacing.unit * 2}px`, height: theme.spacing(2),
}, },
}) })

View File

@@ -45,7 +45,7 @@ class ConnectionSettings extends React.Component<Props, State> {
return ( return (
<div> <div>
<form className={classes.container} noValidate={true} autoComplete="off"> <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}> <Grid item={true} xs={10} className={classes.gridPadding}>
<TextField <TextField
className={classes.fullWidth} className={classes.fullWidth}
@@ -145,7 +145,7 @@ const styles: StyleRulesCallback<string> = (theme: Theme) => {
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
}, },
button: { button: {
marginTop: `${theme.spacing.unit * 3 + 2}px`, marginTop: theme.spacing(3),
float: 'right', float: 'right',
}, },
} }

View File

@@ -120,7 +120,7 @@ class ConnectionSettings extends React.Component<Props, State> {
<div> <div>
{renderError} {renderError}
<form className={classes.container} noValidate={true} autoComplete="off"> <form className={classes.container} noValidate={true} autoComplete="off">
<Grid container={true} spacing={24}> <Grid container={true} spacing={3}>
<Grid item={true} xs={5}> <Grid item={true} xs={5}>
<TextField <TextField
label="Name" label="Name"
@@ -344,7 +344,7 @@ const styles: StyleRulesCallback<string> = (theme: Theme) => {
marginTop: 0, marginTop: 0,
}, },
button: { button: {
margin: theme.spacing.unit, margin: theme.spacing(1),
}, },
inputFormControl: { inputFormControl: {
marginTop: '16px', marginTop: '16px',

View File

@@ -87,7 +87,7 @@ const styles = (theme: Theme) => ({
left: { left: {
borderRightStyle: 'dotted' as 'dotted', borderRightStyle: 'dotted' as 'dotted',
borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`, borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`,
paddingTop: `${2 * theme.spacing.unit}px`, paddingTop: theme.spacing(2),
flex: 3, flex: 3,
overflow: 'hidden', overflow: 'hidden',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
@@ -96,7 +96,7 @@ const styles = (theme: Theme) => ({
right: { right: {
borderRadius: `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`, borderRadius: `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`,
backgroundColor: theme.palette.background.paper, backgroundColor: theme.palette.background.paper,
padding: `${2 * theme.spacing.unit}px`, padding: theme.spacing(2),
flex: 10, flex: 10,
}, },
connectionUri: { connectionUri: {
@@ -106,7 +106,7 @@ const styles = (theme: Theme) => ({
overflow: 'hidden' as 'hidden', overflow: 'hidden' as 'hidden',
color: theme.palette.text.hint, color: theme.palette.text.hint,
fontSize: '0.9em', fontSize: '0.9em',
marginLeft: '24px', marginLeft: theme.spacing(4),
}, },
}) })

View File

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

View File

@@ -230,7 +230,7 @@ const styles: StyleRulesCallback<string> = (theme: Theme) => {
height: '100%', height: '100%',
}, },
valuePaper: { valuePaper: {
margin: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px`, margin: theme.spacing(1),
}, },
heading: { heading: {
fontSize: theme.typography.pxToRem(15), fontSize: theme.typography.pxToRem(15),

View File

@@ -32,16 +32,16 @@ const styles: StyleRulesCallback = theme => ({
'&:hover': { '&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25), backgroundColor: fade(theme.palette.common.white, 0.25),
}, },
marginRight: theme.spacing.unit * 2, marginRight: theme.spacing(2),
marginLeft: 0, marginLeft: 0,
width: '100%', width: '100%',
[theme.breakpoints.up('sm')]: { [theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing.unit * 3, marginLeft: theme.spacing(3),
width: 'auto', width: 'auto',
}, },
}, },
searchIcon: { searchIcon: {
width: theme.spacing.unit * 8, width: theme.spacing(8),
height: '100%', height: '100%',
position: 'absolute', position: 'absolute',
pointerEvents: 'none', pointerEvents: 'none',
@@ -54,10 +54,10 @@ const styles: StyleRulesCallback = theme => ({
width: '100%', width: '100%',
}, },
inputInput: { inputInput: {
paddingTop: theme.spacing.unit, paddingTop: theme.spacing(1),
paddingRight: theme.spacing.unit, paddingRight: theme.spacing(1),
paddingBottom: theme.spacing.unit, paddingBottom: theme.spacing(1),
paddingLeft: theme.spacing.unit * 10, paddingLeft: theme.spacing(10),
transition: theme.transitions.create('width'), transition: theme.transitions.create('width'),
width: '100%', width: '100%',
[theme.breakpoints.up('md')]: { [theme.breakpoints.up('md')]: {

View File

@@ -101,7 +101,7 @@ const styles = (theme: Theme) => ({
clear: 'both' as 'both', clear: 'both' as 'both',
}, },
listItem: { listItem: {
padding: `0px 0px 0px ${theme.spacing.unit}px`, padding: `0px 0px 0px ${theme.spacing(1)}`,
}, },
}) })

View File

@@ -21,18 +21,18 @@
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53"
integrity sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA== integrity sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==
"@material-ui/core@^3.9.0": "@material-ui/core@^4.0.0-alpha.0":
version "3.9.1" version "4.0.0-alpha.0"
resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-3.9.1.tgz#994fa54f0936092556d231d1055b8f76b12be06e" resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.0.0-alpha.0.tgz#7342e6c672d2351a7657af9b92fe7a5411b7dd00"
integrity sha512-26GtjuwxPPfSsUnYrTOC8zuCuhWPVhc4SsUSFTZq0n1QvpGi9UEZRFe8yp6FykQE+PmqyyY+eWdrfiXKSUKZ0w== integrity sha512-2bg325ZdSLRHbHMluoXvUzrnLu6WwMyiSfQhDZtwlpaFgWRZSwGskWQLGxNp/O9Lwu/SMYA2A0YHJtaMbvKqFw==
dependencies: dependencies:
"@babel/runtime" "^7.2.0" "@babel/runtime" "^7.2.0"
"@material-ui/system" "^3.0.0-alpha.0" "@material-ui/system" "^4.0.0-alpha.0"
"@material-ui/utils" "^3.0.0-alpha.2" "@material-ui/utils" "^4.0.0-alpha.0"
"@types/jss" "^9.5.6" "@types/jss" "^9.5.6"
"@types/react-transition-group" "^2.0.8" "@types/react-transition-group" "^2.0.8"
brcast "^3.0.1" brcast "^3.0.1"
classnames "^2.2.5" clsx "^1.0.2"
csstype "^2.5.2" csstype "^2.5.2"
debounce "^1.1.0" debounce "^1.1.0"
deepmerge "^3.0.0" deepmerge "^3.0.0"
@@ -51,7 +51,6 @@
prop-types "^15.6.0" prop-types "^15.6.0"
react-event-listener "^0.6.2" react-event-listener "^0.6.2"
react-transition-group "^2.2.1" react-transition-group "^2.2.1"
recompose "0.28.0 - 0.30.0"
warning "^4.0.1" warning "^4.0.1"
"@material-ui/icons@^3.0.1": "@material-ui/icons@^3.0.1":
@@ -84,10 +83,10 @@
prop-types "^15.6.0" prop-types "^15.6.0"
warning "^4.0.1" warning "^4.0.1"
"@material-ui/system@^3.0.0-alpha.0": "@material-ui/system@^4.0.0-alpha.0":
version "3.0.0-alpha.2" version "4.0.0-alpha.0"
resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-3.0.0-alpha.2.tgz#096e80c8bb0f70aea435b9e38ea7749ee77b4e46" resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.0.0-alpha.0.tgz#9972a797f04e1b96b84ad462243086fe89038f73"
integrity sha512-odmxQ0peKpP7RQBQ8koly06YhsPzcoVib1vByVPBH4QhwqBXuYoqlCjt02846fYspAqkrWzjxnWUD311EBbxOA== integrity sha512-qJLLx+rBmj1AsnuOLja9eN0x/ajZWM6FgCUVV08ecQ2FHEb+TT5QK6b+Lcw5TNnHxakGC8wkmUkIYafwcqGA5g==
dependencies: dependencies:
"@babel/runtime" "^7.2.0" "@babel/runtime" "^7.2.0"
deepmerge "^3.0.0" deepmerge "^3.0.0"
@@ -103,6 +102,15 @@
prop-types "^15.6.0" prop-types "^15.6.0"
react-is "^16.6.3" 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": "@types/jss@^9.5.6":
version "9.5.7" version "9.5.7"
resolved "https://registry.yarnpkg.com/@types/jss/-/jss-9.5.7.tgz#fa57a6d0b38a3abef8a425e3eb6a53495cb9d5a0" 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" strip-ansi "^4.0.0"
wrap-ansi "^2.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: code-point-at@^1.0.0:
version "1.1.0" version "1.1.0"
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" 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" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa"
integrity sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g== 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: react-json-view@^1.19.1:
version "1.19.1" version "1.19.1"
resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.19.1.tgz#95d8e59e024f08a25e5dc8f076ae304eed97cf5c" 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" prop-types "^15.5.8"
react-motion "^0.5.2" 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: react@^16.6.3:
version "16.7.0" version "16.7.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381" 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" prop-types "^15.6.2"
scheduler "^0.12.0" 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: "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" version "2.3.6"
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf" 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" loose-envify "^1.1.0"
object-assign "^4.1.1" object-assign "^4.1.1"
scheduler@^0.13.0-alpha.1: scheduler@^0.13.2:
version "0.13.0-alpha.1" version "0.13.2"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.0-alpha.1.tgz#753977fb4fb35d8cdd559868a11e46b640955556" resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.2.tgz#969eaee2764a51d2e97b20a60963b2546beff8fa"
integrity sha512-W0sH0848sVuPKg+I18vTYQyzVtA4X1lrVgSeXK6KnOPUltFdJcY5nkbTkjGUeS/E0x+eBsNYfSdhJtGjT95njw== integrity sha512-qK5P8tHS7vdEMCW5IPyt8v9MJOHqTrOUgPXib7tqm9vh834ibBX5BNhwkplX/0iOzHW5sXyluehYfS9yrkz9+w==
dependencies: dependencies:
loose-envify "^1.1.0" loose-envify "^1.1.0"
object-assign "^4.1.1" object-assign "^4.1.1"