共计 19616 个字符,预计需要花费 50 分钟才能阅读完成。
antd 的抉择框默认是不容许 tab 选中的,如果有这种需要,那么须要批改源码。
通过剖析,antd 的抉择框应用的是 rc-select,将 node_modules 里的 rc-select/lib/OptionList.js 和 rc-select/es/OptionList.js 里减少 Tab 即可。(留神:每次 npm install,rc-select 都会变动,须要从新笼罩,如果更新了 antd 版本,须要从新测试 tab 性能是否失常,防止因为其降级导致有效)
/lib/OptionList.js
"use strict"; | |
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | |
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); | |
Object.defineProperty(exports, "__esModule", {value: true}); | |
exports.default = void 0; | |
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | |
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); | |
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); | |
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); | |
var React = _interopRequireWildcard(require("react")); | |
var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode")); | |
var _omit = _interopRequireDefault(require("rc-util/lib/omit")); | |
var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs")); | |
var _useMemo = _interopRequireDefault(require("rc-util/lib/hooks/useMemo")); | |
var _classnames = _interopRequireDefault(require("classnames")); | |
var _rcVirtualList = _interopRequireDefault(require("rc-virtual-list")); | |
var _TransBtn = _interopRequireDefault(require("./TransBtn")); | |
var _platformUtil = require("./utils/platformUtil"); | |
var _useBaseProps2 = _interopRequireDefault(require("./hooks/useBaseProps")); | |
var _SelectContext = _interopRequireDefault(require("./SelectContext")); | |
var _excluded = ["disabled", "title", "children", "style", "className"]; | |
/** | |
* Using virtual list of option display. | |
* Will fallback to dom if use customize render. | |
*/ | |
var OptionList = function OptionList(_, ref) {var _useBaseProps = (0, _useBaseProps2.default)(), | |
prefixCls = _useBaseProps.prefixCls, | |
id = _useBaseProps.id, | |
open = _useBaseProps.open, | |
multiple = _useBaseProps.multiple, | |
searchValue = _useBaseProps.searchValue, | |
toggleOpen = _useBaseProps.toggleOpen, | |
notFoundContent = _useBaseProps.notFoundContent, | |
onPopupScroll = _useBaseProps.onPopupScroll; | |
var _React$useContext = React.useContext(_SelectContext.default), | |
flattenOptions = _React$useContext.flattenOptions, | |
onActiveValue = _React$useContext.onActiveValue, | |
defaultActiveFirstOption = _React$useContext.defaultActiveFirstOption, | |
onSelect = _React$useContext.onSelect, | |
menuItemSelectedIcon = _React$useContext.menuItemSelectedIcon, | |
rawValues = _React$useContext.rawValues, | |
fieldNames = _React$useContext.fieldNames, | |
virtual = _React$useContext.virtual, | |
listHeight = _React$useContext.listHeight, | |
listItemHeight = _React$useContext.listItemHeight; | |
var itemPrefixCls = "".concat(prefixCls,"-item"); | |
var memoFlattenOptions = (0, _useMemo.default)(function () {return flattenOptions;}, [open, flattenOptions], function (prev, next) {return next[0] && prev[1] !== next[1]; | |
}); // =========================== List =========================== | |
var listRef = React.useRef(null); | |
var onListMouseDown = function onListMouseDown(event) {event.preventDefault(); | |
}; | |
var scrollIntoView = function scrollIntoView(index) {if (listRef.current) { | |
listRef.current.scrollTo({index: index}); | |
} | |
}; // ========================== Active ========================== | |
var getEnabledActiveIndex = function getEnabledActiveIndex(index) {var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; | |
var len = memoFlattenOptions.length; | |
for (var i = 0; i < len; i += 1) {var current = (index + i * offset + len) % len; | |
var _memoFlattenOptions$c = memoFlattenOptions[current], | |
group = _memoFlattenOptions$c.group, | |
data = _memoFlattenOptions$c.data; | |
if (!group && !data.disabled) {return current;} | |
} | |
return -1; | |
}; | |
var _React$useState = React.useState(function () {return getEnabledActiveIndex(0); | |
}), | |
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2), | |
activeIndex = _React$useState2[0], | |
setActiveIndex = _React$useState2[1]; | |
var setActive = function setActive(index) {var fromKeyboard = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | |
setActiveIndex(index); | |
var info = {source: fromKeyboard ? 'keyboard' : 'mouse'}; // Trigger active event | |
var flattenItem = memoFlattenOptions[index]; | |
if (!flattenItem) {onActiveValue(null, -1, info); | |
return; | |
} | |
onActiveValue(flattenItem.data.value, index, info); | |
}; // Auto active first item when list length or searchValue changed | |
(0, React.useEffect)(function () {setActive(defaultActiveFirstOption !== false ? getEnabledActiveIndex(0) : -1); | |
}, [memoFlattenOptions.length, searchValue]); // Auto scroll to item position in single mode | |
(0, React.useEffect)(function () { | |
/** | |
* React will skip `onChange` when component update. | |
* `setActive` function will call root accessibility state update which makes re-render. | |
* So we need to delay to let Input component trigger onChange first. | |
*/ | |
var timeoutId = setTimeout(function () {if (!multiple && open && rawValues.size === 1) {var value = Array.from(rawValues)[0]; | |
var index = memoFlattenOptions.findIndex(function (_ref) { | |
var data = _ref.data; | |
return data.value === value; | |
}); | |
if (index !== -1) {setActive(index); | |
scrollIntoView(index); | |
} | |
} | |
}); // Force trigger scrollbar visible when open | |
if (open) { | |
var _listRef$current; | |
(_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.scrollTo(undefined); | |
} | |
return function () {return clearTimeout(timeoutId); | |
}; | |
}, [open, searchValue]); // ========================== Values ========================== | |
var onSelectValue = function onSelectValue(value) {if (value !== undefined) { | |
onSelect(value, {selected: !rawValues.has(value) | |
}); | |
} // Single mode should always close by select | |
if (!multiple) {toggleOpen(false); | |
} | |
}; // ========================= Keyboard ========================= | |
React.useImperativeHandle(ref, function () { | |
return {onKeyDown: function onKeyDown(event) { | |
var which = event.which, | |
ctrlKey = event.ctrlKey; | |
switch (which) { | |
// >>> Arrow keys & ctrl + n/p on Mac | |
case _KeyCode.default.N: | |
case _KeyCode.default.P: | |
case _KeyCode.default.UP: | |
case _KeyCode.default.DOWN: | |
{ | |
var offset = 0; | |
if (which === _KeyCode.default.UP) {offset = -1;} else if (which === _KeyCode.default.DOWN) {offset = 1;} else if ((0, _platformUtil.isPlatformMac)() && ctrlKey) {if (which === _KeyCode.default.N) {offset = 1;} else if (which === _KeyCode.default.P) {offset = -1;} | |
} | |
if (offset !== 0) {var nextActiveIndex = getEnabledActiveIndex(activeIndex + offset, offset); | |
scrollIntoView(nextActiveIndex); | |
setActive(nextActiveIndex, true); | |
} | |
break; | |
} | |
// >>> Select | |
case _KeyCode.default.TAB: 增加 tab 键选中切换 | |
{ | |
// value | |
var item = memoFlattenOptions[activeIndex]; | |
if (item && !item.data.disabled) {onSelectValue(item.data.value); | |
} else {onSelectValue(undefined); | |
} | |
break; | |
} | |
case _KeyCode.default.ENTER: | |
{ | |
// value | |
var item = memoFlattenOptions[activeIndex]; | |
if (item && !item.data.disabled) {onSelectValue(item.data.value); | |
} else {onSelectValue(undefined); | |
} | |
if (open) {event.preventDefault(); | |
} | |
break; | |
} | |
// >>> Close | |
case _KeyCode.default.ESC: | |
{toggleOpen(false); | |
if (open) {event.stopPropagation(); | |
} | |
} | |
} | |
}, | |
onKeyUp: function onKeyUp() {}, | |
scrollTo: function scrollTo(index) {scrollIntoView(index); | |
} | |
}; | |
}); // ========================== Render ========================== | |
if (memoFlattenOptions.length === 0) { | |
return /*#__PURE__*/React.createElement("div", { | |
role: "listbox", | |
id: "".concat(id,"_list"), | |
className: "".concat(itemPrefixCls,"-empty"), | |
onMouseDown: onListMouseDown | |
}, notFoundContent); | |
} | |
var omitFieldNameList = Object.keys(fieldNames).map(function (key) {return fieldNames[key]; | |
}); | |
var getLabel = function getLabel(item) {return item.label;}; | |
var renderItem = function renderItem(index) {var item = memoFlattenOptions[index]; | |
if (!item) return null; | |
var itemData = item.data || {}; | |
var value = itemData.value; | |
var group = item.group; | |
var attrs = (0, _pickAttrs.default)(itemData, true); | |
var mergedLabel = getLabel(item); | |
return item ? /*#__PURE__*/React.createElement("div", (0, _extends2.default)({"aria-label": typeof mergedLabel === 'string' && !group ? mergedLabel : null}, attrs, { | |
key: index, | |
role: group ? 'presentation' : 'option', | |
id: "".concat(id,"_list_").concat(index),"aria-selected": rawValues.has(value) | |
}), value) : null; | |
}; | |
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { | |
role: "listbox", | |
id: "".concat(id,"_list"), | |
style: { | |
height: 0, | |
width: 0, | |
overflow: 'hidden' | |
} | |
}, renderItem(activeIndex - 1), renderItem(activeIndex), renderItem(activeIndex + 1)), /*#__PURE__*/React.createElement(_rcVirtualList.default, { | |
itemKey: "key", | |
ref: listRef, | |
data: memoFlattenOptions, | |
height: listHeight, | |
itemHeight: listItemHeight, | |
fullHeight: false, | |
onMouseDown: onListMouseDown, | |
onScroll: onPopupScroll, | |
virtual: virtual | |
}, function (item, itemIndex) { | |
var _classNames; | |
var group = item.group, | |
groupOption = item.groupOption, | |
data = item.data, | |
label = item.label, | |
value = item.value; | |
var key = data.key; // Group | |
if (group) { | |
return /*#__PURE__*/React.createElement("div", {className: (0, _classnames.default)(itemPrefixCls, "".concat(itemPrefixCls,"-group")) | |
}, label !== undefined ? label : key); | |
} | |
var disabled = data.disabled, | |
title = data.title, | |
children = data.children, | |
style = data.style, | |
className = data.className, | |
otherProps = (0, _objectWithoutProperties2.default)(data, _excluded); | |
var passedProps = (0, _omit.default)(otherProps, omitFieldNameList); // Option | |
var selected = rawValues.has(value); | |
var optionPrefixCls = "".concat(itemPrefixCls,"-option"); | |
var optionClassName = (0, _classnames.default)(itemPrefixCls, optionPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(optionPrefixCls,"-grouped"), groupOption), (0, _defineProperty2.default)(_classNames,"".concat(optionPrefixCls, "-active"), activeIndex === itemIndex && !disabled), (0, _defineProperty2.default)(_classNames, "".concat(optionPrefixCls,"-disabled"), disabled), (0, _defineProperty2.default)(_classNames,"".concat(optionPrefixCls, "-selected"), selected), _classNames)); | |
var mergedLabel = getLabel(item); | |
var iconVisible = !menuItemSelectedIcon || typeof menuItemSelectedIcon === 'function' || selected; | |
var content = mergedLabel || value; // https://github.com/ant-design/ant-design/issues/26717 | |
var optionTitle = typeof content === 'string' || typeof content === 'number' ? content.toString() : undefined; | |
if (title !== undefined) {optionTitle = title;} | |
return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, passedProps, { | |
"aria-selected": selected, | |
className: optionClassName, | |
title: optionTitle, | |
onMouseMove: function onMouseMove() {if (activeIndex === itemIndex || disabled) {return;} | |
setActive(itemIndex); | |
}, | |
onClick: function onClick() {if (!disabled) {onSelectValue(value); | |
} | |
}, | |
style: style | |
}), /*#__PURE__*/React.createElement("div", {className: "".concat(optionPrefixCls,"-content") | |
}, content), /*#__PURE__*/React.isValidElement(menuItemSelectedIcon) || selected, iconVisible && /*#__PURE__*/React.createElement(_TransBtn.default, {className: "".concat(itemPrefixCls,"-option-state"), | |
customizeIcon: menuItemSelectedIcon, | |
customizeIconProps: {isSelected: selected} | |
}, selected ? '✓' : null)); | |
})); | |
}; | |
var RefOptionList = /*#__PURE__*/React.forwardRef(OptionList); | |
RefOptionList.displayName = 'OptionList'; | |
var _default = RefOptionList; | |
exports.default = _default; |
/es/OptionList.js
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; | |
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties"; | |
import _extends from "@babel/runtime/helpers/esm/extends"; | |
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray"; | |
var _excluded = ["disabled", "title", "children", "style", "className"]; | |
import * as React from 'react'; | |
import {useEffect} from 'react'; | |
import KeyCode from "rc-util/es/KeyCode"; | |
import omit from "rc-util/es/omit"; | |
import pickAttrs from "rc-util/es/pickAttrs"; | |
import useMemo from "rc-util/es/hooks/useMemo"; | |
import classNames from 'classnames'; | |
import List from 'rc-virtual-list'; | |
import TransBtn from './TransBtn'; | |
import {isPlatformMac} from './utils/platformUtil'; | |
import useBaseProps from './hooks/useBaseProps'; | |
import SelectContext from './SelectContext'; | |
/** | |
* Using virtual list of option display. | |
* Will fallback to dom if use customize render. | |
*/ | |
var OptionList = function OptionList(_, ref) {var _useBaseProps = useBaseProps(), | |
prefixCls = _useBaseProps.prefixCls, | |
id = _useBaseProps.id, | |
open = _useBaseProps.open, | |
multiple = _useBaseProps.multiple, | |
searchValue = _useBaseProps.searchValue, | |
toggleOpen = _useBaseProps.toggleOpen, | |
notFoundContent = _useBaseProps.notFoundContent, | |
onPopupScroll = _useBaseProps.onPopupScroll; | |
var _React$useContext = React.useContext(SelectContext), | |
flattenOptions = _React$useContext.flattenOptions, | |
onActiveValue = _React$useContext.onActiveValue, | |
defaultActiveFirstOption = _React$useContext.defaultActiveFirstOption, | |
onSelect = _React$useContext.onSelect, | |
menuItemSelectedIcon = _React$useContext.menuItemSelectedIcon, | |
rawValues = _React$useContext.rawValues, | |
fieldNames = _React$useContext.fieldNames, | |
virtual = _React$useContext.virtual, | |
listHeight = _React$useContext.listHeight, | |
listItemHeight = _React$useContext.listItemHeight; | |
var itemPrefixCls = "".concat(prefixCls,"-item"); | |
var memoFlattenOptions = useMemo(function () {return flattenOptions;}, [open, flattenOptions], function (prev, next) {return next[0] && prev[1] !== next[1]; | |
}); // =========================== List =========================== | |
var listRef = React.useRef(null); | |
var onListMouseDown = function onListMouseDown(event) {event.preventDefault(); | |
}; | |
var scrollIntoView = function scrollIntoView(index) {if (listRef.current) { | |
listRef.current.scrollTo({index: index}); | |
} | |
}; // ========================== Active ========================== | |
var getEnabledActiveIndex = function getEnabledActiveIndex(index) {var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; | |
var len = memoFlattenOptions.length; | |
for (var i = 0; i < len; i += 1) {var current = (index + i * offset + len) % len; | |
var _memoFlattenOptions$c = memoFlattenOptions[current], | |
group = _memoFlattenOptions$c.group, | |
data = _memoFlattenOptions$c.data; | |
if (!group && !data.disabled) {return current;} | |
} | |
return -1; | |
}; | |
var _React$useState = React.useState(function () {return getEnabledActiveIndex(0); | |
}), | |
_React$useState2 = _slicedToArray(_React$useState, 2), | |
activeIndex = _React$useState2[0], | |
setActiveIndex = _React$useState2[1]; | |
var setActive = function setActive(index) {var fromKeyboard = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | |
setActiveIndex(index); | |
var info = {source: fromKeyboard ? 'keyboard' : 'mouse'}; // Trigger active event | |
var flattenItem = memoFlattenOptions[index]; | |
if (!flattenItem) {onActiveValue(null, -1, info); | |
return; | |
} | |
onActiveValue(flattenItem.data.value, index, info); | |
}; // Auto active first item when list length or searchValue changed | |
useEffect(function () {setActive(defaultActiveFirstOption !== false ? getEnabledActiveIndex(0) : -1); | |
}, [memoFlattenOptions.length, searchValue]); // Auto scroll to item position in single mode | |
useEffect(function () { | |
/** | |
* React will skip `onChange` when component update. | |
* `setActive` function will call root accessibility state update which makes re-render. | |
* So we need to delay to let Input component trigger onChange first. | |
*/ | |
var timeoutId = setTimeout(function () {if (!multiple && open && rawValues.size === 1) {var value = Array.from(rawValues)[0]; | |
var index = memoFlattenOptions.findIndex(function (_ref) { | |
var data = _ref.data; | |
return data.value === value; | |
}); | |
if (index !== -1) {setActive(index); | |
scrollIntoView(index); | |
} | |
} | |
}); // Force trigger scrollbar visible when open | |
if (open) { | |
var _listRef$current; | |
(_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.scrollTo(undefined); | |
} | |
return function () {return clearTimeout(timeoutId); | |
}; | |
}, [open, searchValue]); // ========================== Values ========================== | |
var onSelectValue = function onSelectValue(value) {if (value !== undefined) { | |
onSelect(value, {selected: !rawValues.has(value) | |
}); | |
} // Single mode should always close by select | |
if (!multiple) {toggleOpen(false); | |
} | |
}; // ========================= Keyboard ========================= | |
React.useImperativeHandle(ref, function () { | |
return {onKeyDown: function onKeyDown(event) { | |
var which = event.which, | |
ctrlKey = event.ctrlKey; | |
switch (which) { | |
// >>> Arrow keys & ctrl + n/p on Mac | |
case KeyCode.N: | |
case KeyCode.P: | |
case KeyCode.UP: | |
case KeyCode.DOWN: | |
{ | |
var offset = 0; | |
if (which === KeyCode.UP) {offset = -1;} else if (which === KeyCode.DOWN) {offset = 1;} else if (isPlatformMac() && ctrlKey) {if (which === KeyCode.N) {offset = 1;} else if (which === KeyCode.P) {offset = -1;} | |
} | |
if (offset !== 0) {var nextActiveIndex = getEnabledActiveIndex(activeIndex + offset, offset); | |
scrollIntoView(nextActiveIndex); | |
setActive(nextActiveIndex, true); | |
} | |
break; | |
} | |
// >>> Select | |
case KeyCode.TAB:// 增加 tab 键选中切换 | |
{ | |
// value | |
var item = memoFlattenOptions[activeIndex]; | |
if (item && !item.data.disabled) {onSelectValue(item.data.value); | |
} else {onSelectValue(undefined); | |
} | |
break; | |
} | |
case KeyCode.ENTER: | |
{ | |
// value | |
var item = memoFlattenOptions[activeIndex]; | |
if (item && !item.data.disabled) {onSelectValue(item.data.value); | |
} else {onSelectValue(undefined); | |
} | |
if (open) {event.preventDefault(); | |
} | |
break; | |
} | |
// >>> Close | |
case KeyCode.ESC: | |
{toggleOpen(false); | |
if (open) {event.stopPropagation(); | |
} | |
} | |
} | |
}, | |
onKeyUp: function onKeyUp() {}, | |
scrollTo: function scrollTo(index) {scrollIntoView(index); | |
} | |
}; | |
}); // ========================== Render ========================== | |
if (memoFlattenOptions.length === 0) { | |
return /*#__PURE__*/React.createElement("div", { | |
role: "listbox", | |
id: "".concat(id,"_list"), | |
className: "".concat(itemPrefixCls,"-empty"), | |
onMouseDown: onListMouseDown | |
}, notFoundContent); | |
} | |
var omitFieldNameList = Object.keys(fieldNames).map(function (key) {return fieldNames[key]; | |
}); | |
var getLabel = function getLabel(item) {return item.label;}; | |
var renderItem = function renderItem(index) {var item = memoFlattenOptions[index]; | |
if (!item) return null; | |
var itemData = item.data || {}; | |
var value = itemData.value; | |
var group = item.group; | |
var attrs = pickAttrs(itemData, true); | |
var mergedLabel = getLabel(item); | |
return item ? /*#__PURE__*/React.createElement("div", _extends({"aria-label": typeof mergedLabel === 'string' && !group ? mergedLabel : null}, attrs, { | |
key: index, | |
role: group ? 'presentation' : 'option', | |
id: "".concat(id,"_list_").concat(index),"aria-selected": rawValues.has(value) | |
}), value) : null; | |
}; | |
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { | |
role: "listbox", | |
id: "".concat(id,"_list"), | |
style: { | |
height: 0, | |
width: 0, | |
overflow: 'hidden' | |
} | |
}, renderItem(activeIndex - 1), renderItem(activeIndex), renderItem(activeIndex + 1)), /*#__PURE__*/React.createElement(List, { | |
itemKey: "key", | |
ref: listRef, | |
data: memoFlattenOptions, | |
height: listHeight, | |
itemHeight: listItemHeight, | |
fullHeight: false, | |
onMouseDown: onListMouseDown, | |
onScroll: onPopupScroll, | |
virtual: virtual | |
}, function (item, itemIndex) { | |
var _classNames; | |
var group = item.group, | |
groupOption = item.groupOption, | |
data = item.data, | |
label = item.label, | |
value = item.value; | |
var key = data.key; // Group | |
if (group) { | |
return /*#__PURE__*/React.createElement("div", {className: classNames(itemPrefixCls, "".concat(itemPrefixCls,"-group")) | |
}, label !== undefined ? label : key); | |
} | |
var disabled = data.disabled, | |
title = data.title, | |
children = data.children, | |
style = data.style, | |
className = data.className, | |
otherProps = _objectWithoutProperties(data, _excluded); | |
var passedProps = omit(otherProps, omitFieldNameList); // Option | |
var selected = rawValues.has(value); | |
var optionPrefixCls = "".concat(itemPrefixCls,"-option"); | |
var optionClassName = classNames(itemPrefixCls, optionPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(optionPrefixCls,"-grouped"), groupOption), _defineProperty(_classNames,"".concat(optionPrefixCls, "-active"), activeIndex === itemIndex && !disabled), _defineProperty(_classNames, "".concat(optionPrefixCls,"-disabled"), disabled), _defineProperty(_classNames,"".concat(optionPrefixCls, "-selected"), selected), _classNames)); | |
var mergedLabel = getLabel(item); | |
var iconVisible = !menuItemSelectedIcon || typeof menuItemSelectedIcon === 'function' || selected; | |
var content = mergedLabel || value; // https://github.com/ant-design/ant-design/issues/26717 | |
var optionTitle = typeof content === 'string' || typeof content === 'number' ? content.toString() : undefined; | |
if (title !== undefined) {optionTitle = title;} | |
return /*#__PURE__*/React.createElement("div", _extends({}, passedProps, { | |
"aria-selected": selected, | |
className: optionClassName, | |
title: optionTitle, | |
onMouseMove: function onMouseMove() {if (activeIndex === itemIndex || disabled) {return;} | |
setActive(itemIndex); | |
}, | |
onClick: function onClick() {if (!disabled) {onSelectValue(value); | |
} | |
}, | |
style: style | |
}), /*#__PURE__*/React.createElement("div", {className: "".concat(optionPrefixCls,"-content") | |
}, content), /*#__PURE__*/React.isValidElement(menuItemSelectedIcon) || selected, iconVisible && /*#__PURE__*/React.createElement(TransBtn, {className: "".concat(itemPrefixCls,"-option-state"), | |
customizeIcon: menuItemSelectedIcon, | |
customizeIconProps: {isSelected: selected} | |
}, selected ? '✓' : null)); | |
})); | |
}; | |
var RefOptionList = /*#__PURE__*/React.forwardRef(OptionList); | |
RefOptionList.displayName = 'OptionList'; | |
export default RefOptionList; |
正文完