Files
2026-01-16 02:20:32 +00:00

161 lines
6.8 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ProHelpSelect = exports.Highlight = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _icons = require("@ant-design/icons");
var _proProvider = require("@ant-design/pro-provider");
var _proUtils = require("@ant-design/pro-utils");
var _antd = require("antd");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _HelpProvide = require("./HelpProvide");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["iconClassName"];
/**
* 在一段文本中高亮显示指定的关键词,将文本和匹配项分别处理并放入数组中,最终返回包含高亮文本的组件。
* 在组件中使用了正则表达式来匹配关键词。
* 在渲染文本时使用了React.createElement来创建元素。
*/
var Highlight = exports.Highlight = function Highlight(_ref) {
var label = _ref.label,
words = _ref.words;
var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
getPrefixCls = _useContext.getPrefixCls;
var lightCls = getPrefixCls('pro-help-search-list-item-content-light');
var optionCls = getPrefixCls('pro-help-search-list-item-content');
// css
var _useStyle = (0, _proProvider.useStyle)('Highlight', function (token) {
return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(lightCls), {
color: token.colorPrimary
}), ".".concat(optionCls), {
flex: 'auto',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
});
}),
wrapSSR = _useStyle.wrapSSR;
if (words.length === 0) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: label
});
// 创建正则表达式匹配关键词
var matchKeywordsRE = new RegExp(words.map(function (word) {
return word.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
}).join('|'), 'gi');
var matchText = label;
var elements = [];
// 遍历匹配的文本将匹配项和非匹配项分别处理并放入elements数组中
while (matchText.length) {
var match = matchKeywordsRE.exec(matchText);
if (!match) {
elements.push(matchText);
break;
}
var start = match.index;
var matchLength = match[0].length + start;
elements.push(matchText.slice(0, start), /*#__PURE__*/_react.default.createElement('span', {
className: lightCls
}, matchText.slice(start, matchLength)));
matchText = matchText.slice(matchLength);
}
return wrapSSR( /*#__PURE__*/_react.default.createElement.apply(_react.default, ['div', {
title: label,
className: optionCls
}].concat(elements)));
};
var ProHelpSelect = exports.ProHelpSelect = function ProHelpSelect(_ref3) {
var iconClassName = _ref3.iconClassName,
props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
var _useContext2 = (0, _react.useContext)(_HelpProvide.ProHelpProvide),
dataSource = _useContext2.dataSource;
var _useState = (0, _react.useState)(''),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
keyWord = _useState2[0],
setKeyWork = _useState2[1];
var _useContext3 = (0, _react.useContext)(_proProvider.ProProvider),
hashId = _useContext3.hashId;
var debounceSetKeyWork = (0, _proUtils.useDebounceFn)( /*#__PURE__*/function () {
var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(key) {
return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
return _context.abrupt("return", setKeyWork(key));
case 1:
case "end":
return _context.stop();
}
}, _callee);
}));
return function (_x) {
return _ref4.apply(this, arguments);
};
}(), 20);
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
open = _useState4[0],
setOpen = _useState4[1];
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [!open ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classnames.default)(iconClassName, hashId),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchOutlined, {
title: "search panel",
onClick: function onClick() {
setOpen(true);
}
})
}) : null, open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Select, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
placeholder: "please input search text",
showSearch: true
}, (0, _proUtils.compatibleBorder)(false)), {}, {
onBlur: function onBlur() {
setOpen(false);
},
size: "small"
}, props), {}, {
onSearch: function onSearch(value) {
debounceSetKeyWork.cancel();
debounceSetKeyWork.run(value);
},
filterOption: function filterOption(input, option) {
var _option$title;
return ((_option$title = option === null || option === void 0 ? void 0 : option.title) !== null && _option$title !== void 0 ? _option$title : '').toLowerCase().includes(input.toLowerCase());
},
popupMatchSelectWidth: false,
options: dataSource.map(function (item) {
var _item$children;
return {
label: /*#__PURE__*/(0, _jsxRuntime.jsx)(Highlight, {
label: item.title,
words: [keyWord].filter(Boolean)
}),
title: item.title,
value: item.key,
options: (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.map(function (sunItem) {
return {
label: /*#__PURE__*/(0, _jsxRuntime.jsx)(Highlight, {
label: sunItem.title,
words: [keyWord].filter(Boolean)
}),
title: sunItem.title,
value: sunItem.key,
dataItemKey: item.key
};
})
};
})
})) : null]
});
};