refactoring

This commit is contained in:
Maren Süwer
2018-10-02 13:34:04 +02:00
parent 2c3abd5b0b
commit 2f69d82734
11 changed files with 90 additions and 91 deletions

View File

@@ -1,7 +1,7 @@
//@flow
import React from "react";
import classNames from "classnames";
import {Help, Page} from "../index";
import {LabelWithHelpIcon} from "../index";
type Props = {
label?: string,
@@ -35,26 +35,6 @@ class InputField extends React.Component<Props> {
this.props.onChange(event.target.value);
};
renderLabel = () => {
const label = this.props.label;
if (label) {
return <label className="label">{label}</label>;
}
return "";
};
renderHelp = () => {
const helpText = this.props.helpText;
if(helpText){
return (
<div className="control columns is-vcentered">
<Help message={helpText} />
</div>);
}
else
return null;
};
handleKeyPress = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
const onReturnPressed = this.props.onReturnPressed;
if (!onReturnPressed) {
@@ -73,7 +53,9 @@ class InputField extends React.Component<Props> {
value,
validationError,
errorMessage,
disabled
disabled,
label,
helpText
} = this.props;
const errorView = validationError ? "is-danger" : "";
const helper = validationError ? (
@@ -83,12 +65,10 @@ class InputField extends React.Component<Props> {
);
return (
<div className="field">
<div className="field is-grouped">
<div className="control">
{this.renderLabel()}
</div>
{this.renderHelp()}
</div>
<LabelWithHelpIcon
label={label}
helpText={helpText}
/>
<div className="control">
<input
ref={input => {

View File

@@ -1,6 +1,6 @@
//@flow
import React from "react";
import {Help} from "../index";
import {LabelWithHelpIcon} from "../index";
export type SelectItem = {
value: string,
@@ -30,33 +30,15 @@ class Select extends React.Component<Props> {
this.props.onChange(event.target.value);
};
renderLabel = () => {
const label = this.props.label;
if (label) {
return <label className="label">{label}</label>;
}
return "";
};
renderHelp = () => {
const helpText = this.props.helpText;
if(helpText){
return (
<div className="control columns is-vcentered">
<Help message={helpText} />
</div>);
}
else
return null;
};
render() {
const { options, value } = this.props;
const { options, value, label, helpText } = this.props;
return (
<div className="field">
{this.renderLabel()}
<div className="field is-grouped">
<LabelWithHelpIcon
label={label}
helpText={helpText}
/>
<div className="control select">
<select
ref={input => {
@@ -74,8 +56,6 @@ class Select extends React.Component<Props> {
})}
</select>
</div>
{this.renderHelp()}
</div>
</div>
);
}

View File

@@ -1,6 +1,6 @@
//@flow
import React from "react";
import {Help} from "../index";
import {LabelWithHelpIcon} from "../index";
export type SelectItem = {
value: string,
@@ -22,37 +22,15 @@ class Textarea extends React.Component<Props> {
this.props.onChange(event.target.value);
};
renderLabel = () => {
const label = this.props.label;
if (label) {
return <label className="label">{label}</label>;
}
return "";
};
renderHelp = () => {
const helpText = this.props.helpText;
if(helpText){
return (
<div className="control columns is-vcentered">
<Help message={helpText} />
</div>);
}
else
return null;
};
render() {
const { placeholder, value } = this.props;
const { placeholder, value, label, helpText } = this.props;
return (
<div className="field">
<div className="field is-grouped">
<div className="control">
{this.renderLabel()}
</div>
{this.renderHelp()}
</div>
<LabelWithHelpIcon
label={label}
helpText={helpText}
/>
<div className="control">
<textarea
className="textarea"