@gzued/antd-compiled
Version:
Pre-bundled Ant Design 4.x and related dependencies for @gzued packages
170 lines • 5.29 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useState, useEffect, useRef } from 'react';
import KeyCode from "rc-util/es/KeyCode";
import { addGlobalMouseDownEvent, getTargetFromEvent } from '../utils/uiUtil';
export default function usePickerInput(_ref) {
var open = _ref.open,
value = _ref.value,
isClickOutside = _ref.isClickOutside,
triggerOpen = _ref.triggerOpen,
forwardKeyDown = _ref.forwardKeyDown,
_onKeyDown = _ref.onKeyDown,
blurToCancel = _ref.blurToCancel,
onSubmit = _ref.onSubmit,
onCancel = _ref.onCancel,
_onFocus = _ref.onFocus,
_onBlur = _ref.onBlur,
currentFocusedKey = _ref.currentFocusedKey,
_ref$key = _ref.key,
key = _ref$key === void 0 ? 'start' : _ref$key;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
typing = _useState2[0],
setTyping = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
focused = _useState4[0],
setFocused = _useState4[1];
var delayBlurTimer = useRef();
/**
* We will prevent blur to handle open event when user click outside,
* since this will repeat trigger `onOpenChange` event.
*/
var preventBlurRef = useRef(false);
var valueChangedRef = useRef(false);
var preventDefaultRef = useRef(false);
var inputProps = {
onMouseDown: function onMouseDown() {
setTyping(true);
triggerOpen(true);
},
onKeyDown: function onKeyDown(e) {
var preventDefault = function preventDefault() {
preventDefaultRef.current = true;
};
_onKeyDown(e, preventDefault);
if (preventDefaultRef.current) return;
switch (e.which) {
case KeyCode.ENTER:
{
if (!open) {
triggerOpen(true);
} else if (onSubmit() !== false) {
setTyping(true);
}
e.preventDefault();
return;
}
case KeyCode.TAB:
{
if (typing && open && !e.shiftKey) {
setTyping(false);
e.preventDefault();
} else if (!typing && open) {
if (!forwardKeyDown(e) && e.shiftKey) {
setTyping(true);
e.preventDefault();
}
}
return;
}
case KeyCode.ESC:
{
setTyping(true);
onCancel();
return;
}
}
if (!open && ![KeyCode.SHIFT].includes(e.which)) {
triggerOpen(true);
} else if (!typing) {
// Let popup panel handle keyboard
forwardKeyDown(e);
}
},
onFocus: function onFocus(e) {
setTyping(true);
setFocused(true);
if (currentFocusedKey) {
currentFocusedKey.current = key;
}
clearTimeout(delayBlurTimer.current);
if (_onFocus) {
_onFocus(e);
}
},
onBlur: function onBlur(e) {
if (preventBlurRef.current || !isClickOutside(document.activeElement)) {
preventBlurRef.current = false;
return;
}
if (blurToCancel) {
setTimeout(function () {
var _document = document,
activeElement = _document.activeElement;
while (activeElement && activeElement.shadowRoot) {
activeElement = activeElement.shadowRoot.activeElement;
}
if (isClickOutside(activeElement)) {
onCancel();
}
}, 0);
} else if (open) {
triggerOpen(false);
if (valueChangedRef.current) {
onSubmit();
}
}
setFocused(false);
if (currentFocusedKey) {
currentFocusedKey.current = '';
// Delay to prevent 'range' focus transitions from firing resulting in incorrect out-of-focus events
delayBlurTimer.current = setTimeout(function () {
// Prevent the 'blur' event from firing when there is currently a focused input
if (currentFocusedKey.current) {
return;
}
_onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
}, 100);
} else {
_onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
}
}
};
// check if value changed
useEffect(function () {
valueChangedRef.current = false;
}, [open]);
useEffect(function () {
valueChangedRef.current = true;
}, [value]);
// Global click handler
useEffect(function () {
return addGlobalMouseDownEvent(function (e) {
var target = getTargetFromEvent(e);
var clickedOutside = isClickOutside(target);
if (open) {
if (!clickedOutside) {
preventBlurRef.current = true;
// Always set back in case `onBlur` prevented by user
requestAnimationFrame(function () {
preventBlurRef.current = false;
});
} else if (!focused || clickedOutside) {
triggerOpen(false);
}
} else if (focused && !clickedOutside) {
preventBlurRef.current = true;
}
});
});
useEffect(function () {
return function () {
return clearTimeout(delayBlurTimer.current);
};
}, []);
return [inputProps, {
focused: focused,
typing: typing
}];
}