@qsxy/element-plus-react 1.0.1 → 1.0.2

package/dist/Util/aria.js

@@ -0,0 +1,118 @@
+var FOCUSABLE_ELEMENT_SELECTORS = 'a[href],button:not([disabled]),button:not([hidden]),:not([tabindex="-1"]),input:not([disabled]),input:not([type="hidden"]),select:not([disabled]),textarea:not([disabled])';
+var isHTMLElement = function isHTMLElement(e) {
+  if (typeof Element === 'undefined') {
+    return false;
+  }
+  return e instanceof Element;
+};
+
+/**
+ * Determine if the testing element is visible on screen no matter if its on the viewport or not
+ */
+export var isVisible = function isVisible(element) {
+  if (process.env.NODE_ENV === 'test') {
+    return true;
+  }
+  var computed = getComputedStyle(element);
+  // element.offsetParent won't work on fix positioned
+  // WARNING: potential issue here, going to need some expert advices on this issue
+  return computed.position === 'fixed' ? false : element.offsetParent !== null;
+};
+export var obtainAllFocusableElements = function obtainAllFocusableElements(element) {
+  return Array.from(element.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS)).filter(function (item) {
+    return isFocusable(item) && isVisible(item);
+  });
+};
+
+/**
+ * @desc Determine if target element is focusable
+ * @param element {HTMLElement}
+ * @returns {Boolean} true if it is focusable
+ */
+export var isFocusable = function isFocusable(element) {
+  if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null) {
+    return true;
+  }
+  if (element.tabIndex < 0 || element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true') {
+    return false;
+  }
+  switch (element.nodeName) {
+    case 'A':
+      {
+        // casting current element to Specific HTMLElement in order to be more type precise
+        return !!element.href && element.rel !== 'ignore';
+      }
+    case 'INPUT':
+      {
+        return !(element.type === 'hidden' || element.type === 'file');
+      }
+    case 'BUTTON':
+    case 'SELECT':
+    case 'TEXTAREA':
+      {
+        return true;
+      }
+    default:
+      {
+        return false;
+      }
+  }
+};
+
+/**
+ * Trigger an event
+ * mouseenter, mouseleave, mouseover, keyup, change, click, etc.
+ * @param  {HTMLElement} elm
+ * @param  {String} name
+ * @param  {*} opts
+ */
+export var triggerEvent = function triggerEvent(elm, name) {
+  var eventName;
+  if (name.includes('mouse') || name.includes('click')) {
+    eventName = 'MouseEvents';
+  } else if (name.includes('key')) {
+    eventName = 'KeyboardEvent';
+  } else {
+    eventName = 'HTMLEvents';
+  }
+  var evt = document.createEvent(eventName);
+  for (var _len = arguments.length, opts = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    opts[_key - 2] = arguments[_key];
+  }
+  evt.initEvent.apply(evt, [name].concat(opts));
+  elm.dispatchEvent(evt);
+  return elm;
+};
+export var isLeaf = function isLeaf(el) {
+  return !el.getAttribute('aria-owns');
+};
+export var getSibling = function getSibling(el, distance, elClass) {
+  var parentNode = el.parentNode;
+  if (!parentNode) {
+    return null;
+  }
+  var siblings = parentNode.querySelectorAll(elClass);
+  var index = Array.prototype.indexOf.call(siblings, el);
+  return siblings[index + distance] || null;
+};
+export var focusElement = function focusElement(el, options) {
+  if (!el || !el.focus) {
+    return;
+  }
+  var cleanup = false;
+  if (isHTMLElement(el) && !isFocusable(el) && !el.getAttribute('tabindex')) {
+    el.setAttribute('tabindex', '-1');
+    cleanup = true;
+  }
+  el.focus(options);
+  if (isHTMLElement(el) && cleanup) {
+    el.removeAttribute('tabindex');
+  }
+};
+export var focusNode = function focusNode(el) {
+  if (!el) {
+    return;
+  }
+  focusElement(el);
+  !isLeaf(el) && el.click();
+};

package/dist/hooks/useCalcInputWidth.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare function useCalcInputWidth(): {
+    calculatorRef: import("react").MutableRefObject<HTMLElement>;
+    calculatorWidth: number;
+    inputStyle: {
+        minWidth: string;
+    };
+};

package/dist/hooks/useCalcInputWidth.js

