@homecode/ui 5.3.11 → 5.3.12
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.
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { Component } from 'react';
|
|
3
|
-
import cn from 'classnames';
|
|
4
3
|
import { Paranja } from '../Paranja/Paranja.js';
|
|
4
|
+
import S from './Table.styl.js';
|
|
5
5
|
import { Scroll } from '../Scroll/Scroll.js';
|
|
6
6
|
import { Spinner } from '../Spinner/Spinner.js';
|
|
7
|
-
import
|
|
7
|
+
import cn from 'classnames';
|
|
8
8
|
|
|
9
9
|
class Table extends Component {
|
|
10
10
|
renderHeaderColumn = ({ id, label, sticky }) => (jsx("th", { className: cn(sticky && S.sticky), children: label }, id));
|
|
@@ -16,8 +16,8 @@ class Table extends Component {
|
|
|
16
16
|
return (jsx("td", { className: cn(sticky && S.sticky), children: render ? render(data) : data[dataField || id] }, id));
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
const { className, columns, isLoading = false, loadingText, blur, data, } = this.props;
|
|
20
|
-
return (jsxs("div", { className: cn(S.root, blur && S.blur, className), children: [jsx(Scroll, { x: true, y: true, offset: { x: { before: 10, after: 10 } }, className: S.scroll, xScrollbarClassName: S.xScrollbar, yScrollbarClassName: S.yScrollbar, children: jsxs("table", { children: [jsx("thead", { children: jsx("tr", { children: columns.map(this.renderHeaderColumn) }) }), jsx("tbody", { children: data.map(this.renderRow) })] }) }), jsx(Paranja, { inline: true, visible: isLoading, blur: blur, children: isLoading && (loadingText ?? jsx(Spinner, {})) })] }));
|
|
19
|
+
const { className, columns, isLoading = false, loadingText, blur, data, clear, size = 'm', } = this.props;
|
|
20
|
+
return (jsxs("div", { className: cn(S.root, S[`size-${size}`], clear && S.clear, blur && S.blur, className), children: [jsx(Scroll, { x: true, y: true, offset: { x: { before: 10, after: 10 } }, className: S.scroll, xScrollbarClassName: S.xScrollbar, yScrollbarClassName: S.yScrollbar, children: jsxs("table", { children: [jsx("thead", { children: jsx("tr", { children: columns.map(this.renderHeaderColumn) }) }), jsx("tbody", { children: data.map(this.renderRow) })] }) }), jsx(Paranja, { inline: true, visible: isLoading, blur: blur, children: isLoading && (loadingText ?? jsx(Spinner, {})) })] }));
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".Table_root__PxLR-{--brad:var(--border-radius-l);border-radius:var(--border-radius-l);border-radius:var(--brad);
|
|
4
|
-
var S = {"root":"Table_root__PxLR-","scroll":"Table_scroll__a04XZ","xScrollbar":"Table_xScrollbar__FODoD","yScrollbar":"Table_yScrollbar__KwMOv","sticky":"Table_sticky__99lks","blur":"Table_blur__UwMAo"};
|
|
3
|
+
var css_248z = ".Table_root__PxLR-{--brad:var(--border-radius-l);border-radius:var(--border-radius-l);border-radius:var(--brad);max-height:100%;overflow:hidden;position:relative}.Table_root__PxLR- table{min-width:100%}.Table_root__PxLR- tbody{overflow-scrolling:touch;overflow:auto}.Table_root__PxLR- thead{position:sticky;top:0;z-index:1}.Table_root__PxLR- td,.Table_root__PxLR- th{min-width:5em;padding:var(--cell-padding);text-align:left}.Table_root__PxLR- td{vertical-align:top}.Table_root__PxLR- tr:last-child td{border-bottom-left-radius:var(--brad);border-bottom-right-radius:var(--brad);padding-bottom:var(--last-row-padding-bottom)}.Table_root__PxLR-:not(.Table_clear__pGt1B){box-shadow:0 0 0 2px var(--accent-color-alpha-100)}.Table_root__PxLR-:not(.Table_clear__pGt1B) th{background-color:var(--accent-color-alpha-100)}.Table_root__PxLR-:not(.Table_clear__pGt1B) td{box-shadow:inset 0 1px 0 0 var(--accent-color-alpha-100)}.Table_size-xs__z1E3a{--cell-padding:2px;--last-row-padding-bottom:var(--p-4)}.Table_size-s__9PBIX{--cell-padding:var(--p-1);--last-row-padding-bottom:var(--p-5)}.Table_size-m__wNH3x{--cell-padding:var(--p-2);--last-row-padding-bottom:var(--p-5)}.Table_size-l__lCN-O{--cell-padding:var(--p-5);--last-row-padding-bottom:var(--p-8)}.Table_size-xl__QS-V3{--cell-padding:var(--p-8);--last-row-padding-bottom:var(--p-8)}.Table_scroll__a04XZ{position:static}.Table_xScrollbar__FODoD{transform:translateY(4px)}.Table_yScrollbar__KwMOv{transform:translateX(4px)}.Table_sticky__99lks{background-color:var(--decent-color);left:0;position:sticky;z-index:1}th.Table_sticky__99lks{background-color:var(--accent-color);color:var(--decent-color)}.Table_blur__UwMAo .Table_sticky__99lks{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:var(--decent-color-alpha-500)}.Table_blur__UwMAo th.Table_sticky__99lks{background-color:var(--accent-color-alpha-500);color:var(--decent-color-alpha-800)}";
|
|
4
|
+
var S = {"root":"Table_root__PxLR-","clear":"Table_clear__pGt1B","size-xs":"Table_size-xs__z1E3a","size-s":"Table_size-s__9PBIX","size-m":"Table_size-m__wNH3x","size-l":"Table_size-l__lCN-O","size-xl":"Table_size-xl__QS-V3","scroll":"Table_scroll__a04XZ","xScrollbar":"Table_xScrollbar__FODoD","yScrollbar":"Table_yScrollbar__KwMOv","sticky":"Table_sticky__99lks","blur":"Table_blur__UwMAo"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { S as default };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Component } from 'react';
|
|
2
1
|
import * as T from './Table.types';
|
|
2
|
+
import { Component } from 'react';
|
|
3
3
|
export declare class Table extends Component<T.Props> {
|
|
4
4
|
renderHeaderColumn: ({ id, label, sticky }: T.Column) => JSX.Element;
|
|
5
5
|
renderRow: (data: T.Data) => JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { ComponentType, Size } from 'uilib/types';
|
|
1
2
|
import { ReactNode } from 'react';
|
|
2
|
-
import { ComponentType } from 'uilib/types';
|
|
3
3
|
export type Column = {
|
|
4
4
|
id: string;
|
|
5
5
|
label: ReactNode;
|
|
@@ -12,9 +12,11 @@ export type Data = {
|
|
|
12
12
|
className?: string;
|
|
13
13
|
} & any;
|
|
14
14
|
export type Props = ComponentType & {
|
|
15
|
+
clear?: boolean;
|
|
15
16
|
columns: Column[];
|
|
16
17
|
data: Data[];
|
|
17
18
|
isLoading?: boolean;
|
|
18
19
|
loadingText?: ReactNode;
|
|
19
20
|
blur?: boolean;
|
|
21
|
+
size?: Size;
|
|
20
22
|
};
|