overflow menu element (#74)

* overflow menu element

* review feedback

Author: davemeyer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-renderer",
-  "version": "0.6.11",
+  "version": "0.6.12",
   "license": "MIT",
   "scripts": {
     "postversion": "npm publish",

src/__tests__/__snapshots__/renderer.test.tsx.snap

@@ -845,6 +845,39 @@ Object {
 }
 `;
 
+exports[`slack jsx renders an overflow menu 1`] = `
+Object {
+  "accessory": Object {
+    "action_id": "action1",
+    "options": Array [
+      Object {
+        "text": Object {
+          "emoji": false,
+          "text": "option 1",
+          "type": "plain_text",
+        },
+        "value": "value1",
+      },
+      Object {
+        "text": Object {
+          "emoji": false,
+          "text": "option 2",
+          "type": "plain_text",
+        },
+        "value": "value2",
+      },
+    ],
+    "type": "overflow",
+  },
+  "text": Object {
+    "text": "This is a section block with an overflow menu.",
+    "type": "mrkdwn",
+    "verbatim": false,
+  },
+  "type": "section",
+}
+`;
+
 exports[`slack jsx renders contextblock children 1`] = `
 Object {
   "elements": Array [

src/__tests__/renderer.test.tsx

@@ -33,6 +33,7 @@ import {
   InputBlock,
   TimePickerElement,
   MultiExternalSelectElement,
+  OverflowMenuElement,
 } from '../components';
 
 const fakePromise = async () => Promise.resolve();
@@ -763,4 +764,31 @@ describe('slack jsx', () => {
     );
     expect(await render(message)).toMatchSnapshot();
   });
+
+  it('renders an overflow menu', async () => {
+    const message = (
+      <SectionBlock
+        accessory={
+          <OverflowMenuElement
+            actionId="action1"
+            options={[
+              {
+                text: <PlainText>option 1</PlainText>,
+                value: 'value1',
+              },
+              {
+                text: <PlainText>option 2</PlainText>,
+                value: 'value2',
+              },
+            ]}
+          />
+        }
+      >
+        <MarkdownText>
+          This is a section block with an overflow menu.
+        </MarkdownText>
+      </SectionBlock>
+    );
+    expect(await render(message)).toMatchSnapshot();
+  });
 });

src/components/OverflowMenuElement.ts

@@ -0,0 +1,17 @@
+import { StaticSelect, Overflow } from '@slack/types';
+import { FC } from '..';
+import { buildInputOptions, InputOption } from './shared/inputOption';
+
+export interface OverflowMenuElementProps {
+  actionId: string;
+  options: InputOption[];
+}
+
+export const OverflowMenuElement: FC<OverflowMenuElementProps, Overflow> = ({
+  actionId,
+  options,
+}) => ({
+  type: 'overflow',
+  action_id: actionId,
+  ...(options && { options: buildInputOptions(options) }),
+});

src/components/index.ts

@@ -20,6 +20,7 @@ export * from './MultiSelectElement';
 export * from './ExternalSelect';
 export * from './Checkbox';
 export * from './RadioButtons';
+export * from './OverflowMenuElement';
 export { InputOption } from './shared/inputOption';
 
 export * from './PlainText';