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