@hi-ui/table 4.1.3-alpha.1 → 4.2.0
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 +13 -0
- package/lib/cjs/BaseTable.js +73 -127
- package/lib/cjs/Table.js +3 -14
- package/lib/cjs/TableBody.js +64 -6
- package/lib/cjs/TableHeader.js +71 -5
- package/lib/cjs/hooks/use-col-width.js +13 -11
- package/lib/cjs/styles/index.scss.js +1 -1
- package/lib/cjs/use-table.js +8 -18
- package/lib/esm/BaseTable.js +73 -124
- package/lib/esm/Table.js +3 -14
- package/lib/esm/TableBody.js +62 -3
- package/lib/esm/TableHeader.js +69 -5
- package/lib/esm/hooks/use-col-width.js +13 -11
- package/lib/esm/styles/index.scss.js +1 -1
- package/lib/esm/use-table.js +8 -18
- package/lib/types/BaseTable.d.ts +0 -4
- package/lib/types/context.d.ts +8 -8
- package/lib/types/use-table.d.ts +4 -4
- package/package.json +4 -4
- package/lib/cjs/ColGroupContent.js +0 -56
- package/lib/cjs/TbodyContent.js +0 -129
- package/lib/cjs/TheadContent.js +0 -115
- package/lib/esm/ColGroupContent.js +0 -37
- package/lib/esm/TbodyContent.js +0 -105
- package/lib/esm/TheadContent.js +0 -91
- package/lib/types/ColGroupContent.d.ts +0 -8
- package/lib/types/TbodyContent.d.ts +0 -18
- package/lib/types/TheadContent.d.ts +0 -9
|
@@ -72,17 +72,19 @@ var useColWidth = function useColWidth(_ref) {
|
|
|
72
72
|
var _resizeObserver = new ResizeObserver(function () {
|
|
73
73
|
if (virtual) {
|
|
74
74
|
setColWidths(getVirtualWidths());
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
75
|
+
} else {
|
|
76
|
+
if (measureRowElement.childNodes) {
|
|
77
|
+
var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node) {
|
|
78
|
+
return node.getBoundingClientRect().width || 0;
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
if (_realColumnsWidth.some(function (width) {
|
|
82
|
+
return width && width > 0;
|
|
83
|
+
})) {
|
|
84
|
+
setColWidths(_realColumnsWidth);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
86
88
|
});
|
|
87
89
|
|
|
88
90
|
_resizeObserver.observe(measureRowElement);
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
9
|
*/
|
|
10
10
|
import __styleInject__ from 'style-inject';
|
|
11
|
-
var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative; }.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed; }.hi-v4-table__wrapper {position: relative;z-index: 0; }.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff)); }.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-7, 14px); }.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px); }.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-5, 10px); }.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px); }.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-9, 18px); }.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px); }.hi-v4-table--bordered table thead > tr > th {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered table td {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered .hi-v4-table-header {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered .hi-v4-table-body {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--sticky {position: -webkit-sticky;position: sticky;top: 0; }.hi-v4-table--virtual {width: 100%;overflow: hidden; }.hi-v4-table--virtual .hi-v4-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden; }.hi-v4-table-header__resizable {position: relative;background-clip: padding-box; }.hi-v4-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;border-left: 2px solid var(--hi-v4-color-gray-50, #f5f7fa);cursor: col-resize;z-index: 1; }.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex; }.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-body, .hi-v4-table-content {position: relative;overflow: auto; }.hi-v4-table-header-cell {color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px); }.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-table-cell__indent {display: inline-block;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px); }.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px); }.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px; }.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15); }.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15); }.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px; }.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400); }.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem); }.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0; }.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;vertical-align: middle;margin-left: 6px; }.hi-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px; }.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer; }.hi-v4-table-header-filter-custom__content {padding: 12px 8px; }.hi-v4-table-embed-row {position: relative;z-index: 0; }.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px); }.hi-v4-table-setting {position: absolute;height: 100%;z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6; }.hi-v4-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: '';background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%; }.hi-v4-table-setting-item::after {position: absolute;content: '';z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%; }.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px; }.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px); }.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px; }.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px); }.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px; }.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start; }.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; }.hi-v4-table-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0; }.hi-v4-table--bordered .hi-v4-table-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-setting-drawer .hi-v4-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-setting-item--dragging .hi-v4-setting-item__wrap {opacity: 0.6; }.hi-v4-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: '';background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%; }.hi-v4-setting-item::after {position: absolute;content: '';z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%; }.hi-v4-setting-item::before, .hi-v4-setting-item::after {margin-left: -10px;margin-right: -10px; }.hi-v4-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px); }.hi-v4-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px; }.hi-v4-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px); }.hi-v4-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px; }";
|
|
11
|
+
var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative;}.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v4-table__wrapper {position: relative;z-index: 0;}.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff));}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--bordered table thead > tr > th {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered table td {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-header {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-body {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--sticky {position: -webkit-sticky;position: sticky;top: 0;}.hi-v4-table--virtual {width: 100%;overflow: hidden;}.hi-v4-table--virtual .hi-v4-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v4-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v4-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;border-left: 2px solid var(--hi-v4-color-gray-50, #f5f7fa);cursor: col-resize;z-index: 1;}.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937);}.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-body {position: relative;overflow: auto;}.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-cell__indent {display: inline-block;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px);}.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px;}.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);}.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0;}.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;vertical-align: middle;margin-left: 6px;}.hi-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px;}.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;}.hi-v4-table-header-filter-custom__content {padding: 12px 8px;}.hi-v4-table-embed-row {position: relative;z-index: 0;}.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px);}.hi-v4-table-setting {position: absolute;height: 100%;z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6;}.hi-v4-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v4-table-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0;}.hi-v4-table--bordered .hi-v4-table-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-setting-drawer .hi-v4-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-setting-item--dragging .hi-v4-setting-item__wrap {opacity: 0.6;}.hi-v4-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-setting-item::before, .hi-v4-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}";
|
|
12
12
|
|
|
13
13
|
__styleInject__(css_248z);
|
|
14
14
|
|
package/lib/esm/use-table.js
CHANGED
|
@@ -217,14 +217,6 @@ var useTable = function useTable(_a) {
|
|
|
217
217
|
}, [setFixedToColumn]);
|
|
218
218
|
|
|
219
219
|
var _React$useMemo = React__default.useMemo(function () {
|
|
220
|
-
if (!leftFreezeColumn && !rightFreezeColumn) {
|
|
221
|
-
return {
|
|
222
|
-
leftFrozenColKeys: [],
|
|
223
|
-
rightFrozenColKeys: [],
|
|
224
|
-
columns: mergedColumns2
|
|
225
|
-
};
|
|
226
|
-
}
|
|
227
|
-
|
|
228
220
|
var leftFrozenColKey = leftFreezeColumn;
|
|
229
221
|
var rightFrozenKey = rightFreezeColumn; // 获取左右冻结列的下标
|
|
230
222
|
// 获取左右冻结列的下标
|
|
@@ -443,18 +435,16 @@ var useTable = function useTable(_a) {
|
|
|
443
435
|
return !isArrayNonEmpty(col.children);
|
|
444
436
|
});
|
|
445
437
|
}, [mergedColumns1]);
|
|
446
|
-
var groupedColumns =
|
|
447
|
-
|
|
448
|
-
var depth = cur.depth;
|
|
438
|
+
var groupedColumns = mergedColumns1.reduce(function (acc, cur) {
|
|
439
|
+
var depth = cur.depth;
|
|
449
440
|
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
441
|
+
if (!acc[depth]) {
|
|
442
|
+
acc[depth] = [];
|
|
443
|
+
}
|
|
453
444
|
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
}, [mergedColumns1]);
|
|
445
|
+
acc[depth].push(cur);
|
|
446
|
+
return acc;
|
|
447
|
+
}, []);
|
|
458
448
|
var getStickyColProps = useLatestCallback(function (column) {
|
|
459
449
|
var rightStickyWidth = column.rightStickyWidth,
|
|
460
450
|
leftStickyWidth = column.leftStickyWidth,
|
package/lib/types/BaseTable.d.ts
CHANGED
package/lib/types/context.d.ts
CHANGED
|
@@ -82,10 +82,10 @@ export declare const TableProvider: import("react").Provider<(Omit<{
|
|
|
82
82
|
scrollLeft: number;
|
|
83
83
|
scrollRight: number;
|
|
84
84
|
};
|
|
85
|
-
leftFrozenColKeys: any[]
|
|
86
|
-
rightFrozenColKeys: any[]
|
|
87
|
-
leftFixedColumnsWidth: number
|
|
88
|
-
rightFixedColumnsWidth: number
|
|
85
|
+
leftFrozenColKeys: any[];
|
|
86
|
+
rightFrozenColKeys: any[];
|
|
87
|
+
leftFixedColumnsWidth: number;
|
|
88
|
+
rightFixedColumnsWidth: number;
|
|
89
89
|
}, "rootProps"> & {
|
|
90
90
|
embedExpandable: boolean | {
|
|
91
91
|
rowExpandable: true | ((row: import("./types").TableColumnItem) => import("react").ReactNode);
|
|
@@ -187,10 +187,10 @@ export declare const useTableContext: () => Omit<{
|
|
|
187
187
|
scrollLeft: number;
|
|
188
188
|
scrollRight: number;
|
|
189
189
|
};
|
|
190
|
-
leftFrozenColKeys: any[]
|
|
191
|
-
rightFrozenColKeys: any[]
|
|
192
|
-
leftFixedColumnsWidth: number
|
|
193
|
-
rightFixedColumnsWidth: number
|
|
190
|
+
leftFrozenColKeys: any[];
|
|
191
|
+
rightFrozenColKeys: any[];
|
|
192
|
+
leftFixedColumnsWidth: number;
|
|
193
|
+
rightFixedColumnsWidth: number;
|
|
194
194
|
}, "rootProps"> & {
|
|
195
195
|
embedExpandable: boolean | {
|
|
196
196
|
rowExpandable: true | ((row: import("./types").TableColumnItem) => import("react").ReactNode);
|
package/lib/types/use-table.d.ts
CHANGED
|
@@ -98,10 +98,10 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
|
|
|
98
98
|
scrollLeft: number;
|
|
99
99
|
scrollRight: number;
|
|
100
100
|
};
|
|
101
|
-
leftFrozenColKeys: any[]
|
|
102
|
-
rightFrozenColKeys: any[]
|
|
103
|
-
leftFixedColumnsWidth: number
|
|
104
|
-
rightFixedColumnsWidth: number
|
|
101
|
+
leftFrozenColKeys: any[];
|
|
102
|
+
rightFrozenColKeys: any[];
|
|
103
|
+
leftFixedColumnsWidth: number;
|
|
104
|
+
rightFixedColumnsWidth: number;
|
|
105
105
|
};
|
|
106
106
|
export interface UseTableProps {
|
|
107
107
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hi-ui/table",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.2.0",
|
|
4
4
|
"description": "A sub-package for @hi-ui/hiui.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "HiUI <mi-hiui@xiaomi.com>",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"@hi-ui/pagination": "^4.0.8",
|
|
60
60
|
"@hi-ui/popper": "^4.1.0",
|
|
61
61
|
"@hi-ui/react-utils": "^4.0.1",
|
|
62
|
-
"@hi-ui/select": "^4.0
|
|
62
|
+
"@hi-ui/select": "^4.2.0",
|
|
63
63
|
"@hi-ui/spinner": "^4.0.4",
|
|
64
64
|
"@hi-ui/times": "^4.0.1",
|
|
65
65
|
"@hi-ui/tree-utils": "^4.1.1",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"@hi-ui/use-toggle": "^4.0.1",
|
|
73
73
|
"@hi-ui/use-uncontrolled-state": "^4.0.1",
|
|
74
74
|
"@hi-ui/use-update-effect": "^4.0.1",
|
|
75
|
-
"axios": "^
|
|
75
|
+
"axios": "^1.5.0",
|
|
76
76
|
"react-resizable": "^3.0.4"
|
|
77
77
|
},
|
|
78
78
|
"peerDependencies": {
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
},
|
|
83
83
|
"devDependencies": {
|
|
84
84
|
"@hi-ui/core": "^4.0.4",
|
|
85
|
-
"@hi-ui/core-css": "^4.
|
|
85
|
+
"@hi-ui/core-css": "^4.1.1",
|
|
86
86
|
"@types/react-resizable": "^1.7.4",
|
|
87
87
|
"react": "^17.0.1",
|
|
88
88
|
"react-dom": "^17.0.1"
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
/** @LICENSE
|
|
2
|
-
* @hi-ui/table
|
|
3
|
-
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
|
|
4
|
-
*
|
|
5
|
-
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
|
-
*
|
|
7
|
-
* This source code is licensed under the MIT license found in the
|
|
8
|
-
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/
|
|
10
|
-
'use strict';
|
|
11
|
-
|
|
12
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
|
-
Object.defineProperty(exports, '__esModule', {
|
|
15
|
-
value: true
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
var React = require('react');
|
|
19
|
-
|
|
20
|
-
var classname = require('@hi-ui/classname');
|
|
21
|
-
|
|
22
|
-
var env = require('@hi-ui/env');
|
|
23
|
-
|
|
24
|
-
var context = require('./context.js');
|
|
25
|
-
|
|
26
|
-
function _interopDefaultLegacy(e) {
|
|
27
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
28
|
-
'default': e
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
33
|
-
|
|
34
|
-
var _prefix = classname.getPrefixCls('table-colgroup');
|
|
35
|
-
|
|
36
|
-
var ColGroupContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
37
|
-
var _ref$prefixCls = _ref.prefixCls,
|
|
38
|
-
prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls;
|
|
39
|
-
|
|
40
|
-
var _useTableContext = context.useTableContext(),
|
|
41
|
-
getColgroupProps = _useTableContext.getColgroupProps,
|
|
42
|
-
leafColumns = _useTableContext.leafColumns;
|
|
43
|
-
|
|
44
|
-
return /*#__PURE__*/React__default["default"].createElement("colgroup", null, leafColumns.map(function (col, idx) {
|
|
45
|
-
return /*#__PURE__*/React__default["default"].createElement("col", Object.assign({
|
|
46
|
-
key: idx,
|
|
47
|
-
className: prefixCls + "-col"
|
|
48
|
-
}, getColgroupProps(col, idx)));
|
|
49
|
-
}));
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
if (env.__DEV__) {
|
|
53
|
-
ColGroupContent.displayName = 'ColGroupContent';
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
exports.ColGroupContent = ColGroupContent;
|
package/lib/cjs/TbodyContent.js
DELETED
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
/** @LICENSE
|
|
2
|
-
* @hi-ui/table
|
|
3
|
-
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
|
|
4
|
-
*
|
|
5
|
-
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
|
-
*
|
|
7
|
-
* This source code is licensed under the MIT license found in the
|
|
8
|
-
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/
|
|
10
|
-
'use strict';
|
|
11
|
-
|
|
12
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
|
-
Object.defineProperty(exports, '__esModule', {
|
|
15
|
-
value: true
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
var React = require('react');
|
|
19
|
-
|
|
20
|
-
var classname = require('@hi-ui/classname');
|
|
21
|
-
|
|
22
|
-
var env = require('@hi-ui/env');
|
|
23
|
-
|
|
24
|
-
var useLatest = require('@hi-ui/use-latest');
|
|
25
|
-
|
|
26
|
-
var typeAssertion = require('@hi-ui/type-assertion');
|
|
27
|
-
|
|
28
|
-
var emptyState = require('@hi-ui/empty-state');
|
|
29
|
-
|
|
30
|
-
var TableRow = require('./TableRow.js');
|
|
31
|
-
|
|
32
|
-
var context = require('./context.js');
|
|
33
|
-
|
|
34
|
-
function _interopDefaultLegacy(e) {
|
|
35
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
36
|
-
'default': e
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
41
|
-
|
|
42
|
-
var _prefix = classname.getPrefixCls('table-body');
|
|
43
|
-
|
|
44
|
-
var TbodyContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
45
|
-
var _ref$prefixCls = _ref.prefixCls,
|
|
46
|
-
prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,
|
|
47
|
-
emptyContent = _ref.emptyContent;
|
|
48
|
-
|
|
49
|
-
var _useTableContext = context.useTableContext(),
|
|
50
|
-
columns = _useTableContext.columns,
|
|
51
|
-
isExpandTreeRows = _useTableContext.isExpandTreeRows,
|
|
52
|
-
transitionData = _useTableContext.transitionData,
|
|
53
|
-
scrollBodyElementRef = _useTableContext.scrollBodyElementRef,
|
|
54
|
-
hasAvgColumn = _useTableContext.hasAvgColumn,
|
|
55
|
-
avgRow = _useTableContext.avgRow,
|
|
56
|
-
hasSumColumn = _useTableContext.hasSumColumn,
|
|
57
|
-
sumRow = _useTableContext.sumRow,
|
|
58
|
-
measureRowElementRef = _useTableContext.measureRowElementRef;
|
|
59
|
-
|
|
60
|
-
var getRequiredProps = useLatest.useLatestCallback(function (id) {
|
|
61
|
-
return {
|
|
62
|
-
// @ts-ignore
|
|
63
|
-
expandedTree: isExpandTreeRows(id) // checked: isCheckedId(id),
|
|
64
|
-
// semiChecked: isSemiCheckedId(id),
|
|
65
|
-
// selected: selectedId === id,
|
|
66
|
-
// loading: isLoadingId(id),
|
|
67
|
-
// focused: focusedId === id,
|
|
68
|
-
|
|
69
|
-
};
|
|
70
|
-
}); // 外层增加 div 作为滚动容器
|
|
71
|
-
|
|
72
|
-
return /*#__PURE__*/React__default["default"].createElement("tbody", null, typeAssertion.isArrayNonEmpty(transitionData) ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, transitionData.map(function (row, index) {
|
|
73
|
-
return /*#__PURE__*/React__default["default"].createElement(TableRow.TableRow, Object.assign({
|
|
74
|
-
ref: index === 0 ? measureRowElementRef : null,
|
|
75
|
-
// key={depth + index}
|
|
76
|
-
key: row.id,
|
|
77
|
-
// @ts-ignore
|
|
78
|
-
rowIndex: index,
|
|
79
|
-
rowData: row
|
|
80
|
-
}, getRequiredProps(row.id)));
|
|
81
|
-
}), hasSumColumn ? /*#__PURE__*/React__default["default"].createElement(TableRow.TableRow, {
|
|
82
|
-
key: sumRow.id,
|
|
83
|
-
rowIndex: transitionData.length,
|
|
84
|
-
rowData: sumRow,
|
|
85
|
-
isSumRow: true
|
|
86
|
-
}) : null, hasAvgColumn ? /*#__PURE__*/React__default["default"].createElement(TableRow.TableRow, {
|
|
87
|
-
key: avgRow.id,
|
|
88
|
-
rowIndex: transitionData.length + 1,
|
|
89
|
-
rowData: avgRow,
|
|
90
|
-
isAvgRow: true
|
|
91
|
-
}) : null) : // 空状态,colSpan 占满表格整行
|
|
92
|
-
renderEmptyContent(Object.assign({
|
|
93
|
-
className: prefixCls + "-empty-content",
|
|
94
|
-
colSpan: columns.length,
|
|
95
|
-
emptyContent: emptyContent
|
|
96
|
-
}, scrollBodyElementRef.current ? {
|
|
97
|
-
scrollBodyWidth: window.getComputedStyle(scrollBodyElementRef.current).getPropertyValue('width')
|
|
98
|
-
} : {})));
|
|
99
|
-
});
|
|
100
|
-
|
|
101
|
-
if (env.__DEV__) {
|
|
102
|
-
TbodyContent.displayName = 'TbodyContent';
|
|
103
|
-
}
|
|
104
|
-
/**
|
|
105
|
-
* 负责空状态渲染
|
|
106
|
-
*/
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
var renderEmptyContent = function renderEmptyContent(_ref2) {
|
|
110
|
-
var className = _ref2.className,
|
|
111
|
-
colSpan = _ref2.colSpan,
|
|
112
|
-
emptyContent = _ref2.emptyContent,
|
|
113
|
-
scrollBodyWidth = _ref2.scrollBodyWidth;
|
|
114
|
-
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
115
|
-
className: className
|
|
116
|
-
}, /*#__PURE__*/React__default["default"].createElement("td", {
|
|
117
|
-
colSpan: colSpan
|
|
118
|
-
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
119
|
-
style: {
|
|
120
|
-
position: 'sticky',
|
|
121
|
-
left: 0,
|
|
122
|
-
width: scrollBodyWidth !== null && scrollBodyWidth !== void 0 ? scrollBodyWidth : '100%',
|
|
123
|
-
overflow: 'hidden'
|
|
124
|
-
}
|
|
125
|
-
}, emptyContent || /*#__PURE__*/React__default["default"].createElement(emptyState.EmptyState, null))));
|
|
126
|
-
};
|
|
127
|
-
|
|
128
|
-
exports.TbodyContent = TbodyContent;
|
|
129
|
-
exports.renderEmptyContent = renderEmptyContent;
|
package/lib/cjs/TheadContent.js
DELETED
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
/** @LICENSE
|
|
2
|
-
* @hi-ui/table
|
|
3
|
-
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
|
|
4
|
-
*
|
|
5
|
-
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
|
-
*
|
|
7
|
-
* This source code is licensed under the MIT license found in the
|
|
8
|
-
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/
|
|
10
|
-
'use strict';
|
|
11
|
-
|
|
12
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
|
-
Object.defineProperty(exports, '__esModule', {
|
|
15
|
-
value: true
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
var tslib = require('tslib');
|
|
19
|
-
|
|
20
|
-
var React = require('react');
|
|
21
|
-
|
|
22
|
-
var reactResizable = require('react-resizable');
|
|
23
|
-
|
|
24
|
-
var classname = require('@hi-ui/classname');
|
|
25
|
-
|
|
26
|
-
var env = require('@hi-ui/env');
|
|
27
|
-
|
|
28
|
-
var typeAssertion = require('@hi-ui/type-assertion');
|
|
29
|
-
|
|
30
|
-
var useCheckState = require('@hi-ui/use-check-state');
|
|
31
|
-
|
|
32
|
-
var context = require('./context.js');
|
|
33
|
-
|
|
34
|
-
var TableAdvancedFilter = require('./TableAdvancedFilter.js');
|
|
35
|
-
|
|
36
|
-
function _interopDefaultLegacy(e) {
|
|
37
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
38
|
-
'default': e
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
43
|
-
|
|
44
|
-
var _prefix = classname.getPrefixCls('table-header');
|
|
45
|
-
|
|
46
|
-
var TheadContent = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
47
|
-
var _a$prefixCls = _a.prefixCls,
|
|
48
|
-
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
|
49
|
-
rest = tslib.__rest(_a, ["prefixCls"]);
|
|
50
|
-
|
|
51
|
-
var _useTableContext = context.useTableContext(),
|
|
52
|
-
groupedColumns = _useTableContext.groupedColumns,
|
|
53
|
-
resizable = _useTableContext.resizable,
|
|
54
|
-
colWidths = _useTableContext.colWidths,
|
|
55
|
-
isHoveredHighlightCol = _useTableContext.isHoveredHighlightCol,
|
|
56
|
-
isHighlightedCol = _useTableContext.isHighlightedCol,
|
|
57
|
-
onColumnResizable = _useTableContext.onColumnResizable,
|
|
58
|
-
getStickyColProps = _useTableContext.getStickyColProps,
|
|
59
|
-
showColMenu = _useTableContext.showColMenu;
|
|
60
|
-
|
|
61
|
-
var activeColumnKeysAction = useCheckState.useCheckState();
|
|
62
|
-
return /*#__PURE__*/React__default["default"].createElement("thead", Object.assign({}, rest), groupedColumns.map(function (cols, colsIndex) {
|
|
63
|
-
return /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
64
|
-
key: colsIndex
|
|
65
|
-
}, cols.map(function (col, colIndex) {
|
|
66
|
-
var _ref = col || {},
|
|
67
|
-
dataKey = _ref.dataKey,
|
|
68
|
-
title = _ref.title,
|
|
69
|
-
raw = _ref.raw;
|
|
70
|
-
|
|
71
|
-
var titleContent = typeAssertion.isFunction(title) ? title(col) : title;
|
|
72
|
-
var cell = /*#__PURE__*/React__default["default"].createElement("th", Object.assign({
|
|
73
|
-
key: dataKey
|
|
74
|
-
}, getStickyColProps(col), {
|
|
75
|
-
className: classname.cx(prefixCls + "-cell", raw.className, isHighlightedCol(dataKey) && prefixCls + "-cell__col--highlight", isHoveredHighlightCol(dataKey) && prefixCls + "-cell__col--hovered-highlight", activeColumnKeysAction.has(dataKey) && prefixCls + "-cell__col--active"),
|
|
76
|
-
// @ts-ignore
|
|
77
|
-
colSpan: col.colSpan,
|
|
78
|
-
// @ts-ignore
|
|
79
|
-
rowSpan: col.rowSpan
|
|
80
|
-
}), titleContent, TableAdvancedFilter.renderFilter({
|
|
81
|
-
prefixCls: prefixCls + "-filter",
|
|
82
|
-
columnKey: dataKey,
|
|
83
|
-
showColMenu: showColMenu,
|
|
84
|
-
column: col,
|
|
85
|
-
onOpen: function onOpen() {
|
|
86
|
-
return activeColumnKeysAction.add(dataKey);
|
|
87
|
-
},
|
|
88
|
-
onClose: function onClose() {
|
|
89
|
-
return activeColumnKeysAction.remove(dataKey);
|
|
90
|
-
}
|
|
91
|
-
}));
|
|
92
|
-
return resizable && colIndex !== colWidths.length - 1 ? /*#__PURE__*/React__default["default"].createElement(reactResizable.Resizable, {
|
|
93
|
-
key: colIndex,
|
|
94
|
-
className: prefixCls + "__resizable",
|
|
95
|
-
draggableOpts: {
|
|
96
|
-
enableUserSelectHack: false
|
|
97
|
-
},
|
|
98
|
-
handle: /*#__PURE__*/React__default["default"].createElement("span", {
|
|
99
|
-
className: prefixCls + "__resizable-handle"
|
|
100
|
-
}),
|
|
101
|
-
height: 0,
|
|
102
|
-
width: colWidths[colIndex],
|
|
103
|
-
onResize: function onResize(evt, options) {
|
|
104
|
-
onColumnResizable(evt, options, colIndex);
|
|
105
|
-
}
|
|
106
|
-
}, cell) : cell;
|
|
107
|
-
}));
|
|
108
|
-
}));
|
|
109
|
-
});
|
|
110
|
-
|
|
111
|
-
if (env.__DEV__) {
|
|
112
|
-
TheadContent.displayName = 'TheadContent';
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
exports.TheadContent = TheadContent;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
/** @LICENSE
|
|
2
|
-
* @hi-ui/table
|
|
3
|
-
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
|
|
4
|
-
*
|
|
5
|
-
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
|
-
*
|
|
7
|
-
* This source code is licensed under the MIT license found in the
|
|
8
|
-
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/
|
|
10
|
-
import React__default, { forwardRef } from 'react';
|
|
11
|
-
import { getPrefixCls } from '@hi-ui/classname';
|
|
12
|
-
import { __DEV__ } from '@hi-ui/env';
|
|
13
|
-
import { useTableContext } from './context.js';
|
|
14
|
-
|
|
15
|
-
var _prefix = getPrefixCls('table-colgroup');
|
|
16
|
-
|
|
17
|
-
var ColGroupContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
18
|
-
var _ref$prefixCls = _ref.prefixCls,
|
|
19
|
-
prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls;
|
|
20
|
-
|
|
21
|
-
var _useTableContext = useTableContext(),
|
|
22
|
-
getColgroupProps = _useTableContext.getColgroupProps,
|
|
23
|
-
leafColumns = _useTableContext.leafColumns;
|
|
24
|
-
|
|
25
|
-
return /*#__PURE__*/React__default.createElement("colgroup", null, leafColumns.map(function (col, idx) {
|
|
26
|
-
return /*#__PURE__*/React__default.createElement("col", Object.assign({
|
|
27
|
-
key: idx,
|
|
28
|
-
className: prefixCls + "-col"
|
|
29
|
-
}, getColgroupProps(col, idx)));
|
|
30
|
-
}));
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
if (__DEV__) {
|
|
34
|
-
ColGroupContent.displayName = 'ColGroupContent';
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
export { ColGroupContent };
|