@nutui/nutui-react/dist/cjs/packages/collapseitem/collapseitem.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "CollapseItem", {
    enumerable: true,
    get: function() {
        return CollapseItem;
    }
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _ts_generator = require("@swc/helpers/_/_ts_generator");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _typings = require("../../utils/typings");
var _context = /*#__PURE__*/ _interop_require_default._(require("../collapse/context"));
var _userefstate = require("../../hooks/use-ref-state");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
    title: null,
    name: '',
    expandIcon: null,
    disabled: false,
    extra: null
});
var CollapseItem = function CollapseItem(props) {
    var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, title = _ref.title, name = _ref.name, disabled = _ref.disabled, expandIcon = _ref.expandIcon, rotate = _ref.rotate, extra = _ref.extra, style = _ref.style, className = _ref.className, rest = (0, _object_without_properties._)(_ref, [
        "children",
        "title",
        "name",
        "disabled",
        "expandIcon",
        "rotate",
        "extra",
        "style",
        "className"
    ]);
    var classPrefix = 'nut-collapse-item';
    var context = (0, _react.useContext)(_context.default);
    var wrapperRef = (0, _react.useRef)(null);
    var contentRef = (0, _react.useRef)(null);
    var expanded = (0, _react.useMemo)(function() {
        if (context) {
            return context.isOpen(name);
        }
        return false;
    }, [
        name,
        context.isOpen
    ]);
    var iconStyle = (0, _react.useMemo)(function() {
        return expanded ? {
            transform: "translateY(-50%) rotate(".concat(rotate || context.rotate, "deg)")
        } : {
            transform: 'translateY(-50%)'
        };
    }, [
        expanded,
        rotate
    ]);
    var _useState = (0, _sliced_to_array._)((0, _react.useState)(0), 2), tran = _useState[0], setTran = _useState[1];
    var _useRefState = (0, _sliced_to_array._)((0, _userefstate.useRefState)(0), 2), currentHeight = _useRefState[0], setCurrentHeight = _useRefState[1];
    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), wrapperHeight = _useState1[0], setWrapperHeight = _useState1[1];
    var updateRectHeight = /*#__PURE__*/ function() {
        var _ref = (0, _async_to_generator._)(function() {
            var height;
            return (0, _ts_generator._)(this, function(_state) {
                height = contentRef.current.offsetHeight;
                setCurrentHeight(height);
                setWrapperHeight(expanded ? height : 0);
                setTimeout(function() {
                    setTran(1);
                });
                return [
                    2
                ];
            });
        });
        return function updateRectHeight() {
            return _ref.apply(this, arguments);
        };
    }();
    (0, _react.useEffect)(function() {
        updateRectHeight();
    }, [
        children,
        expanded
    ]);
    var toggle = function toggle() {
        var end = !expanded ? currentHeight.current : 0;
        setWrapperHeight(end);
    };
    var handleClick = function handleClick() {
        if (!disabled) {
            context.updateValue(name);
            toggle();
        }
    };
    var _obj;
    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
        className: (0, _classnames.default)(classPrefix, className),
        style: style
    }, rest), /*#__PURE__*/ _react.default.createElement("div", {
        className: (0, _classnames.default)("".concat(classPrefix, "-header"), (0, _define_property._)({}, "".concat(classPrefix, "-header-disabled"), disabled)),
        onClick: handleClick
    }, /*#__PURE__*/ _react.default.createElement("div", {
        className: "".concat(classPrefix, "-title")
    }, title), /*#__PURE__*/ _react.default.createElement("div", {
        className: "".concat(classPrefix, "-extra")
    }, extra), /*#__PURE__*/ _react.default.createElement("div", {
        className: "".concat(classPrefix, "-icon-box")
    }, /*#__PURE__*/ _react.default.createElement("div", {
        className: "".concat(classPrefix, "-icon"),
        style: iconStyle
    }, expandIcon || context.expandIcon))), /*#__PURE__*/ _react.default.createElement("div", {
        className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-content-wrapper"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-content-wrapper-tran"), true), _obj)),
        style: tran ? {
            height: wrapperHeight
        } : {},
        ref: wrapperRef
    }, /*#__PURE__*/ _react.default.createElement("div", {
        className: "".concat(classPrefix, "-content")
    }, /*#__PURE__*/ _react.default.createElement("div", {
        ref: contentRef,
        className: "".concat(classPrefix, "-content-text")
    }, children))));
};
CollapseItem.displayName = 'NutCollapseItem';