git.iko.soy/bridge
on adf9104 help sign in
bridge/src/components/Input.js
73 lines 1.9 kB history raw
1import React from 'react';
2import PropTypes from 'prop-types';
3import ProtoInput from './ProtoInput';
5const Input = props => {
7 const _disabled = props.disabled === true ? 'br-gray-30' : '';
9 // This enables all children of this component to share the state of this
10 // component.
11 const childrenWithProps = React.Children.map(props.children, child => {
12 const propsToPass = {
13 displayPass: props.displayPass,
14 displayFailure: props.displayFailure,
15 focussed: props.focussed,
16 beenFocussed: props.beenFocussed,
17 error: props.error,
18 }
19 return React.cloneElement(child, propsToPass)
20 });
22 const className = props.advanced
23 ? `${props.valClassname} ${props.className}`
24 : `br-gray-50 f-br-blue outline-blue ${props.className}`
27 return (
28 <div className={'relative'}>
29 <ProtoInput
30 {...props}
31 // prop-focussed={props.focussed.toString()}
32 className={`p-3 b-2 b-solid flex ${_disabled} ${className}`}
33 onChange={e => props.onChange(e.target.value)} />
34 {
35 props.displayFailure === true && props.advanced === true
36 ? <div className={'yellow text-600 h-6 mt-1 fs-3'}>{props.error}</div>
37 : <div/>
38 }
39 {
40 childrenWithProps
41 }
42 </div>
43 );
47Input.propTypes = {
48 focussed: PropTypes.bool,
49 beenFocussed: PropTypes.bool,
50 hasSubmitted: PropTypes.bool,
51 displayPass: PropTypes.bool,
52 displayFailure: PropTypes.bool,
53 advanced: PropTypes.bool,
54 error: PropTypes.string,
55 valClassname: PropTypes.string,
56 size: PropTypes.oneOf(['s', 'm', 'l', 'xl']),
57};
60Input.defaultProps = {
61 focussed: false,
62 beenFocussed: false,
63 hasSubmitted: false,
64 displayPass: false,
65 displayFailure: false,
66 advanced: false,
67 error: '',
68 size: 'm',
69 format: 'normal',
70};
73export default Input;