#5459 for SplitButton

primefaces · Dec 25, 2023 · 019a749 · 019a749
1 parent c41b7d7
commit 019a749
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 245 deletions.
diff --git a/components/doc/splitbutton/styledoc.js b/components/doc/splitbutton/styledoc.js
@@ -28,7 +28,7 @@ export function StyleDoc() {
                             <td>Dropdown button.</td>
                         </tr>
                         <tr>
-                            <td>p-menu</td>
+                            <td>p-tieredmenu</td>
                             <td>Overlay menu.</td>
                         </tr>
                     </tbody>

diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js
@@ -2,14 +2,13 @@ import * as React from 'react';
 import PrimeReact, { PrimeReactContext } from '../api/Api';
 import { Button } from '../button/Button';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { useMountEffect, useOverlayListener, useUnmountEffect } from '../hooks/Hooks';
+import { useMountEffect, useUnmountEffect } from '../hooks/Hooks';
 import { ChevronDownIcon } from '../icons/chevrondown';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Tooltip } from '../tooltip/Tooltip';
 import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
 import { SplitButtonBase } from './SplitButtonBase';
-import { SplitButtonItem } from './SplitButtonItem';
-import { SplitButtonPanel } from './SplitButtonPanel';
+import { TieredMenu } from '../tieredmenu/TieredMenu';
 
 export const SplitButton = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -19,6 +18,7 @@ export const SplitButton = React.memo(
         const [idState, setIdState] = React.useState(props.id);
         const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
         const elementRef = React.useRef(null);
+        const menuRef = React.useRef(null);
         const defaultButtonRef = React.useRef(null);
         const overlayRef = React.useRef(null);
         const metaData = {
@@ -33,57 +33,40 @@ export const SplitButton = React.memo(
 
         useHandleStyle(SplitButtonBase.css.styles, isUnstyled, { name: 'splitbutton' });
 
-        const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
-            target: elementRef,
-            overlay: overlayRef,
-            listener: (event, { valid }) => {
-                valid && hide();
-            },
-            when: overlayVisibleState
-        });
-
         const onPanelClick = (event) => {
             OverlayService.emit('overlay-click', {
                 originalEvent: event,
                 target: elementRef.current
             });
         };
 
-        const onDropdownButtonClick = () => {
-            overlayVisibleState ? hide() : show();
+        const onMenuButtonKeyDown = (event) => {
+            if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
+                onDropdownButtonClick(event);
+                event.preventDefault();
+            }
         };
 
-        const onItemClick = () => {
-            hide();
+        const onDropdownButtonClick = (event) => {
+            overlayVisibleState ? hide(event) : show(event);
         };
 
-        const show = () => {
+        const show = (event) => {
             setOverlayVisibleState(true);
+            menuRef.current && menuRef.current.show(event);
         };
 
-        const hide = () => {
+        const hide = (event) => {
             setOverlayVisibleState(false);
+            menuRef.current && menuRef.current.hide(event);
         };
 
-        const onOverlayEnter = () => {
-            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['overlay']) || PrimeReact.zIndex['overlay']);
-            DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
-            alignOverlay();
-        };
-
-        const onOverlayEntered = () => {
-            bindOverlayListener();
-
+        const onMenuShow = () => {
             props.onShow && props.onShow();
         };
 
-        const onOverlayExit = () => {
-            unbindOverlayListener();
-        };
-
-        const onOverlayExited = () => {
-            ZIndexUtils.clear(overlayRef.current);
-
+        const onMenuHide = () => {
+            setOverlayVisibleState(false);
             props.onHide && props.onHide();
         };
 
@@ -110,16 +93,6 @@ export const SplitButton = React.memo(
             getElement: () => elementRef.current
         }));
 
-        const createItems = () => {
-            if (props.model) {
-                return props.model.map((menuitem, index) => {
-                    return <SplitButtonItem hostName="SplitButton" splitButtonProps={props} menuitem={menuitem} key={index} onItemClick={onItemClick} ptm={ptm} cx={cx} />;
-                });
-            }
-
-            return null;
-        };
-
         if (props.visible === false) {
             return null;
         }
@@ -131,8 +104,7 @@ export const SplitButton = React.memo(
         };
         const size = sizeMapping[props.size];
         const buttonContent = props.buttonTemplate ? ObjectUtils.getJSXElement(props.buttonTemplate, props) : null;
-        const items = createItems();
-        const menuId = idState + '_menu';
+        const menuId = idState + '_overlay';
 
         const dropdownIcon = () => {
             const iconProps = mergeProps(
@@ -171,6 +143,7 @@ export const SplitButton = React.memo(
                         loadingIcon={props.loadingIcon}
                         severity={props.severity}
                         label={props.label}
+                        aria-label={props.label}
                         raised={props.raised}
                         onClick={props.onClick}
                         disabled={props.disabled}
@@ -195,7 +168,7 @@ export const SplitButton = React.memo(
                         disabled={props.disabled}
                         aria-expanded={overlayVisibleState}
                         aria-haspopup="true"
-                        aria-controls={overlayVisibleState ? menuId : null}
+                        aria-controls={menuId}
                         {...props.menuButtonProps}
                         size={props.size}
                         severity={props.severity}
@@ -206,27 +179,25 @@ export const SplitButton = React.memo(
                         __parentMetadata={{
                             parent: metaData
                         }}
+                        onKeyDown={onMenuButtonKeyDown}
                         unstyled={props.unstyled}
                     />
-                    <SplitButtonPanel
-                        hostName="SplitButton"
-                        ref={overlayRef}
+                    <TieredMenu
+                        ref={menuRef}
+                        popup={true}
+                        unstyled={props.unstyled}
+                        model={props.model}
                         appendTo={props.appendTo}
-                        menuId={menuId}
-                        menuStyle={props.menuStyle}
-                        menuClassName={props.menuClassName}
+                        id={menuId}
+                        style={props.menuStyle}
+                        autoZIndex={props.autoZIndex}
+                        baseZIndex={props.baseZIndex}
+                        className={props.menuClassName}
                         onClick={onPanelClick}
-                        in={overlayVisibleState}
-                        onEnter={onOverlayEnter}
-                        onEntered={onOverlayEntered}
-                        onExit={onOverlayExit}
-                        onExited={onOverlayExited}
-                        transitionOptions={props.transitionOptions}
-                        ptm={ptm}
-                        cx={cx}
-                    >
-                        {items}
-                    </SplitButtonPanel>
+                        onShow={onMenuShow}
+                        onHide={onMenuHide}
+                        pt={ptm('menu')}
+                    />
                 </div>
                 {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} pt={ptm('tooltip')} />}
             </>

diff --git a/components/lib/splitbutton/SplitButtonBase.js b/components/lib/splitbutton/SplitButtonBase.js
@@ -69,6 +69,8 @@ export const SplitButtonBase = ComponentBase.extend({
         id: null,
         label: null,
         icon: null,
+        autoZIndex: false,
+        baseZIndex: 0,
         loading: false,
         loadingIcon: null,
         model: null,

diff --git a/components/lib/splitbutton/SplitButtonItem.js b/components/lib/splitbutton/SplitButtonItem.js
diff --git a/components/lib/splitbutton/SplitButtonPanel.js b/components/lib/splitbutton/SplitButtonPanel.js