diff --git a/app/client/src/pages/Editor/PropertyPane/Generator.tsx b/app/client/src/pages/Editor/PropertyPane/Generator.tsx index 9edbfc47915..14ee90f5611 100644 --- a/app/client/src/pages/Editor/PropertyPane/Generator.tsx +++ b/app/client/src/pages/Editor/PropertyPane/Generator.tsx @@ -14,6 +14,11 @@ import { GUIDED_TOUR_STEPS } from "../GuidedTour/constants"; import { searchProperty } from "./helpers"; import { EmptySearchResult } from "./EmptySearchResult"; +export enum PropertyPaneGroup { + CONTENT, + STYLE, +} + export type PropertyControlsGeneratorProps = { id: string; config: readonly PropertyPaneConfig[]; diff --git a/app/client/src/widgets/BaseInputWidget/widget/index.tsx b/app/client/src/widgets/BaseInputWidget/widget/index.tsx index fa0a419f2f1..858df84479f 100644 --- a/app/client/src/widgets/BaseInputWidget/widget/index.tsx +++ b/app/client/src/widgets/BaseInputWidget/widget/index.tsx @@ -375,6 +375,373 @@ class BaseInputWidget< ]; } + static getPropertyPaneContentConfig() { + return [ + { + sectionName: "Label", + children: [ + { + helpText: "Sets the label text of the widget", + propertyName: "label", + label: "Text", + controlType: "INPUT_TEXT", + placeholderText: "Name:", + 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: BaseInputWidgetProps) => + 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: BaseInputWidgetProps) => + props.labelPosition !== LabelPosition.Left, + dependencies: ["labelPosition"], + }, + ], + }, + { + sectionName: "Validation", + children: [ + { + helpText: + "Adds a validation to the input which displays an error on failure", + propertyName: "regex", + label: "Regex", + controlType: "INPUT_TEXT", + placeholderText: "^\\w+@[a-zA-Z_]+?\\.[a-zA-Z]{2,3}$", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.REGEX }, + }, + { + helpText: "Sets the input validity based on a JS expression", + propertyName: "validation", + label: "Valid", + controlType: "INPUT_TEXT", + placeholderText: "{{ Input1.text.length > 0 }}", + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.BOOLEAN, + params: { + default: true, + }, + }, + }, + { + helpText: + "The error message to display if the regex or valid property check fails", + propertyName: "errorMessage", + label: "Error Message", + controlType: "INPUT_TEXT", + placeholderText: "Not a valid value!", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, + { + propertyName: "isSpellCheck", + label: "Spellcheck", + helpText: + "Defines whether the text input may be checked for spelling errors", + controlType: "SWITCH", + isJSConvertible: false, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + hidden: (props: BaseInputWidgetProps) => { + return props.inputType !== InputTypes.TEXT; + }, + dependencies: ["inputType"], + }, + ], + }, + { + sectionName: "General", + children: [ + { + helpText: "Show help text or details about current input", + propertyName: "tooltip", + label: "Tooltip", + controlType: "INPUT_TEXT", + placeholderText: "Value must be atleast 6 chars", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, + { + helpText: "Sets a placeholder text for the input", + propertyName: "placeholderText", + label: "Placeholder", + controlType: "INPUT_TEXT", + placeholderText: "Placeholder", + 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 }, + }, + { + helpText: "Disables input to this widget", + propertyName: "isDisabled", + label: "Disabled", + 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: "Focus input automatically on load", + propertyName: "autoFocus", + label: "Auto Focus", + controlType: "SWITCH", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + }, + { + propertyName: "allowFormatting", + label: "Enable Formatting", + helpText: "Formats the phone number as per the country selected", + controlType: "SWITCH", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + hidden: (props: BaseInputWidgetProps) => { + return props.type !== "PHONE_INPUT_WIDGET"; + }, + }, + ], + }, + { + sectionName: "Events", + children: [ + { + helpText: "Triggers an action when the text is changed", + propertyName: "onTextChanged", + label: "onTextChanged", + controlType: "ACTION_SELECTOR", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: true, + }, + { + helpText: + "Triggers an action on submit (when the enter key is pressed)", + propertyName: "onSubmit", + label: "onSubmit", + controlType: "ACTION_SELECTOR", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: true, + }, + { + helpText: "Clears the input value after submit", + propertyName: "resetOnSubmit", + label: "Reset on submit", + controlType: "SWITCH", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + }, + ], + }, + ]; + } + + 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, + params: { + regex: /^(?![<|{{]).+/, + }, + }, + }, + { + 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", + }, + ], + isBindProperty: false, + 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(): DerivedPropertiesMap { return { value: `{{this.text}}`, diff --git a/app/client/src/widgets/CurrencyInputWidget/index.ts b/app/client/src/widgets/CurrencyInputWidget/index.ts index c8154fef821..9a9cba3fd1a 100644 --- a/app/client/src/widgets/CurrencyInputWidget/index.ts +++ b/app/client/src/widgets/CurrencyInputWidget/index.ts @@ -22,6 +22,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/CurrencyInputWidget/widget/index.tsx b/app/client/src/widgets/CurrencyInputWidget/widget/index.tsx index d536a8148d5..f3a31df6fd0 100644 --- a/app/client/src/widgets/CurrencyInputWidget/widget/index.tsx +++ b/app/client/src/widgets/CurrencyInputWidget/widget/index.tsx @@ -179,6 +179,112 @@ class CurrencyInputWidget extends BaseInputWidget< ); } + static getPropertyPaneContentConfig() { + return mergeWidgetConfig( + [ + { + sectionName: "Data", + children: [ + { + helpText: + "Sets the default text of the widget. The text is updated if the default text changes", + propertyName: "defaultText", + label: "Default Value", + controlType: "INPUT_TEXT", + placeholderText: "100", + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.FUNCTION, + params: { + fn: defaultValueValidation, + expected: { + type: "number", + example: `100`, + autocompleteDataType: AutocompleteDataType.STRING, + }, + }, + }, + dependencies: ["decimals"], + }, + { + helpText: "Changes the type of currency", + propertyName: "defaultCurrencyCode", + label: "Currency", + enableSearch: true, + dropdownHeight: "156px", + controlType: "DROP_DOWN", + searchPlaceholderText: "Search by code or name", + options: CurrencyDropdownOptions, + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.TEXT, + }, + }, + { + propertyName: "allowCurrencyChange", + label: "Allow Currency Change", + helpText: "Search by currency or country", + controlType: "SWITCH", + isJSConvertible: false, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + }, + { + helpText: "No. of decimals in currency input", + propertyName: "decimals", + label: "Decimals Allowed", + controlType: "DROP_DOWN", + options: [ + { + label: "0", + value: 0, + }, + { + label: "1", + value: 1, + }, + { + label: "2", + value: 2, + }, + ], + isBindProperty: false, + isTriggerProperty: false, + }, + ], + }, + { + sectionName: "Label", + children: [], + }, + { + sectionName: "Validation", + children: [ + { + propertyName: "isRequired", + label: "Required", + helpText: "Makes input to the widget mandatory", + controlType: "SWITCH", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + }, + ], + }, + ], + super.getPropertyPaneContentConfig(), + ); + } + + static getPropertyPaneStyleConfig() { + return super.getPropertyPaneStyleConfig(); + } + static getDerivedPropertiesMap(): DerivedPropertiesMap { return { isValid: `{{(()=>{${derivedProperties.isValid}})()}}`, diff --git a/app/client/src/widgets/DatePickerWidget2/index.ts b/app/client/src/widgets/DatePickerWidget2/index.ts index ad961402f47..fcaa30e7482 100644 --- a/app/client/src/widgets/DatePickerWidget2/index.ts +++ b/app/client/src/widgets/DatePickerWidget2/index.ts @@ -39,6 +39,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/DatePickerWidget2/widget/index.tsx b/app/client/src/widgets/DatePickerWidget2/widget/index.tsx index db98f1c5097..70f68267cf9 100644 --- a/app/client/src/widgets/DatePickerWidget2/widget/index.tsx +++ b/app/client/src/widgets/DatePickerWidget2/widget/index.tsx @@ -400,6 +400,395 @@ class DatePickerWidget extends BaseWidget { ]; } + static getPropertyPaneContentConfig() { + return [ + { + sectionName: "Data", + children: [ + { + helpText: "Sets the format of the selected date", + propertyName: "dateFormat", + label: "Date Format", + controlType: "DROP_DOWN", + isJSConvertible: true, + optionWidth: "340px", + options: DateFormatOptions, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + hideSubText: true, + }, + { + propertyName: "defaultDate", + label: "Default Date", + helpText: + "Sets the default date of the widget. The date is updated if the default date changes", + controlType: "DATE_PICKER", + placeholderText: "Enter Default Date", + useValidationMessage: true, + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.DATE_ISO_STRING }, + }, + { + propertyName: "firstDayOfWeek", + label: "First Day Of Week", + helpText: "Defines the first day of the week for calendar", + controlType: "INPUT_TEXT", + defaultValue: "0", + inputType: "INTEGER", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.FUNCTION, + params: { + fn: allowedRange, + expected: { + type: + "0 : sunday\n1 : monday\n2 : tuesday\n3 : wednesday\n4 : thursday\n5 : friday\n6 : saturday", + example: "0", + autocompleteDataType: AutocompleteDataType.STRING, + }, + }, + }, + }, + { + propertyName: "timePrecision", + label: "Time Precision", + controlType: "DROP_DOWN", + helpText: "Sets the different time picker or hide.", + defaultValue: TimePrecision.MINUTE, + options: [ + { + label: "None", + value: TimePrecision.NONE, + }, + { + label: "Minute", + value: TimePrecision.MINUTE, + }, + { + label: "Second", + value: TimePrecision.SECOND, + }, + ], + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.TEXT, + params: { + allowedValues: [ + TimePrecision.NONE, + TimePrecision.MINUTE, + TimePrecision.SECOND, + ], + default: TimePrecision.MINUTE, + }, + }, + }, + ], + }, + { + sectionName: "Label", + children: [ + { + helpText: "Sets the label text of the widget", + propertyName: "label", + 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: DatePickerWidget2Props) => + 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: DatePickerWidget2Props) => + props.labelPosition !== LabelPosition.Left, + dependencies: ["labelPosition"], + }, + ], + }, + { + sectionName: "Validation", + children: [ + { + propertyName: "isRequired", + label: "Required", + helpText: "Makes input to the widget mandatory", + controlType: "SWITCH", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + }, + { + propertyName: "minDate", + label: "Min Date", + helpText: "Defines the min date for this widget", + controlType: "DATE_PICKER", + useValidationMessage: true, + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.DATE_ISO_STRING }, + }, + { + propertyName: "maxDate", + label: "Max Date", + helpText: "Defines the max date for this widget", + controlType: "DATE_PICKER", + useValidationMessage: true, + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.DATE_ISO_STRING }, + }, + ], + }, + { + sectionName: "General", + children: [ + { + propertyName: "isVisible", + label: "Visible", + helpText: "Controls the visibility of the widget", + 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: "shortcuts", + label: "Show Shortcuts", + helpText: "Choose to show shortcut menu", + controlType: "SWITCH", + isJSConvertible: false, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + }, + { + propertyName: "closeOnSelection", + label: "Close On Selection", + helpText: "Calender should close when a date is selected", + controlType: "SWITCH", + defaultValue: true, + isJSConvertible: false, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + }, + ], + }, + { + sectionName: "Events", + children: [ + { + propertyName: "onDateSelected", + label: "onDateSelected", + 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(): DerivedPropertiesMap { return { isValid: `{{(()=>{${derivedProperties.isValidDate}})()}}`, diff --git a/app/client/src/widgets/InputWidgetV2/index.ts b/app/client/src/widgets/InputWidgetV2/index.ts index b345eff0c82..d252db4b7bc 100644 --- a/app/client/src/widgets/InputWidgetV2/index.ts +++ b/app/client/src/widgets/InputWidgetV2/index.ts @@ -19,6 +19,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/InputWidgetV2/widget/index.tsx b/app/client/src/widgets/InputWidgetV2/widget/index.tsx index b971ad7614a..1fa1496deb1 100644 --- a/app/client/src/widgets/InputWidgetV2/widget/index.tsx +++ b/app/client/src/widgets/InputWidgetV2/widget/index.tsx @@ -334,6 +334,194 @@ class InputWidget extends BaseInputWidget { ); } + static getPropertyPaneContentConfig() { + return mergeWidgetConfig( + [ + { + sectionName: "Data", + children: [ + { + helpText: "Changes the type of data captured in the input", + propertyName: "inputType", + label: "Data Type", + controlType: "DROP_DOWN", + options: [ + { + label: "Text", + value: "TEXT", + }, + { + label: "Number", + value: "NUMBER", + }, + { + label: "Password", + value: "PASSWORD", + }, + { + label: "Email", + value: "EMAIL", + }, + ], + isBindProperty: false, + isTriggerProperty: false, + }, + { + helpText: + "Sets the default text of the widget. The text is updated if the default text changes", + propertyName: "defaultText", + label: "Default Value", + controlType: "INPUT_TEXT", + placeholderText: "John Doe", + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.FUNCTION, + params: { + fn: defaultValueValidation, + expected: { + type: "string or number", + example: `John | 123`, + autocompleteDataType: AutocompleteDataType.STRING, + }, + }, + }, + dependencies: ["inputType"], + }, + ], + }, + { + sectionName: "Label", + children: [], + }, + { + sectionName: "Validation", + children: [ + { + propertyName: "isRequired", + label: "Required", + helpText: "Makes input to the widget mandatory", + controlType: "SWITCH", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + }, + { + helpText: "Sets maximum allowed text length", + propertyName: "maxChars", + label: "Max Characters", + controlType: "INPUT_TEXT", + placeholderText: "255", + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.NUMBER, + params: { min: 1, natural: true }, + }, + hidden: (props: InputWidgetProps) => { + return props.inputType !== InputTypes.TEXT; + }, + dependencies: ["inputType"], + }, + { + helpText: "Sets the minimum allowed value", + propertyName: "minNum", + label: "Min", + controlType: "INPUT_TEXT", + placeholderText: "1", + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.FUNCTION, + params: { + fn: minValueValidation, + expected: { + type: "number", + example: `1`, + autocompleteDataType: AutocompleteDataType.NUMBER, + }, + }, + }, + hidden: (props: InputWidgetProps) => { + return props.inputType !== InputTypes.NUMBER; + }, + dependencies: ["inputType"], + }, + { + helpText: "Sets the maximum allowed value", + propertyName: "maxNum", + label: "Max", + controlType: "INPUT_TEXT", + placeholderText: "100", + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.FUNCTION, + params: { + fn: maxValueValidation, + expected: { + type: "number", + example: `100`, + autocompleteDataType: AutocompleteDataType.NUMBER, + }, + }, + }, + hidden: (props: InputWidgetProps) => { + return props.inputType !== InputTypes.NUMBER; + }, + dependencies: ["inputType"], + }, + ], + }, + ], + super.getPropertyPaneContentConfig(), + ); + } + + static getPropertyPaneStyleConfig() { + return mergeWidgetConfig( + [ + { + sectionName: "Icon", + children: [ + { + propertyName: "iconName", + label: "Icon", + helpText: "Sets the icon to be used in input field", + controlType: "ICON_SELECT", + isBindProperty: false, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, + { + propertyName: "iconAlign", + label: "Position", + helpText: "Sets the icon alignment of input field", + controlType: "ICON_TABS", + options: [ + { + icon: "VERTICAL_LEFT", + value: "left", + }, + { + icon: "VERTICAL_RIGHT", + value: "right", + }, + ], + isBindProperty: false, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + hidden: (props: InputWidgetProps) => !props.iconName, + dependencies: ["iconName"], + }, + ], + }, + ], + super.getPropertyPaneStyleConfig(), + ); + } + static getDerivedPropertiesMap(): DerivedPropertiesMap { return merge(super.getDerivedPropertiesMap(), { isValid: `{{(() => {${derivedProperties.isValid}})()}}`, diff --git a/app/client/src/widgets/PhoneInputWidget/index.ts b/app/client/src/widgets/PhoneInputWidget/index.ts index 72baef92a3c..227678626eb 100644 --- a/app/client/src/widgets/PhoneInputWidget/index.ts +++ b/app/client/src/widgets/PhoneInputWidget/index.ts @@ -22,6 +22,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/PhoneInputWidget/widget/index.tsx b/app/client/src/widgets/PhoneInputWidget/widget/index.tsx index 2b4c22a398c..49cdd543b67 100644 --- a/app/client/src/widgets/PhoneInputWidget/widget/index.tsx +++ b/app/client/src/widgets/PhoneInputWidget/widget/index.tsx @@ -138,6 +138,104 @@ class PhoneInputWidget extends BaseInputWidget< ); } + static getPropertyPaneContentConfig() { + return mergeWidgetConfig( + [ + { + sectionName: "Data", + children: [ + { + helpText: + "Sets the default text of the widget. The text is updated if the default text changes", + propertyName: "defaultText", + label: "Default Value", + controlType: "INPUT_TEXT", + placeholderText: "(000) 000-0000", + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.FUNCTION, + params: { + fn: defaultValueValidation, + expected: { + type: "string", + example: `(000) 000-0000`, + autocompleteDataType: AutocompleteDataType.STRING, + }, + }, + }, + }, + { + helpText: "Changes the country code", + propertyName: "defaultDialCode", + label: "Default Country Code", + enableSearch: true, + dropdownHeight: "156px", + controlType: "DROP_DOWN", + searchPlaceholderText: "Search by code or country name", + options: ISDCodeDropdownOptions, + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.TEXT, + }, + }, + { + propertyName: "allowDialCodeChange", + label: "Allow Country Code Change", + helpText: "Search by country", + controlType: "SWITCH", + isJSConvertible: false, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + }, + ], + }, + { + sectionName: "Label", + children: [], + }, + { + sectionName: "Validation", + 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: [ + // { + // propertyName: "allowFormatting", + // label: "Enable Formatting", + // helpText: "Formats the phone number as per the country selected", + // controlType: "SWITCH", + // isJSConvertible: true, + // isBindProperty: true, + // isTriggerProperty: false, + // validation: { type: ValidationTypes.BOOLEAN }, + // }, + // ], + // }, + ], + super.getPropertyPaneContentConfig(), + ); + } + + static getPropertyPaneStyleConfig() { + return super.getPropertyPaneStyleConfig(); + } + static getDerivedPropertiesMap(): DerivedPropertiesMap { return { isValid: `{{(() => {${derivedProperties.isValid}})()}}`, diff --git a/app/client/src/widgets/RichTextEditorWidget/index.ts b/app/client/src/widgets/RichTextEditorWidget/index.ts index 24b5fc5c855..5327ec37396 100644 --- a/app/client/src/widgets/RichTextEditorWidget/index.ts +++ b/app/client/src/widgets/RichTextEditorWidget/index.ts @@ -31,6 +31,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/RichTextEditorWidget/widget/index.tsx b/app/client/src/widgets/RichTextEditorWidget/widget/index.tsx index c09a8bf7b0e..42d8afc44ff 100644 --- a/app/client/src/widgets/RichTextEditorWidget/widget/index.tsx +++ b/app/client/src/widgets/RichTextEditorWidget/widget/index.tsx @@ -303,6 +303,298 @@ class RichTextEditorWidget extends BaseWidget< ]; } + static getPropertyPaneContentConfig() { + return [ + { + sectionName: "Data", + children: [ + { + propertyName: "inputType", + helpText: + "Sets the input type of the default text property in widget.", + label: "Input Type", + controlType: "DROP_DOWN", + options: [ + { + label: "Markdown", + value: "markdown", + }, + { + label: "HTML", + value: "html", + }, + ], + isBindProperty: false, + isTriggerProperty: false, + }, + { + propertyName: "defaultText", + helpText: + "Sets the default text of the widget. The text is updated if the default text changes", + label: "Default Value", + controlType: "INPUT_TEXT", + placeholderText: "Hello World", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, + ], + }, + { + 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: RichTextEditorWidgetProps) => + 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: RichTextEditorWidgetProps) => + 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: [ + { + propertyName: "isVisible", + label: "Visible", + helpText: "Controls the visibility of the widget", + 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: "isToolbarHidden", + label: "Hide toolbar", + helpText: "Controls the visibility of the toolbar", + controlType: "SWITCH", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + }, + ], + }, + { + sectionName: "Events", + children: [ + { + helpText: "Triggers an action when the text is changed", + propertyName: "onTextChange", + label: "onTextChanged", + 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", + }, + ], + isBindProperty: false, + isTriggerProperty: false, + }, + { + 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", + + 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 getMetaPropertiesMap(): Record { return { text: undefined,