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

UI Component for chief editor

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