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

Merge branch 'release' into feature/basic-styling

Browse Source 
# Conflicts:
#	src/constants/ActionConstants.tsx
#	src/constants/WidgetConstants.tsx
#	src/editorComponents/CheckboxComponent.tsx
#	src/editorComponents/RadioGroupComponent.tsx
#	src/mockResponses/WidgetCardsPaneResponse.tsx
#	src/pages/Editor/Canvas.tsx
#	src/pages/Editor/EditorDragLayer.tsx
#	src/reducers/entityReducers/index.tsx
#	src/reducers/index.tsx
#	src/utils/WidgetRegistry.tsx
#	src/widgets/BaseWidget.tsx
#	src/widgets/BreadcrumbsWidget.tsx
#	src/widgets/ButtonWidget.tsx
#	src/widgets/CalloutWidget.tsx
#	src/widgets/CheckboxWidget.tsx
#	src/widgets/IconWidget.tsx
#	src/widgets/InputGroupWidget.tsx
#	src/widgets/NumericInputWidget.tsx
#	src/widgets/RadioGroupWidget.tsx
#	src/widgets/TagInputWidget.tsx
#	src/widgets/TextWidget.tsx
This commit is contained in:
Nikhil Nandagopal 2019-09-13 16:15:49 +05:30
commit 29cf9bb450
31 changed files with 405 additions and 434 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/client/src/constants/ActionConstants.tsx
View File

