valitydev/checkout
14
0
Fork 0
mirror of https://github.com/valitydev/checkout.git synced 2024-11-06 02:25:18 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Changed copy to clipboard method (#142)

Browse Source
This commit is contained in:
Ildar Galeev 2022-09-09 18:55:22 +03:00 committed by GitHub
parent 7546902c57
commit 31f22effb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/components/app/modal-container/modal/form-container/qr-code-interaction-form/qr-code-interaction-form.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { useEffect } from 'react';
import { useEffect, useRef } from 'react';
import styled from 'checkout/styled-components';
import { useAppDispatch, useAppSelector } from 'checkout/configure-store';
@ -23,6 +23,7 @@ const Container = styled.div`
`;
export const QrCodeInteractionForm: React.FC = () => {
const qrCodeInputRef = useRef(null);
const locale = useAppSelector(getLocaleSelector);
const { request } = useAppSelector<QrCodeInteractionFormInfo>(getActiveModalFormSelector);
const dispatch = useAppDispatch();
@ -31,10 +32,15 @@ export const QrCodeInteractionForm: React.FC = () => {
dispatch(finishInteraction());
}, []);
const copyToClipboard = () => {
qrCodeInputRef.current.select();
document.execCommand('copy');
};
return (
<Container>
<Input defaultValue={request.qrCode} readOnly={true}></Input>
<CopyToClipboardButton data={request.qrCode} />
<Input id="qr-code-input" inputRef={qrCodeInputRef} defaultValue={request.qrCode} readOnly={true}></Input>
<CopyToClipboardButton onClick={() => copyToClipboard()} />
<Hr />
<Instruction>{locale['form.qr.code']}</Instruction>
<QRCode text={request.qrCode} />

15
src/app/components/ui/copy-to-clipboard-button/copy-to-clipboard-button.tsx
View File

@ -5,7 +5,10 @@ import { useAppSelector } from 'checkout/configure-store';
import { getLocaleSelector } from 'checkout/selectors';
import { Button } from '../button';
export const CopyToClipboardButton: React.FC<{ data: string; timeout?: number }> = ({ data, timeout = 3000 }) => {
export const CopyToClipboardButton: React.FC<{ onClick: () => void; timeout?: number }> = ({
timeout = 3000,
onClick
}) => {
const locale = useAppSelector(getLocaleSelector);
const [label, setLabel] = useState(locale['form.button.copy.label']);
@ -16,10 +19,14 @@ export const CopyToClipboardButton: React.FC<{ data: string; timeout?: number }>
return () => clearTimeout(timer);
}, [label]);
const copyToClipboard = (qrCode: string) => {
navigator.clipboard.writeText(qrCode);
const handleOnClick = () => {
onClick();
setLabel(locale['form.button.copied.label']);
};
return <Button onClick={() => copyToClipboard(data)}>{label}</Button>;
return (
<Button id="copy-to-clipboard-btn" onClick={() => handleOnClick()}>
{label}
</Button>
);
};

6
src/app/components/ui/input/input.tsx
View File

@ -2,6 +2,7 @@ import * as React from 'react';
import { Marks } from './marks';
import { default as styled, css } from 'checkout/styled-components';
import { MutableRefObject } from 'react';
const CONTENT_OFFSET = 15;
const TEXT_ICON_OFFSET = 8;
@ -90,14 +91,15 @@ export interface CustomProps {
error?: any;
active?: boolean;
pristine?: boolean;
inputRef?: MutableRefObject<HTMLInputElement>;
}
type InputProps = Omit<JSX.IntrinsicElements['input'], 'ref'> & CustomProps;
export const Input: React.FC<InputProps> = ({ className, error, mark, active, pristine, icon, ...props }) => (
export const Input: React.FC<InputProps> = ({ className, error, mark, active, pristine, icon, inputRef, ...props }) => (
<InputWrapper {...{ className, error, mark }}>
{icon && <Icon>{icon}</Icon>}
<StyledInput {...props} hasIcon={!!icon} />
<StyledInput {...props} hasIcon={!!icon} ref={inputRef} />
{!!mark && <Marks {...{ active, pristine, error }} />}
</InputWrapper>
);