added copy text tool to workflow defenition info (#3043)

Co-authored-by: Ivan Hrynevytskyi <ivan.hrynevytskyi@IHRYNEVYTSKYIL.local>
This commit is contained in:
Ivan Hrynevytskyi (FE-underwriting) 2022-05-19 14:04:00 +03:00 committed by GitHub
parent 9d4267aa7f
commit 44b4ea0027
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 57 additions and 7 deletions

View file

@ -162,7 +162,7 @@ export namespace Components {
}
interface ElsaTooltip {
"tooltipContent": any;
"tooltipPosition": string;
"tooltipPosition"?: string;
}
interface ElsaWorkflowDefinitionBrowser {
"hide": () => Promise<void>;

View file

@ -1,4 +1,5 @@
import {FunctionalComponent, h} from "@stencil/core";
import { FunctionalComponent, h } from '@stencil/core';
import { copyTextToClipboard } from '../../../utils';
export interface InfoListProps {
title: string;
@ -11,17 +12,33 @@ export const InfoList: FunctionalComponent<InfoListProps> = ({title, dictionary}
<div class="max-w-4xl mx-auto">
<div>
<div>
<h3 class="text-lg leading-6 font-medium text-gray-900">
{title}
</h3>
<h3 class="text-lg leading-6 font-medium text-gray-900">{title}</h3>
</div>
<div class="mt-5 border-t border-gray-200">
<dl class="sm:divide-y sm:divide-gray-200">
{Object.entries(dictionary).map(([k, v]) => (
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4">
<dt class="text-sm font-medium text-gray-500">{k}</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{v}</dd>
</div>))}
<dd class="flex justify-between items-center mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
{v}
<svg
onClick={() => copyTextToClipboard(v as string)}
class="cursor-pointer inline-block ml-2 h-6 w-6 text-blue-500"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" /> <rect x="8" y="8" width="12" height="12" rx="2" />
<path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />
</svg>
</dd>
</div>
))}
</dl>
</div>
</div>

View file

@ -0,0 +1,32 @@
function fallbackCopyTextToClipboard(text: string) {
const textArea = document.createElement('textarea');
textArea.value = text;
textArea.style.top = '0';
textArea.style.left = '0';
textArea.style.position = 'fixed';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand('copy');
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
}
export function copyTextToClipboard(text: string) {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text).catch(function (err) {
console.error('Async: Could not copy text: ', err);
});
}

View file

@ -1,3 +1,4 @@
export * from './download';
export * from './select-list-items';
export * from './utils';
export * from './copy';