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
Added Copy to Clipboard component #932
Merged
Merged
Changes from all commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
68c3f3f
Added Copy to Clipboard component
ann-marie-ward ff95d17
Merge branch 'dev' of https://github.com/plotly/dash-core-components …
ann-marie-ward 46063ff
update package-lock.json
ann-marie-ward 4d6cc08
addressed initial review comments including adding text and n_click p…
ann-marie-ward 9aea0e7
updated clipboard component and added tests
ann-marie-ward c21bdc7
lint and fix tests
ann-marie-ward 393cd62
added loading_state
ann-marie-ward 89ecb2a
cleanup
ann-marie-ward 3c8b961
Merge branch 'dev' of https://github.com/plotly/dash-core-components …
ann-marie-ward fd04b13
update CHANGELOG.md
ann-marie-ward 248e994
update package-lock.json
ann-marie-ward 2697a70
fixed tests
ann-marie-ward 8c6f735
test cleanup
ann-marie-ward File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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, | ||
| ) |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what if you provide a bad
target_id?perhaps add something like
if (!target) { return ''; }immediately after thegetElementById?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Right - that handles the error, but it could be really hard to debug. Is there a way to display a message in the error box?
Another option - don't display the the copySuccess() animation. Do you think that would be enough of a hint to look for an invalid id?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, that's a good question - no, I don't know of a good way to expose this error to the dash devtools error box - it's happening in an event handler, and React does wrap these so it's possible there's a way we could access them from the renderer. Right now though we don't have a way to do that.
OK, so let's leave it as you have it now - that'll at least prevent
copySuccessand display the error in the js console, and later we can investigate whether there's some generic way to trap event handler errors.I suppose if you think
Uncaught TypeError: Cannot read property 'innerText' of nullis too removed from the issue of not having the right ID, we could also explicitly raise such an error:There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just belatedly passing through and noting this issue for exposing errors in Dash DevTools: plotly/dash#1088