@@ -0,0 +1,30 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useMemo, useRef, useState } from 'react';
+import { useResizeObserver } from "./useResizeObserver";
+export function useCalcInputWidth() {
+  var calculatorRef = useRef();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    calculatorWidth = _useState2[0],
+    setCalculatorWidth = _useState2[1];
+  var inputStyle = useMemo(function () {
+    return {
+      minWidth: "".concat(Math.max(calculatorWidth, 11), "px")
+    };
+  }, [calculatorWidth]);
+  var resetCalculatorWidth = function resetCalculatorWidth() {
+    var _calculatorRef$curren, _calculatorRef$curren2;
+    setCalculatorWidth((_calculatorRef$curren = (_calculatorRef$curren2 = calculatorRef.current) === null || _calculatorRef$curren2 === void 0 ? void 0 : _calculatorRef$curren2.getBoundingClientRect().width) !== null && _calculatorRef$curren !== void 0 ? _calculatorRef$curren : 0);
+  };
+  useResizeObserver(calculatorRef, resetCalculatorWidth);
+  return {
+    calculatorRef: calculatorRef,
+    calculatorWidth: calculatorWidth,
+    inputStyle: inputStyle
+  };
+}

package/dist/hooks/useComposition.d.ts

@@ -0,0 +1,16 @@
+import { CompositionEvent } from 'react';
+interface UseCompositionOptions {
+    afterComposition: (event: CompositionEvent<HTMLInputElement>) => void;
+    compositionstart?: (evt: CompositionEvent<HTMLInputElement>) => void;
+    compositionupdate?: (evt: CompositionEvent<HTMLInputElement>) => void;
+    compositionend?: (evt: CompositionEvent<HTMLInputElement>) => void;
+}
+export declare function useComposition({ afterComposition, compositionstart, compositionupdate, compositionend }: UseCompositionOptions): {
+    isComposing: import("react").MutableRefObject<boolean>;
+    handleComposition: (event: CompositionEvent<HTMLInputElement>) => void;
+    handleCompositionStart: (event: CompositionEvent<HTMLInputElement>) => void;
+    handleCompositionUpdate: (event: CompositionEvent<HTMLInputElement>) => void;
+    handleCompositionEnd: (event: CompositionEvent<HTMLInputElement>) => void;
+};
+export declare const isKorean: (text: string) => boolean;
+export {};

package/dist/hooks/useComposition.js

@@ -0,0 +1,39 @@
+import { useRef } from 'react';
+export function useComposition(_ref) {
+  var afterComposition = _ref.afterComposition,
+    compositionstart = _ref.compositionstart,
+    compositionupdate = _ref.compositionupdate,
+    compositionend = _ref.compositionend;
+  var isComposing = useRef(false);
+  var handleCompositionStart = function handleCompositionStart(event) {
+    compositionstart === null || compositionstart === void 0 || compositionstart(event);
+    isComposing.current = true;
+  };
+  var handleCompositionUpdate = function handleCompositionUpdate(event) {
+    var _event$target;
+    compositionupdate === null || compositionupdate === void 0 || compositionupdate(event);
+    var text = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value;
+    var lastCharacter = text[text.length - 1] || '';
+    isComposing.current = !isKorean(lastCharacter);
+  };
+  var handleCompositionEnd = function handleCompositionEnd(event) {
+    compositionend === null || compositionend === void 0 || compositionend(event);
+    if (isComposing.current) {
+      isComposing.current = false;
+      afterComposition(event);
+    }
+  };
+  var handleComposition = function handleComposition(event) {
+    event.type === 'compositionend' ? handleCompositionEnd(event) : handleCompositionUpdate(event);
+  };
+  return {
+    isComposing: isComposing,
+    handleComposition: handleComposition,
+    handleCompositionStart: handleCompositionStart,
+    handleCompositionUpdate: handleCompositionUpdate,
+    handleCompositionEnd: handleCompositionEnd
+  };
+}
+export var isKorean = function isKorean(text) {
+  return /([\uAC00-\uD7AF\u3130-\u318F])+/gi.test(text);
+};

package/dist/hooks/useCursor.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function useCursor(input: RefObject<HTMLInputElement | undefined>): [() => void, () => void];

package/dist/hooks/useCursor.js

@@ -0,0 +1,52 @@
+// Keep input cursor in the correct position when we use formatter.
+export function useCursor(input) {
+  var selectionInfo;
+  function recordCursor() {
+    if (input.current == undefined) {
+      return;
+    }
+    var _input$current = input.current,
+      selectionStart = _input$current.selectionStart,
+      selectionEnd = _input$current.selectionEnd,
+      value = _input$current.value;
+    if (selectionStart == null || selectionEnd == null) {
+      return;
+    }
+    var beforeTxt = value.slice(0, Math.max(0, selectionStart));
+    var afterTxt = value.slice(Math.max(0, selectionEnd));
+    selectionInfo = {
+      selectionStart: selectionStart,
+      selectionEnd: selectionEnd,
+      value: value,
+      beforeTxt: beforeTxt,
+      afterTxt: afterTxt
+    };
+  }
+  function setCursor() {
+    if (input.current == undefined || selectionInfo == undefined) {
+      return;
+    }
+    var value = input.current.value;
+    var _selectionInfo = selectionInfo,
+      beforeTxt = _selectionInfo.beforeTxt,
+      afterTxt = _selectionInfo.afterTxt,
+      selectionStart = _selectionInfo.selectionStart;
+    if (beforeTxt == undefined || afterTxt == undefined || selectionStart == undefined) {
+      return;
+    }
+    var startPos = value.length;
+    if (value.endsWith(afterTxt)) {
+      startPos = value.length - afterTxt.length;
+    } else if (value.startsWith(beforeTxt)) {
+      startPos = beforeTxt.length;
+    } else {
+      var beforeLastChar = beforeTxt[selectionStart - 1];
+      var newIndex = value.indexOf(beforeLastChar, selectionStart - 1);
+      if (newIndex !== -1) {
+        startPos = newIndex + 1;
+      }
+    }
+    input.current.setSelectionRange(startPos, startPos);
+  }
+  return [recordCursor, setCursor];
+}

