add(select-inputs): add action selector

Author: subinasr

src/components/MultiSelectInput/SearchMultiSelectInput.tsx

@@ -12,11 +12,13 @@ import { rankedSearchOnList } from '../../utils';
 import styles from './styles.css';
 
 interface OptionProps {
+    actions?: React.ReactNode;
     children: React.ReactNode;
     isActive: boolean;
 }
 function Option(props: OptionProps) {
     const {
+        actions,
         children,
         isActive,
     } = props;
@@ -29,6 +31,9 @@ function Option(props: OptionProps) {
             <div className={styles.label}>
                 { children }
             </div>
+            <div className={styles.actions}>
+                {actions}
+            </div>
         </>
     );
 }
@@ -50,6 +55,7 @@ export type SearchMultiSelectInputProps<
     searchOptions?: O[] | undefined | null;
     keySelector: (option: O) => T;
     labelSelector: (option: O) => string;
+    actionSelector?: (option: O) => React.ReactNode;
     hideOptionFilter?: (option: O) => boolean;
     name: K;
     disabled?: boolean;
@@ -97,6 +103,7 @@ function SearchMultiSelectInput<
     const {
         keySelector,
         labelSelector,
+        actionSelector,
         name,
         onChange,
         onOptionsChange,
@@ -237,10 +244,11 @@ function SearchMultiSelectInput<
                 children: labelSelector(option),
                 containerClassName: _cs(styles.option, isActive && styles.active),
                 title: labelSelector(option),
+                actions: actionSelector?.(option),
                 isActive,
             };
         },
-        [labelSelector, value],
+        [labelSelector, value, actionSelector],
     );
 
     // FIXME: value should not be on dependency list, also try to pass options like in SelectInput

src/components/SelectInput/SearchSelectInput.tsx

@@ -12,10 +12,12 @@ import { rankedSearchOnList } from '../../utils';
 import styles from './styles.css';
 
 interface OptionProps {
+    actions?: React.ReactNode;
     children: React.ReactNode;
 }
 function Option(props: OptionProps) {
     const {
+        actions,
         children,
     } = props;
 
@@ -27,6 +29,9 @@ function Option(props: OptionProps) {
             <div className={styles.label}>
                 { children }
             </div>
+            <div className={styles.actions}>
+                {actions}
+            </div>
         </>
     );
 }
@@ -47,6 +52,7 @@ export type SearchSelectInputProps<
     searchOptions?: O[] | undefined | null;
     keySelector: (option: O) => T;
     labelSelector: (option: O) => string;
+    actionSelector?: (option: O) => React.ReactNode;
     hideOptionFilter?: (option: O) => boolean;
     name: K;
     disabled?: boolean;
@@ -102,6 +108,7 @@ function SearchSelectInput<
     const {
         keySelector,
         labelSelector,
+        actionSelector,
         name,
         onChange,
         onOptionsChange,
@@ -230,11 +237,12 @@ function SearchSelectInput<
 
             return {
                 children: labelSelector(option),
+                actions: actionSelector?.(option),
                 containerClassName: _cs(styles.option, isActive && styles.active),
                 title: labelSelector(option),
             };
         },
-        [value, labelSelector],
+        [value, labelSelector, actionSelector],
     );
 
     const handleOptionClick = useCallback(

src/stories/MultiSelectInput.stories.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Story } from '@storybook/react/types-6-0';
 import { useArgs } from '@storybook/client-api';
+import { IoOpenOutline } from 'react-icons/io5';
 import MultiSelectInput, { MultiSelectInputProps } from '#components/MultiSelectInput';
+import QuickActionButton from '#components/QuickActionButton';
 
 export default {
     title: 'Input/MultiSelectInput',
@@ -46,6 +48,27 @@ const Template: Story<MultiSelectInputProps<string, string, Option, { containerC
     );
 };
 
