-
Notifications
You must be signed in to change notification settings - Fork 10.8k
/
index.js
90 lines (83 loc) · 1.81 KB
/
index.js
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
/**
* External dependencies
*/
import classnames from 'classnames';
import { createElement, Component } from '@wordpress/element';
import PropTypes from 'prop-types';
import {
TextControl as BaseComponent,
withFocusOutside,
} from '@wordpress/components';
/**
* An input field use for text inputs in forms.
*/
const TextControl = withFocusOutside(
class extends Component {
constructor( props ) {
super( props );
this.state = {
isFocused: false,
};
}
handleFocusOutside() {
this.setState( { isFocused: false } );
}
handleOnClick( event, onClick ) {
this.setState( { isFocused: true } );
if ( typeof onClick === 'function' ) {
onClick( event );
}
}
render() {
const { isFocused } = this.state;
const { className, onClick, ...otherProps } = this.props;
const { label, value, disabled } = otherProps;
const isEmpty = value === '';
const isActive = isFocused && ! disabled;
return (
<BaseComponent
className={ classnames(
'muriel-component',
'muriel-input-text',
className,
{
disabled,
empty: isEmpty,
active: isActive,
'with-value': ! isEmpty,
}
) }
placeholder={ label }
onClick={ ( event ) =>
this.handleOnClick( event, onClick )
}
onFocus={ () => this.setState( { isFocused: true } ) }
{ ...otherProps }
/>
);
}
}
);
TextControl.propTypes = {
/**
* Additional CSS classes.
*/
className: PropTypes.string,
/**
* Disables the field.
*/
disabled: PropTypes.bool,
/**
* Input label used as a placeholder.
*/
label: PropTypes.string,
/**
* On click handler called when the component is clicked, passed the click event.
*/
onClick: PropTypes.func,
/**
* The value of the input field.
*/
value: PropTypes.string,
};
export default TextControl;