@homecode/ui 5.3.11 → 5.3.13
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, variant = 'default', size = 'm', } = this.props;
|
|
20
|
+
return (jsxs("div", { className: cn(S.root, S[`size-${size}`], S[`variant-${variant}`], 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_variant-default__86px7{box-shadow:0 0 0 2px var(--accent-color-alpha-100)}.Table_variant-default__86px7 th{background-color:var(--accent-color-alpha-100)}.Table_variant-default__86px7 td{box-shadow:inset 0 1px 0 0 var(--accent-color-alpha-100)}.Table_variant-plain__orPhH th{border-bottom:1px solid var(--accent-color-alpha-100)}.Table_variant-plain__orPhH td,.Table_variant-plain__orPhH th{border-bottom:1px solid var(--accent-color-alpha-100);border-right:1px solid var(--accent-color-alpha-100)}.Table_variant-plain__orPhH td:last-child,.Table_variant-plain__orPhH th:last-child{border-right:none}.Table_variant-plain__orPhH tr:last-child td{border-bottom:none}.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-","variant-default":"Table_variant-default__86px7","variant-plain":"Table_variant-plain__orPhH","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
|
+
variant?: 'default' | 'clear' | 'plain';
|
|
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
|
};
|