react-fast-accordion
Version:
High performance 0 dependencies accordion for React
315 lines • 11.4 kB
JavaScript
;
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
return arr2;
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _iterableToArrayLimit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally{
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally{
if (_d) throw _e;
}
}
return _arr;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _objectSpread(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_defineProperty(target, key, source[key]);
});
}
return target;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function(sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpreadProps(target, source) {
source = source != null ? source : {};
if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function(key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for(i = 0; i < sourceSymbolKeys.length; i++){
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
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 = function(target, all) {
for(var name in all)__defProp(target, name, {
get: all[name],
enumerable: true
});
};
var __copyProps = function(to, from, except, desc) {
if (from && typeof from === "object" || typeof from === "function") {
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
try {
var _loop = function(_iterator, _step) {
var key = _step.value;
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: function() {
return from[key];
},
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
};
for(var _iterator = __getOwnPropNames(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true)_loop(_iterator, _step);
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally{
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally{
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
return to;
};
var __toESM = function(mod, isNodeMode, target) {
return target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod);
};
var __toCommonJS = function(mod) {
return __copyProps(__defProp({}, "__esModule", {
value: true
}), mod);
};
// src/index.tsx
var src_exports = {};
__export(src_exports, {
default: function() {
return src_default;
}
});
module.exports = __toCommonJS(src_exports);
var import_react2 = __toESM(require("react"));
// src/ListItem.tsx
var import_react = __toESM(require("react"));
var ListItem = function(_param) {
var id = _param.id, isOpen = _param.isOpen, SummaryComponent = _param.SummaryComponent, DetailComponent = _param.DetailComponent, rest = _objectWithoutProperties(_param, [
"id",
"isOpen",
"SummaryComponent",
"DetailComponent"
]);
return /* @__PURE__ */ import_react.default.createElement("li", {
role: "button",
tabIndex: 0,
"aria-expanded": isOpen,
"aria-controls": "acc-content-".concat(id),
id: id.toString(),
className: "acc-item"
}, /* @__PURE__ */ import_react.default.createElement(SummaryComponent, _objectSpreadProps(_objectSpread({}, rest), {
isOpen: isOpen
})), isOpen && /* @__PURE__ */ import_react.default.createElement("div", {
role: "definition",
className: "acc-content",
id: "acc-content-".concat(id)
}, /* @__PURE__ */ import_react.default.createElement(DetailComponent, _objectSpreadProps(_objectSpread({}, rest), {
isOpen: isOpen
}))));
};
var ListItem_default = (0, import_react.memo)(ListItem);
// src/index.tsx
var Accordion = function(_param) {
var items = _param.items, _multiExpand = _param.multiExpand, multiExpand = _multiExpand === void 0 ? true : _multiExpand, rest = _objectWithoutProperties(_param, [
"items",
"multiExpand"
]);
var ref = _slicedToArray((0, import_react2.useState)({}), 2), opened = ref[0], setOpened = ref[1];
var listContainerRef = (0, import_react2.useRef)(null);
var mutationCb = function(list) {
var ref;
var contentItem = (ref = list[0].target.childNodes[1]) !== null && ref !== void 0 ? ref : null;
if (!contentItem) return;
if (contentItem.className !== "acc-content") return;
var scrollHeight = contentItem.scrollHeight;
contentItem.animate({
maxHeight: "".concat(scrollHeight, "px"),
opacity: 1
}, {
duration: 100,
easing: "ease-in",
fill: "forwards"
});
};
(0, import_react2.useEffect)(function() {
if (!listContainerRef.current) return;
var observer = new MutationObserver(mutationCb);
observer.observe(listContainerRef.current, {
childList: true,
subtree: true
});
return function() {
observer.disconnect();
};
}, []);
var closeAccordion = function(id) {
var contentItem = document.getElementById("acc-content-".concat(id));
if (!contentItem) return;
contentItem.animate({
maxHeight: 0,
opacity: 0
}, {
duration: 100,
easing: "ease-out"
}).finished.then(function() {
contentItem.style.display = "none";
setOpened(function(prv) {
var newObj = _objectSpread({}, prv);
delete newObj[id];
return newObj;
});
});
};
var clickHandler = function(e) {
var ref;
var element = e.target;
if (((ref = element.parentElement) === null || ref === void 0 ? void 0 : ref.tagName) === "LI") {
element = element.parentElement;
}
if (element.tagName !== "LI") return;
var id = element.getAttribute("id");
if (!id) return;
var isOpen = opened[id];
if (isOpen) {
return closeAccordion(id);
}
setOpened(function(prv) {
return _objectSpreadProps(_objectSpread({}, prv), _defineProperty({}, id, true));
});
if (!multiExpand) {
var prvAccId = Object.keys(opened)[0];
closeAccordion(prvAccId);
}
};
var ariaHandler = function(e) {
if (e.key === " " || e.key === "Enter") {
clickHandler(e);
e.preventDefault();
}
};
return /* @__PURE__ */ import_react2.default.createElement("ul", {
onClick: clickHandler,
onKeyPress: ariaHandler,
ref: listContainerRef,
role: "list"
}, items.map(function(_param) /* @__PURE__ */ {
var id = _param.id, data = _objectWithoutProperties(_param, [
"id"
]);
return import_react2.default.createElement(ListItem_default, _objectSpread({
id: id,
key: id,
isOpen: opened[id]
}, data, rest));
}));
};
var src_default = Accordion;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {});
//# sourceMappingURL=index.js.map