webpack/components/DualList/ListControls.js
import React from 'react';
import PropTypes from 'prop-types';
import { translate as __ } from 'foremanReact/common/I18n';
const ListControls = props => (
<div className="pf-c-dual-list-selector__controls">
<div className="pf-c-dual-list-selector__controls-item">
<button
className="pf-c-button pf-m-plain"
type="button"
disabled={props.addSelectedDisabled}
onClick={props.onAddSelected}
aria-label={__('Add selected')}
>
<i className="fas fa-fw fa-angle-right" />
</button>
</div>
<div className="pf-c-dual-list-selector__controls-item">
<button
className="pf-c-button pf-m-plain"
type="button"
disabled={props.addAllDisabled}
onClick={props.onAddAll}
aria-label={__('Add all')}
>
<i className="fas fa-fw fa-angle-double-right" />
</button>
</div>
<div className="pf-c-dual-list-selector__controls-item">
<button
className="pf-c-button pf-m-plain"
type="button"
disabled={props.removeAllDisabled}
onClick={props.onRemoveAll}
aria-label={__('Remove all')}
>
<i className="fas fa-fw fa-angle-double-left" />
</button>
</div>
<div className="pf-c-dual-list-selector__controls-item">
<button
className="pf-c-button pf-m-plain"
type="button"
disabled={props.removeSelectedDisabled}
onClick={props.onRemoveSelected}
aria-label={__('Remove selected')}
>
<i className="fas fa-fw fa-angle-left" />
</button>
</div>
</div>
);
ListControls.propTypes = {
addSelectedDisabled: PropTypes.bool.isRequired,
onAddSelected: PropTypes.func.isRequired,
addAllDisabled: PropTypes.bool.isRequired,
onAddAll: PropTypes.func.isRequired,
removeAllDisabled: PropTypes.bool.isRequired,
onRemoveAll: PropTypes.func.isRequired,
removeSelectedDisabled: PropTypes.bool.isRequired,
onRemoveSelected: PropTypes.func.isRequired,
};
export default ListControls;