Adding custom GNO TextField for forms

This commit is contained in:
apanizo 2018-09-14 17:10:19 +02:00
parent efb6203cc7
commit fea31e219c
3 changed files with 95 additions and 7 deletions

View File

@ -1,12 +1,23 @@
// @flow // @flow
import React from 'react' import React from 'react'
import MuiTextField, { TextFieldProps } from '@material-ui/core/TextField' import MuiTextField, { TextFieldProps } from '@material-ui/core/TextField'
import { withStyles } from '@material-ui/core/styles'
import { lg } from '~/theme/variables'
// Neded for solving a fix in Windows browsers // Neded for solving a fix in Windows browsers
const overflowStyle = { const overflowStyle = {
overflow: 'hidden', overflow: 'hidden',
width: '100%',
} }
const styles = () => ({
root: {
paddingTop: lg,
paddingBottom: '12px',
lineHeight: 0,
},
})
class TextField extends React.PureComponent<TextFieldProps> { class TextField extends React.PureComponent<TextFieldProps> {
render() { render() {
const { const {
@ -16,25 +27,32 @@ class TextField extends React.PureComponent<TextFieldProps> {
meta, meta,
render, render,
text, text,
classes,
...rest ...rest
} = this.props } = this.props
const helperText = value ? text : undefined const helperText = value ? text : undefined
const showError = (meta.touched || !meta.pristine) && !meta.valid const showError = (meta.touched || !meta.pristine) && !meta.valid
const underline = meta.active || (meta.visited && !meta.valid)
const inputRoot = helperText ? classes.root : undefined
const inputProps = { ...restInput, autocomplete: 'off' }
const inputRootProps = { disableUnderline: !underline, className: inputRoot }
return ( return (
<MuiTextField <MuiTextField
style={overflowStyle} style={overflowStyle}
{...rest} {...rest}
name={name} name={name}
helperText={showError ? meta.error : helperText} helperText={showError ? meta.error : helperText || ' '} // blank in order to force to have helper text
error={meta.error && (meta.touched || !meta.pristine)} error={meta.error && (meta.touched || !meta.pristine)}
inputProps={restInput} InputProps={inputRootProps}
// eslint-disable-next-line
inputProps={inputProps}
onChange={onChange} onChange={onChange}
value={value} value={value}
fullWidth
/> />
) )
} }
} }
export default TextField export default withStyles(styles)(TextField)

View File

@ -1,9 +1,40 @@
// @flow // @flow
import * as React from 'react' import * as React from 'react'
import { withStyles } from '@material-ui/core/styles'
import Field from '~/components/forms/Field'
import TextField from '~/components/forms/TextField'
import { required } from '~/components/forms/validator'
import Block from '~/components/layout/Block'
import { FIELD_NAME } from '~/routes/open/components/fields'
import Paragraph from '~/components/layout/Paragraph' import Paragraph from '~/components/layout/Paragraph'
import OpenPaper from '../OpenPaper' import OpenPaper from '../OpenPaper'
const SafeNameForm = () => () => ( type Props = {
classes: Object,
}
const styles = () => ({
root: {
display: 'flex',
},
})
const SafeName = ({ classes }: Props) => (
<Block margin="md" className={classes.root}>
<Field
name={FIELD_NAME}
component={TextField}
type="text"
validate={required}
placeholder="Name of the new Safe"
text="Safe name"
/>
</Block>
)
const SafeNameForm = withStyles(styles)(SafeName)
const SafeNamePage = () => () => (
<OpenPaper> <OpenPaper>
<Paragraph size="md" color="primary"> <Paragraph size="md" color="primary">
This setup will create a Safe with one or more owners. Optionally give the Safe a local name. This setup will create a Safe with one or more owners. Optionally give the Safe a local name.
@ -15,7 +46,8 @@ const SafeNameForm = () => () => (
<Paragraph size="md" color="primary" weight="bolder"> <Paragraph size="md" color="primary" weight="bolder">
&#9679; My Safe is a smart contract on the Ethereum blockchain. &#9679; My Safe is a smart contract on the Ethereum blockchain.
</Paragraph> </Paragraph>
<SafeNameForm />
</OpenPaper> </OpenPaper>
) )
export default SafeNameForm export default SafeNamePage

View File

@ -1,7 +1,7 @@
// @flow // @flow
import red from '@material-ui/core/colors/red' import red from '@material-ui/core/colors/red'
import { createMuiTheme } from '@material-ui/core/styles' import { createMuiTheme } from '@material-ui/core/styles'
import { mediumFontSize, primary, secondary, md, lg } from './variables' import { largeFontSize, mediumFontSize, smallFontSize, primary, secondary, md, lg, background } from './variables'
export type WithStyles = { export type WithStyles = {
classes: Object, classes: Object,
@ -51,6 +51,44 @@ export default createMuiTheme({
letterSpacing: '-0.5px', letterSpacing: '-0.5px',
}, },
}, },
MuiFormHelperText: {
root: {
fontFamily: 'Roboto Mono, monospace',
fontSize: smallFontSize,
padding: `0 0 0 ${md}`,
position: 'relative',
top: '20px',
color: secondary,
order: 0,
marginTop: '0px',
backgroundColor: background,
},
},
MuiInput: {
root: {
fontFamily: 'Roboto Mono, monospace',
color: primary,
fontSize: largeFontSize,
lineHeight: '56px',
order: 1,
padding: `0 ${md}`,
backgroundColor: background,
},
input: {
padding: 0,
},
underline: {
'&:before': {
borderBottom: `2px solid ${secondary}`,
},
'&:focus:before': {
borderBottom: '1px solid purple',
},
'&:hover:not($disabled):not($focused):not($error):before': {
borderBottom: `2px solid ${secondary}`,
},
},
},
}, },
palette, palette,
}) })