linkmore-design 1.0.13 → 1.0.16

package/es/CkFilter/filter.js

@@ -21,8 +21,6 @@ var _baseFilter = _interopRequireDefault(require("./baseFilter"));
 
 var _complexFilter = _interopRequireDefault(require("./complexFilter"));
 
-var _modal = _interopRequireDefault(require("./components/modal"));
-
 var _context = require("./context");
 
 var _customFilter = _interopRequireDefault(require("./customFilter"));
@@ -31,6 +29,8 @@ var _radioGroup = _interopRequireDefault(require("./customFilter/radioGroup"));
 
 var _utils = require("./utils");
 
+// import CustomModal from './components/modal'
+
 /*
  * data
  *
@@ -147,7 +147,7 @@ var Filter = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: "lm_filter_base"
   }, custom && /*#__PURE__*/_react.default.createElement(_customFilter.default, null), levelGroup && /*#__PURE__*/_react.default.createElement(_radioGroup.default, null), (custom || levelGroup) && /*#__PURE__*/_react.default.createElement("div", {
     className: "line"
-  }), /*#__PURE__*/_react.default.createElement(_baseFilter.default, null), complex && /*#__PURE__*/_react.default.createElement(_complexFilter.default, null), /*#__PURE__*/_react.default.createElement(_modal.default, null)));
+  }), /*#__PURE__*/_react.default.createElement(_baseFilter.default, null), complex && /*#__PURE__*/_react.default.createElement(_complexFilter.default, null)));
 });
 var _default = Filter;
 exports.default = _default;

package/es/CkFilter/style/style.css

