@activecollab/components
Version:
ActiveCollab Components
56 lines • 2.53 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className", "labelClassName", "disabled"];
import React, { forwardRef } from "react";
import classNames from "classnames";
import { StyledBadge, StyledCounterButton, StyledCounterButtonLabel, StyledCounterButtonReset, StyledCounterButtonWrapper } from "./Styles";
import CloseSmallIcon from "../Icons/collection/CloseSmall";
import { Tooltip } from "../Tooltip/Tooltip";
export const CounterButton = /*#__PURE__*/forwardRef((_ref, ref) => {
let label = _ref.label,
icon = _ref.icon,
active = _ref.active,
_ref$counter = _ref.counter,
counter = _ref$counter === void 0 ? 0 : _ref$counter,
tooltipText = _ref.tooltipText,
onClearAll = _ref.onClearAll,
className = _ref.className,
labelClassName = _ref.labelClassName,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
args = _objectWithoutPropertiesLoose(_ref, _excluded);
return /*#__PURE__*/React.createElement(StyledCounterButtonWrapper, {
ref: ref,
className: className
}, /*#__PURE__*/React.createElement(StyledCounterButton, _extends({
disabled: disabled,
"aria-disabled": disabled,
className: classNames("c-counter-button", {
"c-counter-button__selected": counter
})
}, args, {
variant: "text gray",
$active: counter > 0 || active,
$selected: counter > 0
}), icon && /*#__PURE__*/React.cloneElement(icon, {
className: classNames("c-counter-button__icon")
}), label && /*#__PURE__*/React.createElement(StyledCounterButtonLabel, {
color: "secondary",
weight: "medium",
className: classNames("c-counter-button__label", labelClassName),
$active: counter > 0 || active
}, label), counter > 0 ? /*#__PURE__*/React.createElement(StyledBadge, {
isStandalone: true,
dimension: 16,
value: counter
}) : null), counter > 0 ? /*#__PURE__*/React.createElement(Tooltip, {
title: "" + tooltipText,
popperTooltipClassName: "z-index-1300"
}, /*#__PURE__*/React.createElement(StyledCounterButtonReset, {
variant: "text colored",
className: "c-counter-button__reset",
onClick: onClearAll
}, /*#__PURE__*/React.createElement(CloseSmallIcon, null))) : null);
});
CounterButton.displayName = "CounterButton";
//# sourceMappingURL=CounterButton.js.map