CDC #204 - Adding ability to pass arbitrary buttons to AssociatedDrop…

…down component
performant-software · May 9, 2024 · 903f14d · 903f14d
1 parent 92e7675
commit 903f14d
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git 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
@@ -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)}
+  />
+);