npm - @nutui/nutui-react - Versions diffs - 2.0.0-alpha.9 → 2.0.0-beta.1 - Mend

@nutui/nutui-react 2.0.0-alpha.9 → 2.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1244) hide show

package/dist/esm/Picker.js CHANGED Viewed

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["visible", "title", "options", "defaultValue", "className", "style", "threeDimensional", "duration", "onConfirm", "onClose", "afterClose", "onChange"];
+var _excluded = ["children", "visible", "title", "options", "defaultValue", "className", "style", "threeDimensional", "duration", "onConfirm", "onClose", "afterClose", "onChange"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -241,7 +241,6 @@ function useRefs() {
   return [refs.current, setRefs, reset];
 }
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  visible: false,
   title: "",
   options: [],
   value: [],
@@ -251,7 +250,7 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
 });
 var InternalPicker = function InternalPicker2(props, ref) {
   var _useConfig = useConfig(), locale = _useConfig.locale;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), visible = _defaultProps$props.visible, title = _defaultProps$props.title, _defaultProps$props$o = _defaultProps$props.options, options = _defaultProps$props$o === void 0 ? [] : _defaultProps$props$o, _defaultProps$props$d = _defaultProps$props.defaultValue, defaultValue = _defaultProps$props$d === void 0 ? [] : _defaultProps$props$d, className = _defaultProps$props.className, style = _defaultProps$props.style, threeDimensional = _defaultProps$props.threeDimensional, duration = _defaultProps$props.duration, onConfirm = _defaultProps$props.onConfirm, onClose = _defaultProps$props.onClose, afterClose = _defaultProps$props.afterClose, onChange = _defaultProps$props.onChange, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, visible = _defaultProps$props.visible, title = _defaultProps$props.title, _defaultProps$props$o = _defaultProps$props.options, options = _defaultProps$props$o === void 0 ? [] : _defaultProps$props$o, _defaultProps$props$d = _defaultProps$props.defaultValue, defaultValue = _defaultProps$props$d === void 0 ? [] : _defaultProps$props$d, className = _defaultProps$props.className, style = _defaultProps$props.style, threeDimensional = _defaultProps$props.threeDimensional, duration = _defaultProps$props.duration, onConfirm = _defaultProps$props.onConfirm, onClose = _defaultProps$props.onClose, afterClose = _defaultProps$props.afterClose, onChange = _defaultProps$props.onChange, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   var classPrefix = "nut-picker";
   var classes = classNames(classPrefix, className);
   var _usePropsValue = usePropsValue({
@@ -263,11 +262,28 @@ var InternalPicker = function InternalPicker2(props, ref) {
       (_props$onConfirm = props.onConfirm) === null || _props$onConfirm === void 0 ? void 0 : _props$onConfirm.call(props, setSelectedOptions(), val);
     }
   }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), selectedValue = _usePropsValue2[0], setSelectedValue = _usePropsValue2[1];
-  var _useState13 = useState(0), _useState14 = _slicedToArray(_useState13, 2), columnIndex = _useState14[0], setColumnIndex = _useState14[1];
+  var _usePropsValue3 = usePropsValue({
+    value: props.visible,
+    defaultValue: false,
+    finalValue: false
+  }), _usePropsValue4 = _slicedToArray(_usePropsValue3, 2), innerVisible = _usePropsValue4[0], setInnerVisible = _usePropsValue4[1];
+  var _useState13 = useState(selectedValue), _useState14 = _slicedToArray(_useState13, 2), innerValue = _useState14[0], setInnerValue = _useState14[1];
+  var _useState15 = useState(0), _useState16 = _slicedToArray(_useState15, 2), columnIndex = _useState16[0], setColumnIndex = _useState16[1];
   var pickerRef = useRef(null);
   var _useRefs = useRefs(), _useRefs2 = _slicedToArray(_useRefs, 2), refs = _useRefs2[0], setRefs = _useRefs2[1];
