"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/es.array.iterator.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _button = _interopRequireDefault(require("../button"));
require("./style");
var _jsxRuntime = require("react/jsx-runtime");
function CollapsedArea({
  minHeight = 32,
  ...props
}) {
  const [open, setOpen] = (0, _react.useState)(props.defaultOpen);
  const [contentHeight, setContentHeight] = (0, _react.useState)(minHeight);
  const contentRef = (0, _react.useRef)(null);

  /**
   * 监听content容器内容变化，即时更新容器最大高度
   */
  (0, _react.useEffect)(() => {
    if (contentRef.current) {
      setContentHeight(contentRef.current.offsetHeight);
      const observer = new ResizeObserver(() => {
        if (contentRef.current) {
          setContentHeight(contentRef.current.offsetHeight);
        }
      });
      observer.observe(contentRef.current);
      return () => {
        observer.disconnect();
      };
    }
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    style: props.style,
    className: (0, _classnames.default)('collapsed-area', props.className),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
      style: {
        ...props.buttonStyle
      },
      className: (0, _classnames.default)('collapsed-area-button', props.buttonClassName),
      type: "link",
      onClick: () => setOpen(!open),
      children: open ? props.buttonHiddenText || '收起' : props.buttonShownText || '展开'
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "collapsed-area-content",
      style: {
        height: open ? contentHeight : minHeight
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        style: {
          display: `${!open ? 'block' : 'none'}`
        },
        children: props.collapseContent
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        ref: contentRef,
        style: {
          display: `${open || !props.collapseContent ? 'block' : 'none'}`,
          position: 'relative',
          overflow: 'hidden'
        },
        children: props.children
      })]
    })]
  });
}
const defaultProps = {
  defaultOpen: true
};
CollapsedArea.defaultProps = defaultProps;
var _default = CollapsedArea;
exports.default = _default;