woocommerce/plugins/woocommerce-blocks/assets/js/editor-components/toggle-button-control/index.js

93 lines
1.9 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import classnames from 'classnames';
import { BaseControl, ButtonGroup, Button } from '@wordpress/components';
import { Component } from '@wordpress/element';
import { withInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
*/
import './style.scss';
class ToggleButtonControl extends Component {
constructor() {
super( ...arguments );
this.onClick = this.onClick.bind( this );
}
onClick( event ) {
if ( this.props.onChange ) {
this.props.onChange( event.target.value );
}
}
render() {
const {
label,
checked,
instanceId,
className,
help,
options,
value,
} = this.props;
const id = `inspector-toggle-button-control-${ instanceId }`;
let helpLabel;
if ( help ) {
helpLabel = typeof help === 'function' ? help( checked ) : help;
}
return (
<BaseControl
id={ id }
help={ helpLabel }
className={ classnames(
'components-toggle-button-control',
className
) }
>
<label
id={ id + '__label' }
htmlFor={ id }
className="components-toggle-button-control__label"
>
{ label }
</label>
<ButtonGroup aria-labelledby={ id + '__label' }>
{ options.map( ( option, index ) => {
const buttonArgs = {};
// Change button depending on pressed state.
if ( value === option.value ) {
buttonArgs.isPrimary = true;
buttonArgs[ 'aria-pressed' ] = true;
} else {
buttonArgs.isSecondary = true;
buttonArgs[ 'aria-pressed' ] = false;
}
return (
<Button
Add @woocommerce/eslint-plugin dependency (https://github.com/woocommerce/woocommerce-blocks/pull/3115) * convert eslint config to use @woocommerce/eslint-plugin - removes unnecessary dependencies - adds e2e-tests/specs to eslint ignore (they are automatically generated) - turns off rules that will be handled in subsequent pulls (to avoid a mammoth changeset for review). - NOTE: prettier config needs left in because of a bug with the existing version of `@wordpress/eslint-plugin` pulled in (fixed in https://github.com/WordPress/gutenberg/pull/25068) so I left the file for now. * prettier fixes. * remove obsolete plugin and fixes for eslint update This branch brings an update to eslint which also changes some syntax with plugins. So this commit: - fixes featuer-flag plugin syntax. - removed obsolete dependency-group plugin (which is now in the `@woocommerce/eslint-plugin` configuration. * add to-do comment * fixes for test runs - this also converts our e2e test scripts to use `wp-script test:e2e`, an advantage of this is it will load CHROMIUM on demand for the e2e test run. * fixes for test runs - this also converts our e2e test scripts to use `wp-script test:e2e`, an advantage of this is it will load CHROMIUM on demand for the e2e test run. * include prettier alias as a dependency This has to be done because prettier is installed with storybook and thus the alias setup in `@wordpress/scripts` is over-ridden by the storybook import. * another attempt at e2e-test-fix * add some debugging and temporarily just add one e2e config test for travis * more debugging * try installing full puppeteer and see if fixes * fix package-lock? * setupSettings separately from other fixture loading * add debugging of files * add another console.log (hopefully trigger travis) * split out blockPage creation to it’s own as well * fixed! remove debugging and re-enable travis configs for entire test suite * fix config and rename e2e-tests to e2e - fixes the failing product-search test - tests/e2e-tests was redundant, I changed to `tests/e2e` (this follows a file pattern change made in woocommerce core as well). * add todo for some eslint properties * remove unnecessary early function execution * revert earlier commit and remove duplicate call to createBlockPages
2020-09-07 17:31:10 +00:00
key={ `${ option.label }-${ option.value }-${ index }` }
value={ option.value }
onClick={ this.onClick }
aria-label={ label + ': ' + option.label }
{ ...buttonArgs }
>
{ option.label }
</Button>
);
} ) }
</ButtonGroup>
</BaseControl>
);
}
}
export default withInstanceId( ToggleButtonControl );