@chief-editor/ui/es/components/collapse/CollapseItem.js

UI Component for chief editor

import{DownOne}from"@chief-editor/icons";import{RcSubCollapseProvider,useCreateSubCollapse}from"@rc-hooks/collapse";import{presets as CubicBezier,animate,classnames}from"@co-hooks/util";import React,{useCallback,useLayoutEffect,useRef}from"react";import{Minus}from"@byte-design/icons";import{usePrefixCls}from"../../hooks";import{Switch}from"../switch/index";export function CollapseItem(e){var t,i,s=e.id,a=e.className,r=e.iconType,c=e.iconPosition,l=void 0===c?"right":c,n=e.title,o=void 0===n?"":n,m=e.renderHead,u=e.children,p=e.content,h=useCreateSubCollapse({id:s}),f=h.subCollapse,C=h.isOpen,d=h.setOpened,P=classnames(usePrefixCls("claps-item",{active:C}),a),g=usePrefixCls("claps-item-header"),R=usePrefixCls("claps-item-title"),v=usePrefixCls("claps-item-wrap"),x=usePrefixCls("claps-item-title-icon",((t={}).position=l,t)),y=usePrefixCls("claps-item-title-arrow"),E=usePrefixCls("claps-item-title-minus"),b=usePrefixCls("claps-item-title-minus-active"),k=usePrefixCls("claps-item-title-plus"),w=usePrefixCls("claps-item-wrap-content",((i={}).block=l,i)),N=useCallback((function(e){e.preventDefault(),d(!C)}),[C]),S=useRef(!1),O=useRef(null);useLayoutEffect((function(){if(S.current){var e=function(t){handleAnimationTick(O.current,e,t,C)};e.height=0;var t=animate("linear",400,e),i=t[0],s=t[1];return i(),function(){e(1),s()}}S.current=!0}),[C]);return React.createElement(RcSubCollapseProvider,{subCollapse:f},React.createElement("div",{className:P},m?React.createElement("div",{className:g},m(C,d)):React.createElement("div",{className:R,onClick:N},r&&function(){var e;switch(r){case"arrow":e=React.createElement(DownOne,{className:y});break;case"switch":e=React.createElement(Switch,{checked:C});break;case"plus":e=React.createElement("span",{className:E},React.createElement(Minus,{className:k}),React.createElement(Minus,{className:k+" "+b}))}return React.createElement("span",{className:x},e)}(),o),React.createElement("div",{className:v,ref:O},React.createElement("div",{className:w},"function"==typeof p?p():u))))}function handleAnimationTick(e,t,i,s){e&&(!t.height&&e.firstElementChild&&(t.height=e.firstElementChild.getBoundingClientRect().height),s?i>=.5?e.style.removeProperty("height"):(i=CubicBezier.easeOut(2*i),e.style.setProperty("height",i*t.height+"px")):i>=1?e.style.removeProperty("height"):i>=.5?(i=CubicBezier.easeIn(2*(1-i)),e.style.setProperty("height",i*t.height+"px")):e.style.getPropertyValue("height")!==t.height+"px"&&e.style.setProperty("height",t.height+"px"))}