Move the MemberNameTable component to the scm-ui project to be used in combination with the Autocomplete component

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

@@ -0,0 +1,50 @@
+//@flow
+import React from "react";
+import { translate } from "react-i18next";
+import {
+  RemoveEntryOfTableButton
+} from "@scm-manager/ui-components";
+
+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";