@qsxy/element-plus-react 1.0.1 → 1.0.3

package/dist/Notification/Notification.js

@@ -2,10 +2,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 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); }
@@ -15,9 +15,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import Icon from "../Icon/Icon";
 import Transition from "../Transition/Transition";
 import { PopupManager, mergeDefaultProps } from "../Util";
-import { EVENT_CODE, TypeMap } from "../config/Constants";
+import { EVENT_CODE, TypeComponentsMap } from "../config/Constants";
 import { useClassNames } from "../hooks";
 var Notification = /*#__PURE__*/forwardRef(function (props, ref) {
   props = mergeDefaultProps({
@@ -48,6 +49,7 @@ var Notification = /*#__PURE__*/forwardRef(function (props, ref) {
     afterLeave = _props.afterLeave;
   var _useClassNames = useClassNames(classPrefix),
     b = _useClassNames.b,
+    m = _useClassNames.m,
     e = _useClassNames.e;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -61,7 +63,12 @@ var Notification = /*#__PURE__*/forwardRef(function (props, ref) {
   var timer = useRef(null);
   var notificationRef = useRef(null);
   var contentRef = useRef(null);
-  var verticalProperty = position.startsWith('top') ? 'top' : 'bottom';
+  var horizontalProperty = useMemo(function () {
+    return position.endsWith('right') ? 'right' : 'left';
+  }, [position]);
+  var verticalProperty = useMemo(function () {
+    return position.startsWith('top') ? 'top' : 'bottom';
+  }, [position]);
   var handleClose = useCallback(function () {
     setVisible(false);
     onClose === null || onClose === void 0 || onClose();
@@ -124,20 +131,20 @@ var Notification = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
-
-  /** 前缀图标 */
-  var typeClass = useMemo(function () {
-    var _type = !iconClass && type;
-    return _type && TypeMap[_type] ? b("icon-".concat(TypeMap[_type]), false) : '';
-  }, [b, iconClass, type]);
+  var positionStyle = useMemo(function () {
+    return _defineProperty(_defineProperty({}, verticalProperty, "".concat(offset, "px")), "zIndex", PopupManager.nextZIndex());
+  }, [offset, verticalProperty]);
 
   /** 关闭图标 */
+  // const closeIcon = useMemo(() => showClose && <div className={classNames(e`closeBtn`, b('icon-close', false))} onClick={handleClose} />, [showClose, e, b, handleClose]);
   var closeIcon = useMemo(function () {
-    return showClose && /*#__PURE__*/React.createElement("div", {
-      className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["closeBtn"]))), b('icon-close', false)),
+    return showClose && /*#__PURE__*/React.createElement(Icon, {
+      name: "xmark",
+      prefix: "fal",
+      className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["closeBtn"])))),
       onClick: handleClose
     });
-  }, [showClose, e, b, handleClose]);
+  }, [showClose, e, handleClose]);
   return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
     nodeRef: notificationRef,
     name: b('notification-fade', false),
@@ -146,19 +153,19 @@ var Notification = /*#__PURE__*/forwardRef(function (props, ref) {
     afterLeave: afterLeave
   }, /*#__PURE__*/React.createElement("div", {
     ref: notificationRef,
-    className: classNames(b(), position.indexOf('right') > 1 ? 'right' : 'left', props.className),
-    style: _objectSpread(_defineProperty(_defineProperty({}, verticalProperty, offset), "zIndex", PopupManager.nextZIndex()), props.style)
+    className: classNames(b(), horizontalProperty, props.className),
+    style: _objectSpread(_objectSpread({}, props.style), positionStyle)
     // 鼠标悬浮停止自动关闭
     ,
     onMouseEnter: clearTimer,
     onMouseLeave: startTimer,
     onClick: props.onClick
-  }, (type || iconClass) && /*#__PURE__*/React.createElement("i", {
-    className: classNames(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["icon"]))), typeClass, iconClass)
+  }, (type || iconClass) && /*#__PURE__*/React.createElement(Icon, {
+    name: TypeComponentsMap[type],
+    prefix: "fas",
+    className: classNames(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["icon"]))), _defineProperty({}, m(type), type && TypeComponentsMap[type]), iconClass)
   }), /*#__PURE__*/React.createElement("div", {
-    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["group"]))), {
-      'is-with-icon': typeClass || iconClass
-    })
+    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["group"]))))
   }, /*#__PURE__*/React.createElement("h2", {
     className: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["title"])))
   }, title), /*#__PURE__*/React.createElement("div", {

package/dist/Select/Option.js

@@ -14,7 +14,9 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     hoverValue = _useContext.hover,
     setHover = _useContext.setHover,
     multiple = _useContext.multiple;
-  var label = props.label,
+  var value = props.value,
+    label = props.label,
+    data = props.data,
     disabled = props.disabled,
     onClick = props.onClick;
 
@@ -22,31 +24,45 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
   var handleOnClick = useCallback(function (event) {
     event.stopPropagation();
     if (!disabled) {
-      onChoose(props.value, label || props.value + '', event);
-      onClick === null || onClick === void 0 || onClick(props.value, label || props.value.toString(), event);
+      onChoose(value, {
+        value: value,
+        label: label,
+        data: data
+      }, event);
+      onClick === null || onClick === void 0 || onClick(value, {
+        value: value,
+        label: label,
+        data: data
+      });
     }
-  }, [disabled, onChoose, props.value, label, onClick]);
+  }, [disabled, onChoose, value, label, data, onClick]);
 
   /** 是否已选中 */
   var selected = useMemo(function () {
     if (multiple && selectedValue instanceof Array) {
-      return selectedValue.includes(props.value);
+      return selectedValue.includes(value);
     }
-    return props.value === selectedValue;
-  }, [multiple, props.value, selectedValue]);
+    return value === selectedValue;
+  }, [multiple, value, selectedValue]);
+
+  // useEffect(() => {
+  //     onOptionCreate?.(value, { value, label, data });
+  //     return () => {
+  //         onOptionDestroy?.(value);
+  //     };
+  // }, []);
+
   return /*#__PURE__*/React.createElement("li", {
     className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["item"]))), is({
-      disabled: disabled
-    }), {
+      disabled: disabled,
       selected: selected,
-      hover: props.value === hoverValue
-    }, props.className),
+      hovering: value === hoverValue
+    }), props.className),
     style: props.style,
