wix-style-react/dist/es/src/Input/InputSuffix.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import { DropDownArrow } from '@wix/wix-ui-icons-common/system';
import CloseButton from '../CloseButton';
import StatusIndicator from '../StatusIndicator';
import { classes } from './Input.st.css';
import Box from '../Box';
import { dataHooks } from './constants';
import Tooltip from '../Tooltip';
const isFixVisible = fix => fix.isVisible;
const suffixRules = {
    inputStatusSuffix: ({ status, disabled }) => status && !disabled,
    clearButton: ({ isClearButtonVisible }) => isClearButtonVisible,
    menuArrow: ({ menuArrow }) => menuArrow,
    customSuffix: ({ suffix }) => !!suffix,
};
const getVisibleSuffixCount = args => Object.keys(suffixRules)
    .map(key => suffixRules[key])
    .map(fn => fn(args))
    .filter(x => x).length;
const getComponentWithTooltip = (component, content, ...tooltipProps) => content ? (React.createElement(Tooltip, { ...tooltipProps, content: content, dataHook: dataHooks.tooltip }, component)) : (component);
const InputSuffix = ({ statusMessage, status, disabled, onIconClicked, isClearButtonVisible, onClear, clearButtonSize, menuArrow, suffix, tooltipPlacement, clearButtonTooltipContent, clearButtonTooltipProps, }) => {
    const suffixes = [
        {
            // Close Button
            component: key => (React.createElement("div", { key: key, className: classes.clearButtonWrapper }, getComponentWithTooltip(React.createElement(CloseButton, { dataHook: "input-clear-button", skin: "standardFilled", size: clearButtonSize, onClick: onClear, className: classes.clearButton }), clearButtonTooltipContent, clearButtonTooltipProps))),
            isVisible: suffixRules.clearButton({ isClearButtonVisible }),
        },
        {
            // Status Indicator
            component: key => (React.createElement("div", { key: key, className: classes.statusWrapper },
                React.createElement(StatusIndicator, { dataHook: dataHooks.status, status: status, message: statusMessage, tooltipPlacement: tooltipPlacement }))),
            isVisible: suffixRules.inputStatusSuffix({ status, disabled }),
        },
        {
            // Custom Suffix
            component: key => React.isValidElement(suffix) ? (React.cloneElement(suffix, { key })) : (React.createElement("div", { className: classes.suffix, key: key }, suffix)),
            isVisible: suffixRules.customSuffix({ suffix }),
        },
        {
            // Dropdown Arrow
            component: key => (React.createElement("div", { key: key, "data-hook": dataHooks.menuArrow, className: classes.menuArrow, disabled: disabled, onClick: onIconClicked },
                React.createElement(DropDownArrow, null))),
            isVisible: suffixRules.menuArrow({ menuArrow }),
        },
    ].filter(isFixVisible);
    return (React.createElement(Box, { dataHook: dataHooks.suffixes, className: classes.suffixes }, suffixes.map((s, key) => s.component(key))));
};
InputSuffix.propTypes = {
    suffixes: PropTypes.arrayOf(PropTypes.shape({
        component: PropTypes.func.isRequired,
        isVisible: PropTypes.bool.isRequired,
    })),
    statusMessage: PropTypes.node,
    status: PropTypes.oneOf(['loading', 'error', 'warning']),
    disabled: PropTypes.bool,
    onIconClicked: PropTypes.func,
    isClearButtonVisible: PropTypes.bool,
    onClear: PropTypes.func,
    clearButtonSize: PropTypes.oneOf(['small', 'medium']),
    menuArrow: PropTypes.bool,
    suffix: PropTypes.node,
    tooltipPlacement: PropTypes.string,
    clearButtonTooltipContent: PropTypes.node,
    clearButtonTooltipProps: PropTypes.node,
};
export default InputSuffix;
export { getVisibleSuffixCount };
//# sourceMappingURL=InputSuffix.js.map