94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
import React from "react";
|
|
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
|
|
import { WidgetType } from "../constants/WidgetConstants";
|
|
import { ActionPayload } from "../constants/ActionConstants";
|
|
import DropDownComponent from "../components/blueprint/DropdownComponent";
|
|
import _ from "lodash";
|
|
|
|
class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
|
|
constructor(props: DropdownWidgetProps) {
|
|
super(props);
|
|
}
|
|
|
|
getPageView() {
|
|
return (
|
|
<DropDownComponent
|
|
onOptionSelected={this.onOptionSelected}
|
|
onOptionRemoved={this.onOptionRemoved}
|
|
widgetId={this.props.widgetId}
|
|
style={this.getPositionStyle()}
|
|
placeholder={this.props.placeholderText}
|
|
options={this.props.options || []}
|
|
selectionType={this.props.selectionType}
|
|
selectedIndex={this.props.selectedIndex || 0}
|
|
selectedIndexArr={this.props.selectedIndexArr || []}
|
|
label={this.props.label}
|
|
/>
|
|
);
|
|
}
|
|
|
|
onOptionSelected = (selectedOption: DropdownOption) => {
|
|
const selectedIndex = _.findIndex(this.props.options, option => {
|
|
return option.value === selectedOption.value;
|
|
});
|
|
if (this.props.selectionType === "SINGLE_SELECT") {
|
|
this.context.updateWidgetProperty(
|
|
this.props.widgetId,
|
|
"selectedIndex",
|
|
selectedIndex,
|
|
);
|
|
} else if (this.props.selectionType === "MULTI_SELECT") {
|
|
const selectedIndexArr = this.props.selectedIndexArr || [];
|
|
const isAlreadySelected =
|
|
_.find(selectedIndexArr, index => {
|
|
return index === selectedIndex;
|
|
}) !== undefined;
|
|
if (isAlreadySelected) {
|
|
this.onOptionRemoved(selectedIndex);
|
|
} else {
|
|
selectedIndexArr.push(selectedIndex);
|
|
this.context.updateWidgetProperty(
|
|
this.props.widgetId,
|
|
"selectedIndexArr",
|
|
selectedIndexArr,
|
|
);
|
|
}
|
|
}
|
|
};
|
|
|
|
onOptionRemoved = (removedIndex: number) => {
|
|
const updateIndexArr = this.props.selectedIndexArr
|
|
? this.props.selectedIndexArr.filter(index => {
|
|
return removedIndex !== index;
|
|
})
|
|
: [];
|
|
this.context.updateWidgetProperty(
|
|
this.props.widgetId,
|
|
"selectedIndexArr",
|
|
updateIndexArr,
|
|
);
|
|
};
|
|
|
|
getWidgetType(): WidgetType {
|
|
return "DROP_DOWN_WIDGET";
|
|
}
|
|
}
|
|
|
|
export type SelectionType = "SINGLE_SELECT" | "MULTI_SELECT";
|
|
export interface DropdownOption {
|
|
label: string;
|
|
value: string;
|
|
}
|
|
|
|
export interface DropdownWidgetProps extends WidgetProps {
|
|
placeholderText?: string;
|
|
label?: string;
|
|
selectedIndex?: number;
|
|
selectedIndexArr?: number[];
|
|
selectionType: SelectionType;
|
|
options?: DropdownOption[];
|
|
onOptionSelected?: ActionPayload[];
|
|
}
|
|
|
|
export default DropdownWidget;
|