@semcore/data-table 2.2.4 → 2.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/lib/cjs/Head.js +2 -0
- package/lib/cjs/Head.js.map +1 -1
- package/lib/es6/Head.js +1 -0
- package/lib/es6/Head.js.map +1 -1
- package/lib/types/Body.d.ts +50 -0
- package/lib/types/DataTable.d.ts +100 -0
- package/lib/types/Head.d.ts +23 -0
- package/lib/types/index.d.ts +2 -0
- package/lib/types/types.d.ts +57 -0
- package/lib/types/utils.d.ts +6 -0
- package/package.json +2 -2
- package/src/Head.tsx +1 -1
package/CHANGELOG.md
CHANGED
package/lib/cjs/Head.js
CHANGED
|
@@ -41,6 +41,8 @@ var _utils = require("./utils");
|
|
|
41
41
|
|
|
42
42
|
var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
|
|
43
43
|
|
|
44
|
+
require("resize-observer-polyfill");
|
|
45
|
+
|
|
44
46
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
45
47
|
|
|
46
48
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
package/lib/cjs/Head.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Head.tsx"],"names":["SORTING_ICON","desc","SortDesc","asc","SortAsc","Head","name","event","asProps","$onSortClick","code","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","Flex","SHead","Box","SSortIcon","sortDirection","isGroup","length","cSize","value","style","flexBasis","props","flex","undefined","fixed","resizable","sortable","active","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","Children","columnsChildren","onResize","$scrollRef","sticky","SHeadWrapper","offsetLeftSum","offsetRightSum","logger","warn","displayName","scrollStyles","origin","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../src/Head.tsx"],"names":["SORTING_ICON","desc","SortDesc","asc","SortAsc","Head","name","event","asProps","$onSortClick","code","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","Flex","SHead","Box","SSortIcon","sortDirection","isGroup","length","cSize","value","style","flexBasis","props","flex","undefined","fixed","resizable","sortable","active","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","Children","columnsChildren","onResize","$scrollRef","sticky","SHeadWrapper","offsetLeftSum","offsetRightSum","logger","warn","displayName","scrollStyles","origin","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,YAAY,GAAG;AACnBC,EAAAA,IAAI,EAAEC,aADa;AAEnBC,EAAAA,GAAG,EAAEC;AAFc,CAArB;;IAeMC,I;;;;;;;;;;;;;;;gGACgB,E;6GAIG,UAACC,IAAD;AAAA,aAAkB,UAACC,KAAD,EAA6B;AACpE,cAAKC,OAAL,CAAaC,YAAb,CAA0BH,IAA1B,EAAgCC,KAAhC;AACD,OAFsB;AAAA,K;2GAIF,UAACD,IAAD;AAAA,aAAkB,UAACC,KAAD,EAAgC;AACrE,YAAIA,KAAK,CAACG,IAAN,KAAe,OAAnB,EAA4B;AAC1B,gBAAKF,OAAL,CAAaC,YAAb,CAA0BH,IAA1B,EAAgCC,KAAhC;AACD;AACF,OAJoB;AAAA,K;;;;;;WAMrB,uBAAcI,OAAd,EAAiCC,KAAjC,EAAgD;AAAA;;AAC9C,aAAOD,OAAO,CAACE,GAAR,CAAY,UAACC,MAAD;AAAA,eAAY,MAAI,CAACC,YAAL,CAAkBD,MAAlB,EAA0BF,KAA1B,CAAZ;AAAA,OAAZ,CAAP;AACD;;;WAED,sBAAaE,MAAb,EAA6BF,KAA7B,EAA4C;AAAA;;AAC1C,0BAAgC,KAAKJ,OAArC;AAAA,UAAQQ,MAAR,iBAAQA,MAAR;AAAA,UAAgBC,GAAhB,iBAAgBA,GAAhB;AAAA,UAAqBC,MAArB,iBAAqBA,MAArB;AACA,UAAMC,OAAO,GAAGC,aAAhB;AACA,UAAMC,KAAK,GAAGC,YAAd;AACA,UAAMC,SAAS,GAAGvB,YAAY,CAACc,MAAM,CAACU,aAAR,CAA9B;AACA,UAAMC,OAAO,GAAGX,MAAM,CAACH,OAAP,EAAgBe,MAAhB,GAAyB,CAAzC;AACA,UAAMC,KAAK,GAAGF,OAAO,GAAG,2BAAeX,MAAM,CAACH,OAAtB,EAA+Be,MAAlC,GAA2C,CAAhE;;AACA,2BAAsB,0BAAcZ,MAAd,EAAsB,KAAKH,OAA3B,CAAtB;AAAA;AAAA,UAAOL,IAAP;AAAA,UAAasB,KAAb;;AAEA,UAAMC,KAAK;AACTC,QAAAA,SAAS,EAAEhB,MAAM,CAACiB,KAAP,CAAaC,IAAb,KAAsBC,SAAtB,cAAsCrB,KAAK,GAAGe,KAA9C;AADF,SAENb,MAAM,CAACiB,KAAP,CAAaF,KAFP,CAAX;;AAKA,UAAIvB,IAAI,KAAK2B,SAAT,IAAsBL,KAAK,KAAKK,SAApC,EAA+C;AAC7CJ,QAAAA,KAAK,CAACvB,IAAD,CAAL,GAAcsB,KAAd;AACD;;AAED,qBAAO,mBAAQZ,MAAR,CAAP,eACE,gCAAC,OAAD;AAAA,eACOF,MAAM,CAACR,IADd;AAAA,eAEOW,GAFP;AAAA,iBAGSH,MAAM,CAACoB,KAHhB;AAAA,qBAIapB,MAAM,CAACqB,SAJpB;AAAA,oBAKYrB,MAAM,CAACsB,QALnB;AAAA,kBAMUtB,MAAM,CAACuB,MANjB;AAAA,iBAOSZ,OAPT;AAAA,oBAQYX,MAAM,CAACsB,QAAP,IAAmB;AAR/B,SASMtB,MAAM,CAACiB,KATb;AAAA,mBAUW,wCACPjB,MAAM,CAACiB,KAAP,CAAaO,OADN,EAEPxB,MAAM,CAACsB,QAAP,GAAkB,KAAKG,oBAAL,CAA0BzB,MAAM,CAACR,IAAjC,CAAlB,GAA2D2B,SAFpD,CAVX;AAAA,qBAca,wCACTnB,MAAM,CAACiB,KAAP,CAAaS,SADJ,EAET1B,MAAM,CAACsB,QAAP,GAAkB,KAAKK,kBAAL,CAAwB3B,MAAM,CAACR,IAA/B,CAAlB,GAAyD2B,SAFhD,CAdb;AAAA,iBAkBSJ,KAlBT;AAAA,kBAmBUX;AAnBV,WAqBGO,OAAO,gBACN,+EACE,gCAAC,OAAD;AAAA;AAAA,eAAwBR;AAAxB,uBACE,4DAAMH,MAAM,CAACiB,KAAP,CAAaW,QAAnB,CADF,CADF,eAIE,gCAAC,KAAD,yBAAQ,KAAKC,aAAL,CAAmB7B,MAAM,CAACH,OAA1B,EAAmC,MAAMgB,KAAzC,CAAR,CAJF,CADM,gBAQN,+EACE,4DAAMb,MAAM,CAACiB,KAAP,CAAaW,QAAnB,CADF,EAEG5B,MAAM,CAACsB,QAAP,gBAAkB,gCAAC,SAAD;AAAA,kBAAmBtB,MAAM,CAACuB;AAA1B,SAAlB,GAAyD,IAF5D,CA7BJ,CADF;AAqCD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMhB,KAAK,GAwBYC,YAxBvB;AACA,2BAA4E,KAAKd,OAAjF;AAAA,UAAQoC,QAAR,kBAAQA,QAAR;AAAA,UAAkB5B,MAAlB,kBAAkBA,MAAlB;AAAA,UAA0B6B,eAA1B,kBAA0BA,eAA1B;AAAA,UAA2CC,QAA3C,kBAA2CA,QAA3C;AAAA,UAAqDC,UAArD,kBAAqDA,UAArD;AAAA,UAAiEC,MAAjE,kBAAiEA,MAAjE;AACA,UAAMC,YAAY,GAAG3B,YAArB;AAEA,WAAKX,OAAL,GAAe,2BAAekC,eAAf,CAAf;;AAEA,kCAAwC,iCAAqB,KAAKlC,OAA1B,CAAxC;AAAA;AAAA,UAAOuC,aAAP;AAAA,UAAsBC,cAAtB;;AAEAC,yBAAOC,IAAP,CACEL,MADF,EAEE,0DAFF,EAGE,KAAKxC,OAAL,CAAa,cAAb,KAAgCH,IAAI,CAACiD,WAHvC;;AAMA,qBAAO,mBAAQtC,MAAR,CAAP,eACE,gCAAC,YAAD;AAAA,kBAAsBgC;AAAtB,uBACE,gCAAC,sBAAD;AAAA,kBACUO,YADV;AAAA,8BAEeL,aAFf;AAAA,+BAGgBC,cAHhB;AAAA;AAAA,oBAKYL;AALZ,uBAOE,gCAAC,sBAAD,CAAY,SAAZ;AAAsB,QAAA,GAAG,EAAEC;AAA3B,sBACE,gCAAC,KAAD,0EACG,KAAKJ,aAAL,CAAmBE,eAAnB,EAAoC,MAAM,KAAKlC,OAAL,CAAae,MAAvD,CADH,CADF,CAPF,CADF,EAcGkB,QAAQ,CAACY,MAdZ,CADF;AAkBD;;;EA7GgBC,e;;iCAAbpD,I;eAgHSA,I","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDesc from '@semcore/icon/SortDesc/m';\nimport SortAsc from '@semcore/icon/SortAsc/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport type { Column } from './types';\nimport logger from '@semcore/utils/lib/logger';\nimport 'resize-observer-polyfill';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n desc: SortDesc,\n asc: SortAsc,\n} as const;\n\ntype AsProps = {\n $onSortClick: (name: string, event: React.MouseEvent | React.KeyboardEvent) => void;\n $scrollRef: (instance: unknown) => void;\n use: 'primary' | 'secondary';\n columnsChildren: Column[];\n onResize: ResizeObserverCallback;\n sticky: boolean;\n ['data-ui-name']: string;\n};\n\nclass Head extends Component<AsProps> {\n columns: Column[] = [];\n\n static displayName: string;\n\n bindHandlerSortClick = (name: string) => (event: React.MouseEvent) => {\n this.asProps.$onSortClick(name, event);\n };\n\n bindHandlerKeyDown = (name: string) => (event: React.KeyboardEvent) => {\n if (event.code === 'Enter') {\n this.asProps.$onSortClick(name, event);\n }\n };\n\n renderColumns(columns: Column[], width: number) {\n return columns.map((column) => this.renderColumn(column, width));\n }\n\n renderColumn(column: Column, width: number) {\n const { styles, use, hidden } = this.asProps;\n const SColumn = Flex;\n const SHead = Box;\n const SSortIcon = SORTING_ICON[column.sortDirection];\n const isGroup = column.columns?.length > 0;\n const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n const [name, value] = getFixedStyle(column, this.columns);\n\n const style = {\n flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n ...column.props.style,\n };\n\n if (name !== undefined && value !== undefined) {\n style[name] = value;\n }\n\n return sstyled(styles)(\n <SColumn\n key={column.name}\n use={use}\n fixed={column.fixed}\n resizable={column.resizable}\n sortable={column.sortable}\n active={column.active}\n group={isGroup}\n tabIndex={column.sortable && 0}\n {...column.props}\n onClick={callAllEventHandlers(\n column.props.onClick,\n column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n )}\n onKeyDown={callAllEventHandlers(\n column.props.onKeyDown,\n column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,\n )}\n style={style}\n hidden={hidden}\n >\n {isGroup ? (\n <>\n <SColumn groupHead use={use}>\n <div>{column.props.children}</div>\n </SColumn>\n <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n </>\n ) : (\n <>\n <div>{column.props.children}</div>\n {column.sortable ? <SSortIcon active={column.active} /> : null}\n </>\n )}\n </SColumn>,\n );\n }\n\n render() {\n const SHead = Root;\n const { Children, styles, columnsChildren, onResize, $scrollRef, sticky } = this.asProps;\n const SHeadWrapper = Box;\n\n this.columns = flattenColumns(columnsChildren);\n\n const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n logger.warn(\n sticky,\n \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n this.asProps['data-ui-name'] || Head.displayName,\n );\n\n return sstyled(styles)(\n <SHeadWrapper sticky={sticky}>\n <ScrollArea\n styles={scrollStyles}\n use:left={`${offsetLeftSum}px`}\n use:right={`${offsetRightSum}px`}\n shadow\n onResize={onResize}\n >\n <ScrollArea.Container ref={$scrollRef}>\n <SHead render={Box}>\n {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n </SHead>\n </ScrollArea.Container>\n </ScrollArea>\n {Children.origin}\n </SHeadWrapper>,\n );\n }\n}\n\nexport default Head;\n"],"file":"Head.js"}
|
package/lib/es6/Head.js
CHANGED
|
@@ -26,6 +26,7 @@ import SortAsc from '@semcore/icon/SortAsc/m';
|
|
|
26
26
|
import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
|
|
27
27
|
import { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';
|
|
28
28
|
import logger from '@semcore/utils/lib/logger';
|
|
29
|
+
import 'resize-observer-polyfill';
|
|
29
30
|
|
|
30
31
|
/*__reshadow-styles__:"./style/scroll-area.shadow.css"*/
|
|
31
32
|
var scrollStyles = (
|
package/lib/es6/Head.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Head.tsx"],"names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","SortDesc","SortAsc","callAllEventHandlers","flattenColumns","getFixedStyle","getScrollOffsetValue","logger","SORTING_ICON","desc","asc","Head","name","event","asProps","$onSortClick","code","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","SHead","SSortIcon","sortDirection","isGroup","length","cSize","value","style","flexBasis","props","flex","undefined","fixed","resizable","sortable","active","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","Children","columnsChildren","onResize","$scrollRef","sticky","SHeadWrapper","offsetLeftSum","offsetRightSum","warn","displayName","scrollStyles","origin"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,EAAoBC,OAApB,EAA6BC,IAA7B,QAAyC,eAAzC;AACA,SAASC,GAAT,EAAcC,IAAd,QAA0B,mBAA1B;AACA,OAAOC,UAAP,MAAuB,sBAAvB;AACA,OAAOC,QAAP,MAAqB,0BAArB;AACA,OAAOC,OAAP,MAAoB,yBAApB;AACA,SAASC,oBAAT,QAAqC,gCAArC;AACA,SAASC,cAAT,EAAyBC,aAAzB,EAAwCC,oBAAxC,QAAoE,SAApE;AAEA,OAAOC,MAAP,MAAmB,2BAAnB;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../src/Head.tsx"],"names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","SortDesc","SortAsc","callAllEventHandlers","flattenColumns","getFixedStyle","getScrollOffsetValue","logger","SORTING_ICON","desc","asc","Head","name","event","asProps","$onSortClick","code","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","SHead","SSortIcon","sortDirection","isGroup","length","cSize","value","style","flexBasis","props","flex","undefined","fixed","resizable","sortable","active","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","Children","columnsChildren","onResize","$scrollRef","sticky","SHeadWrapper","offsetLeftSum","offsetRightSum","warn","displayName","scrollStyles","origin"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,EAAoBC,OAApB,EAA6BC,IAA7B,QAAyC,eAAzC;AACA,SAASC,GAAT,EAAcC,IAAd,QAA0B,mBAA1B;AACA,OAAOC,UAAP,MAAuB,sBAAvB;AACA,OAAOC,QAAP,MAAqB,0BAArB;AACA,OAAOC,OAAP,MAAoB,yBAApB;AACA,SAASC,oBAAT,QAAqC,gCAArC;AACA,SAASC,cAAT,EAAyBC,aAAzB,EAAwCC,oBAAxC,QAAoE,SAApE;AAEA,OAAOC,MAAP,MAAmB,2BAAnB;AACA,OAAO,0BAAP;;;;;;;;;;;;;;;;AAIA,IAAMC,YAAY,GAAG;AACnBC,EAAAA,IAAI,EAAER,QADa;AAEnBS,EAAAA,GAAG,EAAER;AAFc,CAArB;;IAeMS,I;;;;;;;;;;;;;;;;8DACgB,E;;2EAIG,UAACC,IAAD;AAAA,aAAkB,UAACC,KAAD,EAA6B;AACpE,cAAKC,OAAL,CAAaC,YAAb,CAA0BH,IAA1B,EAAgCC,KAAhC;AACD,OAFsB;AAAA,K;;yEAIF,UAACD,IAAD;AAAA,aAAkB,UAACC,KAAD,EAAgC;AACrE,YAAIA,KAAK,CAACG,IAAN,KAAe,OAAnB,EAA4B;AAC1B,gBAAKF,OAAL,CAAaC,YAAb,CAA0BH,IAA1B,EAAgCC,KAAhC;AACD;AACF,OAJoB;AAAA,K;;;;;;;WAMrB,uBAAcI,OAAd,EAAiCC,KAAjC,EAAgD;AAAA;;AAC9C,aAAOD,OAAO,CAACE,GAAR,CAAY,UAACC,MAAD;AAAA,eAAY,MAAI,CAACC,YAAL,CAAkBD,MAAlB,EAA0BF,KAA1B,CAAZ;AAAA,OAAZ,CAAP;AACD;;;WAED,sBAAaE,MAAb,EAA6BF,KAA7B,EAA4C;AAAA;;AAC1C,0BAAgC,KAAKJ,OAArC;AAAA,UAAQQ,MAAR,iBAAQA,MAAR;AAAA,UAAgBC,GAAhB,iBAAgBA,GAAhB;AAAA,UAAqBC,MAArB,iBAAqBA,MAArB;AACA,UAAMC,OAAO,GAAG1B,IAAhB;AACA,UAAM2B,KAAK,GAAG5B,GAAd;AACA,UAAM6B,SAAS,GAAGnB,YAAY,CAACY,MAAM,CAACQ,aAAR,CAA9B;AACA,UAAMC,OAAO,GAAGT,MAAM,CAACH,OAAP,EAAgBa,MAAhB,GAAyB,CAAzC;AACA,UAAMC,KAAK,GAAGF,OAAO,GAAGzB,cAAc,CAACgB,MAAM,CAACH,OAAR,CAAd,CAA+Ba,MAAlC,GAA2C,CAAhE;;AACA,2BAAsBzB,aAAa,CAACe,MAAD,EAAS,KAAKH,OAAd,CAAnC;AAAA;AAAA,UAAOL,IAAP;AAAA,UAAaoB,KAAb;;AAEA,UAAMC,KAAK;AACTC,QAAAA,SAAS,EAAEd,MAAM,CAACe,KAAP,CAAaC,IAAb,KAAsBC,SAAtB,cAAsCnB,KAAK,GAAGa,KAA9C;AADF,SAENX,MAAM,CAACe,KAAP,CAAaF,KAFP,CAAX;;AAKA,UAAIrB,IAAI,KAAKyB,SAAT,IAAsBL,KAAK,KAAKK,SAApC,EAA+C;AAC7CJ,QAAAA,KAAK,CAACrB,IAAD,CAAL,GAAcoB,KAAd;AACD;;AAED,qBAAOpC,OAAO,CAAC0B,MAAD,CAAd,eACE,oBAAC,OAAD;AAAA,eACOF,MAAM,CAACR,IADd;AAAA,eAEOW,GAFP;AAAA,iBAGSH,MAAM,CAACkB,KAHhB;AAAA,qBAIalB,MAAM,CAACmB,SAJpB;AAAA,oBAKYnB,MAAM,CAACoB,QALnB;AAAA,kBAMUpB,MAAM,CAACqB,MANjB;AAAA,iBAOSZ,OAPT;AAAA,oBAQYT,MAAM,CAACoB,QAAP,IAAmB;AAR/B,SASMpB,MAAM,CAACe,KATb;AAAA,mBAUWhC,oBAAoB,CAC3BiB,MAAM,CAACe,KAAP,CAAaO,OADc,EAE3BtB,MAAM,CAACoB,QAAP,GAAkB,KAAKG,oBAAL,CAA0BvB,MAAM,CAACR,IAAjC,CAAlB,GAA2DyB,SAFhC,CAV/B;AAAA,qBAcalC,oBAAoB,CAC7BiB,MAAM,CAACe,KAAP,CAAaS,SADgB,EAE7BxB,MAAM,CAACoB,QAAP,GAAkB,KAAKK,kBAAL,CAAwBzB,MAAM,CAACR,IAA/B,CAAlB,GAAyDyB,SAF5B,CAdjC;AAAA,iBAkBSJ,KAlBT;AAAA,kBAmBUT;AAnBV,WAqBGK,OAAO,gBACN,uDACE,oBAAC,OAAD;AAAA;AAAA,eAAwBN;AAAxB,uBACE,gDAAMH,MAAM,CAACe,KAAP,CAAaW,QAAnB,CADF,CADF,eAIE,oBAAC,KAAD,yBAAQ,KAAKC,aAAL,CAAmB3B,MAAM,CAACH,OAA1B,EAAmC,MAAMc,KAAzC,CAAR,CAJF,CADM,gBAQN,uDACE,gDAAMX,MAAM,CAACe,KAAP,CAAaW,QAAnB,CADF,EAEG1B,MAAM,CAACoB,QAAP,gBAAkB,oBAAC,SAAD;AAAA,kBAAmBpB,MAAM,CAACqB;AAA1B,SAAlB,GAAyD,IAF5D,CA7BJ,CADF;AAqCD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMf,KAAK,GAwBY5B,GAxBvB;AACA,2BAA4E,KAAKgB,OAAjF;AAAA,UAAQkC,QAAR,kBAAQA,QAAR;AAAA,UAAkB1B,MAAlB,kBAAkBA,MAAlB;AAAA,UAA0B2B,eAA1B,kBAA0BA,eAA1B;AAAA,UAA2CC,QAA3C,kBAA2CA,QAA3C;AAAA,UAAqDC,UAArD,kBAAqDA,UAArD;AAAA,UAAiEC,MAAjE,kBAAiEA,MAAjE;AACA,UAAMC,YAAY,GAAGvD,GAArB;AAEA,WAAKmB,OAAL,GAAeb,cAAc,CAAC6C,eAAD,CAA7B;;AAEA,kCAAwC3C,oBAAoB,CAAC,KAAKW,OAAN,CAA5D;AAAA;AAAA,UAAOqC,aAAP;AAAA,UAAsBC,cAAtB;;AAEAhD,MAAAA,MAAM,CAACiD,IAAP,CACEJ,MADF,EAEE,0DAFF,EAGE,KAAKtC,OAAL,CAAa,cAAb,KAAgCH,IAAI,CAAC8C,WAHvC;AAMA,qBAAO7D,OAAO,CAAC0B,MAAD,CAAd,eACE,oBAAC,YAAD;AAAA,kBAAsB8B;AAAtB,uBACE,oBAAC,UAAD;AAAA,kBACUM,YADV;AAAA,8BAEeJ,aAFf;AAAA,+BAGgBC,cAHhB;AAAA;AAAA,oBAKYL;AALZ,uBAOE,oBAAC,UAAD,CAAY,SAAZ;AAAsB,QAAA,GAAG,EAAEC;AAA3B,sBACE,oBAAC,KAAD,gEACG,KAAKJ,aAAL,CAAmBE,eAAnB,EAAoC,MAAM,KAAKhC,OAAL,CAAaa,MAAvD,CADH,CADF,CAPF,CADF,EAcGkB,QAAQ,CAACW,MAdZ,CADF;AAkBD;;;;EA7GgBhE,S;;gBAAbgB,I;;AAgHN,eAAeA,IAAf","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDesc from '@semcore/icon/SortDesc/m';\nimport SortAsc from '@semcore/icon/SortAsc/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport type { Column } from './types';\nimport logger from '@semcore/utils/lib/logger';\nimport 'resize-observer-polyfill';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n desc: SortDesc,\n asc: SortAsc,\n} as const;\n\ntype AsProps = {\n $onSortClick: (name: string, event: React.MouseEvent | React.KeyboardEvent) => void;\n $scrollRef: (instance: unknown) => void;\n use: 'primary' | 'secondary';\n columnsChildren: Column[];\n onResize: ResizeObserverCallback;\n sticky: boolean;\n ['data-ui-name']: string;\n};\n\nclass Head extends Component<AsProps> {\n columns: Column[] = [];\n\n static displayName: string;\n\n bindHandlerSortClick = (name: string) => (event: React.MouseEvent) => {\n this.asProps.$onSortClick(name, event);\n };\n\n bindHandlerKeyDown = (name: string) => (event: React.KeyboardEvent) => {\n if (event.code === 'Enter') {\n this.asProps.$onSortClick(name, event);\n }\n };\n\n renderColumns(columns: Column[], width: number) {\n return columns.map((column) => this.renderColumn(column, width));\n }\n\n renderColumn(column: Column, width: number) {\n const { styles, use, hidden } = this.asProps;\n const SColumn = Flex;\n const SHead = Box;\n const SSortIcon = SORTING_ICON[column.sortDirection];\n const isGroup = column.columns?.length > 0;\n const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n const [name, value] = getFixedStyle(column, this.columns);\n\n const style = {\n flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n ...column.props.style,\n };\n\n if (name !== undefined && value !== undefined) {\n style[name] = value;\n }\n\n return sstyled(styles)(\n <SColumn\n key={column.name}\n use={use}\n fixed={column.fixed}\n resizable={column.resizable}\n sortable={column.sortable}\n active={column.active}\n group={isGroup}\n tabIndex={column.sortable && 0}\n {...column.props}\n onClick={callAllEventHandlers(\n column.props.onClick,\n column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n )}\n onKeyDown={callAllEventHandlers(\n column.props.onKeyDown,\n column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,\n )}\n style={style}\n hidden={hidden}\n >\n {isGroup ? (\n <>\n <SColumn groupHead use={use}>\n <div>{column.props.children}</div>\n </SColumn>\n <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n </>\n ) : (\n <>\n <div>{column.props.children}</div>\n {column.sortable ? <SSortIcon active={column.active} /> : null}\n </>\n )}\n </SColumn>,\n );\n }\n\n render() {\n const SHead = Root;\n const { Children, styles, columnsChildren, onResize, $scrollRef, sticky } = this.asProps;\n const SHeadWrapper = Box;\n\n this.columns = flattenColumns(columnsChildren);\n\n const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n logger.warn(\n sticky,\n \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n this.asProps['data-ui-name'] || Head.displayName,\n );\n\n return sstyled(styles)(\n <SHeadWrapper sticky={sticky}>\n <ScrollArea\n styles={scrollStyles}\n use:left={`${offsetLeftSum}px`}\n use:right={`${offsetRightSum}px`}\n shadow\n onResize={onResize}\n >\n <ScrollArea.Container ref={$scrollRef}>\n <SHead render={Box}>\n {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n </SHead>\n </ScrollArea.Container>\n </ScrollArea>\n {Children.origin}\n </SHeadWrapper>,\n );\n }\n}\n\nexport default Head;\n"],"file":"Head.js"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Component } from '@semcore/core';
|
|
3
|
+
import { RowData, Column, NestedCells, PropsLayer } from './types';
|
|
4
|
+
import ResizeObserver from 'resize-observer-polyfill';
|
|
5
|
+
import syncScroll from '@semcore/utils/lib/syncScroll';
|
|
6
|
+
declare type AsProps = {
|
|
7
|
+
rows: NestedCells[];
|
|
8
|
+
columns: Column[];
|
|
9
|
+
$scrollRef: ReturnType<ReturnType<typeof syncScroll>>;
|
|
10
|
+
onResize: ResizeObserverCallback;
|
|
11
|
+
rowPropsLayers: PropsLayer[];
|
|
12
|
+
use: 'primary' | 'secondary';
|
|
13
|
+
uniqueKey: string;
|
|
14
|
+
virtualScroll?: boolean | {
|
|
15
|
+
tollerance?: number;
|
|
16
|
+
rowHeight?: number;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
declare type State = {
|
|
20
|
+
rowHeight: number | undefined;
|
|
21
|
+
scrollAreaHeight: undefined | number;
|
|
22
|
+
scrollOffset: number;
|
|
23
|
+
};
|
|
24
|
+
declare class Body extends Component<AsProps, State> {
|
|
25
|
+
state: State;
|
|
26
|
+
firstRowRef: React.RefObject<HTMLElement>;
|
|
27
|
+
firstRowResizeObserver: ResizeObserver | null;
|
|
28
|
+
getRowHeight: () => number | undefined;
|
|
29
|
+
renderCells(cells: NestedCells, rowData: RowData, index: number): React.ReactNode[];
|
|
30
|
+
renderRow(cells: NestedCells, { dataIndex, topOffset, nested }: {
|
|
31
|
+
dataIndex: number;
|
|
32
|
+
topOffset?: number;
|
|
33
|
+
nested: boolean;
|
|
34
|
+
}): React.ReactNode;
|
|
35
|
+
renderRows(rows: NestedCells[]): React.ReactNode[];
|
|
36
|
+
renderVirtualizedRows(rows: NestedCells[]): React.ReactNode[];
|
|
37
|
+
handleFirstRowResize: {
|
|
38
|
+
(...args: any[]): void;
|
|
39
|
+
cancel(): void;
|
|
40
|
+
};
|
|
41
|
+
handleScrollAreaResize: {
|
|
42
|
+
(...args: any[]): void;
|
|
43
|
+
cancel(): void;
|
|
44
|
+
};
|
|
45
|
+
handleScrollAreaScroll: (event: React.SyntheticEvent<HTMLElement>) => void;
|
|
46
|
+
setupRowSizeObserver: () => void;
|
|
47
|
+
componentWillUnmount(): void;
|
|
48
|
+
render(): React.ReactNode;
|
|
49
|
+
}
|
|
50
|
+
export default Body;
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PropGetterFn } from '@semcore/core';
|
|
3
|
+
import { IBoxProps, IFlexProps } from '@semcore/flex-box';
|
|
4
|
+
declare const ROW_GROUP: unique symbol;
|
|
5
|
+
declare type CProps<Props, Ctx = {}, UCProps = {}> = Props & {
|
|
6
|
+
children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;
|
|
7
|
+
};
|
|
8
|
+
declare type ReturnEl = React.ReactElement | null;
|
|
9
|
+
declare type ChildRenderFn<Props> = Props & {
|
|
10
|
+
children?: (props: Props, column: DataTableData, index: number) => {
|
|
11
|
+
[key: string]: unknown;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export declare type DataTableData = {
|
|
15
|
+
[key: string]: unknown;
|
|
16
|
+
};
|
|
17
|
+
export declare type DataTableSort = [string, 'desc' | 'asc'];
|
|
18
|
+
export declare type DataTableTheme = 'muted' | 'info' | 'success' | 'warning' | 'danger';
|
|
19
|
+
export declare type DataTableUse = 'primary' | 'secondary';
|
|
20
|
+
export declare type DataTableRow = DataTableCell[];
|
|
21
|
+
export declare type DataTableCell = {
|
|
22
|
+
/** Name of column */
|
|
23
|
+
name: string;
|
|
24
|
+
/** Data of column */
|
|
25
|
+
data: React.ReactNode;
|
|
26
|
+
[key: string]: unknown;
|
|
27
|
+
};
|
|
28
|
+
export interface IDataTableProps extends IBoxProps {
|
|
29
|
+
/** Theme for table
|
|
30
|
+
* @default primary
|
|
31
|
+
* */
|
|
32
|
+
use?: DataTableUse;
|
|
33
|
+
/** Data for table */
|
|
34
|
+
data?: DataTableData[];
|
|
35
|
+
/** Active sort object */
|
|
36
|
+
sort?: DataTableSort;
|
|
37
|
+
/** Handler call when will request change sort */
|
|
38
|
+
onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;
|
|
39
|
+
/** Field name in one data entity that is unique accross all set of data
|
|
40
|
+
* @default id
|
|
41
|
+
*/
|
|
42
|
+
uniqueKey?: string;
|
|
43
|
+
}
|
|
44
|
+
export interface IDataTableHeadProps extends IBoxProps {
|
|
45
|
+
/** Sticky header table
|
|
46
|
+
* @deprecated
|
|
47
|
+
* */
|
|
48
|
+
sticky?: boolean;
|
|
49
|
+
/** Hidden header */
|
|
50
|
+
hidden?: boolean;
|
|
51
|
+
}
|
|
52
|
+
export interface IDataTableColumnProps extends IFlexProps {
|
|
53
|
+
/** Unique name column */
|
|
54
|
+
name?: string;
|
|
55
|
+
/** Enable sort for column also if you pass string you can set default sort */
|
|
56
|
+
sortable?: boolean | 'desc' | 'asc';
|
|
57
|
+
/** Enable resize for column
|
|
58
|
+
* @ignore */
|
|
59
|
+
resizable?: boolean;
|
|
60
|
+
/** Fixed column on the left/right */
|
|
61
|
+
fixed?: 'left' | 'right';
|
|
62
|
+
}
|
|
63
|
+
export interface IDataTableBodyProps extends IBoxProps {
|
|
64
|
+
/** Rows table */
|
|
65
|
+
rows?: DataTableRow[];
|
|
66
|
+
/** When enabled, only visually acessable rows are rendered.
|
|
67
|
+
* `tollerance` property controls how many rows outside of viewport are render.
|
|
68
|
+
* `rowHeight` fixes the rows height if it known. If not provided, first row node height is measured.
|
|
69
|
+
* @default { tollerance: 2 }
|
|
70
|
+
*/
|
|
71
|
+
virtualScroll?: boolean | {
|
|
72
|
+
tollerance?: number;
|
|
73
|
+
rowHeight?: number;
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
export interface IDataTableRowProps extends IBoxProps {
|
|
77
|
+
/** Theme for row */
|
|
78
|
+
theme?: DataTableTheme;
|
|
79
|
+
/** Displays row as active/hover */
|
|
80
|
+
active?: boolean;
|
|
81
|
+
}
|
|
82
|
+
export interface IDataTableCellProps extends IFlexProps {
|
|
83
|
+
/** Unique name column or columns separated by / */
|
|
84
|
+
name: string;
|
|
85
|
+
/** Theme for cell */
|
|
86
|
+
theme?: DataTableTheme;
|
|
87
|
+
}
|
|
88
|
+
interface IDataTableCtx {
|
|
89
|
+
getHeadProps: PropGetterFn;
|
|
90
|
+
getBodyProps: PropGetterFn;
|
|
91
|
+
}
|
|
92
|
+
declare const DefinitionTable: (<T>(props: CProps<IDataTableProps & T, IDataTableCtx, {}>) => ReturnEl) & {
|
|
93
|
+
Head: <T_1>(props: IDataTableHeadProps & T_1) => ReturnEl;
|
|
94
|
+
Body: <T_2>(props: IDataTableBodyProps & T_2) => ReturnEl;
|
|
95
|
+
Column: <T_3>(props: IDataTableColumnProps & T_3) => ReturnEl;
|
|
96
|
+
Cell: <T_4>(props: ChildRenderFn<IDataTableCellProps & T_4>) => ReturnEl;
|
|
97
|
+
Row: <T_5>(props: ChildRenderFn<IDataTableRowProps & T_5>) => ReturnEl;
|
|
98
|
+
};
|
|
99
|
+
export { ROW_GROUP };
|
|
100
|
+
export default DefinitionTable;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Component } from '@semcore/core';
|
|
3
|
+
import type { Column } from './types';
|
|
4
|
+
import 'resize-observer-polyfill';
|
|
5
|
+
declare type AsProps = {
|
|
6
|
+
$onSortClick: (name: string, event: React.MouseEvent | React.KeyboardEvent) => void;
|
|
7
|
+
$scrollRef: (instance: unknown) => void;
|
|
8
|
+
use: 'primary' | 'secondary';
|
|
9
|
+
columnsChildren: Column[];
|
|
10
|
+
onResize: ResizeObserverCallback;
|
|
11
|
+
sticky: boolean;
|
|
12
|
+
['data-ui-name']: string;
|
|
13
|
+
};
|
|
14
|
+
declare class Head extends Component<AsProps> {
|
|
15
|
+
columns: Column[];
|
|
16
|
+
static displayName: string;
|
|
17
|
+
bindHandlerSortClick: (name: string) => (event: React.MouseEvent) => void;
|
|
18
|
+
bindHandlerKeyDown: (name: string) => (event: React.KeyboardEvent) => void;
|
|
19
|
+
renderColumns(columns: Column[], width: number): React.ReactNode[];
|
|
20
|
+
renderColumn(column: Column, width: number): React.ReactNode;
|
|
21
|
+
render(): React.ReactNode;
|
|
22
|
+
}
|
|
23
|
+
export default Head;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ROW_GROUP } from './DataTable';
|
|
3
|
+
export declare type PseudoChildPropsGetter = (props: {
|
|
4
|
+
[propName: string]: unknown;
|
|
5
|
+
}, rowData: {
|
|
6
|
+
[columnName: string]: unknown;
|
|
7
|
+
}, index: number) => {
|
|
8
|
+
[propName: string]: unknown;
|
|
9
|
+
};
|
|
10
|
+
export declare type PropsLayer = {
|
|
11
|
+
childrenPropsGetter?: PseudoChildPropsGetter;
|
|
12
|
+
[propName: string]: unknown;
|
|
13
|
+
};
|
|
14
|
+
export declare type SortDirection = 'asc' | 'desc';
|
|
15
|
+
export declare type Column<Props extends {
|
|
16
|
+
[propName: string]: unknown;
|
|
17
|
+
} = {
|
|
18
|
+
[propName: string]: unknown;
|
|
19
|
+
}> = {
|
|
20
|
+
name: string;
|
|
21
|
+
active: boolean;
|
|
22
|
+
width: number;
|
|
23
|
+
fixed?: 'left' | 'right';
|
|
24
|
+
resizable?: boolean;
|
|
25
|
+
sortable?: boolean | SortDirection;
|
|
26
|
+
sortDirection: SortDirection;
|
|
27
|
+
cssVar: string | string[];
|
|
28
|
+
data?: unknown;
|
|
29
|
+
props: {
|
|
30
|
+
name: string;
|
|
31
|
+
} & Partial<{
|
|
32
|
+
onClick: (event: React.MouseEvent) => void;
|
|
33
|
+
onKeyDown: (event: React.KeyboardEvent) => void;
|
|
34
|
+
ref: React.RefObject<HTMLElement>;
|
|
35
|
+
style: React.CSSProperties;
|
|
36
|
+
fixed: 'left' | 'right';
|
|
37
|
+
children: React.ReactNode[];
|
|
38
|
+
resizable: boolean;
|
|
39
|
+
sortable: boolean | SortDirection;
|
|
40
|
+
sortDirection: SortDirection;
|
|
41
|
+
}> & Props;
|
|
42
|
+
columns: Column[];
|
|
43
|
+
};
|
|
44
|
+
export declare type Cell = Pick<Column, 'name' | 'cssVar' | 'fixed' | 'data'> & {
|
|
45
|
+
cellPropsLayers: PropsLayer[];
|
|
46
|
+
};
|
|
47
|
+
export declare type RowData<Data extends {
|
|
48
|
+
[columnName: string]: unknown;
|
|
49
|
+
} = {
|
|
50
|
+
[columnName: string]: unknown;
|
|
51
|
+
}> = Data & Partial<{
|
|
52
|
+
name: string;
|
|
53
|
+
[ROW_GROUP]: RowData[];
|
|
54
|
+
}>;
|
|
55
|
+
export declare type NestedCells = (Cell | NestedCells)[] & {
|
|
56
|
+
flatRowData?: RowData;
|
|
57
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Column } from './types';
|
|
2
|
+
export declare const getScrollOffsetValue: (columns: Column[]) => [leftOffset: number, rightOffset: number];
|
|
3
|
+
export declare const flattenColumns: (columns: Column[]) => Column<{
|
|
4
|
+
[propName: string]: unknown;
|
|
5
|
+
}>[];
|
|
6
|
+
export declare const getFixedStyle: (cell: Pick<Column, 'name' | 'fixed'>, columns: Column[]) => [side: "left" | "right", style: string | number] | [side: undefined, style: undefined];
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/data-table",
|
|
3
3
|
"description": "SEMRush DataTable Component",
|
|
4
|
-
"version": "2.2.
|
|
4
|
+
"version": "2.2.5",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"author": "Roman Lysov <r.lysov@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"scripts": {
|
|
12
|
-
"build": "build --source=
|
|
12
|
+
"build": "build --source=ts",
|
|
13
13
|
"test": "jest"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
package/src/Head.tsx
CHANGED
|
@@ -8,7 +8,7 @@ import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
|
|
|
8
8
|
import { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';
|
|
9
9
|
import type { Column } from './types';
|
|
10
10
|
import logger from '@semcore/utils/lib/logger';
|
|
11
|
-
import
|
|
11
|
+
import 'resize-observer-polyfill';
|
|
12
12
|
|
|
13
13
|
import scrollStyles from './style/scroll-area.shadow.css';
|
|
14
14
|
|