-  var _useState15 = useState([]), _useState16 = _slicedToArray(_useState15, 2), columnsList = _useState16[0], setColumnsList = _useState16[1];
+  var _useState17 = useState([]), _useState18 = _slicedToArray(_useState17, 2), columnsList = _useState18[0], setColumnsList = _useState18[1];
   var isConfirmEvent = useRef(false);
+  var actions = {
+    open: function open() {
+      setInnerVisible(true);
+    },
+    close: function close() {
+      setInnerVisible(false);
+    }
+  };
+  useImperativeHandle(ref, function() {
+    return actions;
+  });
   var formatCascade = function formatCascade2(columns, values) {
     var formatted = [];
     var columnOptions = {
@@ -305,41 +321,46 @@ var InternalPicker = function InternalPicker2(props, ref) {
     }
     return "single";
   };
-  var normalListData = function normalListData2() {
+  var normalListData = function normalListData2(innerValue2) {
     var type = columnsType();
     switch (type) {
       case "multiple":
         return options;
       case "cascade":
-        return formatCascade(options, selectedValue);
+        return formatCascade(options, innerValue2);
       default:
         return [options];
     }
   };
   var init = function init2() {
-    var normalData = normalListData();
+    var normalData = normalListData(innerValue);
     setColumnsList(normalData);
     var data = [];
     normalData.length > 0 && normalData.map(function(item) {
       item[0] && data.push(item[0].value);
       return item;
     });
-    if (!defaultValue.length && selectedValue.length === 0) {
-      setSelectedValue([].concat(data));
+    if (!innerValue.length && innerValue.length === 0) {
+      setInnerValue([].concat(data));
     }
   };
   useEffect(function() {
-    if (!visible) {
-      return;
+    setInnerValue(innerValue !== selectedValue ? selectedValue : innerValue);
+  }, [innerVisible]);
+  useEffect(function() {
+    if (innerVisible) {
+      init();
     }
-    init();
-  }, [options, visible]);
+  }, [options, innerVisible]);
+  useEffect(function() {
+    onChange && onChange(setSelectedOptions(), innerValue, columnIndex);
+  }, [innerValue, columnsList]);
   var setSelectedOptions = function setSelectedOptions2() {
     var options2 = [];
     var currOptions = [];
     columnsList.forEach(function(columnOptions, index) {
       currOptions = columnOptions.filter(function(item) {
-        return item.value === selectedValue[index];
+        return item.value === innerValue[index];
       });
       if (currOptions[0]) {
         options2.push(currOptions[0]);
@@ -349,37 +370,28 @@ var InternalPicker = function InternalPicker2(props, ref) {
     });
     return options2;
   };
-  useEffect(function() {
-    if (!visible) {
-      return;
-    }
-    onChange && onChange(setSelectedOptions(), selectedValue, columnIndex);
-    if (isConfirmEvent.current) {
-      isConfirmEvent.current = false;
-      onConfirm && onConfirm(setSelectedOptions(), selectedValue);
-    }
-  }, [selectedValue, columnsList, visible]);
   var _chooseItem = function chooseItem(columnOptions, columnIndex2) {
+    var values = [];
+    var start = columnIndex2;
     if (columnOptions && Object.keys(columnOptions).length) {
-      if (selectedValue[columnIndex2] !== columnOptions.value) {
+      if (values[columnIndex2] !== columnOptions.value) {
         if (columnsType() === "cascade") {
           var _columnOptions2, _columnOptions2$child;
-          selectedValue[columnIndex2] = columnOptions.value || "";
-          setSelectedValue(_toConsumableArray(selectedValue));
+          values[columnIndex2] = columnOptions.value || "";
           while ((_columnOptions = columnOptions) !== null && _columnOptions !== void 0 && (_columnOptions$childr = _columnOptions.children) !== null && _columnOptions$childr !== void 0 && _columnOptions$childr[0]) {
             var _columnOptions, _columnOptions$childr;
-            selectedValue[columnIndex2 + 1] = columnOptions.children[0].value;
-            setSelectedValue(_toConsumableArray(selectedValue));
+            values[columnIndex2 + 1] = columnOptions.children[0].value;
             columnIndex2++;
             columnOptions = columnOptions.children[0];
           }
           if ((_columnOptions2 = columnOptions) !== null && _columnOptions2 !== void 0 && (_columnOptions2$child = _columnOptions2.children) !== null && _columnOptions2$child !== void 0 && _columnOptions2$child.length) {
-            selectedValue[columnIndex2 + 1] = "";
-            setSelectedValue(_toConsumableArray(selectedValue));
+            values[columnIndex2 + 1] = "";
           }
-          setColumnsList(normalListData());
+          var combineResult = [].concat(_toConsumableArray(innerValue.slice(0, start)), _toConsumableArray(values.splice(start)));
+          setInnerValue(combineResult);
+          setColumnsList(normalListData(combineResult));
         } else {
-          setSelectedValue(function(data) {
+          setInnerValue(function(data) {
             var cdata = _toConsumableArray(data);
             cdata[columnIndex2] = Object.prototype.hasOwnProperty.call(columnOptions, "value") ? columnOptions.value : "";
             return cdata;
@@ -390,16 +402,16 @@ var InternalPicker = function InternalPicker2(props, ref) {
     }
   };
   var confirm = function confirm2() {
-    var movings = false;
+    var moving = false;
     refs.forEach(function(ref2) {
       if (ref2.moving)
-        movings = true;
+        moving = true;
       ref2.stopMomentum();
     });
-    if (movings) {
+    if (moving) {
       isConfirmEvent.current = true;
     } else {
-      onConfirm && onConfirm(setSelectedOptions(), selectedValue);
+      setSelectedValue(innerValue);
       closePicker();
     }
     setTimeout(function() {
@@ -407,40 +419,45 @@ var InternalPicker = function InternalPicker2(props, ref) {
     }, 0);
   };
   var closePicker = function closePicker2() {
-    onClose && onClose(setSelectedOptions(), selectedValue);
-    afterClose && afterClose(setSelectedOptions(), selectedValue, pickerRef);
+    setInnerVisible(false);
+    onClose && onClose(setSelectedOptions(), innerValue);
+    afterClose && afterClose(setSelectedOptions(), innerValue, pickerRef);
   };
   var renderTitleBar = function renderTitleBar2() {
     return React__default.createElement("div", {
       className: "".concat(classPrefix, "__control")
     }, React__default.createElement("span", {
       className: "".concat(classPrefix, "__cancel-btn"),
-      onClick: function onClick() {
-        return closePicker();
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        closePicker();
       }
     }, locale.cancel), React__default.createElement("div", {
       className: "".concat(classPrefix, "__title")
     }, title || ""), React__default.createElement("span", {
       className: "".concat(classPrefix, "__confirm-btn"),
-      onClick: confirm
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        confirm();
+      }
     }, locale.confirm));
   };
-  return React__default.createElement(Popup, {
-    visible,
+  return React__default.createElement(React__default.Fragment, null, typeof children === "function" && children(selectedValue), React__default.createElement(Popup, {
+    visible: innerVisible,
     position: "bottom",
-    onClose: function onClose2() {
+    afterClose: function afterClose2() {
       closePicker();
     }
   }, React__default.createElement("div", _objectSpread({
     className: classes,
     style
-  }, rest), renderTitleBar(), React__default.createElement("div", {
+  }, rest), renderTitleBar(), typeof children !== "function" && children, React__default.createElement("div", {
     className: "".concat(classPrefix, "__panel"),
     ref: pickerRef
   }, columnsList === null || columnsList === void 0 ? void 0 : columnsList.map(function(item, index) {
     return React__default.createElement(PickerPanel$1, {
       ref: setRefs(index),
-      defaultValue: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[index],
+      defaultValue: innerValue === null || innerValue === void 0 ? void 0 : innerValue[index],
       options: item,
       threeDimensional,
       chooseItem: function chooseItem(value, index2) {
@@ -450,7 +467,7 @@ var InternalPicker = function InternalPicker2(props, ref) {
       key: index,
       keyIndex: index
     });
-  }))));
+  })))));
 };
 var Picker = React__default.forwardRef(InternalPicker);
 var Picker$1 = Picker;

package/dist/esm/Popover/style/css.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import './style.css'

package/dist/esm/Popover/style/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import '../../Overlay/style'
+import '../../Popup/style'
 import '../../../packages/popover/popover.scss'

package/dist/esm/Popover/style/style.css ADDED Viewed

@@ -0,0 +1 @@

+ .nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);-webkit-overflow-scrolling:touch}.nut-popup-title{display:flex;align-items:center;justify-content:center;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);padding:var(--nutui-popup-title-padding, 15px);font-weight:var(--nutui-font-weight-bold, 400);line-height:var(--nutui-popup-title-line-height, 18px);font-size:var(--nutui-popup-title-font-size, 18px);border-bottom:var(--nutui-popup-title-border-bottom, 0)}.nut-popup-left-icon{position:absolute;top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon{position:absolute!important;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 24px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:.3s}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:.3s}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:.3s}.nut-overflow-hidden{overflow:hidden!important}.nut-popover{position:absolute;display:inline-block;word-break:normal}.nut-popover-arrow{position:absolute;width:0;height:0;border:8px solid transparent}.nut-popover-arrow-top{bottom:0;border-top-color:var(--nutui-popover-white-background-color, var(--nutui-gray-6, #ffffff));border-bottom-width:0;margin-bottom:-8px}.nut-popover-arrow-bottom{top:0px;border-bottom-color:var(--nutui-popover-white-background-color, var(--nutui-gray-6, #ffffff));border-top-width:0;margin-top:-8px}.nut-popover-arrow-bottom.nut-popover-arrow--bottom{left:50%;transform:translate(-50%)}.nut-popover-arrow-bottom.nut-popover-arrow--bottom-start{left:16px;transform:translate(0)}.nut-popover-arrow-bottom.nut-popover-arrow--bottom-end{right:16px;transform:translate(0)}.nut-popover-arrow-left{right:0px;border-left-color:var(--nutui-popover-white-background-color, var(--nutui-gray-6, #ffffff));border-right-width:0;margin-right:-8px}.nut-popover-arrow-left.nut-popover-arrow--left{top:50%;transform:translateY(-50%)}.nut-popover-arrow-left.nut-popover-arrow--left-start{top:16px;transform:translateY(0)}.nut-popover-arrow-left.nut-popover-arrow--left-end{bottom:16px;transform:translateY(0)}.nut-popover-arrow-right{left:0px;border-right-color:var(--nutui-popover-white-background-color, var(--nutui-gray-6, #ffffff));border-left-width:0;margin-left:-8px}.nut-popover-arrow-right.nut-popover-arrow--right{top:50%;transform:translateY(-50%)}.nut-popover-arrow-right.nut-popover-arrow--right-start{top:16px;transform:translateY(0)}.nut-popover-arrow-right.nut-popover-arrow--right-end{bottom:16px;transform:translateY(0)}.nut-popover .nut-popover-content{position:absolute;background-color:var(--nutui-popover-content-background-color, var(--nutui-gray-6, #ffffff));border-radius:var(--nutui-popover-border-radius, 8px);font-size:var(--nutui-popover-font-size, var(--nutui-font-size-2, 14px));font-family:PingFangSC;font-weight:400;color:var(--nutui-popover-primary-text-color, var(--nutui-gray-1, #1a1a1a));box-shadow:0 2px 12px #3232331f;max-height:initial;overflow-y:initial}.nut-popover .nut-popover-content-group{display:block;height:100%;width:100%}.nut-popover .nut-popover-content .nut-popover-menu-item{display:flex;align-items:center;padding:var(--nutui-popover-menu-item-padding, 8px);border-bottom:1px solid var(--nutui-popover-border-bottom-color, rgb(229, 229, 229))}.nut-popover .nut-popover-content .nut-popover-menu-item:last-child{margin-bottom:2px;border-bottom:none}.nut-popover .nut-popover-content .nut-popover-menu-item:hover{cursor:pointer;color:var(--nutui-popover-menu-item-hover-text-color, #1a1a1a);background-color:var(--nutui-popover-menu-item-hover-background-color, #fff)}.nut-popover .nut-popover-content .nut-popover-menu-item:hover:nth-of-type(2){border-radius:8px 8px 0 0}.nut-popover .nut-popover-content .nut-popover-menu-item:hover:last-of-type{border-radius:0 0 8px 8px}.nut-popover .nut-popover-content .nut-popover-menu-item .nut-popover-menu-item-name{width:100%;word-break:keep-all}.nut-popover .nut-popover-content .nut-popover-menu-item.nut-popover-menu-disabled{color:var(--nutui-popover-disable-color, rgb(154, 155, 157));cursor:not-allowed}.nut-popover .nut-popover-content .nut-popover-menu-item.nut-popover-menu-taroitem{display:flex}.nut-popover .nut-popover-content--top .nut-popover-arrow--top{left:50%;transform:translate(-50%)}.nut-popover .nut-popover-content--top-end{right:0}.nut-popover .nut-popover-content--top-end .nut-popover-arrow--top-end{right:16px;transform:translate(0)}.nut-popover .nut-popover-content--top-start{left:0}.nut-popover .nut-popover-content--top-start .nut-popover-arrow--top-start{left:16px;transform:translate(0)}.nut-popover .nut-popover-content--bottom-end{right:0}.nut-popover .nut-popover-content--left-end{bottom:0}.nut-popover .nut-popover-content--left-start{top:0}.nut-popover .nut-popover-content--right-end{bottom:0}.nut-popover .nut-popover-content--right-start{top:0}.nut-popover-enter-from,.nut-popover-leave-active{transform:scale(.8);opacity:0}.nut-popover-enter-active{transition-timing-function:ease-out}.nut-popover-leave-active{transition-timing-function:ease-in}.nut-popover-content-bg{position:fixed;height:100%;width:100%;top:0;left:0;background:transparent;z-index:1999}.nut-popover-wrapper{display:inline-block}.nut-popover-content-copy{position:absolute;top:-99999px}

package/dist/esm/Popover.js CHANGED Viewed

@@ -1,13 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _typeof from "@babel/runtime/helpers/typeof";
-var _excluded = ["children", "list", "theme", "location", "visible", "offset", "className", "style", "onClick", "onChoose"];
+var _excluded = ["children", "list", "location", "visible", "offset", "targetId", "overlay", "closeOnClickOutside", "closeOnClickAction", "className", "showArrow", "style", "onClick", "onOpen", "onClose", "onSelect"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -29,199 +23,184 @@ function _objectSpread(target) {
   }
   return target;
 }
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived), result;
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-    return _possibleConstructorReturn(this, result);
-  };
-}
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct)
-    return false;
-  if (Reflect.construct.sham)
-    return false;
-  if (typeof Proxy === "function")
-    return true;
-  try {
-    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
-    }));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
 import React__default, { useRef, useState, useEffect } from "react";
-import Overlay from "./Overlay.js";
+import classNames from "classnames";
+import Popup from "./Popup.js";
 import { g as getRect } from "./use-client-rect.js";
 import { C as ComponentDefaults } from "./typings.js";
-function fillRef(ref, node) {
-  if (typeof ref === "function") {
-    ref(node);
-  } else if (_typeof(ref) === "object" && ref && "current" in ref) {
-    ref.current = node;
-  }
-}
-function composeRef() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-  return function(node) {
-    refs.forEach(function(ref) {
-      fillRef(ref, node);
-    });
-  };
-}
-var Trigger = /* @__PURE__ */ function(_React__default$Compo) {
-  _inherits(Trigger2, _React__default$Compo);
-  var _super = _createSuper(Trigger2);
-  function Trigger2() {
-    _classCallCheck(this, Trigger2);
-    return _super.apply(this, arguments);
-  }
-  _createClass(Trigger2, [{
-    key: "fireEvents",
-    value: function fireEvents(type, e) {
-      var childCallback = this.props.children.props[type];
-      if (childCallback) {
-        childCallback(e);
-      }
-      var callback = this.props[type];
-      if (callback) {
-        callback(e);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props, children = _this$props.children, _this$props$className = _this$props.className, className = _this$props$className === void 0 ? "" : _this$props$className;
-      var child = React__default.Children.only(children);
-      var newChildProps = {
-        key: "trigger"
-      };
-      if (child && child.props && child.props.className) {
-        newChildProps.className = className;
-      }
-      var cloneProps = _objectSpread({}, newChildProps);
-      cloneProps.ref = composeRef(this.props.forwardedRef, child.ref);
-      var trigger = React__default.cloneElement(child, cloneProps);
-      return trigger;
-    }
-  }]);
-  return Trigger2;
-}(React__default.Component);
+import { u as useClickAway } from "./use-click-away.js";
+import "./index.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   list: [],
-  theme: "light",
   location: "bottom",
   visible: false,
-  offset: 20,
+  offset: [0, 12],
+  targetId: "",
   className: "",
-  onClick: function onClick(e) {
+  showArrow: true,
+  closeOnClickOutside: true,
+  closeOnClickAction: true,
+  overlay: false,
+  onClick: function onClick() {
+  },
+  onOpen: function onOpen() {
   },
-  onChoose: function onChoose(item, index) {
+  onClose: function onClose() {
   }
 });
+var classPrefix = "nut-popover";
 var Popover = function Popover2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, list = _defaultProps$props.list, theme = _defaultProps$props.theme, location = _defaultProps$props.location, visible = _defaultProps$props.visible, offset = _defaultProps$props.offset, className = _defaultProps$props.className, style = _defaultProps$props.style, onClick2 = _defaultProps$props.onClick, onChoose2 = _defaultProps$props.onChoose, reset = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var goodItem = useRef(null);
-  setTimeout(function() {
-    if (goodItem.current && getRect(goodItem.current)) {
-      setElWidth(getRect(goodItem.current).width);
-      setElHeight(getRect(goodItem.current).height);
-    }
-  });
-  var _useState = useState(""), _useState2 = _slicedToArray(_useState, 2), classes = _useState2[0], setClasses = _useState2[1];
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, list = _defaultProps$props.list, location = _defaultProps$props.location, visible = _defaultProps$props.visible, offset = _defaultProps$props.offset, targetId = _defaultProps$props.targetId, overlay = _defaultProps$props.overlay, closeOnClickOutside = _defaultProps$props.closeOnClickOutside, closeOnClickAction = _defaultProps$props.closeOnClickAction, className = _defaultProps$props.className, showArrow = _defaultProps$props.showArrow, style = _defaultProps$props.style, onClick2 = _defaultProps$props.onClick, onOpen2 = _defaultProps$props.onOpen, onClose2 = _defaultProps$props.onClose, onSelect = _defaultProps$props.onSelect, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var popoverRef = useRef(null);
+  var popoverContentRef = useRef(null);
+  var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), showPopup = _useState2[0], setShowPopup = _useState2[1];
   var _useState3 = useState(0), _useState4 = _slicedToArray(_useState3, 2), elWidth = _useState4[0], setElWidth = _useState4[1];
   var _useState5 = useState(0), _useState6 = _slicedToArray(_useState5, 2), elHeight = _useState6[0], setElHeight = _useState6[1];
-  var _useState7 = useState(""), _useState8 = _slicedToArray(_useState7, 2), popoverContent = _useState8[0], setPopoverContent = _useState8[1];
-  var _useState9 = useState(""), _useState10 = _slicedToArray(_useState9, 2), popoverArrow = _useState10[0], setPopoverArrow = _useState10[1];
+  var _useState7 = useState(), _useState8 = _slicedToArray(_useState7, 2), rootPosition = _useState8[0], setRootPosition = _useState8[1];
   useEffect(function() {
-    setClasses(classesSelf());
-    setPopoverContent(popoverContentSelf());
-    setPopoverArrow(popoverArrowSelf());
-  }, [list, theme]);
-  var getStyle = function getStyle2() {
-    var offNumer = Number(offset) ? Number(offset) : 0;
-    var style2 = {};
-    if (location.includes("top")) {
-      style2.bottom = "".concat(elHeight + offNumer, "px");
-    } else if (location.includes("right")) {
-      style2.left = "".concat(elWidth + offNumer, "px");
-    } else if (location.includes("left")) {
-      style2.right = "".concat(elWidth + offNumer, "px");
+    setShowPopup(visible);
+    if (visible) {
+      setTimeout(function() {
+        getContentWidth();
+      }, 0);
+    }
+  }, [visible]);
+  var targetSet = [targetId ? document.querySelector("#".concat(targetId)) : popoverRef.current, popoverContentRef.current];
+  useClickAway(function() {
+    props.onClick && props.onClick();
+    onClose2 && onClose2();
+  }, targetSet, "touchstart", true, visible, closeOnClickOutside);
+  var getContentWidth = function getContentWidth2() {
+    var rect = getRect(popoverRef.current);
+    if (targetId) {
+      setTimeout(function() {
+        rect = getRect(document.querySelector("#".concat(targetId)));
+        setRootPosition({
+          width: rect.width,
+          height: rect.height,
+          left: rect.left,
+          top: rect.top,
+          right: rect.right
+        });
+        if (popoverContentRef.current) {
+          setElWidth(popoverContentRef.current.clientWidth);
+          setElHeight(popoverContentRef.current.clientHeight);
+        }
+      }, 0);
     } else {
-      style2.top = "".concat(elHeight + offNumer, "px");
+      setRootPosition({
+        width: rect.width,
+        height: rect.height,
+        left: rect.left,
+        top: rect.top,
+        right: rect.right
+      });
+      if (popoverContentRef.current) {
+        setElWidth(popoverContentRef.current.clientWidth);
+        setElHeight(popoverContentRef.current.clientHeight);
+      }
     }
-    return style2;
   };
-  var classesSelf = function classesSelf2() {
-    var prefixCls = "nut-popover";
-    return "".concat(prefixCls, " ").concat(theme ? "".concat(prefixCls, "--").concat(theme) : "");
+  var classes = classNames(_defineProperty({}, "".concat(classPrefix), true), className);
+  var popoverArrow = function popoverArrow2() {
+    var prefixCls = "nut-popover-arrow";
+    var loca = location;
+    var direction = loca.split("-")[0];
+    return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(direction, " ").concat(prefixCls, "--").concat(loca);
   };
-  var popoverContentSelf = function popoverContentSelf2() {
-    var prefixCls = "popover-content";
-    return "".concat(prefixCls, "-show ").concat(prefixCls, " ").concat(location ? "".concat(prefixCls, "--").concat(location) : "");
-  };
-  var filter = function filter2() {
-    var ms = ["top", "bottom", "left", "right"];
-    return ms.filter(function(m) {
-      return location.includes(m);
-    })[0];
-  };
-  var popoverArrowSelf = function popoverArrowSelf2() {
-    var prefixCls = "popover-arrow";
-    return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(filter(), " ").concat(location ? "".concat(prefixCls, "--").concat(location) : "");
-  };
-  var handleClick = function handleClick2(e) {
-    if (props.onClick) {
-      props.onClick(e);
+  var getRootPosition = function getRootPosition2() {
+    var styles = {};
+    if (!rootPosition)
+      return {};
+    var contentWidth = elWidth;
+    var contentHeight = elHeight;
+    var width = rootPosition.width, height = rootPosition.height, left = rootPosition.left, top = rootPosition.top, right = rootPosition.right;
+    var direction = location.split("-")[0];
+    var skew = location.split("-")[1];
+    var cross = 0;
+    var parallel = 0;
+    if (Array.isArray(offset) && offset.length === 2) {
+      cross += +offset[1];
+      parallel += +offset[0];
     }
+    if (width) {
+      if (["bottom", "top"].includes(direction)) {
+        var h = direction === "bottom" ? height + cross : -(contentHeight + cross);
+        styles.top = "".concat(top + h, "px");
+        if (!skew) {
+          styles.left = "".concat(-(contentWidth - width) / 2 + left + parallel, "px");
+        }
+        if (skew === "start") {
+          styles.left = "".concat(left + parallel, "px");
+        }
+        if (skew === "end") {
+          styles.left = "".concat(right + parallel, "px");
+        }
+      }
+      if (["left", "right"].includes(direction)) {
+        var contentW = direction === "left" ? -(contentWidth + cross) : width + cross;
+        styles.left = "".concat(left + contentW, "px");
+        if (!skew) {
+          styles.top = "".concat(top - contentHeight / 2 + height / 2 - 4 + parallel, "px");
+        }
+        if (skew === "start") {
+          styles.top = "".concat(top + parallel, "px");
+        }
+        if (skew === "end") {
+          styles.top = "".concat(top + height + parallel, "px");
+        }
+      }
+    }
+    return styles;
   };
-  var handleChoose = function handleChoose2(item, index) {
+  var handleSelect = function handleSelect2(item, index) {
     if (!item.disabled) {
-      onChoose2(item, index);
+      onSelect && onSelect(item, index);
     }
-  };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", _objectSpread({
-    className: "".concat(classes, " ").concat(className),
-    style: _objectSpread({}, style)
-  }, reset), React__default.createElement(Trigger, {
-    forwardedRef: goodItem
-  }, React__default.createElement("div", {
-    onClick: function onClick3(e) {
-      return handleClick(e);
+    if (closeOnClickAction) {
+      props.onClick && props.onClick();
+      onClose2 && onClose2();
     }
-  }, Array.isArray(children) ? children[0] : children, visible ? React__default.createElement("div", {
-    className: "".concat(popoverContent),
-    style: getStyle()
-  }, React__default.createElement("div", {
-    className: "".concat(popoverArrow)
-  }), Array.isArray(children) ? children[1] : "", React__default.createElement("div", null, list.map(function(item, i) {
+  };
+  return React__default.createElement(React__default.Fragment, null, !targetId && React__default.createElement("div", {
+    className: "nut-popover-wrapper",
+    ref: popoverRef,
+    onClick: function onClick3() {
+      props.onClick && props.onClick();
+      if (!visible) {
+        onOpen2 && onOpen2();
+      } else {
+        onClose2 && onClose2();
+      }
+    },
+    style
+  }, Array.isArray(children) ? children[0] : children), React__default.createElement("div", {
+    className: classes,
+    style: getRootPosition()
+  }, React__default.createElement(Popup, _objectSpread({
+    className: "nut-popover-content nut-popover-content--".concat(location),
+    visible: showPopup,
+    overlay,
+    position: "default"
+  }, rest), React__default.createElement("div", {
+    className: "nut-popover-content-group",
+    ref: popoverContentRef
+  }, showArrow && React__default.createElement("div", {
+    className: popoverArrow()
+  }), Array.isArray(children) ? children[1] : "", list.map(function(item, index) {
     return React__default.createElement("div", {
-      key: item.name,
-      className: "popover-menu-item ".concat(item.disabled ? "disabled" : ""),
+      className: classNames({
+        "nut-popover-menu-item": true,
+        "nut-popover-menu-disabled": item.disabled
+      }, item.className),
+      key: item.key,
       onClick: function onClick3() {
-        handleChoose(item, i);
+        return handleSelect(item, index);
       }
     }, item.icon ? item.icon : null, React__default.createElement("div", {
-      className: "popover-menu-item-name"
+      className: "nut-popover-menu-item-name"
     }, item.name));
-  }))) : null))), visible ? React__default.createElement(Overlay, {
-    visible,
-    onClick: function onClick3(e) {
-      return handleClick(e);
-    },
-    style: {
-      background: "transparent"
-    }
-  }) : null);
+  })))));
 };
 Popover.defaultProps = defaultProps;
 Popover.displayName = "NutPopover";

package/dist/esm/Popup/style/css.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import './style.css'