/**
 * amis-ui v6.14.0-beta.1
 * Copyright 2018-2025 fex
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var amisCore = require('amis-core');
var Transition = require('react-transition-group/Transition');
var icons = require('./icons.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var Transition__default = /*#__PURE__*/_interopDefaultLegacy(Transition);

var __react_jsx__ = require('react');
var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
(__react_jsx__["default"] || __react_jsx__).Fragment;
var _a;
var collapseStyles = (_a = {},
    _a[Transition.EXITED] = 'out',
    _a[Transition.EXITING] = 'out',
    _a[Transition.ENTERING] = 'in',
    _a);
var Collapse = /** @class */ (function (_super) {
    tslib.__extends(Collapse, _super);
    function Collapse(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            collapsed: false
        };
        _this.contentRef = function (ref) { return (_this.contentDom = ref); };
        _this.toggleCollapsed = _this.toggleCollapsed.bind(_this);
        _this.state.collapsed = props.collapsable ? !!props.collapsed : false;
        return _this;
    }
    Collapse.getDerivedStateFromProps = function (nextProps, preState) {
        if (nextProps.propsUpdate && nextProps.collapsed !== preState.collapsed) {
            return {
                collapsed: !!nextProps.collapsed
            };
        }
        return null;
    };
    Collapse.prototype.toggleCollapsed = function (e) {
        var _a;
        if (amisCore.isClickOnInput(e)) {
            return;
        }
        var props = this.props;
        if (props.disabled || props.collapsable === false) {
            return;
        }
        var newCollapsed = !this.state.collapsed;
        (_a = props.onCollapse) === null || _a === void 0 ? void 0 : _a.call(props, newCollapsed);
        this.setState({
            collapsed: newCollapsed
        });
    };
    /** 变更组件的折叠状态 */
    Collapse.prototype.changeCollapsedState = function (targetState) {
        var _this = this;
        var _a = this.props, disabled = _a.disabled, collapsable = _a.collapsable;
        var currentState = this.state.collapsed;
        if (disabled || collapsable === false || currentState === targetState) {
            return;
        }
        this.setState({
            collapsed: targetState
        }, function () {
            var _a, _b;
            (_b = (_a = _this.props).onCollapse) === null || _b === void 0 ? void 0 : _b.call(_a, targetState);
        });
    };
    Collapse.prototype.handleEnter = function (elem) {
        elem.style['height'] = '';
    };
    Collapse.prototype.handleEntering = function (elem) {
        elem.style['height'] = "".concat(elem['scrollHeight'], "px");
    };
    Collapse.prototype.handleEntered = function (elem) {
        elem.style['height'] = '';
    };
    Collapse.prototype.handleExit = function (elem) {
        var offsetHeight = elem['offsetHeight'];
        var height = offsetHeight +
            parseInt(getComputedStyle(elem).getPropertyValue('margin-top'), 10) +
            parseInt(getComputedStyle(elem).getPropertyValue('margin-bottom'), 10);
        elem.style['height'] = "".concat(height, "px");
        // trigger browser reflow
        elem.offsetHeight;
    };
    Collapse.prototype.handleExiting = function (elem) {
        elem.style['height'] = '';
    };
    Collapse.prototype.render = function () {
        var _a;
        var _this = this;
        var _b;
        var _c = this.props, cx = _c.classnames, mountOnEnter = _c.mountOnEnter, unmountOnExit = _c.unmountOnExit; _c.classPrefix; var size = _c.size, WrapperComponent = _c.wrapperComponent, HeadingComponent = _c.headingComponent, className = _c.className, style = _c.style, headingClassName = _c.headingClassName, headerPosition = _c.headerPosition, collapseHeader = _c.collapseHeader, header = _c.header, body = _c.body, bodyClassName = _c.bodyClassName, collapsable = _c.collapsable; _c.translate; var showArrow = _c.showArrow, expandIcon = _c.expandIcon, disabled = _c.disabled, children = _c.children, mobileUI = _c.mobileUI, enableFieldSetStyle = _c.enableFieldSetStyle;
        var finalHeader = this.state.collapsed
            ? header
            : collapseHeader || header;
        var dom = [
            _J$X_(HeadingComponent, { key: "header", onClick: this.toggleCollapsed, className: cx("Collapse-header", { 'is-mobile': mobileUI }, headingClassName, { noTitle: !finalHeader }) },
                showArrow && collapsable ? (expandIcon ? (React__default["default"].cloneElement(expandIcon, tslib.__assign(tslib.__assign({}, expandIcon.props), { className: cx('Collapse-icon-tranform', (_b = expandIcon.props) === null || _b === void 0 ? void 0 : _b.className) }))) : (_J$X_("span", { className: cx('Collapse-arrow-wrap') },
                    _J$X_(icons.Icon, { icon: "right-arrow-bold", className: cx('Collapse-arrow', 'icon'), classNameProp: cx('Collapse-arrow'), iconContent: "Collapse-arrow" })))) : (''),
                finalHeader),
            _J$X_(Transition__default["default"], { key: "body", mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit, in: !this.state.collapsed, timeout: 300, onEnter: this.handleEnter, onEntering: this.handleEntering, onEntered: this.handleEntered, onExit: this.handleExit, onExiting: this.handleExiting }, function (status) {
                if (status === Transition.ENTERING) {
                    _this.contentDom.offsetWidth;
                }
                return (_J$X_("div", { className: cx('Collapse-contentWrapper', collapseStyles[status]), ref: _this.contentRef },
                    _J$X_("div", { className: cx('Collapse-body', bodyClassName) },
                        _J$X_("div", { className: cx('Collapse-content') }, body || children))));
            })
        ];
        if (headerPosition === 'bottom') {
            dom.reverse();
        }
        return (_J$X_(WrapperComponent, { className: cx("Collapse", (_a = {
                    'is-mobile': mobileUI,
                    'is-active': !this.state.collapsed
                },
                _a["Collapse--".concat(size)] = size,
                _a['Collapse--disabled'] = disabled,
                _a['Collapse--title-bottom'] = headerPosition === 'bottom',
                _a['Collapse-fieldset--disabled'] = enableFieldSetStyle === false,
                _a), className), style: style }, dom));
    };
    Collapse.defaultProps = {
        mountOnEnter: false,
        unmountOnExit: false,
        headerPosition: 'top',
        wrapperComponent: 'div',
        headingComponent: 'div',
        className: '',
        headingClassName: '',
        bodyClassName: '',
        collapsable: true,
        disabled: false,
        showArrow: true,
        propsUpdate: false,
        enableFieldSetStyle: true
    };
    tslib.__decorate([
        amisCore.autobind,
        tslib.__metadata("design:type", Function),
        tslib.__metadata("design:paramtypes", [Boolean]),
        tslib.__metadata("design:returntype", void 0)
    ], Collapse.prototype, "changeCollapsedState", null);
    tslib.__decorate([
        amisCore.autobind,
        tslib.__metadata("design:type", Function),
        tslib.__metadata("design:paramtypes", [HTMLElement]),
        tslib.__metadata("design:returntype", void 0)
    ], Collapse.prototype, "handleEnter", null);
    tslib.__decorate([
        amisCore.autobind,
        tslib.__metadata("design:type", Function),
        tslib.__metadata("design:paramtypes", [HTMLElement]),
        tslib.__metadata("design:returntype", void 0)
    ], Collapse.prototype, "handleEntering", null);
    tslib.__decorate([
        amisCore.autobind,
        tslib.__metadata("design:type", Function),
        tslib.__metadata("design:paramtypes", [HTMLElement]),
        tslib.__metadata("design:returntype", void 0)
    ], Collapse.prototype, "handleEntered", null);
    tslib.__decorate([
        amisCore.autobind,
        tslib.__metadata("design:type", Function),
        tslib.__metadata("design:paramtypes", [HTMLElement]),
        tslib.__metadata("design:returntype", void 0)
    ], Collapse.prototype, "handleExit", null);
    tslib.__decorate([
        amisCore.autobind,
        tslib.__metadata("design:type", Function),
        tslib.__metadata("design:paramtypes", [HTMLElement]),
        tslib.__metadata("design:returntype", void 0)
    ], Collapse.prototype, "handleExiting", null);
    return Collapse;
}(React__default["default"].Component));
var Collapse$1 = amisCore.themeable(Collapse);

exports.Collapse = Collapse;
exports["default"] = Collapse$1;
