diff options
Diffstat (limited to 'ui/app/components/text-field')
-rw-r--r-- | ui/app/components/text-field/text-field.component.js | 117 |
1 files changed, 79 insertions, 38 deletions
diff --git a/ui/app/components/text-field/text-field.component.js b/ui/app/components/text-field/text-field.component.js index 6fd3b82b4..4107068b5 100644 --- a/ui/app/components/text-field/text-field.component.js +++ b/ui/app/components/text-field/text-field.component.js @@ -1,59 +1,100 @@ -import React from 'react' +import React, { Component } from 'react' import PropTypes from 'prop-types' -import { withStyles } from 'material-ui/styles' -import { default as MaterialTextField } from 'material-ui/TextField' +import { withStyles } from '@material-ui/core/styles' +import { default as MaterialTextField } from '@material-ui/core/TextField' const styles = { - cssLabel: { - '&$cssFocused': { + materialLabel: { + '&$materialFocused': { color: '#aeaeae', }, - '&$cssError': { + '&$materialError': { color: '#aeaeae', }, fontWeight: '400', color: '#aeaeae', }, - cssFocused: {}, - cssUnderline: { + materialFocused: {}, + materialUnderline: { '&:after': { - backgroundColor: '#f7861c', + borderBottom: '2px solid #f7861c', }, }, - cssError: {}, + materialError: {}, + // Non-material styles + formLabel: { + '&$formLabelFocused': { + color: '#5b5b5b', + }, + '&$materialError': { + color: '#5b5b5b', + }, + }, + formLabelFocused: {}, + inputRoot: { + 'label + &': { + marginTop: '8px', + }, + border: '1px solid #d2d8dd', + height: '48px', + borderRadius: '4px', + padding: '0 16px', + display: 'flex', + alignItems: 'center', + '&:focus': { + border: '1px solid #2f9ae0', + }, + }, + inputLabel: { + fontSize: '.75rem', + transform: 'none', + transition: 'none', + position: 'initial', + color: '#5b5b5b', + }, } -const TextField = props => { - const { error, classes, ...textFieldProps } = props +class TextField extends Component { + static defaultProps = { + error: null, + } - return ( - <MaterialTextField - error={Boolean(error)} - helperText={error} - InputLabelProps={{ - FormLabelClasses: { - root: classes.cssLabel, - focused: classes.cssFocused, - error: classes.cssError, - }, - }} - InputProps={{ - classes: { - underline: classes.cssUnderline, - }, - }} - {...textFieldProps} - /> - ) -} + static propTypes = { + error: PropTypes.string, + classes: PropTypes.object, + material: PropTypes.bool, + startAdornment: PropTypes.element, + } -TextField.defaultProps = { - error: null, -} + render () { + const { error, classes, material, startAdornment, ...textFieldProps } = this.props -TextField.propTypes = { - error: PropTypes.string, - classes: PropTypes.object, + return ( + <MaterialTextField + error={Boolean(error)} + helperText={error} + InputLabelProps={{ + shrink: material ? undefined : true, + className: material ? '' : classes.inputLabel, + FormLabelClasses: { + root: material ? classes.materialLabel : classes.formLabel, + focused: material ? classes.materialFocused : classes.formLabelFocused, + error: classes.materialError, + }, + }} + InputProps={{ + startAdornment: startAdornment || undefined, + disableUnderline: !material, + classes: { + root: material ? '' : classes.inputRoot, + input: material ? '' : classes.input, + underline: material ? classes.materialUnderline : '', + }, + }} + {...textFieldProps} + /> + ) + } } export default withStyles(styles)(TextField) |