@ -18,7 +18,8 @@ export type ActionType =
| "SUCCESS_FETCHING_WIDGET_CARDS"
| "ERROR_FETCHING_WIDGET_CARDS"
| "ADD_PAGE_WIDGET"
| "REMOVE_PAGE_WIDGET";
| "REMOVE_PAGE_WIDGET"
| "LOAD_WIDGET_CONFIG";
export const ActionTypes: { [id: string]: ActionType } = {
UPDATE_CANVAS: "UPDATE_CANVAS",
@ -32,6 +33,7 @@ export const ActionTypes: { [id: string]: ActionType } = {
ZOOM_OUT_CANVAS: "ZOOM_OUT_CANVAS",
UNDO_CANVAS_ACTION: "UNDO_CANVAS_ACTION",
REDO_CANVAS_ACTION: "REDO_CANVAS_ACTION",
LOAD_WIDGET_CONFIG: "LOAD_WIDGET_CONFIG",
PUBLISH: "PUBLISH",
FETCH_WIDGET_CARDS: "FETCH_WIDGET_CARDS",
SUCCESS_FETCHING_WIDGET_CARDS: "SUCCESS_FETCHING_WIDGET_CARDS",
@ -50,6 +52,10 @@ export interface LoadCanvasPayload {
widgets: { [widgetId: string]: WidgetProps };
}
export interface LoadWidgetConfigPayload {
[widgetId: string]: WidgetProps;
}
export interface LoadWidgetPanePayload {
widgets: WidgetProps[];
}

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

@ -2,25 +2,31 @@ export type WidgetType =
| "TEXT_WIDGET"
| "IMAGE_WIDGET"
| "CONTAINER_WIDGET"
| "LIST_WIDGET"
| "CALLOUT_WIDGET"
| "ICON_WIDGET"
| "INPUT_GROUP_WIDGET"
| "SPINNER_WIDGET"
| "BUTTON_WIDGET"
| "BREADCRUMBS_WIDGET"
| "TAG_INPUT_WIDGET"
| "NUMERIC_INPUT_WIDGET"
| "DATE_PICKER_WIDGET"
| "TABLE_WIDGET"
| "DROP_DOWN_WIDGET"
| "CHECKBOX_WIDGET"
| "RADIO_GROUP_WIDGET"
| "INPUT_WIDGET"
| "TOGGLE_WIDGET";
| "SWITCH_WIDGET"
| "ALERT_WIDGET";
export const WidgetTypes: { [id: string]: WidgetType } = {
BUTTON_WIDGET: "BUTTON_WIDGET",
TEXT_WIDGET: "TEXT_WIDGET",
IMAGE_WIDGET: "IMAGE_WIDGET",
INPUT_WIDGET: "INPUT_WIDGET",
TOGGLE_WIDGET: "TOGGLE_WIDGET",
SWITCH_WIDGET: "SWITCH_WIDGET",
CONTAINER_WIDGET: "CONTAINER_WIDGET",
SPINNER_WIDGET: "SPINNER_WIDGET",
DATE_PICKER_WIDGET: "DATE_PICKER_WIDGET",
TABLE_WIDGET: "TABLE_WIDGET",
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";

22
app/client/src/editorComponents/CheckboxComponent.tsx
View File

@ -5,27 +5,17 @@ import { Container } from "./ContainerComponent";
class CheckboxComponent extends React.Component<CheckboxComponentProps> {
render() {
return (
<Container {...this.props}>
{this.props.items.map(item => (
<Checkbox
key={item.key}
label={item.label}
defaultIndeterminate={item.defaultIndeterminate}
value={item.value}
/>
))}
</Container>
<Checkbox
label={this.props.label}
defaultIndeterminate={this.props.defaultCheckedState}
/>
);
}
}
export interface CheckboxComponentProps extends ComponentProps {
items: Array<{
key: string;
label: string;
defaultIndeterminate: boolean;
value: number | string;
}>;
label: string;
defaultCheckedState: boolean;
}
export default CheckboxComponent;

32
app/client/src/editorComponents/RadioGroupComponent.tsx
View File

@ -1,25 +1,13 @@
import * as React from "react";
import React from "react";
import { ComponentProps } from "./BaseComponent";
import { Radio, RadioGroup, IOptionProps } from "@blueprintjs/core";
import { Container } from "./ContainerComponent";
import { RadioOption } from "../widgets/RadioGroupWidget";
class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
render() {
return (
<Container {...this.props}>
<RadioGroup
inline={this.props.inline}
label={this.props.label}
name={this.props.name}
onChange={this.props.handleRadioChange}
selectedValue={this.props.selectedValue}
disabled={this.props.disabled}
className={this.props.className}
options={this.props.options}
>
{this.props.items.map(item => (
<Radio key={item.key} label={item.label} value={item.value} />
))}
</RadioGroup>
<div />
</Container>
);
}
@ -27,18 +15,8 @@ class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
export interface RadioGroupComponentProps extends ComponentProps {
label: string;
inline: boolean;
selectedValue: string | number;
handleRadioChange: (event: React.FormEvent<HTMLInputElement>) => void;
disabled: boolean;
className: string;
name: string;
options: IOptionProps[];
items: Array<{
label: string;
key: string;
value: number | string;
}>;
options: RadioOption[];
defaultOptionValue: string;
}
export default RadioGroupComponent;

37
app/client/src/mockResponses/WidgetCardsPaneResponse.tsx
View File

@ -23,11 +23,6 @@ const WidgetCardsPaneResponse: WidgetCardsPaneReduxState = {
icon: "icon-button",
label: "Button",
},
{
widgetType: "INPUT_GROUP_WIDGET",
icon: "icon-input",
label: "Input",
},
{
widgetType: "SPINNER_WIDGET",
icon: "icon-switch",
@ -38,39 +33,19 @@ const WidgetCardsPaneResponse: WidgetCardsPaneReduxState = {
icon: "icon-modal",
label: "Container",
},
{
widgetType: "BREADCRUMBS_WIDGET",
icon: "icon-collapse",
label: "Input",
},
{
widgetType: "TAG_INPUT_WIDGET",
icon: "icon-dropdown",
label: "Tag",
},
{
widgetType: "NUMERIC_INPUT_WIDGET",
icon: "icon-table",
label: "Numeric",
},
],
form: [
{
widgetType: "ICON_WIDGET",
icon: "icon-button",
label: "Icon",
},
{
widgetType: "CALLOUT_WIDGET",
icon: "icon-alert",
label: "Callout",
widgetType: "BUTTON_WIDGET",
icon: "appsmith-widget-button",
label: "Button",
},
],
view: [
{
widgetType: "INPUT_GROUP_WIDGET",
icon: "icon-input",
label: "Input",
widgetType: "BUTTON_WIDGET",
icon: "appsmith-widget-button",
label: "Button",
},
],
},

89
app/client/src/mockResponses/WidgetConfigResponse.tsx Normal file
View File

@ -0,0 +1,89 @@
import { WidgetConfigReducerState } from "../reducers/entityReducers/widgetConfigReducer.tsx";
const WidgetConfigResponse: WidgetConfigReducerState = {
BUTTON_WIDGET: {
text: "Submit",
buttonStyle: "PRIMARY_BUTTON",
rows: 1,
columns: 2,
},
TEXT_WIDGET: {
text: "Not all labels are bad!",
textStyle: "LABEL",
rows: 1,
columns: 3,
},
IMAGE_WIDGET: {
defaultImage: "",
imageShape: "RECTANGLE",
image: "",
rows: 3,
columns: 3,
},
INPUT_WIDGET: {
inputType: "TEXT",
label: "Label me",
rows: 1,
columns: 3,
},
SWITCH_WIDGET: {
isOn: false,
label: "Turn me on",
rows: 1,
columns: 4,
},
CONTAINER_WIDGET: {
backgroundColor: "#FFFFFF",
rows: 1,
columns: 4,
},
SPINNER_WIDGET: {
rows: 1,
columns: 1,
},
DATE_PICKER_WIDGET: {
enableTime: false,
datePickerType: "DATE_PICKER",
rows: 1,
columns: 3,
label: "Date",
},
TABLE_WIDGET: {
rows: 5,
columns: 7,
label: "Don't table me!",
},
DROP_DOWN_WIDGET: {
rows: 1,
columns: 3,
type: "SINGLE_SELECT",
label: "Pick me!",
},
CHECKBOX_WIDGET: {
rows: 1,
columns: 3,
label: "Label - CHECK!",
defaultCheckedState: true,
},
RADIO_GROUP_WIDGET: {
rows: 3,
columns: 3,
label: "Alpha - come in!",
options: [
{ label: "Alpha", value: "1" },
{ label: "Bravo", value: "2" },
{ label: "Charlie", value: "3" },
],
defaultOptionValue: "1",
},
ALERT_WIDGET: {
alertType: "NOTIFICATION",
intent: "SUCCESS",
rows: 3,
columns: 3,
header: "",
message: "",
},
};
export default WidgetConfigResponse;

1
app/client/src/pages/Editor/EditorDragLayer.tsx
View File

@ -59,6 +59,7 @@ const EditorDragLayer: React.FC = () => {
function renderItem() {
return WidgetFactory.createWidget({
widgetType: itemType as WidgetType,
widgetName: "",
widgetId: item.key,
topRow: 10,
leftColumn: 10,

0
app/client/src/reducers/entityReducers/canvasWidgetsReducers.tsx → app/client/src/reducers/entityReducers/canvasWidgetsReducer.tsx
View File

2
app/client/src/reducers/entityReducers/index.tsx
View File

@ -1,5 +1,5 @@
import { combineReducers } from "redux";
import canvasWidgetsReducer from "./canvasWidgetsReducers";
import canvasWidgetsReducer from "./canvasWidgetsReducer";
const entityReducer = combineReducers({ canvasWidgets: canvasWidgetsReducer });
export default entityReducer;

56
app/client/src/reducers/entityReducers/widgetConfigReducer.tsx.tsx Normal file
View File

@ -0,0 +1,56 @@
import { createReducer } from "../../utils/AppsmithUtils";
import {
ActionTypes,
ReduxAction,
LoadWidgetConfigPayload,
} from "../../constants/ActionConstants";
import { WidgetProps } from "../../widgets/BaseWidget";
import WidgetConfigResponse from "../../mockResponses/WidgetConfigResponse";
import { ButtonWidgetProps } from "../../widgets/ButtonWidget";
import { TextWidgetProps } from "../../widgets/TextWidget";
import { ContainerWidgetProps } from "../../widgets/ContainerWidget";
import { ImageWidgetProps } from "../../widgets/ImageWidget";
import { InputWidgetProps } from "../../widgets/InputWidget";
import { SwitchWidgetProps } from "../../widgets/SwitchWidget";
import SpinnerWidget from "../../widgets/SpinnerWidget";
import { DatePickerWidgetProps } from "../../widgets/DatePickerWidget";
import { TableWidgetProps } from "../../widgets/TableWidget";
import { DropdownWidgetProps } from "../../widgets/DropdownWidget";
import { CheckboxWidgetProps } from "../../widgets/CheckboxWidget";
import { RadioGroupWidgetProps } from "../../widgets/RadioGroupWidget";
import { AlertWidgetProps } from "../../widgets/AlertWidget";
const initialState: WidgetConfigReducerState = WidgetConfigResponse;
export interface WidgetConfigProps {
rows: number;
columns: number;
}
export interface WidgetConfigReducerState {
BUTTON_WIDGET: Partial<ButtonWidgetProps> & WidgetConfigProps;
TEXT_WIDGET: Partial<TextWidgetProps> & WidgetConfigProps;
IMAGE_WIDGET: Partial<ImageWidgetProps> & WidgetConfigProps;
INPUT_WIDGET: Partial<InputWidgetProps> & WidgetConfigProps;
SWITCH_WIDGET: Partial<SwitchWidgetProps> & WidgetConfigProps;
CONTAINER_WIDGET: Partial<ContainerWidgetProps<WidgetProps>> &
WidgetConfigProps;
SPINNER_WIDGET: Partial<SpinnerWidget> & WidgetConfigProps;
DATE_PICKER_WIDGET: Partial<DatePickerWidgetProps> & WidgetConfigProps;
TABLE_WIDGET: Partial<TableWidgetProps> & WidgetConfigProps;
DROP_DOWN_WIDGET: Partial<DropdownWidgetProps> & WidgetConfigProps;
CHECKBOX_WIDGET: Partial<CheckboxWidgetProps> & WidgetConfigProps;
RADIO_GROUP_WIDGET: Partial<RadioGroupWidgetProps> & WidgetConfigProps;
ALERT_WIDGET: Partial<AlertWidgetProps> & WidgetConfigProps;
}
const widgetConfigReducer = createReducer(initialState, {
[ActionTypes.LOAD_WIDGET_CONFIG]: (
state: WidgetConfigReducerState,
action: ReduxAction<LoadWidgetConfigPayload>,
) => {
return { ...action.payload.widgets };
},
});
export default widgetConfigReducer;

3
app/client/src/reducers/index.tsx
View File

@ -2,9 +2,8 @@ import { combineReducers } from "redux";
import entityReducer from "./entityReducers";
import uiReducer from "./uiReducers";
import { CanvasReduxState } from "./uiReducers/canvasReducer";
import { CanvasWidgetsReduxState } from "./entityReducers/canvasWidgetsReducers";
import { CanvasWidgetsReduxState } from "./entityReducers/canvasWidgetsReducer";
import { WidgetCardsPaneReduxState } from "./uiReducers/widgetCardsPaneReducer";
// import { EditorHeaderReduxState } from "./uiReducers/editorHeaderReducer";
import { EditorReduxState } from "./uiReducers/editorReducer";
const appReducer = combineReducers({

49
app/client/src/utils/WidgetRegistry.tsx
View File

@ -3,19 +3,8 @@ import ContainerWidget, {
ContainerWidgetProps,
} from "../widgets/ContainerWidget";
import TextWidget, { TextWidgetProps } from "../widgets/TextWidget";
import InputGroupWidget, {
InputGroupWidgetProps,
} from "../widgets/InputGroupWidget";
import CalloutWidget, { CalloutWidgetProps } from "../widgets/CalloutWidget";
import IconWidget, { IconWidgetProps } from "../widgets/IconWidget";
import InputWidget, { InputWidgetProps } from "../widgets/InputWidget";
import SpinnerWidget, { SpinnerWidgetProps } from "../widgets/SpinnerWidget";
import BreadcrumbsWidget, {
BreadcrumbsWidgetProps,
} from "../widgets/BreadcrumbsWidget";
import TagInputWidget, { TagInputWidgetProps } from "../widgets/TagInputWidget";
import NumericInputWidget, {
NumericInputWidgetProps,
} from "../widgets/NumericInputWidget";
import CheckboxWidget, { CheckboxWidgetProps } from "../widgets/CheckboxWidget";
import RadioGroupWidget, {
RadioGroupWidgetProps,
@ -44,45 +33,15 @@ class WidgetBuilderRegistry {
},
});
WidgetFactory.registerWidgetBuilder("CALLOUT_WIDGET", {
buildWidget(widgetData: CalloutWidgetProps): JSX.Element {
return <CalloutWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("ICON_WIDGET", {
buildWidget(widgetData: IconWidgetProps): JSX.Element {
return <IconWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("SPINNER_WIDGET", {
buildWidget(widgetData: SpinnerWidgetProps): JSX.Element {
return <SpinnerWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("INPUT_GROUP_WIDGET", {
buildWidget(widgetData: InputGroupWidgetProps): JSX.Element {
return <InputGroupWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("BREADCRUMBS_WIDGET", {
buildWidget(widgetData: BreadcrumbsWidgetProps): JSX.Element {
return <BreadcrumbsWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("TAG_INPUT_WIDGET", {
buildWidget(widgetData: TagInputWidgetProps): JSX.Element {
return <TagInputWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("NUMERIC_INPUT_WIDGET", {
buildWidget(widgetData: NumericInputWidgetProps): JSX.Element {
return <NumericInputWidget {...widgetData} />;
WidgetFactory.registerWidgetBuilder("INPUT_WIDGET", {
buildWidget(widgetData: InputWidgetProps): JSX.Element {
return <InputWidget {...widgetData} />;
},
});

26
app/client/src/widgets/AlertWidget.tsx Normal file
View File

@ -0,0 +1,26 @@
import React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import CalloutComponent from "../editorComponents/CalloutComponent";
class AlertWidget extends BaseWidget<AlertWidgetProps, WidgetState> {
getPageView() {
return <div />;
}
getWidgetType(): WidgetType {
return "ALERT_WIDGET";
}
}
export type AlertType = "DIALOG" | "NOTIFICATION";
export type MessageIntent = "SUCCESS" | "ERROR" | "INFO" | "WARNING";
export interface AlertWidgetProps extends WidgetProps {
alertType: AlertType;
intent: MessageIntent;
header: string;
message: string;
}
export default AlertWidget;

6
app/client/src/widgets/BaseWidget.tsx
View File

@ -151,9 +151,10 @@ export interface WidgetBuilder<T extends WidgetProps> {
}
export interface WidgetProps {
widgetType: WidgetType;
key?: string;
widgetId: string;
widgetType: WidgetType;
widgetName: string;
key?: string;
topRow: number;
leftColumn: number;
bottomRow: number;
@ -161,6 +162,7 @@ export interface WidgetProps {
parentColumnSpace: number;
parentRowSpace: number;
renderMode: RenderMode;
isVisible?: boolean;
}
export interface WidgetCardProps {

38
app/client/src/widgets/BreadcrumbsWidget.tsx
View File

@ -1,38 +0,0 @@
import React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import { Boundary, IBreadcrumbProps } from "@blueprintjs/core";
import BreadcrumbsComponent from "../editorComponents/BreadcrumbsComponent";
class BreadcrumbsWidget extends BaseWidget<
BreadcrumbsWidgetProps,
WidgetState
> {
getPageView() {
return (
<BreadcrumbsComponent
style={this.getPositionStyle()}
widgetId={this.props.widgetId}
key={this.props.widgetId}
collapseFrom={this.props.collapseFrom}
items={this.props.items}
minVisibleItems={this.props.minVisibleItems}
className={this.props.className}
/>
);
}
getWidgetType(): WidgetType {
return "BREADCRUMBS_WIDGET";
}
}
export interface BreadcrumbsWidgetProps extends WidgetProps {
width?: number;
collapseFrom?: Boundary;
className?: string;
minVisibleItems?: number;
items?: IBreadcrumbProps[];
}
export default BreadcrumbsWidget;

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

@ -20,9 +20,15 @@ class ButtonWidget extends BaseWidget<ButtonWidgetProps, WidgetState> {
}
}
export type ButtonStyle =
| "PRIMARY_BUTTON"
| "SECONDARY_BUTTON"
| "SUCCESS_BUTTON"
| "DANGER_BUTTON";
export interface ButtonWidgetProps extends WidgetProps {
text?: string;
ellipsize?: boolean;
buttonStyle?: ButtonStyle;
}
export default ButtonWidget;

35
app/client/src/widgets/CalloutWidget.tsx
View File

@ -1,35 +0,0 @@
import React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { Intent } from "@blueprintjs/core";
import { WidgetType } from "../constants/WidgetConstants";
import CalloutComponent from "../editorComponents/CalloutComponent";
class CalloutWidget extends BaseWidget<CalloutWidgetProps, WidgetState> {
getPageView() {
return (
<CalloutComponent
style={this.getPositionStyle()}
widgetId={this.props.widgetId}
key={this.props.widgetId}
id={this.props.id}
title={this.props.title}
description={this.props.description}
intent={this.props.intent}
/>
);
}
getWidgetType(): WidgetType {
return "CALLOUT_WIDGET";
}
}
export interface CalloutWidgetProps extends WidgetProps {
id?: string;
title?: string;
description?: string;
intent?: Intent;
ellipsize?: boolean;
}
export default CalloutWidget;

13
app/client/src/widgets/CheckboxWidget.tsx
View File

@ -8,25 +8,22 @@ class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
return (
<CheckboxComponent
style={this.getPositionStyle()}
defaultCheckedState={this.props.defaultCheckedState}
label={this.props.label}
widgetId={this.props.widgetId}
key={this.props.widgetId}
items={this.props.items}
/>
);
}
getWidgetType(): WidgetType {
return "ICON_WIDGET";
return "CHECKBOX_WIDGET";
}
}
export interface CheckboxWidgetProps extends WidgetProps {
items: Array<{
label: string;
key: string;
defaultIndeterminate: boolean;
value: number | string;
}>;
label: string;
defaultCheckedState: boolean;
}
export default CheckboxWidget;

28
app/client/src/widgets/DatePickerWidget.tsx Normal file
View File

@ -0,0 +1,28 @@
import React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import { Moment } from "moment";
class DatePickerWidget extends BaseWidget<DatePickerWidgetProps, WidgetState> {
getPageView() {
return <div />;
}
getWidgetType(): WidgetType {
return "DATE_PICKER_WIDGET";
}
}
//Taken from https://blueprintjs.com/docs/#timezone/timezone-picker, needs to be completed with entire list
export type TimeZone = "Asia/Kolkata" | "Pacific/Midway";
export type DatePickerType = "DATE_PICKER" | "DATE_RANGE_PICKER";
export interface DatePickerWidgetProps extends WidgetProps {
defaultDate?: Date;
timezone?: TimeZone;
enableTime: boolean;
label: string;
datePickerType: DatePickerType;
}
export default DatePickerWidget;

28
app/client/src/widgets/DropdownWidget.tsx Normal file
View File

@ -0,0 +1,28 @@
import React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
getPageView() {
return <div />;
}
getWidgetType(): WidgetType {
return "DROP_DOWN_WIDGET";
}
}
export type SelectionType = "SINGLE_SELECT" | "MULTI_SELECT>";
export interface DropdownOption {
label: string;
value: string;
}
export interface DropdownWidgetProps extends WidgetProps {
placeholder?: string;
label?: string;
type: SelectionType;
options?: DropdownOption[];
}
export default DropdownWidget;

34
app/client/src/widgets/IconWidget.tsx
View File

@ -1,34 +0,0 @@
import React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import { Intent } from "@blueprintjs/core";
import { IconName } from "@blueprintjs/icons";
import IconComponent from "../editorComponents/IconComponent";
class IconWidget extends BaseWidget<IconWidgetProps, WidgetState> {
getPageView() {
return (
<IconComponent
style={this.getPositionStyle()}
widgetId={this.props.widgetId}
key={this.props.widgetId}
icon={this.props.icon}
iconSize={this.props.iconSize}
intent={this.props.intent}
/>
);
}
getWidgetType(): WidgetType {
return "ICON_WIDGET";
}
}
export interface IconWidgetProps extends WidgetProps {
icon?: IconName;
iconSize?: number;
ellipsize?: boolean;
intent?: Intent;
}
export default IconWidget;

23
app/client/src/widgets/ImageWidget.tsx Normal file
View File

@ -0,0 +1,23 @@
import * as React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
class ImageWidget extends BaseWidget<ImageWidgetProps, WidgetState> {
getPageView() {
return <div />;
}
getWidgetType(): WidgetType {
return "IMAGE_WIDGET";
}
}
export type ImageShape = "RECTANGLE" | "CIRCLE" | "ROUNDED";
export interface ImageWidgetProps extends WidgetProps {
image: string;
imageShape: ImageShape;
defaultImage: string;
}
export default ImageWidget;

50
app/client/src/widgets/InputGroupWidget.tsx
View File

@ -1,50 +0,0 @@
import React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import InputGroupComponent from "../editorComponents/InputGroupComponent";
import { IconName, Intent } from "@blueprintjs/core";
class InputGroupWidget extends BaseWidget<InputGroupWidgetProps, WidgetState> {
getPageView() {
return (
<InputGroupComponent
style={this.getPositionStyle()}
widgetId={this.props.widgetId}
key={this.props.widgetId}
className={this.props.className}
disabled={this.props.disabled}
large={this.props.large}
leftIcon={this.props.leftIcon}
placeholder={this.props.placeholder}
rightElement={this.props.rightElement}
round={this.props.round}
small={this.props.small}
value={this.props.value}
intent={this.props.intent}
defaultValue={this.props.defaultValue}
type={this.props.type}
/>
);
}
getWidgetType(): WidgetType {
return "INPUT_GROUP_WIDGET";
}
}
export interface InputGroupWidgetProps extends WidgetProps {
className?: string;
disabled?: boolean;
large?: boolean;
intent?: Intent;
defaultValue?: string;
leftIcon?: IconName;
rightElement?: JSX.Element;
round?: boolean;
small?: boolean;
type?: string;
value?: string;
placeholder?: string;
}
export default InputGroupWidget;

34
app/client/src/widgets/InputWidget.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
getPageView() {
return <div />;
}
getWidgetType(): WidgetType {
return "INPUT_WIDGET";
}
}
export type InputType =
| "TEXT"
| "NUMBER"
| "INTEGER"
| "PHONE_NUMBER"
| "EMAIL"
| "PASSWORD"
| "CURRENCY"
| "SEARCH";
export interface InputWidgetProps extends WidgetProps {
errorMessage?: string;
inputType: InputType;
defaultText?: string;
placeholder?: string;
label: string;
focusIndex?: number;
}
export default InputWidget;

68
app/client/src/widgets/NumericInputWidget.tsx
View File

@ -1,68 +0,0 @@
import * as React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import NumericInputComponent from "../editorComponents/NumericInputComponent";
import { Intent, IconName } from "@blueprintjs/core";
class NumericInputWidget extends BaseWidget<
NumericInputWidgetProps,
WidgetState
> {
getPageView() {
return (
<NumericInputComponent
style={this.getPositionStyle()}
widgetId={this.props.widgetId}
key={this.props.widgetId}
placeholder="Enter a number..."
min={this.props.min}
max={this.props.max}
className={this.props.className}
disabled={this.props.disabled}
large={this.props.large}
intent={this.props.intent}
defaultValue={this.props.defaultValue}
leftIcon={this.props.leftIcon}
rightElement={this.props.rightElement}
allowNumericCharactersOnly={this.props.allowNumericCharactersOnly}
fill={this.props.fill}
majorStepSize={this.props.majorStepSize}
minorStepSize={this.props.minorStepSize}
onButtonClick={this.props.onButtonClick}
inputRef={this.props.inputRef}
selectAllOnFocus={this.props.selectAllOnFocus}
selectAllOnIncrement={this.props.selectAllOnIncrement}
stepSize={this.props.stepSize}
/>
);
}
getWidgetType(): WidgetType {
return "NUMERIC_INPUT_WIDGET";
}
}
export interface NumericInputWidgetProps extends WidgetProps {
className?: string;
disabled?: boolean;
large?: boolean;
intent?: Intent;
defaultValue?: string;
leftIcon?: IconName;
rightElement?: JSX.Element;
allowNumericCharactersOnly?: boolean;
fill?: boolean;
majorStepSize?: number | null;
max?: number;
min?: number;
minorStepSize?: number | null;
onValueChange?: (valueAsNumber: number, valueAsString: string) => void;
onButtonClick?: (valueAsNumber: number, valueAsString: string) => void;
inputRef?: (ref: HTMLInputElement | null) => any;
selectAllOnFocus?: boolean;
selectAllOnIncrement?: boolean;
stepSize?: number;
placeholder?: string;
}
export default NumericInputWidget;

33
app/client/src/widgets/RadioGroupWidget.tsx
View File

@ -4,21 +4,15 @@ import { WidgetType } from "../constants/WidgetConstants";
import RadioGroupComponent from "../editorComponents/RadioGroupComponent";
import { IOptionProps } from "@blueprintjs/core";
class RadioButtonWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
class RadioGroupWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
getPageView() {
return (
<RadioGroupComponent
style={this.getPositionStyle()}
widgetId={this.props.widgetId}
key={this.props.widgetId}
inline={this.props.inline}
label={this.props.label}
name={this.props.name}
handleRadioChange={this.props.handleRadioChange}
selectedValue={this.props.selectedValue}
items={this.props.items}
disabled={this.props.disabled}
className={this.props.className}
defaultOptionValue={this.props.defaultOptionValue}
options={this.props.options}
/>
);
@ -29,20 +23,15 @@ class RadioButtonWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
}
}
export interface RadioGroupWidgetProps extends WidgetProps {
export interface RadioOption {
label: string;
inline: boolean;
selectedValue: string | number;
handleRadioChange: (event: React.FormEvent<HTMLInputElement>) => void;
disabled: boolean;
className: string;
name: string;
options: IOptionProps[];
items: Array<{
label: string;
value: number | string;
key: string;
}>;
value: string;
}
export default RadioButtonWidget;
export interface RadioGroupWidgetProps extends WidgetProps {
label: string;
options: RadioOption[];
defaultOptionValue: string;
}
export default RadioGroupWidget;

20
app/client/src/widgets/SwitchWidget.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
class SwitchWidget extends BaseWidget<SwitchWidgetProps, WidgetState> {
getPageView() {
return <div />;
}
getWidgetType(): WidgetType {
return "SWITCH_WIDGET";
}
}
export interface SwitchWidgetProps extends WidgetProps {
isOn: boolean;
label: string;
}
export default SwitchWidget;

24
app/client/src/widgets/TableWidget.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import TextComponent from "../editorComponents/TextComponent";
class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
getPageView() {
return <div />;
}
getWidgetType(): WidgetType {
return "TABLE_WIDGET";
}
}
export type PaginationType = "PAGES" | "INFINITE_SCROLL";
export interface TableWidgetProps extends WidgetProps {
pageKey?: string;
label: string;
tableData?: object[];
}
export default TableWidget;

42
app/client/src/widgets/TagInputWidget.tsx
View File

@ -1,42 +0,0 @@
import React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import TagInputComponent from "../editorComponents/TagInputComponent";
import { Intent, ITagProps, HTMLInputProps } from "@blueprintjs/core";
class TagInputWidget extends BaseWidget<TagInputWidgetProps, WidgetState> {
getPageView() {
return (
<TagInputComponent
widgetId={this.props.widgetId}
key={this.props.widgetId}
style={this.getPositionStyle()}
placeholder={this.props.placeholder}
values={this.props.values}
/>
);
}
getWidgetType(): WidgetType {
return "TAG_INPUT_WIDGET";
}
}
export interface TagInputWidgetProps extends WidgetProps {
addOnPaste?: boolean;
className?: string;
disabled?: boolean;
fill?: boolean;
inputProps?: HTMLInputProps;
inputValue?: string; //Controlled value of the <input> element.
intent?: Intent;
large?: boolean; //Whether the tag input should use a large size
onInputChange?: React.FormEventHandler<HTMLInputElement>;
placeholder?: string;
rightElement?: JSX.Element;
separator?: string | RegExp | false;
tagProps?: ITagProps;
values?: string[]; //Required field
}
export default TagInputWidget;

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

@ -21,9 +21,11 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
}
}
export type TextStyle = "BODY" | "HEADING" | "LABEL" | "SUB_TEXT";
export interface TextWidgetProps extends WidgetProps {
text?: string;
ellipsize?: boolean;
textStyle?: TextStyle;
tagName?: keyof JSX.IntrinsicElements;
}

2
app/client/yarn.lock
View File

@ -1523,7 +1523,7 @@
hoist-non-react-statics "^3.3.0"
redux "^4.0.0"
"@types/react-router-dom@^5.0.1":
"@types/react-router-dom@^4.3.5":
version "4.3.5"
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.3.5.tgz#72f229967690c890d00f96e6b85e9ee5780db31f"
integrity sha512-eFajSUASYbPHg2BDM1G8Btx+YqGgvROPIg6sBhl3O4kbDdYXdFdfrgQFf/pcBuQVObjfT9AL/dd15jilR5DIEA==