44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
// Copyright 2019 @polkadot/extension-ui authors & contributors
|
|
// This software may be modified and distributed under the terms
|
|
// of the Apache-2.0 license. See the LICENSE file for details.
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
import { Input } from '../components';
|
|
|
|
type Props = {
|
|
defaultValue?: string | null,
|
|
isFocussed?: boolean,
|
|
label?: string | null,
|
|
onBlur?: () => void,
|
|
onChange: (name: string | null) => void,
|
|
value?: string
|
|
};
|
|
|
|
const MIN_LENGTH = 3;
|
|
|
|
export default function Name ({ defaultValue, isFocussed, label = 'a descriptive name for this account', onBlur, onChange, value }: Props) {
|
|
const [name, setName] = useState(defaultValue || '');
|
|
|
|
useEffect(() => {
|
|
onChange(
|
|
(name.length >= MIN_LENGTH)
|
|
? name
|
|
: null
|
|
);
|
|
}, [name]);
|
|
|
|
return (
|
|
<Input
|
|
defaultValue={defaultValue}
|
|
isError={name.length < MIN_LENGTH}
|
|
isFocussed={isFocussed}
|
|
label={label}
|
|
onBlur={onBlur}
|
|
onChange={setName}
|
|
type='text'
|
|
value={value}
|
|
/>
|
|
);
|
|
}
|