Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 12x 12x 12x 12x 12x 12x 12x | import React from 'react'; import * as R from 'ramda'; import PropTypes from 'prop-types'; import { makeStyles } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; import InputAdornment from '@material-ui/core/InputAdornment'; import IconButton from '@material-ui/core/IconButton'; import { withInput } from './with-input'; const useStyles = makeStyles(theme => ({ rightIcon: { '&:hover': { color: theme.palette.primary.main, backgroundColor: 'rgba(0, 0, 0, 0)', }, }, input: { backgroundColor: 'rgba(0, 0, 0, 0)', }, })); const LefttIcon = ({ Icon }) => <Icon />; LefttIcon.propTypes = { Icon: PropTypes.object, }; const RightIcon = ({ classes, onSubmit, Icon }) => ( <IconButton className={classes.root} onClick={() => onSubmit()} aria-label="Done"> <Icon /> </IconButton> ); RightIcon.propTypes = { Icon: PropTypes.object, onSubmit: PropTypes.func, classes: PropTypes.object, }; export const MyInput = ({ id, label, placeholder, leftIcon, rightIcon, value, type, onChange, onSubmit, fullWidth, }) => { const classes = useStyles(); const startAdornment = R.isNil(leftIcon) ? null : ( <InputAdornment position="start"> <LefttIcon Icon={leftIcon} /> </InputAdornment> ); const endAdornment = R.isNil(rightIcon) ? null : ( <InputAdornment position="end"> <RightIcon classes={{ root: classes.rightIcon }} onSubmit={onSubmit} Icon={rightIcon} /> </InputAdornment> ); const onEnterLabel = event => { if (event.key === 'Enter') { event.preventDefault(); onSubmit(); } }; return ( <div> <TextField classes={{ root: classes.input }} margin="dense" fullWidth={fullWidth} id={id} type={type} label={label} variant="outlined" value={R.isNil(value) ? '' : value} placeholder={placeholder} onChange={e => onChange(e.target.value)} onKeyPress={onEnterLabel} InputProps={{ startAdornment, endAdornment }} /> </div> ); }; MyInput.propTypes = { id: PropTypes.string, label: PropTypes.string, placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), leftIcon: PropTypes.object, rightIcon: PropTypes.object, value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), type: PropTypes.string, onChange: PropTypes.func, onSubmit: PropTypes.func, fullWidth: PropTypes.bool, }; export default withInput(MyInput); |