@try-at-software/input-elements
Version:
A package providing different input elements that are extensible and easily configurable for your custom needs.
44 lines (43 loc) • 2.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MultiValueDropdownInput = void 0;
const react_1 = require("@fluentui/react");
const React = require("react");
const Components_1 = require("../../Components");
const Utilities_1 = require("../../Utilities");
class MultiValueDropdownInput extends React.Component {
constructor() {
super(...arguments);
this.handleChange = (_event, option) => {
var _a, _b, _c;
const optionKey = (_a = option === null || option === void 0 ? void 0 : option.key) === null || _a === void 0 ? void 0 : _a.toString();
if (!optionKey)
return;
// We have to re-iterate the passed collection of values here in order to detect changes between the initial and the current values.
let currentValues = [];
if (this.props.value)
currentValues.push(...this.props.value);
// If the current option is selected, add it to the list.
// Else, remove it.
if (option.selected)
currentValues.push(optionKey);
else
currentValues = currentValues.filter((x) => x !== optionKey);
(_c = (_b = this.props).onChange) === null || _c === void 0 ? void 0 : _c.call(_b, currentValues);
};
}
render() {
var _a;
if (!this.props)
return null;
const { dynamicProps, operativeProps } = this.props;
const normalizedOptions = Utilities_1.DropdownHelper.getNormalizedOptions(dynamicProps.defaultOption, dynamicProps.options);
return (React.createElement(React.Fragment, null,
React.createElement(Components_1.LabelRenderer, { label: this.props.label, required: !!this.props.renderRequiredIndicator }),
React.createElement(react_1.Dropdown, { "data-automationid": "multi-value-dropdown-input", options: normalizedOptions, onChange: this.handleChange, required: !!this.props.renderRequiredIndicator, placeholder: operativeProps.placeholder,
// This value should never be `undefined`.
defaultSelectedKeys: this.props.value || [(_a = dynamicProps.defaultOption) === null || _a === void 0 ? void 0 : _a.key] || null, disabled: dynamicProps.isDisabled, multiSelect: true, multiSelectDelimiter: dynamicProps.multiSelectDelimiter }),
React.createElement(Components_1.ErrorRenderer, { error: this.props.errorMessage, messageBarType: react_1.MessageBarType.error })));
}
}
exports.MultiValueDropdownInput = MultiValueDropdownInput;