index.js 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. import { useEvent, useState } from 'functional-mini/component';
  2. import '../_util/assert-component2';
  3. import { mountComponent } from '../_util/component';
  4. import { useComponentEvent } from '../_util/hooks/useComponentEvent';
  5. import useLayoutEffect from '../_util/hooks/useLayoutEffect';
  6. import { hasValue, useMergedState } from '../_util/hooks/useMergedState';
  7. import { triggerRefEvent } from '../_util/hooks/useReportRef';
  8. import { InputFunctionalProps } from './props';
  9. var Input = function (props) {
  10. var isControlled = hasValue(props.controlled)
  11. ? !!props.controlled
  12. : hasValue(props.value);
  13. var option = {
  14. value: props.value,
  15. };
  16. if (!isControlled && hasValue(props.value)) {
  17. option = {
  18. defaultValue: props.value,
  19. };
  20. }
  21. var _a = useMergedState(props.defaultValue, option), value = _a[0], updateValue = _a[1];
  22. var _b = useState(false), selfFocus = _b[0], setSelfFocus = _b[1];
  23. var triggerEvent = useComponentEvent(props).triggerEvent;
  24. triggerRefEvent();
  25. useLayoutEffect(function (mount) {
  26. if (!isControlled && !mount) {
  27. updateValue(props.value);
  28. }
  29. }, [props.value]);
  30. useEvent('onChange', function (e) {
  31. var newValue = e.detail.value;
  32. if (!isControlled) {
  33. updateValue(newValue);
  34. }
  35. else {
  36. }
  37. triggerEvent('change', newValue, e);
  38. });
  39. useEvent('onFocus', function (e) {
  40. var newValue = e.detail.value;
  41. setSelfFocus(true);
  42. triggerEvent('focus', newValue, e);
  43. });
  44. useEvent('onBlur', function (e) {
  45. var newValue = e.detail.value;
  46. setSelfFocus(false);
  47. triggerEvent('blur', newValue, e);
  48. });
  49. useEvent('onConfirm', function (e) {
  50. var newValue = e.detail.value;
  51. triggerEvent('confirm', newValue, e);
  52. });
  53. useEvent('onClear', function (e) {
  54. if (!isControlled) {
  55. updateValue('');
  56. }
  57. triggerEvent('change', '', e);
  58. });
  59. useEvent('update', function (e) {
  60. if (isControlled) {
  61. return;
  62. }
  63. updateValue(e);
  64. });
  65. return {
  66. state: {
  67. value: value,
  68. controlled: isControlled,
  69. },
  70. selfFocus: selfFocus,
  71. };
  72. };
  73. mountComponent(Input, InputFunctionalProps);