From f40119d2920c4629c3f60c8397109de8a5112cfe Mon Sep 17 00:00:00 2001 From: Akash Singh Date: Wed, 14 Jul 2021 18:06:43 +0530 Subject: [PATCH 1/2] Added support for custom input render method --- README.md | 1 + src/index.tsx | 134 +++++++++++++++++++++++++++++++++----------------- 2 files changed, 89 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index 0be8d5f..b899249 100644 --- a/README.md +++ b/README.md @@ -219,6 +219,7 @@ export default function App() { | hideToggleButton | boolean | | Hide the toggle button | | disableCreateItem | boolean | | Disable the "create new" list Item. Default is `false` | | createItemRenderer | Function | | Custom Function that can either return a JSX Element or String, in order to control how the create new item within the Dropdown is rendered. The input value is passed as the first function parameter, Example: ``` (value) => `Create ${value}` ``` | +| renderCustomInput | Function | | Custom function to render input from outside chakra-ui-autocomplete. Receives input props for the input element and toggleButtonProps for the toggle button. Can use this to render chakra-ui's ``````. Example: ```(inputProps) => ()``` ## Todo diff --git a/src/index.tsx b/src/index.tsx index 8e054d3..9db59e0 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -9,7 +9,15 @@ import matchSorter from 'match-sorter' import Highlighter from 'react-highlight-words' import useDeepCompareEffect from 'react-use/lib/useDeepCompareEffect' import { FormLabel, FormLabelProps } from '@chakra-ui/form-control' -import { Text, Stack, Box, BoxProps, List, ListItem, ListIcon } from '@chakra-ui/layout' +import { + Text, + Stack, + Box, + BoxProps, + List, + ListItem, + ListIcon +} from '@chakra-ui/layout' import { Button, ButtonProps } from '@chakra-ui/button' import { Input, InputProps } from '@chakra-ui/input' import { IconProps, CheckCircleIcon, ArrowDownIcon } from '@chakra-ui/icons' @@ -40,10 +48,11 @@ export interface CUIAutoCompleteProps selectedIconProps?: Omit & { icon: IconProps['name'] | React.ComponentType } - icon?: ComponentWithAs<"svg", IconProps> + icon?: ComponentWithAs<'svg', IconProps> hideToggleButton?: boolean createItemRenderer?: (value: string) => string | JSX.Element disableCreateItem?: boolean + renderCustomInput?: (inputProps: any, toggleButtonProps: any) => JSX.Element } function defaultOptionFilterFunc(items: T[], inputValue: string) { @@ -59,7 +68,7 @@ function defaultCreateItemRenderer(value: string) { ) -} +} export const CUIAutoComplete = ( props: CUIAutoCompleteProps @@ -83,6 +92,7 @@ export const CUIAutoComplete = ( hideToggleButton = false, disableCreateItem = false, createItemRenderer = defaultCreateItemRenderer, + renderCustomInput, ...downshiftProps } = props @@ -195,7 +205,13 @@ export const CUIAutoComplete = ( setInputItems([{ label: `${inputValue}`, value: inputValue }]) setHighlightedIndex(0) } - }, [inputItems, setIsCreating, setHighlightedIndex, inputValue, disableCreateItem]) + }, [ + inputItems, + setIsCreating, + setHighlightedIndex, + inputValue, + disableCreateItem + ]) useDeepCompareEffect(() => { setInputItems(items) @@ -208,7 +224,9 @@ export const CUIAutoComplete = ( return ( - {label} + + {label} + {/* ---------Stack with Selected Menu Tags above the Input Box--------- */} {selectedItems && ( @@ -236,25 +254,49 @@ export const CUIAutoComplete = ( {/* -----------Section that renders the input element ----------------- */} - { } : openMenu, - onFocus: isOpen ? () => { } : openMenu, - ref: disclosureRef - }) - )} - /> - {!hideToggleButton && ( - + {renderCustomInput ? ( + renderCustomInput( + { + ...inputStyleProps, + ...getInputProps( + getDropdownProps({ + placeholder, + onClick: isOpen ? () => {} : openMenu, + onFocus: isOpen ? () => {} : openMenu, + ref: disclosureRef + }) + ) + }, + { + ...toggleButtonStyleProps, + ...getToggleButtonProps(), + ariaLabel: 'toggle menu', + hideToggleButton + } + ) + ) : ( + <> + {} : openMenu, + onFocus: isOpen ? () => {} : openMenu, + ref: disclosureRef + }) + )} + /> + {!hideToggleButton && ( + + )} + )} {/* -----------Section that renders the input element ----------------- */} @@ -283,29 +325,29 @@ export const CUIAutoComplete = ( {isCreating ? ( createItemRenderer(item.label) ) : ( - - {selectedItemValues.includes(item.value) && ( - - )} + + {selectedItemValues.includes(item.value) && ( + + )} - {itemRenderer ? ( - itemRenderer(item) - ) : ( - - )} - - )} + {itemRenderer ? ( + itemRenderer(item) + ) : ( + + )} + + )} ))} From 2b0c82684a3356974ebf94aab01ac0664ae8656e Mon Sep 17 00:00:00 2001 From: Akash Singh Date: Wed, 14 Jul 2021 18:11:22 +0530 Subject: [PATCH 2/2] Fixed readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b899249..4a0a1af 100644 --- a/README.md +++ b/README.md @@ -219,7 +219,7 @@ export default function App() { | hideToggleButton | boolean | | Hide the toggle button | | disableCreateItem | boolean | | Disable the "create new" list Item. Default is `false` | | createItemRenderer | Function | | Custom Function that can either return a JSX Element or String, in order to control how the create new item within the Dropdown is rendered. The input value is passed as the first function parameter, Example: ``` (value) => `Create ${value}` ``` | -| renderCustomInput | Function | | Custom function to render input from outside chakra-ui-autocomplete. Receives input props for the input element and toggleButtonProps for the toggle button. Can use this to render chakra-ui's ``````. Example: ```(inputProps) => ()``` +| renderCustomInput | Function | | Custom function to render input from outside chakra-ui-autocomplete. Receives input props for the input element and toggleButtonProps for the toggle button. Can use this to render chakra-ui's ``````. Example: ```(inputProps) => (} />)``` ## Todo