glass-app-manager/target/.yalc/@informatica/droplets-core/src/components/dropdown/SimpleDropdown.js

Informatica's Glass Framework CLI for bootstrapping

// @flow

import * as React from "react";

import classNames from "classnames";
import DownshiftWrapper from "./DownshiftWrapper";
import DropdownIcon from "./DropdownIcon";

import { highlightQuery } from "./utils";

type OptionDefinition = {
    text: string,
    value: any,
};

type Options = Array<OptionDefinition>;

type SimpleDropDownProps = {
    className?: string,
    placeholder?: string,
    search?: boolean,
    userInput?: boolean,
    visibleOptions: Options,
};

export default function SimpleDropdown(props: SimpleDropDownProps) {
    const { placeholder, search, userInput, visibleOptions } = props;

    return (
        <DownshiftWrapper {...props}>
            {({
                getInputProps,
                getItemProps,
                getMenuProps,
                getToggleButtonProps,
                highlightedIndex,
                inputValue,
                isOpen,
                selectedItem,
            }) => (
                <div className={classNames("dropdown", props.className)}>
                    <div className="dropdown__bar">
                        <input
                            className="dropdown__search"
                            {...getInputProps({
                                placeholder: placeholder,
                            })}
                        />

                        <DropdownIcon {...getToggleButtonProps()} />
                    </div>

                    {isOpen ? (
                        <div className="dropdown__menu" {...getMenuProps()}>
                            {visibleOptions.map((item, index) => (
                                <div
                                    className={classNames({
                                        dropdown__item: true,
                                        "dropdown__item--selected": selectedItem === item,
                                        "dropdown__item--active": highlightedIndex === index,
                                    })}
                                    {...getItemProps({
                                        key: item.value,
                                        item: item,
                                        index,
                                    })}>
                                    {search && userInput && inputValue ? (
                                        highlightQuery(item.text, inputValue)
                                    ) : (
                                        <span>{item.text}</span>
                                    )}
                                </div>
                            ))}
                        </div>
                    ) : null}
                </div>
            )}
        </DownshiftWrapper>
    );
}