@nutui/nutui-react 0.1.0-beta.1 → 0.1.2

package/dist/esm/Picker.js

@@ -0,0 +1,397 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["isVisible", "title", "listData", "defaultValueData", "onConfirm", "onClose", "onCloseUpdate", "onChoose", "className", "style"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React__default, { useState, useRef, useImperativeHandle, useEffect } from 'react';
+import Popup from './Popup.js';
+import { c as cn } from './bem-893ad28d.js';
+import '@bem-react/classname';
+
+var InternalPickerSlot = function InternalPickerSlot(props, ref) {
+  var isUpdate = props.isUpdate,
+      _props$keyIndex = props.keyIndex,
+      keyIndex = _props$keyIndex === void 0 ? 0 : _props$keyIndex,
+      defaultValue = props.defaultValue,
+      _props$listData = props.listData,
+      listData = _props$listData === void 0 ? [] : _props$listData,
+      chooseItem = props.chooseItem;
+
+  var _useState = useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      currIndex = _useState2[0],
+      setCurrIndex = _useState2[1];
+
+  var lineSpacing = 36;
+  var rotation = 20;
+  var timer;
+  var listRef = useRef(null);
+  var rollerRef = useRef(null);
+  var pickerSlotRef = useRef(null);
+  useState();
+  var touchParams = {
+    startY: 0,
+    startTime: 0,
+    transformY: 0,
+    scrollDistance: 0
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      updateTransform: function updateTransform(value) {
+        if (value) {
+          touchParams.transformY = 0;
+          timer = setTimeout(function () {
+            modifyStatus(false, value);
+          }, 10);
+        }
+      },
+      getIndex: function getIndex() {
+        return keyIndex;
+      }
+    };
+  });
+  useEffect(function () {
+    touchParams.transformY = 0;
+    modifyStatus();
+  }, [isUpdate]);
+  useEffect(function () {
+    touchParams.transformY = 0;
+    modifyStatus();
+  }, [defaultValue]);
+
+  var isHidden = function isHidden(index) {
+    if (index >= currIndex + 8 || index <= currIndex - 8) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  var setTransform = function setTransform() {
+    var translateY = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var type = arguments.length > 1 ? arguments[1] : undefined;
+    var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
+    var deg = arguments.length > 3 ? arguments[3] : undefined;
+
+    if (type === 'end') {
+      listRef.current.style.webkitTransition = "transform ".concat(time, "ms cubic-bezier(0.19, 1, 0.22, 1)");
+      rollerRef.current.style.webkitTransition = "transform ".concat(time, "ms cubic-bezier(0.19, 1, 0.22, 1)");
+    } else {
+      listRef.current.style.webkitTransition = '';
+      rollerRef.current.style.webkitTransition = '';
+    }
+
+    listRef.current.style.webkitTransform = "translate3d(0, ".concat(translateY, "px, 0)");
+    rollerRef.current.style.webkitTransform = "rotate3d(1, 0, 0, ".concat(deg, ")");
+    touchParams.scrollDistance = translateY;
+  };
+
+  var setMove = function setMove(move, type, time) {
+    var updateMove = move + touchParams.transformY;
+
+    if (type === 'end' && time) {
+      // 限定滚动距离
+      if (updateMove > 0) {
+        updateMove = 0;
+      }
+
+      if (updateMove < -(listData.length - 1) * lineSpacing) {
+        updateMove = -(listData.length - 1) * lineSpacing;
+      } // 设置滚动距离为lineSpacing的倍数值
+
+
+      var endMove = Math.round(updateMove / lineSpacing) * lineSpacing;
+      var deg = "".concat((Math.abs(Math.round(endMove / lineSpacing)) + 1) * rotation, "deg");
+      setTransform(endMove, type, time, deg);
+      timer = setTimeout(function () {
+        setChooseValue(endMove);
+      }, time / 2);
+      setCurrIndex(Math.abs(Math.round(endMove / lineSpacing)) + 1);
+    } else {
+      var _deg = '0deg';
+
+      if (updateMove < 0) {
+        _deg = "".concat((Math.abs(updateMove / lineSpacing) + 1) * rotation, "deg");
+      } else {
+        _deg = "".concat((-updateMove / lineSpacing + 1) * rotation, "deg");
+      }
+
+      setTransform(updateMove, '', 0, _deg);
+      setCurrIndex(Math.abs(Math.round(updateMove / lineSpacing)) + 1);
+    }
+  };
+
+  var setChooseValue = function setChooseValue(move) {
+    chooseItem && chooseItem(listData === null || listData === void 0 ? void 0 : listData[Math.round(-move / lineSpacing)], keyIndex);
+  };
+
+  var touchStart = function touchStart(event) {
+    event.preventDefault();
+    var changedTouches = event.changedTouches[0];
+    touchParams.startY = changedTouches.pageY;
+    touchParams.startTime = event.timeStamp || Date.now();
+    touchParams.transformY = touchParams.scrollDistance;
+  };
+
+  var touchMove = function touchMove(event, listData) {
+    event.preventDefault();
+    var changedTouches = event.changedTouches[0];
+    var lastY = changedTouches.pageY;
+    var move = lastY - touchParams.startY;
+    setMove(move);
+  };
+
+  var touchEnd = function touchEnd(event) {
+    event.preventDefault();
+    var changedTouches = event.changedTouches[0];
+    var lastTime = event.timeStamp || Date.now();
+    var move = changedTouches.pageY - touchParams.startY;
+    var moveTime = lastTime - touchParams.startTime;
+
+    if (moveTime <= 300) {
+      move = move * 2;
+      moveTime = moveTime + 1000;
+      setMove(move, 'end', moveTime);
+    } else {
+      setMove(move, 'end', moveTime);
+    }
+  };
+
+  var modifyStatus = function modifyStatus(type, val) {
+    var value = val || defaultValue;
+    var index = -1;
+
+    if (value && value.value) {
+      listData.some(function (item, idx) {
+        if (item.value == value.value) {
+          index = idx;
+          return true;
+        }
+      });
+    } else {
+      index = listData.indexOf(defaultValue);
+    }
+
+    setCurrIndex(index === -1 ? 1 : index + 1);
+    var move = index === -1 ? 0 : index * lineSpacing;
+    type && setChooseValue(-move);
+    setMove(-move);
+  };
+
+  useEffect(function () {
+    var _pickerSlotRef$curren, _pickerSlotRef$curren2, _pickerSlotRef$curren3;
+
+    modifyStatus(true); // 监听
+
+    (_pickerSlotRef$curren = pickerSlotRef.current) === null || _pickerSlotRef$curren === void 0 ? void 0 : _pickerSlotRef$curren.addEventListener('touchstart', touchStart);
+    (_pickerSlotRef$curren2 = pickerSlotRef.current) === null || _pickerSlotRef$curren2 === void 0 ? void 0 : _pickerSlotRef$curren2.addEventListener('touchmove', touchMove);
+    (_pickerSlotRef$curren3 = pickerSlotRef.current) === null || _pickerSlotRef$curren3 === void 0 ? void 0 : _pickerSlotRef$curren3.addEventListener('touchend', touchEnd);
+    return function () {
+      var _pickerSlotRef$curren4, _pickerSlotRef$curren5, _pickerSlotRef$curren6;
+
+      // 移除监听
+      (_pickerSlotRef$curren4 = pickerSlotRef.current) === null || _pickerSlotRef$curren4 === void 0 ? void 0 : _pickerSlotRef$curren4.removeEventListener('touchstart', touchStart);
+      (_pickerSlotRef$curren5 = pickerSlotRef.current) === null || _pickerSlotRef$curren5 === void 0 ? void 0 : _pickerSlotRef$curren5.removeEventListener('touchmove', touchMove);
+      (_pickerSlotRef$curren6 = pickerSlotRef.current) === null || _pickerSlotRef$curren6 === void 0 ? void 0 : _pickerSlotRef$curren6.removeEventListener('touchend', touchEnd);
+      clearTimeout(timer);
+    };
+  }, [listData]);
+  return React__default.createElement("div", {
+    className: "nut-picker-list",
+    ref: pickerSlotRef
+  }, React__default.createElement("div", {
+    className: "nut-picker-roller",
+    ref: rollerRef
+  }, listData.map(function (item, index) {
+    return React__default.createElement("div", {
+      className: "nut-picker-roller-item ".concat(isHidden(index + 1) && 'nut-picker-roller-item-hidden'),
+      style: {
+        transform: "rotate3d(1, 0, 0, ".concat(-rotation * (index + 1), "deg) translate3d(0px, 0px, 104px)")
+      },
+      key: item.label ? item.label : index
+    }, item.value ? item.value : item);
+  })), React__default.createElement("div", {
+    className: "nut-picker-content"
+  }, React__default.createElement("div", {
+    className: "nut-picker-list-panel",
+    ref: listRef
+  }, listData.map(function (item, index) {
+    return React__default.createElement("div", {
+      className: "nut-picker-item",
+      key: item.label ? item.label : index
+    }, item.value ? item.value : item);
+  }), (listData === null || listData === void 0 ? void 0 : listData.length) === 1 && React__default.createElement("div", {
+    className: "nut-picker-placeholder"
+  }))), React__default.createElement("div", {
+    className: "nut-picker-mask"
+  }), React__default.createElement("div", {
+    className: "nut-picker-indicator"
+  }));
+};
+
+var PickerSlot = React__default.forwardRef(InternalPickerSlot);
+
+var InternalPicker = function InternalPicker(props, ref) {
+  var isVisible = props.isVisible,
+      title = props.title,
+      _props$listData2 = props.listData,
+      listData = _props$listData2 === void 0 ? [] : _props$listData2,
+      _props$defaultValueDa = props.defaultValueData,
+      defaultValueData = _props$defaultValueDa === void 0 ? [] : _props$defaultValueDa,
+      onConfirm = props.onConfirm,
+      _onClose = props.onClose,
+      onCloseUpdate = props.onCloseUpdate,
+      onChoose = props.onChoose,
+      className = props.className,
+      style = props.style,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      chooseValueData = _useState4[0],
+      setchooseValueData = _useState4[1];
+
+  var _useState5 = useState([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      cacheValueData = _useState6[0],
+      setcacheValueData = _useState6[1];
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isUpdate = _useState8[0],
+      setisUpdate = _useState8[1];
+
+  var pickerRef = useRef(null);
+  var pickerSlotRef1 = useRef(null);
+  var pickerSlotRef2 = useRef(null);
+  var pickerSlotRef3 = useRef(null);
+  var refList = [pickerSlotRef1, pickerSlotRef2, pickerSlotRef3];
+
+  var _useState9 = useState(true),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isReady = _useState10[0],
+      setIsReady = _useState10[1];
+
+  var b = cn('picker');
+  useEffect(function () {
+    var data = _toConsumableArray(defaultValueData);
+
+    setchooseValueData(data);
+    setcacheValueData(data);
+    onConfirm && onConfirm(data);
+  }, [defaultValueData]);
+  useEffect(function () {
+    init();
+  }, [listData]);
+
+  var updateChooseValue = function updateChooseValue(index, value, cacheValueData) {
+    var _refList$index$curren;
+
+    if (!value) return;
+    setcacheValueData(function (data) {
+      var cache = _toConsumableArray(cacheValueData);
+
+      cache.splice(index, 1, value);
+      return cache;
+    });
+    (_refList$index$curren = refList[index].current) === null || _refList$index$curren === void 0 ? void 0 : _refList$index$curren.updateTransform(value);
+  };
+
+  useImperativeHandle(ref, function () {
+    return {
+      updateChooseValue: updateChooseValue
+    };
+  });
+
+  var closeActionSheet = function closeActionSheet() {
+    setisUpdate(!isUpdate);
+    setcacheValueData(_toConsumableArray(chooseValueData));
+    _onClose && _onClose();
+    onCloseUpdate && onCloseUpdate(chooseValueData, pickerRef);
+  };
+
+  var confirm = function confirm(defaultValueData) {
+    var data = defaultValueData || cacheValueData;
+    onConfirm && onConfirm(data);
+    setchooseValueData(_toConsumableArray(data));
+    _onClose && _onClose();
+  };
+
+  var _chooseItem = function chooseItem(value, index) {
+    setcacheValueData(function (data) {
+      var cacheData = _toConsumableArray(data);
+
+      if (cacheData[index] != value) {
+        cacheData[index] = value;
+        onChoose && onChoose(index, value, cacheData, pickerRef);
+      }
+
+      return cacheData;
+    });
+  };
+
+  var init = function init() {
+    if (defaultValueData && defaultValueData.length) {
+      setchooseValueData(_toConsumableArray(defaultValueData));
+    } else {
+      var data = [];
+      listData.map(function (item, index) {
+        data.push(item[0]);
+      });
+      setcacheValueData(function (cache) {
+        return [].concat(data);
+      });
+      setchooseValueData([].concat(data));
+    }
+
+    setIsReady(true);
+  };
+
+  return React__default.createElement(Popup, {
+    visible: isVisible,
+    position: "bottom",
+    onClose: function onClose() {
+      _onClose && _onClose();
+    }
+  }, React__default.createElement("div", _objectSpread({
+    className: "".concat(b(), " ").concat(className ? className : ''),
+    style: style
+  }, rest), React__default.createElement("div", {
+    className: b('control')
+  }, React__default.createElement("span", {
+    className: b('cancel-btn'),
+    onClick: function onClick() {
+      return closeActionSheet();
+    }
+  }, "\u53D6\u6D88"), React__default.createElement("div", {
+    className: b('title')
+  }, title ? title : ''), React__default.createElement("span", {
+    className: b('confirm-btn'),
+    onClick: function onClick() {
+      return confirm();
+    }
+  }, "\u786E\u5B9A")), React__default.createElement("div", {
+    className: b('panel'),
+    ref: pickerRef
+  }, listData === null || listData === void 0 ? void 0 : listData.map(function (item, index) {
+    return React__default.createElement(PickerSlot, {
+      defaultValue: chooseValueData === null || chooseValueData === void 0 ? void 0 : chooseValueData[index],
+      isUpdate: isUpdate,
+      listData: item,
+      chooseItem: function chooseItem(value, index) {
+        return _chooseItem(value, index);
+      },
+      key: index,
+      keyIndex: index,
+      ref: refList[index]
+    });
+  }))));
+};
+
+var Picker = React__default.forwardRef(InternalPicker);
+export { Picker as default };

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

@@ -0,0 +1 @@
+import '../../../packages/popover/popover.scss'

package/dist/esm/Popover.js

@@ -0,0 +1,299 @@
+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", "className", "style", "onClick"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } 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 ReactDOM__default from 'react-dom';
+import Icon from './Icon.js';
+/**
+ * 过滤ref
+ */
+
+function fillRef(ref, node) {
+  if (typeof ref === 'function') {
+    ref(node);
+  } else if (_typeof(ref) === 'object' && ref && 'current' in ref) {
+    ref.current = node;
+  }
+}
+/**
+ * 将ref合并到一个ref函数中以支持ref传递
+ */
+
+
+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(Trigger, _React__default$Compo);
+
+  var _super = _createSuper(Trigger);
+
+  function Trigger(props) {
+    _classCallCheck(this, Trigger);
+
+    return _super.call(this, props); // ALL_HANDLERS.forEach((h) => {
+    //  ( this as any)[`fire${h}`] = (e: any) => {
+    //     this.fireEvents(h, e)
+    //   }
+    // })
+  }
+
+  _createClass(Trigger, [{
+    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'
+      }; // newChildProps.onClick = (e: any) => {
+      //   this.fireEvents('onClick', e)
+      // }
+      // newChildProps.onMouseEnter = (e: any) => {
+      //   this.fireEvents('onMouseEnter', e)
+      // }
+      // newChildProps.onMouseLeave = (e: any) => {
+      //   this.fireEvents('onMouseLeave', e)
+      // }
+      // newChildProps.onFocus = (e: any) => {
+      //   this.fireEvents('onMouseLeave', e)
+      // }
+      // newChildProps.onKeyPress = (e: any) => {
+      //   this.fireEvents('onMouseLeave', e)
+      // }
+
+      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 Trigger;
+}(React__default.Component);
+
+function findDOMNode(node) {
+  if (node instanceof HTMLElement) {
+    return node;
+  }
+
+  return ReactDOM__default.findDOMNode(node);
+}
+
+var getEleAttr = function getEleAttr(ele) {
+  if (ele && ele.getBoundingClientRect) {
+    return ele.getBoundingClientRect();
+  }
+
+  return null;
+};
+
+var defaultProps = {
+  list: [],
+  theme: 'light',
+  location: 'bottom',
+  visible: false,
+  className: '',
+  onClick: function onClick(e) {}
+};
+
+var Popover = function Popover(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,
+      className = _defaultProps$props.className,
+      style = _defaultProps$props.style,
+      onClick = _defaultProps$props.onClick,
+      reset = _objectWithoutProperties(_defaultProps$props, _excluded);
+
+  var goodItem = useRef(null);
+  var aa = goodItem.current && findDOMNode(goodItem.current);
+  setTimeout(function () {
+    if (aa) {
+      setElWidth(getEleAttr(aa).width);
+      setElHeight(getEleAttr(aa).height);
+    }
+  });
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      classes = _useState2[0],
+      setClasses = _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];
+
+  useEffect(function () {
+    setClasses(classes_self());
+    setPopoverContent(popoverContent_self());
+    setPopoverArrow(popoverArrow_self());
+  }, [list, theme]);
+
+  var getStyle = function getStyle() {
+    var style = {};
+
+    if (location == 'top') {
+      style.bottom = elHeight + 20;
+      style.left = 0;
+    } else if (location == 'right') {
+      style.top = 0;
+      style.right = -elWidth - 20;
+    } else if (location == 'left') {
+      style.top = 0;
+      style.left = -elWidth - 20;
+    } else {
+      style.top = elHeight + 20;
+      style.left = 0;
+    }
+
+    style.top = style.top + 'px';
+    style.left = style.left + 'px';
+    style.bottom = style.bottom + 'px';
+    style.right = style.right + 'px';
+    return style;
+  };
+
+  var getArrowStyle = function getArrowStyle() {
+    var style = {};
+
+    if (location == 'top') {
+      style.bottom = -20;
+      style.left = elWidth / 2;
+    } else if (location == 'right') {
+      style.top = 20;
+      style.left = -20;
+    } else if (location == 'left') {
+      style.top = 20;
+      style.right = -20;
+    } else {
+      style.left = elWidth / 2;
+      style.top = -20;
+    }
+
+    style.top = style.top + 'px';
+    style.left = style.left + 'px';
+    style.bottom = style.bottom + 'px';
+    style.right = style.right + 'px';
+    return style;
+  };
+
+  var classes_self = function classes_self() {
+    var prefixCls = 'nut-popover';
+    return "".concat(prefixCls, "\n    ").concat(theme ? "".concat(prefixCls, "--").concat(theme) : '');
+  };
+
+  var popoverContent_self = function popoverContent_self() {
+    var prefixCls = 'popoverContent';
+    return "".concat(prefixCls, "\n    ").concat(location ? "".concat(prefixCls, "--").concat(location) : '');
+  };
+
+  var popoverArrow_self = function popoverArrow_self() {
+    var prefixCls = 'popoverArrow';
+    return "".concat(prefixCls, "\n    ").concat(location ? "".concat(prefixCls, "--").concat(location) : '');
+  }; // const showPopup = props.visible
+
+
+  var handleClick = function handleClick(e) {
+    if (props.onClick) {
+      props.onClick(e);
+    }
+  };
+
+  return 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 onClick(e) {
+      return handleClick(e);
+    }
+  }, Array.isArray(children) ? children[0] : children, visible ? React__default.createElement("div", {
+    className: "".concat(popoverContent),
+    style: getStyle()
+  }, React__default.createElement("div", {
+    className: "".concat(popoverArrow),
+    style: getArrowStyle()
+  }, ' '), Array.isArray(children) ? children[1] : '', list.map(function (item) {
+    return React__default.createElement("div", {
+      key: item.name,
+      className: "title-item ".concat(item.disabled ? 'disabled' : '')
+    }, item.icon ? React__default.createElement(Icon, {
+      className: "item-img",
+      name: item.icon
+    }) : '', React__default.createElement("div", {
+      className: "title-name"
+    }, item.name));
+  })) : null)));
+};
+
+Popover.defaultProps = defaultProps;
+Popover.displayName = 'NutPopover';
+export { Popover as default };

package/dist/esm/Popup/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/popup/popup.scss'