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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/**
* External dependencies
*/
import PropTypes from 'prop-types';
import React, { Component, Fragment } from 'react';
import classNames from 'classnames';
import './style.scss';
export default class FormToggle extends Component {
static propTypes = {
onChange: PropTypes.func,
onKeyDown: PropTypes.func,
checked: PropTypes.bool,
disabled: PropTypes.bool,
id: PropTypes.string,
className: PropTypes.string,
toggling: PropTypes.bool,
'aria-label': PropTypes.string,
children: PropTypes.node,
disabledReason: PropTypes.node,
switchClassNames: PropTypes.string,
labelClassNames: PropTypes.string,
};
static defaultProps = {
checked: false,
disabled: false,
onKeyDown: () => {},
onChange: () => {},
disabledReason: '',
};
state = {};
static idNum = 0;
constructor() {
super( ...arguments );
this.onKeyDown = this.onKeyDown.bind( this );
this.onClick = this.onClick.bind( this );
this.onLabelClick = this.onLabelClick.bind( this );
}
UNSAFE_componentWillMount() {
this.id = this.constructor.idNum++;
}
onKeyDown( event ) {
if ( this.props.disabled ) {
return;
}
if ( event.key === 'Enter' || event.key === ' ' ) {
event.preventDefault();
this.props.onChange();
}
this.props.onKeyDown( event );
}
onClick() {
if ( ! this.props.disabled ) {
this.props.onChange();
}
}
onLabelClick( event ) {
if ( this.props.disabled ) {
return;
}
const nodeName = event.target.nodeName.toLowerCase();
if ( nodeName !== 'a' && nodeName !== 'input' && nodeName !== 'select' ) {
event.preventDefault();
this.props.onChange();
}
}
render() {
const id = this.props.id || 'toggle-' + this.id;
const toggleClasses = classNames( 'form-toggle', this.props.className, {
'is-toggling': this.props.toggling,
} );
return (
<Fragment>
<div
className={ classNames( 'form-toggle__switch-container', this.props.switchClassNames ) }
>
<input
className={ toggleClasses }
type="checkbox"
checked={ this.props.checked }
readOnly={ true }
disabled={ this.props.disabled }
/>
<span
className={ classNames( 'form-toggle__switch', this.props.switchClassNames ) }
disabled={ this.props.disabled }
id={ id }
onClick={ this.onClick }
onKeyDown={ this.onKeyDown }
role="checkbox"
aria-checked={ this.props.checked }
aria-label={ this.props[ 'aria-label' ] }
tabIndex={ this.props.disabled ? -1 : 0 }
ref="toggleSwitch"
/>
</div>
<label
className={ classNames( 'form-toggle__label', this.props.labelClassNames ) }
htmlFor={ id }
>
<span
className={ classNames( 'form-toggle__label-content', this.props.labelClassNames ) }
onClick={ this.onLabelClick }
>
{ this.props.children }
</span>
</label>
</Fragment>
);
}
}
|
GitWeb