@coreui/react/dist/esm/components/search-button/CSearchButton.js

UI Components Library for React.js

import { __rest } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import { useForkedRef } from '../../hooks/useForkedRef.js';
import '@popperjs/core';
import { parseShortcut, getPreferredShortcut, formatShortcutTokens, shouldIgnoreShortcut, matchesShortcut, getPressedKeys } from './utils.js';

const CSearchButton = forwardRef((_a, ref) => {
    var { children, className, disabled, icon, onClick, onTrigger, placeholder = 'Search', preventDefault = true, shortcut = 'meta+/,ctrl+/', type = 'button' } = _a, rest = __rest(_a, ["children", "className", "disabled", "icon", "onClick", "onTrigger", "placeholder", "preventDefault", "shortcut", "type"]);
    const buttonRef = useRef(null);
    const forkedRef = useForkedRef(ref, buttonRef);
    const [activeKeys, setActiveKeys] = useState([]);
    const shortcuts = useMemo(() => parseShortcut(shortcut), [shortcut]);
    const preferredShortcut = useMemo(() => getPreferredShortcut(shortcuts), [shortcuts]);
    const shortcutTokens = useMemo(() => formatShortcutTokens((preferredShortcut === null || preferredShortcut === void 0 ? void 0 : preferredShortcut.shortcut) || ''), [preferredShortcut]);
    const handleShortcut = useCallback((event) => {
        if (disabled || event.defaultPrevented || event.repeat || shouldIgnoreShortcut(event)) {
            return;
        }
        const matchedShortcut = shortcuts.find((shortcut) => matchesShortcut(shortcut, event));
        if (!matchedShortcut) {
            return;
        }
        if (preventDefault) {
            event.preventDefault();
        }
        onTrigger === null || onTrigger === void 0 ? void 0 : onTrigger();
    }, [disabled, onTrigger, preventDefault, shortcuts]);
    const handleDocumentKeydown = useCallback((event) => {
        setActiveKeys(Array.from(getPressedKeys(event)));
        handleShortcut(event);
    }, [handleShortcut]);
    const handleDocumentKeyup = useCallback((event) => {
        setActiveKeys(Array.from(getPressedKeys(event)));
    }, []);
    const handleWindowBlur = useCallback(() => {
        setActiveKeys([]);
    }, []);
    useEffect(() => {
        if (typeof document === 'undefined' || typeof window === 'undefined') {
            return;
        }
        document.addEventListener('keydown', handleDocumentKeydown);
        document.addEventListener('keyup', handleDocumentKeyup);
        window.addEventListener('blur', handleWindowBlur);
        return () => {
            document.removeEventListener('keydown', handleDocumentKeydown);
            document.removeEventListener('keyup', handleDocumentKeyup);
            window.removeEventListener('blur', handleWindowBlur);
        };
    }, [handleDocumentKeydown, handleDocumentKeyup, handleWindowBlur]);
    const handleClick = (event) => {
        onClick === null || onClick === void 0 ? void 0 : onClick(event);
        onTrigger === null || onTrigger === void 0 ? void 0 : onTrigger();
    };
    return (React.createElement("button", Object.assign({ type: type, className: classNames('search-button', className), disabled: disabled, onClick: handleClick }, rest, { ref: forkedRef }), children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null, icon !== null && icon !== void 0 ? icon : (React.createElement("svg", { className: "search-button-icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "aria-hidden": "true" },
        React.createElement("path", { fill: "currentColor", d: "m479.6 399.716-81.084-81.084-62.368-25.767A175 175 0 0 0 368 192c0-97.047-78.953-176-176-176S16 94.953 16 192s78.953 176 176 176a175.03 175.03 0 0 0 101.619-32.377l25.7 62.2 81.081 81.088a56 56 0 1 0 79.2-79.195M48 192c0-79.4 64.6-144 144-144s144 64.6 144 144-64.6 144-144 144S48 271.4 48 192m408.971 264.284a24.03 24.03 0 0 1-33.942 0l-76.572-76.572-23.894-57.835 57.837 23.894 76.573 76.572a24.03 24.03 0 0 1-.002 33.941" }))),
        React.createElement("span", { className: "search-button-placeholder" }, placeholder))),
        React.createElement("span", { className: "search-button-keys", "aria-hidden": "true" }, shortcutTokens.map((key) => (React.createElement("span", { className: classNames('search-button-key', { active: activeKeys.includes(key) }), "data-coreui-search-button-key": key, key: key }, key))))));
});
CSearchButton.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    disabled: PropTypes.bool,
    icon: PropTypes.node,
    onTrigger: PropTypes.func,
    placeholder: PropTypes.node,
    preventDefault: PropTypes.bool,
    shortcut: PropTypes.string,
};
CSearchButton.displayName = 'CSearchButton';

export { CSearchButton };
//# sourceMappingURL=CSearchButton.js.map