@brizy/ui
Version:
React elements in Brizy style
66 lines (65 loc) • 3.74 kB
JavaScript
import { classNames } from "../classNamesFn";
import Downshift from "downshift";
import React, { Component } from "react";
import { Manager } from "react-popper";
import { addLast, removeLast } from "timm";
import _ from "underscore";
import { Dropdown } from "./components/Dropdown";
import { Input } from "./components/Input";
import { BRZ_PREFIX } from "../constants";
export class ReactSelect extends Component {
constructor() {
super(...arguments);
this.state = {
inputValue: "",
};
this.selectRef = React.createRef();
this.inputRef = React.createRef();
this.handleChange = (changes, { isOpen }) => {
const { isMultiple, value, onChange } = this.props;
if (isMultiple) {
if (!isOpen) {
this.setState({ inputValue: "" });
}
if (_.has(changes, "value")) {
const newValue = Array.isArray(value) ? value : [];
onChange(addLast(newValue, changes.value));
}
}
else if (changes && "label" in changes && "value" in changes) {
this.setState({
inputValue: changes.value,
});
onChange(changes);
}
};
this.handleInputChange = (e) => {
this.setState({
inputValue: e.target.value,
});
};
this.handleInputKeyDown = e => {
const { value, isMultiple, onChange } = this.props;
// remove last item when trigger backspace
if (isMultiple && Array.isArray(value) && e.key === "Backspace" && !this.state.inputValue) {
onChange(removeLast(value));
}
};
this.itemToString = (i) => (i ? i.label : "");
}
render() {
const { className: _className, placeholder, isMultiple, value, isLight, onChange, options, maxItems, minItems, itemHeight, isFixed, } = this.props;
const { inputValue } = this.state;
const className = classNames(_className)("control__select2-container", { "control__select2--light": isLight });
return (React.createElement("div", { ref: this.selectRef, className: className },
React.createElement(Manager, null,
React.createElement(Downshift, { initialSelectedItem: value !== null && value !== void 0 ? value : "", selectedItem: value !== null && value !== void 0 ? value : "", onChange: this.handleChange, itemToString: this.itemToString }, ({ getInputProps, getItemProps, getMenuProps, isOpen, highlightedIndex, selectedItem, toggleMenu }) => (React.createElement("div", { className: `${BRZ_PREFIX}-control__select2` },
React.createElement(Input, Object.assign({}, getInputProps({
placeholder,
value: inputValue,
onKeyDown: this.handleInputKeyDown,
onChange: this.handleInputChange,
}), { selectedItem: selectedItem !== null && selectedItem !== void 0 ? selectedItem : "", isOpen: isOpen, isMultiple: isMultiple, toggleMenu: toggleMenu, inputRef: this.inputRef, onDeleteTag: onChange })),
React.createElement(Dropdown, { options: options, maxItems: maxItems, minItems: minItems, itemHeight: itemHeight, inputValue: inputValue, isFixed: isFixed, isOpen: isOpen, highlightedIndex: highlightedIndex !== null && highlightedIndex !== void 0 ? highlightedIndex : undefined, selectedItem: selectedItem, getMenuProps: getMenuProps, getItemProps: getItemProps, selectRef: this.selectRef, value: value, isMultiple: isMultiple, className: className })))))));
}
}