+function handleClick(_:string | undefined, e: React.MouseEvent<HTMLButtonElement>) {
+    // NOTE: This intentionally breaks HTML semantics (link inside a button).
+    // This workaround is to allow clickable links inside SelectInput options
+    // where a button wrapper is required.
+    e.stopPropagation();
+    window.open('https://www.google.com/search?q=story', '_blank');
+}
+
+export const WithActions = Template.bind({});
+WithActions.args = {
+    actionSelector: () => (
+        <QuickActionButton
+            name={undefined}
+            onClick={handleClick}
+            transparent
+        >
+            <IoOpenOutline />
+        </QuickActionButton>
+    ),
+};
+
 export const NoValue = Template.bind({});
 NoValue.args = {
     value: undefined,

src/stories/SearchMultiSelectInput.stories.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import { Story } from '@storybook/react/types-6-0';
 import { useArgs } from '@storybook/client-api';
+import { IoOpenOutline } from 'react-icons/io5';
 import SearchMultiSelectInput, { SearchMultiSelectInputProps } from '#components/MultiSelectInput/SearchMultiSelectInput';
+import QuickActionButton from '#components/QuickActionButton';
 import useQuery, { entityListTransformer } from '../utils/useQuery';
 
 export default {
@@ -188,6 +190,27 @@ const Template: Story<SearchMultiSelectInputProps<string, string, Option, { cont
     );
 };
 
+function handleClick(_:string | undefined, e: React.MouseEvent<HTMLButtonElement>) {
+    // NOTE: This intentionally breaks HTML semantics (link inside a button).
+    // This workaround is to allow clickable links inside SelectInput options
+    // where a button wrapper is required.
+    e.stopPropagation();
+    window.open('https://www.google.com/search?q=story', '_blank');
+}
+
+export const WithActions = Template.bind({});
+WithActions.args = {
+    actionSelector: () => (
+        <QuickActionButton
+            name={undefined}
+            onClick={handleClick}
+            transparent
+        >
+            <IoOpenOutline />
+        </QuickActionButton>
+    ),
+};
+
 export const NoValue = Template.bind({});
 NoValue.args = {
     value: undefined,

src/stories/SearchSelectInput.stories.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import { Story } from '@storybook/react/types-6-0';
 import { useArgs } from '@storybook/client-api';
+import { IoOpenOutline } from 'react-icons/io5';
 import SearchSelectInput, { SearchSelectInputProps } from '#components/SelectInput/SearchSelectInput';
+import QuickActionButton from '#components/QuickActionButton';
 import useQuery, { entityListTransformer } from '../utils/useQuery';
 
 export default {
@@ -193,6 +195,27 @@ Default.args = {
     value: '1',
 };
 
+function handleClick(_:string | undefined, e: React.MouseEvent<HTMLButtonElement>) {
+    // NOTE: This intentionally breaks HTML semantics (link inside a button).
+    // This workaround is to allow clickable links inside SelectInput options
+    // where a button wrapper is required.
+    e.stopPropagation();
+    window.open('https://www.google.com/search?q=story', '_blank');
+}
+
+export const WithActions = Template.bind({});
+WithActions.args = {
+    actionSelector: () => (
+        <QuickActionButton
+            name={undefined}
+            onClick={handleClick}
+            transparent
+        >
+            <IoOpenOutline />
+        </QuickActionButton>
+    ),
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
     value: '1',

src/stories/SelectInput.stories.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Story } from '@storybook/react/types-6-0';
 import { useArgs } from '@storybook/client-api';
+import { IoOpenOutline } from 'react-icons/io5';
 import SelectInput, { SelectInputProps } from '#components/SelectInput';
+import QuickActionButton from '#components/QuickActionButton';
 
 export default {
     title: 'Input/SelectInput',
@@ -45,6 +47,27 @@ const Template: Story<SelectInputProps<string, string, Option, { containerClassN
     );
 };
 
+function handleClick(_:string | undefined, e: React.MouseEvent<HTMLButtonElement>) {
+    // NOTE: This intentionally breaks HTML semantics (link inside a button).
+    // This workaround is to allow clickable links inside SelectInput options
+    // where a button wrapper is required.
+    e.stopPropagation();
+    window.open('https://www.google.com/search?q=story', '_blank');
+}
+
+export const WithActions = Template.bind({});
+WithActions.args = {
+    actionSelector: () => (
+        <QuickActionButton
+            name={undefined}
+            onClick={handleClick}
+            transparent
+        >
+            <IoOpenOutline />
+        </QuickActionButton>
+    ),
+};
+
 export const NoValue = Template.bind({});
 NoValue.args = {
     value: undefined,