From 679a56366485b8bd85408aa42d757726eab657f6 Mon Sep 17 00:00:00 2001
From: alexandrefsr <afsro11@iscte-iul.pt>
Date: Thu, 2 Jul 2020 23:04:56 +0100
Subject: [PATCH 1/4] Add button variant to add/remove tags

---
 example/index.tsx |  1 +
 src/index.tsx     | 72 ++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/example/index.tsx b/example/index.tsx
index 5e8b770..36c96ba 100644
--- a/example/index.tsx
+++ b/example/index.tsx
@@ -14,6 +14,7 @@ const initialSettings: ReactTagInputProps = {
   readOnly: false,
   removeOnBackspace: true,
   validator: undefined,
+  buttonVariant: true,
 };
 
 function Example() {
diff --git a/src/index.tsx b/src/index.tsx
index 0bf6bce..279c126 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {CSSProperties} from "react";
 import {Tag} from "./components/Tag";
 import {classSelectors} from "./utils/selectors";
 
@@ -13,6 +13,9 @@ export interface ReactTagInputProps {
   editable?: boolean;
   readOnly?: boolean;
   removeOnBackspace?: boolean;
+  buttonVariant?: boolean;
+  buttonText?: string;
+  buttonStyle?: CSSProperties;
 }
 
 interface State {
@@ -21,19 +24,19 @@ interface State {
 
 export default class ReactTagInput extends React.Component<ReactTagInputProps, State> {
 
-  state = { input: "" };
+  state = {input: ""};
 
   // Ref for input element
   inputRef: React.RefObject<HTMLInputElement> = React.createRef();
 
   onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    this.setState({ input: e.target.value });
+    this.setState({input: e.target.value});
   }
 
   onInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
 
-    const { input } = this.state;
-    const { validator, removeOnBackspace } = this.props;
+    const {input} = this.state;
+    const {validator, removeOnBackspace} = this.props;
 
     // On enter
     if (e.keyCode === 13) {
@@ -42,7 +45,9 @@ export default class ReactTagInput extends React.Component<ReactTagInputProps, S
       e.preventDefault();
 
       // If input is blank, do nothing
-      if (input === "") { return; }
+      if (input === "") {
+        return;
+      }
 
       // Check if input is valid
       const valid = validator !== undefined ? validator(input) : true;
@@ -69,24 +74,52 @@ export default class ReactTagInput extends React.Component<ReactTagInputProps, S
 
   }
 
+  onButtonAdd = () => {
+    const {input} = this.state;
+    const {validator} = this.props;
+
+    // If input is blank, do nothing
+    if (input === "") {
+      return;
+    }
+
+    // Check if input is valid
+    const valid = validator !== undefined ? validator(input) : true;
+    if (!valid) {
+      return;
+    }
+
+    this.addTag(input);
+
+  }
+
+  onButtonDelete = () => {
+    const {input} = this.state;
+    if (input !== "") {
+      return;
+    }
+    this.removeTag(this.props.tags.length - 1);
+
+  }
+
   addTag = (value: string) => {
-    const tags = [ ...this.props.tags ];
+    const tags = [...this.props.tags];
     if (!tags.includes(value)) {
       tags.push(value);
       this.props.onChange(tags);
     }
-    this.setState({ input: "" });
+    this.setState({input: ""});
   }
 
   removeTag = (i: number) => {
-    const tags = [ ...this.props.tags ];
+    const tags = [...this.props.tags];
     tags.splice(i, 1);
     this.props.onChange(tags);
   }
 
   updateTag = (i: number, value: string) => {
     const tags = [...this.props.tags];
-    const numOccurencesOfValue = tags.reduce((prev, currentValue, index) => prev + (currentValue === value && index !== i ? 1 : 0) , 0);
+    const numOccurencesOfValue = tags.reduce((prev, currentValue, index) => prev + (currentValue === value && index !== i ? 1 : 0), 0);
     if (numOccurencesOfValue > 0) {
       tags.splice(i, 1);
     } else {
@@ -97,9 +130,9 @@ export default class ReactTagInput extends React.Component<ReactTagInputProps, S
 
   render() {
 
-    const { input } = this.state;
+    const {input} = this.state;
 
-    const { tags, placeholder, maxTags, editable, readOnly, validator, removeOnBackspace } = this.props;
+    const {tags, placeholder, maxTags, editable, readOnly, validator, removeOnBackspace, buttonVariant, buttonText, buttonStyle} = this.props;
 
     const maxTagsReached = maxTags !== undefined ? tags.length >= maxTags : false;
 
@@ -124,14 +157,25 @@ export default class ReactTagInput extends React.Component<ReactTagInputProps, S
           />
         ))}
         {showInput &&
-          <input
+        <input
             ref={this.inputRef}
             value={input}
             className={classSelectors.input}
             placeholder={placeholder || "Type and press enter"}
             onChange={this.onInputChange}
             onKeyDown={this.onInputKeyDown}
-          />
+        />
+        }
+
+        {buttonVariant &&
+        <>
+          <button style={buttonStyle} onClick={this.onButtonDelete}>
+            {buttonText || "Delete"}
+          </button>
+          <button style={buttonStyle} onClick={this.onButtonAdd}>
+            {buttonText || "Add"}
+          </button>
+        </>
         }
       </div>
     );

From 50c256aa9a15e8d6537e5978fa347c2fe01fe9b9 Mon Sep 17 00:00:00 2001
From: alexandrefsr <afsro11@iscte-iul.pt>
Date: Sat, 4 Jul 2020 11:47:25 +0100
Subject: [PATCH 2/4] Add custom text to buttons add/remove

---
 src/index.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 279c126..59e27da 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -14,8 +14,9 @@ export interface ReactTagInputProps {
   readOnly?: boolean;
   removeOnBackspace?: boolean;
   buttonVariant?: boolean;
-  buttonText?: string;
   buttonStyle?: CSSProperties;
+  removeButtonText?: string;
+  addButtonText?: string;
 }
 
 interface State {
@@ -132,7 +133,7 @@ export default class ReactTagInput extends React.Component<ReactTagInputProps, S
 
     const {input} = this.state;
 
-    const {tags, placeholder, maxTags, editable, readOnly, validator, removeOnBackspace, buttonVariant, buttonText, buttonStyle} = this.props;
+    const {tags, placeholder, maxTags, editable, readOnly, validator, removeOnBackspace, buttonVariant, addButtonText, removeButtonText, buttonStyle} = this.props;
 
     const maxTagsReached = maxTags !== undefined ? tags.length >= maxTags : false;
 
@@ -170,10 +171,10 @@ export default class ReactTagInput extends React.Component<ReactTagInputProps, S
         {buttonVariant &&
         <>
           <button style={buttonStyle} onClick={this.onButtonDelete}>
-            {buttonText || "Delete"}
+            {removeButtonText || "Delete"}
           </button>
           <button style={buttonStyle} onClick={this.onButtonAdd}>
-            {buttonText || "Add"}
+            {addButtonText || "Add"}
           </button>
         </>
         }

From 816fea1ed8f50065de6fa39c6d2a21116162be34 Mon Sep 17 00:00:00 2001
From: alexandrefsr <afsro11@iscte-iul.pt>
Date: Sat, 4 Jul 2020 12:29:48 +0100
Subject: [PATCH 3/4] Allow addButtonText and removeButtonTex to have JSX as
 text (EG: font awesome icon allowance)

---
 example/index.tsx |  3 +++
 src/index.tsx     | 10 ++++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/example/index.tsx b/example/index.tsx
index 36c96ba..9e8ccf7 100644
--- a/example/index.tsx
+++ b/example/index.tsx
@@ -27,6 +27,9 @@ function Example() {
         {...settings}
         tags={tags}
         onChange={(value) => setTags(value)}
+        buttonVariant={true}
+        addButtonText={() => <span>Add!</span>}
+        removeButtonText={"Remove!"}
       />
 
       <div className="form">
diff --git a/src/index.tsx b/src/index.tsx
index 59e27da..7d77735 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -15,8 +15,8 @@ export interface ReactTagInputProps {
   removeOnBackspace?: boolean;
   buttonVariant?: boolean;
   buttonStyle?: CSSProperties;
-  removeButtonText?: string;
-  addButtonText?: string;
+  removeButtonText?: (() => any) | string;
+  addButtonText?: (() => any) | string;
 }
 
 interface State {
@@ -141,6 +141,8 @@ export default class ReactTagInput extends React.Component<ReactTagInputProps, S
 
     const showInput = !readOnly && !maxTagsReached;
 
+    // @ts-ignore
+    // @ts-ignore
     return (
       <div className={classSelectors.wrapper}>
         {tags.map((tag, i) => (
@@ -171,10 +173,10 @@ export default class ReactTagInput extends React.Component<ReactTagInputProps, S
         {buttonVariant &&
         <>
           <button style={buttonStyle} onClick={this.onButtonDelete}>
-            {removeButtonText || "Delete"}
+            { typeof removeButtonText === "string" ? removeButtonText : removeButtonText ? removeButtonText() : "Remove"}
           </button>
           <button style={buttonStyle} onClick={this.onButtonAdd}>
-            {addButtonText || "Add"}
+            { typeof addButtonText === "string" ? addButtonText : addButtonText ? addButtonText() : "Add"}
           </button>
         </>
         }

From a885726a64034dcf20b8b4481b884e0d3a677562 Mon Sep 17 00:00:00 2001
From: alexandrefsr <afsro11@iscte-iul.pt>
Date: Sat, 4 Jul 2020 12:57:35 +0100
Subject: [PATCH 4/4] Get rid of placeholder if tags = 0 length

---
 src/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.tsx b/src/index.tsx
index 7d77735..c973f9a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -164,7 +164,7 @@ export default class ReactTagInput extends React.Component<ReactTagInputProps, S
             ref={this.inputRef}
             value={input}
             className={classSelectors.input}
-            placeholder={placeholder || "Type and press enter"}
+            placeholder={ tags.length === 0 ? placeholder || "Type and press enter" : "" }
             onChange={this.onInputChange}
             onKeyDown={this.onInputKeyDown}
         />