mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-11 07:55:47 +01:00
use textarea instead of input for repository description
This commit is contained in:
54
scm-ui/src/components/forms/Textarea.js
Normal file
54
scm-ui/src/components/forms/Textarea.js
Normal 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;
|
||||||
@@ -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 : ""}
|
||||||
|
|||||||
Reference in New Issue
Block a user