form-craft-package 1.9.3-dev.0 → 1.9.4-dev.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/package.json
CHANGED
|
@@ -1,56 +1,82 @@
|
|
|
1
|
-
import { Col, Row, Spin } from 'antd'
|
|
1
|
+
import { Col, Row, Spin, Grid } from 'antd'
|
|
2
2
|
import SkeletonBlock from '.'
|
|
3
3
|
import SectionPanel from '../section-panel'
|
|
4
|
+
import { memo } from 'react'
|
|
5
|
+
|
|
6
|
+
const { useBreakpoint } = Grid
|
|
7
|
+
|
|
8
|
+
function FormDataListSkeleton_Details() {
|
|
9
|
+
const screens = useBreakpoint()
|
|
4
10
|
|
|
5
|
-
export default function FormDataListSkeleton_Details() {
|
|
6
11
|
return (
|
|
7
12
|
<Row justify="center" className="mt-10">
|
|
8
|
-
<Col
|
|
13
|
+
<Col xs={24} md={18} xl={14} xxl={12}>
|
|
9
14
|
<SectionPanel
|
|
10
15
|
className="border"
|
|
11
16
|
header={{
|
|
12
17
|
title: (
|
|
13
18
|
<div className="flex items-center gap-2 p-3">
|
|
14
|
-
<SkeletonBlock width="150px" />
|
|
15
|
-
<SkeletonBlock width=
|
|
19
|
+
<SkeletonBlock width="w-[150px]" />
|
|
20
|
+
<SkeletonBlock width="w-[32px]" height={32} radius={10} />
|
|
16
21
|
</div>
|
|
17
22
|
),
|
|
18
|
-
action: (
|
|
23
|
+
action: !screens.xs && (
|
|
19
24
|
<div className="pr-3">
|
|
20
|
-
<SkeletonBlock width="150px" />
|
|
25
|
+
<SkeletonBlock width="w-[150px]" />
|
|
21
26
|
</div>
|
|
22
27
|
),
|
|
23
28
|
}}
|
|
24
29
|
>
|
|
25
30
|
<div className="p-3 border-t space-y-4">
|
|
26
31
|
<Row gutter={[20, 0]}>
|
|
27
|
-
<Col
|
|
28
|
-
|
|
32
|
+
<Col xs={24} sm={12}>
|
|
33
|
+
{field}
|
|
34
|
+
</Col>
|
|
35
|
+
<Col xs={0} sm={12}>
|
|
36
|
+
{field}
|
|
37
|
+
</Col>
|
|
29
38
|
</Row>
|
|
30
39
|
<Row gutter={[20, 0]}>
|
|
31
|
-
<Col
|
|
32
|
-
|
|
40
|
+
<Col xs={24} sm={12}>
|
|
41
|
+
{field}
|
|
42
|
+
</Col>
|
|
43
|
+
<Col xs={0} sm={12}>
|
|
44
|
+
{field}
|
|
45
|
+
</Col>
|
|
33
46
|
</Row>
|
|
34
47
|
<div className="flex items-center justify-center gap-2 text-16 italic text-primary my-2">
|
|
35
|
-
<Spin
|
|
48
|
+
<Spin /> Loading layout & fetching data..
|
|
36
49
|
</div>
|
|
37
50
|
<Row gutter={[20, 0]}>
|
|
38
|
-
<Col
|
|
39
|
-
|
|
51
|
+
<Col xs={24} sm={12}>
|
|
52
|
+
{field}
|
|
53
|
+
</Col>
|
|
54
|
+
<Col xs={0} sm={12}>
|
|
55
|
+
{field}
|
|
56
|
+
</Col>
|
|
40
57
|
</Row>
|
|
41
58
|
<Row gutter={[20, 0]}>
|
|
42
|
-
<Col
|
|
43
|
-
|
|
44
|
-
|
|
59
|
+
<Col xs={24} sm={12} md={8}>
|
|
60
|
+
{field}
|
|
61
|
+
</Col>
|
|
62
|
+
<Col xs={0} sm={12} md={8}>
|
|
63
|
+
{field}
|
|
64
|
+
</Col>
|
|
65
|
+
<Col xs={0} sm={12} md={8}>
|
|
66
|
+
{field}
|
|
67
|
+
</Col>
|
|
45
68
|
</Row>
|
|
46
69
|
<Row gutter={[20, 0]}>
|
|
47
|
-
<Col
|
|
48
|
-
|
|
49
|
-
|
|
70
|
+
<Col xs={24} sm={12} md={8}>
|
|
71
|
+
{field}
|
|
72
|
+
</Col>
|
|
73
|
+
<Col xs={0} sm={12} md={8}>
|
|
74
|
+
{field}
|
|
75
|
+
</Col>
|
|
76
|
+
<Col xs={0} sm={12} md={8}>
|
|
77
|
+
{field}
|
|
78
|
+
</Col>
|
|
50
79
|
</Row>
|
|
51
|
-
<div className="flex justify-end">
|
|
52
|
-
<SkeletonBlock width={200} />
|
|
53
|
-
</div>
|
|
54
80
|
</div>
|
|
55
81
|
</SectionPanel>
|
|
56
82
|
</Col>
|
|
@@ -60,7 +86,9 @@ export default function FormDataListSkeleton_Details() {
|
|
|
60
86
|
|
|
61
87
|
const field = (
|
|
62
88
|
<div className="flex flex-col gap-1">
|
|
63
|
-
<SkeletonBlock width=
|
|
64
|
-
<SkeletonBlock width="
|
|
89
|
+
<SkeletonBlock width="w-[80px]" height={14} />
|
|
90
|
+
<SkeletonBlock width="w-full" />
|
|
65
91
|
</div>
|
|
66
92
|
)
|
|
93
|
+
|
|
94
|
+
export default memo(FormDataListSkeleton_Details)
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
export default function SkeletonBlock({
|
|
2
2
|
height = 32,
|
|
3
|
-
width = '
|
|
3
|
+
width = '',
|
|
4
4
|
radius = 4,
|
|
5
5
|
}: {
|
|
6
6
|
height?: number
|
|
7
7
|
width?: number | string
|
|
8
8
|
radius?: number | string
|
|
9
9
|
}) {
|
|
10
|
-
return <div style={{ height,
|
|
10
|
+
return <div style={{ height, borderRadius: radius }} className={`skeleton-loader ${width}`} />
|
|
11
11
|
}
|
|
@@ -1,26 +1,32 @@
|
|
|
1
|
+
import { Grid } from 'antd'
|
|
1
2
|
import SkeletonBlock from '.'
|
|
3
|
+
import { memo } from 'react'
|
|
4
|
+
|
|
5
|
+
const { useBreakpoint } = Grid
|
|
6
|
+
|
|
7
|
+
function FormDataListSkeleton_Table({ small = false }: { small?: boolean }) {
|
|
8
|
+
const screens = useBreakpoint()
|
|
2
9
|
|
|
3
|
-
export default function FormDataListSkeleton_Table({ small = false }: { small?: boolean }) {
|
|
4
10
|
return (
|
|
5
11
|
<>
|
|
6
12
|
<div className={`flex items-center justify-between rounded-md mb-2`}>
|
|
7
|
-
<SkeletonBlock width="
|
|
13
|
+
<SkeletonBlock width="xs:w-[100px] sm:w-[150px]" height={small ? 20 : undefined} />
|
|
8
14
|
<div className="flex items-center gap-2">
|
|
9
|
-
<SkeletonBlock width="150px" height={small ? 20 : undefined} />
|
|
10
|
-
<SkeletonBlock width="150px" height={small ? 20 : undefined} />
|
|
11
|
-
<SkeletonBlock width="150px" height={small ? 20 : undefined} />
|
|
15
|
+
<SkeletonBlock width="xs:w-[100px] sm:w-[150px]" height={small ? 20 : undefined} />
|
|
16
|
+
<SkeletonBlock width="xs:w-[0px] sm:w-[150px]" height={small ? 20 : undefined} />
|
|
17
|
+
{!screens.xs && <SkeletonBlock width="xs:w-[0px] sm:w-[150px]" height={small ? 20 : undefined} />}
|
|
12
18
|
</div>
|
|
13
19
|
</div>
|
|
14
20
|
<div className="border border-[#d4d4d8] rounded bg-white">
|
|
15
|
-
<div className="flex justify-between p-3 border-b border-[#d4d4d8]">
|
|
16
|
-
{[...Array(5)].map((_, elIdx) => (
|
|
21
|
+
<div className="flex justify-between gap-2 p-3 border-b border-[#d4d4d8]">
|
|
22
|
+
{[...Array(screens.xs ? 2 : small ? 4 : 5)].map((_, elIdx) => (
|
|
17
23
|
<div key={elIdx}>
|
|
18
|
-
<SkeletonBlock height={small ? 15 : 20} width="
|
|
24
|
+
<SkeletonBlock height={small ? 15 : 20} width="xs:w-[100px] sm:w-[100px]" />
|
|
19
25
|
</div>
|
|
20
26
|
))}
|
|
21
27
|
</div>
|
|
22
28
|
<div className="px-3 py-2 flex flex-col gap-3">
|
|
23
|
-
{[...Array(5)].map((_, elIdx) => (
|
|
29
|
+
{[...Array(small ? 3 : 5)].map((_, elIdx) => (
|
|
24
30
|
<SkeletonBlock key={elIdx} height={small ? 20 : undefined} />
|
|
25
31
|
))}
|
|
26
32
|
</div>
|
|
@@ -28,3 +34,5 @@ export default function FormDataListSkeleton_Table({ small = false }: { small?:
|
|
|
28
34
|
</>
|
|
29
35
|
)
|
|
30
36
|
}
|
|
37
|
+
|
|
38
|
+
export default memo(FormDataListSkeleton_Table)
|