@gobolt/genesis 0.2.2 → 0.2.4
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/components/Avatar/Avatar.cjs +1 -1
- package/dist/components/Avatar/Avatar.d.ts +7 -3
- package/dist/components/Avatar/Avatar.js +61 -30
- package/dist/components/Avatar/__stories__/Avatar.stories.d.ts +4 -2
- package/dist/components/Button/icon-button-styles.cjs +4 -4
- package/dist/components/Button/icon-button-styles.js +4 -4
- package/dist/components/Button/styles.cjs +11 -11
- package/dist/components/Button/styles.js +13 -13
- package/dist/components/Row/RowActions/RowActions.cjs +1 -1
- package/dist/components/Row/RowActions/RowActions.js +9 -24
- package/dist/components/Row/RowActions/styles.cjs +2 -22
- package/dist/components/Row/RowActions/styles.d.ts +0 -1
- package/dist/components/Row/RowActions/styles.js +3 -24
- package/dist/components/Table/TableWithControls/useTableWithControls.d.ts +1 -4
- package/dist/components/Table/__mocks__/table-mocks.cjs +1 -1
- package/dist/components/Table/__mocks__/table-mocks.js +4 -4
- package/dist/components/Table/useTable.cjs +1 -1
- package/dist/components/Table/useTable.d.ts +3 -4
- package/dist/components/Table/useTable.js +41 -68
- package/dist/utils/user-util.cjs +1 -0
- package/dist/utils/user-util.d.ts +2 -0
- package/dist/utils/user-util.js +10 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const i=require("react/jsx-runtime"),n=require("./styles.cjs"),m=require("../../utils/user-util.cjs"),s=require("../Typography/Typography.cjs"),o=a=>a.includes("[")&&a.includes("]")?a.split("]")[1].trim():a,y=({size:a=48,shape:l="circle",children:c,backgroundColor:r="#00282B",user:t=null})=>{if(console.log("Avatar",t),!t)return i.jsx(n.Avatar,{"data-testid":"avatar",shape:l,size:a,alt:"Default Avatar",style:{backgroundColor:r}});const e=`${o(t.first_name)} ${t.last_name}`;if(t&&!(t!=null&&t.image_url)){const v={first_name:o(t.first_name),last_name:t.last_name},d=m.createInitials(v);return i.jsx(n.Avatar,{"data-testid":"avatar",shape:l,size:a,alt:e,style:{backgroundColor:r},children:i.jsx(s,{variant:"body2",color:"white",style:{fontWeight:600},children:d})})}return typeof c=="string"?i.jsx(n.Avatar,{"data-testid":"avatar",shape:l,size:a,src:t==null?void 0:t.image_url,alt:e,style:{backgroundColor:r},children:i.jsx(s,{variant:"body2",color:"white",style:{fontWeight:600},children:c})}):i.jsx(n.Avatar,{"data-testid":"avatar",shape:l,size:a,src:t==null?void 0:t.image_url,alt:e})};module.exports=y;
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
export type GoBoltUser = {
|
|
3
|
+
first_name: string;
|
|
4
|
+
last_name: string;
|
|
5
|
+
image_url?: string;
|
|
6
|
+
};
|
|
2
7
|
export interface AvatarProps {
|
|
3
8
|
size?: number;
|
|
4
9
|
icon?: React.ReactNode;
|
|
5
10
|
shape?: "circle" | "square";
|
|
6
|
-
imageUrl?: string;
|
|
7
|
-
altText?: string;
|
|
8
11
|
children?: string;
|
|
9
12
|
backgroundColor?: string;
|
|
13
|
+
user?: GoBoltUser;
|
|
10
14
|
}
|
|
11
|
-
declare const Avatar: ({ size, shape,
|
|
15
|
+
declare const Avatar: ({ size, shape, children, backgroundColor, user, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
16
|
export default Avatar;
|
|
@@ -1,34 +1,65 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Avatar as
|
|
1
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { Avatar as n } from "./styles.js";
|
|
3
|
+
import { createInitials as v } from "../../utils/user-util.js";
|
|
3
4
|
import c from "../Typography/Typography.js";
|
|
4
|
-
const
|
|
5
|
-
size:
|
|
6
|
-
shape:
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
5
|
+
const e = (a) => a.includes("[") && a.includes("]") ? a.split("]")[1].trim() : a, s = ({
|
|
6
|
+
size: a = 48,
|
|
7
|
+
shape: l = "circle",
|
|
8
|
+
children: m,
|
|
9
|
+
backgroundColor: r = "#00282B",
|
|
10
|
+
user: t = null
|
|
11
|
+
}) => {
|
|
12
|
+
if (console.log("Avatar", t), !t)
|
|
13
|
+
return /* @__PURE__ */ i(
|
|
14
|
+
n,
|
|
15
|
+
{
|
|
16
|
+
"data-testid": "avatar",
|
|
17
|
+
shape: l,
|
|
18
|
+
size: a,
|
|
19
|
+
alt: "Default Avatar",
|
|
20
|
+
style: { backgroundColor: r }
|
|
21
|
+
}
|
|
22
|
+
);
|
|
23
|
+
const o = `${e(t.first_name)} ${t.last_name}`;
|
|
24
|
+
if (t && !(t != null && t.image_url)) {
|
|
25
|
+
const f = {
|
|
26
|
+
first_name: e(t.first_name),
|
|
27
|
+
last_name: t.last_name
|
|
28
|
+
}, d = v(f);
|
|
29
|
+
return /* @__PURE__ */ i(
|
|
30
|
+
n,
|
|
31
|
+
{
|
|
32
|
+
"data-testid": "avatar",
|
|
33
|
+
shape: l,
|
|
34
|
+
size: a,
|
|
35
|
+
alt: o,
|
|
36
|
+
style: { backgroundColor: r },
|
|
37
|
+
children: /* @__PURE__ */ i(c, { variant: "body2", color: "white", style: { fontWeight: 600 }, children: d })
|
|
38
|
+
}
|
|
39
|
+
);
|
|
21
40
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
)
|
|
41
|
+
return typeof m == "string" ? /* @__PURE__ */ i(
|
|
42
|
+
n,
|
|
43
|
+
{
|
|
44
|
+
"data-testid": "avatar",
|
|
45
|
+
shape: l,
|
|
46
|
+
size: a,
|
|
47
|
+
src: t == null ? void 0 : t.image_url,
|
|
48
|
+
alt: o,
|
|
49
|
+
style: { backgroundColor: r },
|
|
50
|
+
children: /* @__PURE__ */ i(c, { variant: "body2", color: "white", style: { fontWeight: 600 }, children: m })
|
|
51
|
+
}
|
|
52
|
+
) : /* @__PURE__ */ i(
|
|
53
|
+
n,
|
|
54
|
+
{
|
|
55
|
+
"data-testid": "avatar",
|
|
56
|
+
shape: l,
|
|
57
|
+
size: a,
|
|
58
|
+
src: t == null ? void 0 : t.image_url,
|
|
59
|
+
alt: o
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
};
|
|
32
63
|
export {
|
|
33
|
-
|
|
64
|
+
s as default
|
|
34
65
|
};
|
|
@@ -3,5 +3,7 @@ import { default as Avatar } from '../Avatar';
|
|
|
3
3
|
declare const meta: Meta<typeof Avatar>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof Avatar>;
|
|
6
|
-
export declare const
|
|
7
|
-
export declare const
|
|
6
|
+
export declare const UserWithImage: Story;
|
|
7
|
+
export declare const SimpleFirstNameUserNoImage: Story;
|
|
8
|
+
export declare const UserWithComplexNameNoImage: Story;
|
|
9
|
+
export declare const UndefinedUser: Story;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../utils/styled.cjs"),e=(o,d)=>o==="small"?`${d.Size1}px ${d.Size1}px`:`${d.Size2}px ${d.Size2}px`,b=({colors:o,sizing:d,borderRadius:n,components:t},r,a,l
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../utils/styled.cjs"),e=(o,d)=>o==="small"?`${d.Size1}px ${d.Size1}px`:`${d.Size2}px ${d.Size2}px`,b=({colors:o,sizing:d,borderRadius:n,components:t},r,a,i,l)=>`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
@@ -9,12 +9,12 @@
|
|
|
9
9
|
letter-spacing: 0;
|
|
10
10
|
font-weight: 400;
|
|
11
11
|
border-width: 1px;
|
|
12
|
-
|
|
12
|
+
cursor: pointer;
|
|
13
13
|
width: auto; !important;
|
|
14
14
|
height: auto; !important;
|
|
15
15
|
|
|
16
|
-
background-color:${
|
|
17
|
-
padding: ${e(
|
|
16
|
+
background-color:${l?o[r].hover.backgroundColor:o[r][a].backgroundColor};
|
|
17
|
+
padding: ${e(i,d)};
|
|
18
18
|
|
|
19
19
|
box-shadow: ${r==="utility"?"0px 1px 2px 0px #00000026":"none"};
|
|
20
20
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { styled as u } from "../../utils/styled.js";
|
|
2
|
-
const b = (o, d) => o === "small" ? `${d.Size1}px ${d.Size1}px` : `${d.Size2}px ${d.Size2}px`, c = ({ colors: o, sizing: d, borderRadius: n, components: a }, r, i,
|
|
2
|
+
const b = (o, d) => o === "small" ? `${d.Size1}px ${d.Size1}px` : `${d.Size2}px ${d.Size2}px`, c = ({ colors: o, sizing: d, borderRadius: n, components: a }, r, i, t, l) => `
|
|
3
3
|
display: flex;
|
|
4
4
|
align-items: center;
|
|
5
5
|
justify-content: center;
|
|
@@ -10,12 +10,12 @@ const b = (o, d) => o === "small" ? `${d.Size1}px ${d.Size1}px` : `${d.Size2}px
|
|
|
10
10
|
letter-spacing: 0;
|
|
11
11
|
font-weight: 400;
|
|
12
12
|
border-width: 1px;
|
|
13
|
-
|
|
13
|
+
cursor: pointer;
|
|
14
14
|
width: auto; !important;
|
|
15
15
|
height: auto; !important;
|
|
16
16
|
|
|
17
|
-
background-color:${
|
|
18
|
-
padding: ${b(
|
|
17
|
+
background-color:${l ? o[r].hover.backgroundColor : o[r][i].backgroundColor};
|
|
18
|
+
padding: ${b(t, d)};
|
|
19
19
|
|
|
20
20
|
box-shadow: ${r === "utility" ? "0px 1px 2px 0px #00000026" : "none"};
|
|
21
21
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("../../utils/styled.cjs"),e=require("../../node_modules/antd/es/button/button.cjs"),i=(r,l,d,
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("../../utils/styled.cjs"),e=require("../../node_modules/antd/es/button/button.cjs"),i=(r,l,d,n)=>n&&(r==="normal"||r==="large")?`${d.Size2}px ${d.Size2}px`:n&&r==="small"?`${d.Size1}px ${d.Size1}px`:l==="utility"&&r==="small"?`${d.Size1_5}px ${d.Size2}px`:l==="utility"&&(r==="normal"||r==="large")?`${d.Size2_5}px ${d.Size3}px`:r==="small"?`${d.Size1_5}px ${d.Size4}px`:r==="normal"||r==="large"?`${d.Size2_5}px ${d.Size6}px`:`${d.Size2}px ${d.Size2}px`,c=r=>r==="normal"||r==="large"?"40px":r==="small"?"32px":"40px",x=({colors:r,sizing:l,borderRadius:d,components:n},o,a,t,u)=>(r[o][a].backgroundColor,`
|
|
2
2
|
&.ant-btn {
|
|
3
3
|
|
|
4
|
-
color: ${r[o][
|
|
4
|
+
color: ${r[o][a].color};
|
|
5
5
|
font-size: ${l.Size4}px;
|
|
6
6
|
line-height: ${l.Size6}px;
|
|
7
7
|
letter-spacing: 0;
|
|
@@ -10,17 +10,17 @@
|
|
|
10
10
|
line-height: 1 !important;
|
|
11
11
|
|
|
12
12
|
width: auto; !important;
|
|
13
|
-
height:
|
|
13
|
+
height: ${c(t)}; !important;
|
|
14
14
|
|
|
15
|
-
background-color: ${r[o][
|
|
15
|
+
background-color: ${r[o][a].backgroundColor};
|
|
16
16
|
padding: ${i(t,o,l,u)};
|
|
17
17
|
|
|
18
18
|
box-shadow: ${o==="utility"?"0px 1px 2px 0px #00000026":"none"};
|
|
19
19
|
|
|
20
20
|
border-radius: ${d.BorderRadiusMd}px;
|
|
21
|
-
gap: ${
|
|
21
|
+
gap: ${n.button.gap}px;
|
|
22
22
|
border-style: solid;
|
|
23
|
-
border-color: ${r[o][
|
|
23
|
+
border-color: ${r[o][a].borderColor};
|
|
24
24
|
|
|
25
25
|
transition: all 0.2s ease-in-out;
|
|
26
26
|
|
|
@@ -55,12 +55,12 @@
|
|
|
55
55
|
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
`),
|
|
58
|
+
`),f=(r,l,d,n,o)=>`
|
|
59
59
|
&.ant-btn {
|
|
60
60
|
font-family: 'Inter', sans-serif;
|
|
61
61
|
|
|
62
|
-
${
|
|
62
|
+
${x(r,l,d,o,n)}
|
|
63
63
|
}
|
|
64
|
-
`,
|
|
65
|
-
${({theme:r,$themeType:l,$state:d,children:
|
|
66
|
-
`;exports.Button=
|
|
64
|
+
`,p=b.styled(e)`
|
|
65
|
+
${({theme:r,$themeType:l,$state:d,children:n,$isIconButton:o,size:a})=>f(r,l,d,o,a)}
|
|
66
|
+
`;exports.Button=p;
|
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
import { styled as b } from "../../utils/styled.js";
|
|
2
|
-
import
|
|
3
|
-
const
|
|
2
|
+
import x from "../../node_modules/antd/es/button/button.js";
|
|
3
|
+
const i = (r, l, d, a) => a && (r === "normal" || r === "large") ? `${d.Size2}px ${d.Size2}px` : a && r === "small" ? `${d.Size1}px ${d.Size1}px` : l === "utility" && r === "small" ? `${d.Size1_5}px ${d.Size2}px` : l === "utility" && (r === "normal" || r === "large") ? `${d.Size2_5}px ${d.Size3}px` : r === "small" ? `${d.Size1_5}px ${d.Size4}px` : r === "normal" || r === "large" ? `${d.Size2_5}px ${d.Size6}px` : `${d.Size2}px ${d.Size2}px`, c = (r) => r === "normal" || r === "large" ? "40px" : r === "small" ? "32px" : "40px", e = ({ colors: r, sizing: l, borderRadius: d, components: a }, o, n, t, u) => (r[o][n].backgroundColor, `
|
|
4
4
|
&.ant-btn {
|
|
5
5
|
|
|
6
6
|
color: ${r[o][n].color};
|
|
7
|
-
font-size: ${
|
|
8
|
-
line-height: ${
|
|
7
|
+
font-size: ${l.Size4}px;
|
|
8
|
+
line-height: ${l.Size6}px;
|
|
9
9
|
letter-spacing: 0;
|
|
10
10
|
font-weight: 400;
|
|
11
11
|
border-width: 1px;
|
|
12
12
|
line-height: 1 !important;
|
|
13
13
|
|
|
14
14
|
width: auto; !important;
|
|
15
|
-
height:
|
|
15
|
+
height: ${c(t)}; !important;
|
|
16
16
|
|
|
17
17
|
background-color: ${r[o][n].backgroundColor};
|
|
18
|
-
padding: ${
|
|
18
|
+
padding: ${i(t, o, l, u)};
|
|
19
19
|
|
|
20
20
|
box-shadow: ${o === "utility" ? "0px 1px 2px 0px #00000026" : "none"};
|
|
21
21
|
|
|
22
22
|
border-radius: ${d.BorderRadiusMd}px;
|
|
23
|
-
gap: ${
|
|
23
|
+
gap: ${a.button.gap}px;
|
|
24
24
|
border-style: solid;
|
|
25
25
|
border-color: ${r[o][n].borderColor};
|
|
26
26
|
|
|
@@ -57,21 +57,21 @@ const x = (r, a, d, l) => l && (r === "normal" || r === "large") ? `${d.Size2}px
|
|
|
57
57
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
`),
|
|
60
|
+
`), f = (r, l, d, a, o) => `
|
|
61
61
|
&.ant-btn {
|
|
62
62
|
font-family: 'Inter', sans-serif;
|
|
63
63
|
|
|
64
|
-
${
|
|
64
|
+
${e(r, l, d, o, a)}
|
|
65
65
|
}
|
|
66
|
-
`,
|
|
67
|
-
${({ theme: r, $themeType:
|
|
66
|
+
`, S = b(x)`
|
|
67
|
+
${({ theme: r, $themeType: l, $state: d, children: a, $isIconButton: o, size: n }) => f(
|
|
68
68
|
r,
|
|
69
|
-
|
|
69
|
+
l,
|
|
70
70
|
d,
|
|
71
71
|
o,
|
|
72
72
|
n
|
|
73
73
|
)}
|
|
74
74
|
`;
|
|
75
75
|
export {
|
|
76
|
-
|
|
76
|
+
S as Button
|
|
77
77
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("./styles.cjs"),i=require("../../Button/UtilityButton.cjs"),s=({action:{onClick:t,label:e}})=>n.jsx(i,{onClick:t,style:{boxShadow:"0px 1px 2px 0px #00000026",width:"100%"},children:e}),c=({actions:t})=>t?n.jsx(r.ActionsContainer,{children:t.map((e,o)=>n.jsx(s,{action:e},o))}):null;exports.RowActions=c;
|
|
@@ -1,32 +1,17 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
const d = ({ action: { onClick: r, label: t } }) => /* @__PURE__ */ o(
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { ActionsContainer as i } from "./styles.js";
|
|
3
|
+
import p from "../../Button/UtilityButton.js";
|
|
4
|
+
const e = ({ action: { onClick: t, label: o } }) => /* @__PURE__ */ r(
|
|
6
5
|
p,
|
|
7
6
|
{
|
|
8
|
-
onClick:
|
|
7
|
+
onClick: t,
|
|
9
8
|
style: {
|
|
10
|
-
cursor: "pointer",
|
|
11
|
-
display: "100%",
|
|
12
|
-
alignItems: "center",
|
|
13
|
-
background: "#fff",
|
|
14
|
-
borderRadius: 4,
|
|
15
|
-
padding: 8,
|
|
16
9
|
boxShadow: "0px 1px 2px 0px #00000026",
|
|
17
|
-
width: "100%"
|
|
18
|
-
border: "1px solid #cbcbcb"
|
|
10
|
+
width: "100%"
|
|
19
11
|
},
|
|
20
|
-
children:
|
|
21
|
-
c,
|
|
22
|
-
{
|
|
23
|
-
variant: n.label1,
|
|
24
|
-
isFullWidth: !0,
|
|
25
|
-
children: t
|
|
26
|
-
}
|
|
27
|
-
)
|
|
12
|
+
children: o
|
|
28
13
|
}
|
|
29
|
-
),
|
|
14
|
+
), l = ({ actions: t }) => t ? /* @__PURE__ */ r(i, { children: t.map((o, n) => /* @__PURE__ */ r(e, { action: o }, n)) }) : null;
|
|
30
15
|
export {
|
|
31
|
-
|
|
16
|
+
l as RowActions
|
|
32
17
|
};
|
|
@@ -1,27 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../utils/styled.cjs"),t=e.styled.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
gap: 16px;
|
|
5
5
|
width: 100%;
|
|
6
6
|
padding: 0px 26px;
|
|
7
|
-
|
|
8
|
-
cursor: pointer;
|
|
9
|
-
display: flex;
|
|
10
|
-
align-items: center;
|
|
11
|
-
text-align: center;
|
|
12
|
-
background: #fff;
|
|
13
|
-
border: 1px solid #cbcbcb !important;
|
|
14
|
-
border-radius: 4px;
|
|
15
|
-
padding: 8px;
|
|
16
|
-
box-shadow: ${({theme:o})=>o.shadows.general[1]};
|
|
17
|
-
width: 100%;
|
|
18
|
-
border: none;
|
|
19
|
-
|
|
20
|
-
&:hover {
|
|
21
|
-
background: #fafafa;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
&:active {
|
|
25
|
-
background: #f0f0f0;
|
|
26
|
-
}
|
|
27
|
-
`;exports.ActionsContainer=e;exports.RowActionButton=n;
|
|
7
|
+
`;exports.ActionsContainer=t;
|
|
@@ -1,32 +1,11 @@
|
|
|
1
|
-
import { styled as
|
|
2
|
-
const
|
|
1
|
+
import { styled as i } from "../../../utils/styled.js";
|
|
2
|
+
const p = i.div`
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
gap: 16px;
|
|
6
6
|
width: 100%;
|
|
7
7
|
padding: 0px 26px;
|
|
8
|
-
`, e = o.button`
|
|
9
|
-
cursor: pointer;
|
|
10
|
-
display: flex;
|
|
11
|
-
align-items: center;
|
|
12
|
-
text-align: center;
|
|
13
|
-
background: #fff;
|
|
14
|
-
border: 1px solid #cbcbcb !important;
|
|
15
|
-
border-radius: 4px;
|
|
16
|
-
padding: 8px;
|
|
17
|
-
box-shadow: ${({ theme: n }) => n.shadows.general[1]};
|
|
18
|
-
width: 100%;
|
|
19
|
-
border: none;
|
|
20
|
-
|
|
21
|
-
&:hover {
|
|
22
|
-
background: #fafafa;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
&:active {
|
|
26
|
-
background: #f0f0f0;
|
|
27
|
-
}
|
|
28
8
|
`;
|
|
29
9
|
export {
|
|
30
|
-
|
|
31
|
-
e as RowActionButton
|
|
10
|
+
p as ActionsContainer
|
|
32
11
|
};
|
|
@@ -23,9 +23,6 @@ export declare const useTableWithControls: (tableConfig: UseTableConfig) => {
|
|
|
23
23
|
rowSelection: {
|
|
24
24
|
type: import('../Table').SelectionType;
|
|
25
25
|
onChange: (selectedRowKeys: React.Key[], selectedRows: Record<string, any>[]) => void;
|
|
26
|
-
getCheckboxProps: (record:
|
|
27
|
-
disabled: boolean;
|
|
28
|
-
name: any;
|
|
29
|
-
};
|
|
26
|
+
getCheckboxProps: (record: any) => unknown;
|
|
30
27
|
};
|
|
31
28
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),o=require("../../Badge/Badge.cjs"),a=e=>e&&e.replace(/([A-Z])/g," $1").replace(/^./,t=>t.toUpperCase()),c=[{key:"number",title:"
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),o=require("../../Badge/Badge.cjs"),a=e=>e&&e.replace(/([A-Z])/g," $1").replace(/^./,t=>t.toUpperCase()),c=[{key:"number",title:"Id",dataIndex:"number"},{key:"timeslot",title:"Timeslot",dataIndex:"timerange"},{key:"status",title:"Status",dataIndex:"status",render:e=>{const t={in_progress:"warning",scheduled:"generic",completed:"success"},r=e==="in_progress"?"in progress":e;return n.createElement(o,{label:a(r),state:t[e]})}},{key:"address",title:"Address",render:e=>{const{address:{nickname:t,address:r}}=e;return t?`${t} (${r})`:r}},{title:"Type",dataIndex:"job_subtype",render:e=>{const t={delivery:"info",pickup:"success"};return n.createElement(o,{label:a(e),state:t[e]})}}],s=c.map(e=>({...e}));s[1].sorter=!0;s[2].sorter=!0;s[4].sorter=!0;exports.mockColumns=c;exports.mockColumnsWithSort=s;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import a from "react";
|
|
2
2
|
import n from "../../Badge/Badge.js";
|
|
3
|
-
const o = (e) => e && e.replace(/([A-Z])/g, " $1").replace(/^./, (t) => t.toUpperCase()),
|
|
3
|
+
const o = (e) => e && e.replace(/([A-Z])/g, " $1").replace(/^./, (t) => t.toUpperCase()), d = [
|
|
4
4
|
{
|
|
5
5
|
key: "number",
|
|
6
|
-
title: "
|
|
6
|
+
title: "Id",
|
|
7
7
|
dataIndex: "number"
|
|
8
8
|
},
|
|
9
9
|
{
|
|
@@ -51,13 +51,13 @@ const o = (e) => e && e.replace(/([A-Z])/g, " $1").replace(/^./, (t) => t.toUppe
|
|
|
51
51
|
});
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
|
-
], s =
|
|
54
|
+
], s = d.map((e) => ({
|
|
55
55
|
...e
|
|
56
56
|
}));
|
|
57
57
|
s[1].sorter = !0;
|
|
58
58
|
s[2].sorter = !0;
|
|
59
59
|
s[4].sorter = !0;
|
|
60
60
|
export {
|
|
61
|
-
|
|
61
|
+
d as mockColumns,
|
|
62
62
|
s as mockColumnsWithSort
|
|
63
63
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),m=a=>({disabled:!1,name:a.id}),T=a=>{const[i,u]=t.useState(!0),{columns:s,filters:d=null,fetchUrl:S="/table/data",fetchOptions:n={method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(d)},selectionType:f="checkbox",simulateDelay:r=0,disableRowSelection:b=m}=a,[D,g]=t.useState([]),[h,c]=t.useState({dataSource:[],columns:[],error:null}),[y,p]=t.useState([]);t.useEffect(()=>{const o=async()=>{try{const l=(await(await fetch(S,n)).json()).data||[];g(l),c({dataSource:l,columns:s,error:null})}catch(e){console.error("Error fetching table data:",e),c({dataSource:[],columns:s,error:e instanceof Error?e:new Error(String(e))})}finally{u(!1)}};r>0?setTimeout(o,r):o()},[n]);const w=t.useCallback((o,e)=>{console.log("Row Selected:",o,e),p(e)},[]);return{...h,isLoading:i,rowSelection:{type:f,onChange:w,getCheckboxProps:b},selectedRows:y}};exports.useTable=T;
|
|
@@ -7,15 +7,14 @@ export type UseTableConfig = {
|
|
|
7
7
|
fetchOptions?: RequestInit;
|
|
8
8
|
selectionType?: SelectionType;
|
|
9
9
|
simulateDelay?: number;
|
|
10
|
+
disableRowSelection?: (record: any) => unknown;
|
|
10
11
|
};
|
|
11
12
|
export declare const useTable: <T extends Record<string, any>>(useTableConfig: any) => {
|
|
13
|
+
isLoading: boolean;
|
|
12
14
|
rowSelection: {
|
|
13
15
|
type: SelectionType;
|
|
14
16
|
onChange: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
|
|
15
|
-
getCheckboxProps: (record:
|
|
16
|
-
disabled: boolean;
|
|
17
|
-
name: any;
|
|
18
|
-
};
|
|
17
|
+
getCheckboxProps: (record: any) => unknown;
|
|
19
18
|
};
|
|
20
19
|
selectedRows: T[];
|
|
21
20
|
dataSource: T[];
|
|
@@ -1,93 +1,66 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
return 0;
|
|
14
|
-
});
|
|
15
|
-
if (e.field) {
|
|
16
|
-
const c = e.field;
|
|
17
|
-
return [...a].sort((i, r) => {
|
|
18
|
-
const n = i[c], o = r[c];
|
|
19
|
-
return e.order === "ascend" ? n < o ? -1 : n > o ? 1 : 0 : e.order === "descend" ? n < o ? 1 : n > o ? -1 : 0 : 0;
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
return [...a];
|
|
23
|
-
}, C = (a) => {
|
|
24
|
-
const {
|
|
25
|
-
columns: e,
|
|
26
|
-
filters: c = null,
|
|
27
|
-
fetchUrl: i = "/table/data",
|
|
28
|
-
fetchOptions: r = {
|
|
1
|
+
import { useState as o, useEffect as m, useCallback as D } from "react";
|
|
2
|
+
const R = (a) => ({
|
|
3
|
+
disabled: !1,
|
|
4
|
+
// Add your disable logic here
|
|
5
|
+
name: a.id
|
|
6
|
+
}), k = (a) => {
|
|
7
|
+
const [i, d] = o(!0), {
|
|
8
|
+
columns: n,
|
|
9
|
+
filters: u = null,
|
|
10
|
+
fetchUrl: f = "/table/data",
|
|
11
|
+
fetchOptions: s = {
|
|
29
12
|
method: "POST",
|
|
30
13
|
headers: {
|
|
31
14
|
"Content-Type": "application/json"
|
|
32
15
|
},
|
|
33
|
-
body: JSON.stringify(
|
|
16
|
+
body: JSON.stringify(u)
|
|
34
17
|
},
|
|
35
|
-
selectionType:
|
|
36
|
-
simulateDelay:
|
|
37
|
-
|
|
18
|
+
selectionType: S = "checkbox",
|
|
19
|
+
simulateDelay: r = 0,
|
|
20
|
+
disableRowSelection: h = R
|
|
21
|
+
} = a, [T, p] = o([]), [g, c] = o({
|
|
38
22
|
dataSource: [],
|
|
39
23
|
columns: [],
|
|
40
24
|
error: null
|
|
41
|
-
}), [
|
|
25
|
+
}), [w, b] = o([]);
|
|
42
26
|
m(() => {
|
|
43
|
-
|
|
27
|
+
const t = async () => {
|
|
44
28
|
try {
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
dataSource:
|
|
48
|
-
columns:
|
|
29
|
+
const l = (await (await fetch(f, s)).json()).data || [];
|
|
30
|
+
p(l), c({
|
|
31
|
+
dataSource: l,
|
|
32
|
+
columns: n,
|
|
49
33
|
error: null
|
|
50
34
|
});
|
|
51
|
-
} catch (
|
|
52
|
-
console.error("Error fetching table data:",
|
|
35
|
+
} catch (e) {
|
|
36
|
+
console.error("Error fetching table data:", e), c({
|
|
53
37
|
dataSource: [],
|
|
54
|
-
columns:
|
|
55
|
-
error:
|
|
38
|
+
columns: n,
|
|
39
|
+
error: e instanceof Error ? e : new Error(String(e))
|
|
56
40
|
});
|
|
41
|
+
} finally {
|
|
42
|
+
d(!1);
|
|
57
43
|
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
...d,
|
|
65
|
-
dataSource: t
|
|
66
|
-
}));
|
|
67
|
-
}, o);
|
|
68
|
-
},
|
|
69
|
-
[l]
|
|
70
|
-
);
|
|
71
|
-
const D = S(
|
|
72
|
-
(s, t) => {
|
|
73
|
-
console.log("Row Selected:", s, t), g(t);
|
|
44
|
+
};
|
|
45
|
+
r > 0 ? setTimeout(t, r) : t();
|
|
46
|
+
}, [s]);
|
|
47
|
+
const y = D(
|
|
48
|
+
(t, e) => {
|
|
49
|
+
console.log("Row Selected:", t, e), b(e);
|
|
74
50
|
},
|
|
75
51
|
[]
|
|
76
52
|
);
|
|
77
53
|
return {
|
|
78
|
-
...
|
|
54
|
+
...g,
|
|
55
|
+
isLoading: i,
|
|
79
56
|
rowSelection: {
|
|
80
|
-
type:
|
|
81
|
-
onChange:
|
|
82
|
-
getCheckboxProps:
|
|
83
|
-
disabled: !1,
|
|
84
|
-
// Add your disable logic here
|
|
85
|
-
name: s.id
|
|
86
|
-
})
|
|
57
|
+
type: S,
|
|
58
|
+
onChange: y,
|
|
59
|
+
getCheckboxProps: h
|
|
87
60
|
},
|
|
88
|
-
selectedRows:
|
|
61
|
+
selectedRows: w
|
|
89
62
|
};
|
|
90
63
|
};
|
|
91
64
|
export {
|
|
92
|
-
|
|
65
|
+
k as useTable
|
|
93
66
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=t=>{var n,c;if(!(t!=null&&t.first_name)||!(t!=null&&t.last_name))return"";const a=(n=t==null?void 0:t.first_name)==null?void 0:n.trim(),i=(c=t==null?void 0:t.last_name)==null?void 0:c.trim(),e=a.replace(/[^a-zA-Z]/g,""),l=i.replace(/[^a-zA-Z]/g,"");return a&&i?`${e.charAt(0).toUpperCase()}${l.charAt(0).toUpperCase()}`:""};exports.createInitials=o;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
const p = (t) => {
|
|
2
|
+
var n, c;
|
|
3
|
+
if (!(t != null && t.first_name) || !(t != null && t.last_name))
|
|
4
|
+
return "";
|
|
5
|
+
const a = (n = t == null ? void 0 : t.first_name) == null ? void 0 : n.trim(), i = (c = t == null ? void 0 : t.last_name) == null ? void 0 : c.trim(), m = a.replace(/[^a-zA-Z]/g, ""), o = i.replace(/[^a-zA-Z]/g, "");
|
|
6
|
+
return a && i ? `${m.charAt(0).toUpperCase()}${o.charAt(0).toUpperCase()}` : "";
|
|
7
|
+
};
|
|
8
|
+
export {
|
|
9
|
+
p as createInitials
|
|
10
|
+
};
|