@nitrogenbuilder/core/src/__components/Tree/components/Item/Item.js

CMS Agnostic Page Builder for React projects

import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React,{useEffect}from"react";import classNames from"classnames";import styles from"./Item.module.scss";import{Handle,Remove}from"./components/index.js";export const Item=React.memo(React.forwardRef((({color:e,dragOverlay:s,dragging:a,disabled:l,fadeIn:t,handle:r,handleProps:o,height:n,index:i,listeners:d,onRemove:c,renderItem:m,sorting:y,style:g,transition:x,transform:f,value:v,wrapperStyle:p,...u},j)=>(useEffect((()=>{if(s)return document.body.style.cursor="grabbing",()=>{document.body.style.cursor=""}}),[s]),m?m({dragOverlay:Boolean(s),dragging:Boolean(a),sorting:Boolean(y),index:i,fadeIn:Boolean(t),listeners:d,ref:j,style:g,transform:f,transition:x,value:v}):_jsx("li",{className:classNames(styles.Wrapper,t&&styles.fadeIn,y&&styles.sorting,s&&styles.dragOverlay),style:{...p,transition:[x,p?.transition].filter(Boolean).join(", "),"--translate-x":f?`${Math.round(f.x)}px`:void 0,"--translate-y":f?`${Math.round(f.y)}px`:void 0,"--scale-x":f?.scaleX?`${f.scaleX}`:void 0,"--scale-y":f?.scaleY?`${f.scaleY}`:void 0,"--index":i,"--color":e},ref:j,children:_jsxs("div",{className:classNames(styles.Item,a&&styles.dragging,r&&styles.withHandle,s&&styles.dragOverlay,l&&styles.disabled,e&&styles.color),style:g,"data-cypress":"draggable-item",...r?void 0:d,...u,tabIndex:r?void 0:0,children:[v,_jsxs("span",{className:styles.Actions,children:[c?_jsx(Remove,{className:styles.Remove,onClick:c}):null,r?_jsx(Handle,{...o,...d}):null]})]})})))));