wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
52 lines • 2.91 kB
JavaScript
import { __assign } from "tslib";
import React from 'react';
import PropTypes from 'prop-types';
import Downshift from 'downshift';
import classnames from 'classnames';
import CloseIcon from '../icons/Close';
import DropDownArrowIcon from '../icons/DropDownArrow';
import styles from './styles.scss';
import Input from './input';
var Dropdown = function (_a) {
var value = _a.value, options = _a.options, selectedOption = _a.selectedOption, onSelect = _a.onSelect, onChange = _a.onChange, placeholder = _a.placeholder, onClear = _a.onClear;
return (React.createElement(Downshift, { onChange: onSelect, itemToString: function (item) { return (item ? item.value : ''); }, initialSelectedItem: selectedOption, initialInputValue: value }, function (_a) {
var getInputProps = _a.getInputProps, getItemProps = _a.getItemProps, getMenuProps = _a.getMenuProps, isOpen = _a.isOpen, inputValue = _a.inputValue, highlightedIndex = _a.highlightedIndex, selectedItem = _a.selectedItem, openMenu = _a.openMenu, clearSelection = _a.clearSelection;
return (React.createElement("div", { className: styles.dropdown },
React.createElement(Input, __assign({}, getInputProps({
value: inputValue,
placeholder: placeholder,
onChange: function (e) { return onChange(e.target.value); },
onClick: openMenu,
className: styles.dropdownInput,
}))),
React.createElement("div", { className: styles.dropdownIcons },
React.createElement(DropDownArrowIcon, { size: "10px", onClick: openMenu }),
onClear && inputValue && (React.createElement(CloseIcon, { onClick: function () {
clearSelection();
onClear();
}, size: "8px" }))),
React.createElement("ul", __assign({ className: styles.dropdownMenu }, getMenuProps()), isOpen &&
options.map(function (option, index) {
var _a;
return (React.createElement("li", __assign({ key: option.value }, getItemProps({
index: index,
item: option,
className: classnames(styles.dropdownMenuItem, (_a = {},
_a[styles.dropdownMenuItemSelected] = selectedItem && selectedItem.id === option.id,
_a[styles.dropdownMenuItemHighlighted] = highlightedIndex === index,
_a)),
})), option.value));
}))));
}));
};
Dropdown.propTypes = {
value: PropTypes.string,
options: PropTypes.array,
selectedOption: PropTypes.any,
onSelect: PropTypes.func,
onChange: PropTypes.func,
onClear: PropTypes.func,
placeholder: PropTypes.string,
};
export default Dropdown;
//# sourceMappingURL=dropdown.js.map