use textarea instead of input for repository description

This commit is contained in:
Sebastian Sdorra
2018-08-02 16:18:34 +02:00
parent 9b62d19df5
commit f2f806cf1d
2 changed files with 56 additions and 1 deletions

View File

@@ -0,0 +1,54 @@
//@flow
import React from "react";
export type SelectItem = {
value: string,
label: string
};
type Props = {
label?: string,
placeholder?: SelectItem[],
value?: string,
onChange: string => void
};
class Textarea extends React.Component<Props> {
field: ?HTMLTextAreaElement;
handleInput = (event: SyntheticInputEvent<HTMLTextAreaElement>) => {
this.props.onChange(event.target.value);
};
renderLabel = () => {
const label = this.props.label;
if (label) {
return <label className="label">{label}</label>;
}
return "";
};
render() {
const { placeholder, value } = this.props;
return (
<div className="field">
{this.renderLabel()}
<div className="control">
<textarea
className="textarea"
ref={input => {
this.field = input;
}}
placeholder={placeholder}
onChange={this.handleInput}
>
{value}
</textarea>
</div>
</div>
);
}
}
export default Textarea;

View File

@@ -6,6 +6,7 @@ import { SubmitButton } from "../../components/buttons";
import type { Repository } from "../types/Repositories"; import type { Repository } from "../types/Repositories";
import * as validator from "./repositoryValidation"; import * as validator from "./repositoryValidation";
import type { RepositoryType } from "../types/RepositoryTypes"; import type { RepositoryType } from "../types/RepositoryTypes";
import Textarea from "../../components/forms/Textarea";
type Props = { type Props = {
submitForm: Repository => void, submitForm: Repository => void,
@@ -89,7 +90,7 @@ class RepositoryForm extends React.Component<Props, State> {
errorMessage={t("validation.contact-invalid")} errorMessage={t("validation.contact-invalid")}
/> />
<InputField <Textarea
label={t("repository.description")} label={t("repository.description")}
onChange={this.handleDescriptionChange} onChange={this.handleDescriptionChange}
value={repository ? repository.description : ""} value={repository ? repository.description : ""}