ronds-metadata 1.0.64 → 1.0.67

package/es/comps/Editable/comps/EditableCell.js

@@ -2,14 +2,16 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import "antd/es/message/style";
 import _message from "antd/es/message";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["isAddColumn", "editable", "record", "editableType", "dataIndex", "rowIndex", "children"];
+var _excluded = ["title", "isAddColumn", "editable", "record", "editableType", "dataIndex", "rowIndex", "children"];
 import React from 'react';
 import { EditableContext } from '../interface';
 import { getDataCell, isFreeEditCell, isFreeEditRow } from '../utils';
 import "./index.css";
+import Texty from './Texty';
 
 var EditableCell = function EditableCell(props) {
-  var isAddColumn = props.isAddColumn,
+  var title = props.title,
+      isAddColumn = props.isAddColumn,
       editable = props.editable,
       record = props.record,
       editableType = props.editableType,
@@ -64,7 +66,12 @@ var EditableCell = function EditableCell(props) {
   if (editableType === 'single') {
     return /*#__PURE__*/React.createElement("td", _extends({}, restProps, {
       className: "ant-table-cell ".concat(isAddColumn && editConfig.editHeardCellKey === dataIndex ? 'border-right' : '', " ")
-    }), editable && editConfig.curRow === rowIndex ? getDataCell(props) : children);
+    }), editable && editConfig.curRow === rowIndex ? getDataCell(props) : /*#__PURE__*/React.createElement(Texty, {
+      tooltipStyle: {
+        wordWrap: 'break-word'
+      },
+      tooltipMaxWidth: 800
+    }, children));
   }
 
   if (editableType === 'freedom') {
@@ -73,12 +80,22 @@ var EditableCell = function EditableCell(props) {
       onClick: onCellClick
     }, restProps, {
       className: "ant-table-cell ".concat(isAddColumn && editConfig.editHeardCellKey === dataIndex ? 'border-right' : '', " ")
-    }), editable && (isFreeEditRow(editConfig.curRow, rowIndex) || isFreeEditCell(editConfig.editCellKey, dataIndex, rowIndex)) ? getDataCell(props) : children);
+    }), editable && (isFreeEditRow(editConfig.curRow, rowIndex) || isFreeEditCell(editConfig.editCellKey, dataIndex, rowIndex)) ? getDataCell(props) : /*#__PURE__*/React.createElement(Texty, {
+      tooltipStyle: {
+        wordWrap: 'break-word'
+      },
+      tooltipMaxWidth: 800
+    }, children));
   }
 
   return /*#__PURE__*/React.createElement("td", _extends({}, restProps, {
     className: "ant-table-cell ".concat(isAddColumn && editConfig.editHeardCellKey === dataIndex ? 'border-right' : '', " ")
-  }), editable ? getDataCell(props) : children);
+  }), editable ? getDataCell(props) : /*#__PURE__*/React.createElement(Texty, {
+    tooltipStyle: {
+      wordWrap: 'break-word'
+    },
+    tooltipMaxWidth: 800
+  }, children));
 };
 
 export default EditableCell;

package/es/comps/Editable/comps/Texty.css

@@ -0,0 +1,40 @@
+[data-texty] {
+  width: 100%;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-texty-tooltip] {
+  margin: 6px 0;
+  padding: 4px 10px;
+  border-radius: 4px;
+  background-color: #222;
+  color: #fff;
+  z-index: 99999;
+}
+[data-texty-arrow] {
+  position: absolute;
+  bottom: -6px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 6px 6px 0;
+  border-color: #222 transparent transparent;
+}
+[data-texty-arrow*='bottom'] {
+  top: -6px;
+  bottom: inherit;
+  transform: rotate(180deg);
+}
+/* disable the builtin tooltip for truncated text on Safari */
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  @supports (not (-ms-ime-align: auto)) {
+    .EllipsisText::before {
+      content: '';
+      display: block;
+      width: 0;
+      height: 0;
+    }
+  }
+}

