norma-library
Version:
Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.
33 lines • 1.97 kB
JavaScript
import React, { useState } from "react";
import Select from "react-select";
import * as S from "./styles";
import Option from "./components/Option";
import MultiValue from "./components/MultiValue";
var MultiSelectInput = function (_a) {
var className = _a.className, label = _a.label, onChange = _a.onChange, placeholder = _a.placeholder, disabled = _a.disabled, options = _a.options, value = _a.value, isSearchable = _a.isSearchable, isClearable = _a.isClearable;
var _b = useState(value), valueSelected = _b[0], setValueSelected = _b[1];
var components = {
MultiValueContainer: function (_a) {
var _b;
var selectProps = _a.selectProps, data = _a.data;
var values = selectProps.value;
if (values) {
var separator = values.length > 1 ? ', ' : '';
return ((_b = values[values.length - 1]) === null || _b === void 0 ? void 0 : _b.label) === (data === null || data === void 0 ? void 0 : data.label)
? data === null || data === void 0 ? void 0 : data.label
: (data === null || data === void 0 ? void 0 : data.label) + "".concat(separator);
}
return;
},
Option: Option,
MultiValue: MultiValue
};
return (React.createElement(S.Container, { className: className },
label ? React.createElement(S.Label, null, label) : null,
React.createElement(Select, { placeholder: placeholder, className: "react-select-container", classNamePrefix: "react-select", defaultValue: valueSelected || [], options: options, isMulti: true, closeMenuOnSelect: false, hideSelectedOptions: false, isDisabled: disabled, isSearchable: isSearchable, isClearable: isClearable, components: components, onChange: function (values) {
setValueSelected(values);
onChange(values);
} })));
};
export default MultiSelectInput;
//# sourceMappingURL=index.js.map