From 903f14de65d5c3c5203d76b9cc73015aaf056661 Mon Sep 17 00:00:00 2001
From: dleadbetter <>
Date: Thu, 9 May 2024 12:06:10 -0400
Subject: [PATCH] CDC #204 - Adding ability to pass arbitrary buttons to
 AssociatedDropdown component

---
 .../src/components/AssociatedDropdown.js      | 13 +++++++
 .../semantic-ui/AssociatedDropdown.stories.js | 38 +++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/packages/semantic-ui/src/components/AssociatedDropdown.js b/packages/semantic-ui/src/components/AssociatedDropdown.js
index a5132b59..5aba9105 100644
--- a/packages/semantic-ui/src/components/AssociatedDropdown.js
+++ b/packages/semantic-ui/src/components/AssociatedDropdown.js
@@ -224,6 +224,7 @@ class AssociatedDropdown extends Component<Props, State> {
           { this.renderEditButton() }
           { this.renderAddButton() }
           { this.renderClearButton() }
+          { this.renderButtons() }
         </Button.Group>
         { this.renderModal() }
         { this.state.saved && (
@@ -284,6 +285,18 @@ class AssociatedDropdown extends Component<Props, State> {
     );
   }
 
+  /**
+   * Renders the extra buttons.
+   *
+   * @returns {*}
+   */
+  renderButtons() {
+    const excludeButtons = [BUTTON_ADD, BUTTON_CLEAR, BUTTON_EDIT];
+    const buttons = _.filter(this.props.buttons, (button) => !excludeButtons.includes(button.name));
+
+    return _.map(buttons, (button) => this.renderButton(button.name, _.omit(button, 'name')));
+  }
+
   /**
    * Renders the clear button.
    *
diff --git a/packages/storybook/src/semantic-ui/AssociatedDropdown.stories.js b/packages/storybook/src/semantic-ui/AssociatedDropdown.stories.js
index d94d4367..bc4619b7 100644
--- a/packages/storybook/src/semantic-ui/AssociatedDropdown.stories.js
+++ b/packages/storybook/src/semantic-ui/AssociatedDropdown.stories.js
@@ -465,3 +465,41 @@ export const CustomButtons = () => (
     upward={boolean('Open upward', false)}
   />
 );
+
+export const AdditionalButtons = () => (
+  <AssociatedDropdown
+    buttons={[{
+      name: 'add',
+    }, {
+      name: 'clear',
+    }, {
+      basic: true,
+      name: 'navigate',
+      content: 'Navigate',
+      icon: 'world',
+      onClick: action('navigate'),
+      type: 'button'
+    }]}
+    collectionName='items'
+    modal={{
+      component: AddModal,
+      props: {
+        onInitialize: () => Promise.resolve({ })
+      },
+      onSave: () => {
+        action('save')();
+        return Promise.resolve({});
+      }
+    }}
+    onSearch={(search) => Api.onLoad({ items, search, sort_by: 'text' })}
+    onSelection={action('selection')}
+    placeholder={text('Placeholder', 'Search')}
+    renderOption={(item) => ({
+      key: item.id,
+      value: item.id,
+      text: item.company,
+      description: item.country
+    })}
+    upward={boolean('Open upward', false)}
+  />
+);