@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
123 lines (122 loc) • 5.04 kB
JavaScript
import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
import classNames from "classnames";
import { ComponentDefaults } from "../../utils/typings";
import CollapseContext from "../collapse/context";
import { useRefState } from "../../hooks/use-ref-state";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
title: null,
name: '',
expandIcon: null,
disabled: false,
extra: null
});
export var CollapseItem = function(props) {
var _ref = _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 = _object_without_properties(_ref, [
"children",
"title",
"name",
"disabled",
"expandIcon",
"rotate",
"extra",
"style",
"className"
]);
var classPrefix = 'nut-collapse-item';
var context = useContext(CollapseContext);
var wrapperRef = useRef(null);
var contentRef = useRef(null);
var expanded = useMemo(function() {
if (context) {
return context.isOpen(name);
}
return false;
}, [
name,
context.isOpen
]);
var iconStyle = useMemo(function() {
return expanded ? {
transform: "translateY(-50%) rotate(".concat(rotate || context.rotate, "deg)")
} : {
transform: 'translateY(-50%)'
};
}, [
expanded,
rotate
]);
var _useState = _sliced_to_array(useState(0), 2), tran = _useState[0], setTran = _useState[1];
var _useRefState = _sliced_to_array(useRefState(0), 2), currentHeight = _useRefState[0], setCurrentHeight = _useRefState[1];
var _useState1 = _sliced_to_array(useState(0), 2), wrapperHeight = _useState1[0], setWrapperHeight = _useState1[1];
var updateRectHeight = /*#__PURE__*/ function() {
var _ref = _async_to_generator(function() {
var height;
return _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);
};
}();
useEffect(function() {
updateRectHeight();
}, [
children,
expanded
]);
var toggle = function() {
var end = !expanded ? currentHeight.current : 0;
setWrapperHeight(end);
};
var handleClick = function() {
if (!disabled) {
context.updateValue(name);
toggle();
}
};
var _obj;
return /*#__PURE__*/ React.createElement("div", _object_spread({
className: classNames(classPrefix, className),
style: style
}, rest), /*#__PURE__*/ React.createElement("div", {
className: classNames("".concat(classPrefix, "-header"), _define_property({}, "".concat(classPrefix, "-header-disabled"), disabled)),
onClick: handleClick
}, /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-title")
}, title), /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-extra")
}, extra), /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-icon-box")
}, /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-icon"),
style: iconStyle
}, expandIcon || context.expandIcon))), /*#__PURE__*/ React.createElement("div", {
className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-content-wrapper"), true), _define_property(_obj, "".concat(classPrefix, "-content-wrapper-tran"), true), _obj)),
style: tran ? {
height: wrapperHeight
} : {},
ref: wrapperRef
}, /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-content")
}, /*#__PURE__*/ React.createElement("div", {
ref: contentRef,
className: "".concat(classPrefix, "-content-text")
}, children))));
};
CollapseItem.displayName = 'NutCollapseItem';