react-base-guide
Version:
react ui components
30 lines • 1.82 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const base_1 = __importDefault(require("./base"));
const row_1 = __importDefault(require("./row"));
const scrollToSelected = (menuRef, selectedRef) => {
if ((menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) && (selectedRef === null || selectedRef === void 0 ? void 0 : selectedRef.current)) {
(menuRef.current.scrollTop = (selectedRef.current.offsetTop - selectedRef.current.offsetHeight));
}
};
const DropdownMenu = (props) => {
const { open, up, right, menuHeight, menuWidth, rows, children, forwardRef } = props;
const menuRef = (0, react_1.useRef)(null);
const selectedRef = (0, react_1.useRef)(null);
(0, react_1.useEffect)(() => {
if (open) {
scrollToSelected(menuRef, selectedRef);
}
}, [open, rows]);
if (!open || (!rows && !children || (rows === null || rows === void 0 ? void 0 : rows.length) === 0)) {
return null;
}
return ((0, jsx_runtime_1.jsxs)(base_1.default, Object.assign({ ref: forwardRef || menuRef, className: props.className, open: open, up: up, right: right, menuHeight: menuHeight, menuWidth: menuWidth }, { children: [children, rows === null || rows === void 0 ? void 0 : rows.map((row, key) => ((0, jsx_runtime_1.jsx)(row_1.default, { forwardRef: row.selected ? selectedRef : undefined, value: row.value, selected: row.selected, onMouseDown: row.onClick }, `${row.value}-${key}`)))] })));
};
exports.default = DropdownMenu;
//# sourceMappingURL=index.js.map