PromucFlow_constructor/app/client/src/icons/WidgetIcons.tsx
Paul Li 560db4d4df
Menu button widget (#5334)
* 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
2021-07-13 13:35:09 +05:30

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