@react-spectrum/s2
Version:
Spectrum 2 UI components in React
163 lines (149 loc) • 6.56 kB
JavaScript
require("./NotificationBadge.css");
var $4526404114e78c80$exports = require("./intlStrings.cjs");
var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
var $62rny$reactjsxruntime = require("react/jsx-runtime");
var $62rny$reactariautils = require("@react-aria/utils");
var $62rny$internationalizednumber = require("@internationalized/number");
var $62rny$react = require("react");
var $62rny$reactspectrumutils = require("@react-spectrum/utils");
var $62rny$reactariai18n = require("@react-aria/i18n");
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "NotificationBadgeContext", () => $cd7301fb33ba8690$export$9ab75c96ebaa396c);
$parcel$export(module.exports, "NotificationBadge", () => $cd7301fb33ba8690$export$529cab0ca6be204e);
/*
* 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 $cd7301fb33ba8690$export$9ab75c96ebaa396c = /*#__PURE__*/ (0, $62rny$react.createContext)(null);
const $cd7301fb33ba8690$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|Z|N|L)[^\s]+/g);
for (let p of matches){
if (p[1] === "Z") width = true;
rules += p[0];
}
if (props.isDisabled) rules += ' sk91';
else rules += ' sd91';
rules += ' ug91';
rules += ' uch91';
rules += ' udi91';
rules += ' uea91';
rules += ' ugb91';
rules += ' uhd91';
rules += ' uje91';
rules += ' uic91';
if (props.size === "XL") {
rules += ' vd91';
rules += ' vsf91';
} else if (props.size === "L") {
rules += ' vb91';
rules += ' vse91';
} else if (props.size === "M") {
rules += ' va91';
rules += ' vsc91';
} else if (props.size === "S") {
rules += ' va91';
rules += ' vsc91';
}
rules += ' wb91';
rules += ' xb91';
rules += ' _xa91';
rules += ' _Fa91';
rules += ' _Ffb91';
if (props.isStaticColor) rules += ' ph91';
else rules += ' px91';
rules += ' plb91';
rules += ' _jlf91';
rules += ' _klb91';
rules += ' hlb91';
rules += ' mlb91';
rules += ' llb91';
rules += ' ila91';
rules += ' _Ca91';
rules += ' eb91';
rules += ' gqMFGYc91';
rules += ' FRuFGYc91';
if (props.isSingleDigit) rules += ' fa91';
else if (props.isIndicatorOnly) rules += ' fa91';
if (!width) rules += ' ZK91';
if (props.isDoubleDigit) rules += ' Sv91';
if (props.isDoubleDigit) rules += ' Rv91';
rules += ' oh91';
rules += ' nh91';
rules += ' kh91';
rules += ' jh91';
if (props.isStaticColor) rules += ' -g_-g_c91';
else rules += ' -g_-g291';
rules += ' -g_-lgb91';
if (props.size === "XL") {
if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c91';
else rules += ' -F_-Fm91';
} else if (props.size === "L") {
if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c91';
else rules += ' -F_-Ft91';
} else if (props.size === "M") {
if (props.isIndicatorOnly) rules += ' -F_-Fi91';
else rules += ' -F_-FLb8KJ91';
} else if (props.size === "S") {
if (props.isIndicatorOnly) rules += ' -F_-Fi91';
else rules += ' -F_-Fk91';
}
return rules;
};
const $cd7301fb33ba8690$export$529cab0ca6be204e = /*#__PURE__*/ (0, $62rny$react.forwardRef)(function Badge(props, ref) {
let stringFormatter = (0, $62rny$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '@react-spectrum/s2');
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $cd7301fb33ba8690$export$9ab75c96ebaa396c);
let { size: size = 'S', value: value, isDisabled: isDisabled = false, staticColor: staticColor, ...otherProps } = props;
let domRef = (0, $62rny$reactspectrumutils.useDOMRef)(ref);
let { locale: locale } = (0, $62rny$reactariai18n.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, $62rny$internationalizednumber.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, $62rny$reactjsxruntime.jsx)("span", {
...(0, $62rny$reactariautils.filterDOMProps)(otherProps, {
labelable: true
}),
role: ariaLabel && 'img',
"aria-label": ariaLabel,
className: (props.UNSAFE_className || '') + $cd7301fb33ba8690$var$badge({
size: size,
isIndicatorOnly: isIndicatorOnly,
isSingleDigit: isSingleDigit,
isDoubleDigit: isDoubleDigit,
isDisabled: isDisabled,
isStaticColor: !!staticColor
}, props.styles),
style: props.UNSAFE_style,
ref: domRef,
children: formattedValue
});
});
//# sourceMappingURL=NotificationBadge.cjs.map