@react-spectrum/s2
Version:
Spectrum 2 UI components in React
157 lines (145 loc) • 6.42 kB
JavaScript
import "./NotificationBadge.css";
import $bfWIi$intlStringsmjs from "./intlStrings.mjs";
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
import {jsx as $bfWIi$jsx} from "react/jsx-runtime";
import {filterDOMProps as $bfWIi$filterDOMProps} from "@react-aria/utils";
import {NumberFormatter as $bfWIi$NumberFormatter} from "@internationalized/number";
import {createContext as $bfWIi$createContext, forwardRef as $bfWIi$forwardRef} from "react";
import {useDOMRef as $bfWIi$useDOMRef} from "@react-spectrum/utils";
import {useLocalizedStringFormatter as $bfWIi$useLocalizedStringFormatter, useLocale as $bfWIi$useLocale} from "@react-aria/i18n";
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
/*
* Copyright 2025 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
const $bfb270fb056fefc5$export$9ab75c96ebaa396c = /*#__PURE__*/ (0, $bfWIi$createContext)(null);
const $bfb270fb056fefc5$var$badge = function anonymous(props, overrides) {
let rules = " ";
let width = false;
let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
for (let p of matches){
if (p[1] === "Z") width = true;
rules += p[0];
}
if (props.isDisabled) rules += ' sk1';
else rules += ' sd1';
rules += ' uk1';
rules += ' ucJ9TBTb1';
rules += ' ud3Euai1';
rules += ' uea1';
rules += ' ugb1';
rules += ' uhd1';
rules += ' uje1';
rules += ' u2NhKxcl1';
rules += ' uic1';
if (props.size === "XL") {
rules += ' -_6BNtrc-c1';
rules += ' vx1';
} else if (props.size === "L") {
rules += ' -_6BNtrc-b1';
rules += ' vx1';
} else if (props.size === "M") {
rules += ' -_6BNtrc-a1';
rules += ' vx1';
} else if (props.size === "S") {
rules += ' -_6BNtrc-a1';
rules += ' vx1';
}
rules += ' xb1';
rules += ' _xa1';
rules += ' _Fd1';
rules += ' _FnuYUweb1';
if (props.isStaticColor) rules += ' ph1';
else rules += ' px1';
rules += ' plb1';
rules += ' _jlf1';
rules += ' _klb1';
rules += ' hlb1';
rules += ' mlb1';
rules += ' llb1';
rules += ' ila1';
rules += ' _Ca1';
rules += ' eb1';
rules += ' gqMFGYc1';
rules += ' FRuFGYc1';
if (props.isSingleDigit) rules += ' fa1';
else if (props.isIndicatorOnly) rules += ' fa1';
if (!width) rules += ' ZK1';
if (props.isDoubleDigit) rules += ' Sv1';
if (props.isDoubleDigit) rules += ' Rv1';
rules += ' oh1';
rules += ' nh1';
rules += ' kh1';
rules += ' jh1';
if (props.isStaticColor) rules += ' -g_-g_c1';
else rules += ' -g_-g21';
rules += ' -g_-lgb1';
if (props.size === "XL") {
if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c1';
else rules += ' -F_-Fm1';
} else if (props.size === "L") {
if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c1';
else rules += ' -F_-Ft1';
} else if (props.size === "M") {
if (props.isIndicatorOnly) rules += ' -F_-Fi1';
else rules += ' -F_-FLb8KJ1';
} else if (props.size === "S") {
if (props.isIndicatorOnly) rules += ' -F_-Fi1';
else rules += ' -F_-Fk1';
}
return rules;
};
const $bfb270fb056fefc5$export$529cab0ca6be204e = /*#__PURE__*/ (0, $bfWIi$forwardRef)(function Badge(props, ref) {
let stringFormatter = (0, $bfWIi$useLocalizedStringFormatter)((0, ($parcel$interopDefault($bfWIi$intlStringsmjs))), '@react-spectrum/s2');
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $bfb270fb056fefc5$export$9ab75c96ebaa396c);
let { size: size = 'S', value: value, isDisabled: isDisabled = false, staticColor: staticColor, ...otherProps } = props;
let domRef = (0, $bfWIi$useDOMRef)(ref);
let { locale: locale } = (0, $bfWIi$useLocale)();
let formattedValue = '';
let isIndicatorOnly = false;
let isSingleDigit = false;
let isDoubleDigit = false;
if (value == null) isIndicatorOnly = true;
else if (value <= 0) throw new Error('Value cannot be negative or zero');
else if (!Number.isInteger(value)) throw new Error('Value must be a positive integer');
else {
formattedValue = new (0, $bfWIi$NumberFormatter)(locale).format(Math.min(value, 99));
let length = Math.log(value <= 99 ? value : 99) * Math.LOG10E + 1 | 0; // for positive integers (https://stackoverflow.com/questions/14879691/get-number-of-digits-with-javascript)
if (length === 1) isSingleDigit = true;
else if (length === 2) isDoubleDigit = true;
if (value > 99) formattedValue = stringFormatter.format('notificationbadge.plus', {
notifications: formattedValue
});
}
let ariaLabel = props['aria-label'] || undefined;
if (ariaLabel === undefined && isIndicatorOnly) ariaLabel = stringFormatter.format('notificationbadge.indicatorOnly');
return /*#__PURE__*/ (0, $bfWIi$jsx)("span", {
...(0, $bfWIi$filterDOMProps)(otherProps, {
labelable: true
}),
role: ariaLabel && 'img',
"aria-label": ariaLabel,
className: (props.UNSAFE_className || '') + $bfb270fb056fefc5$var$badge({
size: size,
isIndicatorOnly: isIndicatorOnly,
isSingleDigit: isSingleDigit,
isDoubleDigit: isDoubleDigit,
isDisabled: isDisabled,
isStaticColor: !!staticColor
}, props.styles),
style: props.UNSAFE_style,
ref: domRef,
children: formattedValue
});
});
export {$bfb270fb056fefc5$export$9ab75c96ebaa396c as NotificationBadgeContext, $bfb270fb056fefc5$export$529cab0ca6be204e as NotificationBadge};
//# sourceMappingURL=NotificationBadge.mjs.map