@qsxy/element-plus-react 1.0.0-next.21 → 1.0.0-next.22

package/dist/Radio/Radio.js

@@ -131,8 +131,9 @@ var InternalRadio = function InternalRadio(props, ref) {
     }, /*#__PURE__*/React.createElement("input", _extends({
       key: name
     }, htmlInputProps, {
-      name: name,
-      value: value,
+      name: name
+      // value={value}
+      ,
       type: "radio",
       ref: inputRef,
       className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["hidden"]))),
@@ -149,7 +150,7 @@ var InternalRadio = function InternalRadio(props, ref) {
     })), /*#__PURE__*/React.createElement("span", {
       className: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["label"])))
     }, children));
-  }, [b, checked, children, className, disabled, e, handleChange, htmlInputProps, is, m, name, readOnly, size, tooltipEvents, value]);
+  }, [b, checked, children, className, disabled, e, handleChange, htmlInputProps, is, m, name, readOnly, size, tooltipEvents]);
   if (plaintext) {
     return checked ? /*#__PURE__*/React.createElement("div", _extends({}, tooltipEvents, {
       ref: containerRef,

package/dist/Radio/RadioButton.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { RadioProps, RadioRef } from './typings';
-declare const RadioButton: React.ForwardRefExoticComponent<RadioProps<string | number | readonly string[]> & React.RefAttributes<RadioRef>>;
+declare const RadioButton: React.ForwardRefExoticComponent<RadioProps<import("./typings").ValueType> & React.RefAttributes<RadioRef>>;
 export default RadioButton;

package/dist/Radio/RadioButton.js

@@ -116,8 +116,9 @@ var RadioButton = /*#__PURE__*/forwardRef(function (props, ref) {
   }), /*#__PURE__*/React.createElement("input", _extends({
     key: name
   }, htmlInputProps, {
-    name: name,
-    value: value,
+    name: name
+    // value={value}
+    ,
     type: "radio",
     ref: inputRef,
     className: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["original-radio"]))),

package/dist/Radio/typings.d.ts

@@ -1,6 +1,6 @@
 import React, { RefObject } from 'react';
 import { BaseProps, FormControlBaseProps, NativeProps } from '../types/common';
-export type ValueType = React.AllHTMLAttributes<HTMLInputElement>['value'];
+export type ValueType = string | number | boolean;
 export type RadioRef = {
     ref: RefObject<HTMLSpanElement>;
     input: HTMLInputElement;

package/dist/Tooltip/Tooltip.js

@@ -108,7 +108,9 @@ var Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
       },
       onOpen: handleMouseEnter,
       onClose: handleMouseLeave,
-      hide: handleMouseLeave
+      hide: function hide() {
+        setVisible(false);
+      }
     };
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, Children.map(filterChildren, function (child) {

package/dist/Transition/CssTransiton.d.ts

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import { BaseProps, NativeProps } from '../types/common';
+export interface CssTransitonProps extends BaseProps<React.ReactElement>, NativeProps {
+}
+export declare enum STATUS {
+    UNMOUNTED = 0,
+    BEFORE_ENTER = 1,
+    ENTER = 2,
+    AFTER_ENTER = 3,
+    BEFORE_LEAVE = 4,
+    LEAVE = 5,
+    AFTER_LEAVE = 6
+}
+declare const CssTransiton: FC<CssTransitonProps>;
+export default CssTransiton;

package/dist/Transition/CssTransiton.js

@@ -0,0 +1,29 @@
+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 { useComposeRef } from 'rc-util';
+import React from 'react';
+export var STATUS = /*#__PURE__*/function (STATUS) {
+  STATUS[STATUS["UNMOUNTED"] = 0] = "UNMOUNTED";
+  STATUS[STATUS["BEFORE_ENTER"] = 1] = "BEFORE_ENTER";
+  STATUS[STATUS["ENTER"] = 2] = "ENTER";
+  STATUS[STATUS["AFTER_ENTER"] = 3] = "AFTER_ENTER";
+  STATUS[STATUS["BEFORE_LEAVE"] = 4] = "BEFORE_LEAVE";
+  STATUS[STATUS["LEAVE"] = 5] = "LEAVE";
+  STATUS[STATUS["AFTER_LEAVE"] = 6] = "AFTER_LEAVE";
+  return STATUS;
+}({});
+var CssTransiton = function CssTransiton(props) {
+  var _props$children$props;
+  var _React$useState = React.useState(STATUS.UNMOUNTED),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    status = _React$useState2[0],
+    setStatus = _React$useState2[1];
+  var nodeRef = React.useRef(null);
+  var mergedRef = useComposeRef(nodeRef, (_props$children$props = props.children.props) === null || _props$children$props === void 0 ? void 0 : _props$children$props.ref);
+  return /*#__PURE__*/React.cloneElement(props.children);
+};
+export default CssTransiton;

package/dist/Transition/Transition.d.ts

@@ -19,6 +19,8 @@ export interface TransitionProps extends AnimationEventProps {
     /** Additional classes */
     className?: string;
     name?: string;
+    disabled?: boolean;
+    cssTransition?: boolean;
     display?: string;
     /** Show the component; triggers the enter or exit animation */
     visible?: boolean;

package/dist/Transition/Transition.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "name"];
+var _excluded = ["children", "className", "name", "disabled", "cssTransition"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -247,7 +247,12 @@ var Transition = /*#__PURE__*/function (_Component) {
         children = _this$props5.children,
         className = _this$props5.className,
         name = _this$props5.name,
+        disabled = _this$props5.disabled,
+        cssTransition = _this$props5.cssTransition,
         rest = _objectWithoutProperties(_this$props5, _excluded);
+      if (disabled) {
+        return children;
+      }
       var childProps = omit(rest, ['animation', 'className', 'visible', 'unmountOnExit', 'transitionAppear', 'duration', 'beforeEnter', 'onEnter', 'afterEnter', 'beforeLeave', 'onLeave', 'afterLeave', 'nodeRef']);
       var transitionClassName;
       if (name) {
@@ -277,7 +282,7 @@ var Transition = /*#__PURE__*/function (_Component) {
           // @ts-ignore
           className: classNames(className, (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className, transitionClassName),
           style: _objectSpread(_objectSpread({}, ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.style) || {}), {}, {
-            display: _this5.state.status > 1 ? (_this5$props$display = _this5.props.display) !== null && _this5$props$display !== void 0 ? _this5$props$display : 'block' : 'none'
+            display: _this5.state.status > 1 || cssTransition ? (_this5$props$display = _this5.props.display) !== null && _this5$props$display !== void 0 ? _this5$props$display : 'block' : 'none'
           })
         }));
       });

package/dist/hooks/useCssTransiton.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface CssTransitonProps {
+    nodeRef: React.RefObject<HTMLElement>;
+    visible: boolean;
+    disabled?: boolean;
+    duration?: number;
+    beforeLeave?: (el: HTMLElement) => void;
+    onLeave?: (el: HTMLElement) => void;
+    afterLeave?: (el: HTMLElement) => void;
+    beforeEnter?: (el: HTMLElement) => void;
+    onEnter?: (el: HTMLElement, done?: () => void) => void;
+    afterEnter?: (el: HTMLElement) => void;
+    done?: () => void;
+}
+export declare enum STATUS {
+    UNMOUNTED = 0,
+    BEFORE_LEAVE = 1,
+    LEAVE = 2,
+    AFTER_LEAVE = 3,
+    BEFORE_ENTER = 4,
+    ENTER = 5,
+    AFTER_ENTER = 6
+}
+declare const useCssTransiton: (props: CssTransitonProps) => {
+    mounted: boolean;
+};
+export default useCssTransiton;

package/dist/hooks/useCssTransiton.js

@@ -0,0 +1,87 @@
+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 { addStyle } from 'dom-lib';
+import { useCallback, useEffect, useState } from 'react';
+export var STATUS = /*#__PURE__*/function (STATUS) {
+  STATUS[STATUS["UNMOUNTED"] = 0] = "UNMOUNTED";
+  STATUS[STATUS["BEFORE_LEAVE"] = 1] = "BEFORE_LEAVE";
+  STATUS[STATUS["LEAVE"] = 2] = "LEAVE";
+  STATUS[STATUS["AFTER_LEAVE"] = 3] = "AFTER_LEAVE";
+  STATUS[STATUS["BEFORE_ENTER"] = 4] = "BEFORE_ENTER";
+  STATUS[STATUS["ENTER"] = 5] = "ENTER";
+  STATUS[STATUS["AFTER_ENTER"] = 6] = "AFTER_ENTER";
+  return STATUS;
+}({});
+var useCssTransiton = function useCssTransiton(props) {
+  var nodeRef = props.nodeRef,
+    visible = props.visible,
+    disabled = props.disabled,
+    _props$duration = props.duration,
+    duration = _props$duration === void 0 ? 250 : _props$duration,
+    beforeLeave = props.beforeLeave,
+    onLeave = props.onLeave,
+    afterLeave = props.afterLeave,
+    beforeEnter = props.beforeEnter,
+    onEnter = props.onEnter,
+    afterEnter = props.afterEnter,
+    done = props.done;
+  var _useState = useState(STATUS.UNMOUNTED),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    mounted = _useState4[0],
+    setMounted = _useState4[1];
+  var startCssTransition = useCallback(function () {
+    setStatus(STATUS.BEFORE_LEAVE);
+  }, []);
+  useEffect(function () {
+    if (!disabled) {
+      if (mounted) {
+        startCssTransition();
+      } else {
+        setMounted(true);
+        done === null || done === void 0 || done();
+      }
+    } else {
+      done === null || done === void 0 || done();
+    }
+  }, [visible]);
+  useEffect(function () {
+    if (status === STATUS.BEFORE_LEAVE) {
+      beforeLeave === null || beforeLeave === void 0 || beforeLeave(nodeRef.current);
+      setStatus(STATUS.LEAVE);
+    } else if (status === STATUS.LEAVE) {
+      onLeave === null || onLeave === void 0 || onLeave(nodeRef.current);
+      setStatus(STATUS.AFTER_LEAVE);
+    } else if (status === STATUS.AFTER_LEAVE) {
+      setTimeout(function () {
+        afterLeave === null || afterLeave === void 0 || afterLeave(nodeRef.current);
+        setStatus(STATUS.BEFORE_ENTER);
+        addStyle(nodeRef.current, {
+          display: 'none'
+        });
+      }, duration);
+    } else if (status === STATUS.BEFORE_ENTER) {
+      beforeEnter === null || beforeEnter === void 0 || beforeEnter(nodeRef.current);
+      setStatus(STATUS.ENTER);
+    } else if (status === STATUS.ENTER) {
+      addStyle(nodeRef.current, {
+        display: ''
+      });
+      onEnter === null || onEnter === void 0 || onEnter(nodeRef.current, done);
+      setStatus(STATUS.AFTER_ENTER);
+    } else if (status === STATUS.AFTER_ENTER) {
+      afterEnter === null || afterEnter === void 0 || afterEnter(nodeRef.current);
+    }
+  }, [status]);
+  return {
+    mounted: mounted
+  };
+};
+export default useCssTransiton;

package/dist/hooks/useResizeObserver.d.ts

@@ -0,0 +1,42 @@
+import { RefObject } from 'react';
+export interface ResizeObserverSize {
+    readonly inlineSize: number;
+    readonly blockSize: number;
+}
+export interface ResizeObserverEntry {
+    readonly target: Element;
+    readonly contentRect: DOMRectReadOnly;
+    readonly borderBoxSize: ReadonlyArray<ResizeObserverSize>;
+    readonly contentBoxSize: ReadonlyArray<ResizeObserverSize>;
+    readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>;
+}
+export type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver) => void;
+export interface UseResizeObserverOptions {
+    /**
+     * Sets which box model the observer will observe changes to. Possible values
+     * are `content-box` (the default), `border-box` and `device-pixel-content-box`.
+     *
+     * @default 'content-box'
+     */
+    box?: ResizeObserverBoxOptions;
+    window?: Window;
+}
+declare class ResizeObserver {
+    constructor(callback: ResizeObserverCallback);
+    disconnect(): void;
+    observe(target: Element, options?: UseResizeObserverOptions): void;
+    unobserve(target: Element): void;
+}
+/**
+ * Reports changes to the dimensions of an Element's content or the border-box
+ *
+ * @param target
+ * @param callback
+ * @param options
+ */
+export declare function useResizeObserver(target: RefObject<HTMLElement>, callback: ResizeObserverCallback, options?: UseResizeObserverOptions): {
+    isSupported: boolean;
+    stop: () => void;
+};
+export type UseResizeObserverReturn = ReturnType<typeof useResizeObserver>;
+export {};

package/dist/hooks/useResizeObserver.js

@@ -0,0 +1,42 @@
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+import { useEffect, useMemo } from 'react';
+/**
+ * Reports changes to the dimensions of an Element's content or the border-box
+ *
+ * @param target
+ * @param callback
+ * @param options
+ */
+export function useResizeObserver(target, callback) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var observerOptions = Object.assign({}, (_objectDestructuringEmpty(options), options));
+  var observer;
+  var isSupported = useMemo(function () {
+    return window && 'ResizeObserver' in window;
+  }, []);
+  var cleanup = function cleanup() {
+    if (observer) {
+      observer.disconnect();
+      observer = undefined;
+    }
+  };
+  var stop = function stop() {
+    cleanup();
+  };
+  useEffect(function () {
+    cleanup();
+    if (isSupported && window) {
+      observer = new ResizeObserver(callback);
+      if (target.current) {
+        observer.observe(target.current, observerOptions);
+      }
+    }
+    return function () {
+      cleanup();
+    };
+  }, []);
+  return {
+    isSupported: isSupported,
+    stop: stop
+  };
+}