This repository has been archived by the owner on Jun 3, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 144
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #932 from AnnMarieW/clipboard
Added Copy to Clipboard component
- Loading branch information
Showing
8 changed files
with
2,624 additions
and
1,202 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,186 @@ | ||
| import React, {Component} from 'react'; // eslint-disable-line no-unused-vars | ||
| import PropTypes from 'prop-types'; | ||
| import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; | ||
| import {faCopy, faCheckCircle} from '@fortawesome/free-regular-svg-icons'; | ||
|
|
||
| const clipboardAPI = navigator.clipboard; | ||
|
|
||
| function wait(ms) { | ||
| return new Promise(r => setTimeout(r, ms)); | ||
| } | ||
|
|
||
| /** | ||
| * The Clipboard component copies text to the clipboard | ||
| */ | ||
|
|
||
| export default class Clipboard extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.copyToClipboard = this.copyToClipboard.bind(this); | ||
| this.copySuccess = this.copySuccess.bind(this); | ||
| this.getTargetText = this.getTargetText.bind(this); | ||
| this.loading = this.loading.bind(this); | ||
| this.stringifyId = this.stringifyId.bind(this); | ||
| this.state = { | ||
| copied: false, | ||
| }; | ||
| } | ||
|
|
||
| // stringifies object ids used in pattern matching callbacks | ||
| stringifyId(id) { | ||
| if (typeof id !== 'object') { | ||
| return id; | ||
| } | ||
| const stringifyVal = v => (v && v.wild) || JSON.stringify(v); | ||
| const parts = Object.keys(id) | ||
| .sort() | ||
| .map(k => JSON.stringify(k) + ':' + stringifyVal(id[k])); | ||
| return '{' + parts.join(',') + '}'; | ||
| } | ||
|
|
||
| async copySuccess(text) { | ||
| const showCopiedIcon = 1000; | ||
| await clipboardAPI.writeText(text); | ||
| this.setState({copied: true}); | ||
| await wait(showCopiedIcon); | ||
| this.setState({copied: false}); | ||
| } | ||
|
|
||
| getTargetText() { | ||
| // get the inner text. If none, use the content of the value param | ||
| const id = this.stringifyId(this.props.target_id); | ||
| const target = document.getElementById(id); | ||
| if (!target) { | ||
| throw new Error( | ||
| 'Clipboard copy failed: no element found for target_id ' + | ||
| this.props.target_id | ||
| ); | ||
| } | ||
| let text = target.innerText; | ||
| if (!text) { | ||
| text = target.value; | ||
| text = text === undefined ? null : text; | ||
| } | ||
| return text; | ||
| } | ||
|
|
||
| async loading() { | ||
| while (this.props.loading_state?.is_loading) { | ||
| await wait(100); | ||
| } | ||
| } | ||
|
|
||
| async copyToClipboard() { | ||
| this.props.setProps({ | ||
| n_clicks: this.props.n_clicks + 1, | ||
| }); | ||
|
|
||
| let text; | ||
| if (this.props.target_id) { | ||
| text = this.getTargetText(); | ||
| } else { | ||
| await wait(100); // gives time for callback to start | ||
| await this.loading(); | ||
| text = this.props.text; | ||
| } | ||
| if (text) { | ||
| this.copySuccess(text); | ||
| } | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| if (!clipboardAPI) { | ||
| console.warn('Copy to clipboard not available with this browser'); // eslint-disable-line no-console | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| const {id, title, className, style, loading_state} = this.props; | ||
| const copyIcon = <FontAwesomeIcon icon={faCopy} />; | ||
| const copiedIcon = <FontAwesomeIcon icon={faCheckCircle} />; | ||
| const btnIcon = this.state.copied ? copiedIcon : copyIcon; | ||
|
|
||
| return clipboardAPI ? ( | ||
| <div | ||
| id={id} | ||
| title={title} | ||
| style={style} | ||
| className={className} | ||
| onClick={this.copyToClipboard} | ||
| data-dash-is-loading={ | ||
| (loading_state && loading_state.is_loading) || undefined | ||
| } | ||
| > | ||
| <i> {btnIcon}</i> | ||
| </div> | ||
| ) : null; | ||
| } | ||
| } | ||
|
|
||
| Clipboard.defaultProps = { | ||
| text: null, | ||
| target_id: null, | ||
| n_clicks: 0, | ||
| }; | ||
|
|
||
| Clipboard.propTypes = { | ||
| /** | ||
| * The ID used to identify this component. | ||
| */ | ||
| id: PropTypes.string, | ||
|
|
||
| /** | ||
| * The id of target component containing text to copy to the clipboard. | ||
| * The inner text of the `children` prop will be copied to the clipboard. If none, then the text from the | ||
| * `value` prop will be copied. | ||
| */ | ||
| target_id: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), | ||
|
|
||
| /** | ||
| * The text to be copied to the clipboard if the `target_id` is None. | ||
| */ | ||
| text: PropTypes.string, | ||
|
|
||
| /** | ||
| * The number of times copy button was clicked | ||
| */ | ||
| n_clicks: PropTypes.number, | ||
|
|
||
| /** | ||
| * The text shown as a tooltip when hovering over the copy icon. | ||
| */ | ||
| title: PropTypes.string, | ||
|
|
||
| /** | ||
| * The icon's styles | ||
| */ | ||
| style: PropTypes.object, | ||
|
|
||
| /** | ||
| * The class name of the icon element | ||
| */ | ||
| className: PropTypes.string, | ||
|
|
||
| /** | ||
| * Object that holds the loading state object coming from dash-renderer | ||
| */ | ||
| loading_state: PropTypes.shape({ | ||
| /** | ||
| * Determines if the component is loading or not | ||
| */ | ||
| is_loading: PropTypes.bool, | ||
| /** | ||
| * Holds which property is loading | ||
| */ | ||
| prop_name: PropTypes.string, | ||
| /** | ||
| * Holds the name of the component that is loading | ||
| */ | ||
| component_name: PropTypes.string, | ||
| }), | ||
|
|
||
| /** | ||
| * Dash-assigned callback that gets fired when the value changes. | ||
| */ | ||
| setProps: PropTypes.func, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import dash | ||
| import dash_core_components as dcc | ||
| import dash_html_components as html | ||
| import dash.testing.wait as wait | ||
| import time | ||
|
|
||
|
|
||
| from selenium.webdriver.common.action_chains import ActionChains | ||
| from selenium.webdriver.common.keys import Keys | ||
|
|
||
|
|
||
| def test_clp001_clipboard_text(dash_dcc_headed): | ||
| copy_text = "Hello, Dash!" | ||
| app = dash.Dash(__name__, prevent_initial_callbacks=True) | ||
| app.layout = html.Div( | ||
| [ | ||
| html.Div(copy_text, id="copy"), | ||
| dcc.Clipboard(id="copy_icon", target_id="copy"), | ||
| dcc.Textarea(id="paste"), | ||
| ] | ||
| ) | ||
| dash_dcc_headed.start_server(app) | ||
|
|
||
| dash_dcc_headed.find_element("#copy_icon").click() | ||
| # time.sleep(2) | ||
| dash_dcc_headed.find_element("#paste").click() | ||
| ActionChains(dash_dcc_headed.driver).key_down(Keys.CONTROL).send_keys("v").key_up( | ||
| Keys.CONTROL | ||
| ).perform() | ||
|
|
||
| wait.until( | ||
| lambda: dash_dcc_headed.find_element("#paste").get_attribute("value") | ||
| == copy_text, | ||
| timeout=3, | ||
| ) | ||
|
|
||
|
|
||
| def test_clp002_clipboard_text(dash_dcc_headed): | ||
| copy_text = "Copy this text to the clipboard" | ||
| app = dash.Dash(__name__, prevent_initial_callbacks=True) | ||
| app.layout = html.Div( | ||
| [dcc.Clipboard(id="copy_icon", text=copy_text), dcc.Textarea(id="paste")] | ||
| ) | ||
| dash_dcc_headed.start_server(app) | ||
|
|
||
| dash_dcc_headed.find_element("#copy_icon").click() | ||
| time.sleep(1) | ||
| dash_dcc_headed.find_element("#paste").click() | ||
| ActionChains(dash_dcc_headed.driver).key_down(Keys.CONTROL).send_keys("v").key_up( | ||
| Keys.CONTROL | ||
| ).perform() | ||
|
|
||
| wait.until( | ||
| lambda: dash_dcc_headed.find_element("#paste").get_attribute("value") | ||
| == copy_text, | ||
| timeout=3, | ||
| ) |