useBubbleLock.js 854 B

12345678910111213141516171819202122232425262728
  1. import React from 'react';
  2. import raf from "rc-util/es/raf";
  3. /**
  4. * When click on the label,
  5. * the event will be stopped to prevent the label from being clicked twice.
  6. * label click -> input click -> label click again
  7. */
  8. export default function useBubbleLock(onOriginInputClick) {
  9. const labelClickLockRef = React.useRef(null);
  10. const clearLock = () => {
  11. raf.cancel(labelClickLockRef.current);
  12. labelClickLockRef.current = null;
  13. };
  14. const onLabelClick = () => {
  15. clearLock();
  16. labelClickLockRef.current = raf(() => {
  17. labelClickLockRef.current = null;
  18. });
  19. };
  20. const onInputClick = e => {
  21. if (labelClickLockRef.current) {
  22. e.stopPropagation();
  23. clearLock();
  24. }
  25. onOriginInputClick === null || onOriginInputClick === void 0 ? void 0 : onOriginInputClick(e);
  26. };
  27. return [onLabelClick, onInputClick];
  28. }