diff options
Diffstat (limited to 'plugins/jetpack/jetpack_vendor/automattic/jetpack-wordads/src/dashboard/components/form-toggle/index.jsx')
-rw-r--r-- | plugins/jetpack/jetpack_vendor/automattic/jetpack-wordads/src/dashboard/components/form-toggle/index.jsx | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/plugins/jetpack/jetpack_vendor/automattic/jetpack-wordads/src/dashboard/components/form-toggle/index.jsx b/plugins/jetpack/jetpack_vendor/automattic/jetpack-wordads/src/dashboard/components/form-toggle/index.jsx new file mode 100644 index 00000000..1dce27dd --- /dev/null +++ b/plugins/jetpack/jetpack_vendor/automattic/jetpack-wordads/src/dashboard/components/form-toggle/index.jsx @@ -0,0 +1,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> + ); + } +} |