@telescopic-text/react
Version:
A React component for telescopic text.
151 lines (150 loc) • 6.1 kB
JavaScript
;
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// index.tsx
var index_exports = {};
__export(index_exports, {
default: () => index_default
});
module.exports = __toCommonJS(index_exports);
var import_react = __toESM(require("react"));
function useTelescopicState(persistenceKey, enablePersistence) {
const [expandedKeys, setExpandedKeys] = (0, import_react.useState)([]);
const [clickedKeys, setClickedKeys] = (0, import_react.useState)([]);
(0, import_react.useEffect)(() => {
if (!enablePersistence || typeof window === "undefined" || !persistenceKey) return;
try {
const savedState = localStorage.getItem(persistenceKey);
if (savedState) {
const { expanded, clicked } = JSON.parse(savedState);
setExpandedKeys(expanded || []);
setClickedKeys(clicked || []);
}
} catch (error) {
console.error("Error loading telescopic text state:", error);
localStorage.removeItem(persistenceKey);
}
}, [persistenceKey, enablePersistence]);
(0, import_react.useEffect)(() => {
if (!enablePersistence || !persistenceKey) return;
localStorage.setItem(
persistenceKey,
JSON.stringify({ expanded: expandedKeys, clicked: clickedKeys })
);
}, [expandedKeys, clickedKeys, persistenceKey, enablePersistence]);
const handleExpand = (key) => {
if (!clickedKeys.includes(key)) {
setExpandedKeys((prev) => [...prev, key]);
setClickedKeys((prev) => [...prev, key]);
}
};
return { expandedKeys, clickedKeys, handleExpand };
}
var TelescopicText = ({
nodes,
persistenceKey = "telescopic-text",
enablePersistence = true,
baseClassName = "",
linkClassName = "",
expandableClassName = ""
}) => {
const { expandedKeys, clickedKeys, handleExpand } = useTelescopicState(
persistenceKey,
enablePersistence
);
function generateNodeKey(parentKey, index, node) {
return parentKey ? `${parentKey}-${node.id || index}` : `${node.id || index}`;
}
function renderItems(items, parentKey = null) {
return items.map((item, index) => {
if (typeof item === "object" && !import_react.default.isValidElement(item)) {
const data = item;
const itemKey = generateNodeKey(parentKey, index, data);
return renderItem(item, itemKey);
} else {
const itemKey = parentKey ? `${parentKey}-${index}` : `${index}`;
return renderItem(item, itemKey);
}
});
}
function renderItem(item, key) {
if (typeof item === "string") {
return /* @__PURE__ */ import_react.default.createElement("span", { key, className: baseClassName }, item, " ");
}
if (import_react.default.isValidElement(item)) {
return /* @__PURE__ */ import_react.default.createElement("span", { key, className: baseClassName }, item);
}
if (typeof item === "object" && !Array.isArray(item)) {
return renderDataNode(item, key);
}
return /* @__PURE__ */ import_react.default.createElement("span", { key, className: baseClassName }, String(item), " ");
}
function renderDataNode(item, key) {
const isExpanded = expandedKeys.includes(key);
const isClicked = clickedKeys.includes(key);
const currentClassName = item.link ? item.linkClassName || linkClassName : item.expandTo ? item.expandableClassName || expandableClassName : item.baseClassName || baseClassName;
const content = item.word || "";
if (item.expandTo) {
return /* @__PURE__ */ import_react.default.createElement("span", { key }, !isClicked && /* @__PURE__ */ import_react.default.createElement(
"span",
{
role: "button",
tabIndex: 0,
"aria-expanded": isExpanded,
className: currentClassName,
onClick: () => handleExpand(key),
onKeyDown: (e) => {
if (e.key === "Enter" || e.key === " ") {
handleExpand(key);
}
}
},
content,
" "
), isExpanded && /* @__PURE__ */ import_react.default.createElement("span", { key: `${key}-expanded`, className: `${baseClassName} inline` }, renderItems(item.expandTo, key)));
}
if (item.link) {
return /* @__PURE__ */ import_react.default.createElement(
"a",
{
key,
href: item.link,
target: "_blank",
rel: "noopener noreferrer",
className: currentClassName
},
content
);
}
return /* @__PURE__ */ import_react.default.createElement("span", { key, className: baseClassName }, content);
}
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, renderItems(nodes));
};
var index_default = TelescopicText;
//# sourceMappingURL=index.js.map