@react-md/chip/lib/Chip.js

Create a compact actionable element that can be used to represent an input, attribute, or action. A chip can be used to represent filters, tags, emails, or other inline elements.

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Chip = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var classnames_1 = __importDefault(require("classnames"));
var icon_1 = require("@react-md/icon");
var states_1 = require("@react-md/states");
var utils_1 = require("@react-md/utils");
var block = (0, utils_1.bem)("rmd-chip");
/**
 * A chip is a simplified and condensed button component that be used to create
 * compact radio groups, checkboxes, and trigger actions. The chip only has a
 * `"solid"` and `"outline"` theme but can be raisable once clicked or
 * selectable with an inline icon. A chip also supports rendering icons, avatars,
 * or circular progress bars to the left and right of the children.
 */
exports.Chip = (0, react_1.forwardRef)(function Chip(_a, ref) {
    var _b;
    var ariaPressed = _a["aria-pressed"], propClassName = _a.className, children = _a.children, _c = _a.theme, theme = _c === void 0 ? "solid" : _c, propLeftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _d = _a.raisable, raisable = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, selected = _a.selected, _f = _a.selectedThemed, selectedThemed = _f === void 0 ? false : _f, contentStyle = _a.contentStyle, contentClassName = _a.contentClassName, _g = _a.disableContentWrap, disableContentWrap = _g === void 0 ? false : _g, propSelectedIcon = _a.selectedIcon, _h = _a.noninteractable, noninteractable = _h === void 0 ? false : _h, _j = _a.disableIconTransition, disableIconTransition = _j === void 0 ? false : _j, props = __rest(_a, ["aria-pressed", "className", "children", "theme", "leftIcon", "rightIcon", "raisable", "disabled", "selected", "selectedThemed", "contentStyle", "contentClassName", "disableContentWrap", "selectedIcon", "noninteractable", "disableIconTransition"]);
    var _k = (0, states_1.useInteractionStates)({
        handlers: props,
        className: propClassName,
        disabled: disabled || noninteractable,
        enablePressedAndRipple: raisable && !noninteractable,
    }), ripples = _k.ripples, className = _k.className, handlers = _k.handlers;
    var content = children;
    if (!disableContentWrap) {
        content = ((0, jsx_runtime_1.jsx)("span", __assign({ style: contentStyle, className: (0, classnames_1.default)(block("content"), contentClassName) }, { children: children })));
    }
    var leftIcon = propLeftIcon;
    var selectable = typeof selected === "boolean";
    var selectedIcon = (0, icon_1.useIcon)("selected", propSelectedIcon);
    var isHiddenIcon = false;
    if (selectable &&
        !selectedThemed &&
        typeof leftIcon === "undefined" &&
        selectedIcon) {
        leftIcon = selectedIcon;
        if (!disableIconTransition && (0, react_1.isValidElement)(selectedIcon)) {
            isHiddenIcon = !selected;
            leftIcon = (0, react_1.cloneElement)(selectedIcon, {
                className: block("selected-icon", { visible: selected }),
            });
        }
        else if (disableIconTransition && !selected) {
            // don't want to render it when not selected if there's no transition
            leftIcon = null;
        }
    }
    var leading = leftIcon && !isHiddenIcon;
    var trailing = rightIcon;
    var Component = noninteractable ? "span" : "button";
    var buttonProps = {
        "aria-pressed": ariaPressed !== null && ariaPressed !== void 0 ? ariaPressed : (!!selected || undefined),
        type: "button",
        disabled: disabled,
    };
    return ((0, jsx_runtime_1.jsxs)(Component, __assign({}, (noninteractable ? {} : buttonProps), props, handlers, { ref: ref, className: (0, classnames_1.default)(block((_b = {},
            _b[theme] = true,
            _b.disabled = disabled,
            _b.selected = !disabled && selected && !selectedThemed,
            _b.themed = !disabled && selected && selectedThemed,
            _b["solid-disabled"] = disabled && theme === "solid",
            _b["leading-icon"] = leading && !trailing,
            _b["trailing-icon"] = trailing && !leading,
            _b.surrounded = leading && trailing,
            _b.noninteractable = noninteractable,
            _b)), className) }, { children: [(0, jsx_runtime_1.jsx)(icon_1.TextIconSpacing, __assign({ icon: leftIcon, beforeClassName: isHiddenIcon ? "" : undefined }, { children: (0, jsx_runtime_1.jsx)(icon_1.TextIconSpacing, __assign({ icon: rightIcon, iconAfter: true }, { children: content })) })), ripples] })));
});
//# sourceMappingURL=Chip.js.map