@alphakits/ui 2.0.10 → 2.0.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.
- package/dist/checkbox/index.module.css +1 -1
- package/dist/checkbox/index.module.css.js +7 -7
- package/dist/checkbox-lists/index.module.css +1 -1
- package/dist/checkbox-lists/index.module.css.js +8 -6
- package/dist/checkbox-lists/index.module.css.js.map +1 -1
- package/dist/filter-tag/index.module.css +1 -1
- package/dist/form/templates/base-form/index.js +24 -21
- package/dist/form/templates/base-form/index.js.map +1 -1
- package/dist/form/templates/filters-form/index.js +24 -21
- package/dist/form/templates/filters-form/index.js.map +1 -1
- package/dist/form/templates/rest-form/index.js +27 -24
- package/dist/form/templates/rest-form/index.js.map +1 -1
- package/dist/header-search/index.module.css +1 -1
- package/dist/status/index.module.css +1 -1
- package/dist/table/columns.js +5 -4
- package/dist/table/columns.js.map +1 -1
- package/dist/table/components/cell/index.module.css +1 -1
- package/dist/table/components/cells/index.js +31 -24
- package/dist/table/components/cells/index.js.map +1 -1
- package/dist/table/components/cells/index.module.css +1 -1
- package/dist/table/components/cells/index.module.css.js +14 -12
- package/dist/table/components/cells/index.module.css.js.map +1 -1
- package/dist/table/components/pagination/index.js +41 -40
- package/dist/table/components/pagination/index.js.map +1 -1
- package/dist/table/components/pagination/index.module.css +1 -1
- package/dist/table/components/pagination/index.module.css.js +16 -12
- package/dist/table/components/pagination/index.module.css.js.map +1 -1
- package/dist/table/components/table-header/index.js +39 -39
- package/dist/table/components/table-header/index.js.map +1 -1
- package/dist/table/components/table-header/index.module.css +1 -1
- package/dist/table/components/table-header/index.module.css.js +2 -4
- package/dist/table/components/table-header/index.module.css.js.map +1 -1
- package/dist/table/index.module.css +1 -1
- package/dist/table/index.module.css.js +14 -12
- package/dist/table/index.module.css.js.map +1 -1
- package/dist/table/table.js +90 -90
- package/dist/table/table.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
|
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as d, jsx as s } from "react/jsx-runtime";
|
|
2
2
|
import f from "@alphakits/icons/dist/ChevronForwardS";
|
|
3
|
-
import
|
|
4
|
-
import { Button as
|
|
5
|
-
import { Typography as
|
|
3
|
+
import m from "classnames";
|
|
4
|
+
import { Button as h } from "../../../button/component.js";
|
|
5
|
+
import { Typography as g } from "../../../typography/component.js";
|
|
6
6
|
import { translate as b } from "../../languages/index.js";
|
|
7
7
|
import i from "./index.module.css.js";
|
|
8
|
-
function
|
|
9
|
-
const p =
|
|
8
|
+
function N(r, o) {
|
|
9
|
+
const p = r - 2, c = r + 2 + 1, l = [], a = [];
|
|
10
10
|
let n = 0;
|
|
11
11
|
for (let e = 1; e <= o; e++)
|
|
12
|
-
(e === 1 || e === o || e >= p && e <
|
|
12
|
+
(e === 1 || e === o || e >= p && e < c) && l.push(e);
|
|
13
13
|
return l.forEach((e) => {
|
|
14
14
|
n && (e - n === 2 ? a.push(n + 1) : e - n !== 1 && a.push("...")), a.push(e), n = e;
|
|
15
15
|
}), a;
|
|
16
16
|
}
|
|
17
17
|
const j = ({
|
|
18
|
-
pagesCount:
|
|
18
|
+
pagesCount: r,
|
|
19
19
|
currentPage: o,
|
|
20
|
-
recordsPerPage:
|
|
20
|
+
recordsPerPage: v = 30,
|
|
21
21
|
total: p,
|
|
22
|
-
language:
|
|
22
|
+
language: c,
|
|
23
23
|
addParam: l
|
|
24
24
|
}) => {
|
|
25
|
-
const a =
|
|
26
|
-
return /* @__PURE__ */
|
|
27
|
-
/* @__PURE__ */
|
|
28
|
-
/* @__PURE__ */ s(
|
|
29
|
-
/* @__PURE__ */ s(
|
|
25
|
+
const a = N(o, r), n = o === 1, e = o === r;
|
|
26
|
+
return /* @__PURE__ */ d("div", { className: i.pagination_wrap, children: [
|
|
27
|
+
/* @__PURE__ */ d("div", { className: i.pages_info, children: [
|
|
28
|
+
/* @__PURE__ */ s(g.Text, { view: "title", weight: "medium", color: "secondary", children: b(c)("totalCount") }),
|
|
29
|
+
/* @__PURE__ */ s(g.Text, { view: "title", weight: "medium", color: "primary", children: p })
|
|
30
30
|
] }),
|
|
31
|
-
a.length > 1 && /* @__PURE__ */
|
|
31
|
+
/* @__PURE__ */ s("div", { className: i.pagination_center, children: a.length > 1 && /* @__PURE__ */ d("div", { className: i.pagination, children: [
|
|
32
32
|
/* @__PURE__ */ s(
|
|
33
|
-
|
|
33
|
+
h,
|
|
34
34
|
{
|
|
35
|
-
className:
|
|
35
|
+
className: m(i.prev_btn, i.btn, { [i.disabled_btn]: n }),
|
|
36
36
|
leftAddons: /* @__PURE__ */ s(f, {}),
|
|
37
37
|
view: "ghost",
|
|
38
38
|
onClick: () => l({ page: o - 1 }),
|
|
39
39
|
disabled: n
|
|
40
40
|
}
|
|
41
41
|
),
|
|
42
|
-
a.map((t,
|
|
43
|
-
|
|
42
|
+
a.map((t, w) => Number.isFinite(t) ? /* @__PURE__ */ s(
|
|
43
|
+
h,
|
|
44
44
|
{
|
|
45
|
-
className:
|
|
45
|
+
className: m(
|
|
46
46
|
i.pagination_btn,
|
|
47
47
|
{ [i.active]: t === o }
|
|
48
48
|
),
|
|
@@ -53,21 +53,19 @@ const j = ({
|
|
|
53
53
|
},
|
|
54
54
|
t
|
|
55
55
|
) : /* @__PURE__ */ s(
|
|
56
|
-
|
|
56
|
+
h,
|
|
57
57
|
{
|
|
58
|
-
className:
|
|
59
|
-
i.pagination_btn
|
|
60
|
-
),
|
|
58
|
+
className: m(i.pagination_btn),
|
|
61
59
|
view: "ghost",
|
|
62
60
|
disabled: !0,
|
|
63
61
|
children: "..."
|
|
64
62
|
},
|
|
65
|
-
t +
|
|
63
|
+
t + w
|
|
66
64
|
)),
|
|
67
65
|
/* @__PURE__ */ s(
|
|
68
|
-
|
|
66
|
+
h,
|
|
69
67
|
{
|
|
70
|
-
className:
|
|
68
|
+
className: m(i.btn, { [i.disabled_btn]: e }),
|
|
71
69
|
leftAddons: /* @__PURE__ */ s(f, {}),
|
|
72
70
|
view: "ghost",
|
|
73
71
|
onClick: () => {
|
|
@@ -76,18 +74,21 @@ const j = ({
|
|
|
76
74
|
disabled: e
|
|
77
75
|
}
|
|
78
76
|
)
|
|
79
|
-
] }),
|
|
80
|
-
/* @__PURE__ */
|
|
81
|
-
"
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
77
|
+
] }) }),
|
|
78
|
+
/* @__PURE__ */ d("div", { className: i.select_wrap, children: [
|
|
79
|
+
/* @__PURE__ */ s(g.Text, { view: "title", weight: "medium", color: "secondary", children: b(c)("resultsOnPage") }),
|
|
80
|
+
/* @__PURE__ */ s(
|
|
81
|
+
"select",
|
|
82
|
+
{
|
|
83
|
+
value: v,
|
|
84
|
+
className: i.select,
|
|
85
|
+
onChange: (t) => {
|
|
86
|
+
l({ page: 1, limit: t.target.value });
|
|
87
|
+
},
|
|
88
|
+
children: [5, 10, 20, 30, 40, 50].map((t) => /* @__PURE__ */ s("option", { value: t, children: t }, t))
|
|
89
|
+
}
|
|
90
|
+
)
|
|
91
|
+
] })
|
|
91
92
|
] });
|
|
92
93
|
};
|
|
93
94
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/table/components/pagination/index.tsx"],"sourcesContent":["import React from 'react';\nimport ChevronForwardS from '@alphakits/icons/dist/ChevronForwardS';\nimport cn from 'classnames';\n\nimport { Button } from '../../../button';\nimport { Typography } from '../../../typography';\nimport { translate } from '../../languages';\n\nimport styles from './index.module.css';\n\nfunction pagination(current: number, last: number) {\n const delta = 2;\n const left = current - delta;\n const right = current + delta + 1;\n const range = [];\n const rangeWithDots: any = [];\n let l = 0;\n\n for (let i = 1; i <= last; i++) {\n if (i === 1 || i === last || (i >= left && i < right)) {\n range.push(i);\n }\n }\n\n range.forEach((i: number) => {\n if (l) {\n if (i - l === 2) {\n rangeWithDots.push(l + 1);\n } else if (i - l !== 1) {\n rangeWithDots.push('...');\n }\n }\n rangeWithDots.push(i);\n l = i;\n });\n\n return rangeWithDots;\n}\n\ntype Props = {\n pagesCount: number;\n currentPage: number;\n recordsPerPage: number;\n total: number;\n addParam: (param: Record<string, unknown>) => void;\n language: 'en' | 'de' | 'ru';\n};\n\nexport const Pagination: React.FC<Props> = ({\n pagesCount,\n currentPage,\n recordsPerPage = 30,\n total,\n language,\n addParam,\n}) => {\n const pg = pagination(currentPage, pagesCount);\n\n const disablePreviewsPage = currentPage === 1;\n const disableNextPage = currentPage === pagesCount;\n\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/table/components/pagination/index.tsx"],"sourcesContent":["import React from 'react';\nimport ChevronForwardS from '@alphakits/icons/dist/ChevronForwardS';\nimport cn from 'classnames';\n\nimport { Button } from '../../../button';\nimport { Typography } from '../../../typography';\nimport { translate } from '../../languages';\n\nimport styles from './index.module.css';\n\nfunction pagination(current: number, last: number) {\n const delta = 2;\n const left = current - delta;\n const right = current + delta + 1;\n const range = [];\n const rangeWithDots: any = [];\n let l = 0;\n\n for (let i = 1; i <= last; i++) {\n if (i === 1 || i === last || (i >= left && i < right)) {\n range.push(i);\n }\n }\n\n range.forEach((i: number) => {\n if (l) {\n if (i - l === 2) {\n rangeWithDots.push(l + 1);\n } else if (i - l !== 1) {\n rangeWithDots.push('...');\n }\n }\n rangeWithDots.push(i);\n l = i;\n });\n\n return rangeWithDots;\n}\n\ntype Props = {\n pagesCount: number;\n currentPage: number;\n recordsPerPage: number;\n total: number;\n addParam: (param: Record<string, unknown>) => void;\n language: 'en' | 'de' | 'ru';\n};\n\nexport const Pagination: React.FC<Props> = ({\n pagesCount,\n currentPage,\n recordsPerPage = 30,\n total,\n language,\n addParam,\n}) => {\n const pg = pagination(currentPage, pagesCount);\n\n const disablePreviewsPage = currentPage === 1;\n const disableNextPage = currentPage === pagesCount;\n\n return (\n <div className={ styles.pagination_wrap }>\n <div className={ styles.pages_info }>\n <Typography.Text view=\"title\" weight=\"medium\" color=\"secondary\">\n { translate(language)('totalCount') }\n </Typography.Text>\n\n <Typography.Text view=\"title\" weight=\"medium\" color=\"primary\">\n { total }\n </Typography.Text>\n </div>\n\n <div className={ styles.pagination_center }>\n { pg.length > 1 && (\n <div className={ styles.pagination }>\n <Button\n className={ cn(styles.prev_btn, styles.btn, { [styles.disabled_btn]: disablePreviewsPage }) }\n leftAddons={ <ChevronForwardS /> }\n view=\"ghost\"\n onClick={ () => addParam({ page: currentPage - 1 }) }\n disabled={ disablePreviewsPage }\n />\n { pg.map((p: number, i: number) =>\n (Number.isFinite(p) ? (\n <Button\n className={ cn(\n styles.pagination_btn,\n { [styles.active]: p === currentPage },\n ) }\n size=\"xs\"\n view=\"ghost\"\n key={ p }\n onClick={ () => addParam({ page: p }) }\n >\n { p }\n </Button>\n ) : (\n <Button\n // eslint-disable-next-line react/no-array-index-key\n key={ p + i }\n className={ cn(styles.pagination_btn) }\n view=\"ghost\"\n disabled={ true }\n >\n ...\n </Button>\n ))) }\n <Button\n className={ cn(styles.btn, { [styles.disabled_btn]: disableNextPage }) }\n leftAddons={ <ChevronForwardS /> }\n view=\"ghost\"\n onClick={ () => {\n addParam({ page: currentPage + 1 });\n } }\n disabled={ disableNextPage }\n />\n </div>\n ) }\n </div>\n\n <div className={ styles.select_wrap }>\n <Typography.Text view=\"title\" weight=\"medium\" color=\"secondary\">\n { translate(language)('resultsOnPage') }\n </Typography.Text>\n\n <select\n value={ recordsPerPage }\n className={ styles.select }\n onChange={ (e) => {\n addParam({ page: 1, limit: e.target.value });\n } }\n >\n { [5, 10, 20, 30, 40, 50].map((size) => (\n <option key={ size } value={ size }>\n { size }\n </option>\n )) }\n </select>\n </div>\n </div>\n );\n};\n"],"names":["pagination","current","last","left","right","range","rangeWithDots","l","i","Pagination","pagesCount","currentPage","recordsPerPage","total","language","addParam","pg","disablePreviewsPage","disableNextPage","jsxs","styles","jsx","Typography","translate","Button","cn","ChevronForwardS","p","e","size"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pagination_wrap_kmil{
|
|
1
|
+
.pagination_wrap_kmil{min-height:40px;padding:4px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;grid-gap:16px;gap:16px;background-color:var(--color-bg-primary);position:sticky;bottom:0;border:1px solid var(--color-border-secondary);border-radius:0 0 12px 12px;box-sizing:border-box;font-size:14px}.pages_info_9Quw{display:flex;gap:8px;align-items:baseline;color:var(--color-text-secondary);justify-self:start}.pagination_center_rtzL{display:flex;justify-content:center;justify-self:center;grid-column:2}.pagination_36rf{display:grid;grid-column-gap:4px;-moz-column-gap:4px;column-gap:4px;grid-auto-flow:column;align-items:center}.prev_btn_UnDy svg{transform:rotate(180deg)}.disabled_btn_G6J6{opacity:.4}.pagination_btn_vexg{color:var(--color-text-secondary)!important;font-weight:500;min-width:28px!important;height:28px!important;padding:0 6px!important;border-radius:6px!important;background-color:transparent!important}.pagination_btn_vexg:hover{background-color:var(--color-bg-secondary)!important}.pagination_btn_vexg.active_F46k{color:var(--color-text-primary)!important;font-weight:700;background-color:transparent!important}.btn_-Zrx{min-width:28px!important;height:28px!important;padding:0!important;color:var(--color-text-secondary)!important}.select_wrap_QwzZ{justify-self:end;grid-column:3;display:flex;align-items:center;gap:12px;color:var(--color-text-secondary)}.select_XysE{margin:0;border:1px solid var(--color-border-secondary);outline:none;border-radius:8px;height:32px;padding:0 28px 0 12px;font-weight:500;font-size:14px;line-height:1;color:var(--color-text-primary);background-color:var(--color-bg-primary);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-graphic-secondary, var(--color-text-secondary)) 50%),linear-gradient(135deg,var(--color-graphic-secondary, var(--color-text-secondary)) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.select_XysE:focus-visible{outline:2px solid var(--color-border-link, var(--color-graphic-accent));outline-offset:1px}
|
|
@@ -1,25 +1,29 @@
|
|
|
1
1
|
import './index.module.css';
|
|
2
|
-
const n = "pagination_wrap_kmil", t = "
|
|
2
|
+
const n = "pagination_wrap_kmil", t = "pages_info_9Quw", a = "pagination_center_rtzL", e = "pagination_36rf", i = "prev_btn_UnDy", _ = "disabled_btn_G6J6", o = "pagination_btn_vexg", s = "active_F46k", p = "btn_-Zrx", c = "select_wrap_QwzZ", g = "select_XysE", r = {
|
|
3
3
|
pagination_wrap: n,
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
pages_info: t,
|
|
5
|
+
pagination_center: a,
|
|
6
|
+
pagination: e,
|
|
6
7
|
prev_btn: i,
|
|
7
8
|
disabled_btn: _,
|
|
8
9
|
pagination_btn: o,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
active: s,
|
|
11
|
+
btn: p,
|
|
12
|
+
select_wrap: c,
|
|
13
|
+
select: g
|
|
12
14
|
};
|
|
13
15
|
export {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
s as active,
|
|
17
|
+
p as btn,
|
|
18
|
+
r as default,
|
|
17
19
|
_ as disabled_btn,
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
t as pages_info,
|
|
21
|
+
e as pagination,
|
|
20
22
|
o as pagination_btn,
|
|
23
|
+
a as pagination_center,
|
|
21
24
|
n as pagination_wrap,
|
|
22
25
|
i as prev_btn,
|
|
23
|
-
|
|
26
|
+
g as select,
|
|
27
|
+
c as select_wrap
|
|
24
28
|
};
|
|
25
29
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import { jsxs as r, jsx as n } from "react/jsx-runtime";
|
|
2
|
-
import { useState as f, useEffect as p, useRef as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { useDebounce as
|
|
6
|
-
import
|
|
7
|
-
import { Button as
|
|
8
|
-
import { Flex as
|
|
9
|
-
import { HeaderSearch as
|
|
10
|
-
import { translate as
|
|
1
|
+
import { jsxs as r, jsx as n, Fragment as R } from "react/jsx-runtime";
|
|
2
|
+
import { useState as f, useEffect as p, useRef as $, useCallback as b } from "react";
|
|
3
|
+
import A from "@alphakits/icons/dist/ControllerS";
|
|
4
|
+
import B from "@alphakits/icons/dist/PlusS";
|
|
5
|
+
import { useDebounce as E } from "rooks";
|
|
6
|
+
import H from "classnames";
|
|
7
|
+
import { Button as g } from "../../../button/component.js";
|
|
8
|
+
import { Flex as I } from "../../../flex/component.js";
|
|
9
|
+
import { HeaderSearch as P } from "../../../header-search/component.js";
|
|
10
|
+
import { translate as _ } from "../../languages/index.js";
|
|
11
11
|
import t from "./index.module.css.js";
|
|
12
|
-
const
|
|
13
|
-
tags:
|
|
14
|
-
searchPlaceholder:
|
|
12
|
+
const Y = ({
|
|
13
|
+
tags: m,
|
|
14
|
+
searchPlaceholder: v = "Type something..",
|
|
15
15
|
searchText: o,
|
|
16
|
-
hideSearch:
|
|
17
|
-
compact:
|
|
18
|
-
rightHeaderAddons:
|
|
19
|
-
leftHeaderAddons:
|
|
20
|
-
addParam:
|
|
16
|
+
hideSearch: C,
|
|
17
|
+
compact: S = !1,
|
|
18
|
+
rightHeaderAddons: V,
|
|
19
|
+
leftHeaderAddons: s,
|
|
20
|
+
addParam: y,
|
|
21
21
|
onCreateClick: a,
|
|
22
|
-
onFiltersClick:
|
|
22
|
+
onFiltersClick: N,
|
|
23
23
|
createButtonLabel: h,
|
|
24
24
|
showFiltersButton: j,
|
|
25
25
|
filtersButtonLabel: D,
|
|
@@ -30,48 +30,48 @@ const X = ({
|
|
|
30
30
|
const e = `${o != null ? o : ""}`;
|
|
31
31
|
l.current = e.trim(), d(e), u(e);
|
|
32
32
|
}, [o]);
|
|
33
|
-
const z =
|
|
33
|
+
const z = E((e) => u(e), 500), l = $("");
|
|
34
34
|
p(() => {
|
|
35
35
|
const e = `${c || ""}`.trim();
|
|
36
|
-
l.current !== e && (
|
|
36
|
+
l.current !== e && (y({ searchText: e, page: 1 }), l.current = e);
|
|
37
37
|
}, [c]);
|
|
38
38
|
const i = b((e) => {
|
|
39
39
|
d(e), z(e);
|
|
40
|
-
}, []),
|
|
40
|
+
}, []), F = b(() => {
|
|
41
41
|
i("");
|
|
42
42
|
}, [i]);
|
|
43
|
-
return /* @__PURE__ */ r("div", { className:
|
|
43
|
+
return /* @__PURE__ */ r("div", { className: H(t.table_header, { [t.compact]: S }), children: [
|
|
44
44
|
/* @__PURE__ */ r("div", { className: t.actions, children: [
|
|
45
|
-
/* @__PURE__ */ r(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
I,
|
|
45
|
+
/* @__PURE__ */ r(I, { justify: "start", gap: "md", children: [
|
|
46
|
+
!C && /* @__PURE__ */ n(
|
|
47
|
+
P,
|
|
49
48
|
{
|
|
50
49
|
value: w,
|
|
51
50
|
onChange: i,
|
|
52
|
-
onClear:
|
|
53
|
-
placeholder:
|
|
51
|
+
onClear: F,
|
|
52
|
+
placeholder: v
|
|
54
53
|
}
|
|
55
|
-
)
|
|
54
|
+
),
|
|
55
|
+
s && /* @__PURE__ */ n(R, { children: s })
|
|
56
56
|
] }),
|
|
57
57
|
/* @__PURE__ */ r("div", { className: t.buttons, children: [
|
|
58
|
-
|
|
58
|
+
V,
|
|
59
59
|
!!a && /* @__PURE__ */ n(
|
|
60
|
-
|
|
60
|
+
g,
|
|
61
61
|
{
|
|
62
62
|
dataTestId: "createbtn",
|
|
63
63
|
onClick: a,
|
|
64
64
|
view: "primary",
|
|
65
|
-
leftAddons: /* @__PURE__ */ n(
|
|
65
|
+
leftAddons: /* @__PURE__ */ n(B, {}),
|
|
66
66
|
size: "xs",
|
|
67
|
-
children: h ||
|
|
67
|
+
children: h || _(k)("create")
|
|
68
68
|
}
|
|
69
69
|
),
|
|
70
70
|
j && /* @__PURE__ */ n(
|
|
71
|
-
|
|
71
|
+
g,
|
|
72
72
|
{
|
|
73
|
-
leftAddons: /* @__PURE__ */ n(
|
|
74
|
-
onClick:
|
|
73
|
+
leftAddons: /* @__PURE__ */ n(A, {}),
|
|
74
|
+
onClick: N,
|
|
75
75
|
view: "outlined",
|
|
76
76
|
size: "xs",
|
|
77
77
|
children: D
|
|
@@ -79,10 +79,10 @@ const X = ({
|
|
|
79
79
|
)
|
|
80
80
|
] })
|
|
81
81
|
] }),
|
|
82
|
-
!!
|
|
82
|
+
!!m.length && /* @__PURE__ */ n("div", { className: t.tags, children: m })
|
|
83
83
|
] });
|
|
84
84
|
};
|
|
85
85
|
export {
|
|
86
|
-
|
|
86
|
+
Y as TableHeader
|
|
87
87
|
};
|
|
88
88
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/table/components/table-header/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-types */\nimport React, {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/table/components/table-header/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-types */\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport ControllerS from '@alphakits/icons/dist/ControllerS';\nimport PlusS from '@alphakits/icons/dist/PlusS';\nimport { useDebounce } from 'rooks';\nimport cn from 'classnames';\n\nimport { Button } from '../../../button';\nimport { Flex } from '../../../flex';\nimport { HeaderSearch } from '../../../header-search';\nimport { translate } from '../../languages';\nimport { Query } from '../../types';\n\nimport styles from './index.module.css';\n\ntype Props = {\n tags: JSX.Element[];\n searchPlaceholder: string;\n searchText?: string;\n addParam: (val: Query) => void;\n onCreateClick?: () => void;\n onFiltersClick?: () => void;\n language: 'en' | 'de' | 'ru';\n showFiltersButton: boolean;\n filtersButtonLabel?: string;\n createButtonLabel?: string;\n rightHeaderAddons?: React.ReactNode;\n leftHeaderAddons?: React.ReactNode;\n hideSearch?: boolean;\n compact?: boolean;\n};\n\nexport const TableHeader: React.FC<Props> = ({\n tags,\n searchPlaceholder = 'Type something..',\n searchText,\n hideSearch,\n compact = false,\n rightHeaderAddons,\n leftHeaderAddons,\n addParam,\n onCreateClick,\n onFiltersClick,\n createButtonLabel,\n showFiltersButton,\n filtersButtonLabel,\n language,\n}) => {\n // локальное состояние поля ввода\n const [value, setValue] = useState<string>(searchText ?? '');\n const [debouncedValue, setDebouncedValue] = useState<string>(searchText ?? '');\n\n // если проп searchText меняется извне — синхронизируем локальные стейты\n useEffect(() => {\n const v = `${searchText ?? ''}`;\n\n lastSentRef.current = v.trim();\n setValue(v);\n setDebouncedValue(v);\n }, [searchText]);\n\n // дебаунсим только установку debouncedValue\n const setValueDebounced = useDebounce((v: string) => setDebouncedValue(v), 500);\n\n // не отправляем одинаковые значения повторно\n const lastSentRef = useRef<string>('');\n\n useEffect(() => {\n const next = `${debouncedValue || ''}`.trim();\n\n if (lastSentRef.current === next) return;\n\n addParam({ searchText: next, page: 1 });\n lastSentRef.current = next;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [debouncedValue]);\n\n const handleChangeValue = useCallback((v: string) => {\n setValue(v);\n setValueDebounced(v);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleClear = useCallback(() => {\n // достаточно обнулить значение — эффект сам отправит пустую строку\n handleChangeValue('');\n }, [handleChangeValue]);\n\n return (\n <div className={cn(styles.table_header, { [styles.compact]: compact })}>\n <div className={styles.actions}>\n <Flex justify='start' gap='md'>\n {!hideSearch && (\n <HeaderSearch\n value={value}\n onChange={handleChangeValue}\n onClear={handleClear}\n placeholder={searchPlaceholder}\n />\n )}\n\n {leftHeaderAddons && (\n <>{leftHeaderAddons}</>\n )}\n </Flex>\n\n <div className={styles.buttons}>\n {rightHeaderAddons}\n\n {!!onCreateClick && (\n <Button\n dataTestId='createbtn'\n onClick={onCreateClick}\n view='primary'\n leftAddons={<PlusS />}\n size='xs'\n >\n {createButtonLabel || translate(language)('create')}\n </Button>\n )}\n\n {showFiltersButton && (\n <Button\n leftAddons={<ControllerS />}\n onClick={onFiltersClick}\n view='outlined'\n size='xs'\n >\n {filtersButtonLabel}\n </Button>\n )}\n </div>\n </div>\n\n {!!tags.length && <div className={styles.tags}>{tags}</div>}\n </div>\n );\n};\n"],"names":["TableHeader","tags","searchPlaceholder","searchText","hideSearch","compact","rightHeaderAddons","leftHeaderAddons","addParam","onCreateClick","onFiltersClick","createButtonLabel","showFiltersButton","filtersButtonLabel","language","value","setValue","useState","debouncedValue","setDebouncedValue","useEffect","v","lastSentRef","setValueDebounced","useDebounce","useRef","next","handleChangeValue","useCallback","handleClear","jsxs","cn","styles","Flex","jsx","HeaderSearch","Button","PlusS","translate","ControllerS"],"mappings":";;;;;;;;;;;AAgCO,MAAMA,IAA+B,CAAC;AAAA,EACzC,MAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,mBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,UAAAC;AACJ,MAAM;AAEF,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAiBd,KAAA,OAAAA,IAAc,EAAE,GACrD,CAACe,GAAgBC,CAAiB,IAAIF,EAAiBd,KAAA,OAAAA,IAAc,EAAE;AAG7E,EAAAiB,EAAU,MAAM;AACZ,UAAMC,IAAI,GAAGlB,KAAA,OAAAA,IAAc,EAAE;AAE7B,IAAAmB,EAAY,UAAUD,EAAE,KAAA,GACxBL,EAASK,CAAC,GACVF,EAAkBE,CAAC;AAAA,EACvB,GAAG,CAAClB,CAAU,CAAC;AAGf,QAAMoB,IAAoBC,EAAY,CAACH,MAAcF,EAAkBE,CAAC,GAAG,GAAG,GAGxEC,IAAcG,EAAe,EAAE;AAErC,EAAAL,EAAU,MAAM;AACZ,UAAMM,IAAO,GAAGR,KAAkB,EAAE,GAAG,KAAA;AAEvC,IAAII,EAAY,YAAYI,MAE5BlB,EAAS,EAAE,YAAYkB,GAAM,MAAM,GAAG,GACtCJ,EAAY,UAAUI;AAAA,EAE1B,GAAG,CAACR,CAAc,CAAC;AAEnB,QAAMS,IAAoBC,EAAY,CAACP,MAAc;AACjD,IAAAL,EAASK,CAAC,GACVE,EAAkBF,CAAC;AAAA,EAEvB,GAAG,CAAA,CAAE,GAECQ,IAAcD,EAAY,MAAM;AAElC,IAAAD,EAAkB,EAAE;AAAA,EACxB,GAAG,CAACA,CAAiB,CAAC;AAEtB,SACI,gBAAAG,EAAC,OAAA,EAAI,WAAWC,EAAGC,EAAO,cAAc,EAAE,CAACA,EAAO,OAAO,GAAG3B,EAAA,CAAS,GACjE,UAAA;AAAA,IAAA,gBAAAyB,EAAC,OAAA,EAAI,WAAWE,EAAO,SACnB,UAAA;AAAA,MAAA,gBAAAF,EAACG,GAAA,EAAK,SAAQ,SAAQ,KAAI,MACrB,UAAA;AAAA,QAAA,CAAC7B,KACE,gBAAA8B;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,OAAApB;AAAA,YACA,UAAUY;AAAA,YACV,SAASE;AAAA,YACT,aAAa3B;AAAA,UAAA;AAAA,QAAA;AAAA,QAIpBK,4BACM,UAAAA,EAAA,CAAiB;AAAA,MAAA,GAE5B;AAAA,MAEA,gBAAAuB,EAAC,OAAA,EAAI,WAAWE,EAAO,SAClB,UAAA;AAAA,QAAA1B;AAAA,QAEA,CAAC,CAACG,KACC,gBAAAyB;AAAA,UAACE;AAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,SAAS3B;AAAA,YACT,MAAK;AAAA,YACL,8BAAa4B,GAAA,EAAM;AAAA,YACnB,MAAK;AAAA,YAEJ,UAAA1B,KAAqB2B,EAAUxB,CAAQ,EAAE,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAIzDF,KACG,gBAAAsB;AAAA,UAACE;AAAA,UAAA;AAAA,YACG,8BAAaG,GAAA,EAAY;AAAA,YACzB,SAAS7B;AAAA,YACT,MAAK;AAAA,YACL,MAAK;AAAA,YAEJ,UAAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACL,EAAA,CAER;AAAA,IAAA,GACJ;AAAA,IAEC,CAAC,CAACZ,EAAK,4BAAW,OAAA,EAAI,WAAW+B,EAAO,MAAO,UAAA/B,EAAA,CAAK;AAAA,EAAA,GACzD;AAER;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.table_header_GXu4{width:100%;margin-bottom:
|
|
1
|
+
.table_header_GXu4{width:100%;margin-bottom:20px}.actions_GZKJ{display:flex;align-items:center;justify-content:space-between;gap:12px}.tags_PpKz{margin-top:12px;display:flex;flex-wrap:wrap;margin-right:-12px}.tags_PpKz>*:not(:last-child):not(:only-child){margin-right:12px}.tags_PpKz>*{margin:4px 0}.tag_SqNT{margin-right:12px}.buttons_3CQY{display:flex;align-items:center;gap:8px}.buttons_3CQY button:not(:last-child){margin-right:0}.compact_ull- .leftHeaderAddons_W8Yb{margin-right:12px!important}.compact_ull- .tags_PpKz{margin-top:8px;margin-right:-8px}.compact_ull- .tags_PpKz>*:not(:last-child):not(:only-child){margin-right:8px}.compact_ull- .tag_SqNT{margin-right:8px}.compact_ull- .buttons_3CQY button:not(:last-child){margin-right:8px}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import './index.module.css';
|
|
2
|
-
const t = "table_header_GXu4", s = "actions_GZKJ",
|
|
2
|
+
const t = "table_header_GXu4", s = "actions_GZKJ", a = "tags_PpKz", o = "buttons_3CQY", c = "compact_ull-", e = {
|
|
3
3
|
table_header: t,
|
|
4
4
|
actions: s,
|
|
5
|
-
leftHeaderAddons: e,
|
|
6
5
|
tags: a,
|
|
7
6
|
buttons: o,
|
|
8
7
|
compact: c
|
|
@@ -11,8 +10,7 @@ export {
|
|
|
11
10
|
s as actions,
|
|
12
11
|
o as buttons,
|
|
13
12
|
c as compact,
|
|
14
|
-
|
|
15
|
-
e as leftHeaderAddons,
|
|
13
|
+
e as default,
|
|
16
14
|
t as table_header,
|
|
17
15
|
a as tags
|
|
18
16
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--text-primary-color: var(--color-text-primary);--text-secondary-color: var(--color-text-secondary);--text-tertiary-color: var(--color-text-tertiary);--border-radius: 4px;--focus-color: var(--color-border-link);--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif;--disabled-cursor: not-allowed;--arrow-transform: rotate(180deg)}.table_wrapper_SeB5{width:100%;box-sizing:border-box;position:relative}.
|
|
1
|
+
:root{--text-primary-color: var(--color-text-primary);--text-secondary-color: var(--color-text-secondary);--text-tertiary-color: var(--color-text-tertiary);--border-radius: 4px;--focus-color: var(--color-border-link);--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif;--disabled-cursor: not-allowed;--arrow-transform: rotate(180deg)}.table_wrapper_SeB5{width:100%;box-sizing:border-box;position:relative}.table_9sbd{position:relative;box-sizing:border-box;border:1px solid var(--color-border-secondary);border-radius:12px 12px 0 0;background:var(--color-bg-primary);box-shadow:var(--shadow-xs);overflow:hidden}.table_9sbd table{width:100%;border-collapse:collapse;background:var(--color-bg-primary);table-layout:fixed}.table_9sbd tbody tr td{transition:background-color .15s ease}.table_9sbd.no_footer_julO{border-radius:12px}.fill_Q-ic{height:-webkit-fill-available;flex-grow:1;display:flex;flex-direction:column}.fill_Q-ic .table_9sbd{flex-grow:1;overflow:hidden}.fill_Q-ic .table_9sbd:hover{overflow:auto}.clickable_k4S8{cursor:pointer}.clickable_k4S8:hover td{background-color:color-mix(in srgb,var(--color-bg-secondary) 92%,var(--color-bg-primary))}
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import './index.module.css';
|
|
2
|
-
const
|
|
3
|
-
table_wrapper:
|
|
4
|
-
table:
|
|
5
|
-
|
|
2
|
+
const t = "table_wrapper_SeB5", l = "table_9sbd", e = "no_footer_julO", c = "fill_Q-ic", o = "compact_kbrU", a = "clickable_k4S8", _ = {
|
|
3
|
+
table_wrapper: t,
|
|
4
|
+
table: l,
|
|
5
|
+
no_footer: e,
|
|
6
|
+
fill: c,
|
|
6
7
|
default: "default_BxOw",
|
|
7
|
-
compact:
|
|
8
|
-
clickable:
|
|
8
|
+
compact: o,
|
|
9
|
+
clickable: a
|
|
9
10
|
};
|
|
10
11
|
export {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
l as
|
|
12
|
+
a as clickable,
|
|
13
|
+
o as compact,
|
|
14
|
+
_ as default,
|
|
15
|
+
c as fill,
|
|
16
|
+
e as no_footer,
|
|
17
|
+
l as table,
|
|
18
|
+
t as table_wrapper
|
|
17
19
|
};
|
|
18
20
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|