1 | "use strict";
|
---|
2 |
|
---|
3 | function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
---|
4 |
|
---|
5 | Object.defineProperty(exports, "__esModule", {
|
---|
6 | value: true
|
---|
7 | });
|
---|
8 | exports.DebounceInput = void 0;
|
---|
9 |
|
---|
10 | var _react = _interopRequireDefault(require("react"));
|
---|
11 |
|
---|
12 | var _lodash = _interopRequireDefault(require("lodash.debounce"));
|
---|
13 |
|
---|
14 | var _excluded = ["element", "onChange", "value", "minLength", "debounceTimeout", "forceNotifyByEnter", "forceNotifyOnBlur", "onKeyDown", "onBlur", "inputRef"];
|
---|
15 |
|
---|
16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
---|
17 |
|
---|
18 | function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
---|
19 |
|
---|
20 | function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
---|
21 |
|
---|
22 | 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; }
|
---|
23 |
|
---|
24 | 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; }
|
---|
25 |
|
---|
26 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
---|
27 |
|
---|
28 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
---|
29 |
|
---|
30 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
---|
31 |
|
---|
32 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
---|
33 |
|
---|
34 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
---|
35 |
|
---|
36 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
---|
37 |
|
---|
38 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
---|
39 |
|
---|
40 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
---|
41 |
|
---|
42 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
---|
43 |
|
---|
44 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
---|
45 |
|
---|
46 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
---|
47 |
|
---|
48 | var DebounceInput = /*#__PURE__*/function (_React$PureComponent) {
|
---|
49 | _inherits(DebounceInput, _React$PureComponent);
|
---|
50 |
|
---|
51 | var _super = _createSuper(DebounceInput);
|
---|
52 |
|
---|
53 | function DebounceInput(props) {
|
---|
54 | var _this;
|
---|
55 |
|
---|
56 | _classCallCheck(this, DebounceInput);
|
---|
57 |
|
---|
58 | _this = _super.call(this, props);
|
---|
59 |
|
---|
60 | _defineProperty(_assertThisInitialized(_this), "onChange", function (event) {
|
---|
61 | event.persist();
|
---|
62 | var oldValue = _this.state.value;
|
---|
63 | var minLength = _this.props.minLength;
|
---|
64 |
|
---|
65 | _this.setState({
|
---|
66 | value: event.target.value
|
---|
67 | }, function () {
|
---|
68 | var value = _this.state.value;
|
---|
69 |
|
---|
70 | if (value.length >= minLength) {
|
---|
71 | _this.notify(event);
|
---|
72 |
|
---|
73 | return;
|
---|
74 | } // If user hits backspace and goes below minLength consider it cleaning the value
|
---|
75 |
|
---|
76 |
|
---|
77 | if (oldValue.length > value.length) {
|
---|
78 | _this.notify(_objectSpread(_objectSpread({}, event), {}, {
|
---|
79 | target: _objectSpread(_objectSpread({}, event.target), {}, {
|
---|
80 | value: ''
|
---|
81 | })
|
---|
82 | }));
|
---|
83 | }
|
---|
84 | });
|
---|
85 | });
|
---|
86 |
|
---|
87 | _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
|
---|
88 | if (event.key === 'Enter') {
|
---|
89 | _this.forceNotify(event);
|
---|
90 | } // Invoke original onKeyDown if present
|
---|
91 |
|
---|
92 |
|
---|
93 | var onKeyDown = _this.props.onKeyDown;
|
---|
94 |
|
---|
95 | if (onKeyDown) {
|
---|
96 | event.persist();
|
---|
97 | onKeyDown(event);
|
---|
98 | }
|
---|
99 | });
|
---|
100 |
|
---|
101 | _defineProperty(_assertThisInitialized(_this), "onBlur", function (event) {
|
---|
102 | _this.forceNotify(event); // Invoke original onBlur if present
|
---|
103 |
|
---|
104 |
|
---|
105 | var onBlur = _this.props.onBlur;
|
---|
106 |
|
---|
107 | if (onBlur) {
|
---|
108 | event.persist();
|
---|
109 | onBlur(event);
|
---|
110 | }
|
---|
111 | });
|
---|
112 |
|
---|
113 | _defineProperty(_assertThisInitialized(_this), "createNotifier", function (debounceTimeout) {
|
---|
114 | if (debounceTimeout < 0) {
|
---|
115 | _this.notify = function () {
|
---|
116 | return null;
|
---|
117 | };
|
---|
118 | } else if (debounceTimeout === 0) {
|
---|
119 | _this.notify = _this.doNotify;
|
---|
120 | } else {
|
---|
121 | var debouncedChangeFunc = (0, _lodash["default"])(function (event) {
|
---|
122 | _this.isDebouncing = false;
|
---|
123 |
|
---|
124 | _this.doNotify(event);
|
---|
125 | }, debounceTimeout);
|
---|
126 |
|
---|
127 | _this.notify = function (event) {
|
---|
128 | _this.isDebouncing = true;
|
---|
129 | debouncedChangeFunc(event);
|
---|
130 | };
|
---|
131 |
|
---|
132 | _this.flush = function () {
|
---|
133 | return debouncedChangeFunc.flush();
|
---|
134 | };
|
---|
135 |
|
---|
136 | _this.cancel = function () {
|
---|
137 | _this.isDebouncing = false;
|
---|
138 | debouncedChangeFunc.cancel();
|
---|
139 | };
|
---|
140 | }
|
---|
141 | });
|
---|
142 |
|
---|
143 | _defineProperty(_assertThisInitialized(_this), "doNotify", function () {
|
---|
144 | var onChange = _this.props.onChange;
|
---|
145 | onChange.apply(void 0, arguments);
|
---|
146 | });
|
---|
147 |
|
---|
148 | _defineProperty(_assertThisInitialized(_this), "forceNotify", function (event) {
|
---|
149 | var debounceTimeout = _this.props.debounceTimeout;
|
---|
150 |
|
---|
151 | if (!_this.isDebouncing && debounceTimeout > 0) {
|
---|
152 | return;
|
---|
153 | }
|
---|
154 |
|
---|
155 | if (_this.cancel) {
|
---|
156 | _this.cancel();
|
---|
157 | }
|
---|
158 |
|
---|
159 | var value = _this.state.value;
|
---|
160 | var minLength = _this.props.minLength;
|
---|
161 |
|
---|
162 | if (value.length >= minLength) {
|
---|
163 | _this.doNotify(event);
|
---|
164 | } else {
|
---|
165 | _this.doNotify(_objectSpread(_objectSpread({}, event), {}, {
|
---|
166 | target: _objectSpread(_objectSpread({}, event.target), {}, {
|
---|
167 | value: value
|
---|
168 | })
|
---|
169 | }));
|
---|
170 | }
|
---|
171 | });
|
---|
172 |
|
---|
173 | _this.isDebouncing = false;
|
---|
174 | _this.state = {
|
---|
175 | value: typeof props.value === 'undefined' || props.value === null ? '' : props.value
|
---|
176 | };
|
---|
177 | var _debounceTimeout2 = _this.props.debounceTimeout;
|
---|
178 |
|
---|
179 | _this.createNotifier(_debounceTimeout2);
|
---|
180 |
|
---|
181 | return _this;
|
---|
182 | }
|
---|
183 |
|
---|
184 | _createClass(DebounceInput, [{
|
---|
185 | key: "componentDidUpdate",
|
---|
186 | value: function componentDidUpdate(prevProps) {
|
---|
187 | if (this.isDebouncing) {
|
---|
188 | return;
|
---|
189 | }
|
---|
190 |
|
---|
191 | var _this$props = this.props,
|
---|
192 | value = _this$props.value,
|
---|
193 | debounceTimeout = _this$props.debounceTimeout;
|
---|
194 | var oldTimeout = prevProps.debounceTimeout,
|
---|
195 | oldValue = prevProps.value;
|
---|
196 | var stateValue = this.state.value;
|
---|
197 |
|
---|
198 | if (typeof value !== 'undefined' && oldValue !== value && stateValue !== value) {
|
---|
199 | // Update state.value if new value passed via props, yep re-render should happen
|
---|
200 | // eslint-disable-next-line react/no-did-update-set-state
|
---|
201 | this.setState({
|
---|
202 | value: value
|
---|
203 | });
|
---|
204 | }
|
---|
205 |
|
---|
206 | if (debounceTimeout !== oldTimeout) {
|
---|
207 | this.createNotifier(debounceTimeout);
|
---|
208 | }
|
---|
209 | }
|
---|
210 | }, {
|
---|
211 | key: "componentWillUnmount",
|
---|
212 | value: function componentWillUnmount() {
|
---|
213 | if (this.flush) {
|
---|
214 | this.flush();
|
---|
215 | }
|
---|
216 | }
|
---|
217 | }, {
|
---|
218 | key: "render",
|
---|
219 | value: function render() {
|
---|
220 | var _this$props2 = this.props,
|
---|
221 | element = _this$props2.element,
|
---|
222 | _onChange = _this$props2.onChange,
|
---|
223 | _value = _this$props2.value,
|
---|
224 | _minLength = _this$props2.minLength,
|
---|
225 | _debounceTimeout = _this$props2.debounceTimeout,
|
---|
226 | forceNotifyByEnter = _this$props2.forceNotifyByEnter,
|
---|
227 | forceNotifyOnBlur = _this$props2.forceNotifyOnBlur,
|
---|
228 | onKeyDown = _this$props2.onKeyDown,
|
---|
229 | onBlur = _this$props2.onBlur,
|
---|
230 | inputRef = _this$props2.inputRef,
|
---|
231 | props = _objectWithoutProperties(_this$props2, _excluded);
|
---|
232 |
|
---|
233 | var value = this.state.value;
|
---|
234 | var maybeOnKeyDown;
|
---|
235 |
|
---|
236 | if (forceNotifyByEnter) {
|
---|
237 | maybeOnKeyDown = {
|
---|
238 | onKeyDown: this.onKeyDown
|
---|
239 | };
|
---|
240 | } else if (onKeyDown) {
|
---|
241 | maybeOnKeyDown = {
|
---|
242 | onKeyDown: onKeyDown
|
---|
243 | };
|
---|
244 | } else {
|
---|
245 | maybeOnKeyDown = {};
|
---|
246 | }
|
---|
247 |
|
---|
248 | var maybeOnBlur;
|
---|
249 |
|
---|
250 | if (forceNotifyOnBlur) {
|
---|
251 | maybeOnBlur = {
|
---|
252 | onBlur: this.onBlur
|
---|
253 | };
|
---|
254 | } else if (onBlur) {
|
---|
255 | maybeOnBlur = {
|
---|
256 | onBlur: onBlur
|
---|
257 | };
|
---|
258 | } else {
|
---|
259 | maybeOnBlur = {};
|
---|
260 | }
|
---|
261 |
|
---|
262 | var maybeRef = inputRef ? {
|
---|
263 | ref: inputRef
|
---|
264 | } : {};
|
---|
265 | return /*#__PURE__*/_react["default"].createElement(element, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), {}, {
|
---|
266 | onChange: this.onChange,
|
---|
267 | value: value
|
---|
268 | }, maybeOnKeyDown), maybeOnBlur), maybeRef));
|
---|
269 | }
|
---|
270 | }]);
|
---|
271 |
|
---|
272 | return DebounceInput;
|
---|
273 | }(_react["default"].PureComponent);
|
---|
274 |
|
---|
275 | exports.DebounceInput = DebounceInput;
|
---|
276 |
|
---|
277 | _defineProperty(DebounceInput, "defaultProps", {
|
---|
278 | element: 'input',
|
---|
279 | type: 'text',
|
---|
280 | onKeyDown: undefined,
|
---|
281 | onBlur: undefined,
|
---|
282 | value: undefined,
|
---|
283 | minLength: 0,
|
---|
284 | debounceTimeout: 100,
|
---|
285 | forceNotifyByEnter: true,
|
---|
286 | forceNotifyOnBlur: true,
|
---|
287 | inputRef: undefined
|
---|
288 | }); |
---|