@wix/design-system/dist/esm/Input/components/Suffix/Suffix.js

@wix/design-system

import React, { useCallback, useContext, useMemo } from 'react';
import { DropDownArrow } from '@wix/wix-ui-icons-common/system';
import CloseButton from '../../../CloseButton';
import StatusIndicator from '../../../StatusIndicator';
import { classes } from '../../Input.st.css.js';
import { dataHooks, SIZES } from '../../Input.constants';
import Tooltip from '../../../Tooltip';
import { StatusContext } from '../../../FormField/StatusContext';
import { useIcons } from '../../../WixDesignSystemIconThemeProvider';
export const Suffix = ({ statusMessage, status, disabled, menuArrow, suffix, tooltipPlacement, clearButtonTooltipContent, clearButtonTooltipProps, clearButtonAriaLabel, statusMessageTooltipProps, hideStatusSuffix, onClear, clearButton, value, size, onInputClicked, focusOnClearClick, inputElementRef, }) => {
    const icons = useIcons('InputSuffix', {
        DropDownArrow,
    });
    const isClearButtonVisible = (!!onClear || !!clearButton) && !!value && !disabled;
    const statusContext = useContext(StatusContext);
    const handleClick = useCallback((event) => {
        if (!disabled) {
            inputElementRef.current?.focus();
            onInputClicked?.(event);
        }
    }, [disabled, inputElementRef, onInputClicked]);
    const handleClear = useCallback((event) => {
        if (focusOnClearClick) {
            inputElementRef.current?.focus();
        }
        onClear?.(event);
    }, [focusOnClearClick, inputElementRef, onClear]);
    const ClearButton = useMemo(() => {
        if (!isClearButtonVisible)
            return null;
        const handleKeyDown = (event) => {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                handleClear(event);
            }
        };
        const clearButtonSizeMap = {
            [SIZES.tiny]: 'small',
            [SIZES.small]: 'small',
            [SIZES.medium]: 'medium',
            [SIZES.large]: 'medium',
        };
        const ClearButtonElement = (React.createElement(CloseButton, { as: "button", className: classes.clearButton, dataHook: dataHooks.clearButton, skin: "standardFilled", size: clearButtonSizeMap[size ?? SIZES.medium], onClick: handleClear, onKeyDown: handleKeyDown, "aria-label": clearButtonAriaLabel }));
        return (React.createElement("div", { className: classes.clearButtonWrapper }, clearButtonTooltipContent ? (React.createElement(Tooltip, { ...clearButtonTooltipProps, content: clearButtonTooltipContent, dataHook: dataHooks.tooltip }, ClearButtonElement)) : (ClearButtonElement)));
    }, [
        isClearButtonVisible,
        handleClear,
        clearButtonTooltipContent,
        clearButtonTooltipProps,
        clearButtonAriaLabel,
        size,
    ]);
    const ErrorWarningIndicator = useMemo(() => {
        if (disabled || hideStatusSuffix)
            return null;
        if (status !== 'error' && status !== 'warning')
            return null;
        return (React.createElement("div", { className: classes.statusWrapper },
            React.createElement(StatusIndicator, { dataHook: dataHooks.status, status: status, message: statusMessage, tooltipProps: {
                    placement: tooltipPlacement,
                    ...statusMessageTooltipProps,
                } })));
    }, [
        disabled,
        hideStatusSuffix,
        status,
        statusMessage,
        tooltipPlacement,
        statusMessageTooltipProps,
    ]);
    const LoadingIndicator = useMemo(() => {
        if (disabled || hideStatusSuffix)
            return null;
        if (statusContext.status !== 'loading' && status !== 'loading')
            return null;
        return (React.createElement("div", { className: classes.statusWrapper },
            React.createElement(StatusIndicator, { dataHook: dataHooks.status, status: statusContext.status ?? status, message: statusMessage, tooltipProps: {
                    placement: tooltipPlacement,
                    ...statusMessageTooltipProps,
                } })));
    }, [
        disabled,
        hideStatusSuffix,
        statusMessage,
        tooltipPlacement,
        statusMessageTooltipProps,
        statusContext.status,
        status,
    ]);
    const CustomSuffix = useMemo(() => {
        if (!suffix)
            return null;
        return React.isValidElement(suffix) ? (React.cloneElement(suffix)) : (React.createElement("div", { className: classes.suffix }, suffix));
    }, [suffix]);
    const MenuArrow = useMemo(() => {
        if (!menuArrow)
            return null;
        return (React.createElement("div", { "data-hook": dataHooks.menuArrow, className: classes.menuArrow, onClick: handleClick },
            React.createElement(icons.DropDownArrow, null)));
    }, [menuArrow, handleClick, icons]);
    if (!ClearButton &&
        !ErrorWarningIndicator &&
        !LoadingIndicator &&
        !CustomSuffix &&
        !MenuArrow)
        return null;
    return (React.createElement("div", { "data-hook": dataHooks.suffixes, className: classes.suffixes },
        ClearButton,
        ErrorWarningIndicator,
        LoadingIndicator,
        CustomSuffix,
        MenuArrow));
};
//# sourceMappingURL=Suffix.js.map