@nutui/nutui-react/dist/esm/collapseitem2.js

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

import { _ as __rest } from "./tslib.es6.js";
import React__default, { createContext, useContext, useRef, useMemo, useEffect } from "react";
import classNames from "classnames";
import { C as ComponentDefaults } from "./typings.js";
const collapseContext = {
  isOpen: (name) => {
    return true;
  },
  updateValue: (name) => {
  },
  expandIcon: null,
  rotate: 180
};
const CollapseContext = createContext(collapseContext);
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { title: null, name: "", expandIcon: null, disabled: false, extra: null });
const CollapseItem = (props) => {
  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, title, name, disabled, expandIcon, rotate, extra, style, className } = _a, rest = __rest(_a, ["children", "title", "name", "disabled", "expandIcon", "rotate", "extra", "style", "className"]);
  const classPrefix = "nut-collapse-item";
  const context = useContext(CollapseContext);
  const wrapperRef = useRef(null);
  const contentRef = useRef(null);
  const expanded = useMemo(() => {
    if (context) {
      return context.isOpen(name);
    }
    return false;
  }, [name, context.isOpen]);
  const iconStyle = useMemo(() => {
    return expanded ? { transform: `translateY(-50%) rotate(${rotate || context.rotate}deg)` } : { transform: "translateY(-50%)" };
  }, [expanded, rotate]);
  const handleClick = () => {
    if (!disabled) {
      context.updateValue(name);
    }
  };
  const onTransitionEnd = () => {
    if (expanded) {
      if (wrapperRef.current) {
        wrapperRef.current.style.height = "";
      }
    }
  };
  const getOffsetHeight = () => {
    var _a2;
    const height = (_a2 = contentRef.current) === null || _a2 === void 0 ? void 0 : _a2.offsetHeight;
    return height ? `${height}px` : "";
  };
  const toggle = () => {
    const start = expanded ? "0px" : getOffsetHeight();
    if (wrapperRef.current) {
      wrapperRef.current.style.height = start;
    }
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        const end = expanded ? getOffsetHeight() : "0px";
        if (wrapperRef.current) {
          wrapperRef.current.style.height = end;
        }
      });
    });
  };
  const init = useRef(true);
  useEffect(() => {
    if (init.current) {
      init.current = false;
      if (!expanded) {
        wrapperRef.current.style.height = "0px";
      }
    } else {
      toggle();
    }
  }, [expanded]);
  return React__default.createElement(
    "div",
    Object.assign({ className: classNames(classPrefix, className), style }, rest),
    React__default.createElement(
      "div",
      { className: classNames(`${classPrefix}-header`, { disabled }), onClick: handleClick },
      React__default.createElement("div", { className: `${classPrefix}-title` }, title),
      React__default.createElement("div", { className: `${classPrefix}-extra` }, extra),
      React__default.createElement(
        "div",
        { className: `${classPrefix}-icon-box` },
        React__default.createElement("div", { className: `${classPrefix}-icon`, style: iconStyle }, expandIcon || context.expandIcon)
      )
    ),
    React__default.createElement(
      "div",
      { className: `${classPrefix}-content`, onTransitionEnd, ref: wrapperRef },
      React__default.createElement("div", { ref: contentRef, className: `${classPrefix}-content-text` }, children)
    )
  );
};
CollapseItem.displayName = "NutCollapseItem";
export {
  CollapseItem as C,
  CollapseContext as a
};