Class to functional component example 2 (#24183)

* Class to functional component example 2

* Fix tests
This commit is contained in:
Daniel Espino García 2023-08-14 14:20:47 +02:00 committed by GitHub
parent 1f525550a5
commit 5a349873f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 54 additions and 73 deletions

View File

@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import React, {useCallback} from 'react';
import {FormattedMessage} from 'react-intl';
import OverlayTrigger from 'components/overlay_trigger';
@ -12,48 +12,47 @@ import {copyToClipboard} from 'utils/utils';
type Props = {
value: string;
defaultMessage: string;
idMessage: string;
defaultMessage?: string;
idMessage?: string;
};
export default class CopyText extends React.PureComponent<Props> {
public static defaultProps = {
defaultMessage: 'Copy',
idMessage: 'integrations.copy',
};
private copyText = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void => {
const CopyText = ({
value,
defaultMessage = 'Copy',
idMessage = 'integrations.copy',
}: Props) => {
const copyText = useCallback((e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
e.preventDefault();
copyToClipboard(this.props.value);
};
copyToClipboard(value);
}, [value]);
public render() {
if (!document.queryCommandSupported('copy')) {
return null;
}
const tooltip = (
<Tooltip id='copy'>
<FormattedMessage
id={this.props.idMessage}
defaultMessage={this.props.defaultMessage}
/>
</Tooltip>
);
return (
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='top'
overlay={tooltip}
>
<a
href='#'
data-testid='copyText'
className='fa fa-copy ml-2'
onClick={this.copyText}
/>
</OverlayTrigger>
);
if (!document.queryCommandSupported('copy')) {
return null;
}
}
const tooltip = (
<Tooltip id='copy'>
<FormattedMessage
id={idMessage}
defaultMessage={defaultMessage}
/>
</Tooltip>
);
return (
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='top'
overlay={tooltip}
>
<a
href='#'
data-testid='copyText'
className='fa fa-copy ml-2'
onClick={copyText}
/>
</OverlayTrigger>
);
};
export default React.memo(CopyText);

View File

@ -79,9 +79,7 @@ exports[`components/integrations/InstalledCommand should call onDelete function
}
}
/>
<CopyText
defaultMessage="Copy"
idMessage="integrations.copy"
<Memo(CopyText)
value="testToken"
/>
</span>
@ -187,9 +185,7 @@ exports[`components/integrations/InstalledCommand should call onRegenToken funct
}
}
/>
<CopyText
defaultMessage="Copy"
idMessage="integrations.copy"
<Memo(CopyText)
value="testToken"
/>
</span>
@ -265,9 +261,7 @@ exports[`components/integrations/InstalledCommand should match snapshot 1`] = `
}
}
/>
<CopyText
defaultMessage="Copy"
idMessage="integrations.copy"
<Memo(CopyText)
value="testToken"
/>
</span>
@ -341,9 +335,7 @@ exports[`components/integrations/InstalledCommand should match snapshot, not aut
}
}
/>
<CopyText
defaultMessage="Copy"
idMessage="integrations.copy"
<Memo(CopyText)
value="testToken"
/>
</span>

View File

@ -63,9 +63,7 @@ exports[`components/integrations/InstalledIncomingWebhook should match snapshot
}
/>
<span>
<CopyText
defaultMessage="Copy"
idMessage="integrations.copy"
<Memo(CopyText)
value="http://localhost:8065/hooks/9w96t4nhbfdiij64wfqors4i1r"
/>
</span>

View File

@ -132,9 +132,7 @@ exports[`components/integrations/InstalledOutgoingWebhook should match snapshot
}
}
/>
<CopyText
defaultMessage="Copy"
idMessage="integrations.copy"
<Memo(CopyText)
value="xoxz1z7c3tgi9xhrfudn638q9r"
/>
</span>

View File

@ -55,9 +55,7 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, comma
}
}
/>
<CopyText
defaultMessage="Copy"
idMessage="integrations.copy"
<Memo(CopyText)
value="jb6oyqh95irpbx8fo9zmndkp1r"
/>
</p>
@ -133,9 +131,7 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, incom
}
}
/>
<CopyText
defaultMessage="Copy"
idMessage="integrations.copy"
<Memo(CopyText)
value="http://localhost:8065/hooks/r5tpgt4iepf45jt768jz84djic"
/>
</p>
@ -213,7 +209,7 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, oauth
}
}
/>
<CopyText
<Memo(CopyText)
defaultMessage="Copy Client Id"
idMessage="integrations.copy_client_id"
value="r5tpgt4iepf45jt768jz84djic"
@ -228,7 +224,7 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, oauth
}
}
/>
<CopyText
<Memo(CopyText)
defaultMessage="Copy Client Secret"
idMessage="integrations.copy_client_secret"
value="<==secret==>"
@ -329,9 +325,7 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, outgo
}
}
/>
<CopyText
defaultMessage="Copy"
idMessage="integrations.copy"
<Memo(CopyText)
value="jb6oyqh95irpbx8fo9zmndkp1r"
/>
</p>

View File

@ -111,7 +111,7 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot 1`] = `
}
}
/>
<CopyText
<Memo(CopyText)
defaultMessage="Copy Client Id"
idMessage="integrations.copy_client_id"
value="facxd9wpzpbpfp8pad78xj75pr"
@ -339,7 +339,7 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, on err
}
}
/>
<CopyText
<Memo(CopyText)
defaultMessage="Copy Client Id"
idMessage="integrations.copy_client_id"
value="facxd9wpzpbpfp8pad78xj75pr"
@ -514,7 +514,7 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, when o
}
}
/>
<CopyText
<Memo(CopyText)
defaultMessage="Copy Client Id"
idMessage="integrations.copy_client_id"
value="facxd9wpzpbpfp8pad78xj75pr"