103 lines
2.5 KiB
JavaScript
103 lines
2.5 KiB
JavaScript
// Copyright 2017-2018 @polkadot/ui-app authors & contributors
|
|
// This software may be modified and distributed under the terms
|
|
// of the ISC license. See the LICENSE file for details.
|
|
// @flow
|
|
|
|
import type { BareProps } from './types';
|
|
|
|
import React from 'react';
|
|
import SUIInput from 'semantic-ui-react/dist/es/elements/Input';
|
|
|
|
import isUndefined from '@polkadot/util/is/undefined';
|
|
|
|
import Labelled from './Labelled';
|
|
|
|
type Input$Type = 'number' | 'password' | 'text';
|
|
|
|
type Props = BareProps & {
|
|
children?: React$Node,
|
|
defaultValue?: mixed,
|
|
icon?: React$Node,
|
|
isAction?: boolean,
|
|
isDisabled?: boolean,
|
|
isEditable?: boolean,
|
|
isError?: boolean,
|
|
isHidden?: boolean,
|
|
label?: React$Node,
|
|
max?: mixed,
|
|
min?: mixed,
|
|
onChange: (value: string) => void,
|
|
placeholder?: string,
|
|
type?: Input$Type,
|
|
value?: mixed,
|
|
withLabel?: boolean
|
|
};
|
|
|
|
type SUIEvent = {
|
|
// flowlint-next-line unclear-type:off
|
|
value: any
|
|
};
|
|
|
|
type State = {
|
|
name: string;
|
|
}
|
|
|
|
let counter = 0;
|
|
|
|
export default class Input extends React.PureComponent<Props, State> {
|
|
state: State = {
|
|
name: `in_${counter++}_at_${Date.now()}`
|
|
};
|
|
|
|
render (): React$Node {
|
|
const { children, className, defaultValue, icon, isEditable = false, isAction = false, isDisabled = false, isError = false, isHidden = false, label, max, min, placeholder, style, type = 'text', value, withLabel } = this.props;
|
|
const { name } = this.state;
|
|
|
|
return (
|
|
<Labelled
|
|
className={className}
|
|
label={label}
|
|
style={style}
|
|
withLabel={withLabel}
|
|
>
|
|
<SUIInput
|
|
action={isAction}
|
|
className={isEditable ? 'edit icon' : ''}
|
|
defaultValue={defaultValue}
|
|
disabled={isDisabled}
|
|
id={name}
|
|
iconPosition={
|
|
isUndefined(icon)
|
|
? void 0
|
|
: 'left'
|
|
}
|
|
error={isError}
|
|
hidden={isHidden}
|
|
max={max}
|
|
min={min}
|
|
name={name}
|
|
onChange={this.onChange}
|
|
placeholder={placeholder}
|
|
type={type}
|
|
value={value}
|
|
>
|
|
<input
|
|
autoComplete={
|
|
type === 'password'
|
|
? 'new-password'
|
|
: 'off'
|
|
}
|
|
/>
|
|
{isEditable ? <i className='edit icon' /> : null}
|
|
{icon}
|
|
{children}
|
|
</SUIInput>
|
|
</Labelled>
|
|
);
|
|
}
|
|
|
|
onChange = (event: SyntheticEvent<Element>, { value }: SUIEvent): void => {
|
|
this.props.onChange(value);
|
|
}
|
|
}
|