hashicorp-copywrite[bot]andCameron Perera
3d610427d0
* [COMPLIANCE] Add Copyright and License Headers * chore: 🤖 update Copyright headers to satisfy our lint rules --------- Co-authored-by: hashicorp-copywrite[bot] <110428419+hashicorp-copywrite[bot]@users.noreply.github.com> Co-authored-by: Cameron Perera <cameron.perera@hashicorp.com>
89 lines
2.5 KiB
JavaScript
89 lines
2.5 KiB
JavaScript
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: MPL-2.0
|
|
*/
|
|
|
|
import Component from '@glimmer/component';
|
|
import ClipboardJS from 'clipboard';
|
|
import { action } from '@ember/object';
|
|
import { getOwner } from '@ember/application';
|
|
import { generateComponentID } from 'rose/utilities/component-auto-id';
|
|
import { tracked } from '@glimmer/tracking';
|
|
import { later } from '@ember/runloop';
|
|
|
|
export default class CopyableComponent extends Component {
|
|
// =attributes
|
|
|
|
id = generateComponentID();
|
|
copyableButtonId = `copyable-button-${this.id}`;
|
|
|
|
actionIcon = 'flight-icons/svg/clipboard-copy-16';
|
|
successIcon = 'flight-icons/svg/clipboard-checked-16';
|
|
actionText = this.args.buttonText;
|
|
successText = this.args.acknowledgeText;
|
|
|
|
@tracked copied = false;
|
|
|
|
clipboard = null;
|
|
|
|
confirmCopy() {
|
|
this.copied = true;
|
|
later(() => (this.copied = false), 1000);
|
|
}
|
|
|
|
/**
|
|
* Checks for ClipboardJS support.
|
|
* @return {boolean}
|
|
*/
|
|
get isClipboardLibrarySupported() {
|
|
return ClipboardJS.isSupported();
|
|
}
|
|
|
|
// =methods
|
|
|
|
/**
|
|
* Returns the first element with the specified class name if exists,
|
|
* otherwise undefined.
|
|
* @return {?HTMLElement}
|
|
*/
|
|
getFirstElementByClassName(className) {
|
|
const document = getOwner(this).lookup('service:-document').documentElement;
|
|
return document.getElementsByClassName(className)[0];
|
|
}
|
|
|
|
// =actions
|
|
|
|
/**
|
|
* Initialize ClipboardJS library and register for it's events.
|
|
*/
|
|
@action
|
|
register() {
|
|
this.tearDown();
|
|
/* istanbul ignore next */
|
|
this.clipboard = new ClipboardJS(`#${this.copyableButtonId}`, {
|
|
text: () => this.args.text,
|
|
// ClipboardJS depends on inserting a hidden textarea that receives
|
|
// focus in order to copy text to the clipboard. However, our modal
|
|
// has a focus trap that prevents this focus. Thus we try to set the
|
|
// container to a modal (if exists), since this is the only container
|
|
// a user would be able to interact with. If a modal doesn't exist,
|
|
// container is set to `undefined` and thus uses the default body element.
|
|
container: this.getFirstElementByClassName('rose-dialog'),
|
|
});
|
|
/* istanbul ignore next */
|
|
this.clipboard.on('success', (clipboardEvent) => {
|
|
clipboardEvent.clearSelection();
|
|
this.confirmCopy();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Destroy ClipboardJS library instance and cancel icon timer.
|
|
*/
|
|
@action
|
|
tearDown() {
|
|
this.clipboard?.destroy();
|
|
this.clipboard = null;
|
|
}
|
|
}
|