package/dist/hooks/useFocusController.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from 'react';
+interface UseFocusControllerOptions {
+    disabled?: boolean;
+    /**
+     * return true to cancel focus
+     * @param event FocusEvent
+     */
+    beforeFocus?: (event: FocusEvent) => boolean | undefined;
+    afterFocus?: () => void;
+    /**
+     * return true to cancel blur
+     * @param event FocusEvent
+     */
+    beforeBlur?: (event: FocusEvent) => boolean | undefined;
+    afterBlur?: () => void;
+}
+export declare function useFocusController<T extends {
+    focus: () => void;
+}>(target: RefObject<HTMLElement | undefined>, { disabled, beforeFocus, afterFocus, beforeBlur, afterBlur }?: UseFocusControllerOptions): {
+    isFocused: boolean;
+    /** Avoid using wrapperRef and handleFocus/handleBlur together */
+    wrapperRef: import("react").MutableRefObject<HTMLInputElement>;
+    handleFocus: (event: FocusEvent) => void;
+    handleBlur: (event: FocusEvent) => void;
+    handleClick: (event: Event) => void;
+};
+export {};

package/dist/hooks/useFocusController.js

@@ -0,0 +1,72 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import isFunction from 'lodash/isFunction';
+import { useRef, useState } from 'react';
+import { isFocusable } from "../Util/aria";
+export function useFocusController(target) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    disabled = _ref.disabled,
+    beforeFocus = _ref.beforeFocus,
+    afterFocus = _ref.afterFocus,
+    beforeBlur = _ref.beforeBlur,
+    afterBlur = _ref.afterBlur;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var wrapperRef = useRef(null);
+  var handleFocus = function handleFocus(event) {
+    var cancelFocus = isFunction(beforeFocus) ? beforeFocus(event) : false;
+    if (disabled || isFocused || cancelFocus) {
+      return;
+    }
+    setIsFocused(true);
+    // emit('focus', event);
+    afterFocus === null || afterFocus === void 0 || afterFocus();
+  };
+  var handleBlur = function handleBlur(event) {
+    var _wrapperRef$current;
+    var cancelBlur = isFunction(beforeBlur) ? beforeBlur(event) : false;
+    if (disabled || event.relatedTarget && (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(event.relatedTarget) || cancelBlur) {
+      return;
+    }
+    setIsFocused(false);
+
+    // emit('blur', event);
+    afterBlur === null || afterBlur === void 0 || afterBlur();
+  };
+  var handleClick = function handleClick(event) {
+    var _wrapperRef$current2, _target$current;
+    if (disabled || isFocusable(event.target) || (_wrapperRef$current2 = wrapperRef.current) !== null && _wrapperRef$current2 !== void 0 && _wrapperRef$current2.contains(document.activeElement) && wrapperRef.current !== document.activeElement) {
+      return;
+    }
+    (_target$current = target.current) === null || _target$current === void 0 || _target$current.focus();
+  };
+
+  // useMount(() => {
+  //     if (!wrapperRef.current) {
+  //         return;
+  //     }
+  //     wrapperRef.current.addEventListener('focus', handleFocus, true);
+  //     wrapperRef.current.addEventListener('blur', handleBlur, true);
+  //     wrapperRef.current.addEventListener('click', handleClick, true);
+  //     return () => {
+  //         wrapperRef.current?.removeEventListener('focus', handleFocus, true);
+  //         wrapperRef.current?.removeEventListener('blur', handleBlur, true);
+  //         wrapperRef.current?.removeEventListener('click', handleClick, true);
+  //     };
+  // });
+
+  return {
+    isFocused: isFocused,
+    /** Avoid using wrapperRef and handleFocus/handleBlur together */
+    wrapperRef: wrapperRef,
+    handleFocus: handleFocus,
+    handleBlur: handleBlur,
+    handleClick: handleClick
+  };
+}