cloud_bbb/ts/Manager/SubmitInput.tsx

49 lines
1.1 KiB
TypeScript
Raw Normal View History

2020-04-26 11:36:41 +02:00
import * as React from 'react';
import {
Component, InputHTMLAttributes,
2020-04-26 22:41:06 +02:00
SyntheticEvent,
2020-04-26 11:36:41 +02:00
} from 'react';
export interface SubmitInputProps extends InputHTMLAttributes<HTMLInputElement> {
type?: 'text' | 'number';
initialValue?: string;
2020-06-04 14:01:31 +02:00
name: string;
2020-04-26 11:36:41 +02:00
onSubmitValue: (value: string) => void;
2020-06-04 14:01:31 +02:00
focus?: boolean;
2020-04-26 11:36:41 +02:00
}
export interface SubmitInputState {
value: string;
}
export class SubmitInput extends Component<SubmitInputProps, SubmitInputState> {
state: SubmitInputState = {
2020-04-26 22:41:06 +02:00
value: '',
2020-04-26 11:36:41 +02:00
};
constructor(props: SubmitInputProps) {
super(props);
2020-06-04 14:01:31 +02:00
this.state.value = props.initialValue ?? '';
2020-04-26 11:36:41 +02:00
}
onSubmit = (event: SyntheticEvent<any>) => {
event.preventDefault();
this.props.onSubmitValue(this.state.value);
};
render() {
return <form onSubmit={this.onSubmit}>
<input value={this.state.value}
2020-05-23 11:12:17 +02:00
type={this.props.type}
2020-06-04 14:01:31 +02:00
id={`bbb-${this.props.name}`}
name={this.props.name}
onChange={event => this.setState({value: event.currentTarget.value})}
onBlur={() => this.props.onSubmitValue(this.state.value)}
autoFocus={this.props.focus}
min={this.props.min}
max={this.props.max}
2020-06-04 14:01:31 +02:00
/>
2020-04-26 11:36:41 +02:00
</form>;
}
}