tdesign-miniprogram/miniprogram_dist/table/table.js

TDesign Component for miniprogram

import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./base-table-props";const{prefix:prefix}=config,name=`${prefix}-table`;function get(e,t){if(!e||!t)return;const o=t.split(".");let n=e;return o.forEach(e=>{null!=n&&(n=n[e])}),n}function formatCSSUnit(e){return e?Number.isNaN(Number(e))?e:`${e}px`:e}let Table=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`],this.options={multipleSlots:!0},this.properties=props,this.data={prefix:prefix,classPrefix:name,tableClasses:"",tableContentStyles:"",tableElementStyles:"",theadClasses:"",tbodyClasses:"",renderData:[],isEmpty:!1,colStyles:[],thClassNames:[],tdClassNames:[],hasFixedColumn:!1,scrollableToLeft:!1,scrollableToRight:!1,contentClasses:""},this.observers={"bordered, stripe, verticalAlign, loading, rowspanAndColspan, tableLayout, height, maxHeight, tableContentWidth, showHeader, columns, data, cellEmptyContent, rowKey, fixedRows"(){this.updateTable()}},this.lifetimes={attached(){this.updateTable()}},this.methods={updateTable(){const{bordered:e,stripe:t,verticalAlign:o,loading:n,rowspanAndColspan:l,tableLayout:i,height:s,maxHeight:a,tableContentWidth:r,showHeader:c,columns:d,data:h,cellEmptyContent:p,rowKey:f,fixedRows:m}=this.properties,g=m&&m[0]||0,x=m&&m[1]||0,u=!(!c||!a&&!s),$=(d||[]).some(e=>!!e.fixed),w=[name,`${prefix}-vertical-align-${o||"middle"}`,e?`${name}--bordered`:"",t?`${name}--striped`:"",t&&(a||s)?`${name}--header-fixed`:"",n?`${name}--loading`:"",l?`${name}--rowspan-colspan`:"",$?`${name}--column-fixed`:""].filter(Boolean).join(" "),_=[];s&&_.push(`height: ${formatCSSUnit(s)}`),a&&_.push(`max-height: ${formatCSSUnit(a)}`);const b=_.join("; ");let C=r?`width: ${formatCSSUnit(r)}`:"";if(!C&&$&&d&&d.length>0){C=`width: ${d.reduce((e,t)=>e+parseFloat(String(t.width||80)),0)}px`}const y=[`${name}__header`,a||s?`${name}__header--fixed`:""].filter(Boolean).join(" "),S=`${name}__body`,v=`${name}--layout-${i||"fixed"}`,k=[],T=[];if($){let e=0;for(let t=0;t<(d||[]).length;t+=1){k[t]=e;const o=d[t];if("left"===o.fixed){e+=parseFloat(String(o.width||80))}}let t=0;for(let e=(d||[]).length-1;e>=0;e-=1){T[e]=t;const o=d[e];if("right"===o.fixed){t+=parseFloat(String(o.width||80))}}}let E=-1,F=-1;(d||[]).forEach((e,t)=>{"left"===e.fixed&&(E=t),"right"===e.fixed&&-1===F&&(F=t)});const I="fixed"===i?"80px":void 0,K=(d||[]).map((e,t)=>{const o=formatCSSUnit(e.width||I),n=formatCSSUnit(e.width||I)||e.minWidth||"fixed"!==i?formatCSSUnit(e.minWidth):"80px",l=[];return e.width&&l.push("flex: 0 0 auto"),o&&l.push(`width: ${o}`),n&&l.push(`min-width: ${n}`),"left"===e.fixed?l.push(`left: ${k[t]}px`):"right"===e.fixed&&l.push(`right: ${T[t]}px`),l.join("; ")}),j=(d||[]).map((e,t)=>{const o=[];return e.colKey&&o.push(`${name}__th-${e.colKey}`),e.align&&"left"!==e.align&&o.push(`${prefix}-align-${e.align}`),"left"===e.fixed&&o.push(`${name}__cell--fixed-left`),"right"===e.fixed&&o.push(`${name}__cell--fixed-right`),t===E&&o.push(`${name}__cell--fixed-left-last`),t===F&&o.push(`${name}__cell--fixed-right-first`),o.join(" ")}),N=new Map;if(l&&(null==h?void 0:h.length)&&(null==d?void 0:d.length))for(let e=0;e<h.length;e+=1){const t=h[e];for(let o=0;o<d.length;o+=1){const n=d[o],i=`${get(t,f||"id")}_${n.colKey||o}`,s=N.get(i)||{},a=l({row:t,col:n,rowIndex:e,colIndex:o})||{};if((a.rowspan||a.colspan||s.rowspan||s.colspan)&&(a.rowspan&&(s.rowspan=a.rowspan),a.colspan&&(s.colspan=a.colspan),N.set(i,s)),s.rowspan||s.colspan){const t=e+(s.rowspan||1),n=o+(s.colspan||1);for(let l=e;l<t;l+=1)for(let t=o;t<n;t+=1)if((l!==e||t!==o)&&h[l]&&d[t]){const e=`${get(h[l],f||"id")}_${d[t].colKey||t}`,o=N.get(e)||{};o.skipped=!0,N.set(e,o)}}}}const R=(h||[]).map((e,t)=>{const o=(d||[]).map((o,n)=>{const i=`${get(e,f||"id")}_${o.colKey||n}`,s=N.get(i),a=[];o.align&&"left"!==o.align&&a.push(`${prefix}-align-${o.align}`),"left"===o.fixed&&a.push(`${name}__cell--fixed-left`),"right"===o.fixed&&a.push(`${name}__cell--fixed-right`),n===E&&a.push(`${name}__cell--fixed-left-last`),n===F&&a.push(`${name}__cell--fixed-right-first`);let r="";if("serial-number"===o.colKey)r=String(t+1);else if("function"==typeof o.cell)r=o.cell({row:e,col:o,rowIndex:t,colIndex:n});else{const t=get(e,o.colKey||"");null!=t&&""!==t?r=String(t):p&&(r=p)}return{colKey:o.colKey||String(n),content:r,className:a.join(" "),skipped:(null==s?void 0:s.skipped)||!1,rowspan:(null==s?void 0:s.rowspan)||0,colspan:(null==s?void 0:s.colspan)||0,isLastRow:!(!(null==s?void 0:s.rowspan)||t+s.rowspan!==h.length),isFirstCol:!(!l||0!==n)}});return{rowIndex:t,rowId:get(e,f||"id"),cells:o,row:e,rowClass:(()=>{const e=[],o=h.length;return g>0&&t<g&&e.push(`${name}__row--fixed-top`),x>0&&t>=o-x&&(e.push(`${name}__row--fixed-bottom`),t===o-x&&e.push(`${name}__row--fixed-bottom-first`)),x>0&&t===o-x-1&&e.push(`${name}__row--without-border-bottom`),e.join(" ")})(),rowStyle:(()=>{const e=h.length,o=this.data.hasFixedColumn?32:2;return g>0&&t<g?`position: sticky; top: 0px; z-index: ${o};`:x>0&&t>=e-x?`position: sticky; bottom: 0px; z-index: ${o};`:""})()}}),A=!h||0===h.length,D=[`${name}__content`,$?`${name}__content--scrollable-to-right`:""].filter(Boolean).join(" ");this.setData({tableClasses:w,tableContentStyles:b,tableElementStyles:C,theadClasses:y,tbodyClasses:S,layoutClass:v,renderData:R,isEmpty:A,colStyles:K,thClassNames:j,columnsLength:(d||[]).length,hasFixedColumn:$,contentClasses:D},()=>{(g>0||x>0)&&this.measureAndFixStickyPositions(u,g,x,(h||[]).length)})},measureAndFixStickyPositions(e,t,o,n){const l=this.createSelectorQuery();l.select(`.${name}__header`).boundingClientRect(),l.selectAll(`.${name}__tr`).boundingClientRect(),l.exec(l=>{if(!l)return;const i=l[0],s=l[1];if(!s||0===s.length)return;const a=e&&i?i.height:0,r={},c=this.data.hasFixedColumn?32:2;let d=a;for(let e=0;e<t&&e<s.length;e+=1)r[`renderData[${e}].rowStyle`]=`position: sticky; top: ${d}px; z-index: ${c};`,d+=s[e].height;let h=0;for(let e=n-1;e>=n-o&&e>=0;e-=1)e<s.length&&(r[`renderData[${e}].rowStyle`]=`position: sticky; bottom: ${h}px; z-index: ${c};`,h+=s[e].height);Object.keys(r).length>0&&this.setData(r)})},onRowClick(e){const{rowIndex:t}=e.currentTarget.dataset,{data:o}=this.properties;o&&o[t]&&this.triggerEvent("row-click",{row:o[t],index:t})},onCellClick(e){const{rowIndex:t,colIndex:o}=e.currentTarget.dataset,{data:n,columns:l}=this.properties;n&&n[t]&&l&&l[o]&&this.triggerEvent("cell-click",{row:n[t],col:l[o],rowIndex:t,colIndex:o})},onScroll(e){this.triggerEvent("scroll",{e:e});const t=e.detail||{};if(this.data.hasFixedColumn&&void 0!==t.scrollLeft){const{scrollLeft:e}=t,o=t.scrollWidth||0;this.createSelectorQuery().select(`.${name}__content`).boundingClientRect().exec(t=>{if(t&&t[0]){const n=t[0].width,l=[`${name}__content`,e>1?`${name}__content--scrollable-to-left`:"",o-e-n>1?`${name}__content--scrollable-to-right`:""].filter(Boolean).join(" ");l!==this.data.contentClasses&&this.setData({contentClasses:l})}})}t.scrollHeight&&void 0!==t.scrollTop&&t.scrollHeight-t.scrollTop-t.clientHeight<=50&&this.triggerEvent("scroll-to-bottom")}}}};Table=__decorate([wxComponent()],Table);export default Table;