This repository has been archived by the owner on Feb 22, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
/
App.tsx
111 lines (104 loc) · 2.45 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React, { CSSProperties, Ref, ReactNode, useMemo } from "react";
import "./styles.css";
import LineUpLite, {
asTextColumn,
asCategoricalColumn,
asNumberBoxPlotColumn,
asCategoricalSetColumn,
LineUpLiteColumn,
featureDefault,
featureResizeColumns,
actionIconsRemixicon,
featureFlexLayout,
LineUpLiteStateContextProvider,
LineUpLitePanel,
LineUpLiteComponentLike
} from "@lineup-lite/table";
/* import {
defaultDarkColorScale,
defaultColorScale
} from "@lineup-lite/components"; */
import "@lineup-lite/table/dist/table.css";
import FlipMove from "react-flip-move";
import { data, Row } from "./data";
const BodyWrapper: LineUpLiteComponentLike = ({
children,
style,
ref,
...rest
}: {
children?: ReactNode;
style?: CSSProperties;
ref?: string | Ref<HTMLElement>;
}) => {
return (
<FlipMove
enterAnimation="fade"
leaveAnimation="fade"
{...rest}
ref={ref as any}
style={style as any}
>
{children}
</FlipMove>
);
};
function Table({ isDarkTheme }: { isDarkTheme: boolean }) {
const columns: LineUpLiteColumn<Row>[] = useMemo(() => [
asTextColumn<Row>("packageName"),
asCategoricalSetColumn<Row>("dependentModels", {
categories: ["wm", "medics", "selimsef", "eighteen", "boken", "ntech"]
}),
asNumberBoxPlotColumn<Row>("snykHealthScore", {}),
asCategoricalColumn<Row>("packageMaintenance", {
categories: ["Unfunded", "Funded"]
})
]);
const features = useMemo(
() => [featureResizeColumns, featureDefault<Row>(), featureFlexLayout],
[]
);
const icons = useMemo(() => actionIconsRemixicon(), []);
const components = useMemo(
() => ({
tbody: BodyWrapper
}),
[]
);
const state = useMemo(
() =>
({
sortBy: [
{
id: "dependentModels",
desc: true
}
]
} as any),
[]
);
return (
<LineUpLiteStateContextProvider>
<div className="root">
<div className="lineup">
<LineUpLite<Row>
data={data}
columns={columns}
features={features}
icons={icons}
components={components}
initialState={state}
/>
</div>
<LineUpLitePanel className="side-panel" icons={icons} />
</div>
</LineUpLiteStateContextProvider>
);
}
export default function App(): JSX.Element {
return (
<div className="App">
<Table />
</div>
);
}