Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-07 22:15:45 +01:00
Code Issues Packages Projects Releases Activity

refactoring

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

54
scm-ui-components/packages/ui-components/src/LabelWithHelpIcon.js Normal file
View File

@@ -0,0 +1,54 @@
//@flow
import React from "react";
import {Help} from "./index";
type Props = {
label: string,
helpText?: string
};
class LabelWithHelpIcon extends React.Component<Props> {
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;
};
renderLabelWithHelpIcon = () => {
if(this.props.label){
return(
<div className="field is-grouped">
<div className="control">
{this.renderLabel()}
</div>
{this.renderHelp()}
</div>
)
}
else
return null;
};
render() {
return (
this.renderLabelWithHelpIcon()
);
}
}
export default LabelWithHelpIcon;

36
scm-ui-components/packages/ui-components/src/forms/InputField.js
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 => {

32
scm-ui-components/packages/ui-components/src/forms/Select.js
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>
);
}

34
scm-ui-components/packages/ui-components/src/forms/Textarea.js
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"

1
scm-ui-components/packages/ui-components/src/index.js
View File

@@ -17,6 +17,7 @@ export { default as Notification } from "./Notification.js";
export { default as Paginator } from "./Paginator.js";
export { default as ProtectedRoute } from "./ProtectedRoute.js";
export { default as Help } from "./Help.js";
export { default as LabelWithHelpIcon } from "./LabelWithHelpIcon.js";
export { apiClient, NOT_FOUND_ERROR, UNAUTHORIZED_ERROR } from "./apiclient.js";

2
scm-ui/src/config/components/form/AdminSettings.js
View File

@@ -33,7 +33,6 @@ class AdminSettings extends React.Component<Props> {
buttonLabel={t("admin-settings.add-group-button")}
fieldLabel={t("admin-settings.add-group-textfield")}
errorMessage={t("admin-settings.add-group-error")}
helpText={t("help.adminGroupsHelpText")}
/>
<AdminUserTable
adminUsers={adminUsers}
@@ -48,7 +47,6 @@ class AdminSettings extends React.Component<Props> {
buttonLabel={t("admin-settings.add-user-button")}
fieldLabel={t("admin-settings.add-user-textfield")}
errorMessage={t("admin-settings.add-user-error")}
helpText={t("help.adminUsersHelpText")}
/>
</div>
);

1
scm-ui/src/config/components/table/AdminGroupTable.js
View File

@@ -24,6 +24,7 @@ class AdminGroupTable extends React.Component<Props, State> {
removeLabel={t("admin-settings.remove-group-button")}
onRemove={this.removeEntry}
disabled={disabled}
helpText={t("help.adminGroupsHelpText")}
/>
);
}

1
scm-ui/src/config/components/table/AdminUserTable.js
View File

@@ -22,6 +22,7 @@ class AdminUserTable extends React.Component<Props> {
removeLabel={t("admin-settings.remove-user-button")}
onRemove={this.removeEntry}
disabled={disabled}
helpText={t("help.adminUsersHelpText")}
/>
);
}

9
scm-ui/src/config/components/table/ArrayConfigTable.js
View File

@@ -1,21 +1,22 @@
//@flow
import React from "react";
import { RemoveEntryOfTableButton } from "@scm-manager/ui-components";
import { RemoveEntryOfTableButton, LabelWithHelpIcon } from "@scm-manager/ui-components";
type Props = {
items: string[],
label: string,
removeLabel: string,
onRemove: (string[], string) => void,
disabled: boolean
disabled: boolean,
helpText: string
};
class ArrayConfigTable extends React.Component<Props> {
render() {
const { label, disabled, removeLabel, items } = this.props;
const { label, disabled, removeLabel, items, helpText } = this.props;
return (
<div>
<label className="label">{label}</label>
<LabelWithHelpIcon label={label} helpText={helpText}/>
<table className="table is-hoverable is-fullwidth">
<tbody>
{items.map(item => {

1
scm-ui/src/groups/components/GroupForm.js
View File

@@ -106,7 +106,6 @@ class GroupForm extends React.Component<Props, State> {
buttonLabel={t("add-member-button.label")}
fieldLabel={t("add-member-textfield.label")}
errorMessage={t("add-member-textfield.error")}
helpText={t("group-form.help.membersHelpText")}
/>
<SubmitButton
disabled={!this.isValid()}

10
scm-ui/src/groups/components/MemberNameTable.js
View File

@@ -1,7 +1,10 @@
//@flow
import React from "react";
import { translate } from "react-i18next";
import { RemoveEntryOfTableButton } from "@scm-manager/ui-components";
import {
RemoveEntryOfTableButton,
LabelWithHelpIcon
} from "@scm-manager/ui-components";
type Props = {
members: string[],
@@ -16,7 +19,10 @@ class MemberNameTable extends React.Component<Props, State> {
const { t } = this.props;
return (
<div>
<label className="label">{t("group.members")}</label>
<LabelWithHelpIcon
label={t("group.members")}
helpText={t("group-form.help.membersHelpText")}
/>
<table className="table is-hoverable is-fullwidth">
<tbody>
{this.props.members.map(member => {