@qsxy/element-plus-react 1.0.1 → 1.0.3

package/dist/DatePicker/DatePicker.js

@@ -16,11 +16,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import noop from 'lodash/noop';
 import omit from 'lodash/omit';
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Calendar, CalendarContext, initDate, toDayjs } from "../Calendar";
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
 import Icon from "../Icon/Icon";
 import Input from "../Input/Input";
 import Popper from "../Popper/Popper";
@@ -29,6 +32,7 @@ import { partitionAnimationProps, partitionHTMLProps, partitionPopperPropsUtils,
 import { namespace } from "../hooks/prefix";
 dayjs.extend(advancedFormat);
 dayjs.extend(weekOfYear);
+dayjs.extend(quarterOfYear);
 var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
   props = mergeDefaultProps({
     readonly: true,
@@ -67,6 +71,10 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
   var currentDate = useRef(null);
   var disabled = useDisabled(props.disabled);
   var size = useSize(props.size);
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _partitionHTMLProps = partitionHTMLProps(rest),
     _partitionHTMLProps2 = _slicedToArray(_partitionHTMLProps, 1),
     htmlInputProps = _partitionHTMLProps2[0];
@@ -89,6 +97,8 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
           return 'YYYY-MM';
         case 'week':
           return 'YYYY[w]ww';
+        case 'quarter':
+          return 'YYYY-[Q]Q';
         default:
           return 'YYYY-MM-DD';
       }
@@ -112,22 +122,34 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     } else {
       switch (type) {
         case 'year':
-          return '请选择年份';
+          return t('el.datepicker.placeholder.year', {
+            lng: locale
+          });
         case 'month':
-          return '请选择月份';
+          return t('el.datepicker.placeholder.month', {
+            lng: locale
+          });
         case 'week':
-          return '请选择周';
+          return t('el.datepicker.placeholder.week', {
+            lng: locale
+          });
+        case 'quarter':
+          return t('el.datepicker.placeholder.quarter', {
+            lng: locale
+          });
         default:
-          return '请选择日期';
+          return t('el.datepicker.placeholder.date', {
+            lng: locale
+          });
       }
     }
-  }, [props.placeholder, type]);
+  }, [locale, props.placeholder, t, type]);
 
   /** 日期参数转成dayjs对象 */
   var dateProp = useMemo(function () {
     var result = initDate();
     if (isNotEmpty(value)) {
-      if (type === 'week') {
+      if (type === 'week' || type === 'quarter') {
         if (currentDate.current) {
           result = currentDate.current;
         } else if (value instanceof Date) {
@@ -148,6 +170,10 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
           result = toDayjs(value, (_props$valueFormat2 = props.valueFormat) !== null && _props$valueFormat2 !== void 0 ? _props$valueFormat2 : format);
         }
       }
+      if (type === 'quarter') {
+        var quarter = result.quarter();
+        result = result.month((quarter - 1) * 3).date(1);
+      }
     }
     return result;
   }, [format, props.valueFormat, type, value]);
@@ -178,14 +204,14 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     setValue(val ? val.format(format) : '');
     currentDate.current = val;
     if (valueFormat == 'x') {
-      onChange(val ? val.toDate().getTime() : '');
+      onChange(val ? val.toDate().getTime() : '', formatValue);
     } else if (isNotEmpty(props.valueFormat)) {
-      onChange === null || onChange === void 0 || onChange(val ? val.format(valueFormat) : '');
+      onChange === null || onChange === void 0 || onChange(val ? val.format(valueFormat) : '', formatValue);
     } else {
-      onChange === null || onChange === void 0 || onChange(val ? val.toDate() : '');
+      onChange === null || onChange === void 0 || onChange(val ? val.toDate() : '', formatValue);
     }
     setVisible(false);
-  }, [format, onChange, props.valueFormat, setValue, valueFormat]);
+  }, [format, formatValue, onChange, props.valueFormat, setValue, valueFormat]);
   useImperativeHandle(ref, function () {
     return {
       input: inputRef,
@@ -220,7 +246,7 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     onClear: function onClear() {
       return handleChange === null || handleChange === void 0 ? void 0 : handleChange(null);
     },
-    className: classNames(_defineProperty(_defineProperty({}, "".concat(namespace, "-date"), readonly), 'is-active', visible)),
+    className: classNames(_defineProperty(_defineProperty({}, "".concat(namespace, "-date"), readonly), 'is-focus', visible)),
     style: props.style,
     error: error,
     warning: warning,
@@ -228,7 +254,7 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     append: append,
     plain: plain,
     size: size
-  }, omit(htmlInputProps, ['style', 'prefix', 'readOnly', 'size', 'onClick', 'onInput', 'onChange', 'disabled', 'className', 'type', 'maxLength', 'minLength', 'name']))), /*#__PURE__*/React.createElement(Popper, _extends({
+  }, omit(htmlInputProps, ['value', 'defaultValue', 'style', 'prefix', 'readOnly', 'size', 'onClick', 'onInput', 'onChange', 'disabled', 'className', 'type', 'maxLength', 'minLength', 'name']))), /*#__PURE__*/React.createElement(Popper, _extends({
     visible: visible,
     referenceElement: function referenceElement() {
       var _inputRef$current;

package/dist/DatePicker/DateRangePicker.js

@@ -19,7 +19,9 @@ import head from 'lodash/head';
 import last from 'lodash/last';
 import noop from 'lodash/noop';
 import React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Calendar, CalendarContext, initDateRange, toDayjs } from "../Calendar";
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
 import Icon from "../Icon/Icon";
 import { InputGroup } from "../Input";
 import Popper from "../Popper/Popper";
@@ -72,6 +74,10 @@ var DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props
   var endInputRef = useRef(null);
   var disabled = useDisabled(props.disabled);
   var size = useSize(props.size);
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
 
   /** 没有指定格式时，根据日期类型初始格式 */
   var format = useMemo(function () {
@@ -110,14 +116,20 @@ var DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props
     } else {
       switch (props.type) {
         case 'monthrange':
-          return '开始月份';
+          return t('el.datepicker.startMonth', {
+            lng: locale
+          });
         case 'yearrange':
-          return '开始年份';
+          return t('el.datepicker.startYear', {
+            lng: locale
+          });
         default:
-          return '开始日期';
+          return t('el.datepicker.startDate', {
+            lng: locale
+          });
       }
     }
-  }, [props.startPlaceholder, props.type]);
+  }, [locale, props.startPlaceholder, props.type, t]);
 
   /** 根据日期类型设定占位符 */
   var endPlaceholder = useMemo(function () {
@@ -126,14 +138,20 @@ var DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props
     } else {
       switch (props.type) {
         case 'monthrange':
-          return '结束月份';
+          return t('el.datepicker.endMonth', {
+            lng: locale
+          });
         case 'yearrange':
-          return '结束年份';
+          return t('el.datepicker.endYear', {
+            lng: locale
+          });
         default:
-          return '结束日期';
+          return t('el.datepicker.endDate', {
+            lng: locale
+          });
       }
     }
-  }, [props.endPlaceholder, props.type]);
+  }, [locale, props.endPlaceholder, props.type, t]);
 
   /** 日期参数转成dayjs对象 */
   var dateProp = useMemo(function () {
@@ -213,7 +231,7 @@ var DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props
   var content = useMemo(function () {
     return /*#__PURE__*/React.createElement("div", {
       className: classNames(b('date-editor', 'date-editor--daterange', false), b(_templateObject || (_templateObject = _taggedTemplateLiteral(["editor"]))), be('input', 'wrapper', false), be('tooltip', 'trigger', false), _defineProperty({}, bm('editor', size), size), is({
-        active: visible,
+        focus: visible,
         disabled: disabled,
         error: error,
         warning: warning

package/dist/DatePicker/main.js

@@ -6,7 +6,7 @@ import DateRangePicker from "./DateRangePicker";
 var Index = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$type = props.type,
     type = _props$type === void 0 ? 'date' : _props$type;
-  if (['year', 'years', 'month', 'months', 'date', 'dates', 'week'].includes(type)) {
+  if (['year', 'years', 'month', 'months', 'date', 'dates', 'week', 'quarter'].includes(type)) {
     return /*#__PURE__*/React.createElement(DatePicker, _extends({
       ref: ref
     }, props));

package/dist/DatePicker/typings.d.ts

@@ -53,7 +53,7 @@ export interface DatePickerProps extends Omit<FormControlBaseProps, 'name' | 'va
     appendToBody?: boolean;
     /** 点击确定按钮的回调 */
     onOk?: () => void;
-    onChange?: (value: string | Date | number, event?: Event) => void;
+    onChange?: (value: string | Date | number, formatDate?: string) => void;
     /** 格式化 */
     formatter?: (value: Dayjs, text: number) => React.ReactElement;
 }

package/dist/DateTimePicker/DateTimePicker.js

@@ -195,7 +195,7 @@ var DateTimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props,
       }
     },
     className: classNames(_defineProperty({}, b('date', false), readonly), is({
-      active: visible
+      focus: visible
     })),
     style: props.style,
     error: error,
@@ -203,7 +203,7 @@ var DateTimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props,
     prepend: prepend,
     append: append,
     plain: props.plain
-  }, omit(htmlInputProps, ['style', 'prefix', 'readOnly', 'disabled', 'size', 'onInput', 'onClick', 'onChange', 'className', 'type', 'maxLength', 'minLength', 'name']))), /*#__PURE__*/React.createElement(Popper, _extends({
+  }, omit(htmlInputProps, ['value', 'defaultValue', 'style', 'prefix', 'readOnly', 'disabled', 'size', 'onInput', 'onClick', 'onChange', 'className', 'type', 'maxLength', 'minLength', 'name']))), /*#__PURE__*/React.createElement(Popper, _extends({
     visible: visible,
     referenceElement: function referenceElement() {
       var _inputRef$current;

package/dist/Dialog/Dialog.js

@@ -14,7 +14,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
 import { addClass, removeClass } from 'dom-lib';
-import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import Transition from "../Transition/Transition";
 import { PopupManager, addUnit } from "../Util";
@@ -73,6 +73,9 @@ function InternalElDialog(props, ref) {
   // const backdropRef = useRef<HTMLDivElement>(null);
   var overlayRef = useRef(null);
   var headerRef = useRef(null);
+  var nextZIndex = useMemo(function () {
+    return zIndex || PopupManager.nextZIndex();
+  }, [zIndex]);
   useDraggable(dialogRef, headerRef, draggable, overflow);
 
   /** 获取子组件 */
@@ -146,16 +149,6 @@ function InternalElDialog(props, ref) {
       });
     }
   }, [b, modal, beforeClose, doClose, ref, setVisible, visible, closeOnClickModal]);
-
-  // useEffect(() => {
-  //     document.addEventListener('keydown', keydown, false);
-  //     console.log(PopupManager.zIndex);
-  //     return () => {
-  //         console.log(PopupManager.zIndex);
-  //         document.removeEventListener('keydown', keydown, false);
-  //     };
-  // }, [keydown]);
-
   useEffect(function () {
     getInstancesFromChildren(children);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -225,7 +218,7 @@ function InternalElDialog(props, ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(b('overlay', false), props.className),
     style: {
-      zIndex: zIndex || PopupManager.nextZIndex()
+      zIndex: nextZIndex
     },
     ref: wrapperRef
   }, /*#__PURE__*/React.createElement("div", {