@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
70 lines (66 loc) • 3 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_float = require('../float/float.cjs');
const require_indicator_style = require('./indicator.style.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/indicator/indicator.tsx
const { PropsContext: IndicatorPropsContext, usePropsContext: useIndicatorPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("indicator", require_indicator_style.indicatorStyle);
/**
* `Indicator` is a component that displays at the corner of elements such as avatars.
*
* @see https://yamada-ui.com/docs/components/indicator
*/
const Indicator = withProvider(({ children, disabled, label, offset, overflowCount = 99, placement, showZero = true, floatProps, labelProps,...rest }) => {
const numeric = (0, require_utils_index.utils_exports.isNumber)(label);
disabled ??= numeric && !showZero && label <= 0;
const computedLabel = (0, react.useMemo)(() => {
if (numeric && label > overflowCount) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [overflowCount, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.span, { children: "+" })] });
else return label;
}, [
numeric,
label,
overflowCount
]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
...rest,
children: [children, !disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IndicatorFloat, {
offset,
placement,
...floatProps,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IndicatorLabel, {
"data-numeric": (0, require_utils_index.utils_exports.dataAttr)(numeric),
...labelProps,
children: computedLabel
})
}) : null]
});
}, "root")(({ ping,...rest }) => {
if ((0, require_utils_index.utils_exports.isObject)(ping)) {
const { color, duration, iterationCount, scale, timingFunction } = ping;
return {
...rest,
"--animation-scale": scale,
"--duration": duration ? `durations.${duration}` : void 0,
"--iteration-count": iterationCount,
"--ping-color": color ? `colors.${color}` : void 0,
"--timing-function": timingFunction ? `easings.${timingFunction}` : void 0,
ping: true
};
} else return {
...rest,
ping
};
});
const IndicatorFloat = withContext(require_float.Float, "float")();
const IndicatorLabel = withContext("span", "label")();
//#endregion
exports.Indicator = Indicator;
exports.IndicatorPropsContext = IndicatorPropsContext;
exports.useIndicatorPropsContext = useIndicatorPropsContext;
//# sourceMappingURL=indicator.cjs.map