carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 5.45 kB
JavaScript
import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import o,{useRef as n,useState as i,useLayoutEffect as l,useMemo as a,useContext as s,useCallback as d,useEffect as c}from"react";import f from"invariant";import b from"../../../__internal__/utils/helpers/events/events.js";import u from"./flat-table-row.style.js";import p from"../../drawer/__internal__/drawer-sidebar.context.js";import{FlatTableRowHeader as m}from"../flat-table-row-header/flat-table-row-header.component.js";import{useStrictFlatTableContext as h}from"../__internal__/strict-flat-table.context.js";import g from"../../../__internal__/utils/helpers/guid/index.js";import w from"./__internal__/flat-table-row.context.js";import y,{SubRowContext as _}from"./__internal__/sub-row-provider.js";import O from"../__internal__/build-position-map.js";import j from"../flat-table-head/__internal__/flat-table-head.context.js";import"@atlaskit/pragmatic-drag-and-drop/element/adapter";import v from"../__internal__/sortable/use-sortable-row.js";function x(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function S(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){x(e,t,r[t])}))}return e}const P=o.forwardRef(((o,x)=>{var P,{children:C,onClick:R,expandable:k,expandableArea:I="wholeRow",expanded:z=!1,highlighted:D,selected:E,subRows:A,bgColor:B,horizontalBorderColor:K,horizontalBorderSize:H="small",id:T,draggableProps:F,"data-element":N,"data-role":W}=o,$=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(o,["children","onClick","expandable","expandableArea","expanded","highlighted","selected","subRows","bgColor","horizontalBorderColor","horizontalBorderSize","id","draggableProps","data-element","data-role"]);const q=n(T?String(T):g()),[G,J]=i(z),L=n(null),M="firstColumn"===I,[Q,U]=i({}),[V,X]=i({}),[Y,Z]=i(0),[ee,te]=i(-1),[re,oe]=i(-1),[ne,ie]=i(null),[le,ae]=i([]),[se,de]=i(-1);let ce={};l((()=>{var e;const t=(e,t)=>{const r=Object.keys(e),o=Object.keys(t);return r.length!==o.length||r.some((r=>e[r]!==t[r]))},r=null===(e=L.current)||void 0===e?void 0:e.querySelectorAll("th, td"),o=Array.from(r||[]);ae(o);const n=o.findIndex((e=>"flat-table-checkbox"!==e.getAttribute("data-component"))),i=o.findIndex((e=>"left"===e.getAttribute("data-sticky-align"))),l=o.findIndex((e=>"right"===e.getAttribute("data-sticky-align")));if(te(i),oe(l),-1!==n?(Z(n),ie(o[n].getAttribute("id"))):Z(0),-1!==i){const e=O(o.slice(0,ee+1),"offsetWidth");t(e,Q)&&U(e)}if(-1!==l){const e=O(o.slice(re,o.length).reverse(),"offsetWidth");t(e,V)&&X(e)}}),[C,Q,ee,re,V]);const fe=a((()=>!(-1!==ee)||!(-1!==re)||ee<re),[ee,re]);f(fe,`Do not render a right hand side \`${m.displayName}\` before left hand side \`${m.displayName}\``);const{colorTheme:be,size:ue,getTabStopElementId:pe}=h(),{isInSidebar:me}=s(p),{stickyOffsets:he}=s(j),ge=d((e=>{const t=b.isEnterKey(e)||b.isSpaceKey(e);k&&!M&&document.activeElement===L.current&&t&&(e.preventDefault(),J((e=>!e))),t&&R&&R(e)}),[k,M,R]),we=d((e=>{R&&R(e),k&&!M&&J((e=>!e))}),[R,k,M]);(R||k)&&(ce={isRowInteractive:!M,tabIndex:M?void 0:se,onKeyDown:ge,isFirstColumnInteractive:M,isExpanded:G}),c((()=>{J(z)}),[z]),c((()=>{de(pe()===q.current?0:-1)}),[pe]);const{isSubRow:ye,firstRowId:_e,addRow:Oe,removeRow:je}=s(_);c((()=>{const e=q.current;return Oe(e),()=>{je(e)}}),[Oe,je]);const ve=_e===q.current,xe=d((()=>N||(ye?"flat-table-sub-row":"flat-table-row")),[N,ye]),{isDragging:Se}=v({id:q.current,index:null==F?void 0:F.index,ref:F?L:null});return e(t,{children:[r(u,(Pe=S({isInSidebar:me,expandable:k,isSubRow:ye,isFirstSubRow:ve,"data-element":xe(),"data-role":W,highlighted:D,selected:E,onClick:we,firstCellIndex:Y,ref:e=>{"function"==typeof x?x(e):x&&(x.current=e),L.current=e},lhsRowHeaderIndex:ee,rhsRowHeaderIndex:re,colorTheme:be,size:ue,stickyOffset:he[q.current],bgColor:B,horizontalBorderColor:K,horizontalBorderSize:H,draggable:!!F,isDragging:Se,totalChildren:le.length,id:q.current,"data-selected":E&&"wholeRow"===I,"data-highlighted":D&&"wholeRow"===I,rowHeight:null==L||null===(P=L.current)||void 0===P?void 0:P.offsetHeight},ce,$),Ce={"data-component":"flat-table-row",children:r(w.Provider,{value:{firstCellId:ne,expandable:k,leftPositions:Q,rightPositions:V,firstColumnExpandable:M,onKeyDown:e=>{(b.isEnterKey(e)||b.isSpaceKey(e))&&(e.preventDefault(),J((e=>!e)))},onClick:()=>J((e=>!e)),highlighted:D,selected:E},children:C})},Ce=null!=Ce?Ce:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Pe,Object.getOwnPropertyDescriptors(Ce)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(Ce)).forEach((function(e){Object.defineProperty(Pe,e,Object.getOwnPropertyDescriptor(Ce,e))})),Pe)),G&&A&&r(y,{children:A})]});var Pe,Ce}));P.displayName="FlatTableRow";export{P as FlatTableRow,P as default};