@syncfusion/react-splitbuttons/src/split-button/split-button.js

A package of feature-rich React components such as DropDownButton, SplitButton.

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useRef, forwardRef, useImperativeHandle, useEffect } from 'react';
import { Button, Position, Size } from '@syncfusion/react-buttons';
import { preRender, useProviderContext } from '@syncfusion/react-base';
import { DropDownButton } from '../dropdown-button/dropdown-button';
/**
 * The Split Button component provides a combination of a default button action and a Dropdown Button, enabling users to quickly access additional options or actions in a compact interface.
 *
 * ```typescript
 * import { SplitButton } from "@syncfusion/react-splitbuttons";
 *
 * const menuItems = [{ text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }];
 * <SplitButton items={menuItems}>Default Action</SplitButton>
 * ```
 */
export const SplitButton = forwardRef((props, ref) => {
    const { className = '', icon, iconPosition = Position.Left, items = [], popupWidth = 'auto', disabled = false, target, lazyOpen = false, children, itemTemplate, color, variant, size = Size.Medium, onOpen, onClose, onSelect, ...domProps } = props;
    const buttonRef = useRef(null);
    const dropDownRef = useRef(null);
    const wrapperRef = useRef(null);
    const [targetElement, setTargetElement] = useState(null);
    const { dir } = useProviderContext();
    useEffect(() => {
        if (wrapperRef.current) {
            setTargetElement(wrapperRef);
        }
    }, []);
    const publicAPI = {
        iconPosition,
        icon,
        target,
        popupWidth,
        items,
        lazyOpen,
        itemTemplate,
        color,
        variant,
        size
    };
    useEffect(() => {
        preRender('splitButton');
    }, []);
    useImperativeHandle(ref, () => ({
        ...publicAPI,
        toggle: () => {
            if (dropDownRef.current && dropDownRef.current.toggle) {
                dropDownRef.current.toggle();
            }
        },
        element: buttonRef.current?.element
    }), [publicAPI]);
    const wrapperClassName = [
        'sf-split-btn-wrapper',
        size && `sf-split-btn-${size.toLowerCase().substring(0, 2)}`,
        variant ? `sf-${variant.toLowerCase()}` : '',
        className,
        dir === 'rtl' ? 'sf-rtl' : ''
    ].filter(Boolean).join(' ');
    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: wrapperClassName, children: [_jsx(Button, { ref: buttonRef, className: `${className} ${(dir === 'rtl') ? 'sf-rtl' : ''} sf-control sf-btn sf-split-btn`, icon: icon, color: color, variant: variant, size: size, iconPosition: iconPosition, disabled: disabled, ...domProps, children: children }), _jsx(DropDownButton, { ref: dropDownRef, relateTo: targetElement?.current, target: target || targetElement || undefined, className: `${className} ${(dir === 'rtl') ? 'sf-rtl' : ''} sf-icon-btn sf-control sf-dropdown-btn sf-lib sf-btn`, items: items, color: color, variant: variant, size: size, itemTemplate: itemTemplate, disabled: disabled, popupWidth: popupWidth, lazyOpen: lazyOpen, onOpen: onOpen, onClose: onClose, onSelect: onSelect })] }) }));
});
export default SplitButton;