wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
54 lines • 3.56 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var prop_types_1 = tslib_1.__importDefault(require("prop-types"));
var downshift_1 = tslib_1.__importDefault(require("downshift"));
var classnames_1 = tslib_1.__importDefault(require("classnames"));
var Close_1 = tslib_1.__importDefault(require("../icons/Close"));
var DropDownArrow_1 = tslib_1.__importDefault(require("../icons/DropDownArrow"));
var styles_scss_1 = tslib_1.__importDefault(require("./styles.scss"));
var input_1 = tslib_1.__importDefault(require("./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_1.default.createElement(downshift_1.default, { 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_1.default.createElement("div", { className: styles_scss_1.default.dropdown },
react_1.default.createElement(input_1.default, tslib_1.__assign({}, getInputProps({
value: inputValue,
placeholder: placeholder,
onChange: function (e) { return onChange(e.target.value); },
onClick: openMenu,
className: styles_scss_1.default.dropdownInput,
}))),
react_1.default.createElement("div", { className: styles_scss_1.default.dropdownIcons },
react_1.default.createElement(DropDownArrow_1.default, { size: "10px", onClick: openMenu }),
onClear && inputValue && (react_1.default.createElement(Close_1.default, { onClick: function () {
clearSelection();
onClear();
}, size: "8px" }))),
react_1.default.createElement("ul", tslib_1.__assign({ className: styles_scss_1.default.dropdownMenu }, getMenuProps()), isOpen &&
options.map(function (option, index) {
var _a;
return (react_1.default.createElement("li", tslib_1.__assign({ key: option.value }, getItemProps({
index: index,
item: option,
className: (0, classnames_1.default)(styles_scss_1.default.dropdownMenuItem, (_a = {},
_a[styles_scss_1.default.dropdownMenuItemSelected] = selectedItem && selectedItem.id === option.id,
_a[styles_scss_1.default.dropdownMenuItemHighlighted] = highlightedIndex === index,
_a)),
})), option.value));
}))));
}));
};
Dropdown.propTypes = {
value: prop_types_1.default.string,
options: prop_types_1.default.array,
selectedOption: prop_types_1.default.any,
onSelect: prop_types_1.default.func,
onChange: prop_types_1.default.func,
onClear: prop_types_1.default.func,
placeholder: prop_types_1.default.string,
};
exports.default = Dropdown;
//# sourceMappingURL=dropdown.js.map