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