95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
import React from "react";
|
|
import BaseControl, { ControlProps } from "./BaseControl";
|
|
import { MenuItem } from "@blueprintjs/core";
|
|
import { IItemRendererProps } from "@blueprintjs/select";
|
|
import { StyledMultiSelectDropDown } from "./StyledControls";
|
|
import _ from "lodash";
|
|
import { DropdownOption } from "widgets/DropdownWidget";
|
|
|
|
class MultiSelectControl extends BaseControl<MultiSelectControlProps> {
|
|
render() {
|
|
const selectedItems: DropdownOption[] = [];
|
|
_.map(this.props.propertyValue, (value) => {
|
|
const option = _.find(this.props.options, (option) => {
|
|
return option.value === value;
|
|
});
|
|
if (option) selectedItems.push(option);
|
|
return option;
|
|
});
|
|
return (
|
|
<StyledMultiSelectDropDown
|
|
items={this.props.options}
|
|
placeholder={this.props.placeholderText}
|
|
itemRenderer={this.renderItem}
|
|
tagRenderer={this.renderTag}
|
|
selectedItems={selectedItems}
|
|
tagInputProps={{ onRemove: this.onItemRemoved }}
|
|
onItemSelect={this.onItemSelect}
|
|
noResults={<MenuItem disabled={true} text="No results." />}
|
|
/>
|
|
);
|
|
}
|
|
|
|
onItemRemoved = (_tag: string, index: number) => {
|
|
const optionValues = this.props.propertyValue.filter(
|
|
(value: string, valueIndex: number) => {
|
|
return valueIndex !== index;
|
|
},
|
|
);
|
|
this.updateProperty(this.props.propertyName, optionValues);
|
|
};
|
|
|
|
renderTag = (option: DropdownOption) => {
|
|
return option.label;
|
|
};
|
|
|
|
onItemSelect = (option: DropdownOption): void => {
|
|
if (this.isOptionSelected(option)) {
|
|
const optionValues = this.props.propertyValue.filter((value: string) => {
|
|
return value !== option.value;
|
|
});
|
|
this.updateProperty(this.props.propertyName, optionValues);
|
|
} else {
|
|
let options = this.props.propertyValue || [];
|
|
options = [...options, option.value];
|
|
this.updateProperty(this.props.propertyName, options);
|
|
}
|
|
};
|
|
|
|
renderItem = (option: DropdownOption, itemProps: IItemRendererProps) => {
|
|
if (!itemProps.modifiers.matchesPredicate) {
|
|
return null;
|
|
}
|
|
const isSelected: boolean = this.isOptionSelected(option);
|
|
return (
|
|
<MenuItem
|
|
icon={isSelected ? "tick" : "blank"}
|
|
active={itemProps.modifiers.active}
|
|
key={option.value}
|
|
onClick={itemProps.handleClick}
|
|
text={option.label}
|
|
/>
|
|
);
|
|
};
|
|
|
|
isOptionSelected = (selectedOption: DropdownOption) => {
|
|
return (
|
|
_.findIndex(this.props.propertyValue, (value) => {
|
|
return value === selectedOption.value;
|
|
}) !== -1
|
|
);
|
|
};
|
|
|
|
static getControlType() {
|
|
return "MULTI_SELECT";
|
|
}
|
|
}
|
|
|
|
export interface MultiSelectControlProps extends ControlProps {
|
|
options: DropdownOption[];
|
|
placeholderText: string;
|
|
propertyValue: string[];
|
|
}
|
|
|
|
export default MultiSelectControl;
|