package/es/comps/Editable/comps/Texty.d.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+import './Texty.less';
+export interface ITextyProps {
+    /** 样式名 */
+    className?: string;
+    /**
+     * 获取组件的ref 默认undefined
+     */
+    innerRef?: Function;
+    /**
+     * tooltip的渲染元素 默认div
+     */
+    tagName?: string;
+    /**
+     * 提示框内容 默认为children
+     */
+    tooltip?: React.ReactElement;
+    /**
+     *  tooltip的className
+     */
+    tooltipClassName?: string;
+    /**
+     * tooltip的Style
+     */
+    tooltipStyle?: React.CSSProperties;
+    /**
+     * tooltip的最大宽度
+     */
+    tooltipMaxWidth?: number;
+    /**
+     *  鼠标移入后 多久显示
+     */
+    showDelay?: number;
+    /**
+     * 鼠标移出后 多久隐藏
+     */
+    hideDelay?: number;
+    /**
+     * 箭头的className
+     */
+    arrowClassName?: string;
+    /**
+     *  隐藏箭头
+     */
+    hideArrow?: boolean;
+    /**
+     * tooltip位置
+     */
+    placement?: 'auto' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+    /**
+     * 附加tooltip的HTML元素**在大多数情况下，您无需手动设置**
+     */
+    container?: any;
+    /** 鼠标移出事件 */
+    onMouseLeave?: (e: any) => void;
+    /** 鼠标移入事件 */
+    onMouseEnter?: (e: any) => void;
+}
+/**
+ * 基于Popper的tooltip
+ */
+declare class Texty extends React.PureComponent<ITextyProps, any> {
+    state: {
+        isHovered: boolean;
+    };
+    private listenTimer;
+    private targetNode;
+    private hideTimer;
+    private showTimer;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    renderTooltip: ({ ref, style, placement, arrowProps, }: any) => React.ReactPortal;
+    setTargetRef: (ref: any) => void;
+    handleMouseEvent: (e: any) => void;
+    handleScroll: (e: any) => void;
+    _clearListenTimer(): void;
+    _clearShowTimer(): void;
+    _clearHideTimer(): void;
+    handleMouseEnter: (e: any) => void;
+    handleMouseLeave: (e: any) => void;
+}
+export default Texty;

package/es/comps/Editable/comps/Texty.js

