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 = ["allowNew", "delay", "emptyLabel", "isLoading", "minLength", "onInputChange", "onSearch", "options", "promptText", "searchText", "useCache"];
|
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 debounce from 'lodash.debounce';
|
11 | import PropTypes from 'prop-types';
|
12 | import React, { forwardRef, useCallback, useEffect, useRef } from 'react';
|
13 | import useForceUpdate from '@restart/hooks/useForceUpdate';
|
14 | import usePrevious from '@restart/hooks/usePrevious';
|
15 | import { optionType } from '../propTypes';
|
16 | import { getDisplayName, isFunction } from '../utils';
|
17 | var propTypes = {
|
18 | |
19 |
|
20 |
|
21 | delay: PropTypes.number,
|
22 |
|
23 | |
24 |
|
25 |
|
26 |
|
27 | isLoading: PropTypes.bool.isRequired,
|
28 |
|
29 | |
30 |
|
31 |
|
32 | minLength: PropTypes.number,
|
33 |
|
34 | |
35 |
|
36 |
|
37 | onSearch: PropTypes.func.isRequired,
|
38 |
|
39 | |
40 |
|
41 |
|
42 |
|
43 | options: PropTypes.arrayOf(optionType),
|
44 |
|
45 | |
46 |
|
47 |
|
48 | promptText: PropTypes.node,
|
49 |
|
50 | |
51 |
|
52 |
|
53 | searchText: PropTypes.node,
|
54 |
|
55 | |
56 |
|
57 |
|
58 | useCache: PropTypes.bool
|
59 | };
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 | export function useAsync(props) {
|
70 | var allowNew = props.allowNew,
|
71 | _props$delay = props.delay,
|
72 | delay = _props$delay === void 0 ? 200 : _props$delay,
|
73 | emptyLabel = props.emptyLabel,
|
74 | isLoading = props.isLoading,
|
75 | _props$minLength = props.minLength,
|
76 | minLength = _props$minLength === void 0 ? 2 : _props$minLength,
|
77 | onInputChange = props.onInputChange,
|
78 | onSearch = props.onSearch,
|
79 | _props$options = props.options,
|
80 | options = _props$options === void 0 ? [] : _props$options,
|
81 | _props$promptText = props.promptText,
|
82 | promptText = _props$promptText === void 0 ? 'Type to search...' : _props$promptText,
|
83 | _props$searchText = props.searchText,
|
84 | searchText = _props$searchText === void 0 ? 'Searching...' : _props$searchText,
|
85 | _props$useCache = props.useCache,
|
86 | useCache = _props$useCache === void 0 ? true : _props$useCache,
|
87 | otherProps = _objectWithoutProperties(props, _excluded);
|
88 |
|
89 | var cacheRef = useRef({});
|
90 | var handleSearchDebouncedRef = useRef(null);
|
91 | var queryRef = useRef(props.defaultInputValue || '');
|
92 | var forceUpdate = useForceUpdate();
|
93 | var prevProps = usePrevious(props);
|
94 | var handleSearch = useCallback(function (query) {
|
95 | queryRef.current = query;
|
96 |
|
97 | if (!query || minLength && query.length < minLength) {
|
98 | return;
|
99 | }
|
100 |
|
101 |
|
102 | if (useCache && cacheRef.current[query]) {
|
103 |
|
104 | forceUpdate();
|
105 | return;
|
106 | }
|
107 |
|
108 |
|
109 | onSearch(query);
|
110 | }, [forceUpdate, minLength, onSearch, useCache]);
|
111 |
|
112 | useEffect(function () {
|
113 | handleSearchDebouncedRef.current = debounce(handleSearch, delay);
|
114 | return function () {
|
115 | handleSearchDebouncedRef.current && handleSearchDebouncedRef.current.cancel();
|
116 | };
|
117 | }, [delay, handleSearch]);
|
118 | useEffect(function () {
|
119 |
|
120 |
|
121 |
|
122 | if (!isLoading && prevProps && prevProps.isLoading && useCache) {
|
123 | cacheRef.current[queryRef.current] = options;
|
124 | }
|
125 | });
|
126 |
|
127 | var getEmptyLabel = function getEmptyLabel() {
|
128 | if (!queryRef.current.length) {
|
129 | return promptText;
|
130 | }
|
131 |
|
132 | if (isLoading) {
|
133 | return searchText;
|
134 | }
|
135 |
|
136 | return emptyLabel;
|
137 | };
|
138 |
|
139 | var handleInputChange = useCallback(function (query, e) {
|
140 | onInputChange && onInputChange(query, e);
|
141 | handleSearchDebouncedRef.current && handleSearchDebouncedRef.current(query);
|
142 | }, [onInputChange]);
|
143 | var cachedQuery = cacheRef.current[queryRef.current];
|
144 | return _objectSpread(_objectSpread({}, otherProps), {}, {
|
145 |
|
146 | allowNew: isFunction(allowNew) ? allowNew : allowNew && !isLoading,
|
147 | emptyLabel: getEmptyLabel(),
|
148 | isLoading: isLoading,
|
149 | minLength: minLength,
|
150 | onInputChange: handleInputChange,
|
151 | options: useCache && cachedQuery ? cachedQuery : options
|
152 | });
|
153 | }
|
154 | export function withAsync(Component) {
|
155 | var AsyncTypeahead = forwardRef(function (props, ref) {
|
156 | return React.createElement(Component, _extends({}, props, useAsync(props), {
|
157 | ref: ref
|
158 | }));
|
159 | });
|
160 | AsyncTypeahead.displayName = "withAsync(".concat(getDisplayName(Component), ")");
|
161 |
|
162 | AsyncTypeahead.propTypes = propTypes;
|
163 | return AsyncTypeahead;
|
164 | } |
\ | No newline at end of file |