-    title: label,
-    key: props.value,
+    title: label + '',
     onClick: handleOnClick,
     onMouseEnter: function onMouseEnter() {
-      return setHover(props.value);
+      return setHover(value);
     },
     onMouseLeave: function onMouseLeave() {
       return setHover(selectedValue);

package/dist/Select/SelectContext.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-import { ValueType } from './typings';
-interface SelectContextProps {
+import { RefObject } from 'react';
+import { OptionData, OptionValue, ValueType } from './typings';
+export interface SelectContextProps {
     value: ValueType;
     hover: ValueType;
     setHover: (value: ValueType) => void;
-    onChoose: (value: string | number, label: string, e: any) => void;
+    onChoose: (value: OptionValue, data: OptionData, e: any) => void;
     multiple: boolean;
+    cachedOptions: RefObject<Map<OptionValue, OptionData>>;
 }
 export declare const SelectContext: import("react").Context<SelectContextProps>;
-export {};

package/dist/Select/SelectContext.js

@@ -5,5 +5,6 @@ export var SelectContext = /*#__PURE__*/createContext({
   hover: '',
   setHover: noop,
   onChoose: noop,
-  multiple: false
+  multiple: false,
+  cachedOptions: null
 });

package/dist/Select/SelectCore.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { SelectProps, SelectRef, ValueType } from './typings';
-declare const SelectCore: React.ForwardRefExoticComponent<SelectProps<ValueType> & React.RefAttributes<SelectRef>>;
+import { SelectProps, SelectRef } from './typings';
+declare const SelectCore: React.ForwardRefExoticComponent<SelectProps<import("./typings").ValueType> & React.RefAttributes<SelectRef>>;
 export default SelectCore;