* 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
173 lines
5.4 KiB
TypeScript
173 lines
5.4 KiB
TypeScript
import React, { JSXElementConstructor } from "react";
|
|
import { IconProps, IconWrapper } from "constants/IconConstants";
|
|
import { ReactComponent as SpinnerIcon } from "assets/icons/widget/alert.svg";
|
|
import { ReactComponent as ButtonIcon } from "assets/icons/widget/button.svg";
|
|
import { ReactComponent as CollapseIcon } from "assets/icons/widget/collapse.svg";
|
|
import { ReactComponent as ContainerIcon } from "assets/icons/widget/container.svg";
|
|
import { ReactComponent as DatePickerIcon } from "assets/icons/widget/datepicker.svg";
|
|
import { ReactComponent as TableIcon } from "assets/icons/widget/table.svg";
|
|
import { ReactComponent as VideoIcon } from "assets/icons/widget/video.svg";
|
|
import { ReactComponent as DropDownIcon } from "assets/icons/widget/dropdown.svg";
|
|
import { ReactComponent as CheckboxIcon } from "assets/icons/widget/checkbox.svg";
|
|
import { ReactComponent as RadioGroupIcon } from "assets/icons/widget/radio.svg";
|
|
import { ReactComponent as InputIcon } from "assets/icons/widget/input.svg";
|
|
import { ReactComponent as SwitchIcon } from "assets/icons/widget/switch.svg";
|
|
import { ReactComponent as TextIcon } from "assets/icons/widget/text.svg";
|
|
import { ReactComponent as ImageIcon } from "assets/icons/widget/image.svg";
|
|
import { ReactComponent as FilePickerIcon } from "assets/icons/widget/filepicker.svg";
|
|
import { ReactComponent as TabsIcon } from "assets/icons/widget/tabs.svg";
|
|
import { ReactComponent as RichTextEditorIcon } from "assets/icons/widget/rich-text.svg";
|
|
import { ReactComponent as ChartIcon } from "assets/icons/widget/chart.svg";
|
|
import { ReactComponent as FormIcon } from "assets/icons/widget/form.svg";
|
|
import { ReactComponent as MapIcon } from "assets/icons/widget/map.svg";
|
|
import { ReactComponent as ModalIcon } from "assets/icons/widget/modal.svg";
|
|
import { ReactComponent as ListIcon } from "assets/icons/widget/list.svg";
|
|
import { ReactComponent as RatingIcon } from "assets/icons/widget/rating.svg";
|
|
import { ReactComponent as EmbedIcon } from "assets/icons/widget/embed.svg";
|
|
import { ReactComponent as DividerIcon } from "assets/icons/widget/divider.svg";
|
|
import { ReactComponent as MenuButtonIcon } from "assets/icons/widget/menu-button.svg";
|
|
|
|
/* eslint-disable react/display-name */
|
|
|
|
export const WidgetIcons: {
|
|
[id: string]: JSXElementConstructor<IconProps>;
|
|
} = {
|
|
SPINNER_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<SpinnerIcon />
|
|
</IconWrapper>
|
|
),
|
|
BUTTON_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<ButtonIcon />
|
|
</IconWrapper>
|
|
),
|
|
CHECKBOX_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<CheckboxIcon />
|
|
</IconWrapper>
|
|
),
|
|
COLLAPSE_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<CollapseIcon />
|
|
</IconWrapper>
|
|
),
|
|
CONTAINER_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<ContainerIcon />
|
|
</IconWrapper>
|
|
),
|
|
DATE_PICKER_WIDGET2: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<DatePickerIcon />
|
|
</IconWrapper>
|
|
),
|
|
TABLE_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<TableIcon />
|
|
</IconWrapper>
|
|
),
|
|
VIDEO_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<VideoIcon />
|
|
</IconWrapper>
|
|
),
|
|
DROP_DOWN_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<DropDownIcon />
|
|
</IconWrapper>
|
|
),
|
|
RADIO_GROUP_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<RadioGroupIcon />
|
|
</IconWrapper>
|
|
),
|
|
INPUT_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<InputIcon />
|
|
</IconWrapper>
|
|
),
|
|
RICH_TEXT_EDITOR_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<RichTextEditorIcon />
|
|
</IconWrapper>
|
|
),
|
|
SWITCH_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<SwitchIcon />
|
|
</IconWrapper>
|
|
),
|
|
TEXT_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<TextIcon />
|
|
</IconWrapper>
|
|
),
|
|
IMAGE_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<ImageIcon />
|
|
</IconWrapper>
|
|
),
|
|
FILE_PICKER_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<FilePickerIcon />
|
|
</IconWrapper>
|
|
),
|
|
TABS_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<TabsIcon />
|
|
</IconWrapper>
|
|
),
|
|
CHART_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<ChartIcon />
|
|
</IconWrapper>
|
|
),
|
|
FORM_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<FormIcon />
|
|
</IconWrapper>
|
|
),
|
|
MAP_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<MapIcon />
|
|
</IconWrapper>
|
|
),
|
|
MODAL_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<ModalIcon />
|
|
</IconWrapper>
|
|
),
|
|
FORM_BUTTON_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<ButtonIcon />
|
|
</IconWrapper>
|
|
),
|
|
LIST_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props} data-testid="list-widget-icon">
|
|
<ListIcon />
|
|
</IconWrapper>
|
|
),
|
|
RATE_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<RatingIcon />
|
|
</IconWrapper>
|
|
),
|
|
IFRAME_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<EmbedIcon />
|
|
</IconWrapper>
|
|
),
|
|
DIVIDER_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<DividerIcon />
|
|
</IconWrapper>
|
|
),
|
|
MENU_BUTTON_WIDGET: (props: IconProps) => (
|
|
<IconWrapper {...props}>
|
|
<MenuButtonIcon />
|
|
</IconWrapper>
|
|
),
|
|
};
|
|
|
|
export type WidgetIcon = typeof WidgetIcons[keyof typeof WidgetIcons];
|