All files / blong-browser/src/widgets TextWidget.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import {InputText} from '../primereact/index.js';

import type {IWidgetProps} from '@feasibleone/blong';
import {Button} from '../components/Button/Button.js';

export function TextWidget({
    id,
    name,
    schema,
    value,
    onChange,
    onBlur,
    error,
    readOnly,
    disabled,
}: IWidgetProps) {
    const strValue = value == null ? '' : String(value);
    const {copy} = schema.widget ?? {};

    const copyToClipboard = () => void navigator.clipboard.writeText(strValue);

    return (
        <span className="blong-input-wrapper w-full">
            <InputText
                id={id ?? name}
                name={name}
                value={strValue}
                onChange={e => onChange(e.target.value || null)}
                onBlur={onBlur}
                readOnly={readOnly}
                disabled={disabled}
                className={`blong-input w-full ${error ? 'p-invalid' : ''}`}
                maxLength={schema.maxLength}
            />
            {copy && strValue && (
                <Button
                    icon="pi pi-copy"
                    className="p-button-text p-button-sm blong-input-copy"
                    onClick={copyToClipboard}
                    type="button"
                    tooltip="Copy"
                />
            )}
        </span>
    );
}