932 lines
29 KiB
TypeScript
932 lines
29 KiB
TypeScript
import { Alignment } from "@blueprintjs/core";
|
|
import { LabelPosition } from "components/constants";
|
|
import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
|
|
import { Layers } from "constants/Layers";
|
|
import { ValidationTypes } from "constants/WidgetValidation";
|
|
import type { SetterConfig, Stylesheet } from "entities/AppTheming";
|
|
import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
|
|
import equal from "fast-deep-equal/es6";
|
|
import { isArray, isFinite, isString, xorWith } from "lodash";
|
|
import type { DraftValueType, LabelInValueType } from "rc-select/lib/Select";
|
|
import React from "react";
|
|
import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
|
|
import { isAutoLayout } from "layoutSystems/autolayout/utils/flexWidgetUtils";
|
|
import type { WidgetProps, WidgetState } from "widgets/BaseWidget";
|
|
import BaseWidget from "widgets/BaseWidget";
|
|
import { MinimumPopupWidthInPercentage } from "WidgetProvider/constants";
|
|
import {
|
|
isAutoHeightEnabledForWidget,
|
|
DefaultAutocompleteDefinitions,
|
|
isCompactMode,
|
|
} from "widgets/WidgetUtils";
|
|
import MultiSelectComponent from "../component";
|
|
import derivedProperties from "./parseDerivedProperties";
|
|
import type { AutocompletionDefinitions } from "WidgetProvider/constants";
|
|
import {
|
|
defaultValueExpressionPrefix,
|
|
getDefaultValueExpressionSuffix,
|
|
getOptionLabelValueExpressionPrefix,
|
|
optionLabelValueExpressionSuffix,
|
|
} from "../constants";
|
|
import {
|
|
defaultOptionValueValidation,
|
|
labelKeyValidation,
|
|
getLabelValueAdditionalAutocompleteData,
|
|
getLabelValueKeyOptions,
|
|
valueKeyValidation,
|
|
} from "./propertyUtils";
|
|
import type {
|
|
WidgetQueryConfig,
|
|
WidgetQueryGenerationFormConfig,
|
|
} from "WidgetQueryGenerators/types";
|
|
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
|
|
import { ResponsiveBehavior } from "layoutSystems/autolayout/utils/constants";
|
|
import { DynamicHeight } from "utils/WidgetFeatures";
|
|
import IconSVG from "../icon.svg";
|
|
import { WIDGET_TAGS, layoutConfigurations } from "constants/WidgetConstants";
|
|
|
|
class MultiSelectWidget extends BaseWidget<
|
|
MultiSelectWidgetProps,
|
|
WidgetState
|
|
> {
|
|
static type = "MULTI_SELECT_WIDGET_V2";
|
|
|
|
static getConfig() {
|
|
return {
|
|
name: "MultiSelect",
|
|
iconSVG: IconSVG,
|
|
tags: [WIDGET_TAGS.SELECT],
|
|
needsMeta: true,
|
|
searchTags: ["dropdown", "tags"],
|
|
};
|
|
}
|
|
|
|
static getFeatures() {
|
|
return {
|
|
dynamicHeight: {
|
|
sectionIndex: 4,
|
|
defaultValue: DynamicHeight.FIXED,
|
|
active: true,
|
|
},
|
|
};
|
|
}
|
|
|
|
static getDefaults() {
|
|
return {
|
|
rows: 7,
|
|
columns: 20,
|
|
animateLoading: true,
|
|
labelText: "Label",
|
|
labelPosition: LabelPosition.Top,
|
|
labelAlignment: Alignment.LEFT,
|
|
labelWidth: 5,
|
|
labelTextSize: "0.875rem",
|
|
sourceData: [
|
|
{ name: "Blue", code: "BLUE" },
|
|
{ name: "Green", code: "GREEN" },
|
|
{ name: "Red", code: "RED" },
|
|
],
|
|
optionLabel: "name",
|
|
optionValue: "code",
|
|
widgetName: "MultiSelect",
|
|
isFilterable: true,
|
|
serverSideFiltering: false,
|
|
defaultOptionValue: ["GREEN", "RED"],
|
|
version: 1,
|
|
isRequired: false,
|
|
isDisabled: false,
|
|
placeholderText: "Select option(s)",
|
|
responsiveBehavior: ResponsiveBehavior.Fill,
|
|
minWidth: FILL_WIDGET_MIN_WIDTH,
|
|
};
|
|
}
|
|
|
|
static getAutoLayoutConfig() {
|
|
return {
|
|
disabledPropsDefaults: {
|
|
labelPosition: LabelPosition.Top,
|
|
labelTextSize: "0.875rem",
|
|
},
|
|
defaults: {
|
|
rows: 6.6,
|
|
},
|
|
autoDimension: {
|
|
height: true,
|
|
},
|
|
widgetSize: [
|
|
{
|
|
viewportMinWidth: 0,
|
|
configuration: () => {
|
|
return {
|
|
minWidth: "160px",
|
|
};
|
|
},
|
|
},
|
|
],
|
|
disableResizeHandles: {
|
|
vertical: true,
|
|
},
|
|
};
|
|
}
|
|
|
|
static getMethods() {
|
|
return {
|
|
getQueryGenerationConfig(widget: WidgetProps) {
|
|
return {
|
|
select: {
|
|
where: `${widget.widgetName}.filterText`,
|
|
},
|
|
};
|
|
},
|
|
getPropertyUpdatesForQueryBinding(
|
|
queryConfig: WidgetQueryConfig,
|
|
widget: WidgetProps,
|
|
formConfig: WidgetQueryGenerationFormConfig,
|
|
) {
|
|
let modify;
|
|
|
|
if (queryConfig.select) {
|
|
modify = {
|
|
sourceData: queryConfig.select.data,
|
|
optionLabel: formConfig.aliases.find((d) => d.name === "label")
|
|
?.alias,
|
|
optionValue: formConfig.aliases.find((d) => d.name === "value")
|
|
?.alias,
|
|
defaultOptionValue: "",
|
|
serverSideFiltering: true,
|
|
onFilterUpdate: queryConfig.select.run,
|
|
};
|
|
}
|
|
|
|
return {
|
|
modify,
|
|
};
|
|
},
|
|
};
|
|
}
|
|
|
|
static getAutocompleteDefinitions(): AutocompletionDefinitions {
|
|
return {
|
|
"!doc":
|
|
"MultiSelect is used to capture user input/s from a specified list of permitted inputs. A MultiSelect captures multiple choices from a list of options",
|
|
"!url": "https://docs.appsmith.com/widget-reference/dropdown",
|
|
isVisible: DefaultAutocompleteDefinitions.isVisible,
|
|
filterText: {
|
|
"!type": "string",
|
|
"!doc": "The filter text for Server side filtering",
|
|
},
|
|
selectedOptionValues: {
|
|
"!type": "[string]",
|
|
"!doc": "The array of values selected in a multi select dropdown",
|
|
"!url": "https://docs.appsmith.com/widget-reference/dropdown",
|
|
},
|
|
selectedOptionLabels: {
|
|
"!type": "[string]",
|
|
"!doc":
|
|
"The array of selected option labels in a multi select dropdown",
|
|
"!url": "https://docs.appsmith.com/widget-reference/dropdown",
|
|
},
|
|
isDisabled: "bool",
|
|
isValid: "bool",
|
|
isDirty: "bool",
|
|
options: "[$__dropdownOption__$]",
|
|
};
|
|
}
|
|
|
|
static getPropertyPaneContentConfig() {
|
|
return [
|
|
{
|
|
sectionName: "Data",
|
|
children: [
|
|
{
|
|
helpText:
|
|
"Takes in an array of objects to display options. Bind data from an API using {{}}",
|
|
propertyName: "sourceData",
|
|
label: "Source Data",
|
|
controlType: "ONE_CLICK_BINDING_CONTROL",
|
|
controlConfig: {
|
|
aliases: [
|
|
{
|
|
name: "label",
|
|
isSearcheable: true,
|
|
isRequired: true,
|
|
},
|
|
{
|
|
name: "value",
|
|
isRequired: true,
|
|
},
|
|
],
|
|
sampleData: JSON.stringify(
|
|
[
|
|
{ name: "Blue", code: "BLUE" },
|
|
{ name: "Green", code: "GREEN" },
|
|
{ name: "Red", code: "RED" },
|
|
],
|
|
null,
|
|
2,
|
|
),
|
|
},
|
|
isJSConvertible: true,
|
|
placeholderText: '[{ "label": "Option1", "value": "Option2" }]',
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.ARRAY,
|
|
params: {
|
|
children: {
|
|
type: ValidationTypes.OBJECT,
|
|
params: {
|
|
required: true,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
evaluationSubstitutionType:
|
|
EvaluationSubstitutionType.SMART_SUBSTITUTE,
|
|
},
|
|
{
|
|
helpText:
|
|
"Choose or set a field from source data as the display label",
|
|
propertyName: "optionLabel",
|
|
label: "Label key",
|
|
controlType: "DROP_DOWN",
|
|
customJSControl: "WRAPPED_CODE_EDITOR",
|
|
controlConfig: {
|
|
wrapperCode: {
|
|
prefix: getOptionLabelValueExpressionPrefix,
|
|
suffix: optionLabelValueExpressionSuffix,
|
|
},
|
|
},
|
|
placeholderText: "",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
isJSConvertible: true,
|
|
evaluatedDependencies: ["sourceData"],
|
|
options: getLabelValueKeyOptions,
|
|
alwaysShowSelected: true,
|
|
validation: {
|
|
type: ValidationTypes.FUNCTION,
|
|
params: {
|
|
fn: labelKeyValidation,
|
|
expected: {
|
|
type: "String or Array<string>",
|
|
example: `color | ["blue", "green"]`,
|
|
autocompleteDataType: AutocompleteDataType.STRING,
|
|
},
|
|
},
|
|
},
|
|
additionalAutoComplete: getLabelValueAdditionalAutocompleteData,
|
|
},
|
|
{
|
|
helpText: "Choose or set a field from source data as the value",
|
|
propertyName: "optionValue",
|
|
label: "Value key",
|
|
controlType: "DROP_DOWN",
|
|
customJSControl: "WRAPPED_CODE_EDITOR",
|
|
controlConfig: {
|
|
wrapperCode: {
|
|
prefix: getOptionLabelValueExpressionPrefix,
|
|
suffix: optionLabelValueExpressionSuffix,
|
|
},
|
|
},
|
|
placeholderText: "",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
isJSConvertible: true,
|
|
evaluatedDependencies: ["sourceData"],
|
|
options: getLabelValueKeyOptions,
|
|
alwaysShowSelected: true,
|
|
validation: {
|
|
type: ValidationTypes.FUNCTION,
|
|
params: {
|
|
fn: valueKeyValidation,
|
|
expected: {
|
|
type: "String or Array<string | number | boolean>",
|
|
example: `color | [1, "orange"]`,
|
|
autocompleteDataType: AutocompleteDataType.STRING,
|
|
},
|
|
},
|
|
dependentPaths: ["sourceData"],
|
|
},
|
|
additionalAutoComplete: getLabelValueAdditionalAutocompleteData,
|
|
},
|
|
{
|
|
helpText: "Selects the option(s) with value by default",
|
|
propertyName: "defaultOptionValue",
|
|
label: "Default selected values",
|
|
controlType: "WRAPPED_CODE_EDITOR",
|
|
controlConfig: {
|
|
wrapperCode: {
|
|
prefix: defaultValueExpressionPrefix,
|
|
suffix: getDefaultValueExpressionSuffix,
|
|
},
|
|
},
|
|
placeholderText: "[GREEN]",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.FUNCTION,
|
|
params: {
|
|
fn: defaultOptionValueValidation,
|
|
expected: {
|
|
type: "Array of values",
|
|
example: ` "option1, option2" | ['option1', 'option2'] | [{ "label": "label1", "value": "value1" }]`,
|
|
autocompleteDataType: AutocompleteDataType.ARRAY,
|
|
},
|
|
},
|
|
dependentPaths: ["serverSideFiltering", "options"],
|
|
},
|
|
dependencies: ["serverSideFiltering", "options"],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Label",
|
|
children: [
|
|
{
|
|
helpText: "Sets the label text of the widget",
|
|
propertyName: "labelText",
|
|
label: "Text",
|
|
controlType: "INPUT_TEXT",
|
|
placeholderText: "Enter label text",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
},
|
|
{
|
|
helpText: "Sets the label position of the widget",
|
|
propertyName: "labelPosition",
|
|
label: "Position",
|
|
controlType: "ICON_TABS",
|
|
fullWidth: true,
|
|
hidden: isAutoLayout,
|
|
options: [
|
|
{ label: "Auto", value: LabelPosition.Auto },
|
|
{ label: "Left", value: LabelPosition.Left },
|
|
{ label: "Top", value: LabelPosition.Top },
|
|
],
|
|
defaultValue: LabelPosition.Top,
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
},
|
|
{
|
|
helpText: "Sets the label alignment of the widget",
|
|
propertyName: "labelAlignment",
|
|
label: "Alignment",
|
|
controlType: "LABEL_ALIGNMENT_OPTIONS",
|
|
fullWidth: false,
|
|
options: [
|
|
{
|
|
startIcon: "align-left",
|
|
value: Alignment.LEFT,
|
|
},
|
|
{
|
|
startIcon: "align-right",
|
|
value: Alignment.RIGHT,
|
|
},
|
|
],
|
|
isBindProperty: false,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
hidden: (props: MultiSelectWidgetProps) =>
|
|
props.labelPosition !== LabelPosition.Left,
|
|
dependencies: ["labelPosition"],
|
|
},
|
|
{
|
|
helpText:
|
|
"Sets the label width of the widget as the number of columns",
|
|
propertyName: "labelWidth",
|
|
label: "Width (in columns)",
|
|
controlType: "NUMERIC_INPUT",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
min: 0,
|
|
validation: {
|
|
type: ValidationTypes.NUMBER,
|
|
params: {
|
|
natural: true,
|
|
},
|
|
},
|
|
hidden: (props: MultiSelectWidgetProps) =>
|
|
props.labelPosition !== LabelPosition.Left,
|
|
dependencies: ["labelPosition"],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Search & filters",
|
|
children: [
|
|
{
|
|
propertyName: "isFilterable",
|
|
label: "Allow searching",
|
|
helpText: "Makes the dropdown list filterable",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.BOOLEAN },
|
|
},
|
|
{
|
|
helpText: "Enables server side filtering of the data",
|
|
propertyName: "serverSideFiltering",
|
|
label: "Server side filtering",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.BOOLEAN },
|
|
},
|
|
{
|
|
helpText: "Trigger an action on change of filterText",
|
|
hidden: (props: MultiSelectWidgetProps) =>
|
|
!props.serverSideFiltering,
|
|
dependencies: ["serverSideFiltering"],
|
|
propertyName: "onFilterUpdate",
|
|
label: "onFilterUpdate",
|
|
controlType: "ACTION_SELECTOR",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Validations",
|
|
children: [
|
|
{
|
|
propertyName: "isRequired",
|
|
label: "Required",
|
|
helpText: "Makes input to the widget mandatory",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.BOOLEAN },
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "General",
|
|
children: [
|
|
{
|
|
helpText: "Show help text or details about current selection",
|
|
propertyName: "labelTooltip",
|
|
label: "Tooltip",
|
|
controlType: "INPUT_TEXT",
|
|
placeholderText: "Add tooltip text here",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
},
|
|
{
|
|
helpText: "Sets a Placeholder Text",
|
|
propertyName: "placeholderText",
|
|
label: "Placeholder",
|
|
controlType: "INPUT_TEXT",
|
|
placeholderText: "Search",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
},
|
|
{
|
|
helpText: "Controls the visibility of the widget",
|
|
propertyName: "isVisible",
|
|
label: "Visible",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.BOOLEAN },
|
|
},
|
|
{
|
|
propertyName: "isDisabled",
|
|
label: "Disabled",
|
|
helpText: "Disables input to this widget",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.BOOLEAN },
|
|
},
|
|
{
|
|
propertyName: "animateLoading",
|
|
label: "Animate loading",
|
|
controlType: "SWITCH",
|
|
helpText: "Controls the loading of the widget",
|
|
defaultValue: true,
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.BOOLEAN },
|
|
},
|
|
{
|
|
helpText:
|
|
"Controls the visibility of select all option in dropdown.",
|
|
propertyName: "allowSelectAll",
|
|
label: "Allow select all",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.BOOLEAN },
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Events",
|
|
children: [
|
|
{
|
|
helpText: "when a user selects an option",
|
|
propertyName: "onOptionChange",
|
|
label: "onOptionChange",
|
|
controlType: "ACTION_SELECTOR",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: true,
|
|
},
|
|
{
|
|
helpText: "when the dropdown opens",
|
|
propertyName: "onDropdownOpen",
|
|
label: "onDropdownOpen",
|
|
controlType: "ACTION_SELECTOR",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: true,
|
|
},
|
|
{
|
|
helpText: "when the dropdown closes",
|
|
propertyName: "onDropdownClose",
|
|
label: "onDropdownClose",
|
|
controlType: "ACTION_SELECTOR",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: true,
|
|
},
|
|
],
|
|
},
|
|
];
|
|
}
|
|
|
|
static getPropertyPaneStyleConfig() {
|
|
return [
|
|
{
|
|
sectionName: "Label styles",
|
|
children: [
|
|
{
|
|
propertyName: "labelTextColor",
|
|
label: "Font color",
|
|
helpText: "Control the color of the label associated",
|
|
controlType: "COLOR_PICKER",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
},
|
|
{
|
|
propertyName: "labelTextSize",
|
|
label: "Font size",
|
|
helpText: "Control the font size of the label associated",
|
|
controlType: "DROP_DOWN",
|
|
defaultValue: "0.875rem",
|
|
hidden: isAutoLayout,
|
|
options: [
|
|
{
|
|
label: "S",
|
|
value: "0.875rem",
|
|
subText: "0.875rem",
|
|
},
|
|
{
|
|
label: "M",
|
|
value: "1rem",
|
|
subText: "1rem",
|
|
},
|
|
{
|
|
label: "L",
|
|
value: "1.25rem",
|
|
subText: "1.25rem",
|
|
},
|
|
{
|
|
label: "XL",
|
|
value: "1.875rem",
|
|
subText: "1.875rem",
|
|
},
|
|
{
|
|
label: "2xl",
|
|
value: "3rem",
|
|
subText: "3rem",
|
|
},
|
|
{
|
|
label: "3xl",
|
|
value: "3.75rem",
|
|
subText: "3.75rem",
|
|
},
|
|
],
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
},
|
|
{
|
|
propertyName: "labelStyle",
|
|
label: "Emphasis",
|
|
helpText: "Control if the label should be bold or italics",
|
|
controlType: "BUTTON_GROUP",
|
|
options: [
|
|
{
|
|
icon: "text-bold",
|
|
value: "BOLD",
|
|
},
|
|
{
|
|
icon: "text-italic",
|
|
value: "ITALIC",
|
|
},
|
|
],
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "Border and shadow",
|
|
children: [
|
|
{
|
|
propertyName: "borderRadius",
|
|
label: "Border radius",
|
|
helpText:
|
|
"Rounds the corners of the icon button's outer border edge",
|
|
controlType: "BORDER_RADIUS_OPTIONS",
|
|
isBindProperty: true,
|
|
isJSConvertible: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.TEXT,
|
|
},
|
|
},
|
|
{
|
|
propertyName: "boxShadow",
|
|
label: "Box shadow",
|
|
helpText:
|
|
"Enables you to cast a drop shadow from the frame of the widget",
|
|
controlType: "BOX_SHADOW_OPTIONS",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
},
|
|
{
|
|
propertyName: "accentColor",
|
|
label: "Accent color",
|
|
controlType: "COLOR_PICKER",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: { type: ValidationTypes.TEXT },
|
|
invisible: true,
|
|
},
|
|
],
|
|
},
|
|
];
|
|
}
|
|
|
|
static getStylesheetConfig(): Stylesheet {
|
|
return {
|
|
accentColor: "{{appsmith.theme.colors.primaryColor}}",
|
|
borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
|
|
boxShadow: "none",
|
|
};
|
|
}
|
|
|
|
static getDerivedPropertiesMap() {
|
|
return {
|
|
options: `{{(()=>{${derivedProperties.getOptions}})()}}`,
|
|
value: `{{this.selectedOptionValues}}`,
|
|
isValid: `{{(()=>{${derivedProperties.getIsValid}})()}}`,
|
|
selectedOptionValues: `{{(()=>{${derivedProperties.getSelectedOptionValues}})()}}`,
|
|
selectedOptionLabels: `{{(()=>{${derivedProperties.getSelectedOptionLabels}})()}}`,
|
|
};
|
|
}
|
|
|
|
static getDefaultPropertiesMap(): Record<string, string> {
|
|
return {
|
|
selectedOptions: "defaultOptionValue",
|
|
};
|
|
}
|
|
|
|
static getMetaPropertiesMap(): Record<string, any> {
|
|
return {
|
|
selectedOptions: undefined,
|
|
filterText: "",
|
|
isDirty: false,
|
|
};
|
|
}
|
|
|
|
componentDidUpdate(prevProps: MultiSelectWidgetProps): void {
|
|
// Check if defaultOptionValue is string
|
|
let isStringArray = false;
|
|
if (
|
|
this.props.defaultOptionValue &&
|
|
this.props.defaultOptionValue.some(
|
|
(value: any) => isString(value) || isFinite(value),
|
|
)
|
|
) {
|
|
isStringArray = true;
|
|
}
|
|
|
|
const hasChanges = isStringArray
|
|
? xorWith(
|
|
this.props.defaultOptionValue as string[],
|
|
prevProps.defaultOptionValue as string[],
|
|
equal,
|
|
).length > 0
|
|
: xorWith(
|
|
this.props.defaultOptionValue as OptionValue[],
|
|
prevProps.defaultOptionValue as OptionValue[],
|
|
equal,
|
|
).length > 0;
|
|
|
|
if (hasChanges && this.props.isDirty) {
|
|
this.props.updateWidgetMetaProperty("isDirty", false);
|
|
}
|
|
}
|
|
|
|
static getSetterConfig(): SetterConfig {
|
|
return {
|
|
__setters: {
|
|
setVisibility: {
|
|
path: "isVisible",
|
|
type: "boolean",
|
|
},
|
|
setDisabled: {
|
|
path: "isDisabled",
|
|
type: "boolean",
|
|
},
|
|
setRequired: {
|
|
path: "isRequired",
|
|
type: "boolean",
|
|
},
|
|
setSelectedOptions: {
|
|
path: "defaultOptionValue",
|
|
type: "array",
|
|
accessor: "selectedOptionValues",
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
getWidgetView() {
|
|
const options = isArray(this.props.options) ? this.props.options : [];
|
|
const minDropDownWidth =
|
|
(MinimumPopupWidthInPercentage / 100) *
|
|
(this.props.mainCanvasWidth ?? layoutConfigurations.MOBILE.maxWidth);
|
|
const { componentHeight, componentWidth } = this.props;
|
|
const values = this.mergeLabelAndValue();
|
|
const isInvalid =
|
|
"isValid" in this.props && !this.props.isValid && !!this.props.isDirty;
|
|
|
|
return (
|
|
<MultiSelectComponent
|
|
accentColor={this.props.accentColor}
|
|
allowSelectAll={this.props.allowSelectAll}
|
|
borderRadius={this.props.borderRadius}
|
|
boxShadow={this.props.boxShadow}
|
|
compactMode={isCompactMode(componentHeight)}
|
|
disabled={this.props.isDisabled ?? false}
|
|
dropDownWidth={minDropDownWidth}
|
|
dropdownStyle={{
|
|
zIndex: Layers.dropdownModalWidget,
|
|
}}
|
|
filterText={this.props.filterText}
|
|
isDynamicHeightEnabled={isAutoHeightEnabledForWidget(this.props)}
|
|
isFilterable={this.props.isFilterable}
|
|
isValid={!isInvalid}
|
|
labelAlignment={this.props.labelAlignment}
|
|
labelPosition={this.props.labelPosition}
|
|
labelStyle={this.props.labelStyle}
|
|
labelText={this.props.labelText}
|
|
labelTextColor={this.props.labelTextColor}
|
|
labelTextSize={this.props.labelTextSize}
|
|
labelTooltip={this.props.labelTooltip}
|
|
labelWidth={this.props.labelComponentWidth}
|
|
loading={this.props.isLoading}
|
|
onChange={this.onOptionChange}
|
|
onDropdownClose={this.onDropdownClose}
|
|
onDropdownOpen={this.onDropdownOpen}
|
|
onFilterChange={this.onFilterChange}
|
|
options={options}
|
|
placeholder={this.props.placeholderText as string}
|
|
renderMode={this.props.renderMode}
|
|
serverSideFiltering={this.props.serverSideFiltering}
|
|
value={values}
|
|
widgetId={this.props.widgetId}
|
|
width={componentWidth}
|
|
/>
|
|
);
|
|
}
|
|
|
|
onOptionChange = (value: DraftValueType) => {
|
|
this.props.updateWidgetMetaProperty("selectedOptions", value, {
|
|
triggerPropertyName: "onOptionChange",
|
|
dynamicString: this.props.onOptionChange,
|
|
event: {
|
|
type: EventType.ON_OPTION_CHANGE,
|
|
},
|
|
});
|
|
if (!this.props.isDirty) {
|
|
this.props.updateWidgetMetaProperty("isDirty", true);
|
|
}
|
|
};
|
|
|
|
// { label , value } is needed in the widget
|
|
mergeLabelAndValue = (): LabelInValueType[] => {
|
|
if (!this.props.selectedOptionLabels || !this.props.selectedOptionValues) {
|
|
return [];
|
|
}
|
|
const labels = [...this.props.selectedOptionLabels];
|
|
const values = [...this.props.selectedOptionValues];
|
|
return values.map((value, index) => ({
|
|
value,
|
|
label: labels[index],
|
|
}));
|
|
};
|
|
|
|
onFilterChange = (value: string) => {
|
|
this.props.updateWidgetMetaProperty("filterText", value);
|
|
|
|
if (this.props.onFilterUpdate && this.props.serverSideFiltering) {
|
|
super.executeAction({
|
|
triggerPropertyName: "onFilterUpdate",
|
|
dynamicString: this.props.onFilterUpdate,
|
|
event: {
|
|
type: EventType.ON_FILTER_UPDATE,
|
|
},
|
|
});
|
|
}
|
|
};
|
|
|
|
onDropdownOpen = () => {
|
|
if (this.props.onDropdownOpen) {
|
|
super.executeAction({
|
|
triggerPropertyName: "onDropdownOpen",
|
|
dynamicString: this.props.onDropdownOpen,
|
|
event: {
|
|
type: EventType.ON_DROPDOWN_OPEN,
|
|
},
|
|
});
|
|
}
|
|
};
|
|
|
|
onDropdownClose = () => {
|
|
if (this.props.onDropdownClose) {
|
|
super.executeAction({
|
|
triggerPropertyName: "onDropdownClose",
|
|
dynamicString: this.props.onDropdownClose,
|
|
event: {
|
|
type: EventType.ON_DROPDOWN_CLOSE,
|
|
},
|
|
});
|
|
}
|
|
};
|
|
}
|
|
export interface OptionValue {
|
|
label: string;
|
|
value: string;
|
|
}
|
|
export interface DropdownOption extends OptionValue {
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export interface MultiSelectWidgetProps extends WidgetProps {
|
|
placeholderText?: string;
|
|
selectedIndex?: number;
|
|
selectedIndexArr?: number[];
|
|
selectedOption: DropdownOption;
|
|
options?: DropdownOption[];
|
|
onOptionChange: string;
|
|
onFilterChange: string;
|
|
onDropdownOpen?: string;
|
|
onDropdownClose?: string;
|
|
defaultOptionValue: string[] | OptionValue[];
|
|
isRequired: boolean;
|
|
isLoading: boolean;
|
|
selectedOptions: LabelInValueType[];
|
|
filterText: string;
|
|
selectedOptionValues?: string[];
|
|
selectedOptionLabels?: string[];
|
|
serverSideFiltering: boolean;
|
|
onFilterUpdate: string;
|
|
allowSelectAll?: boolean;
|
|
isFilterable: boolean;
|
|
labelText: string;
|
|
labelPosition?: LabelPosition;
|
|
labelAlignment?: Alignment;
|
|
labelWidth?: number;
|
|
isDirty?: boolean;
|
|
labelComponentWidth?: number;
|
|
}
|
|
|
|
export default MultiSelectWidget;
|