azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 22.2 kB
JavaScript
import"../../CommonImports";import"../../Core/core.css";import"./Table.css";import{ObservableLike}from"../../Core/Observable";import*as Utils_Accessibility from"../../Core/Util/Accessibility";import{format}from"../../Core/Util/String";import{FocusOrMouseWithin}from"../../FocusOrMouseWithin";import{FocusWithin}from"../../FocusWithin";import{FocusZone,FocusZoneContext,FocusZoneDirection,FocusZoneKeyStroke}from"../../FocusZone";import{Icon}from"../../Icon";import{Intersection}from"../../Intersection";import{getDefaultLinkProps}from"../../Link";import{List,renderListCell,DropdownList}from"../../List";import{Observer}from"../../Observer";import*as Resources from"../../Resources.Widgets";import{Orientation,Position,Sizer}from"../../Sizer";import{Tooltip}from"../../TooltipEx";import{KeyCode,css,getSafeId,getSafeIdWithSymbolConversion}from"../../Util";import{EventDispatch}from"../../Utilities/Dispatch";import{getTabIndex}from"../../Utilities/Focus";import{ScreenSizeConditional}from"../../Utilities/ScreenSize";import*as React from"react";import{ColumnJustification,IMeasurementStyle,SortOrder,TableColumnLayout,TableColumnStyle}from"./Table.Props";import{TableBreakpoint}from"./TableBreakpoint";const ColumnFillId="_fill",ColumnFill={columnLayout:TableColumnLayout.none,id:ColumnFillId,renderCell:(e,t)=>React.createElement("td",{key:"col-fill","aria-colindex":t+1,"aria-hidden":!0,className:css("bolt-table-cell bolt-list-cell","col-"+t),"data-column-index":t,role:"presentation"}),renderHeaderCell:(e,t)=>React.createElement("th",{key:"col-fill","aria-hidden":!0,className:css(t.headerClassName,"bolt-table-header-cell bolt-table-header-cell-empty","col-header-"+e),"data-column-index":e,role:"presentation"}),width:-100};class Table extends React.Component{constructor(t){super(t),this.currentElement=React.createRef(),this.list=React.createRef(),this.dropdownList=React.createRef(),this.onBreakpoint=()=>{var e=this.props.tableBreakpoints?getVisibleColumnsAndIndices(this.props.columns).map(({originalIndex:e})=>e).join(","):"";!this.state.renderInvisible&&this.state.visibleColumnsKey===e||this.setState({renderInvisible:!1,visibleColumnsKey:e})},this.onColumnsChanged=()=>(this.forceUpdate(),!1),this.renderHeader=()=>{const{columns:t,showHeader:l,renderHeader:e,spacerWidth:o}=this.props,i=[];let a=0;for(let e=0;e<t.length;e++){var n=ObservableLike.getValue(t[e].width);n<0&&(a+=n)}for(let e=0;e<t.length;e++){var r=ObservableLike.getValue(t[e].width);i[e]=0<=r?r:-(r/a)*100}let s=null;return!1!==l&&(s=e?e(t):React.createElement(TableHeader,{tableColumns:t})),"function"==typeof l&&(s=React.createElement(ScreenSizeConditional,{condition:e=>l(e)},s)),React.createElement(React.Fragment,null,React.createElement("colgroup",null,React.createElement("col",{key:"col-group-left-spacer",style:{width:0===o?o+"%":o+"px"}}),getVisibleColumnsAndIndices(t).map(({column:e,originalIndex:t})=>{const{widthStyle:l=IMeasurementStyle.Pixel}=e;return React.createElement(Observer,{key:"col-group-"+t,width:{filter:this.onColumnsChanged,observableValue:e.width}},()=>React.createElement("col",{style:{width:Math.abs(i[t])+(i[t]<0?"%":l===IMeasurementStyle.Pixel?"px":"rem")}}))}),React.createElement("col",{key:"col-group-right-spacer",style:{width:0===o?o+"%":o+"px"}})),s)},this.renderLoadingRow=(e,t)=>{var{columns:l,renderLoadingRow:o}=this.props,i={ariaBusy:!0,ariaRowOffset:t.ariaRowOffset,data:t.data,eventDispatch:this.state.eventDispatch,excludeFocusZone:!0,excludeTabStop:null!=(i=this.props.excludeTabStop)?i:t.excludeTabStop,itemProvider:this.props.itemProvider,listProps:t.listProps,onFocusItem:t.onFocusItem,renderSpacer:this.props.renderSpacer,selection:this.props.selection,singleClickActivation:this.props.onActivate&&this.props.singleClickActivation};return o?o(e,i):React.createElement(TableLoadingRow,{columns:l,details:i,rowIndex:e})},this.renderRow=(e,t,l)=>{var o={selectableText:l.selectableText,ariaRowOffset:l.ariaRowOffset,eventDispatch:this.state.eventDispatch,data:l.data,excludeTabStop:null!=(o=this.props.excludeTabStop)?o:l.excludeTabStop,itemProvider:this.props.itemProvider,listProps:l.listProps,onFocusItem:l.onFocusItem,renderSpacer:this.props.renderSpacer,selection:this.props.selection,singleClickActivation:this.props.onActivate&&this.props.singleClickActivation,role:"tree"===this.props.role?"treeitem":void 0},l=t.renderRow||this.props.renderRow;return l?l(e,t,o):React.createElement(TableRow,{details:o,index:e,linkProps:t.linkProps},renderColumns(e,this.props.columns,t,o))},this.state={columnBehaviors:[],eventDispatch:t.eventDispatch||new EventDispatch,renderInvisible:!!t.tableBreakpoints,visibleColumnsKey:"",tableBehaviors:[],tableWidth:""};for(let e=0;e<t.columns.length;e++){var l=t.columns[e];if(l.behaviors)for(const o of l.behaviors)o&&o.initialize&&o.initialize({tableProps:t,columnIndex:e},{},this.state.eventDispatch)}if(t.behaviors)for(const e of t.behaviors)e.initialize&&e.initialize(t,this,this.state.eventDispatch)}static getDerivedStateFromProps(t,e){var l=[],o=[];for(let e=0;e<t.columns.length;e++){var i=t.columns[e];if(i.behaviors)for(const a of i.behaviors)o.push(a)}return t.behaviors&&l.splice(l.length,0,...t.behaviors),{columnBehaviors:o,tableBehaviors:l}}render(){var{eventDispatch:e,renderInvisible:t,visibleColumnsKey:l}=this.state,{selectableText:o,className:i,columns:a,containerClassName:n,enforceSingleSelect:r,excludeTabStop:s,focuszoneProps:c,showLines:d,id:m,itemProvider:u,maxHeight:p,onActivate:h,onFocus:b,onSelect:f,pageSize:v,role:R,rowHeight:g,rowHeights:A,scrollable:w,selection:W,singleClickActivation:H,selectRowOnClick:B,showScroll:M,tableBreakpoints:C,virtualize:U}=this.props,x=[],S=2*(this.props.spacerWidth||0);let y=S,I=S,E=S,N=!1,k=!1,L=!1,T=0,P=0;for(const D of a){var{maxWidth:F,minWidth:V,widthStyle:j=IMeasurementStyle.Pixel}=D,z=ObservableLike.getValue(D.width);x.push(D.width),z<0?(L=!0,I+=V||0,F?(N=!0,y+=F):k=!0,T++):0<z&&(j===IMeasurementStyle.Pixel?(E+=z,I+=z,y+=z):(E+=16*z,I+=16*z,y+=16*z),T++),"_fill"===D.id&&P++}S={selectableText:o,ariaColumnCount:T-P,ariaLabel:this.props.ariaLabel,ariaRowOffset:this.props.showHeader?1:0,className:css(i,"bolt-table",d&&"bolt-table-show-lines"),columnCount:T+2,enforceSingleSelect:r,eventDispatch:e,excludeTabStop:s,focuszoneProps:c,id:m,itemProvider:u,maxWidth:N&&!k?y+"px":void 0,maxHeight:p,minWidth:I!==E?I+"px":void 0,onActivate:h,onFocus:b,onSelect:f,pageSize:v,renderHeader:this.renderHeader,renderLoadingRow:this.renderLoadingRow,renderRow:this.renderRow,role:R,rowHeight:g,rowHeights:A,selection:W,selectRowOnClick:B,singleClickActivation:H,showScroll:M,virtualize:U,width:L?"100%":E+"px"};0<=getActionableIndex(a)&&(S.defaultTabbableRow=-1);let O=React.createElement("div",{className:css(n,"bolt-table-container flex-grow",t&&"invisible",w&&"v-scroll-auto",C&&"h-scroll-hidden"),ref:this.currentElement},C?React.createElement(TableBreakpoint,{columnWidths:x,onBreakpoint:this.onBreakpoint,breakpoints:C}):void 0,"listbox"!==S.role||null!=(o=S.className)&&o.includes("bolt-list-box-tree")?React.createElement(List,Object.assign({},S,{key:l,ref:this.list})):React.createElement(DropdownList,Object.assign({},S,{key:l,ref:this.dropdownList,renderHeader:()=>React.createElement(React.Fragment,null)})));return O=w?React.createElement(Intersection,null,O):O}componentDidMount(){for(const e of this.state.tableBehaviors)e.componentDidMount&&e.componentDidMount(this.props);for(const t of this.state.columnBehaviors)t.componentDidMount&&t.componentDidMount({tableProps:this.props})}componentDidUpdate(){for(const e of this.state.tableBehaviors)e.componentDidUpdate&&e.componentDidUpdate(this.props);for(const t of this.state.columnBehaviors)t.componentDidUpdate&&t.componentDidUpdate({tableProps:this.props})}componentWillUnmount(){for(const e of this.state.tableBehaviors)e.componentWillUnmount&&e.componentWillUnmount();for(const t of this.state.columnBehaviors)t.componentDidUpdate&&t.componentDidUpdate({tableProps:this.props})}addOverlay(e,t,l,o=0,i){if(this.list.current)return this.list.current.addOverlay(e,t,l,o,i)}removeOverlay(e){if(this.list.current)return this.list.current.removeOverlay(e)}focusRow(e,t=1){return this.list.current?this.list.current.focusRow(e,t):Promise.resolve()}getFocusIndex(){return this.list.current?this.list.current.getFocusIndex():-1}getStats(){return this.list.current?this.list.current.getStats():{firstMaterialized:-1,firstRendered:-1,lastMaterialized:-1,lastRendered:-1}}scrollIntoView(e,t){return this.dropdownList.current?this.dropdownList.current.scrollIntoView(e,t):this.list.current?this.list.current.scrollIntoView(e,t):void 0}}function renderColumns(l,e,o,i){return getVisibleColumnsAndIndices(e).map(({column:e},t)=>e.renderCell(l,t,e,o,l+(i.ariaRowOffset||1),i.role))}function getVisibleColumnsAndIndices(e){return e.map((e,t)=>({column:e,originalIndex:t})).filter(({column:e})=>ObservableLike.getValue(e.width))}function getActionableIndex(e){return e.findIndex(e=>0!==ObservableLike.getValue(e.width)&&(e.behaviors&&0<e.behaviors.length||!!e.sortProps))}Table.defaultProps={role:"grid",selectRowOnClick:!0,showHeader:!0,showLines:!0,singleClickActivation:!0,spacerWidth:8};class TableHeader extends React.Component{render(){const i=getActionableIndex(this.props.tableColumns);return React.createElement(FocusZoneContext.Consumer,null,o=>React.createElement(FocusZone,{direction:FocusZoneDirection.Horizontal},React.createElement("thead",null,React.createElement(FocusWithin,null,e=>React.createElement("tr",{"aria-rowindex":1,className:css("bolt-table-header-row",e.hasFocus&&"focused"),"data-row-index":-1,onBlur:e.onBlur,onFocus:e.onFocus,role:"row"},React.createElement("th",{"aria-hidden":"true",key:"left-spacer",role:"presentation",className:"bolt-table-header-border"}),getVisibleColumnsAndIndices(this.props.tableColumns).map(({column:e,originalIndex:t},l)=>e.renderHeaderCell?e.renderHeaderCell(l,e,o.focuszoneId,t===i):e.iconProps||e.name?React.createElement(TableHeaderCell,{key:"col-header-"+l,ariaLabel:e.ariaLabel||e.name,column:e,columnIndex:l,focuszoneId:o.focuszoneId,isFirstActionableHeader:t===i},React.createElement(Tooltip,{overflowOnly:!0,text:e.name},React.createElement("div",{className:"bolt-table-header-cell-text text-ellipsis body-s"},e.iconProps&&Icon(e.iconProps),React.createElement("span",{className:css(e.headerTitleClassName,e.required&&"bolt-table-header-cell-text--required")},e.name)))):React.createElement("th",{"aria-colindex":l+1,"aria-label":e.ariaLabel||Resources.EmptyColumnHeaderLabel,"aria-readonly":void 0!==e.readonly?e.readonly:"true",className:"bolt-table-header-border",key:"col-header-"+l})),React.createElement("th",{"aria-hidden":"true",key:"right-spacer",role:"presentation",className:"bolt-table-header-border"}))))))}}let boltTableHeaderCellCount=0;class TableHeaderCell extends React.Component{constructor(e){super(e),this.element=React.createRef(),this.sizerElement=React.createRef(),this.state={measuredWidth:0,isFocused:!1},this.onSize=(e,t)=>{var l=this.props["column"];l.onSize&&l.onSize(e,this.props.columnIndex,t,l)},this.moveToSizer=e=>{var t=this.props["column"],e=e.ctrlKey&&e.altKey&&"r"===e.key;return t.onSize&&e&&null!=(e=null==(t=this.sizerElement.current)?void 0:t.sizerRef.current)&&e.focus(),FocusZoneKeyStroke.IgnoreNone},this.headerCellId=boltTableHeaderCellCount++}render(){const{ariaLabel:r,column:s,columnIndex:c,focuszoneId:d,isFirstActionableHeader:m,role:u}=this.props;let p;var l;return s.onSize&&(l=!!s.showSizerDivider,p=React.createElement(Observer,{width:s.width},e=>{let t=e.width;return t<0&&(t=this.state.measuredWidth),React.createElement(Sizer,{className:"bolt-table-header-sizer",divider:l,keyboardStepMultiplier:24,maxSize:s.maxWidth,minSize:s.minWidth,onSize:this.onSize,onSizeEnd:this.props.column.onSizeEnd,orientation:Orientation.row,position:Position.near,ref:this.sizerElement,size:t,tabIndex:-1})})),React.createElement(FocusZoneContext.Consumer,null,e=>{var t=s.behaviors&&0<s.behaviors.length||!!s.sortProps,{sortProps:l={}}=s,o=s.sortProps&&void 0!==l.sortOrder?Icon({className:"bolt-table-header-sort-icon body-s",iconName:l.sortOrder===SortOrder.ascending?"SortUp":"SortDown"}):null;let i;s.justification===ColumnJustification.Left?i="justify-start":s.justification===ColumnJustification.Right&&(i="justify-end");var a=c+1,n=getSafeId("th-col-content-"+this.headerCellId);return React.createElement(FocusZone,{postprocessKeyStroke:this.moveToSizer},React.createElement("th",{id:getSafeId("th-col-"+a+"-"+s.id),role:null!==u&&void 0!==u?u:"columnheader","aria-colindex":a,"aria-label":r,"aria-labelledby":r?void 0:n,"aria-readonly":"true","aria-sort":void 0!==l.sortOrder?l.sortOrder===SortOrder.ascending?"ascending":"descending":void 0,className:css(s.headerClassName,"bolt-table-header-cell","col-header-"+c,t&&"bolt-table-header-cell-actionable"),"data-column-index":c,"data-focuszone":t&&css(m&&d,e.focuszoneId),ref:this.element,onFocus:()=>this.setState({isFocused:!0}),onBlur:()=>this.setState({isFocused:!1}),tabIndex:t||p?0:-1},React.createElement("div",{className:css("bolt-table-header-cell-content flex-row",i)},s.justification===ColumnJustification.Right&&o,React.createElement("div",{id:n,className:"scroll-hidden"},this.props.children),s.justification!==ColumnJustification.Right&&o,React.createElement("div",null,p))))})}componentDidMount(){this.updateMeasuredWidth()}componentDidUpdate(){this.updateMeasuredWidth()}updateMeasuredWidth(){var e=this.props["column"];e.onSize&&this.element.current&&ObservableLike.getValue(e.width)<0&&(e=this.element.current.getBoundingClientRect().width)!==this.state.measuredWidth&&this.setState({measuredWidth:e})}}function TableRow(i){function a(e){var t=e.target.nodeName;return e.defaultPrevented||"INPUT"===t||"TEXTAREA"===t||e.which===KeyCode.leftArrow&&n.current&&(n.current.focus(),e.preventDefault()),FocusZoneKeyStroke.IgnoreNone}const[n]=React.useState(()=>React.createRef()),{details:r,index:s,linkProps:c}=i,{selectableText:d,ariaLabel:m,ariaBusy:u,ariaDescribedBy:p,ariaPosInSet:h,ariaRowOffset:b,ariaSetSize:f,excludeFocusZone:v,id:R,renderSpacer:g,role:w,selection:C,singleClickActivation:x}=r;let S,y;"menuitemcheckbox"===w?S=C&&C.selected(s):y=C&&C.selected(s);var e=React.createElement(FocusOrMouseWithin,{onFocus:function(e){i.details.onFocusItem(i.index,e);e=null!=(e=i.details.ariaPosInSet)?e:i.index+b;i.details.ariaSetSize?i.linkProps?Utils_Accessibility.announce(format(Resources.ClickableRowAnnouncementWithSize,e,i.details.ariaSetSize),!0):"option"==w?Utils_Accessibility.announce(Resources.ListItem,!0):Utils_Accessibility.announce(format(Resources.RowAnnouncementWithSize,e,i.details.ariaSetSize),!0):i.linkProps?Utils_Accessibility.announce(format(Resources.ClickableRowAnnouncement,e),!0):Utils_Accessibility.announce(format(Resources.RowAnnouncement,e),!0)}},o=>React.createElement(FocusZoneContext.Consumer,null,e=>{var t={"aria-busy":u,"aria-checked":S,"aria-describedby":p,"aria-label":m,"aria-rowindex":"menuitemcheckbox"===w||"option"===w||"presentation"===w?void 0:s+b,"aria-posinset":null===h?void 0:h,"aria-selected":"presentation"===w?void 0:y,"aria-setsize":null===f?void 0:f,className:css(i.className,"bolt-table-row bolt-list-row",0===s&&"first-row",o.hasFocus&&"focused",C&&C.selected(s)&&"selected",x&&"single-click-activation",c&&"v-align-middle",d&&"selectable-text",(null==(t=null==i?void 0:i.className)?void 0:t.includes("bolt-list-box-row"))&&"dropdown-list"),"data-focuszone":v||C&&!C.selectable(s)?void 0:e.focuszoneId,"data-row-index":i.index,id:getSafeIdWithSymbolConversion(R),role:w||"row",tabIndex:getTabIndex(r),onBlur:o.onBlur,onFocus:o.onFocus,onMouseEnter:o.onMouseEnter,onMouseLeave:o.onMouseLeave,ref:n};let l=[];return l=null!=(e=null===t?void 0:t.className)&&e.includes("dropdown-list")?[i.children]:[React.createElement("td",{"aria-hidden":"true",key:"left-spacer",className:"bolt-table-cell-compact bolt-table-cell bolt-list-cell bolt-table-spacer-cell",role:"presentation"},g&&g(s,!0)),i.children,React.createElement("td",{"aria-hidden":"true",key:"right-spacer",className:"bolt-table-cell-compact bolt-table-cell bolt-list-cell bolt-table-spacer-cell",role:"presentation"},g&&g(s,!1))],React.createElement(FocusZone,{direction:FocusZoneDirection.Horizontal,postprocessKeyStroke:a},c?React.createElement("a",Object.assign({},getDefaultLinkProps(c),t),l):null!=(e=null===t?void 0:t.className)&&e.includes("dropdown-list")?React.createElement("li",Object.assign({},t),l):React.createElement("tr",Object.assign({},t),l))}));return r.tooltipProps?React.createElement(Tooltip,Object.assign({},r.tooltipProps),e):e}function TableLoadingRow(e){return React.createElement(TableRow,{className:"bolt-list-row-loading",details:e.details,index:e.rowIndex},getVisibleColumnsAndIndices(e.columns).map(({column:e},t)=>SimpleTableCell({columnIndex:t,children:renderLoadingCell(e.columnLayout)})))}function TableCell(e){var t,{ariaLabel:l,ariaRowIndex:o,className:i,colspan:a,columnIndex:n,role:r,tableColumn:s}=e;let c;return s&&(s.justification===ColumnJustification.Left?c="justify-cell-start":s.justification===ColumnJustification.Right&&(c="justify-cell-end")),null!=(t=null==(t=e.tableColumn)?void 0:t.className)&&t.includes("dropdown-list")||null!=(t=e.className)&&t.includes("dropdown-list")?React.createElement("span",{"aria-colindex":"presentation"===r||"treeitem"===r?void 0:n+1,"aria-label":"presentation"===r||"treeitem"===r?void 0:l,"aria-readonly":"presentation"===r||"treeitem"===r?void 0:s&&s.readonly,"aria-rowindex":"presentation"===r||"treeitem"===r?void 0:o,className:css(i,s&&s.className,"bolt-table-cell bolt-list-cell",c),"data-column-index":n,key:"col-"+n,role:"treeitem"===r?"presentation":r||"gridcell"},e.children):React.createElement("td",{"aria-colindex":"presentation"===r||"treeitem"===r?void 0:n+1,"aria-label":"presentation"===r||"treeitem"===r?void 0:l,"aria-readonly":"presentation"===r||"treeitem"===r?void 0:s&&s.readonly,"aria-rowindex":"presentation"===r||"treeitem"===r?void 0:o,className:css(i,s&&s.className,"bolt-table-cell bolt-list-cell",c),colSpan:a,"data-column-index":n,key:"col-"+n,role:"treeitem"===r?"presentation":r||"gridcell"},e.children)}function SimpleTableCell(e){var t=React.createElement("div",{className:css(e.contentClassName,"bolt-table-cell-content flex-row flex-center")},e.children);return TableCell({ariaLabel:e.ariaLabel,ariaRowIndex:e.ariaRowIndex,children:t,className:e.className,colspan:e.colspan,columnIndex:e.columnIndex,role:e.role,tableColumn:e.tableColumn})}function TwoLineTableCell(e){var t=css(e.rowClassName,"bolt-table-two-line-cell-item flex-row scroll-hidden"),l=React.createElement("div",{className:t},e.line1,e.trailingLine1IconProps&&Icon(Object.assign(Object.assign({},e.trailingLine1IconProps),{className:css(e.trailingLine1IconProps.className,"flex-noshrink")}))),t=React.createElement("div",{className:t},e.line2),l=React.createElement(React.Fragment,null,l,t);let o;return o=e.iconProps?React.createElement("div",{className:css(e.className,"bolt-table-cell-content flex-row flex-center")},Icon(Object.assign(Object.assign({},e.iconProps),{className:css(e.iconProps.className,"bolt-table-two-line-cell-icon flex-noshrink")})),React.createElement("div",{className:"flex-column scroll-hidden"},l),e.trailingIconProps&&Icon(Object.assign(Object.assign({},e.trailingIconProps),{className:css(e.trailingIconProps.className,"bolt-table-two-line-cell-icon flex-noshrink")}))):React.createElement("div",{className:css(e.className,"bolt-table-cell-content flex-column")},l,e.trailingIconProps&&Icon(Object.assign(Object.assign({},e.trailingIconProps),{className:css(e.trailingIconProps.className,"bolt-table-two-line-cell-icon flex-noshrink")}))),TableCell({ariaRowIndex:e.ariaRowIndex,children:o,colspan:e.colspan,columnIndex:e.columnIndex,className:css(e.tableCellClassName,"bolt-table-two-line-cell"),tableColumn:e.tableColumn})}function renderEmptyCell(e,t){return React.createElement(TableCell,{columnIndex:t,key:t,role:"presentation"})}function renderSimpleCell(e,t,l,o,i){return renderSimpleCellValue(t,l,o[l.id],i)}function renderSimpleCellValue(e,t,l,o){var i=t["columnStyle"],a=!(!l||"string"==typeof l||"number"==typeof l||!l.href);return React.createElement(SimpleTableCell,{ariaRowIndex:o,className:css(i===TableColumnStyle.Primary&&"bolt-table-cell-primary",i===TableColumnStyle.Secondary&&"bolt-table-cell-secondary",i===TableColumnStyle.Tertiary&&"bolt-table-cell-tertiary"),columnIndex:e,contentClassName:a?"bolt-table-cell-content-with-link":void 0,key:e,tableColumn:t},l&&renderListCell(l))}function getVariableLength(){return 80*Math.random()+20+"%"}function renderLoadingCell(e){return e===TableColumnLayout.singleLine||void 0===e?React.createElement("div",{className:"shimmer shimmer-line",style:{width:getVariableLength()}}," "):e===TableColumnLayout.singleLinePrefix?React.createElement(React.Fragment,null,React.createElement("div",{className:"shimmer shimmer-circle-small flex-noshrink"}),React.createElement("div",{className:"shimmer shimmer-line",style:{width:getVariableLength()}}," ")):e===TableColumnLayout.twoLine?React.createElement("div",{className:"flex-column flex-grow"},React.createElement("div",{className:"bolt-table-two-line-cell-item shimmer shimmer-line",style:{width:getVariableLength()}}," "),React.createElement("div",{className:"bolt-table-two-line-cell-item shimmer shimmer-line",style:{width:getVariableLength()}}," ")):e===TableColumnLayout.twoLinePrefix?React.createElement(React.Fragment,null,React.createElement("div",{className:"shimmer shimmer-circle-large flex-noshrink"}),React.createElement("div",{className:"flex-column flex-grow"},React.createElement("div",{className:"bolt-table-two-line-cell-item shimmer shimmer-line",style:{width:getVariableLength()}}," "),React.createElement("div",{className:"bolt-table-two-line-cell-item shimmer shimmer-line",style:{width:getVariableLength()}}," "))):null}export{ColumnFillId,ColumnFill,Table,renderColumns,TableHeaderCell,TableRow,TableLoadingRow,TableCell,SimpleTableCell,TwoLineTableCell,renderEmptyCell,renderSimpleCell,renderSimpleCellValue,renderLoadingCell};