@lanaco/lnc-react-ui/dist/EditableTable.cjs

React component library

"use strict";const c=require("react/jsx-runtime"),i=require("react"),r=require("./index-BPVoEhTF.cjs"),w=require("./utils-NZLCh-J5.cjs"),H=require("./Table.cjs"),$=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),B=require("./TextInput.cjs"),W=require("./NumberInput.cjs"),J=require("./DecimalInput.cjs"),Q=require("./CheckBoxInput.cjs"),U=require("./Dropdown.cjs"),X=require("./DecimalInputV2.cjs"),Z=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),C={BOOLEAN:"BOOLEAN",STRING:"STRING",INTEGER:"INTEGER",DECIMAL:"DECIMAL",DECIMAL2:"DECIMAL2",DATE:"DATE",SELECT:"SELECT"},ee=$.newStyled.td`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: ${s=>s.width};
  padding: ${s=>s.focused&&!s.isBoolean?"0.5rem 0.5rem 0.5rem 0.7rem":"0.5rem 0.5rem 0.5rem 1.5rem"};
  ${s=>s.bgColor}

  ${s=>w.getComponentTypographyCss(s.theme,"TableCell",s.size,"enabled")};
`,re=$.newStyled.div`
  ${s=>w.getComponentTypographyCss(s.theme,"TableSpecialLastRow",s.size,"enabled")};
  padding: ${s=>s.hasRender?"0":"9.5px 6px 9.5px 0"};
  cursor: ${s=>s.tabIndex!==-1?"pointer":"auto"};
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  &:focus {
    outline: none;
  }
`,N=s=>{const[d,L]=i.useState(!1);var l=i.useRef(),P=i.useRef(),A=i.useRef(!0);const{__TYPE__:R="TABLE_CELL",Column:e={},ColumnsToRender:p,RowData:n={},Index:E=0,RowIndex:f,EnableSelection:v=!1,TabIndexOffset:I=100,onFocusChanged:D,RowIdentifier:q,onDiscard:x,onMount:t,onChange:a,className:T="",size:m="small",color:b="primary"}=s,O=Z.useTheme(),S={className:T,size:m,color:b,theme:O};i.useEffect(()=>{t(f,E,P)},[]),i.useEffect(()=>{d||t(f,E,P)},[d]),i.useEffect(()=>{d&&l&&l.current&&l.current.focus()},[d]);const G=()=>e&&e.width?e.width+"%":"auto",F=()=>{if(e.editable!==!0)return-1;var o=p.filter(y=>y.editable),g=o.find(y=>y.id===e.id);return I+f*o.length+o.indexOf(g)},j=(o,g)=>{D(o,g,f,E),g||L(g)},M=o=>{o.key==="Escape"&&(A.current=!1,l.current.blur(),A.current=!0,x(o,f,E,n))},V=()=>{var o=null,g=(u,K)=>{a(u,K,f,E,e,n)},y=u=>{a(_,u,f,E,e,n)},h={...S,debounceTime:0,...e.inputProps,value:e!=null&&e.objectAccessor?n[e.accessor][e==null?void 0:e.objectAccessor]:n[e.accessor],defaultChecked:e!=null&&e.objectAccessor?n[e.accessor][e==null?void 0:e.objectAccessor]:n[e.accessor],focused:d,onChange:g,onBlur:u=>j(u,!1),onFocus:u=>j(u,!0),onKeyDown:u=>M(u),tabIndex:F()};switch(e.inputType){case C.STRING:o=c.jsx(B,{...h,ref:l});break;case C.INTEGER:o=c.jsx(W,{...h,ref:l});break;case C.DECIMAL:o=c.jsx(J,{...h,ref:l});break;case C.DECIMAL2:o=c.jsx(X,{...h,ref:l});break;case C.DATE:o=c.jsx(B,{...h,ref:l});break;case C.BOOLEAN:o=c.jsx(Q,{...h,ref:l});break;case C.SELECT:o=c.jsx(U.default,{...h,value:e.inputProps.options.find(u=>u.value===(e==null?void 0:e.objectAccessor)?n[e.accessor][e==null?void 0:e.objectAccessor]:n[e.accessor]),onChange:y,ref:l});break;default:o=c.jsx(B,{...h,ref:l})}return o},z=o=>{A.current===!0?j(o,!1):L(!1)},Y=()=>{var o=V();if(e.editable===!0&&e.editComponent){var g={};e.inputType===C.SELECT&&(g={items:e.selectItems,mapNameTo:e.selectProps.mapNameTo,mapValueTo:e.selectProps.mapValueTo}),o=c.jsx(e.editComponent,{ref:l,tabIndex:F(),value:e!=null&&e.objectAccessor?n[e.accessor][e==null?void 0:e.objectAccessor]:n[e.accessor],onChange:(y,h,u)=>{a(y,h,f,E,e,n,u)},focused:d,onBlur:z,onFocus:y=>j(y,!0),onKeyDown:y=>M(y),...g})}if(e.editable===!0&&d)return o;if(!d||e.editable!==!0)return c.jsx(re,{ref:P,tabIndex:F(),onFocus:()=>L(!0),hasRender:!!e.readonlyComponent,...S,children:e.readonlyComponent?c.jsx(e.readonlyComponent,{rowData:n,value:e!=null&&e.objectAccessor?n[e.accessor][e==null?void 0:e.objectAccessor]:n[e.accessor],fullValue:n[e.accessor],disabled:!0}):e!=null&&e.objectAccessor?n[e.accessor][e==null?void 0:e.objectAccessor]:n[e.accessor]})};return i.createElement(ee,{"data-rowindex":f,...S,selection:v,width:G(),key:E,focused:d,isBoolean:e.inputType===C.BOOLEAN},Y())};N.propTypes={__TYPE__:r.PropTypes.string,Column:r.PropTypes.object,RowData:r.PropTypes.object,Index:r.PropTypes.number,EnableSelection:r.PropTypes.bool,TabIndexOffset:r.PropTypes.number,className:r.PropTypes.string,size:r.PropTypes.oneOf(["small","medium","large"]),color:r.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"])};N.displayName="TABLE_CELL";const k=i.forwardRef((s,d)=>{var{__TYPE__:L="EDITABLE_TABLE",Data:l=[],onRowFocusChange:P=()=>{},onDiscard:A=()=>{},onInputChange:R=()=>{}}=s;const e=i.useRef({FocusedCell:null,PreviousFocusedCell:null}),p=i.useRef([]),n=i.useRef(null),E=i.useRef();i.useImperativeHandle(d,()=>({focusFirstCellOfLastRow:()=>{n.current&&n.current.focus()},focusLastActiveCell:()=>{try{var t=p.current.find(a=>a.row===e.current.PreviousFocusedCell.row&&a.cell===e.current.PreviousFocusedCell.cell);t.ref&&t.ref.focus()}catch{}}}),[s]);const f=(t,a,T,m,b,O)=>{R&&R(t,a,T,m,b,O)},v=(t,a,T,m,b)=>{a&&(e.current={...e.current,FocusedCell:{row:T,cell:m,ref:b}}),a||(e.current={PreviousFocusedCell:e.current.FocusedCell,FocusedCell:null},I(t,T))},I=(t,a)=>{(t.relatedTarget===null||t.relatedTarget.closest("tbody")===null||!t.relatedTarget.closest("tbody").hasAttribute("data-tbody"))&&P(t,a,-1),t.relatedTarget&&t.relatedTarget.closest("tbody")&&t.relatedTarget.closest("tbody").hasAttribute("data-tbody")&&parseInt(t.relatedTarget.closest("td").getAttribute("data-rowindex"))!==a&&P(t,a,parseInt(t.relatedTarget.closest("td").getAttribute("data-rowindex")))},D=(t,a,T)=>{if(t===l.length-1&&a===0&&(n.current=T.current),p.current.length===0&&(p.current=[{row:t,cell:a,ref:T.current}]),p.current.length>0&&p.current.find(b=>b.row===t&&b.cell===a)){var m=p.current.find(b=>b.row===t&&b.cell===a);m.ref=T.current}else p.current.length>0&&(p.current=[...p.current,{row:t,cell:a,ref:T.current}])},q=()=>w.renderCustomElement(w.getCustomRender("TABLE_SPECIAL_LAST_ROW",s.children),{TabIndexOffset:50})||c.jsx(c.Fragment,{}),x=()=>{var t={TabIndexOffset:50,onFocusChanged:v,onChange:f,onDiscard:A,onMount:D};return w.renderCustomElement(w.getCustomRender("TABLE_CELL",s.children),t)||c.jsx(N,{...t})};return c.jsx(c.Fragment,{children:c.jsxs(H.default,{ref:E,...s,Data:l,VisibilityPattern:null,children:[s.children,x(),q()]})})});k.propTypes={__TYPE__:r.PropTypes.string,EnableSelection:r.PropTypes.bool,EnableOrdering:r.PropTypes.bool,EnableLoader:r.PropTypes.bool,EnableSelectAll:r.PropTypes.bool,NoDataText:r.PropTypes.string,Loading:r.PropTypes.bool,Columns:r.PropTypes.arrayOf(r.PropTypes.object),Data:r.PropTypes.arrayOf(r.PropTypes.object),SelectedData:r.PropTypes.arrayOf(r.PropTypes.object),SelectedEntirePage:r.PropTypes.bool,RowIdentifier:r.PropTypes.string,VisibilityPattern:r.PropTypes.object,Ordering:r.PropTypes.object,onRowFocusChange:()=>{},onDiscard:()=>{},onInputChange:()=>{},onColumnClick:r.PropTypes.func,onRowClick:r.PropTypes.func,onSelectRow:r.PropTypes.func,onSelectAll:r.PropTypes.func,className:r.PropTypes.string,size:r.PropTypes.oneOf(["small","medium","large"]),color:r.PropTypes.oneOf(["primary","secondary","success","error","warning","gray","white","neutral"])};k.displayName="EDITABLE_TABLE";module.exports=k;