From 63841b74f0afe35fdabae0fb78bcdf8eda07c8cf Mon Sep 17 00:00:00 2001 From: leMaik Date: Wed, 24 Jan 2018 00:20:17 +0100 Subject: [PATCH] Fix style to work with material-ui@1.0.0-beta.30 and update dependency. Fixes #176 --- package-lock.json | 36 ++++++++- package.json | 4 +- src/ChipInput.js | 181 +++++++++++++++++++++++----------------------- 3 files changed, 126 insertions(+), 95 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1723052..f48730d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1326,12 +1326,33 @@ } } }, + "@types/jss": { + "version": "9.3.0", + "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.3.0.tgz", + "integrity": "sha512-n7MUYCO/Wt4d6Yj0ZewXSSkqBcrdLFgpQ4mUBRXBWDmLfXtgT3tJ26GVPr8HiyRLLze6iQfaBJTlvjRTjgZpRg==", + "dev": true + }, "@types/node": { "version": "8.0.53", "resolved": "https://registry.npmjs.org/@types/node/-/node-8.0.53.tgz", "integrity": "sha512-54Dm6NwYeiSQmRB1BLXKr5GELi0wFapR1npi8bnZhEcu84d/yQKqnwwXQ56hZ0RUbTG6L5nqDZaN3dgByQXQRQ==", "dev": true }, + "@types/react": { + "version": "16.0.34", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.0.34.tgz", + "integrity": "sha512-Ee66fX2qMsDnDq7sPnDtq1bGoo479j6Fo1BlSnne+L5rp6ndzBUgz72+MRNuN56zg9uuteRCkJAMdDJEX2Uqig==", + "dev": true + }, + "@types/react-transition-group": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.6.tgz", + "integrity": "sha512-mVhRv+d0MIoLWl6hEFA7Nnd/obW2RQpZViTAKhM37mltuTDWCdoj8xAZv94ntB8wgAc6DDiDCXxFXPgClGnsfQ==", + "dev": true, + "requires": { + "@types/react": "16.0.34" + } + }, "abab": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz", @@ -7691,11 +7712,13 @@ } }, "material-ui": { - "version": "1.0.0-beta.24", - "resolved": "https://registry.npmjs.org/material-ui/-/material-ui-1.0.0-beta.24.tgz", - "integrity": "sha512-tPKQeR9RXXSJFj/QIhU5+mAnnZm5Gk6WcTufbVBDd0946wpfMJA2NY2J+M/SK9NXe+BTTVUCnWY92UCw5YA9tA==", + "version": "1.0.0-beta.30", + "resolved": "https://registry.npmjs.org/material-ui/-/material-ui-1.0.0-beta.30.tgz", + "integrity": "sha512-cgUUYf+sXjkUQmImjngHPmwo6kBIfvZKrNxmp56cpATYyaeoBydfERwv9SfUu1zzJyXLhJ6tt17XeUBn8aSqug==", "dev": true, "requires": { + "@types/jss": "9.3.0", + "@types/react-transition-group": "2.0.6", "babel-runtime": "6.26.0", "brcast": "3.0.1", "classnames": "2.2.5", @@ -7703,7 +7726,12 @@ "dom-helpers": "3.2.1", "hoist-non-react-statics": "2.3.1", "jss": "9.4.0", - "jss-preset-default": "4.0.1", + "jss-camel-case": "6.0.0", + "jss-default-unit": "8.0.2", + "jss-global": "3.0.0", + "jss-nested": "6.0.1", + "jss-props-sort": "6.0.0", + "jss-vendor-prefixer": "7.0.0", "keycode": "2.1.9", "lodash": "4.17.4", "normalize-scroll-left": "0.1.2", diff --git a/package.json b/package.json index 8b19fb8..2ffe950 100644 --- a/package.json +++ b/package.json @@ -52,14 +52,14 @@ "enzyme-to-json": "^3.2.2", "gh-pages": "^1.0.0", "jest": "^21.2.1", - "material-ui": "^1.0.0-beta.24", + "material-ui": "^1.0.0-beta.30", "react": "^16.1.1", "react-dom": "^16.1.1", "react-test-renderer": "^16.2.0", "standard": "^10.0.2" }, "peerDependencies": { - "material-ui": "^1.0.0-beta.20", + "material-ui": "^1.0.0-beta.30", "react": "^16.0.0", "react-dom": "^16.0.0" }, diff --git a/src/ChipInput.js b/src/ChipInput.js index 2c78cfa..9f40b97 100644 --- a/src/ChipInput.js +++ b/src/ChipInput.js @@ -12,100 +12,103 @@ import FormControl from 'material-ui/Form/FormControl' import FormHelperText from 'material-ui/Form/FormHelperText' import cx from 'classnames' -const styles = (theme) => ({ - root: {}, - inputRoot: { - display: 'inline-block', - marginTop: 0 - }, - input: { - display: 'inline-block', - appearance: 'none', // Remove border in Safari, doesn't seem to break anything in other browsers - WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated style). - float: 'left' - }, - chipContainer: { - cursor: 'text', - marginBottom: -2, - minHeight: 40, - '&$labeled': { - marginTop: 18 - } - }, - labeled: {}, - label: { - top: 4 - }, - labelShrink: { - top: 0 - }, - helperText: { - marginBottom: -20 - }, - inkbar: { - '&:after': { - backgroundColor: theme.palette.primary[theme.palette.type === 'light' ? 'A700' : 'A200'], - left: 0, - bottom: 0, - // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242 - content: '""', - height: 2, - position: 'absolute', - right: 0, - transform: 'scaleX(0)', - transition: theme.transitions.create('transform', { - duration: theme.transitions.duration.shorter, - easing: theme.transitions.easing.easeOut - }), - pointerEvents: 'none' // Transparent to the hover style. +const styles = (theme) => { + const light = theme.palette.type === 'light' + const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)' + + return { + root: {}, + inputRoot: { + display: 'inline-block', + marginTop: 0 }, - '&$focused:after': { - transform: 'scaleX(1)' - } - }, - focused: {}, - disabled: {}, - underline: { - '&:before': { - backgroundColor: theme.palette.input.bottomLine, - left: 0, - bottom: 0, - // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242 - content: '""', - height: 1, - position: 'absolute', - right: 0, - transition: theme.transitions.create('background-color', { - duration: theme.transitions.duration.shorter, - easing: theme.transitions.easing.ease - }), - pointerEvents: 'none' // Transparent to the hover style. + input: { + display: 'inline-block', + appearance: 'none', // Remove border in Safari, doesn't seem to break anything in other browsers + WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated style). + float: 'left' }, - '&:hover:not($disabled):before': { - backgroundColor: theme.palette.text.primary, - height: 2 + chipContainer: { + cursor: 'text', + marginBottom: -2, + minHeight: 40, + '&$labeled': { + marginTop: 18 + } }, - '&$disabled:before': { - background: 'transparent', - backgroundImage: `linear-gradient(to right, ${ - theme.palette.input.bottomLine - } 33%, transparent 0%)`, - backgroundPosition: 'left top', - backgroundRepeat: 'repeat-x', - backgroundSize: '5px 1px' - } - }, - error: { - '&:after': { - backgroundColor: theme.palette.error.A400, - transform: 'scaleX(1)' // error is always underlined in red + labeled: {}, + label: { + top: 4 + }, + labelShrink: { + top: 0 + }, + helperText: { + marginBottom: -20 + }, + inkbar: { + '&:after': { + backgroundColor: theme.palette.primary[light ? 'dark' : 'light'], + left: 0, + bottom: 0, + // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242 + content: '""', + height: 2, + position: 'absolute', + right: 0, + transform: 'scaleX(0)', + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.shorter, + easing: theme.transitions.easing.easeOut + }), + pointerEvents: 'none' // Transparent to the hover style. + }, + '&$focused:after': { + transform: 'scaleX(1)' + } + }, + focused: {}, + disabled: {}, + underline: { + '&:before': { + backgroundColor: bottomLineColor, + left: 0, + bottom: 0, + // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242 + content: '""', + height: 1, + position: 'absolute', + right: 0, + transition: theme.transitions.create('background-color', { + duration: theme.transitions.duration.shorter, + easing: theme.transitions.easing.ease + }), + pointerEvents: 'none' // Transparent to the hover style. + }, + '&:hover:not($disabled):before': { + backgroundColor: theme.palette.text.primary, + height: 2 + }, + '&$disabled:before': { + background: 'transparent', + backgroundImage: `linear-gradient(to right, ${bottomLineColor} 33%, transparent 0%)`, + backgroundPosition: 'left top', + backgroundRepeat: 'repeat-x', + backgroundSize: '5px 1px' + } + }, + error: { + '&:after': { + backgroundColor: theme.palette.error.A400, + transform: 'scaleX(1)' // error is always underlined in red + } + }, + chip: { + margin: '0 8px 8px 0', + float: 'left' } - }, - chip: { - margin: '0 8px 8px 0', - float: 'left' } -}) +} const defaultChipRenderer = ({ value, text, isFocused, isDisabled, handleClick, handleDelete, className }, key) => (