@@ -0,0 +1,277 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+var _excluded = ["tagName", "children", "placement", "innerRef", "showDelay", "hideDelay", "tooltip", "tooltipClassName", "tooltipStyle", "tooltipMaxWidth", "hideArrow", "container"];
+import React from 'react';
+import ReactDom from 'react-dom';
+import { Popper } from 'react-popper';
+import "./Texty.css";
+var modifiers = [{
+  name: 'preventOverflow',
+  options: {
+    mainAxis: true,
+    padding: 10
+  }
+}];
+/**
+ * 基于Popper的tooltip
+ */
+
+var Texty = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Texty, _React$PureComponent);
+
+  var _super = _createSuper(Texty);
+
+  function Texty() {
+    var _this;
+
+    _classCallCheck(this, Texty);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.state = {
+      isHovered: false
+    };
+    _this.listenTimer = void 0;
+    _this.targetNode = void 0;
+    _this.hideTimer = void 0;
+    _this.showTimer = void 0;
+
+    _this.renderTooltip = function (_ref) {
+      var ref = _ref.ref,
+          style = _ref.style,
+          placement = _ref.placement,
+          arrowProps = _ref.arrowProps;
+      var _this$props = _this.props,
+          children = _this$props.children,
+          container = _this$props.container,
+          tooltip = _this$props.tooltip,
+          tooltipClassName = _this$props.tooltipClassName,
+          tooltipStyle = _this$props.tooltipStyle,
+          tooltipMaxWidth = _this$props.tooltipMaxWidth,
+          arrowClassName = _this$props.arrowClassName,
+          hideArrow = _this$props.hideArrow;
+      var content = tooltip || children;
+      var extraStyle = tooltipMaxWidth ? _objectSpread(_objectSpread({}, tooltipStyle), {}, {
+        maxWidth: tooltipMaxWidth
+      }) : tooltipStyle;
+      return /*#__PURE__*/ReactDom.createPortal( /*#__PURE__*/React.createElement("div", {
+        ref: ref,
+        "data-texty-tooltip": placement,
+        className: tooltipClassName,
+        style: extraStyle ? _objectSpread(_objectSpread({}, style), extraStyle) : style,
+        onClick: _this.handleMouseEvent,
+        onDoubleClick: _this.handleMouseEvent,
+        onContextMenu: _this.handleMouseEvent,
+        onMouseDown: _this.handleMouseEvent,
+        onMouseUp: _this.handleMouseEvent
+      }, content, !hideArrow && /*#__PURE__*/React.createElement("div", {
+        ref: arrowProps.ref,
+        "data-texty-arrow": placement,
+        className: arrowClassName,
+        style: arrowProps.style
+      })), container || _this.targetNode.ownerDocument.body);
+    };
+
+    _this.setTargetRef = function (ref) {
+      _this.props.innerRef && _this.props.innerRef(ref);
+      _this.targetNode = ref; // console.log("setTargetRef",ref,this.targetNode)
+    };
+
+    _this.handleMouseEvent = function (e) {
+      e.stopPropagation();
+    };
+
+    _this.handleScroll = function (e) {
+      var _e$srcElement, _e$srcElement2;
+
+      if ((e === null || e === void 0 ? void 0 : (_e$srcElement = e.srcElement) === null || _e$srcElement === void 0 ? void 0 : _e$srcElement.className) === 'contract-trigger') {
+        return;
+      }
+
+      if ((e === null || e === void 0 ? void 0 : (_e$srcElement2 = e.srcElement) === null || _e$srcElement2 === void 0 ? void 0 : _e$srcElement2.className) === 'texty-scroll') {
+        return;
+      }
+
+      _this.setState({
+        isHovered: false
+      });
+    };
+
+    _this.handleMouseEnter = function (e) {
+      // console.log('handleMouseEnter');
+      // eslint-disable-next-line react/prop-types
+      var _this$props2 = _this.props,
+          showDelay = _this$props2.showDelay,
+          onMouseEnter = _this$props2.onMouseEnter;
+      onMouseEnter && onMouseEnter(e);
+
+      _this._clearHideTimer();
+
+      if (!showDelay) {
+        _this.setState({
+          isHovered: true
+        });
+
+        return;
+      }
+
+      _this.showTimer = setTimeout(function () {
+        _this.setState({
+          isHovered: true
+        });
+
+        delete _this.showTimer;
+      }, showDelay);
+    };
+
+    _this.handleMouseLeave = function (e) {
+      // console.log('handleMouseLeave');
+      // eslint-disable-next-line react/prop-types
+      var _this$props3 = _this.props,
+          hideDelay = _this$props3.hideDelay,
+          onMouseLeave = _this$props3.onMouseLeave;
+      onMouseLeave && onMouseLeave(e);
+
+      _this._clearShowTimer();
+
+      var isHovered = _this.state.isHovered;
+      if (!isHovered) return;
+
+      if (!hideDelay) {
+        _this.setState({
+          isHovered: false
+        });
+
+        return;
+      }
+
+      _this.hideTimer = setTimeout(function () {
+        _this.setState({
+          isHovered: false
+        });
+
+        delete _this.hideTimer;
+      }, hideDelay);
+    };
+
+    return _this;
+  }
+
+  _createClass(Texty, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var _this2 = this;
+
+      // console.log(this.state);
+      if (this.state.isHovered) {
+        window.addEventListener('scroll', this.handleScroll, true); // react - virtualized - auto - sizer would trigger scroll events after tooltip shown in some case,we have to skip those scroll events
+
+        this.listenTimer = setTimeout(function () {
+          window.removeEventListener('scroll', _this2.handleScroll, true);
+          window.addEventListener('scroll', _this2.handleScroll, true);
+          delete _this2.listenTimer;
+        }, 50);
+      } else {
+        this._clearListenTimer();
+
+        window.removeEventListener('scroll', this.handleScroll, true);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this._clearListenTimer();
+
+      window.removeEventListener('scroll', this.handleScroll, true);
+
+      this._clearShowTimer();
+
+      this._clearHideTimer();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      /* eslint-disable no-unused-vars */
+      var _this$props4 = this.props,
+          tagName = _this$props4.tagName,
+          children = _this$props4.children,
+          placement = _this$props4.placement,
+          innerRef = _this$props4.innerRef,
+          showDelay = _this$props4.showDelay,
+          hideDelay = _this$props4.hideDelay,
+          tooltip = _this$props4.tooltip,
+          tooltipClassName = _this$props4.tooltipClassName,
+          tooltipStyle = _this$props4.tooltipStyle,
+          tooltipMaxWidth = _this$props4.tooltipMaxWidth,
+          hideArrow = _this$props4.hideArrow,
+          container = _this$props4.container,
+          rest = _objectWithoutProperties(_this$props4, _excluded);
+      /* eslint-enable no-unused-vars */
+
+
+      var Tag = tagName;
+
+      if (!children) {
+        return null; // return <Tag { ...rest } ref={ this.setTargetRef } data-texty={ false } />;
+      }
+
+      var target = this.targetNode;
+      var isTruncated = !!target && target.scrollWidth > target.offsetWidth;
+      var showTooltip = this.state.isHovered && isTruncated; // console.log("showTooltip",showTooltip)
+
+      return /*#__PURE__*/React.createElement(Tag, _extends({}, rest, {
+        ref: this.setTargetRef,
+        "data-texty": showTooltip,
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave
+      }), children, showTooltip && /*#__PURE__*/React.createElement(Popper, {
+        referenceElement: target,
+        placement: placement,
+        modifiers: modifiers
+      }, this.renderTooltip));
+    }
+  }, {
+    key: "_clearListenTimer",
+    value: function _clearListenTimer() {
+      if (this.listenTimer) {
+        clearTimeout(this.listenTimer);
+        delete this.listenTimer;
+      }
+    }
+  }, {
+    key: "_clearShowTimer",
+    value: function _clearShowTimer() {
+      if (this.showTimer) {
+        clearTimeout(this.showTimer);
+        delete this.showTimer;
+      }
+    }
+  }, {
+    key: "_clearHideTimer",
+    value: function _clearHideTimer() {
+      if (this.hideTimer) {
+        clearTimeout(this.hideTimer);
+        delete this.hideTimer;
+      }
+    }
+  }]);
+
+  return Texty;
+}(React.PureComponent);
+
+Texty.defaultProps = {
+  tagName: 'div',
+  showDelay: 150,
+  hideDelay: 150,
+  hideArrow: true,
+  placement: 'top'
+};
+export default Texty;

