carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 5.28 kB
JavaScript
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as r,useState as o,useContext as n,useLayoutEffect as i,useCallback as l,useMemo as a}from"react";import{StyledFlatTableWrapper as c,StyledTableContainer as s,StyledFlatTable as d,StyledFlatTableFooter as u}from"./flat-table.style.js";import f from"../drawer/__internal__/drawer-sidebar.context.js";import b from"../../__internal__/utils/helpers/events/events.js";import{StrictFlatTableProvider as h}from"./__internal__/strict-flat-table.context.js";import p from"./__internal__/flat-table.context.js";function y(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function m(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){y(e,t,r[t])}))}return e}function v(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const g="tbody tr[tabindex], tbody tr td[tabindex], tbody tr th[tabindex]",O=y=>{var{caption:O,children:w,hasStickyHead:S,colorTheme:j="dark",footer:x,hasStickyFooter:P=!1,height:_,isZebra:A,size:D="medium",hasMaxHeight:H=!1,hasOuterVerticalBorders:k=!0,bottomBorderRadius:I="borderRadius100",ariaDescribedby:B,minHeight:E,overflowX:K,width:R,title:T}=y,q=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}(y,["caption","children","hasStickyHead","colorTheme","footer","hasStickyFooter","height","isZebra","size","hasMaxHeight","hasOuterVerticalBorders","bottomBorderRadius","ariaDescribedby","minHeight","overflowX","width","title"]);const F=r(null),z=r(null),C=r(null),[V,X]=o(!1),[Z,M]=o(!1),[N,U]=o(-1),[W,Y]=o(-1),G=!_&&(S||P),J={caption:O,isZebra:A,size:D,"aria-describedby":B},{isInSidebar:L}=n(f),[Q,$]=o(!1);i((()=>{const e=(e,t)=>e.find(((e,r)=>{const o=Array.from(e.querySelectorAll("td, th")),n=t?o.shift():o.pop(),i=null==n?void 0:n.getAttribute("rowspan");return i&&Number(i)>=r+1}));if(F.current&&z.current){var t;const{offsetHeight:r,offsetWidth:o}=F.current,{top:n,bottom:i,right:l,left:a}=null===(t=z.current)||void 0===t?void 0:t.getBoundingClientRect();X(i-n>r),M(l-a>o);const c=z.current.querySelector("tbody"),s=c?Array.from(null==c?void 0:c.querySelectorAll("tr")):[],{length:d}=s,u=e(s.slice(0,d-1).reverse(),!0),f=e(s.slice(0,d-1).reverse());u&&U(s.indexOf(u)),f&&Y(s.indexOf(f))}}),[x,_,E]);const ee=e=>e.findIndex((e=>{const t=e.querySelectorAll("button, input, a, [tabindex]");return!(!t||!Array.from(t).find((e=>e===document.activeElement)))})),te=l((e=>{var t;const r=null===(t=z.current)||void 0===t?void 0:t.querySelectorAll(g),o=Array.from(r||[]);if(!o.length)return;const n=o.findIndex((e=>e===document.activeElement));if(Q&&(S||P))(b.isPageUpKey(e)||b.isPageDownKey(e)||b.isHomeKey(e)||b.isEndKey(e))&&e.preventDefault();else if(b.isDownKey(e))if(e.preventDefault(),-1!==n&&n<o.length){var i;null===(i=o[n+1])||void 0===i||i.focus()}else{const e=ee(o);var l;-1!==e&&e<o.length&&(null===(l=o[e+1])||void 0===l||l.focus())}else if(b.isUpKey(e))if(e.preventDefault(),n>0){var a;null===(a=o[n-1])||void 0===a||a.focus()}else{const e=ee(o);var c;e>0&&(null===(c=o[e-1])||void 0===c||c.focus())}}),[Q,P,S]),re=l((()=>{var e;const t=Array.from((null===(e=z.current)||void 0===e?void 0:e.querySelectorAll(g))||[]),r=t.find((e=>"true"===e.getAttribute("data-selected")||"true"===e.getAttribute("data-highlighted")))||t[0];return(null==r?void 0:r.getAttribute("id"))||""}),[]),oe=a((()=>({colorTheme:j,size:D,getTabStopElementId:re})),[j,D,re]),ne=a((()=>({isInFlatTable:!0,setHasOpenDatePicker:$})),[$]);return e(c,v(m({ref:F,"data-role":"flat-table-wrapper",isInSidebar:L,hasStickyHead:S,colorTheme:j,minHeight:E,overflowY:S||P?"auto":void 0,height:G&&!H?"99%":_,maxHeight:H?"100%":void 0,hasOuterVerticalBorders:k,bottomBorderRadius:I,display:"flex",flexDirection:"column",justifyContent:P||_?"space-between":void 0,role:"region",overflowX:R?"hidden":void 0,width:R,hasStickyFooter:P,hasVerticalScrollbar:V,hasHorizontalScrollbar:Z,footer:!!x,firstColRowSpanIndex:N,lastColRowSpanIndex:W,onKeyDown:te},q),{"data-component":"flat-table-wrapper",title:T,children:[t(s,{ref:C,tabIndex:0,overflowX:K,width:R,"data-role":"flat-table-container",children:e(d,v(m({ref:z,"data-component":"flat-table"},J),{children:[O?t("caption",{children:O}):null,t(h,{value:oe,children:t(p.Provider,{value:ne,children:w})})]}))}),x&&t(u,{hasStickyFooter:P,"data-role":"flat-table-footer",children:x})]}))};O.displayName="FlatTable";export{O as FlatTable,O as default};