* FEATURE-3261 : Menu Widget -- Perform initial onboarding of the widget, not completed * FEATURE-3261 : Menu Widget -- Create a menuItemsControl -- Create the first MVP of IconSelectControl * FEATURE-3261 : Add Menu Widget -- Align add menu item button to the center -- Build icon select control with a grid popup * FEATURE-3261 : Menu Widget -- Create a icon alignment control -- Complete the property pane of the widget * FEATURE-3261 : Add Menu Widget -- Implement the body of the widget -- Bind into the properties from property pane * FEATURE-3261 : Menu Widget -- Fix the issues from the first feedback * FEATURE-3261 : Menu Widget -- Fix on the 2nd feedback * FEATURE-3261 : Menu Widget -- Fix on issues from IconSelectControl, IconAlignControl * FEATURE-3261 : Menu Button Widget -- Rename Menu to MenuButton, accordingly refactoring the relevant codes -- Change some help content -- Change styles for icon select control, adding padding for search box * FEATURE-3261 : Menu Button Widget -- Bind isDisabled property into the UI -- Prevent input text of menu item from overflowing -- Add tooltip feature for icon select control -- Set the height of the popover content dynamically * FEATURE-3261 : Menu Button Widget -- Use POPOVER2_TARGET class name for styling
528 lines
16 KiB
TypeScript
528 lines
16 KiB
TypeScript
import BaseWidget, { WidgetProps } from "widgets/BaseWidget";
|
|
import { WidgetTypes } from "constants/WidgetConstants";
|
|
import ContainerWidget, {
|
|
ContainerWidgetProps,
|
|
ProfiledContainerWidget,
|
|
} from "widgets/ContainerWidget";
|
|
import TextWidget, {
|
|
TextWidgetProps,
|
|
ProfiledTextWidget,
|
|
} from "widgets/TextWidget";
|
|
import InputWidget, {
|
|
InputWidgetProps,
|
|
ProfiledInputWidget,
|
|
} from "widgets/InputWidget";
|
|
import CheckboxWidget, {
|
|
CheckboxWidgetProps,
|
|
ProfiledCheckboxWidget,
|
|
} from "widgets/CheckboxWidget";
|
|
import RadioGroupWidget, {
|
|
RadioGroupWidgetProps,
|
|
ProfiledRadioGroupWidget,
|
|
} from "widgets/RadioGroupWidget";
|
|
import WidgetFactory from "./WidgetFactory";
|
|
import React from "react";
|
|
import ButtonWidget, {
|
|
ButtonWidgetProps,
|
|
ProfiledButtonWidget,
|
|
} from "widgets/ButtonWidget";
|
|
import DropdownWidget, {
|
|
DropdownWidgetProps,
|
|
ProfiledDropDownWidget,
|
|
} from "widgets/DropdownWidget";
|
|
import ImageWidget, {
|
|
ImageWidgetProps,
|
|
ProfiledImageWidget,
|
|
} from "widgets/ImageWidget";
|
|
import TableWidget, { ProfiledTableWidget } from "widgets/TableWidget";
|
|
import { TableWidgetProps } from "widgets/TableWidget/TableWidgetConstants";
|
|
import VideoWidget, {
|
|
VideoWidgetProps,
|
|
ProfiledVideoWidget,
|
|
} from "widgets/VideoWidget";
|
|
import TabsWidget, {
|
|
TabsWidgetProps,
|
|
TabContainerWidgetProps,
|
|
ProfiledTabsWidget,
|
|
} from "widgets/Tabs/TabsWidget";
|
|
import {
|
|
ModalWidgetProps,
|
|
ProfiledModalWidget,
|
|
ModalWidget,
|
|
} from "widgets/ModalWidget";
|
|
import RichTextEditorWidget, {
|
|
RichTextEditorWidgetProps,
|
|
ProfiledRichTextEditorWidget,
|
|
} from "widgets/RichTextEditorWidget";
|
|
import ChartWidget, {
|
|
ChartWidgetProps,
|
|
ProfiledChartWidget,
|
|
} from "widgets/ChartWidget";
|
|
import MapWidget, {
|
|
MapWidgetProps,
|
|
ProfiledMapWidget,
|
|
} from "widgets/MapWidget";
|
|
|
|
import FilePickerWidget, {
|
|
FilePickerWidgetProps,
|
|
ProfiledFilePickerWidget,
|
|
} from "widgets/FilepickerWidget";
|
|
import DatePickerWidget, {
|
|
DatePickerWidgetProps,
|
|
ProfiledDatePickerWidget,
|
|
} from "widgets/DatePickerWidget";
|
|
import DatePickerWidget2, {
|
|
DatePickerWidget2Props,
|
|
ProfiledDatePickerWidget2,
|
|
} from "widgets/DatePickerWidget2";
|
|
import FormWidget, { ProfiledFormWidget } from "widgets/FormWidget";
|
|
import FormButtonWidget, {
|
|
FormButtonWidgetProps,
|
|
ProfiledFormButtonWidget,
|
|
} from "widgets/FormButtonWidget";
|
|
import IconWidget, {
|
|
IconWidgetProps,
|
|
ProfiledIconWidget,
|
|
} from "widgets/IconWidget";
|
|
|
|
import CanvasWidget, { ProfiledCanvasWidget } from "widgets/CanvasWidget";
|
|
import SkeletonWidget, {
|
|
ProfiledSkeletonWidget,
|
|
SkeletonWidgetProps,
|
|
} from "../widgets/SkeletonWidget";
|
|
|
|
import ListWidget, {
|
|
ListWidgetProps,
|
|
ProfiledListWidget,
|
|
} from "widgets/ListWidget/ListWidget";
|
|
|
|
import SwitchWidget, {
|
|
ProfiledSwitchWidget,
|
|
SwitchWidgetProps,
|
|
} from "widgets/SwitchWidget";
|
|
import DividerWidget, {
|
|
ProfiledDividerWidget,
|
|
DividerWidgetProps,
|
|
} from "widgets/DividerWidget";
|
|
import TabsMigratorWidget, {
|
|
ProfiledTabsMigratorWidget,
|
|
} from "widgets/Tabs/TabsMigrator";
|
|
import RateWidget, {
|
|
RateWidgetProps,
|
|
ProfiledRateWidget,
|
|
} from "widgets/RateWidget";
|
|
import IframeWidget, {
|
|
IframeWidgetProps,
|
|
ProfiledIframeWidget,
|
|
} from "widgets/IframeWidget";
|
|
import MenuButtonWidget, {
|
|
MenuButtonWidgetProps,
|
|
ProfiledMenuButtonWidget,
|
|
} from "widgets/MenuButtonWidget";
|
|
|
|
export default class WidgetBuilderRegistry {
|
|
static registerWidgetBuilders() {
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"CONTAINER_WIDGET",
|
|
{
|
|
buildWidget(
|
|
widgetData: ContainerWidgetProps<WidgetProps>,
|
|
): JSX.Element {
|
|
return <ProfiledContainerWidget {...widgetData} />;
|
|
},
|
|
},
|
|
ContainerWidget.getDerivedPropertiesMap(),
|
|
ContainerWidget.getDefaultPropertiesMap(),
|
|
ContainerWidget.getMetaPropertiesMap(),
|
|
ContainerWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"TEXT_WIDGET",
|
|
{
|
|
buildWidget(widgetData: TextWidgetProps): JSX.Element {
|
|
return <ProfiledTextWidget {...widgetData} />;
|
|
},
|
|
},
|
|
TextWidget.getDerivedPropertiesMap(),
|
|
TextWidget.getDefaultPropertiesMap(),
|
|
TextWidget.getMetaPropertiesMap(),
|
|
TextWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"BUTTON_WIDGET",
|
|
{
|
|
buildWidget(widgetData: ButtonWidgetProps): JSX.Element {
|
|
return <ProfiledButtonWidget {...widgetData} />;
|
|
},
|
|
},
|
|
ButtonWidget.getDerivedPropertiesMap(),
|
|
ButtonWidget.getDefaultPropertiesMap(),
|
|
ButtonWidget.getMetaPropertiesMap(),
|
|
ButtonWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"INPUT_WIDGET",
|
|
{
|
|
buildWidget(widgetData: InputWidgetProps): JSX.Element {
|
|
return <ProfiledInputWidget {...widgetData} />;
|
|
},
|
|
},
|
|
InputWidget.getDerivedPropertiesMap(),
|
|
InputWidget.getDefaultPropertiesMap(),
|
|
InputWidget.getMetaPropertiesMap(),
|
|
InputWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"CHECKBOX_WIDGET",
|
|
{
|
|
buildWidget(widgetData: CheckboxWidgetProps): JSX.Element {
|
|
return <ProfiledCheckboxWidget {...widgetData} />;
|
|
},
|
|
},
|
|
CheckboxWidget.getDerivedPropertiesMap(),
|
|
CheckboxWidget.getDefaultPropertiesMap(),
|
|
CheckboxWidget.getMetaPropertiesMap(),
|
|
CheckboxWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"SWITCH_WIDGET",
|
|
{
|
|
buildWidget(widgetData: SwitchWidgetProps): JSX.Element {
|
|
return <ProfiledSwitchWidget {...widgetData} />;
|
|
},
|
|
},
|
|
SwitchWidget.getDerivedPropertiesMap(),
|
|
SwitchWidget.getDefaultPropertiesMap(),
|
|
SwitchWidget.getMetaPropertiesMap(),
|
|
SwitchWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"DROP_DOWN_WIDGET",
|
|
{
|
|
buildWidget(widgetData: DropdownWidgetProps): JSX.Element {
|
|
return <ProfiledDropDownWidget {...widgetData} />;
|
|
},
|
|
},
|
|
DropdownWidget.getDerivedPropertiesMap(),
|
|
DropdownWidget.getDefaultPropertiesMap(),
|
|
DropdownWidget.getMetaPropertiesMap(),
|
|
DropdownWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"RADIO_GROUP_WIDGET",
|
|
{
|
|
buildWidget(widgetData: RadioGroupWidgetProps): JSX.Element {
|
|
return <ProfiledRadioGroupWidget {...widgetData} />;
|
|
},
|
|
},
|
|
RadioGroupWidget.getDerivedPropertiesMap(),
|
|
RadioGroupWidget.getDefaultPropertiesMap(),
|
|
RadioGroupWidget.getMetaPropertiesMap(),
|
|
RadioGroupWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"IMAGE_WIDGET",
|
|
{
|
|
buildWidget(widgetData: ImageWidgetProps): JSX.Element {
|
|
return <ProfiledImageWidget {...widgetData} />;
|
|
},
|
|
},
|
|
ImageWidget.getDerivedPropertiesMap(),
|
|
ImageWidget.getDefaultPropertiesMap(),
|
|
ImageWidget.getMetaPropertiesMap(),
|
|
ImageWidget.getPropertyPaneConfig(),
|
|
);
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"TABLE_WIDGET",
|
|
{
|
|
buildWidget(widgetData: TableWidgetProps): JSX.Element {
|
|
return <ProfiledTableWidget {...widgetData} />;
|
|
},
|
|
},
|
|
TableWidget.getDerivedPropertiesMap(),
|
|
TableWidget.getDefaultPropertiesMap(),
|
|
TableWidget.getMetaPropertiesMap(),
|
|
TableWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"VIDEO_WIDGET",
|
|
{
|
|
buildWidget(widgetData: VideoWidgetProps): JSX.Element {
|
|
return <ProfiledVideoWidget {...widgetData} />;
|
|
},
|
|
},
|
|
VideoWidget.getDerivedPropertiesMap(),
|
|
VideoWidget.getDefaultPropertiesMap(),
|
|
VideoWidget.getMetaPropertiesMap(),
|
|
VideoWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"FILE_PICKER_WIDGET",
|
|
{
|
|
buildWidget(widgetData: FilePickerWidgetProps): JSX.Element {
|
|
return <ProfiledFilePickerWidget {...widgetData} />;
|
|
},
|
|
},
|
|
FilePickerWidget.getDerivedPropertiesMap(),
|
|
FilePickerWidget.getDefaultPropertiesMap(),
|
|
FilePickerWidget.getMetaPropertiesMap(),
|
|
FilePickerWidget.getPropertyPaneConfig(),
|
|
);
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"DATE_PICKER_WIDGET",
|
|
{
|
|
buildWidget(widgetData: DatePickerWidgetProps): JSX.Element {
|
|
return <ProfiledDatePickerWidget {...widgetData} />;
|
|
},
|
|
},
|
|
DatePickerWidget.getDerivedPropertiesMap(),
|
|
DatePickerWidget.getDefaultPropertiesMap(),
|
|
DatePickerWidget.getMetaPropertiesMap(),
|
|
DatePickerWidget.getPropertyPaneConfig(),
|
|
);
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"DATE_PICKER_WIDGET2",
|
|
{
|
|
buildWidget(widgetData: DatePickerWidget2Props): JSX.Element {
|
|
return <ProfiledDatePickerWidget2 {...widgetData} />;
|
|
},
|
|
},
|
|
DatePickerWidget2.getDerivedPropertiesMap(),
|
|
DatePickerWidget2.getDefaultPropertiesMap(),
|
|
DatePickerWidget2.getMetaPropertiesMap(),
|
|
DatePickerWidget2.getPropertyPaneConfig(),
|
|
);
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"TABS_WIDGET",
|
|
{
|
|
buildWidget(
|
|
widgetProps: TabsWidgetProps<TabContainerWidgetProps>,
|
|
): JSX.Element {
|
|
return <ProfiledTabsWidget {...widgetProps} />;
|
|
},
|
|
},
|
|
TabsWidget.getDerivedPropertiesMap(),
|
|
TabsWidget.getDefaultPropertiesMap(),
|
|
TabsWidget.getMetaPropertiesMap(),
|
|
TabsWidget.getPropertyPaneConfig(),
|
|
);
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"TABS_MIGRATOR_WIDGET",
|
|
{
|
|
buildWidget(
|
|
widgetProps: TabsWidgetProps<TabContainerWidgetProps>,
|
|
): JSX.Element {
|
|
return <ProfiledTabsMigratorWidget {...widgetProps} />;
|
|
},
|
|
},
|
|
TabsMigratorWidget.getDerivedPropertiesMap(),
|
|
TabsMigratorWidget.getDefaultPropertiesMap(),
|
|
TabsMigratorWidget.getMetaPropertiesMap(),
|
|
TabsMigratorWidget.getPropertyPaneConfig(),
|
|
);
|
|
WidgetFactory.registerWidgetBuilder(
|
|
WidgetTypes.MODAL_WIDGET,
|
|
{
|
|
buildWidget(widgetProps: ModalWidgetProps): JSX.Element {
|
|
return <ProfiledModalWidget {...widgetProps} />;
|
|
},
|
|
},
|
|
BaseWidget.getDerivedPropertiesMap(),
|
|
BaseWidget.getDefaultPropertiesMap(),
|
|
BaseWidget.getMetaPropertiesMap(),
|
|
ModalWidget.getPropertyPaneConfig(),
|
|
);
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"RICH_TEXT_EDITOR_WIDGET",
|
|
{
|
|
buildWidget(widgetData: RichTextEditorWidgetProps): JSX.Element {
|
|
return <ProfiledRichTextEditorWidget {...widgetData} />;
|
|
},
|
|
},
|
|
RichTextEditorWidget.getDerivedPropertiesMap(),
|
|
RichTextEditorWidget.getDefaultPropertiesMap(),
|
|
RichTextEditorWidget.getMetaPropertiesMap(),
|
|
RichTextEditorWidget.getPropertyPaneConfig(),
|
|
);
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"CHART_WIDGET",
|
|
{
|
|
buildWidget(widgetData: ChartWidgetProps): JSX.Element {
|
|
return <ProfiledChartWidget {...widgetData} />;
|
|
},
|
|
},
|
|
ChartWidget.getDerivedPropertiesMap(),
|
|
ChartWidget.getDefaultPropertiesMap(),
|
|
ChartWidget.getMetaPropertiesMap(),
|
|
ChartWidget.getPropertyPaneConfig(),
|
|
);
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"FORM_WIDGET",
|
|
{
|
|
buildWidget(
|
|
widgetProps: ContainerWidgetProps<WidgetProps>,
|
|
): JSX.Element {
|
|
return <ProfiledFormWidget {...widgetProps} />;
|
|
},
|
|
},
|
|
FormWidget.getDerivedPropertiesMap(),
|
|
FormWidget.getDefaultPropertiesMap(),
|
|
FormWidget.getMetaPropertiesMap(),
|
|
FormWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"FORM_BUTTON_WIDGET",
|
|
{
|
|
buildWidget(widgetProps: FormButtonWidgetProps): JSX.Element {
|
|
return <ProfiledFormButtonWidget {...widgetProps} />;
|
|
},
|
|
},
|
|
FormButtonWidget.getDerivedPropertiesMap(),
|
|
FormButtonWidget.getDefaultPropertiesMap(),
|
|
FormButtonWidget.getMetaPropertiesMap(),
|
|
FormButtonWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"MAP_WIDGET",
|
|
{
|
|
buildWidget(widgetProps: MapWidgetProps): JSX.Element {
|
|
return <ProfiledMapWidget {...widgetProps} />;
|
|
},
|
|
},
|
|
MapWidget.getDerivedPropertiesMap(),
|
|
MapWidget.getDefaultPropertiesMap(),
|
|
MapWidget.getMetaPropertiesMap(),
|
|
MapWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
WidgetTypes.CANVAS_WIDGET,
|
|
{
|
|
buildWidget(
|
|
widgetData: ContainerWidgetProps<WidgetProps>,
|
|
): JSX.Element {
|
|
return <ProfiledCanvasWidget {...widgetData} />;
|
|
},
|
|
},
|
|
CanvasWidget.getDerivedPropertiesMap(),
|
|
CanvasWidget.getDefaultPropertiesMap(),
|
|
CanvasWidget.getMetaPropertiesMap(),
|
|
CanvasWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
WidgetTypes.ICON_WIDGET,
|
|
{
|
|
buildWidget(widgetProps: IconWidgetProps): JSX.Element {
|
|
return <ProfiledIconWidget {...widgetProps} />;
|
|
},
|
|
},
|
|
IconWidget.getDerivedPropertiesMap(),
|
|
IconWidget.getDefaultPropertiesMap(),
|
|
IconWidget.getMetaPropertiesMap(),
|
|
IconWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
WidgetTypes.SKELETON_WIDGET,
|
|
{
|
|
buildWidget(widgetProps: SkeletonWidgetProps): JSX.Element {
|
|
return <ProfiledSkeletonWidget {...widgetProps} />;
|
|
},
|
|
},
|
|
SkeletonWidget.getDerivedPropertiesMap(),
|
|
SkeletonWidget.getDefaultPropertiesMap(),
|
|
SkeletonWidget.getMetaPropertiesMap(),
|
|
SkeletonWidget.getPropertyPaneConfig(),
|
|
);
|
|
WidgetFactory.registerWidgetBuilder(
|
|
WidgetTypes.LIST_WIDGET,
|
|
{
|
|
buildWidget(widgetProps: ListWidgetProps<WidgetProps>): JSX.Element {
|
|
return <ProfiledListWidget {...widgetProps} />;
|
|
},
|
|
},
|
|
ListWidget.getDerivedPropertiesMap(),
|
|
ListWidget.getDefaultPropertiesMap(),
|
|
ListWidget.getMetaPropertiesMap(),
|
|
ListWidget.getPropertyPaneConfig(),
|
|
);
|
|
WidgetFactory.registerWidgetBuilder(
|
|
WidgetTypes.MODAL_WIDGET,
|
|
{
|
|
buildWidget(widgetData: ModalWidgetProps): JSX.Element {
|
|
return <ProfiledModalWidget {...widgetData} />;
|
|
},
|
|
},
|
|
ModalWidget.getDerivedPropertiesMap(),
|
|
ModalWidget.getDefaultPropertiesMap(),
|
|
ModalWidget.getMetaPropertiesMap(),
|
|
ModalWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
"RATE_WIDGET",
|
|
{
|
|
buildWidget(widgetData: RateWidgetProps): JSX.Element {
|
|
return <ProfiledRateWidget {...widgetData} />;
|
|
},
|
|
},
|
|
RateWidget.getDerivedPropertiesMap(),
|
|
RateWidget.getDefaultPropertiesMap(),
|
|
RateWidget.getMetaPropertiesMap(),
|
|
RateWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
WidgetTypes.IFRAME_WIDGET,
|
|
{
|
|
buildWidget(widgetData: IframeWidgetProps): JSX.Element {
|
|
return <ProfiledIframeWidget {...widgetData} />;
|
|
},
|
|
},
|
|
IframeWidget.getDerivedPropertiesMap(),
|
|
IframeWidget.getDefaultPropertiesMap(),
|
|
IframeWidget.getMetaPropertiesMap(),
|
|
IframeWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
WidgetTypes.DIVIDER_WIDGET,
|
|
{
|
|
buildWidget(widgetProps: DividerWidgetProps): JSX.Element {
|
|
return <ProfiledDividerWidget {...widgetProps} />;
|
|
},
|
|
},
|
|
DividerWidget.getDerivedPropertiesMap(),
|
|
DividerWidget.getDefaultPropertiesMap(),
|
|
DividerWidget.getMetaPropertiesMap(),
|
|
DividerWidget.getPropertyPaneConfig(),
|
|
);
|
|
|
|
WidgetFactory.registerWidgetBuilder(
|
|
WidgetTypes.MENU_BUTTON_WIDGET,
|
|
{
|
|
buildWidget(widgetData: MenuButtonWidgetProps): JSX.Element {
|
|
return <ProfiledMenuButtonWidget {...widgetData} />;
|
|
},
|
|
},
|
|
MenuButtonWidget.getDerivedPropertiesMap(),
|
|
MenuButtonWidget.getDefaultPropertiesMap(),
|
|
MenuButtonWidget.getMetaPropertiesMap(),
|
|
MenuButtonWidget.getPropertyPaneConfig(),
|
|
);
|
|
}
|
|
}
|