open-consul/ui-v2/app/components/copy-button.js
John Cowen e4e209b748
ui: Implements a testable clipboard {{copy-button}} (#5967)
1. Remove ember-cli-clipboard dependency
2. Provide a new copy-button component implementing the same
interface as ^ but make the clipboard functionality injectable
3. Provide 2 implementations of a Clipboard. One using clipboard.js (as
previously) and an additional local storage 'clipboard'.
4. add a BDD step to assert whats in the clipboard (the fake one)

Main reason here is that `document.exec` must be called by a user
interaction
2019-06-21 11:42:40 +01:00

40 lines
1 KiB
JavaScript

import Component from '@ember/component';
import { get } from '@ember/object';
import { inject as service } from '@ember/service';
import WithListeners from 'consul-ui/mixins/with-listeners';
export default Component.extend(WithListeners, {
clipboard: service('clipboard/os'),
tagName: 'button',
classNames: ['copy-btn'],
buttonType: 'button',
disabled: false,
error: function() {},
success: function() {},
attributeBindings: [
'clipboardText:data-clipboard-text',
'clipboardTarget:data-clipboard-target',
'clipboardAction:data-clipboard-action',
'buttonType:type',
'disabled',
'aria-label',
'title',
],
delegateClickEvent: true,
didInsertElement: function() {
this._super(...arguments);
const clipboard = get(this, 'clipboard').execute(
this.delegateClickEvent ? `#${this.elementId}` : this.element
);
['success', 'error'].map(event => {
return this.listen(clipboard, event, () => {
if (!this.disabled) {
this[event](...arguments);
}
});
});
},
});