@ducor/react
Version:
admin template ui interface
108 lines (107 loc) • 5.23 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { createContext, useContext, useRef, useState, } from "react";
// Context to manage Composite state
var CompositeContext = createContext(null);
// Hook to use Composite context
export var useComposite = function () {
var context = useContext(CompositeContext);
if (!context) {
throw new Error("useComposite must be used within a CompositeProvider");
}
return context;
};
// Composite component definition
export var Composite = function (_a) {
var children = _a.children, _b = _a.orientation, orientation = _b === void 0 ? "both" : _b, // Set default orientation to 'both'
_c = _a.render, // Set default orientation to 'both'
render = _c === void 0 ? _jsx("div", {}) : _c, // Default render to a <div>
_d = _a.loop, // Default render to a <div>
loop = _d === void 0 ? true : _d, _e = _a.disabledIndices, disabledIndices = _e === void 0 ? [] : _e, activeIndex = _a.activeIndex, onNavigate = _a.onNavigate, _f = _a.itemSizes, itemSizes = _f === void 0 ? [] : _f, _g = _a.dense, dense = _g === void 0 ? false : _g, props = __rest(_a, ["children", "orientation", "render", "loop", "disabledIndices", "activeIndex", "onNavigate", "itemSizes", "dense"]);
var _h = useState(activeIndex !== null && activeIndex !== void 0 ? activeIndex : 0), focusedIndex = _h[0], setFocusedIndex = _h[1];
var itemsRef = useRef([]); // Create a ref to store item refs
// Handle keyboard navigation
var handleKeyDown = function (event) {
var newIndex = focusedIndex;
switch (event.key) {
case "ArrowRight":
if (orientation === "horizontal" || orientation === "both") {
newIndex = (focusedIndex + 1) % itemsRef.current.length;
}
break;
case "ArrowLeft":
if (orientation === "horizontal" || orientation === "both") {
newIndex =
(focusedIndex - 1 + itemsRef.current.length) %
itemsRef.current.length;
}
break;
case "ArrowDown":
if (orientation === "vertical" || orientation === "both") {
newIndex = (focusedIndex + 1) % itemsRef.current.length;
}
break;
case "ArrowUp":
if (orientation === "vertical" || orientation === "both") {
newIndex =
(focusedIndex - 1 + itemsRef.current.length) %
itemsRef.current.length;
}
break;
default:
return; // Exit if the key is not relevant
}
if (disabledIndices.includes(newIndex)) {
return; // Prevent navigation to disabled items
}
setFocusedIndex(newIndex);
if (onNavigate)
onNavigate(newIndex); // Notify parent of the navigation
};
return (_jsx(CompositeContext.Provider, { value: { focusedIndex: focusedIndex, setFocusedIndex: setFocusedIndex, itemsRef: itemsRef }, children: _jsxs("div", __assign({ role: 'group', onKeyDown: handleKeyDown, tabIndex: 0 }, props, { children: [typeof render === "function"
? render({}) // Render using the function
: React.isValidElement(render)
? React.cloneElement(render, __assign({}, props))
: render, children] })) }));
};
// CompositeItem component definition
export var CompositeItem = function (_a) {
var render = _a.render, index = _a.index, children = _a.children;
var _b = useComposite(), focusedIndex = _b.focusedIndex, itemsRef = _b.itemsRef;
var isActive = focusedIndex === index;
// HTML props for the item
var htmlProps = {
ref: function (el) {
if (itemsRef.current) {
itemsRef.current[index] = el;
}
},
"aria-selected": isActive,
tabIndex: isActive ? 0 : -1, // Only the active item is focusable
};
return (_jsx("div", __assign({}, htmlProps, { children: typeof render === "function"
? render(htmlProps) // Render using the function
: children || render // Fallback to children if no render prop
})));
};