You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
// Copyright (C) 2022 CVAT.ai Corporation
|
|
//
|
|
// SPDX-License-Identifier: MIT
|
|
import React, { useState } from 'react';
|
|
import Icon from '@ant-design/icons';
|
|
import Text from 'antd/lib/typography/Text';
|
|
import { ClearIcon } from 'icons';
|
|
import { Input } from 'antd';
|
|
|
|
interface SocialAccountLinkProps {
|
|
id?: string;
|
|
prefix: string;
|
|
autoComplete?: string;
|
|
placeholder: string;
|
|
value?: string;
|
|
onReset: () => void;
|
|
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
}
|
|
|
|
function CVATSigningInput(props: SocialAccountLinkProps): JSX.Element {
|
|
const {
|
|
id, prefix, autoComplete, onReset, placeholder, value, onChange,
|
|
} = props;
|
|
const [valueNonEmpty, setValueNonEmpty] = useState(false);
|
|
return (
|
|
<Input
|
|
value={value}
|
|
autoComplete={autoComplete}
|
|
placeholder={placeholder}
|
|
prefix={<Text>{prefix}</Text>}
|
|
id={id}
|
|
suffix={(
|
|
valueNonEmpty ? (
|
|
<Icon
|
|
component={ClearIcon}
|
|
onClick={() => {
|
|
setValueNonEmpty(false);
|
|
onReset();
|
|
}}
|
|
/>
|
|
) : null
|
|
)}
|
|
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { value: inputValue } = event.target;
|
|
setValueNonEmpty(!!inputValue);
|
|
if (onChange) onChange(event);
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default React.memo(CVATSigningInput);
|