diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/config/anvilConfig.ts b/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/config/anvilConfig.ts new file mode 100644 index 000000000000..169db7b31b60 --- /dev/null +++ b/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/config/anvilConfig.ts @@ -0,0 +1,10 @@ +export const anvilConfig = { + isLargeWidget: false, + widgetSize: { + maxWidth: { + base: "100%", + "280px": "sizing-70", + }, + minWidth: "sizing-14", + }, +}; diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/config/index.ts b/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/config/index.ts index ab36e7a74f4d..fa4caee3937f 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/config/index.ts +++ b/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/config/index.ts @@ -1,6 +1,7 @@ export * from "./propertyPaneConfig"; -export { autocompleteConfig } from "./autocompleteConfig"; -export { defaultsConfig } from "./defaultsConfig"; export { metaConfig } from "./metaConfig"; +export { anvilConfig } from "./anvilConfig"; export { settersConfig } from "./settersConfig"; export { methodsConfig } from "./methodsConfig"; +export { defaultsConfig } from "./defaultsConfig"; +export { autocompleteConfig } from "./autocompleteConfig"; diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/config/propertyPaneConfig/contentConfig.ts b/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/config/propertyPaneConfig/contentConfig.ts index 52525d150834..633649ebabb7 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/config/propertyPaneConfig/contentConfig.ts +++ b/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/config/propertyPaneConfig/contentConfig.ts @@ -3,9 +3,9 @@ import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType"; import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory"; import { sourceDataArrayValidation } from "./validations"; import { configureMenuItemsConfig, menuItemsConfig } from "./childPanels"; -import { updateMenuItemsSource } from "../helper"; import type { MenuButtonWidgetProps } from "../../widget/types"; import type { PropertyPaneConfig } from "constants/PropertyControlConstants"; +import { updateMenuItemsSource } from "../helper"; export const propertyPaneContentConfig = [ { @@ -43,6 +43,7 @@ export const propertyPaneContentConfig = [ isTriggerProperty: false, validation: { type: ValidationTypes.TEXT }, updateHook: updateMenuItemsSource, + hidden: () => true, dependencies: ["sourceData", "configureMenuItems"], }, { diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/widget/index.tsx b/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/widget/index.tsx index f0708c9ece4d..a564912ab2fa 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/widget/index.tsx +++ b/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/widget/index.tsx @@ -1,24 +1,17 @@ -import React from "react"; -import type { SetterConfig } from "entities/AppTheming"; -import type { WidgetState } from "widgets/BaseWidget"; -import BaseWidget from "widgets/BaseWidget"; -import { - metaConfig, - defaultsConfig, - autocompleteConfig, - propertyPaneContentConfig, - propertyPaneStyleConfig, - settersConfig, - methodsConfig, -} from "../config"; -import type { AnvilConfig } from "WidgetProvider/constants"; -import { Button, MenuTrigger, Menu } from "@appsmith/wds"; +import React, { type Key } from "react"; import { isArray, orderBy } from "lodash"; -import type { MenuButtonWidgetProps, MenuItem } from "./types"; +import BaseWidget from "widgets/BaseWidget"; +import type { WidgetState } from "widgets/BaseWidget"; +import type { SetterConfig } from "entities/AppTheming"; import { EventType, type ExecuteTriggerPayload, } from "constants/AppsmithActionConstants/ActionConstants"; +import type { AnvilConfig } from "WidgetProvider/constants"; +import { Button, MenuTrigger, Menu, MenuItem } from "@appsmith/wds"; + +import * as config from "../config"; +import type { MenuButtonWidgetProps } from "./types"; class WDSMenuButtonWidget extends BaseWidget< MenuButtonWidgetProps, @@ -26,56 +19,43 @@ class WDSMenuButtonWidget extends BaseWidget< > { constructor(props: MenuButtonWidgetProps) { super(props); - - this.state = { - isLoading: false, - }; } static type = "WDS_MENU_BUTTON_WIDGET"; static getConfig() { - return metaConfig; + return config.metaConfig; } static getDefaults() { - return defaultsConfig; + return config.defaultsConfig; } static getAnvilConfig(): AnvilConfig | null { - return { - isLargeWidget: false, - widgetSize: { - maxWidth: { - base: "100%", - "280px": "sizing-70", - }, - minWidth: "sizing-14", - }, - }; + return config.anvilConfig; } static getAutocompleteDefinitions() { - return autocompleteConfig; + return config.autocompleteConfig; } static getPropertyPaneContentConfig() { - return propertyPaneContentConfig; + return config.propertyPaneContentConfig; } static getPropertyPaneStyleConfig() { - return propertyPaneStyleConfig; + return config.propertyPaneStyleConfig; } static getSetterConfig(): SetterConfig { - return settersConfig; + return config.settersConfig; } static getMethods() { - return methodsConfig; + return config.methodsConfig; } - menuItemClickHandler = (onClick: string | undefined, index: number) => { + onMenuItemClick = (onClick: string | undefined, index: number) => { if (onClick) { const config: ExecuteTriggerPayload = { triggerPropertyName: "onClick", @@ -85,6 +65,9 @@ class WDSMenuButtonWidget extends BaseWidget< }, }; + // in case when the menu items source is dynamic, we need to pass the current item to the global context + // the reason is in onClick, we can access the current item and current index by writing `{{currentItem}}` and `{{currentIndex}}`, + // so we need to pass the current item to the global context if (this.props.menuItemsSource === "dynamic") { config.globalContext = { currentItem: this.props.sourceData @@ -108,7 +91,9 @@ class WDSMenuButtonWidget extends BaseWidget< .filter((item) => item.isVisible === true); return orderBy(visibleItems, ["index"], ["asc"]); - } else if ( + } + + if ( menuItemsSource === "dynamic" && isArray(sourceData) && sourceData?.length && @@ -116,7 +101,10 @@ class WDSMenuButtonWidget extends BaseWidget< ) { const { config } = configureMenuItems; - const getValue = (propertyName: keyof MenuItem, index: number) => { + const getDynamicMenuItemValue = ( + propertyName: keyof typeof config, + index: number, + ) => { const value = config[propertyName]; if (isArray(value)) { @@ -130,15 +118,12 @@ class WDSMenuButtonWidget extends BaseWidget< .map((item, index) => ({ ...item, id: index.toString(), - isVisible: getValue("isVisible", index), - isDisabled: getValue("isDisabled", index), + isVisible: getDynamicMenuItemValue("isVisible", index), + isDisabled: getDynamicMenuItemValue("isDisabled", index), index: index, widgetId: "", - label: getValue("label", index), + label: getDynamicMenuItemValue("label", index), onClick: config?.onClick, - iconAlign: getValue("iconAlign", index), - iconName: getValue("iconName", index), - textColor: getValue("textColor", index), })) .filter((item) => item.isVisible === true); @@ -159,7 +144,7 @@ class WDSMenuButtonWidget extends BaseWidget< triggerButtonVariant, } = this.props; - const visibleItems: MenuItem[] = this.getVisibleItems(); + const visibleItems = this.getVisibleItems(); const disabledKeys = visibleItems .filter((item) => item.isDisabled === true) .map((item) => item.id); @@ -178,21 +163,30 @@ class WDSMenuButtonWidget extends BaseWidget< } onAction={(key) => { const clickedItemIndex = visibleItems.findIndex( (item) => item.id === key, ); if (clickedItemIndex > -1) { - this.menuItemClickHandler( + this.onMenuItemClick( visibleItems[clickedItemIndex]?.onClick, clickedItemIndex, ); } }} - /> + > + {visibleItems.map((item) => ( + + {item.label} + + ))} + ); } diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/widget/types.ts b/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/widget/types.ts index bcd7daac9820..b06e1bafc055 100644 --- a/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/widget/types.ts +++ b/app/client/src/modules/ui-builder/ui/wds/WDSMenuButtonWidget/widget/types.ts @@ -1,45 +1,26 @@ -import type { ButtonProps, COLORS, IconProps } from "@appsmith/wds"; +import type { ButtonProps, IconProps } from "@appsmith/wds"; import type { WidgetProps } from "widgets/BaseWidget"; -import type { IconName } from "@blueprintjs/icons"; - -export interface MenuItem { - // Meta - id: string; - index?: number; - widgetId?: string; - - // General - label?: string; - isVisible?: boolean; - isDisabled?: boolean; - onClick?: string; - - // Style - iconName?: IconName; - iconAlign?: "start" | "end"; - textColor?: keyof typeof COLORS; -} export interface ConfigureMenuItems { label: string; id: string; - config: MenuItem; + config: { + id: string; + label: string; + isVisible: boolean; + isDisabled: boolean; + onClick: string; + }; } export interface MenuButtonWidgetProps extends WidgetProps { - // General label?: string; isDisabled?: boolean; isVisible?: boolean; - - // Source data and menu items - sourceData?: Array>; + sourceData?: Array; menuItemsSource: "static" | "dynamic"; configureMenuItems: ConfigureMenuItems; - menuItems: Record; - getVisibleItems: () => Array; - - // Trigger button style + menuItems: Record; triggerButtonIconName?: IconProps["name"]; triggerButtonIconAlign?: ButtonProps["iconPosition"]; triggerButtonVariant?: ButtonProps["variant"];