add onCreateNewOption to TgSelect

TeselaGen · Nov 4, 2024 · 544300f · 544300f
1 parent 415f534
commit 544300f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 16 deletions.
diff --git a/packages/ui/cypress/e2e/tgSelect.spec.js b/packages/ui/cypress/e2e/tgSelect.spec.js
@@ -59,4 +59,12 @@ describe("tgSelect", () => {
     cy.contains(".tg-select-option", "option 1").should("not.exist");
     cy.contains(".tg-select-option", "option 2").should("not.exist");
   });
+  it(`onCreateNewOption should trigger and create a new option`, () => {
+    cy.tgToggle("onCreateNewOption");
+    cy.tgToggle("creatable");
+    cy.get(".tg-select input").type("weeeeee");
+    cy.contains(".bp3-menu-item", `Create "weeeeee"`).click();
+    cy.contains(".bp3-toast", "New option weeeeee created").should("exist");
+    cy.contains(".tg-select-value", "new option").should("not.exist");
+  });
 });
diff --git a/packages/ui/demo/src/examples/TgSelectDemo.js b/packages/ui/demo/src/examples/TgSelectDemo.js
@@ -31,6 +31,7 @@ export default class TgSelectDemo extends React.Component {
     const {
       multi,
       isTagSelect,
+      onCreateNewOption,
       val,
       noToggle,
       small,
@@ -79,23 +80,23 @@ export default class TgSelectDemo extends React.Component {
           {renderToggle({
             that: this,
             type: "hasError"
-            // type: "reactSelectFieldcreatable"
           })}
           {renderToggle({
             that: this,
             type: "creatable"
-            // type: "reactSelectFieldcreatable"
+          })}
+          {renderToggle({
+            that: this,
+            type: "onCreateNewOption"
           })}
           {renderToggle({
             that: this,
             type: "withStaticOptions"
-            // type: "reactSelectFieldcreatable"
           })}
           {renderToggle({
             that: this,
             type: "isTagSelect",
             label: "isTagSelect   *Note: isTagSelect requires multi to be true"
-            // type: "reactSelectFieldcreatable"
           })}
         </OptionsSection>
         <DemoWrapper style={{ maxWidth: 300 }}>
@@ -104,6 +105,14 @@ export default class TgSelectDemo extends React.Component {
               this.setState({ val });
             }}
             isTagSelect={isTagSelect}
+            onCreateNewOption={
+              onCreateNewOption
+                ? qs => {
+                    window.toastr.success(`New option ${qs} created`);
+                    return true;
+                  }
+                : undefined
+            }
             multi={multi || isTagSelect}
             intent={hasError ? "danger" : ""}
             creatable={creatable}

diff --git a/packages/ui/src/TgSelect/index.js b/packages/ui/src/TgSelect/index.js
@@ -221,6 +221,25 @@ class TgSelect extends React.Component {
     }
     return optionRenderer;
   };
+  renderCreateNewOption = (query, active, handleClick) => {
+    if (this.props.renderCreateNewOption) {
+      return this.props.renderCreateNewOption(query, active, handleClick);
+    }
+    return (
+      <MenuItem
+        icon="add"
+        text={`Create "${query}"`}
+        active={active}
+        onClick={(...args) => {
+          const shouldStopEarly = this.props.onCreateNewOption(query);
+          if (!shouldStopEarly) {
+            handleClick(...args);
+          }
+        }}
+        shouldDismissPopover={false}
+      />
+    );
+  };
 
   render() {
     let {
@@ -250,7 +269,6 @@ class TgSelect extends React.Component {
       popoverProps,
       additionalRightEl,
       resetOnSelect = true,
-      renderCreateNewOption: _renderCreateNewOption = renderCreateNewOption,
       ...rest
     } = this.props;
     if (asTag) {
@@ -304,7 +322,7 @@ class TgSelect extends React.Component {
     const maybeCreateNewItemFromQuery = creatable ? createNewOption : undefined;
     const maybeCreateNewItemRenderer =
       creatable && !this.queryHasExactOptionMatch()
-        ? _renderCreateNewOption
+        ? this.renderCreateNewOption
         : null;
     const selectedItems = getValueArray(value).map(value => {
       if (value && value.label) return value; //if the value has a label, just use that
@@ -458,16 +476,6 @@ export default compose(
 const itemDisabled = i => i.disabled;
 const noResultsDefault = <div>No Results...</div>;
 
-export const renderCreateNewOption = (query, active, handleClick) => (
-  <MenuItem
-    icon="add"
-    text={`Create "${query}"`}
-    active={active}
-    onClick={handleClick}
-    shouldDismissPopover={false}
-  />
-);
-
 export function createNewOption(newValString) {
   if (!newValString) return;
   return {