diff --git a/app/client/src/widgets/MultiSelectTreeWidget/index.ts b/app/client/src/widgets/MultiSelectTreeWidget/index.ts index 2bbd7adccf..dd0568bcda 100644 --- a/app/client/src/widgets/MultiSelectTreeWidget/index.ts +++ b/app/client/src/widgets/MultiSelectTreeWidget/index.ts @@ -52,6 +52,8 @@ export const CONFIG = { default: Widget.getDefaultPropertiesMap(), meta: Widget.getMetaPropertiesMap(), config: Widget.getPropertyPaneConfig(), + contentConfig: Widget.getPropertyPaneContentConfig(), + styleConfig: Widget.getPropertyPaneStyleConfig(), }, }; diff --git a/app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx b/app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx index 2dd58d05ad..91d5f5cc0f 100644 --- a/app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx +++ b/app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx @@ -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 }}`, diff --git a/app/client/src/widgets/MultiSelectWidgetV2/index.ts b/app/client/src/widgets/MultiSelectWidgetV2/index.ts index a25a8fb635..bf083487c9 100644 --- a/app/client/src/widgets/MultiSelectWidgetV2/index.ts +++ b/app/client/src/widgets/MultiSelectWidgetV2/index.ts @@ -37,6 +37,8 @@ export const CONFIG = { default: Widget.getDefaultPropertiesMap(), meta: Widget.getMetaPropertiesMap(), config: Widget.getPropertyPaneConfig(), + contentConfig: Widget.getPropertyPaneContentConfig(), + styleConfig: Widget.getPropertyPaneStyleConfig(), }, }; diff --git a/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx b/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx index ad78163ef1..d9744ce7e0 100644 --- a/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx +++ b/app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx @@ -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}}`, diff --git a/app/client/src/widgets/SelectWidget/index.ts b/app/client/src/widgets/SelectWidget/index.ts index 32ca54c64c..fbb12e85fc 100644 --- a/app/client/src/widgets/SelectWidget/index.ts +++ b/app/client/src/widgets/SelectWidget/index.ts @@ -37,6 +37,8 @@ export const CONFIG = { default: Widget.getDefaultPropertiesMap(), meta: Widget.getMetaPropertiesMap(), config: Widget.getPropertyPaneConfig(), + contentConfig: Widget.getPropertyPaneContentConfig(), + styleConfig: Widget.getPropertyPaneStyleConfig(), }, }; diff --git a/app/client/src/widgets/SelectWidget/widget/index.tsx b/app/client/src/widgets/SelectWidget/widget/index.tsx index aabae72ade..45c8b88f08 100644 --- a/app/client/src/widgets/SelectWidget/widget/index.tsx +++ b/app/client/src/widgets/SelectWidget/widget/index.tsx @@ -118,6 +118,7 @@ class SelectWidget extends BaseWidget { constructor(props: SelectWidgetProps) { super(props); } + static getPropertyPaneConfig() { return [ { @@ -465,6 +466,383 @@ class SelectWidget extends BaseWidget { ]; } + 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 { return { value: "defaultOptionValue", diff --git a/app/client/src/widgets/SingleSelectTreeWidget/index.ts b/app/client/src/widgets/SingleSelectTreeWidget/index.ts index 5e00d936e4..1832e9b854 100644 --- a/app/client/src/widgets/SingleSelectTreeWidget/index.ts +++ b/app/client/src/widgets/SingleSelectTreeWidget/index.ts @@ -51,6 +51,8 @@ export const CONFIG = { default: Widget.getDefaultPropertiesMap(), meta: Widget.getMetaPropertiesMap(), config: Widget.getPropertyPaneConfig(), + contentConfig: Widget.getPropertyPaneContentConfig(), + styleConfig: Widget.getPropertyPaneStyleConfig(), }, }; diff --git a/app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx b/app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx index bd63d30eb8..d10136b6e9 100644 --- a/app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx +++ b/app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx @@ -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] }}`,