@@ -621,46 +621,49 @@ html {
 .ant-dropdown *::-webkit-scrollbar-thumb:hover {
   background-color: #999;
 }
-.ant-dropdown .filter_dropdown {
+.filter_dropdown {
   display: flex;
   flex-flow: column;
   box-shadow: 0 2px 6px var(--box-shadow-color);
   background-color: #fff;
 }
-.ant-dropdown .filter_dropdown .filter_header {
+.filter_dropdown .filter_header {
   min-height: 40px;
   border-bottom: 1px solid #eee;
   padding: 8px;
 }
-.ant-dropdown .filter_dropdown .filter_header .filter_header_operate {
+.filter_dropdown .filter_header .filter_header_operate {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.ant-dropdown .filter_dropdown .filter_header .filter_header_operate .filter_reset {
+.filter_dropdown .filter_header .filter_header_operate .filter_reset {
   font-size: 12px;
   color: var(--primary-color);
   cursor: pointer;
 }
-.ant-dropdown .filter_dropdown .filter_header .filter_header_operate .filter_tip {
+.filter_dropdown .filter_header .filter_header_operate .filter_tip {
   font-size: 12px;
   color: var(--text-color);
 }
-.ant-dropdown .filter_dropdown .filter_header input {
+.filter_dropdown .filter_header .ant-input-group {
+  line-height: 1;
+}
+.filter_dropdown .filter_header input {
   font-size: 12px;
 }
-.ant-dropdown .filter_dropdown .filter_header .ant-input-search + .filter_header_operate {
+.filter_dropdown .filter_header .ant-input-search + .filter_header_operate {
   margin-top: 8px;
 }
-.ant-dropdown .filter_dropdown .filter_body {
+.filter_dropdown .filter_body {
   width: 100%;
 }
-.ant-dropdown .filter_dropdown .filter_body .virtual_list {
+.filter_dropdown .filter_body .virtual_list {
   min-width: 160px;
   max-height: 224px;
   overflow: auto;
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item {
+.filter_dropdown .filter_body .filter_item {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -672,34 +675,34 @@ html {
   white-space: nowrap;
   cursor: pointer;
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item.add_more {
+.filter_dropdown .filter_body .filter_item.add_more {
   border-top: 1px solid var(--stripe-color);
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item .filter_item_content {
+.filter_dropdown .filter_body .filter_item .filter_item_content {
   flex: auto;
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item .filter_item_operate .hover_show {
+.filter_dropdown .filter_body .filter_item .filter_item_operate .hover_show {
   font-size: 16px;
   color: #8C8C8C;
   transition: 0.3s;
   opacity: 0;
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item .filter_item_operate .hover_show:hover {
+.filter_dropdown .filter_body .filter_item .filter_item_operate .hover_show:hover {
   color: var(--primary-color);
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item[disabled] {
+.filter_dropdown .filter_body .filter_item[disabled] {
   display: none;
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item.checked {
+.filter_dropdown .filter_body .filter_item.checked {
   background-color: var(--primary-select-color);
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item:hover {
+.filter_dropdown .filter_body .filter_item:hover {
   background-color: var(--stripe-color);
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item:hover .filter_item_operate .icon_top {
+.filter_dropdown .filter_body .filter_item:hover .filter_item_operate .icon_top {
   opacity: 1;
 }
-.ant-dropdown .filter_dropdown .filter_footer {
+.filter_dropdown .filter_footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -709,24 +712,24 @@ html {
   border-top: 1px solid #eee;
   letter-spacing: 1px;
 }
-.ant-dropdown .filter_dropdown .filter_footer button {
+.filter_dropdown .filter_footer button {
   font-size: 12px;
   padding: 0 8px;
 }
-.ant-dropdown .filter_dropdown .filter_footer .footer_save {
+.filter_dropdown .filter_footer .footer_save {
   color: var(--primary-color);
   cursor: pointer;
   transition: 0.3s;
 }
-.ant-dropdown .filter_dropdown .filter_footer .footer_clear {
+.filter_dropdown .filter_footer .footer_clear {
   color: var(--text-color);
   cursor: pointer;
   transition: 0.3s;
 }
-.ant-dropdown .filter_dropdown .filter_footer .footer_clear:hover {
+.filter_dropdown .filter_footer .footer_clear:hover {
   color: var(--font-color);
 }
-.ant-dropdown .filter_dropdown .filter_empty {
+.filter_dropdown .filter_empty {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -735,11 +738,11 @@ html {
   color: #666;
   padding: 0 8px;
 }
-.ant-dropdown .filter_dropdown .ant-checkbox-wrapper {
+.filter_dropdown .ant-checkbox-wrapper {
   font-size: 12px;
   align-items: center;
 }
-.ant-dropdown .filter_dropdown .ant-checkbox-wrapper .ant-checkbox {
+.filter_dropdown .ant-checkbox-wrapper .ant-checkbox {
   top: initial;
 }
 .ant-drawer .ant-drawer-header {
@@ -904,6 +907,45 @@ html {
   background-color: var(--border-color);
   z-index: 4;
 }
+.ant-drawer.lm_det_drawer .checkbox_tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  height: 24px;
+  border-radius: 2px;
+  color: var(--font-color);
+  background-color: var(--stripe-color);
+  padding: 0 8px;
+  transition: 0.3s;
+  cursor: pointer;
+}
+.ant-drawer.lm_det_drawer .checkbox_tag:hover,
+.ant-drawer.lm_det_drawer .checkbox_tag.active {
+  color: #fff;
+  background-color: var(--primary-color);
+}
+.ant-drawer.lm_det_drawer .ant-form-item {
+  margin-bottom: 16px;
+}
+.ant-drawer.lm_det_drawer .ant-form-item .ant-form-item-label > label {
+  font-size: 12px;
+}
+.ant-drawer.lm_det_drawer .auto_height {
+  max-height: 418px;
+  overflow-y: auto;
+}
+.ant-drawer.lm_det_drawer .ant-radio-wrapper {
+  display: inline-flex;
+  align-items: center;
+  font-size: 12px;
+}
+.ant-drawer.lm_det_drawer .ant-radio-wrapper .ant-radio {
+  top: 0;
+}
+.ant-drawer.lm_det_drawer .ant-select {
+  font-size: 12px;
+}
 .ant-modal .custom_modal .checkbox_tag {
   display: inline-flex;
   align-items: center;

package/es/Dropdown/index.d.ts

@@ -3,6 +3,7 @@ import { DropdownProps, Dropdown } from 'antd';
 export interface IDropdownProps extends DropdownProps {
     className?: string;
     style?: React.CSSProperties;
+    dropdownmatchwidth?: boolean;
 }
 interface LmDropdownInterface extends React.FC<IDropdownProps> {
     Button?: typeof Dropdown.Button;

package/es/Dropdown/index.js

@@ -1,5 +1,6 @@
 import "antd/es/dropdown/style";
 import _Dropdown from "antd/es/dropdown";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -14,7 +15,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import React from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import classNames from 'classnames';
 var prefixCls = 'lm_dropdown';
 
@@ -22,24 +23,94 @@ var CLMDropdown = function CLMDropdown(props) {
   var children = props.children,
       className = props.className,
       overlayClassName = props.overlayClassName,
-      others = __rest(props, ["children", "className", "overlayClassName"]);
+      _props$dropdownmatchw = props.dropdownmatchwidth,
+      dropdownmatchwidth = _props$dropdownmatchw === void 0 ? false : _props$dropdownmatchw,
+      others = __rest(props, ["children", "className", "overlayClassName", "dropdownmatchwidth"]);
 
-  return /*#__PURE__*/React.createElement(_Dropdown, Object.assign({
+  var dropdownRef = useRef(null);
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      minwidth = _useState2[0],
+      setMinWidth = _useState2[1];
+
+  useEffect(function () {
+    var _a, _b, _c;
+
+    if (dropdownmatchwidth) {
+      var dropdown_dom = (_a = dropdownRef.current.getElementsByClassName("lm_dropdown")) === null || _a === void 0 ? void 0 : _a[0];
+
+      if (dropdown_dom) {
+        console.log((_b = dropdown_dom.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width);
+        setMinWidth(((_c = dropdown_dom.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.width) || '');
+      }
+    }
+  }, []);
+
+  if (!dropdownmatchwidth) {
+    return /*#__PURE__*/React.createElement(_Dropdown, Object.assign({
+      className: classNames(className, prefixCls)
+    }, others, {
+      overlayClassName: classNames(overlayClassName, 'lm_dropdown_overlay')
+    }), children);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dropdownRef
+  }, /*#__PURE__*/React.createElement(_Dropdown, Object.assign({
     className: classNames(className, prefixCls)
   }, others, {
-    overlayClassName: classNames(overlayClassName, 'lm_dropdown_overlay')
-  }), children);
+    overlayClassName: classNames(overlayClassName, 'lm_dropdown_overlay'),
+    overlayStyle: minwidth ? Object.assign({
+      minWidth: minwidth
+    }, others.overlayStyle) : Object.assign({}, others.overlayStyle)
+  }), children));
 };
 
 var LMDropdown = CLMDropdown;
 
 LMDropdown.Button = function (props) {
-  return /*#__PURE__*/React.createElement(_Dropdown.Button, Object.assign({
+  var _props$dropdownmatchw2 = props.dropdownmatchwidth,
+      dropdownmatchwidth = _props$dropdownmatchw2 === void 0 ? false : _props$dropdownmatchw2;
+  var dropdownRef = useRef(null);
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      minwidth = _useState4[0],
+      setMinWidth = _useState4[1];
+
+  useEffect(function () {
+    var _a, _b;
+
+    if (dropdownmatchwidth) {
+      var dropdown_dom = (_a = dropdownRef.current.getElementsByClassName("lm_dropdown_button")) === null || _a === void 0 ? void 0 : _a[0];
+
+      if (dropdown_dom) {
+        setMinWidth(((_b = dropdown_dom.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || '');
+      }
+    }
+  }, []);
+
+  if (!dropdownmatchwidth) {
+    return /*#__PURE__*/React.createElement(_Dropdown.Button, Object.assign({
+      size: 'small'
+    }, props, {
+      overlayClassName: classNames(props.overlayClassName, 'lm_dropdown_overlay'),
+      className: classNames(props.className, 'lm_dropdown_button')
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dropdownRef
+  }, /*#__PURE__*/React.createElement(_Dropdown.Button, Object.assign({
     size: 'small'
   }, props, {
     overlayClassName: classNames(props.overlayClassName, 'lm_dropdown_overlay'),
+    overlayStyle: minwidth ? Object.assign({
+      minWidth: minwidth
+    }, props.overlayStyle) : Object.assign({}, props.overlayStyle),
     className: classNames(props.className, 'lm_dropdown_button')
-  }));
+  })));
 };
 
 export default LMDropdown;

package/es/PopTable/style/style.css

@@ -520,9 +520,6 @@ html {
   align-items: center;
   justify-content: center;
 }
-.lm_popover_table .lm_operate .ant-btn > .anticon:not(.anticon-down) {
-  font-size: 14px;
-}
 .lm_popover_table .lm_operate .anticon + span,
 .lm_popover_table .lm_operate span + .anticon {
   margin-left: calc(var(--gap) / 2);
@@ -687,7 +684,7 @@ html {
 }
 .lm_popover_table .lm_grid .ant-pagination {
   font-size: 12px;
-  padding-top: 12px;
+  padding-top: 10px;
   margin: 0;
 }
 .lm_popover_table .lm_grid .ant-pagination .ant-select {

package/es/ProTable/Table.js

@@ -25,7 +25,7 @@ var _lodash = require("lodash");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactVirtualizedAutoSizer = _interopRequireDefault(require("react-virtualized-auto-sizer"));
+var _autosize = _interopRequireDefault(require("./autosize"));
 
 var _context = _interopRequireDefault(require("./context"));
 
@@ -33,7 +33,7 @@ var _VList = require("./VList");
 
 var _resetConfig = _interopRequireDefault(require("./resetConfig"));
 
-var _excluded = ["dataSource", "autoSize", "columns", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading"];
+var _excluded = ["dataSource", "autoSize", "columns", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "customCheck"];
 var Summary = _proTable.default.Summary;
 exports.Summary = Summary;
 var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
@@ -47,6 +47,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       pagination = props.pagination,
       hiddenPage = props.hiddenPage,
       loading = props.loading,
+      customCheck = props.customCheck,
       resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _resetProps$rowKey = resetProps.rowKey,
       rowKey = _resetProps$rowKey === void 0 ? 'id' : _resetProps$rowKey;
@@ -179,7 +180,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         selectedRowKeys: useSelectedRows.selectedRows.map(function (v) {
           return v[rowKey];
         }),
-        onChange: function onChange(selectedRowKeys, selectedRows) {
+        onChange: function onChange(selectedRowKeys, selectedRows, t, s) {
           setSelectedRows({
             selectedRows: selectedRows
           });
@@ -188,7 +189,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       },
       onRow: function onRow(record) {
         return {
-          onClick: function onClick() {
+          onClick: function onClick(e) {
             onRecord(record);
           },
           onDoubleClick: function onDoubleClick() {
@@ -239,10 +240,10 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }
     });
     setColumnsStateMap(obj);
-  }, []);
-  (0, _react.useEffect)(function () {
-    rowClick === null || rowClick === void 0 ? void 0 : rowClick();
-  }, [useSelectedRows]); // 将节点方法给外部使用
+  }, []); // useEffect(() => {
+  //   rowClick?.()
+  // }, [useSelectedRows])
+  // 将节点方法给外部使用
 
   _react.default.useImperativeHandle(ref, function () {
     return {
@@ -251,9 +252,16 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       },
       // 用于按钮触发事件
       clearSelect: function clearSelect() {
-        return setSelectedRows({
+        setSelectedRows({
           selectedRows: []
         });
+        rowClick === null || rowClick === void 0 ? void 0 : rowClick([]);
+      },
+      customSetCheckboxRecords: function customSetCheckboxRecords(value) {
+        setSelectedRows({
+          selectedRows: value
+        });
+        rowClick === null || rowClick === void 0 ? void 0 : rowClick(value);
       }
     };
   }); // loading触发清空选中状态
@@ -277,7 +285,9 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     summary: function summary(pageData) {
       return _summary && _summary(pageData, resultColumns);
     }
-  })));
+  })), !!customCheck && /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_customCheck"
+  }, customCheck));
 }); // 监听大小: 这里的高度是整个表格的高度，表体需要减去列头和分页的高度
 
 var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
@@ -285,6 +295,7 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var throttleSize = (0, _lodash.throttle)(function (_ref) {
     var height = _ref.height,
         width = _ref.width;
+    console.log(height, width, 444);
 
     var resetHeight = function resetHeight() {
       var h = height - 48;
@@ -311,11 +322,12 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }
     }));
   }, 100);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactVirtualizedAutoSizer.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_autosize.default, {
     style: {
       width: '100%',
       height: '100%'
-    }
+    },
+    disableWidth: true
   }, throttleSize));
 });
 var _default = ResizeSize;

package/es/ProTable/autosize.js

@@ -0,0 +1,170 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
+
+var _lodash = require("lodash");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _detectElementResize = _interopRequireDefault(require("./detectElementResize"));
+
+var AutoSizer = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(AutoSizer, _React$Component);
+
+  var _super = (0, _createSuper2.default)(AutoSizer);
+
+  function AutoSizer() {
+    var _this;
+
+    (0, _classCallCheck2.default)(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._window = void 0;
+    _this._detectElementResize = void 0;
+
+    _this._onResize = function () {
+      console.log(11);
+      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 win = _this._window || window;
+        var style = win.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.handleResize = (0, _lodash.debounce)(_this._onResize, 800);
+
+    _this._setRef = function (autoSizer) {
+      _this._autoSizer = autoSizer;
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(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;
+        this._window = this._autoSizer.parentNode.ownerDocument.defaultView; // Defer requiring resize handler in order to support server-side rendering.
+        // See issue #41
+
+        this._detectElementResize = (0, _detectElementResize.default)(nonce, this._window);
+
+        this._detectElementResize.addResizeListener(this._parentNode, this.handleResize);
+
+        console.log(3);
+
+        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;
+      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 = {};
+
+      if (!disableHeight) {
+        outerStyle.height = 0;
+        childParams.height = height;
+      }
+
+      if (!disableWidth) {
+        outerStyle.width = 0;
+        childParams.width = width;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: className,
+        ref: this._setRef,
+        style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, outerStyle), style)
+      }, children(childParams));
+    }
+  }]);
+  return AutoSizer;
+}(_react.default.Component);
+
+exports.default = AutoSizer;
+AutoSizer.defaultProps = {
+  onResize: function onResize() {},
+  disableHeight: false,
+  disableWidth: false,
+  style: {}
+};