dumi-theme-lobehub
Version:
dumi-theme-lobehub is a documentation site theme package designed for dumi2. It provides a more beautiful and user-friendly development and reading experience based on @lobehub/ui
259 lines • 11.1 kB
JavaScript
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
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(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
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; }
import { Icon } from '@lobehub/ui';
import animateScrollTo from 'animated-scroll-to';
import { Empty, Typography } from 'antd';
import { useTheme } from 'antd-style';
import { Link, history, useIntl } from 'dumi';
import { FileBox, FileIcon, HeadingIcon, LetterText } from 'lucide-react';
import { Fragment, memo, useCallback, useEffect, useState } from 'react';
import { Center, Flexbox } from 'react-layout-kit';
import { siteSelectors, useSiteStore } from "../../store";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var ICONS_MAPPING = {
content: LetterText,
demo: FileBox,
page: FileIcon,
title: HeadingIcon
};
var Highlight = /*#__PURE__*/memo(function (props) {
return /*#__PURE__*/_jsx(_Fragment, {
children: props.texts.map(function (text, idx) {
return /*#__PURE__*/_jsx(Fragment, {
children: text.highlighted ? /*#__PURE__*/_jsx("mark", {
children: text.text
}) : text.text
}, idx);
})
});
});
var useFlatSearchData = function useFlatSearchData(data) {
var update = useCallback(function () {
var activeIndex = 0;
var ret = [];
var _iterator = _createForOfIteratorHelper(data),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var _item = _step.value;
if (_item.title) {
ret.push({
type: 'title',
value: {
title: _item.title
}
});
}
var _iterator2 = _createForOfIteratorHelper(_item.hints),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var hint = _step2.value;
ret.push({
activeIndex: activeIndex++,
type: 'hint',
value: hint
});
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return [ret, activeIndex];
}, [data]);
var _useState = useState(update),
_useState2 = _slicedToArray(_useState, 2),
flatData = _useState2[0],
setFlatData = _useState2[1];
useEffect(function () {
setFlatData(update);
}, [data]);
return flatData;
};
var SearchResult = /*#__PURE__*/memo(function (props) {
var theme = useTheme();
var intl = useIntl();
var _useFlatSearchData = useFlatSearchData(props.data),
_useFlatSearchData2 = _slicedToArray(_useFlatSearchData, 2),
data = _useFlatSearchData2[0],
histsCount = _useFlatSearchData2[1];
var _useState3 = useState(-1),
_useState4 = _slicedToArray(_useState3, 2),
activeIndex = _useState4[0],
setActiveIndex = _useState4[1];
var _useSiteStore = useSiteStore(function (s) {
return [s.location.pathname, siteSelectors.hostname(s)];
}),
_useSiteStore2 = _slicedToArray(_useSiteStore, 2),
pathname = _useSiteStore2[0],
hostname = _useSiteStore2[1];
var onItemSelect = function onItemSelect(item) {
var _props$onItemSelect, _location;
(_props$onItemSelect = props.onItemSelect) === null || _props$onItemSelect === void 0 || _props$onItemSelect.call(props, item);
var url = new URL(item === null || item === void 0 ? void 0 : item.link, hostname || ((_location = location) === null || _location === void 0 ? void 0 : _location.origin));
if ((url === null || url === void 0 ? void 0 : url.pathname) === pathname && !url.hash) {
setTimeout(function () {
animateScrollTo(0, {
maxDuration: 300
});
}, 1);
}
};
useEffect(function () {
var handler = function handler(ev) {
// TODO: scroll into view for invisible items
if (ev.key === 'ArrowDown') {
setActiveIndex((activeIndex + 1) % histsCount);
} else if (ev.key === 'ArrowUp') {
setActiveIndex((activeIndex + histsCount - 1) % histsCount);
} else if (ev.key === 'Enter' && activeIndex >= 0) {
var _item2 = data.find(function (item) {
return item.type === 'hint' && item.activeIndex === activeIndex;
}).value;
history.push(_item2.link);
onItemSelect === null || onItemSelect === void 0 || onItemSelect(_item2);
document.activeElement.blur();
}
if (['Escape', 'Enter'].includes(ev.key)) {
setActiveIndex(-1);
}
};
document.addEventListener('keydown', handler);
return function () {
return document.removeEventListener('keydown', handler);
};
});
var returnNode = null;
if (props.loading) {
returnNode = /*#__PURE__*/_jsx(Empty, {
description: intl.formatMessage({
id: 'search.loading'
}),
image: Empty.PRESENTED_IMAGE_SIMPLE
});
} else if (props.data.length > 0) {
returnNode = /*#__PURE__*/_jsx(Flexbox, {
gap: 8,
paddingBlock: 8,
paddingInline: 8,
children: data.map(function (item, i) {
return item.type === 'title' ? /*#__PURE__*/_jsx(Flexbox, {
paddingBlock: 8,
paddingInline: 12,
style: {
background: theme.colorFillTertiary,
borderRadius: theme.borderRadius
},
children: /*#__PURE__*/_jsx(Typography.Title, {
ellipsis: {
rows: 1
},
level: 4,
style: {
fontSize: 14,
lineHeight: 1.4,
margin: 0
},
children: item.value.title
})
}, String(i)) : /*#__PURE__*/_jsx(Flexbox, {
children: /*#__PURE__*/_jsx(Link, {
"data-active": activeIndex === item.activeIndex || undefined,
onClick: function onClick() {
return onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(item.value);
},
style: {
color: 'inherit'
},
to: item.value.link,
children: /*#__PURE__*/_jsxs(Flexbox, {
align: 'center',
gap: 16,
horizontal: true,
style: {
overflow: 'hidden',
position: 'relative'
},
children: [/*#__PURE__*/_jsx(Center, {
flex: 'none',
height: 48,
style: {
background: theme.colorFillTertiary,
borderRadius: theme.borderRadius
},
width: 48,
children: /*#__PURE__*/_jsx(Icon, {
color: theme.colorTextDescription,
icon: ICONS_MAPPING === null || ICONS_MAPPING === void 0 ? void 0 : ICONS_MAPPING[item.value.type],
size: 32
})
}), /*#__PURE__*/_jsxs(Flexbox, {
children: [/*#__PURE__*/_jsx(Typography.Title, {
ellipsis: {
rows: 1
},
level: 4,
style: {
fontSize: 14,
lineHeight: 1.4,
margin: 0
},
children: /*#__PURE__*/_jsx(Highlight, {
texts: item.value.highlightTitleTexts
})
}), /*#__PURE__*/_jsx(Typography.Paragraph, {
ellipsis: {
rows: 2
},
style: {
color: theme.colorTextSecondary,
fontSize: 12,
lineHeight: 1.4,
margin: 0
},
children: /*#__PURE__*/_jsx(Highlight, {
texts: item.value.highlightTexts
})
})]
})]
})
})
}, String(i));
})
});
} else {
returnNode = /*#__PURE__*/_jsx(Empty, {
description: intl.formatMessage({
id: 'search.not.found'
}),
image: Empty.PRESENTED_IMAGE_SIMPLE
});
}
return /*#__PURE__*/_jsx(Flexbox, {
onMouseDownCapture: function onMouseDownCapture(ev) {
return ev.preventDefault();
},
onMouseEnter: function onMouseEnter() {
return setActiveIndex(-1);
},
onMouseUpCapture: function onMouseUpCapture() {
document.activeElement.blur();
},
children: returnNode
});
});
export default SearchResult;