package/es/comps/Editable/comps/index.css

@@ -1,12 +1,15 @@
+.ant-table-th {
+  position: relative;
+}
 .editable-th-hover-add {
   position: absolute;
-  right: -16px;
-  top: -30px;
+  right: -3px;
+  top: -8px;
 }
 .editable-th-hover-delete {
   position: absolute;
-  right: 16px;
-  top: -30px;
+  right: 15px;
+  top: -8px;
 }
 .display-none {
   display: none;

package/es/comps/Editable/index.css

@@ -22,6 +22,13 @@
   background-color: #ebebeb;
   border-right: 1px solid #f2f2f2;
 }
+.ronds-edit-table .ant-table-fixed {
+  table-layout: fixed;
+}
+.ronds-edit-table .ant-table-tbody > tr > td {
+  word-wrap: break-word;
+  word-break: break-all;
+}
 .ronds-edit-table .ant-table.ant-table-small .ant-table-title,
 .ronds-edit-table .ant-table.ant-table-small .ant-table-footer,
 .ronds-edit-table .ant-table.ant-table-small .ant-table-thead > tr > th,

package/es/comps/Editable/index.js

@@ -292,8 +292,8 @@ var Editable = function Editable(props) {
         dataKey: '_aciton_',
         title: '操作',
         width: 40,
-        frozen: 'right',
         ellipsis: true,
+        fixed: 'left',
         render: function render(val, record) {
           return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditableAction, {
             type: type,
@@ -375,9 +375,8 @@ var Editable = function Editable(props) {
   }, /*#__PURE__*/React.createElement(_Table, _extends({
     className: "ronds-edit-table",
     bordered: true,
-    tableLayout: "auto",
     scroll: {
-      x: true,
+      x: '100%',
       y: 'calc(100% - 40px)'
     }
   }, tableProps, {
@@ -405,8 +404,8 @@ var Editable = function Editable(props) {
     block: true,
     type: "dashed",
     style: {
-      marginBottom: 16,
-      marginTop: 16
+      marginBottom: '5px',
+      marginTop: '5px'
     },
     onClick: onAddRow
   }, "\u6DFB\u52A0\u4E00\u884C")));

package/es/utils.js

@@ -1,10 +1,7 @@
 /*
- * @Author: your name
+ * @Author: wangxian
  * @Date: 2021-09-18 14:15:04
- * @LastEditTime: 2021-12-22 14:10:34
- * @LastEditors: your name
- * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- * @FilePath: \ronds.metadata\src\utils.ts
+ * @LastEditTime: 2022-04-13 15:00:29
  */
 import { useCallback, useEffect, useRef } from 'react';
 /** 防抖 */

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "ronds-metadata",
-  "version": "1.0.64",
+  "version": "1.0.67",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -44,21 +44,22 @@
     "markdown-it": "^12.3.2",
     "markdown-it-emoji": "^2.0.0",
     "qs": "^6.10.1",
-    "react": "^16.12.0",
+    "react": "^17.0.2",
     "react-color": "^2.19.3",
     "react-markdown-editor-lite": "^1.3.2",
+    "react-popper": "^2.2.3",
     "rxjs": "^7.5.4"
   },
   "peerDependencies": {
     "antd": ">=4.1.5",
-    "react": ">=16.12.0",
-    "react-dom": ">=16.12.0",
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0",
     "react-router": ">=5.0.0",
     "styled-components": ">=4.1.1"
   },
   "devDependencies": {
-    "@types/react": "^16.9.48",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
     "@types/react-router": "^5.1.8",
     "@types/react-window": "^1.8.2",
     "@types/styled-components": "^5.1.2",

package/es/comps/AutoSize/detectElementResize.d.ts

@@ -1,4 +0,0 @@
-export default function createDetectElementResize(nonce: any): {
-    addResizeListener: (element: any, fn: any) => void;
-    removeResizeListener: (element: any, fn: any) => void;
-};

package/es/comps/AutoSize/detectElementResize.js

@@ -1,195 +0,0 @@
-// @ts-nocheck
-export default function createDetectElementResize(nonce) {
-  // Check `document` and `window` in case of server-side rendering
-  var _window;
-
-  if (typeof window !== 'undefined') {
-    _window = window;
-  } else {
-    _window = global;
-  }
-
-  var attachEvent = typeof document !== 'undefined' && document.attachEvent;
-
-  if (!attachEvent) {
-    var requestFrame = function () {
-      var raf = _window.requestAnimationFrame || _window.mozRequestAnimationFrame || _window.webkitRequestAnimationFrame || function (fn) {
-        return _window.setTimeout(fn, 20);
-      };
-
-      return function (fn) {
-        return raf(fn);
-      };
-    }();
-
-    var cancelFrame = function () {
-      var cancel = _window.cancelAnimationFrame || _window.mozCancelAnimationFrame || _window.webkitCancelAnimationFrame || _window.clearTimeout;
-      return function (id) {
-        return cancel(id);
-      };
-    }();
-
-    var resetTriggers = function resetTriggers(element) {
-      var triggers = element.__resizeTriggers__,
-          expand = triggers.firstElementChild,
-          contract = triggers.lastElementChild,
-          expandChild = expand.firstElementChild;
-      contract.scrollLeft = contract.scrollWidth;
-      contract.scrollTop = contract.scrollHeight;
-      expandChild.style.width = expand.offsetWidth + 1 + 'px';
-      expandChild.style.height = expand.offsetHeight + 1 + 'px';
-      expand.scrollLeft = expand.scrollWidth;
-      expand.scrollTop = expand.scrollHeight;
-    };
-
-    var checkTriggers = function checkTriggers(element) {
-      return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
-    };
-
-    var scrollListener = function scrollListener(e) {
-      // Don't measure (which forces) reflow for scrolls that happen inside of children!
-      if (e.target.className.indexOf('contract-trigger') < 0 && e.target.className.indexOf('expand-trigger') < 0) {
-        return;
-      }
-
-      var element = this;
-      resetTriggers(this);
-
-      if (this.__resizeRAF__) {
-        cancelFrame(this.__resizeRAF__);
-      }
-
-      this.__resizeRAF__ = requestFrame(function () {
-        if (checkTriggers(element)) {
-          element.__resizeLast__.width = element.offsetWidth;
-          element.__resizeLast__.height = element.offsetHeight;
-
-          element.__resizeListeners__.forEach(function (fn) {
-            fn.call(element, e);
-          });
-        }
-      });
-    };
-    /* Detect CSS Animations support to detect element display/re-attach */
-
-
-    var animation = false,
-        keyframeprefix = '',
-        animationstartevent = 'animationstart',
-        domPrefixes = 'Webkit Moz O ms'.split(' '),
-        startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' '),
-        pfx = ''; // {
-
-    var elm = document.createElement('fakeelement');
-
-    if (elm.style.animationName !== undefined) {
-      animation = true;
-    }
-
-    if (animation === false) {
-      for (var i = 0; i < domPrefixes.length; i++) {
-        if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
-          pfx = domPrefixes[i];
-          keyframeprefix = '-' + pfx.toLowerCase() + '-';
-          animationstartevent = startEvents[i];
-          animation = true;
-          break;
-        }
-      }
-    } // }
-
-
-    var animationName = 'resizeanim';
-    var animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
-    var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
-  }
-
-  var createStyles = function createStyles(doc) {
-    if (!doc.getElementById('detectElementResize')) {
-      //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
-      var css = (animationKeyframes ? animationKeyframes : '') + '.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
-          head = doc.head || doc.getElementsByTagName('head')[0],
-          style = doc.createElement('style');
-      style.id = 'detectElementResize';
-      style.type = 'text/css';
-
-      if (nonce !== null) {
-        style.setAttribute('nonce', nonce);
-      }
-
-      if (style.styleSheet) {
-        style.styleSheet.cssText = css;
-      } else {
-        style.appendChild(doc.createTextNode(css));
-      }
-
-      head.appendChild(style);
-    }
-  };
-
-  var addResizeListener = function addResizeListener(element, fn) {
-    if (attachEvent) {
-      element.attachEvent('onresize', fn);
-    } else {
-      if (!element.__resizeTriggers__) {
-        var doc = element.ownerDocument;
-
-        var elementStyle = _window.getComputedStyle(element);
-
-        if (elementStyle && elementStyle.position === 'static') {
-          element.style.position = 'relative';
-        }
-
-        createStyles(doc);
-        element.__resizeLast__ = {};
-        element.__resizeListeners__ = [];
-        (element.__resizeTriggers__ = doc.createElement('div')).className = 'resize-triggers';
-        element.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>';
-        element.appendChild(element.__resizeTriggers__);
-        resetTriggers(element);
-        element.addEventListener('scroll', scrollListener, true);
-        /* Listen for a css animation to detect element display/re-attach */
-
-        if (animationstartevent) {
-          element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
-            if (e.animationName === animationName) {
-              resetTriggers(element);
-            }
-          };
-
-          element.__resizeTriggers__.addEventListener(animationstartevent, element.__resizeTriggers__.__animationListener__);
-        }
-      }
-
-      element.__resizeListeners__.push(fn);
-    }
-  };
-
-  var removeResizeListener = function removeResizeListener(element, fn) {
-    if (attachEvent) {
-      element.detachEvent('onresize', fn);
-    } else {
-      element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
-
-      if (!element.__resizeListeners__.length) {
-        element.removeEventListener('scroll', scrollListener, true);
-
-        if (element.__resizeTriggers__.__animationListener__) {
-          element.__resizeTriggers__.removeEventListener(animationstartevent, element.__resizeTriggers__.__animationListener__);
-
-          element.__resizeTriggers__.__animationListener__ = null;
-        }
-
-        try {
-          element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
-        } catch (e) {// Preact compat; see developit/preact-compat/issues/228
-        }
-      }
-    }
-  };
-
-  return {
-    addResizeListener: addResizeListener,
-    removeResizeListener: removeResizeListener
-  };
-}

