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

chore: Grouping & reorganisation for Input widgets (#15584)

Browse Source
This commit is contained in:
Aswath K 2022-08-11 16:50:09 +05:30 committed by GitHub
parent 48ab154cf1
commit ee32ffb76f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 1455 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/client/src/pages/Editor/PropertyPane/Generator.tsx
View File

@ -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[];

367
app/client/src/widgets/BaseInputWidget/widget/index.tsx
View File

@ -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}}`,

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

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

106
app/client/src/widgets/CurrencyInputWidget/widget/index.tsx
View File

@ -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}})()}}`,

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

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

389
app/client/src/widgets/DatePickerWidget2/widget/index.tsx
View File

@ -400,6 +400,395 @@ class DatePickerWidget extends BaseWidget<DatePickerWidget2Props, WidgetState> {
];
}
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}})()}}`,

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

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

188
app/client/src/widgets/InputWidgetV2/widget/index.tsx
View File

@ -334,6 +334,194 @@ class InputWidget extends BaseInputWidget<InputWidgetProps, WidgetState> {
);
}
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}})()}}`,

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

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

98
app/client/src/widgets/PhoneInputWidget/widget/index.tsx
View File

@ -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}})()}}`,

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

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

292
app/client/src/widgets/RichTextEditorWidget/widget/index.tsx
View File

@ -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: "<b>Hello World</b>",
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<string, any> {
return {
text: undefined,