index.js 2.3 KB

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