mirror of
https://github.com/ansible/awx.git
synced 2026-05-13 04:17:36 -02:30
Remove clipboard copy button component
This commit is contained in:
@@ -1,90 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { Button, Tooltip } from '@patternfly/react-core';
|
|
||||||
import { CopyIcon } from '@patternfly/react-icons';
|
|
||||||
|
|
||||||
export const clipboardCopyFunc = (event, text) => {
|
|
||||||
const clipboard = event.currentTarget.parentElement;
|
|
||||||
const el = document.createElement('input');
|
|
||||||
el.value = text;
|
|
||||||
clipboard.appendChild(el);
|
|
||||||
el.select();
|
|
||||||
document.execCommand('copy');
|
|
||||||
clipboard.removeChild(el);
|
|
||||||
};
|
|
||||||
|
|
||||||
class ClipboardCopyButton extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
copied: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
this.handleCopyClick = this.handleCopyClick.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleCopyClick = event => {
|
|
||||||
const { stringToCopy, switchDelay } = this.props;
|
|
||||||
if (this.timer) {
|
|
||||||
window.clearTimeout(this.timer);
|
|
||||||
this.setState({ copied: false });
|
|
||||||
}
|
|
||||||
clipboardCopyFunc(event, stringToCopy);
|
|
||||||
this.setState({ copied: true }, () => {
|
|
||||||
this.timer = window.setTimeout(() => {
|
|
||||||
this.setState({ copied: false });
|
|
||||||
this.timer = null;
|
|
||||||
}, switchDelay);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
copyTip,
|
|
||||||
entryDelay,
|
|
||||||
exitDelay,
|
|
||||||
copiedSuccessTip,
|
|
||||||
isDisabled,
|
|
||||||
ouiaId,
|
|
||||||
} = this.props;
|
|
||||||
const { copied } = this.state;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Tooltip
|
|
||||||
entryDelay={entryDelay}
|
|
||||||
exitDelay={exitDelay}
|
|
||||||
trigger="mouseenter focus click"
|
|
||||||
content={copied ? copiedSuccessTip : copyTip}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
ouiaId={ouiaId}
|
|
||||||
isDisabled={isDisabled}
|
|
||||||
variant="plain"
|
|
||||||
onClick={this.handleCopyClick}
|
|
||||||
aria-label={copyTip}
|
|
||||||
>
|
|
||||||
<CopyIcon />
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ClipboardCopyButton.propTypes = {
|
|
||||||
copyTip: PropTypes.string.isRequired,
|
|
||||||
entryDelay: PropTypes.number,
|
|
||||||
exitDelay: PropTypes.number,
|
|
||||||
copiedSuccessTip: PropTypes.string.isRequired,
|
|
||||||
stringToCopy: PropTypes.string.isRequired,
|
|
||||||
switchDelay: PropTypes.number,
|
|
||||||
isDisabled: PropTypes.bool.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
ClipboardCopyButton.defaultProps = {
|
|
||||||
entryDelay: 100,
|
|
||||||
exitDelay: 1600,
|
|
||||||
switchDelay: 2000,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ClipboardCopyButton;
|
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
|
|
||||||
import ClipboardCopyButton from './ClipboardCopyButton';
|
|
||||||
|
|
||||||
describe('ClipboardCopyButton', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
document.execCommand = jest.fn();
|
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(() => {
|
|
||||||
jest.clearAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('renders the expected content', () => {
|
|
||||||
const wrapper = mountWithContexts(
|
|
||||||
<ClipboardCopyButton
|
|
||||||
clickTip="foo"
|
|
||||||
hoverTip="bar"
|
|
||||||
copyTip="baz"
|
|
||||||
copiedSuccessTip="qux"
|
|
||||||
stringToCopy="foobar!"
|
|
||||||
isDisabled={false}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
expect(wrapper).toHaveLength(1);
|
|
||||||
});
|
|
||||||
test('clicking button calls execCommand to copy to clipboard', async () => {
|
|
||||||
const mockDelay = 1;
|
|
||||||
const wrapper = mountWithContexts(
|
|
||||||
<ClipboardCopyButton
|
|
||||||
clickTip="foo"
|
|
||||||
hoverTip="bar"
|
|
||||||
copyTip="baz"
|
|
||||||
copiedSuccessTip="qux"
|
|
||||||
stringToCopy="foobar!"
|
|
||||||
isDisabled={false}
|
|
||||||
switchDelay={mockDelay}
|
|
||||||
/>
|
|
||||||
).find('ClipboardCopyButton');
|
|
||||||
expect(wrapper.state('copied')).toBe(false);
|
|
||||||
wrapper.find('Button').simulate('click');
|
|
||||||
expect(document.execCommand).toBeCalledWith('copy');
|
|
||||||
expect(wrapper.state('copied')).toBe(true);
|
|
||||||
await new Promise(resolve => setTimeout(resolve, mockDelay));
|
|
||||||
wrapper.update();
|
|
||||||
expect(wrapper.state('copied')).toBe(false);
|
|
||||||
});
|
|
||||||
test('should render disabled button', () => {
|
|
||||||
const wrapper = mountWithContexts(
|
|
||||||
<ClipboardCopyButton
|
|
||||||
clickTip="foo"
|
|
||||||
hoverTip="bar"
|
|
||||||
copyTip="baz"
|
|
||||||
copiedSuccessTip="qux"
|
|
||||||
stringToCopy="foobar!"
|
|
||||||
isDisabled
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
expect(wrapper.find('Button').prop('isDisabled')).toBe(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default } from './ClipboardCopyButton';
|
|
||||||
Reference in New Issue
Block a user