1 | import _extends from "@babel/runtime/helpers/extends";
|
2 | import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3 | import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
4 | var _excluded = ["label", "onClick", "option", "position"];
|
5 |
|
6 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
7 |
|
8 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
9 |
|
10 | import PropTypes from 'prop-types';
|
11 | import React, { useCallback, useEffect, useRef } from 'react';
|
12 | import scrollIntoView from 'scroll-into-view-if-needed';
|
13 | import { useTypeaheadContext } from '../core/Context';
|
14 | import { getDisplayName, getMenuItemId, preventInputBlur } from '../utils';
|
15 | import { optionType } from '../propTypes';
|
16 | var propTypes = {
|
17 | option: optionType.isRequired,
|
18 | position: PropTypes.number
|
19 | };
|
20 | export function useItem(_ref) {
|
21 | var label = _ref.label,
|
22 | onClick = _ref.onClick,
|
23 | option = _ref.option,
|
24 | position = _ref.position,
|
25 | props = _objectWithoutProperties(_ref, _excluded);
|
26 |
|
27 | var _useTypeaheadContext = useTypeaheadContext(),
|
28 | activeIndex = _useTypeaheadContext.activeIndex,
|
29 | id = _useTypeaheadContext.id,
|
30 | isOnlyResult = _useTypeaheadContext.isOnlyResult,
|
31 | onActiveItemChange = _useTypeaheadContext.onActiveItemChange,
|
32 | onInitialItemChange = _useTypeaheadContext.onInitialItemChange,
|
33 | onMenuItemClick = _useTypeaheadContext.onMenuItemClick,
|
34 | setItem = _useTypeaheadContext.setItem;
|
35 |
|
36 | var itemRef = useRef(null);
|
37 | useEffect(function () {
|
38 | if (position === 0) {
|
39 | onInitialItemChange(option);
|
40 | }
|
41 | });
|
42 | useEffect(function () {
|
43 | if (position === activeIndex) {
|
44 | onActiveItemChange(option);
|
45 |
|
46 | var node = itemRef.current;
|
47 | node && scrollIntoView(node, {
|
48 | block: 'nearest',
|
49 | boundary: node.parentNode,
|
50 | inline: 'nearest',
|
51 | scrollMode: 'if-needed'
|
52 | });
|
53 | }
|
54 | });
|
55 | var handleClick = useCallback(function (e) {
|
56 | onMenuItemClick(option, e);
|
57 | onClick && onClick(e);
|
58 | }, [onClick, onMenuItemClick, option]);
|
59 | var active = isOnlyResult || activeIndex === position;
|
60 |
|
61 | setItem(option, position);
|
62 | return _objectSpread(_objectSpread({}, props), {}, {
|
63 | active: active,
|
64 | 'aria-label': label,
|
65 | 'aria-selected': active,
|
66 | id: getMenuItemId(id, position),
|
67 | onClick: handleClick,
|
68 | onMouseDown: preventInputBlur,
|
69 | ref: itemRef,
|
70 | role: 'option'
|
71 | });
|
72 | }
|
73 |
|
74 |
|
75 | export function withItem(Component) {
|
76 | var WrappedMenuItem = function WrappedMenuItem(props) {
|
77 | return React.createElement(Component, _extends({}, props, useItem(props)));
|
78 | };
|
79 |
|
80 | WrappedMenuItem.displayName = "withItem(".concat(getDisplayName(Component), ")");
|
81 | WrappedMenuItem.propTypes = propTypes;
|
82 | return WrappedMenuItem;
|
83 | } |
\ | No newline at end of file |