Refactor #4602 - For ContextMenu

primefaces · Jul 27, 2023 · 8118900 · 8118900
1 parent 9b2f59d
commit 8118900
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 78 deletions.
diff --git a/components/lib/contextmenu/ContextMenu.css b/components/lib/contextmenu/ContextMenu.css
diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js
@@ -6,6 +6,7 @@ import { Portal } from '../portal/Portal';
 import { DomHandler, UniqueComponentId, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
 import { ContextMenuBase } from './ContextMenuBase';
 import { ContextMenuSub } from './ContextMenuSub';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const ContextMenu = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -16,7 +17,7 @@ export const ContextMenu = React.memo(
         const [reshowState, setReshowState] = React.useState(false);
         const [resetMenuState, setResetMenuState] = React.useState(false);
         const [attributeSelectorState, setAttributeSelectorState] = React.useState(null);
-        const { ptm } = ContextMenuBase.setMetaData({
+        const { ptm, cx, isUnstyled } = ContextMenuBase.setMetaData({
             props,
             state: {
                 visible: visibleState,
@@ -25,6 +26,8 @@ export const ContextMenu = React.memo(
                 attributeSelector: attributeSelectorState
             }
         });
+
+        useHandleStyle(ContextMenuBase.css.styles, isUnstyled, { name: 'contextmenu' });
         const menuRef = React.useRef(null);
         const currentEvent = React.useRef(null);
         const styleElementRef = React.useRef(null);
@@ -128,6 +131,8 @@ export const ContextMenu = React.memo(
         };
 
         const onEnter = () => {
+            DomHandler.addStyles(menuRef.current, { position: 'absolute' });
+
             if (props.autoZIndex) {
                 ZIndexUtils.set('menu', menuRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex['menu']) || PrimeReact.zIndex['menu']);
             }
@@ -251,16 +256,10 @@ export const ContextMenu = React.memo(
         }));
 
         const createContextMenu = () => {
-            const className = classNames('p-contextmenu p-component', props.className, {
-                'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
-                'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
-            });
-
             const rootProps = mergeProps(
                 {
                     id: props.id,
-                    ref: menuRef,
-                    className,
+                    className: cx('root', { context }),
                     style: props.style,
                     onClick: (e) => onMenuClick(e),
                     onMouseEnter: (e) => onMenuMouseEnter(e)
@@ -282,8 +281,8 @@ export const ContextMenu = React.memo(
                     onExit={onExit}
                     onExited={onExited}
                 >
-                    <div {...rootProps}>
-                        <ContextMenuSub menuProps={props} model={props.model} root resetMenu={resetMenuState} onLeafClick={onLeafClick} isMobileMode={isMobileMode} submenuIcon={props.submenuIcon} ptm={ptm} />
+                    <div ref={menuRef} {...rootProps}>
+                        <ContextMenuSub menuProps={props} model={props.model} root resetMenu={resetMenuState} onLeafClick={onLeafClick} isMobileMode={isMobileMode} submenuIcon={props.submenuIcon} ptm={ptm} cx={cx} />
                     </div>
                 </CSSTransition>
             );

diff --git a/components/lib/contextmenu/ContextMenuBase.js b/components/lib/contextmenu/ContextMenuBase.js
@@ -1,4 +1,68 @@
+import PrimeReact from '../api/Api';
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const styles = `
+.p-contextmenu ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.p-contextmenu .p-submenu-list {
+    position: absolute;
+    min-width: 100%;
+    z-index: 1;
+}
+
+.p-contextmenu .p-menuitem-link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-contextmenu .p-menuitem-text {
+    line-height: 1;
+}
+
+.p-contextmenu .p-menuitem {
+    position: relative;
+}
+
+.p-contextmenu .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+}
+
+.p-contextmenu-enter {
+    opacity: 0;
+}
+
+.p-contextmenu-enter-active {
+    opacity: 1;
+    transition: opacity 250ms;
+}
+`;
+
+const classes = {
+    root: ({ props, context }) =>
+        classNames('p-contextmenu p-component', props.className, {
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
+    menu: ({ menuProps: props }) =>
+        classNames({
+            'p-submenu-list': !props.root
+        }),
+    menuitem: ({ item, active }) => classNames('p-menuitem', { 'p-menuitem-active': active }, item.className),
+    action: ({ item }) => classNames('p-menuitem-link', { 'p-disabled': item.disabled }),
+    icon: 'p-menuitem-icon',
+    submenuIcon: 'p-submenu-icon',
+    label: 'p-menuitem-text',
+    separator: 'p-menu-separator'
+};
 
 export const ContextMenuBase = ComponentBase.extend({
     defaultProps: {
@@ -18,5 +82,9 @@ export const ContextMenuBase = ComponentBase.extend({
         onHide: null,
         submenuIcon: null,
         children: undefined
+    },
+    css: {
+        classes,
+        styles
     }
 });
diff --git a/components/lib/contextmenu/ContextMenuSub.js b/components/lib/contextmenu/ContextMenuSub.js
@@ -2,16 +2,17 @@ import * as React from 'react';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useUpdateEffect } from '../hooks/Hooks';
 import { Ripple } from '../ripple/Ripple';
-import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
+import { DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
 import { AngleRightIcon } from '../icons/angleright';
 
 export const ContextMenuSub = React.memo((props) => {
     const [activeItemState, setActiveItemState] = React.useState(null);
     const submenuRef = React.useRef(null);
     const active = props.root || !props.resetMenu;
+    const { ptm, cx } = props;
 
     const getPTOptions = (item, key) => {
-        return props.ptm(key, {
+        return ptm(key, {
             context: {
                 active: activeItemState === item
             }
@@ -96,17 +97,17 @@ export const ContextMenuSub = React.memo((props) => {
             {
                 role: 'separator',
                 key: 'separator_' + index,
-                className: 'p-menu-separator'
+                className: cx('separator')
             },
-            props.ptm('separator')
+            ptm('separator')
         );
 
         return <li {...separatorProps}></li>;
     };
 
     const createSubmenu = (item) => {
         if (item.items) {
-            return <ContextMenuSub menuProps={props.menuProps} model={item.items} resetMenu={item !== activeItemState} onLeafClick={props.onLeafClick} isMobileMode={props.isMobileMode} submenuIcon={props.submenuIcon} ptm={props.ptm} />;
+            return <ContextMenuSub menuProps={props.menuProps} model={item.items} resetMenu={item !== activeItemState} onLeafClick={props.onLeafClick} isMobileMode={props.isMobileMode} submenuIcon={props.submenuIcon} ptm={ptm} cx={cx} />;
         }
 
         return null;
@@ -119,27 +120,23 @@ export const ContextMenuSub = React.memo((props) => {
 
         const active = activeItemState === item;
         const key = item.label + '_' + index;
-        const className = classNames('p-menuitem', { 'p-menuitem-active': active }, item.className);
-        const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled });
-        const iconClassName = 'p-menuitem-icon';
         const iconProps = mergeProps(
             {
-                className: iconClassName
+                className: cx('icon')
             },
             getPTOptions(item, 'icon')
         );
         const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props: props.menuProps });
-        const submenuIconClassName = 'p-submenu-icon';
         const submenuIconProps = mergeProps(
             {
-                className: submenuIconClassName
+                className: cx('submenuIcon')
             },
             getPTOptions(item, 'submenuIcon')
         );
 
         const labelProps = mergeProps(
             {
-                className: 'p-menuitem-text'
+                className: cx('label')
             },
             getPTOptions(item, 'label')
         );
@@ -149,7 +146,7 @@ export const ContextMenuSub = React.memo((props) => {
         const actionProps = mergeProps(
             {
                 href: item.url || '#',
-                className: linkClassName,
+                className: cx('action', { item }),
                 target: item.target,
                 onClick: (event) => onItemClick(event, item, index),
                 role: 'menuitem',
@@ -173,7 +170,7 @@ export const ContextMenuSub = React.memo((props) => {
                 onClick: (event) => onItemClick(event, item, index),
                 className: 'p-menuitem-link',
                 labelClassName: 'p-menuitem-text',
-                iconClassName,
+                iconClassName: 'p-menuitem-icon',
                 submenuIconClassName,
                 element: content,
                 props,
@@ -187,7 +184,7 @@ export const ContextMenuSub = React.memo((props) => {
             {
                 id: item.id,
                 role: 'none',
-                className,
+                className: cx('menuitem', { item, active }),
                 style: item.style,
                 key,
                 onMouseEnter: (event) => onItemMouseEnter(event, item)
@@ -211,21 +208,19 @@ export const ContextMenuSub = React.memo((props) => {
         return props.model ? props.model.map(createItem) : null;
     };
 
-    const className = classNames({
-        'p-submenu-list': !props.root
-    });
     const submenu = createMenu();
     const menuProps = mergeProps(
         {
-            ref: submenuRef,
-            className
+            className: cx('menu', { menuProps: props })
         },
-        props.ptm('menu')
+        ptm('menu')
     );
 
     return (
         <CSSTransition nodeRef={submenuRef} classNames="p-contextmenusub" in={active} timeout={{ enter: 0, exit: 0 }} unmountOnExit onEnter={onEnter}>
-            <ul {...menuProps}>{submenu}</ul>
+            <ul ref={submenuRef} {...menuProps}>
+                {submenu}
+            </ul>
         </CSSTransition>
     );
 });

diff --git a/components/lib/contextmenu/contextmenu.d.ts b/components/lib/contextmenu/contextmenu.d.ts
@@ -164,6 +164,11 @@ export interface ContextMenuProps extends Omit<React.DetailedHTMLProps<React.HTM
      * @type {ContextMenuPassThroughOptions}
      */
     pt?: ContextMenuPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/styles/primereact.css b/styles/primereact.css
@@ -3,7 +3,6 @@
 @import "../components/lib/button/Button.css";
 @import "../components/lib/carousel/Carousel.css";
 @import "../components/lib/galleria/Galleria.css";
-@import "../components/lib/contextmenu/ContextMenu.css";
 @import "../components/lib/datascroller/DataScroller.css";
 @import "../components/lib/dataview/DataView.css";
 @import "../components/lib/datatable/DataTable.css";