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

added new control types

Browse Source 
removed alert from widget list
added property config values
added input validator
This commit is contained in:
Nikhil Nandagopal 2019-09-19 16:59:24 +05:30
parent 60714e19f2
commit 5f6aeb55f8
13 changed files with 492 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/client/src/constants/PropertyControlConstants.tsx
View File

@ -7,4 +7,11 @@ export type ControlType =
| "DATE_PICKER"
| "DROP_DOWN"
| "COLOR_PICKER"
| "TIMEZONE_PICKER"
| "ACTION_SELECTOR"
| "RECORD_ACTION_SELECTOR"
| "OPTION_INPUT"
| "IMAGE_PICKER"
| "SHAPE_PICKER"
| "VALIDATION_INPUT"
| "ZOOM";

4
app/client/src/constants/WidgetConstants.tsx
View File

@ -10,8 +10,7 @@ export type WidgetType =
| "CHECKBOX_WIDGET"
| "RADIO_GROUP_WIDGET"
| "INPUT_WIDGET"
| "SWITCH_WIDGET"
| "ALERT_WIDGET";
| "SWITCH_WIDGET";
export const WidgetTypes: { [id: string]: WidgetType } = {
BUTTON_WIDGET: "BUTTON_WIDGET",
@ -26,7 +25,6 @@ export const WidgetTypes: { [id: string]: WidgetType } = {
DROP_DOWN_WIDGET: "DROP_DOWN_WIDGET",
CHECKBOX_WIDGET: "CHECKBOX_WIDGET",
RADIO_GROUP_WIDGET: "RADIO_GROUP_WIDGET",
ALERT_WIDGET: "ALERT_WIDGET",
};
export type ContainerOrientation = "HORIZONTAL" | "VERTICAL";

480
app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
View File

@ -8,14 +8,14 @@ const PropertyPaneConfigResponse: PropertyPaneConfigState = {
id: "1",
children: [
{
id: "1",
id: "1.1",
propertyName: "text",
label: "Button Text",
controlType: "INPUT_TEXT",
placeholderText: "Enter button text here",
},
{
id: "2",
id: "1.2",
propertyName: "buttonStyle",
label: "Button Style",
controlType: "DROP_DOWN",
@ -24,18 +24,29 @@ const PropertyPaneConfigResponse: PropertyPaneConfigState = {
{ label: "Secondary Button", value: "SECONDARY_BUTTON" },
],
},
{
id: "1.3",
propertyName: "isDisabled",
label: "Disabled",
controlType: "SWITCH",
},
{
id: "1.4",
propertyName: "isVisible",
label: "Visibile",
controlType: "SWITCH",
},
],
},
{
sectionName: "Action",
sectionName: "Actions",
id: "2",
children: [
{
id: "3",
propertyName: "text",
label: "Button Text",
controlType: "INPUT_TEXT",
placeholderText: "Enter button text here",
id: "2.1",
propertyName: "onClick",
label: "onClick",
controlType: "ACTION_SELECTOR",
},
],
},
@ -44,84 +55,497 @@ const PropertyPaneConfigResponse: PropertyPaneConfigState = {
{
sectionName: "General",
id: "3",
children: [],
children: [
{
id: "3.1",
propertyName: "text",
label: "Text",
controlType: "INPUT_TEXT",
placeholderText: "Enter your text here",
},
{
id: "3.2",
propertyName: "textStyle",
label: "Text Style",
controlType: "DROP_DOWN",
options: [
{ label: "Heading", value: "HEADING" },
{ label: "Label", value: "LABEL" },
{ label: "Body", value: "BODY" },
{ label: "Sub text", value: "SUB_TEXT" },
],
},
{
id: "3.3",
propertyName: "isVisible",
label: "Visibile",
controlType: "SWITCH",
},
],
},
],
IMAGE_WIDGET: [
{
sectionName: "General",
id: "4",
children: [],
children: [
{
id: "4.1",
propertyName: "image",
label: "Image",
controlType: "IMAGE_PICKER",
},
{
id: "4.2",
propertyName: "defaultImage",
label: "Default Image",
controlType: "IMAGE_PICKER",
},
{
id: "4.3",
propertyName: "imageShape",
label: "Shape",
controlType: "SHAPE_PICKER",
},
{
id: "4.4",
propertyName: "isVisible",
label: "Visibile",
controlType: "SWITCH",
},
],
},
],
INPUT_WIDGET: [
{
sectionName: "General",
id: "5",
children: [],
children: [
{
id: "5.1",
propertyName: "label",
label: "Label",
controlType: "INPUT_TEXT",
inputType: "TEXT",
placeholderText: "Label the widget",
},
{
id: "5.2",
propertyName: "inputType",
label: "Data Type",
controlType: "DROP_DOWN",
options: [
{ label: "Text", value: "TEXT" },
{ label: "Number", value: "NUMBER" },
{ label: "Integer", value: "INTEGER" },
{ label: "Phone Number", value: "PHONE_NUMBER" },
{ label: "Email", value: "EMAIL" },
{ label: "Passwork", value: "PASSWORD" },
{ label: "Currency", value: "CURRENCY" },
{ label: "Search", value: "SEARCH" },
],
},
{
id: "5.3",
propertyName: "placeholderText",
label: "Placeholder",
controlType: "INPUT_TEXT",
placeholderText: "Enter your text here",
},
{
id: "5.4",
propertyName: "maxChars",
label: "Max Chars",
controlType: "INPUT_TEXT",
inputType: "INTEGER",
placeholderText: "Maximum character length",
},
{
id: "5.5",
propertyName: "validators",
label: "Validators",
controlType: "VALIDATION_INPUT",
},
{
id: "5.6",
children: [
{
id: "5.6.1",
propertyName: "focusIndexx",
label: "Focus Index",
controlType: "INPUT_TEXT",
inputType: "INTEGER",
placeholderText: "Enter the order of tab focus",
},
{
id: "5.6.2",
propertyName: "autoFocus",
label: "Auto Focus",
controlType: "SWITCH",
},
],
},
{
id: "5.7",
propertyName: "isVisible",
label: "Visibile",
controlType: "SWITCH",
},
{
id: "5.8",
propertyName: "isDisabled",
label: "Disabled",
controlType: "SWITCH",
},
],
},
],
SWITCH_WIDGET: [
{
sectionName: "General",
id: "6",
children: [],
children: [
{
id: "6.1",
propertyName: "label",
label: "Label",
controlType: "INPUT_TEXT",
inputType: "TEXT",
placeholderText: "Label the widget",
},
{
id: "6.2",
propertyName: "isOn",
label: "Default State",
controlType: "SWITCH",
},
{
id: "6.3",
propertyName: "isVisible",
label: "Visibile",
controlType: "SWITCH",
},
{
id: "6.4",
propertyName: "isDisabled",
label: "Disabled",
controlType: "SWITCH",
},
],
},
],
CONTAINER_WIDGET: [
{
sectionName: "General",
id: "7",
children: [],
children: [
{
id: "7.1",
propertyName: "backgroundColor",
label: "Background Color",
controlType: "COLOR_PICKER",
},
{
id: "6.3",
propertyName: "isVisible",
label: "Visibile",
controlType: "SWITCH",
},
],
},
],
SPINNER_WIDGET: [
{
sectionName: "General",
id: "8",
children: [],
children: [
{
id: "8.1",
propertyName: "isVisible",
label: "Visibile",
controlType: "SWITCH",
},
],
},
],
DATE_PICKER_WIDGET: [
{
sectionName: "General",
id: "9",
children: [],
children: [
{
id: "9.1",
propertyName: "datePickerType",
label: "Picker Type",
controlType: "DROP_DOWN",
options: [
{ label: "Single Date", value: "DATE_PICKER" },
{ label: "Date Range", value: "DATE_RANGE_PICKER" },
],
},
{
id: "9.4",
propertyName: "label",
label: "Enter Date Label",
controlType: "INPUT_TEXT",
},
{
id: "9.1",
propertyName: "defaultDate",
label: "Default Date",
controlType: "DATE_PICKER",
},
{
id: "9.2",
propertyName: "defaultTimezone",
label: "Default Timezone",
controlType: "TIMEZONE_PICKER",
},
{
id: "9.3",
propertyName: "enableTime",
label: "Enable Pick Time",
controlType: "SWITCH",
},
{
id: "9.5",
propertyName: "isVisible",
label: "Visibile",
controlType: "SWITCH",
},
{
id: "9.6",
propertyName: "isDisabled",
label: "Disabled",
controlType: "SWITCH",
},
],
},
{
sectionName: "Actions",
id: "10",
children: [
{
id: "10.1",
propertyName: "onDateSelected",
label: "onDateSelected",
controlType: "ACTION_SELECTOR",
},
{
id: "10.2",
propertyName: "onDateRangeSelected",
label: "onDateRangeSelected",
controlType: "ACTION_SELECTOR",
},
],
},
],
TABLE_WIDGET: [
{
sectionName: "General",
id: "9",
children: [],
id: "11",
children: [
{
id: "11.1",
propertyName: "label",
label: "Enter Table Label",
controlType: "INPUT_TEXT",
},
{
id: "11.2",
propertyName: "tableData",
label: "Enter data array",
controlType: "INPUT_TEXT",
},
{
id: "11.3",
propertyName: "nextPageKey",
label: "Next Pagination Key",
controlType: "INPUT_TEXT",
},
{
id: "11.4",
propertyName: "prevPageKey",
label: "Previous Pagination Key",
controlType: "INPUT_TEXT",
},
{
id: "11.5",
propertyName: "isVisible",
label: "Visibile",
controlType: "SWITCH",
},
],
},
{
sectionName: "Actions",
id: "12",
children: [
{
id: "12.1",
propertyName: "tableActions",
label: "Record action",
controlType: "RECORD_ACTION_SELECTOR",
},
{
id: "12.2",
propertyName: "onRowSelected",
label: "onRowSelected",
controlType: "ACTION_SELECTOR",
},
{
id: "12.3",
propertyName: "onPageChange",
label: "onPageChange",
controlType: "ACTION_SELECTOR",
},
],
},
],
DROP_DOWN_WIDGET: [
{
sectionName: "General",
id: "10",
children: [],
id: "13",
children: [
{
id: "13.1",
propertyName: "type",
label: "Selection Type",
controlType: "DROP_DOWN",
options: [
{ label: "Single Select", value: "SINGLE_SELECT" },
{ label: "Multi Select", value: "MULTI_SELECT" },
],
},
{
id: "13.2",
propertyName: "label",
label: "Label",
controlType: "INPUT_TEXT",
placeholderText: "Enter the label",
},
{
id: "13.3",
propertyName: "placeholderText",
label: "Placeholder",
controlType: "INPUT_TEXT",
placeholderText: "Enter the placeholder",
},
{
id: "13.4",
propertyName: "options",
label: "Options",
controlType: "OPTION_INPUT",
},
{
id: "13.5",
propertyName: "isVisible",
label: "Visibile",
controlType: "SWITCH",
},
],
},
{
sectionName: "Actions",
id: "14",
children: [
{
id: "14.1",
propertyName: "onOptionSelected",
label: "onOptionSelected",
controlType: "ACTION_SELECTOR",
},
],
},
],
CHECKBOX_WIDGET: [
{
sectionName: "General",
id: "11",
children: [],
id: "15",
children: [
{
id: "15.1",
propertyName: "label",
label: "Label",
controlType: "INPUT_TEXT",
placeholderText: "Enter the label",
},
{
id: "15.2",
propertyName: "defaultCheckedState",
label: "Default State",
controlType: "SWITCH",
},
{
id: "13.5",
propertyName: "isDisabled",
label: "Disabled",
controlType: "SWITCH",
},
{
id: "13.5",
propertyName: "isVisible",
label: "Visibile",
controlType: "SWITCH",
},
],
},
{
sectionName: "Actions",
id: "16",
children: [
{
id: "16.1",
propertyName: "onCheckChange",
label: "onCheckChange",
controlType: "ACTION_SELECTOR",
},
],
},
],
RADIO_GROUP_WIDGET: [
{
sectionName: "General",
id: "12",
children: [],
id: "16",
children: [
{
id: "16.1",
propertyName: "label",
label: "Label",
controlType: "INPUT_TEXT",
placeholderText: "Enter the label",
},
{
id: "16.2",
propertyName: "defaultOptionValue",
label: "Default Selected Value",
controlType: "SWITCH",
},
{
id: "16.3",
propertyName: "options",
label: "Options",
controlType: "OPTION_INPUT",
},
{
id: "13.5",
propertyName: "isVisible",
label: "Visibile",
controlType: "SWITCH",
},
],
},
],
ALERT_WIDGET: [
{
sectionName: "General",
id: "13",
children: [],
sectionName: "Actions",
id: "17",
children: [
{
id: "17.1",
propertyName: "onOptionSelected",
label: "onOptionSelected",
controlType: "ACTION_SELECTOR",
},
],
},
],
},

