@ansible/ansible-ui-framework 0.0.338 → 0.0.339
Sign up to get free protection for your applications and to get access to all the features.
- package/docs/PageTableGuide.md +30 -30
- package/docs/assets/css/style.scss +3 -3
- package/package.json +1 -1
package/docs/PageTableGuide.md
CHANGED
@@ -13,8 +13,8 @@ const view = useView()
|
|
13
13
|
For different backends, the view can be wrapped to make a specific view hook for the API.
|
14
14
|
|
15
15
|
```tsx
|
16
|
-
export function
|
17
|
-
const view = useMyApiView<
|
16
|
+
export function Users() {
|
17
|
+
const view = useMyApiView<IUser>({ url: '/api/users' })
|
18
18
|
...
|
19
19
|
}
|
20
20
|
```
|
@@ -22,13 +22,13 @@ export function Persons() {
|
|
22
22
|
## Table Columns
|
23
23
|
|
24
24
|
```tsx
|
25
|
-
export function
|
26
|
-
const view = useMyApiView<
|
27
|
-
const tableColumns = useMemo<ITableColumn<
|
25
|
+
export function Users() {
|
26
|
+
const view = useMyApiView<IUser>({ url: '/api/users' })
|
27
|
+
const tableColumns = useMemo<ITableColumn<IUser>[]>(
|
28
28
|
() => [
|
29
29
|
{
|
30
30
|
header: 'Name',
|
31
|
-
cell: (
|
31
|
+
cell: (user) => <TextCell text={user.name} />,
|
32
32
|
sort: 'name',
|
33
33
|
},
|
34
34
|
],
|
@@ -43,13 +43,13 @@ export function Persons() {
|
|
43
43
|
The PageTable component takes in the properties from the view and shows a table for the view using the columns.
|
44
44
|
|
45
45
|
```tsx
|
46
|
-
export function
|
47
|
-
const view = useMyApiView<
|
48
|
-
const tableColumns = useMemo<ITableColumn<
|
46
|
+
export function Users() {
|
47
|
+
const view = useMyApiView<IUser>({ url: '/api/users' })
|
48
|
+
const tableColumns = useMemo<ITableColumn<IUser>[]>(
|
49
49
|
() => [
|
50
50
|
{
|
51
51
|
header: 'Name',
|
52
|
-
cell: (
|
52
|
+
cell: (user) => <TextCell text={user.name} />,
|
53
53
|
sort: 'name',
|
54
54
|
},
|
55
55
|
],
|
@@ -57,9 +57,9 @@ export function Persons() {
|
|
57
57
|
)
|
58
58
|
return (
|
59
59
|
<PageLayout>
|
60
|
-
<PageHeader title="
|
60
|
+
<PageHeader title="Users" />
|
61
61
|
<PageBody>
|
62
|
-
<PageTable<
|
62
|
+
<PageTable<IUser> tableColumns={tableColumns} {...view} />
|
63
63
|
</PageBody>
|
64
64
|
</PageLayout>
|
65
65
|
)
|
@@ -71,8 +71,8 @@ export function Persons() {
|
|
71
71
|
Filters are specified using IToolbarFilter. The key is used for url querystring persistence. The query is used by the view to make the API call with the filter.
|
72
72
|
|
73
73
|
```tsx
|
74
|
-
export function
|
75
|
-
const view = useMyApiView<
|
74
|
+
export function Users() {
|
75
|
+
const view = useMyApiView<IUser>({ url: '/api/users' })
|
76
76
|
const tableColumns = ...
|
77
77
|
const toolbarFilters = useMemo<IToolbarFilter[]>(
|
78
78
|
() => [
|
@@ -87,9 +87,9 @@ export function Persons() {
|
|
87
87
|
)
|
88
88
|
return (
|
89
89
|
<PageLayout>
|
90
|
-
<PageHeader title="
|
90
|
+
<PageHeader title="Users" />
|
91
91
|
<PageBody>
|
92
|
-
<PageTable<
|
92
|
+
<PageTable<IUser>
|
93
93
|
tableColumns={tableColumns}
|
94
94
|
toolbarFilters={toolbarFilters}
|
95
95
|
{...view} />
|
@@ -104,33 +104,33 @@ export function Persons() {
|
|
104
104
|
Toolbar actions are specified using ITypedAction.
|
105
105
|
|
106
106
|
```tsx
|
107
|
-
export function
|
108
|
-
const view = useMyApiView<
|
107
|
+
export function Users() {
|
108
|
+
const view = useMyApiView<IUser>({ url: '/api/users' })
|
109
109
|
const tableColumns = ...
|
110
110
|
const toolbarFilters = ...
|
111
|
-
const toolbarActions = useMemo<ITypedAction<
|
111
|
+
const toolbarActions = useMemo<ITypedAction<IUser>[]>(
|
112
112
|
() => [
|
113
113
|
{
|
114
114
|
type: TypedActionType.button,
|
115
115
|
variant: ButtonVariant.primary,
|
116
116
|
icon: PlusIcon,
|
117
|
-
label: 'Create
|
117
|
+
label: 'Create user',
|
118
118
|
onClick: () => alert("TODO"),
|
119
119
|
},
|
120
120
|
{
|
121
121
|
type: TypedActionType.bulk,
|
122
122
|
icon: TrashIcon,
|
123
|
-
label: 'Deleted selected
|
124
|
-
onClick: (
|
123
|
+
label: 'Deleted selected users',
|
124
|
+
onClick: (users) => alert("TODO"),
|
125
125
|
},
|
126
126
|
],
|
127
127
|
[]
|
128
128
|
)
|
129
129
|
return (
|
130
130
|
<PageLayout>
|
131
|
-
<PageHeader title="
|
131
|
+
<PageHeader title="Users" />
|
132
132
|
<PageBody>
|
133
|
-
<PageTable<
|
133
|
+
<PageTable<IUser>
|
134
134
|
tableColumns={tableColumns}
|
135
135
|
toolbarFilters={toolbarFilters}
|
136
136
|
toolbarActions={toolbarActions}
|
@@ -146,8 +146,8 @@ export function Persons() {
|
|
146
146
|
Row actions are specified using ITypedAction.
|
147
147
|
|
148
148
|
```tsx
|
149
|
-
export function
|
150
|
-
const view = useMyApiView<
|
149
|
+
export function Users() {
|
150
|
+
const view = useMyApiView<IUser>({ url: '/api/users' })
|
151
151
|
const tableColumns = ...
|
152
152
|
const toolbarFilters = ...
|
153
153
|
const toolbarActions = ...
|
@@ -155,17 +155,17 @@ export function Persons() {
|
|
155
155
|
() => [
|
156
156
|
{
|
157
157
|
icon: EditIcon,
|
158
|
-
label: 'Edit
|
159
|
-
onClick: (
|
158
|
+
label: 'Edit user',
|
159
|
+
onClick: (user) => alert("TODO"),
|
160
160
|
},
|
161
161
|
],
|
162
162
|
[t]
|
163
163
|
)
|
164
164
|
return (
|
165
165
|
<PageLayout>
|
166
|
-
<PageHeader title="
|
166
|
+
<PageHeader title="Users" />
|
167
167
|
<PageBody>
|
168
|
-
<PageTable<
|
168
|
+
<PageTable<IUser>
|
169
169
|
tableColumns={tableColumns}
|
170
170
|
toolbarFilters={toolbarFilters}
|
171
171
|
toolbarActions={toolbarActions}
|
@@ -68,7 +68,7 @@ h4 {
|
|
68
68
|
}
|
69
69
|
|
70
70
|
.highlight .nx {
|
71
|
-
color:
|
71
|
+
color: #fffd;
|
72
72
|
}
|
73
73
|
|
74
74
|
.highlight .k {
|
@@ -80,7 +80,7 @@ h4 {
|
|
80
80
|
}
|
81
81
|
|
82
82
|
.highlight .o {
|
83
|
-
color:
|
83
|
+
color: #fffb;
|
84
84
|
}
|
85
85
|
|
86
86
|
.highlight .s1 {
|
@@ -92,7 +92,7 @@ h4 {
|
|
92
92
|
}
|
93
93
|
|
94
94
|
.highlight .si {
|
95
|
-
color: #
|
95
|
+
color: #1899f5;
|
96
96
|
}
|
97
97
|
|
98
98
|
.highlight .err {
|