Merged 2.0.0-m3

scm-ui-components/packages/ui-components/src/LinkPaginator.js

@@ -25,13 +25,13 @@ class LinkPaginator extends React.Component<Props> {
     );
   }
 
-  renderPreviousButton(label?: string) {
+  renderPreviousButton(className: string, label?: string) {
     const { page } = this.props;
     const previousPage = page - 1;
 
     return (
       <Button
-        className={"pagination-previous"}
+        className={className}
         label={label ? label : previousPage.toString()}
         disabled={!this.hasLink("prev")}
         link={`${previousPage}`}
@@ -44,12 +44,12 @@ class LinkPaginator extends React.Component<Props> {
     return collection._links[name];
   }
 
-  renderNextButton(label?: string) {
+  renderNextButton(className: string, label?: string) {
     const { page } = this.props;
     const nextPage = page + 1;
     return (
       <Button
-        className={"pagination-next"}
+        className={className}
         label={label ? label : nextPage.toString()}
         disabled={!this.hasLink("next")}
         link={`${nextPage}`}
@@ -96,13 +96,13 @@ class LinkPaginator extends React.Component<Props> {
       links.push(this.separator());
     }
     if (page > 2) {
-      links.push(this.renderPreviousButton());
+      links.push(this.renderPreviousButton("pagination-link"));
     }
 
     links.push(this.currentPage(page));
 
     if (page + 1 < pageTotal) {
-      links.push(this.renderNextButton());
+      links.push(this.renderNextButton("pagination-link"));
     }
     if (page + 2 < pageTotal)
       //if there exists pages between next and last
@@ -118,13 +118,13 @@ class LinkPaginator extends React.Component<Props> {
     const { t } = this.props;
     return (
       <nav className="pagination is-centered" aria-label="pagination">
-        {this.renderPreviousButton(t("paginator.previous"))}
+        {this.renderPreviousButton("pagination-previous", t("paginator.previous"))}
         <ul className="pagination-list">
           {this.pageLinks().map((link, index) => {
             return <li key={index}>{link}</li>;
           })}
         </ul>
-        {this.renderNextButton(t("paginator.next"))}
+        {this.renderNextButton("pagination-next", t("paginator.next"))}
       </nav>
     );
   }

scm-ui-components/packages/ui-components/src/forms/MemberNameTable.js

@@ -0,0 +1,48 @@
+//@flow
+import React from "react";
+import { translate } from "react-i18next";
+import RemoveEntryOfTableButton from "../buttons/RemoveEntryOfTableButton";
+
+type Props = {
+  members: string[],
+  t: string => string,
+  memberListChanged: (string[]) => void
+};
+
+type State = {};
+
+class MemberNameTable extends React.Component<Props, State> {
+  render() {
+    const { t } = this.props;
+    return (
+      <div>
+        <table className="table is-hoverable is-fullwidth">
+          <tbody>
+            {this.props.members.map(member => {
+              return (
+                <tr key={member}>
+                  <td key={member}>{member}</td>
+                  <td>
+                    <RemoveEntryOfTableButton
+                      entryname={member}
+                      removeEntry={this.removeEntry}
+                      disabled={false}
+                      label={t("remove-member-button.label")}
+                    />
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  removeEntry = (membername: string) => {
+    const newMembers = this.props.members.filter(name => name !== membername);
+    this.props.memberListChanged(newMembers);
+  };
+}
+
+export default translate("groups")(MemberNameTable);

scm-ui-components/packages/ui-components/src/forms/index.js

@@ -2,6 +2,7 @@
 
 export { default as AddEntryToTableField } from "./AddEntryToTableField.js";
 export { default as AutocompleteAddEntryToTableField } from "./AutocompleteAddEntryToTableField.js";
+export { default as MemberNameTable } from "./MemberNameTable.js";
 export { default as Checkbox } from "./Checkbox.js";
 export { default as InputField } from "./InputField.js";
 export { default as Select } from "./Select.js";

scm-ui-components/packages/ui-components/src/navigation/NavAction.js

@@ -2,16 +2,23 @@
 import React from "react";
 
 type Props = {
+  icon?: string,
   label: string,
   action: () => void
 };
 
 class NavAction extends React.Component<Props> {
   render() {
-    const { label, action } = this.props;
+    const { label, icon, action } = this.props;
+
+    let showIcon = null;
+    if (icon) {
+      showIcon = (<><i className={icon}></i>{" "}</>);
+    }
+
     return (
       <li>
-        <a onClick={action} href="javascript:void(0);">{label}</a>
+        <a onClick={action} href="javascript:void(0);">{showIcon}{label}</a>
       </li>
     );
   }

scm-ui-components/packages/ui-components/src/navigation/NavLink.js

@@ -6,6 +6,7 @@ import {Link, Route} from "react-router-dom";
 
 type Props = {
   to: string,
+  icon?: string,
   label: string,
   activeOnlyWhenExact?: boolean,
   activeWhenMatch?: (route: any) => boolean
@@ -23,10 +24,17 @@ class NavLink extends React.Component<Props> {
   }
 
   renderLink = (route: any) => {
-    const { to, label } = this.props;
+    const { to, icon, label } = this.props;
+
+    let showIcon = null;
+    if (icon) {
+      showIcon = (<><i className={icon}></i>{" "}</>);
+    }
+
     return (
       <li>
         <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
+          {showIcon}
           {label}
         </Link>
       </li>
@@ -35,6 +43,7 @@ class NavLink extends React.Component<Props> {
 
   render() {
     const { to, activeOnlyWhenExact } = this.props;
+
     return (
       <Route path={to} exact={activeOnlyWhenExact} children={this.renderLink} />
     );