import React, { useContext } from "react"; import classnames from "classnames"; import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../../utilities/props"; import { globalProps } from "../../utilities/globalProps"; import { useHandleOnKeyDown } from "../hooks/useHandleOnKeydown"; import DropdownContext from "../context"; import Body from "../../pb_body/_body"; import Icon from "../../pb_icon/_icon"; import Flex from "../../pb_flex/_flex"; import FlexItem from "../../pb_flex/_flex_item"; type DropdownTriggerProps = { aria?: { [key: string]: string }; children?: React.ReactChild[] | React.ReactChild; className?: string; customDisplay?: React.ReactChild[] | React.ReactChild; data?: { [key: string]: string }; htmlOptions?: {[key: string]: string | number | boolean | (() => void)}, id?: string; placeholder?: string; }; const DropdownTrigger = (props: DropdownTriggerProps) => { const { aria = {}, className, children, customDisplay, data = {}, htmlOptions = {}, id, placeholder, } = props; const { autocomplete, handleWrapperClick, selected, filterItem, handleChange, toggleDropdown, isDropDownClosed, inputRef, isInputFocused, setIsInputFocused, } = useContext(DropdownContext); const handleKeyDown = useHandleOnKeyDown(); const ariaProps = buildAriaProps(aria); const dataProps = buildDataProps(data); const htmlProps = buildHtmlProps(htmlOptions); const classes = classnames( buildCss("pb_dropdown_trigger"), globalProps(props), className ); const triggerWrapperClasses = `dropdown_trigger_wrapper ${ isInputFocused && "dropdown_trigger_wrapper_focus" } ${!autocomplete && "dropdown_trigger_wrapper_select_only"}`; const customDisplayPlaceholder = selected.label ? ( {selected.label} ) : autocomplete ? ( "" ) : placeholder ? ( placeholder ) : ( "Select..." ); const defaultDisplayPlaceholder = selected.label ? selected.label : autocomplete ? "" : placeholder ? placeholder : "Select..."; return (
{children ? (
toggleDropdown()} onKeyDown= {handleKeyDown} style={{ display: "inline-block" }} tabIndex= {0} > {children}
) : ( <> handleWrapperClick(), onKeyDown: handleKeyDown, tabIndex: "0", }} justify="between" paddingX="sm" paddingY="xs" > {customDisplay ? ( {customDisplay} {customDisplayPlaceholder} ) : ( )} {autocomplete && ( toggleDropdown()} onFocus={() => setIsInputFocused(true)} onKeyDown={handleKeyDown} placeholder={ selected.label ? "" : placeholder ? placeholder : "Select..." } ref={inputRef} value={filterItem} /> )} {e.stopPropagation();handleWrapperClick()} }} key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`} > )}
); }; export default DropdownTrigger;