Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: Grouping & Reorganisation for Select Widgets (#15831)

Browse Source
This commit is contained in:
Aswath K 2022-08-15 13:08:30 +05:30 committed by GitHub
parent fcfc3d97dc
commit 759ad4fda4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 1566 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/src/widgets/MultiSelectTreeWidget/index.ts
View File

@ -52,6 +52,8 @@ export const CONFIG = {
default: Widget.getDefaultPropertiesMap(),
meta: Widget.getMetaPropertiesMap(),
config: Widget.getPropertyPaneConfig(),
contentConfig: Widget.getPropertyPaneContentConfig(),
styleConfig: Widget.getPropertyPaneStyleConfig(),
},
};

407
app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx
View File

@ -432,6 +432,413 @@ class MultiSelectTreeWidget extends BaseWidget<
];
}
static getPropertyPaneContentConfig() {
return [
{
sectionName: "Data",
children: [
{
helpText:
"Allows users to select multiple options. Values must be unique",
propertyName: "options",
label: "Options",
controlType: "INPUT_TEXT",
placeholderText: "Enter option value",
isBindProperty: true,
isTriggerProperty: false,
isJSConvertible: false,
validation: {
type: ValidationTypes.NESTED_OBJECT_ARRAY,
params: {
unique: ["value"],
default: [],
children: {
type: ValidationTypes.OBJECT,
params: {
allowedKeys: [
{
name: "label",
type: ValidationTypes.TEXT,
params: {
default: "",
required: true,
},
},
{
name: "value",
type: ValidationTypes.TEXT,
params: {
default: "",
},
},
{
name: "children",
type: ValidationTypes.ARRAY,
required: false,
params: {
children: {
type: ValidationTypes.OBJECT,
params: {
allowedKeys: [
{
name: "label",
type: ValidationTypes.TEXT,
params: {
default: "",
required: true,
},
},
{
name: "value",
type: ValidationTypes.TEXT,
params: {
default: "",
},
},
],
},
},
},
},
],
},
},
},
},
evaluationSubstitutionType:
EvaluationSubstitutionType.SMART_SUBSTITUTE,
},
{
helpText: "Selects the option with value by default",
propertyName: "defaultOptionValue",
label: "Default Selected Values",
controlType: "INPUT_TEXT",
placeholderText: "Enter option value",
isBindProperty: true,
isTriggerProperty: false,
validation: {
type: ValidationTypes.FUNCTION,
params: {
fn: defaultOptionValueValidation,
expected: {
type: "Array of values",
example: `['value1', 'value2']`,
autocompleteDataType: AutocompleteDataType.ARRAY,
},
},
},
},
],
},
{
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: "DROP_DOWN",
options: [
{ label: "Left", value: LabelPosition.Left },
{ label: "Top", value: LabelPosition.Top },
{ label: "Auto", value: LabelPosition.Auto },
],
isBindProperty: false,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
{
helpText: "Sets the label alignment of the widget",
propertyName: "labelAlignment",
label: "Alignment",
controlType: "LABEL_ALIGNMENT_OPTIONS",
options: [
{
icon: "LEFT_ALIGN",
value: Alignment.LEFT,
},
{
icon: "RIGHT_ALIGN",
value: Alignment.RIGHT,
},
],
isBindProperty: false,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
hidden: (props: MultiSelectTreeWidgetProps) =>
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: MultiSelectTreeWidgetProps) =>
props.labelPosition !== LabelPosition.Left,
dependencies: ["labelPosition"],
},
],
},
{
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: "Mode to Display options",
propertyName: "mode",
label: "Mode",
controlType: "DROP_DOWN",
options: [
{
label: "Display only parent items",
value: "SHOW_PARENT",
},
{
label: "Display only child items",
value: "SHOW_CHILD",
},
{
label: "Display all items",
value: "SHOW_ALL",
},
],
isBindProperty: false,
isTriggerProperty: false,
},
{
helpText: "Sets a Placeholder Text",
propertyName: "placeholderText",
label: "Placeholder",
controlType: "INPUT_TEXT",
placeholderText: "Enter placeholder text",
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 },
},
{
propertyName: "allowClear",
label: "Allow Clearing Value",
helpText: "Enables Icon to clear all Selections",
controlType: "SWITCH",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.BOOLEAN },
},
{
propertyName: "expandAll",
label: "Expand all by Default",
helpText: "Expand All nested options",
controlType: "SWITCH",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.BOOLEAN },
},
],
},
{
sectionName: "Events",
children: [
{
helpText: "Triggers an action when a user selects an option",
propertyName: "onOptionChange",
label: "onOptionChange",
controlType: "ACTION_SELECTOR",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: true,
},
],
},
];
}
static getPropertyPaneStyleConfig() {
return [
{
sectionName: "Label Styles",
children: [
{
propertyName: "labelTextColor",
label: "Font Color",
controlType: "COLOR_PICKER",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
{
propertyName: "labelTextSize",
label: "Font Size",
controlType: "DROP_DOWN",
defaultValue: "0.875rem",
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: "XXL",
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",
controlType: "BUTTON_TABS",
options: [
{
icon: "BOLD_FONT",
value: "BOLD",
},
{
icon: "ITALICS_FONT",
value: "ITALIC",
},
],
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
],
},
{
sectionName: "Border and Shadow",
children: [
{
propertyName: "accentColor",
label: "Accent Color",
controlType: "COLOR_PICKER",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
invisible: true,
},
{
propertyName: "borderRadius",
label: "Border Radius",
helpText:
"Rounds the corners of the icon button's outer border edge",
controlType: "BORDER_RADIUS_OPTIONS",
isJSConvertible: true,
isBindProperty: 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 },
},
],
},
];
}
static getDerivedPropertiesMap() {
return {
selectedOptionLabels: `{{ this.selectedLabel }}`,

2
app/client/src/widgets/MultiSelectWidgetV2/index.ts
View File

@ -37,6 +37,8 @@ export const CONFIG = {
default: Widget.getDefaultPropertiesMap(),
meta: Widget.getMetaPropertiesMap(),
config: Widget.getPropertyPaneConfig(),
contentConfig: Widget.getPropertyPaneContentConfig(),
styleConfig: Widget.getPropertyPaneStyleConfig(),
},
};

388
app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx
View File

@ -553,6 +553,394 @@ class MultiSelectWidget extends BaseWidget<
];
}
static getPropertyPaneContentConfig() {
return [
{
sectionName: "Data",
children: [
{
helpText:
"Allows users to select multiple options. Values must be unique",
propertyName: "options",
label: "Options",
controlType: "INPUT_TEXT",
placeholderText: '[{ "label": "Option1", "value": "Option2" }]',
isBindProperty: true,
isTriggerProperty: false,
isJSConvertible: false,
validation: {
type: ValidationTypes.ARRAY,
params: {
unique: ["value"],
children: {
type: ValidationTypes.OBJECT,
params: {
required: true,
allowedKeys: [
{
name: "label",
type: ValidationTypes.TEXT,
params: {
default: "",
requiredKey: true,
},
},
{
name: "value",
type: ValidationTypes.TEXT,
params: {
default: "",
requiredKey: true,
},
},
],
},
},
},
},
evaluationSubstitutionType:
EvaluationSubstitutionType.SMART_SUBSTITUTE,
},
{
helpText: "Selects the option(s) with value by default",
propertyName: "defaultOptionValue",
label: "Default Selected Values",
controlType: "INPUT_TEXT",
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,
},
},
},
evaluationSubstitutionType:
EvaluationSubstitutionType.SMART_SUBSTITUTE,
},
],
},
{
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: "DROP_DOWN",
options: [
{ label: "Left", value: LabelPosition.Left },
{ label: "Top", value: LabelPosition.Top },
{ label: "Auto", value: LabelPosition.Auto },
],
isBindProperty: false,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
{
helpText: "Sets the label alignment of the widget",
propertyName: "labelAlignment",
label: "Alignment",
controlType: "LABEL_ALIGNMENT_OPTIONS",
options: [
{
icon: "LEFT_ALIGN",
value: Alignment.LEFT,
},
{
icon: "RIGHT_ALIGN",
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: "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: "Triggers an action when a user selects an option",
propertyName: "onOptionChange",
label: "onOptionChange",
controlType: "ACTION_SELECTOR",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: true,
},
],
},
];
}
static getPropertyPaneStyleConfig() {
return [
{
sectionName: "Label Styles",
children: [
{
propertyName: "labelTextColor",
label: "Font Color",
controlType: "COLOR_PICKER",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
{
propertyName: "labelTextSize",
label: "Font Size",
controlType: "DROP_DOWN",
defaultValue: "0.875rem",
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",
controlType: "BUTTON_TABS",
options: [
{
icon: "BOLD_FONT",
value: "BOLD",
},
{
icon: "ITALICS_FONT",
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 getDerivedPropertiesMap() {
return {
value: `{{this.selectedOptionValues}}`,

2
app/client/src/widgets/SelectWidget/index.ts
View File

@ -37,6 +37,8 @@ export const CONFIG = {
default: Widget.getDefaultPropertiesMap(),
meta: Widget.getMetaPropertiesMap(),
config: Widget.getPropertyPaneConfig(),
contentConfig: Widget.getPropertyPaneContentConfig(),
styleConfig: Widget.getPropertyPaneStyleConfig(),
},
};

378
app/client/src/widgets/SelectWidget/widget/index.tsx
View File

@ -118,6 +118,7 @@ class SelectWidget extends BaseWidget<SelectWidgetProps, WidgetState> {
constructor(props: SelectWidgetProps) {
super(props);
}
static getPropertyPaneConfig() {
return [
{
@ -465,6 +466,383 @@ class SelectWidget extends BaseWidget<SelectWidgetProps, WidgetState> {
];
}
static getPropertyPaneContentConfig() {
return [
{
sectionName: "Data",
children: [
{
helpText:
"Allows users to select a single option. Values must be unique",
propertyName: "options",
label: "Options",
controlType: "INPUT_TEXT",
placeholderText: '[{ "label": "label1", "value": "value1" }]',
isBindProperty: true,
isTriggerProperty: false,
validation: {
type: ValidationTypes.ARRAY,
params: {
unique: ["value"],
children: {
type: ValidationTypes.OBJECT,
params: {
required: true,
allowedKeys: [
{
name: "label",
type: ValidationTypes.TEXT,
params: {
default: "",
requiredKey: true,
},
},
{
name: "value",
type: ValidationTypes.TEXT,
params: {
default: "",
requiredKey: true,
},
},
],
},
},
},
},
evaluationSubstitutionType:
EvaluationSubstitutionType.SMART_SUBSTITUTE,
},
{
helpText: "Selects the option with value by default",
propertyName: "defaultOptionValue",
label: "Default Selected Value",
controlType: "INPUT_TEXT",
placeholderText: '{ "label": "label1", "value": "value1" }',
isBindProperty: true,
isTriggerProperty: false,
validation: {
type: ValidationTypes.FUNCTION,
params: {
fn: defaultOptionValueValidation,
expected: {
type: 'value1 or { "label": "label1", "value": "value1" }',
example: `value1 | { "label": "label1", "value": "value1" }`,
autocompleteDataType: AutocompleteDataType.STRING,
},
},
},
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: "DROP_DOWN",
options: [
{ label: "Left", value: LabelPosition.Left },
{ label: "Top", value: LabelPosition.Top },
{ label: "Auto", value: LabelPosition.Auto },
],
isBindProperty: false,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
{
helpText: "Sets the label alignment of the widget",
propertyName: "labelAlignment",
label: "Alignment",
controlType: "LABEL_ALIGNMENT_OPTIONS",
options: [
{
icon: "LEFT_ALIGN",
value: Alignment.LEFT,
},
{
icon: "RIGHT_ALIGN",
value: Alignment.RIGHT,
},
],
isBindProperty: false,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
hidden: (props: SelectWidgetProps) =>
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: SelectWidgetProps) =>
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: SelectWidgetProps) => !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: "Sets a Placeholder Text",
propertyName: "placeholderText",
label: "Placeholder",
controlType: "INPUT_TEXT",
placeholderText: "Enter placeholder text",
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 },
},
],
},
{
sectionName: "Events",
children: [
{
helpText: "Triggers an action when a user selects an option",
propertyName: "onOptionChange",
label: "onOptionChange",
controlType: "ACTION_SELECTOR",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: true,
},
],
},
];
}
static getPropertyPaneStyleConfig() {
return [
{
sectionName: "Label Styles",
children: [
{
propertyName: "labelTextColor",
label: "Font Color",
controlType: "COLOR_PICKER",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
{
propertyName: "labelTextSize",
label: "Font Size",
controlType: "DROP_DOWN",
defaultValue: "0.875rem",
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: "XXL",
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",
controlType: "BUTTON_TABS",
options: [
{
icon: "BOLD_FONT",
value: "BOLD",
},
{
icon: "ITALICS_FONT",
value: "ITALIC",
},
],
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
],
},
{
sectionName: "Colors",
children: [
{
propertyName: "accentColor",
label: "Accent Color",
controlType: "COLOR_PICKER",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
invisible: true,
},
],
},
{
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",
isJSConvertible: true,
isBindProperty: 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 },
},
],
},
];
}
static getDefaultPropertiesMap(): Record<string, string> {
return {
value: "defaultOptionValue",

2
app/client/src/widgets/SingleSelectTreeWidget/index.ts
View File

@ -51,6 +51,8 @@ export const CONFIG = {
default: Widget.getDefaultPropertiesMap(),
meta: Widget.getMetaPropertiesMap(),
config: Widget.getPropertyPaneConfig(),
contentConfig: Widget.getPropertyPaneContentConfig(),
styleConfig: Widget.getPropertyPaneStyleConfig(),
},
};

385
app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx
View File

@ -396,6 +396,391 @@ class SingleSelectTreeWidget extends BaseWidget<
];
}
static getPropertyPaneContentConfig() {
return [
{
sectionName: "Data",
children: [
{
helpText:
"Allows users to select multiple options. Values must be unique",
propertyName: "options",
label: "Options",
controlType: "INPUT_TEXT",
placeholderText: "Enter option value",
isBindProperty: true,
isTriggerProperty: false,
isJSConvertible: false,
validation: {
type: ValidationTypes.NESTED_OBJECT_ARRAY,
params: {
unique: ["value"],
default: [],
children: {
type: ValidationTypes.OBJECT,
params: {
allowedKeys: [
{
name: "label",
type: ValidationTypes.TEXT,
params: {
default: "",
required: true,
},
},
{
name: "value",
type: ValidationTypes.TEXT,
params: {
default: "",
},
},
{
name: "children",
type: ValidationTypes.ARRAY,
required: false,
params: {
children: {
type: ValidationTypes.OBJECT,
params: {
allowedKeys: [
{
name: "label",
type: ValidationTypes.TEXT,
params: {
default: "",
required: true,
},
},
{
name: "value",
type: ValidationTypes.TEXT,
params: {
default: "",
},
},
],
},
},
},
},
],
},
},
},
},
evaluationSubstitutionType:
EvaluationSubstitutionType.SMART_SUBSTITUTE,
},
{
helpText: "Selects the option with value by default",
propertyName: "defaultOptionValue",
label: "Default Selected Value",
controlType: "INPUT_TEXT",
placeholderText: "Enter option value",
isBindProperty: true,
isTriggerProperty: false,
validation: {
type: ValidationTypes.FUNCTION,
params: {
fn: defaultOptionValueValidation,
expected: {
type: "value",
example: `value1`,
autocompleteDataType: AutocompleteDataType.STRING,
},
},
},
},
],
},
{
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: "DROP_DOWN",
options: [
{ label: "Left", value: LabelPosition.Left },
{ label: "Top", value: LabelPosition.Top },
{ label: "Auto", value: LabelPosition.Auto },
],
isBindProperty: false,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
{
helpText: "Sets the label alignment of the widget",
propertyName: "labelAlignment",
label: "Alignment",
controlType: "LABEL_ALIGNMENT_OPTIONS",
options: [
{
icon: "LEFT_ALIGN",
value: Alignment.LEFT,
},
{
icon: "RIGHT_ALIGN",
value: Alignment.RIGHT,
},
],
isBindProperty: false,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
hidden: (props: SingleSelectTreeWidgetProps) =>
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: SingleSelectTreeWidgetProps) =>
props.labelPosition !== LabelPosition.Left,
dependencies: ["labelPosition"],
},
],
},
{
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: "Sets a Placeholder Text",
propertyName: "placeholderText",
label: "Placeholder",
controlType: "INPUT_TEXT",
placeholderText: "Enter placeholder text",
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 },
},
{
propertyName: "allowClear",
label: "Allow Clearing Value",
helpText: "Enables Icon to clear all Selections",
controlType: "SWITCH",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.BOOLEAN },
},
{
propertyName: "expandAll",
label: "Expand all by Default",
helpText: "Expand All nested options",
controlType: "SWITCH",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.BOOLEAN },
},
],
},
{
sectionName: "Events",
children: [
{
helpText: "Triggers an action when a user selects an option",
propertyName: "onOptionChange",
label: "onOptionChange",
controlType: "ACTION_SELECTOR",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: true,
},
],
},
];
}
static getPropertyPaneStyleConfig() {
return [
{
sectionName: "Label Styles",
children: [
{
propertyName: "labelTextColor",
label: "Font Color",
controlType: "COLOR_PICKER",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
{
propertyName: "labelTextSize",
label: "Font Size",
controlType: "DROP_DOWN",
defaultValue: "0.875rem",
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: "XXL",
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",
controlType: "BUTTON_TABS",
options: [
{
icon: "BOLD_FONT",
value: "BOLD",
},
{
icon: "ITALICS_FONT",
value: "ITALIC",
},
],
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
],
},
{
sectionName: "Border and Shadow",
children: [
{
propertyName: "accentColor",
label: "Accent Color",
controlType: "COLOR_PICKER",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
invisible: true,
},
{
propertyName: "borderRadius",
label: "Border Radius",
helpText:
"Rounds the corners of the icon button's outer border edge",
controlType: "BORDER_RADIUS_OPTIONS",
isJSConvertible: true,
isBindProperty: 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 },
},
],
},
];
}
static getDerivedPropertiesMap() {
return {
selectedOptionLabel: `{{ this.selectedLabel[0] }}`,