primereact/datatable/celleditor/index.mjs

A rich set of premium UI Components for React.

'use client';

import{Component as F,withComponent as O}from"@primereact/core/component";import{OverlayEventBus as I}from"@primereact/core/utils";import{mergeProps as q}from"@primeuix/utils";import*as a from"react";import{createOptionalContext as V}from"@primereact/core/utils";var[_,E]=V();import{createOptionalContext as A}from"@primereact/core/utils";var[M,p]=A();var P={as:"div",field:"",rowIndex:0,rowData:void 0};function R(e){let t=e;for(;t&&t.tagName!=="TD";)t=t.parentElement;return t}function h(e,t){let r=t==="next"?"nextElementSibling":"previousElementSibling",o=t==="next"?"nextElementSibling":"previousElementSibling",i=t==="next"?"firstElementChild":"lastElementChild",l=e[r];return l||(l=e.parentElement?.[o]?.[i]??null),l?l.tagName==="TD"&&l.hasAttribute("data-editable-cell")?l:l.tagName==="TD"?h(l,t):null:null}var B=O({name:"DataTable.CellEditor",defaultProps:P,setup({props:e}){let t=E(),r=a.useMemo(()=>{if(e.rowData)return t?.getRowKey?.(e.rowData,e.rowIndex)},[t,e.rowData,e.rowIndex]),o=a.useMemo(()=>{let n=t?.inProps?.editMode;return n==="cell"?t?.editing?.isCellEditing(e.rowIndex,e.field,r)??!1:n==="row"&&r!==void 0?t?.editing?.isEditing(r)??!1:!1},[t?.inProps?.editMode,t?.state?.editingCell,t?.state?.editingKeys,e.rowIndex,e.field,r]),i=a.useRef(null);a.useEffect(()=>{let n=R(i.current);if(n)return n.setAttribute("data-editable-cell",""),()=>{n.removeAttribute("data-editable-cell")}},[]);let l=a.useRef(t?.editing),d=a.useRef(e.rowData),m=a.useRef(e.field),T=a.useRef(e.rowIndex);l.current=t?.editing,d.current=e.rowData,m.current=e.field,T.current=e.rowIndex;let x=t?.inProps?.editMode;a.useEffect(()=>{if(!o||x!=="cell")return;let n=!1,s=null,y=f=>{let c=d.current??{},u=m.current;l.current?.completeCellEdit({originalEvent:f,rowData:c,newRowData:c,field:u,value:c[u],newValue:c[u],rowIndex:T.current,type:"outside",preventDefault:()=>{}})},b=f=>{let c=i.current;if(!c)return;let u=f.target,S=!!u&&c.contains(u)||n;n=!1,s&&(clearTimeout(s),s=null),S||(s=setTimeout(()=>{y(f)},1))},g=f=>{let{target:c}=f??{};if(!c)return;let u=i.current;u&&u.contains(c)&&(n=!0)};return document.addEventListener("mousedown",b),I.on("overlay-click",g),()=>{document.removeEventListener("mousedown",b),I.off("overlay-click",g),s&&clearTimeout(s)}},[o,x]);let w=a.useCallback(n=>{t?.inProps?.editMode==="cell"&&!o&&t?.editing?.startCellEdit(n,e.rowIndex,e.field,r)},[t?.inProps?.editMode,o,t?.editing,e.rowIndex,e.field,r]),D=a.useCallback(n=>{if(o&&t?.inProps?.editMode==="cell"){if(n.key==="Escape"){let s=R(n.target)?.closest("tr");t?.editing?.cancelCellEdit(n,e.rowIndex,e.field),s&&requestAnimationFrame(()=>{(document.activeElement===document.body||document.activeElement===null)&&s.focus()});return}if(n.key==="Enter"){t?.editing?.completeCellEdit({originalEvent:n,rowData:e.rowData??{},newRowData:e.rowData??{},field:e.field,value:e.rowData?.[e.field],newValue:e.rowData?.[e.field],rowIndex:e.rowIndex,type:"enter",preventDefault:()=>{}});return}if(n.key==="Tab"){let s=R(n.target);if(!s)return;let y=n.shiftKey?"prev":"next",b=h(s,y);if(t?.editing?.completeCellEdit({originalEvent:n,rowData:e.rowData??{},newRowData:e.rowData??{},field:e.field,value:e.rowData?.[e.field],newValue:e.rowData?.[e.field],rowIndex:e.rowIndex,type:"tab",preventDefault:()=>{}})===!1||!b)return;n.preventDefault();let f=b.querySelector("[data-row-index][data-field]");if(!f)return;let c=Number(f.dataset.rowIndex),u=f.dataset.field,v=f.dataset.rowKey;if(Number.isNaN(c)||!u)return;t?.editing?.startCellEdit(n,c,u,v)}}},[o,t?.inProps?.editMode,t?.editing,e.rowIndex,e.field,e.rowData]),K=a.useMemo(()=>({isEditing:o}),[o]),N=a.useMemo(()=>({isEditing:o,field:e.field,rowIndex:e.rowIndex,handleClick:w,handleKeyDown:D}),[o,e.field,e.rowIndex,w,D]);return{datatable:t,state:K,handleClick:w,handleKeyDown:D,contextValue:N,editorRef:i,rowKey:r}},render(e){let{props:t,ptmi:r,state:o,datatable:i,handleClick:l,handleKeyDown:d,contextValue:m,editorRef:T,rowKey:x}=e,w=q(i?.editing?.getCellEditorRootProps({rowIndex:t.rowIndex,field:t.field,rowKey:x,isEditing:o.isEditing}),{ref:T,onClick:l,onKeyDown:d},i?.ptm("cellEditor"),r("root")),D=t.children;return a.createElement(M,{value:m},a.createElement(F,{instance:e,attrs:w,children:D}))}});import{Component as j,withComponent as z}from"@primereact/core/component";import{mergeProps as G}from"@primeuix/utils";import*as H from"react";var L={as:"div"};var J=z({name:"DataTable.CellEditor.Display",defaultProps:L,setup(){let e=E(),t=p();return{datatable:e,editorContext:t}},render(e){let{id:t,props:r,ptmi:o,datatable:i,editorContext:l}=e;if(!l||l.isEditing)return null;let d=G({id:t,"data-scope":"datatable","data-part":"cell-editor-display"},i?.ptm("cellEditorDisplay"),o("root"));return H.createElement(j,{instance:e,attrs:d,children:r.children})}});import{Component as Q,withComponent as U}from"@primereact/core/component";import{getFirstFocusableElement as W,mergeProps as X}from"@primeuix/utils";import*as C from"react";var k={as:"div"};var Y=U({name:"DataTable.CellEditor.Content",defaultProps:k,setup(){let e=E(),t=p(),r=C.useRef(null),o=t?.isEditing===!0;return C.useEffect(()=>{if(!o)return;let i=setTimeout(()=>{let l=r.current;if(!l)return;let d=W(l);if(d?.focus(),d instanceof HTMLInputElement||d instanceof HTMLTextAreaElement)try{d.select()}catch{}},0);return()=>clearTimeout(i)},[o]),{datatable:e,editorContext:t,contentRef:r}},render(e){let{id:t,props:r,ptmi:o,datatable:i,editorContext:l,contentRef:d}=e;if(!l||!l.isEditing)return null;let m=X({ref:d,id:t,"data-scope":"datatable","data-part":"cell-editor-content","data-editing":""},i?.ptm("cellEditorContent"),o("root"));return C.createElement(Q,{instance:e,attrs:m,children:r.children})}});export{B as DataTableCellEditor,Y as DataTableCellEditorContent,J as DataTableCellEditorDisplay,M as DataTableCellEditorProvider,P as defaultCellEditorProps,p as useDataTableCellEditorContext};