mirror of
https://github.com/ansible/awx.git
synced 2026-01-18 13:11:19 -03:30
Remove clipboard copy button component
This commit is contained in:
parent
66f140bb70
commit
7467779ea9
@ -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';
|
||||
Loading…
x
Reference in New Issue
Block a user