@ant-design/pro-layout
Version:
161 lines (157 loc) • 6.93 kB
JavaScript
;
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]
});
};