package/es/comps/AutoSize/index.d.ts

@@ -1,57 +0,0 @@
-import * as React from 'react';
-export declare type Size = {
-    height: number;
-    width: number;
-};
-export interface Props {
-    /** 子组件 */
-    children: (size: Size) => React.ReactElement;
-    /** 样式名  */
-    className?: string;
-    /** 默认高度 一般用于ssr */
-    defaultHeight?: number;
-    /** 默认高度 */
-    defaultWidth?: number;
-    /** 禁止高度变化  */
-    disableHeight: boolean;
-    /** 禁止宽度变化 */
-    disableWidth: boolean;
-    /** Nonce of the inlined stylesheet for Content Security Policy */
-    nonce?: string;
-    /** Callback to be invoked on-resize */
-    onResize: (size: Size) => void;
-    /** 被隐藏时是否渲染 DOM 结构  默认不渲染 */
-    forceRender?: boolean;
-    /** 样式*/
-    style?: Object;
-}
-declare type State = {
-    height: number;
-    width: number;
-};
-declare type ResizeHandler = (element: HTMLElement, onResize: () => void) => void;
-declare type DetectElementResize = {
-    addResizeListener: ResizeHandler;
-    removeResizeListener: ResizeHandler;
-};
-export default class AutoSizer extends React.PureComponent<Props, State> {
-    static defaultProps: {
-        onResize: () => void;
-        disableHeight: boolean;
-        disableWidth: boolean;
-        style: {};
-    };
-    state: {
-        height: number;
-        width: number;
-    };
-    _parentNode?: HTMLElement;
-    _autoSizer?: HTMLElement;
-    _detectElementResize: DetectElementResize;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-    _onResize: () => void;
-    _setRef: (autoSizer?: HTMLElement) => void;
-}
-export {};

