index.js 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. import { useEffect, useEvent, useRef } from 'functional-mini/component';
  2. import { mountComponent } from '../../_util/component';
  3. import { useComponentEvent } from '../../_util/hooks/useComponentEvent';
  4. import { hasValue, useMergedState } from '../../_util/hooks/useMergedState';
  5. var InputBlur = function (props) {
  6. var isControlled = hasValue(props.controlled)
  7. ? !!props.controlled
  8. : hasValue(props.value);
  9. var _a = useMergedState(props.defaultValue, {
  10. // 因为受控模式下 value 也是会随着 props.value 变化的, 所以这里不需要判断是否受控
  11. defaultValue: props.value,
  12. }), value = _a[0], doUpdateValue = _a[1];
  13. function updateValue(value, updateWithoutFocusCheck) {
  14. if (!updateWithoutFocusCheck && focusRef.current) {
  15. return;
  16. }
  17. doUpdateValue(value);
  18. }
  19. var focusRef = useRef(false);
  20. useEffect(function () {
  21. if (!focusRef.current) {
  22. doUpdateValue(props.value);
  23. }
  24. }, [props, focusRef]);
  25. var triggerEvent = useComponentEvent(props).triggerEvent;
  26. useEvent('onChange', function (e) {
  27. var newValue = e.detail.value;
  28. if (isControlled) {
  29. updateValue(newValue, true);
  30. }
  31. triggerEvent('change', newValue, e);
  32. }, []);
  33. useEvent('onFocus', function (e) {
  34. var newValue = e.detail.value;
  35. focusRef.current = true;
  36. triggerEvent('focus', newValue, e);
  37. }, []);
  38. useEvent('onBlur', function (e) {
  39. var newValue = e.detail.value;
  40. focusRef.current = false;
  41. if (isControlled) {
  42. updateValue(props.value);
  43. }
  44. triggerEvent('blur', newValue, e);
  45. }, [props]);
  46. useEvent('onConfirm', function (e) {
  47. var newValue = e.detail.value;
  48. triggerEvent('confirm', newValue, e);
  49. }, [props]);
  50. return {
  51. inputValue: value,
  52. };
  53. };
  54. mountComponent(InputBlur, {
  55. value: null,
  56. defaultValue: null,
  57. placeholder: null,
  58. placeholderClassName: '',
  59. placeholderStyle: '',
  60. enableNative: null,
  61. confirmType: null,
  62. confirmHold: null,
  63. alwaysSystem: null,
  64. selectionStart: null,
  65. selectionEnd: null,
  66. cursor: null,
  67. controlled: null,
  68. inputClassName: null,
  69. inputStyle: null,
  70. focus: null,
  71. password: null,
  72. disabled: null,
  73. name: null,
  74. type: null,
  75. randomNumber: null,
  76. });