9
app/client/src/pages/Editor/PropertyPane.tsx
View File

@ -37,11 +37,7 @@ class PropertyPane extends Component<
}
}
renderPropertySection(
propertySection: PropertySection,
key: string,
isHorizontal?: boolean,
) {
renderPropertySection(propertySection: PropertySection, key: string) {
return (
<div key={key}>
{!_.isNil(propertySection) ? (
@ -51,7 +47,7 @@ class PropertyPane extends Component<
)}
<div
style={
isHorizontal
propertySection.orientation === "HORIZONTAL"
? { flexDirection: "row" }
: { flexDirection: "column" }
}
@ -63,7 +59,6 @@ class PropertyPane extends Component<
return this.renderPropertySection(
propertyControlOrSection,
propertyControlOrSection.id,
true,
);
} else {
return PropertyControlFactory.createControl(

3
app/client/src/pages/propertyControls/InputTextControl.tsx
View File

@ -2,6 +2,7 @@ import React from "react";
import BaseControl, { ControlProps } from "./BaseControl";
import { ControlType } from "../../constants/PropertyControlConstants";
import { InputGroup } from "@blueprintjs/core";
import { InputType } from "../../widgets/InputWidget";
class InputTextControl extends BaseControl<InputControlProps> {
render() {
@ -19,6 +20,8 @@ class InputTextControl extends BaseControl<InputControlProps> {
export interface InputControlProps extends ControlProps {
placeholderText: string;
inputType: InputType;
isDisabled?: boolean;
}
export default InputTextControl;

10
app/client/src/reducers/entityReducers/propertyPaneConfigReducer.tsx
View File

@ -6,17 +6,22 @@ import {
import PropertyPaneConfigResponse from "../../mockResponses/PropertyPaneConfigResponse";
import { InputControlProps } from "../../pages/propertyControls/InputTextControl";
import { DropDownControlProps } from "../../pages/propertyControls/DropDownControl";
import { ControlProps } from "../../pages/propertyControls/BaseControl";
const initialState: PropertyPaneConfigState = PropertyPaneConfigResponse;
export type ControlConfig =
| InputControlProps
| DropDownControlProps
| InputControlProps;
| InputControlProps
| ControlProps;
export type SectionOrientation = "HORIZONTAL" | "VERTICAL";
export interface PropertySection {
id: string;
sectionName: string;
sectionName?: string;
orientation?: SectionOrientation;
children: (ControlConfig | PropertySection)[];
}
@ -34,7 +39,6 @@ export interface PropertyPaneConfigState {
DROP_DOWN_WIDGET: PropertySection[];
CHECKBOX_WIDGET: PropertySection[];
RADIO_GROUP_WIDGET: PropertySection[];
ALERT_WIDGET: PropertySection[];
};
configVersion: number;
}

8
app/client/src/widgets/AlertWidget.tsx
View File

@ -1,16 +1,12 @@
import React from "react";
import React, { Component } from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import { ActionPayload } from "../constants/ActionConstants";
class AlertWidget extends BaseWidget<AlertWidgetProps, WidgetState> {
class AlertWidget extends Component {
getPageView() {
return <div />;
}
getWidgetType(): WidgetType {
return "ALERT_WIDGET";
}
}
export type AlertType = "DIALOG" | "NOTIFICATION";

1
app/client/src/widgets/ButtonWidget.tsx
View File

@ -38,6 +38,7 @@ export interface ButtonWidgetProps extends WidgetProps {
text?: string;
buttonStyle?: ButtonStyle;
onClick?: ActionPayload[];
isDisabled?: boolean;
}
export default ButtonWidget;

2
app/client/src/widgets/DatePickerWidget.tsx
View File

@ -19,7 +19,7 @@ export type DatePickerType = "DATE_PICKER" | "DATE_RANGE_PICKER";
export interface DatePickerWidgetProps extends WidgetProps {
defaultDate?: Date;
timezone?: TimeZone;
defaultTimezone?: TimeZone;
enableTime: boolean;
label: string;
datePickerType: DatePickerType;

2
app/client/src/widgets/DropdownWidget.tsx
View File

@ -20,7 +20,7 @@ export interface DropdownOption {
}
export interface DropdownWidgetProps extends WidgetProps {
placeholder?: string;
placeholderText?: string;
label?: string;
type: SelectionType;
options?: DropdownOption[];

10
app/client/src/widgets/InputWidget.tsx
View File

@ -22,13 +22,19 @@ export type InputType =
| "CURRENCY"
| "SEARCH";
export interface InputValidator {
validationRegex: string;
errorMessage: string;
}
export interface InputWidgetProps extends WidgetProps {
errorMessage?: string;
inputType: InputType;
defaultText?: string;
placeholder?: string;
placeholderText?: string;
maxChars?: number;
label: string;
inputValidators: InputValidator[];
focusIndex?: number;
isAutoFocusEnabled?: boolean;
}
export default InputWidget;

9
app/client/src/widgets/TableWidget.tsx
View File

@ -15,13 +15,18 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
export type PaginationType = "PAGES" | "INFINITE_SCROLL";
export interface TableAction extends ActionPayload {
actionName: string;
}
export interface TableWidgetProps extends WidgetProps {
pageKey?: string;
nextPageKey?: string;
prevPageKey?: string;
label: string;
tableData?: object[];
recordActions?: TableAction[];
onPageChange?: ActionPayload[];
onRowSelected?: ActionPayload[];
onColumnActionClick?: Record<string, ActionPayload[]>;
}
export default TableWidget;

2
app/client/src/widgets/TextWidget.tsx
View File

@ -11,7 +11,6 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
widgetId={this.props.widgetId}
key={this.props.widgetId}
text={this.props.text}
tagName={this.props.tagName}
/>
);
}
@ -26,7 +25,6 @@ export type TextStyle = "BODY" | "HEADING" | "LABEL" | "SUB_TEXT";
export interface TextWidgetProps extends WidgetProps {
text?: string;
textStyle?: TextStyle;
tagName?: keyof JSX.IntrinsicElements;
}
export default TextWidget;