@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
32 lines (31 loc) • 1.15 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, memo } from "react";
import { useSlot } from "../../hooks/use-slot/index.js";
import { usePillRow } from "./pill-row.context.js";
import { ColumnPivots, Columns, Icon, Measure, RowGroups, RowPivots } from "./icons.js";
const typeToIcon = {
columns: Columns,
"row-groups": RowGroups,
"row-pivots": RowPivots,
"column-pivots": ColumnPivots,
measures: Measure,
};
function PillBase({ render, ...props }, forwarded) {
const { expandToggle, expanded, row } = usePillRow();
const I = row.type ? typeToIcon[row.type] : null;
const s = render ?? (_jsxs("div", { "data-ln-pill-label": true, children: [I && (_jsx(Icon, { children: _jsx(I, {}) })), _jsx("div", { "data-ln-pill-label-text": true, children: row.label })] }));
const slot = useSlot({
props: [props],
ref: forwarded,
slot: s,
state: {
expanded,
expandToggle,
row,
},
});
if (row.label == null)
return null;
return slot;
}
export const PillLabel = memo(forwardRef(PillBase));