IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana-UI: Add docs for ClipboardButton (#27451)

Browse Source
This commit is contained in:
Alex Khomenko 2020-09-08 19:18:13 +03:00 committed by GitHub
parent 248c195cca
commit b2fe359a5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.mdx Normal file
View File

@ -0,0 +1,21 @@
import { Meta, Props } from '@storybook/addon-docs/blocks';
import { ClipboardButton } from './ClipboardButton';
<Meta title="MDX|ClipboardButton" component={ClipboardButton} />
# ClipboardButton
A wrapper for [clipboard.js](https://github.com/zenorocha/clipboard.js) library that allows copying text to clipboard. The text to be copied should be provided via `getText` prop.
# Usage
```jsx
<ClipboardButton
variant="secondary"
getText={() => 'Text to be copied'}
onClipboardCopy={() => console.log('text copied')}
>
Copy to clipboard
</ClipboardButton>
````
<Props of={ClipboardButton}/>

9
packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx
View File

@ -1,9 +1,9 @@
import React, { useState } from 'react';
import { text } from '@storybook/addon-knobs';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { ClipboardButton } from './ClipboardButton';
import { Input } from '../Forms/Legacy/Input/Input';
import { text } from '@storybook/addon-knobs';
import mdx from './ClipboardButton.mdx';
const getKnobs = () => {
return {
@ -38,6 +38,11 @@ export default {
title: 'Buttons/ClipboardButton',
component: ClipboardButton,
decorators: [withCenteredStory],
parameters: {
docs: {
page: mdx,
},
},
};
export const copyToClipboard = () => <Wrapper />;

11
packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx
View File

@ -2,17 +2,18 @@ import React, { PureComponent } from 'react';
import Clipboard from 'clipboard';
import { Button, ButtonProps } from '../Button';
interface Props extends ButtonProps {
export interface Props extends ButtonProps {
/** A function that returns text to be copied */
getText(): string;
/** Callback when the text has been successfully copied */
onClipboardCopy?(e: Clipboard.Event): void;
/** Callback when there was an error copying the text */
onClipboardError?(e: Clipboard.Event): void;
}
export class ClipboardButton extends PureComponent<Props> {
// @ts-ignore
private clipboard: Clipboard;
// @ts-ignore
private elem: HTMLButtonElement;
private clipboard!: Clipboard;
private elem!: HTMLButtonElement;
setRef = (elem: HTMLButtonElement) => {
this.elem = elem;