package/es/comps/AutoSize/index.js

@@ -1,158 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import * as React from 'react';
-import createDetectElementResize from './detectElementResize';
-
-var AutoSizer = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(AutoSizer, _React$PureComponent);
-
-  var _super = _createSuper(AutoSizer);
-
-  function AutoSizer() {
-    var _this;
-
-    _classCallCheck(this, AutoSizer);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.state = {
-      height: _this.props.defaultHeight || 0,
-      width: _this.props.defaultWidth || 0
-    };
-    _this._parentNode = void 0;
-    _this._autoSizer = void 0;
-    _this._detectElementResize = void 0;
-
-    _this._onResize = function () {
-      var _this$props = _this.props,
-          disableHeight = _this$props.disableHeight,
-          disableWidth = _this$props.disableWidth,
-          onResize = _this$props.onResize;
-
-      if (_this._parentNode) {
-        // Guard against AutoSizer component being removed from the DOM immediately after being added.
-        // This can result in invalid style values which can result in NaN values if we don't handle them.
-        // See issue #150 for more context.
-        var height = _this._parentNode.offsetHeight || 0;
-        var width = _this._parentNode.offsetWidth || 0;
-        var style = window.getComputedStyle(_this._parentNode) || {};
-        var paddingLeft = parseInt(style.paddingLeft, 10) || 0;
-        var paddingRight = parseInt(style.paddingRight, 10) || 0;
-        var paddingTop = parseInt(style.paddingTop, 10) || 0;
-        var paddingBottom = parseInt(style.paddingBottom, 10) || 0;
-        var newHeight = height - paddingTop - paddingBottom;
-        var newWidth = width - paddingLeft - paddingRight;
-
-        if (!disableHeight && _this.state.height !== newHeight || !disableWidth && _this.state.width !== newWidth) {
-          _this.setState({
-            height: height - paddingTop - paddingBottom,
-            width: width - paddingLeft - paddingRight
-          });
-
-          onResize({
-            height: height,
-            width: width
-          });
-        }
-      }
-    };
-
-    _this._setRef = function (autoSizer) {
-      _this._autoSizer = autoSizer;
-    };
-
-    return _this;
-  }
-
-  _createClass(AutoSizer, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var nonce = this.props.nonce;
-
-      if (this._autoSizer && this._autoSizer.parentNode && this._autoSizer.parentNode.ownerDocument && this._autoSizer.parentNode.ownerDocument.defaultView && this._autoSizer.parentNode instanceof this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement) {
-        // Delay access of parentNode until mount.
-        // This handles edge-cases where the component has already been unmounted before its ref has been set,
-        // As well as libraries like react-lite which have a slightly different lifecycle.
-        this._parentNode = this._autoSizer.parentNode; // Defer requiring resize handler in order to support server-side rendering.
-        // See issue #41
-
-        this._detectElementResize = createDetectElementResize(nonce);
-
-        this._detectElementResize.addResizeListener(this._parentNode, this._onResize);
-
-        this._onResize();
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this._detectElementResize && this._parentNode) {
-        this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          children = _this$props2.children,
-          className = _this$props2.className,
-          disableHeight = _this$props2.disableHeight,
-          disableWidth = _this$props2.disableWidth,
-          style = _this$props2.style,
-          forceRender = _this$props2.forceRender;
-      var _this$state = this.state,
-          height = _this$state.height,
-          width = _this$state.width; // Outer div should not force width/height since that may prevent containers from shrinking.
-      // Inner component should overflow and use calculated width/height.
-      // See issue #68 for more information.
-
-      var outerStyle = {
-        overflow: 'visible'
-      };
-      var childParams = {}; // Avoid rendering children before the initial measurements have been collected.
-      // At best this would just be wasting cycles.
-
-      var bailoutOnChildren = false;
-
-      if (!disableHeight) {
-        if (height === 0) {
-          bailoutOnChildren = true;
-        }
-
-        outerStyle.height = 0;
-        childParams.height = height;
-      }
-
-      if (!disableWidth) {
-        if (width === 0) {
-          bailoutOnChildren = true;
-        }
-
-        outerStyle.width = 0;
-        childParams.width = width;
-      }
-
-      return /*#__PURE__*/React.createElement("div", {
-        className: className,
-        ref: this._setRef,
-        style: _objectSpread(_objectSpread({}, outerStyle), style)
-      }, (!bailoutOnChildren || forceRender) && children(childParams));
-    }
-  }]);
-
-  return AutoSizer;
-}(React.PureComponent);
-
-AutoSizer.defaultProps = {
-  onResize: function onResize() {},
-  disableHeight: false,
-  disableWidth: false,
-  style: {}
-};
-export { AutoSizer as default };