git.iko.soy/bridge
on 9b396e2 help sign in
bridge/src/components/OldTextArea.js
129 lines 2.8 kB history raw
1import React from 'react';
2import PropTypes from 'prop-types';
4const TextArea = ({
5 // DOM props
6 name,
7 placeholder,
8 value,
9 className,
10 row,
11 col,
12 disabled,
13 autoFocus,
14 maxLength,
15 readOnly,
16 // events
17 onChange,
18 onFocus,
19 onBlur,
20 format,
21 size,
22 children,
23 // validated component props (if wrapped)
24 isValidated,
25 validationClassnames,
26 focussed,
27 beenFocussed,
28 hasSubmitted,
29 displayPass,
30 displayFailure,
31 error,
32}) => {
34 const _disabled = disabled === true ? 'br-gray-30' : '';
36 const s = getStyles(styleManifest, format, size);
38 // This enables all children of this component to share the state of this
39 // component.
40 const childrenWithProps = React.Children.map(children, child =>
41 React.cloneElement(child, { displayPass, displayFailure, focussed })
42 );
44 return (
45 <div className={'rel'}>
46 <textarea
47 className={`bw-2 flex bs-solid ${s} ${validationClassnames} ${_disabled} ${className}`}
48 onChange={e => onChange(e)}
49 onFocus={e => onFocus(e)}
50 onBlur={e => onBlur(e)}
51 placeholder={placeholder}
52 name={name}
53 value={value}
54 // row={row}
55 // col={col}
56 disabled={disabled}
57 autoFocus={autoFocus}
58 maxLength={maxLength}
59 readOnly={readOnly}
60 />
61 {
62 childrenWithProps
63 }
64 {
65 displayFailure === true && isValidated === true
66 ? <div className={'yellow text-600 h-6 mt-1'}>{error}</div>
67 : <div/>
68 }
70 </div>
71 );
72};
74const getStyles = (m, t, s) => `${m[t][s] || ''}`;
76const styleManifest = {
77 normal: {
78 l: 'h-80 fs-7 ph-4',
79 m: 'h-40 fs-35 ph-4',
80 s: 'h-24 fs-35 ph-1',
81 }
85TextArea.propTypes = {
86 disabled: PropTypes.bool,
87 onChange: PropTypes.func,
88 onBlur: PropTypes.func,
89 onFocus: PropTypes.func,
90 className: PropTypes.string,
91 children: PropTypes.node,
92 autoFocus: PropTypes.bool,
93 maxLength: PropTypes.number,
94 readOnly: PropTypes.bool,
95 name: PropTypes.string,
96 value: PropTypes.string,
97 row: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
98 col: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
99 isSelected: PropTypes.bool,
100 hasBeenSelected: PropTypes.bool,
101 hasSubmitted: PropTypes.bool,
102 displayPass: PropTypes.bool,
103 displayFailure: PropTypes.bool,
104 error: PropTypes.string,
105 validationClassnames: PropTypes.string,
106};
109TextArea.defaultProps = {
110 disabled: false,
111 onChange: () => {},
112 onBlur: () => {},
113 onFocus: () => {},
114 value: '',
115 name: '',
116 className: '',
117 isSelected: false,
118 hasBeenSelected: false,
119 hasSubmitted: false,
120 displayPass: false,
121 displayFailure: false,
122 error: '',
123 size: 'm',
124 format: 'normal',
125 validationClassnames: 'br-gray-50 f-br-blue outline-blue',
126};
129export default TextArea;