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 | 1x 1x 1x 1x | import React, { useState } from 'react'; import PropTypes from 'prop-types'; import Base from './Base'; import Container from './Container'; const Input = ({ append, defaultValue, label, onBlur, onChange, onFocus, placeholder, prepend, value, ...rest }) => { const [hasFocus, setHasFocus] = useState(false); const [localValue, setLocalValue] = useState(value || defaultValue); const [labelWidth, setLabelWidth] = useState(0); const componentValue = value || localValue; const hasAddons = (prepend || append) && true; const labelIsActive = hasFocus || componentValue !== ''; return ( <Container {...rest} hasAddons={hasAddons} labelIsActive={labelIsActive} labelWidth={labelWidth} > {prepend} <Base {...rest} hasFocus={hasFocus} label={label} labelIsActive={labelIsActive} onChange={event => { setLocalValue(event.target.value); onChange(event); }} onBlur={event => { setHasFocus(false); onBlur(event); }} onFocus={event => { setHasFocus(true); onFocus(event); }} placeholder={placeholder} setLabelWidth={setLabelWidth} value={componentValue} /> {append} </Container> ); }; Input.displayName = 'Input'; Input.propTypes = { append: PropTypes.node, defaultValue: PropTypes.node, label: PropTypes.node, onBlur: PropTypes.func, onChange: PropTypes.func, onFocus: PropTypes.func, outlined: PropTypes.bool, placeholder: PropTypes.node, prepend: PropTypes.node, value: PropTypes.node, }; Input.defaultProps = { append: null, defaultValue: '', label: null, onBlur() {}, onChange() {}, onFocus() {}, outlined: false, placeholder: null, prepend: null, value: null, }; export default Input; |