import React, { useContext } from "react"; import classnames from "classnames"; import { Body, Icon, Flex, FlexItem } from "playbook-ui"; import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../../utilities/props"; import { globalProps } from "../../utilities/globalProps"; import { useHandleOnKeyDown } from "../hooks/useHandleOnKeydown"; import DropdownContext from "../context"; type DropdownTriggerProps = { aria?: { [key: string]: string }; children?: React.ReactChild[] | React.ReactChild; className?: string; customDisplay?: React.ReactChild[] | React.ReactChild; dark?: boolean; data?: { [key: string]: string }; htmlOptions?: {[key: string]: string | number | boolean | (() => void)}, id?: string; placeholder?: string; }; const DropdownTrigger = (props: DropdownTriggerProps) => { const { aria = {}, children, className, customDisplay, dark = false, data = {}, htmlOptions = {}, id, placeholder, } = props; const { autocomplete, filterItem, handleChange, handleWrapperClick, inputRef, inputWrapperRef, isDropDownClosed, isInputFocused, selected, setIsInputFocused, toggleDropdown, triggerRef, } = 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 = buildCss( "dropdown_trigger_wrapper", isInputFocused && "focus", !autocomplete && "select_only" ); const customDisplayPlaceholder = selected.label ? ( {selected.label} ) : autocomplete ? ( "" ) : placeholder ? ( placeholder ) : ( "Select..." ); const defaultDisplayPlaceholder = selected.label ? selected.label : autocomplete ? "" : placeholder ? placeholder : "Select..."; return (
{ !triggerRef && ( children ? (
toggleDropdown()} onKeyDown= {handleKeyDown} ref={inputWrapperRef} style={{ display: "inline-block" }} tabIndex= {0} > {children}
) : ( <> handleWrapperClick(), onKeyDown: handleKeyDown, tabIndex: "0", ref:inputWrapperRef }} 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;