Skip to content

Commit 48754d9

Browse files
apuntovaniniapuntovanini
committed
docs(changeset): Small layout fixes to data
1 parent 0412e7f commit 48754d9

File tree

13 files changed

+79
-237
lines changed

13 files changed

+79
-237
lines changed

‎.changeset/empty-rockets-brake.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
'@uidu/calendar': patch
3+
'@uidu/data-manager': patch
4+
'@uidu/data-views': patch
5+
'@uidu/gallery': patch
6+
'@uidu/list': patch
7+
'@uidu/table': patch
8+
---
9+
10+
Small layout fixes to data

‎packages/data/calendar/src/components/Toolbar.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ export default class Toolbar extends PureComponent<any> {
99
const { messages } = localizer;
1010

1111
return (
12-
<ShellHeader className="border-top justify-content-between px-3 px-xl-4">
12+
<ShellHeader className="justify-content-between py-3 h-auto">
1313
<div className="d-flex align-items-center">
1414
<button
1515
type="button"
1616
className="btn btn-sm d-flex align-items-center btn-light"
17-
onClick={e => {
17+
onClick={(e) => {
1818
e.preventDefault();
1919
this.navigate('TODAY');
2020
}}
@@ -25,7 +25,7 @@ export default class Toolbar extends PureComponent<any> {
2525
<button
2626
type="button"
2727
className="btn btn-sm d-flex align-items-center px-2"
28-
onClick={e => {
28+
onClick={(e) => {
2929
e.preventDefault();
3030
this.navigate('PREV');
3131
}}
@@ -35,7 +35,7 @@ export default class Toolbar extends PureComponent<any> {
3535
<button
3636
type="button"
3737
className="btn btn-sm d-flex align-items-center px-2"
38-
onClick={e => {
38+
onClick={(e) => {
3939
e.preventDefault();
4040
this.navigate('NEXT');
4141
}}
@@ -52,11 +52,11 @@ export default class Toolbar extends PureComponent<any> {
5252
);
5353
}
5454

55-
navigate = action => {
55+
navigate = (action) => {
5656
this.props.onNavigate(action);
5757
};
5858

59-
view = view => {
59+
view = (view) => {
6060
this.props.onView(view);
6161
};
6262

@@ -71,15 +71,15 @@ export default class Toolbar extends PureComponent<any> {
7171
role="group"
7272
aria-label="Switch calendar view"
7373
>
74-
{viewNames.map(name => (
74+
{viewNames.map((name) => (
7575
<button
7676
className={classNames('btn btn-sm', {
7777
'btn-light': view !== name,
7878
'btn-primary': view === name,
7979
})}
8080
type="button"
8181
key={name}
82-
onClick={e => {
82+
onClick={(e) => {
8383
e.preventDefault();
8484
this.view(name);
8585
}}

‎packages/data/data-manager/examples/Basic.tsx

+21-171
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,9 @@ const dataViews = [
4747
id: 0,
4848
name: 'Tutti i contatti',
4949
kind: 'table',
50+
state: {
51+
hiddenColumns: ['cover', 'avatar'],
52+
},
5053
fields: [
5154
'id',
5255
'member',
@@ -59,188 +62,35 @@ const dataViews = [
5962
'createdAt',
6063
'addField',
6164
],
62-
state: [
63-
{
64-
colId: 'id',
65-
hide: false,
66-
aggFunc: null,
67-
width: 60,
68-
pivotIndex: null,
69-
pinned: 'left',
70-
rowGroupIndex: null,
71-
},
72-
{
73-
colId: 'cover',
74-
hide: true,
75-
aggFunc: null,
76-
width: 200,
77-
pivotIndex: null,
78-
pinned: null,
79-
rowGroupIndex: null,
80-
},
81-
{
82-
colId: 'avatar',
83-
hide: true,
84-
aggFunc: null,
85-
width: 200,
86-
pivotIndex: null,
87-
pinned: null,
88-
rowGroupIndex: null,
89-
},
90-
{
91-
colId: 'member',
92-
hide: false,
93-
aggFunc: null,
94-
width: 359,
95-
pivotIndex: null,
96-
pinned: 'left',
97-
rowGroupIndex: null,
98-
},
99-
{
100-
colId: 'displayName',
101-
hide: true,
102-
aggFunc: null,
103-
width: 200,
104-
pivotIndex: null,
105-
pinned: null,
106-
rowGroupIndex: null,
107-
},
108-
{
109-
colId: 'amount',
110-
hide: false,
111-
aggFunc: 'sum',
112-
width: 224,
113-
pivotIndex: null,
114-
pinned: null,
115-
rowGroupIndex: null,
116-
},
117-
{
118-
colId: 'country',
119-
hide: false,
120-
aggFunc: null,
121-
width: 369,
122-
pivotIndex: null,
123-
pinned: null,
124-
rowGroupIndex: null,
125-
},
126-
{
127-
colId: 'percent',
128-
hide: true,
129-
aggFunc: 'avg',
130-
width: 200,
131-
pivotIndex: null,
132-
pinned: null,
133-
rowGroupIndex: null,
134-
},
135-
{
136-
colId: 'createdAt',
137-
hide: false,
138-
aggFunc: null,
139-
width: 211,
140-
pivotIndex: null,
141-
pinned: null,
142-
rowGroupIndex: null,
143-
},
144-
{
145-
colId: 'updatedAt',
146-
hide: true,
147-
aggFunc: null,
148-
width: 200,
149-
pivotIndex: null,
150-
pinned: null,
151-
rowGroupIndex: null,
152-
},
153-
{
154-
colId: 'gender',
155-
hide: false,
156-
aggFunc: null,
157-
width: 162,
158-
pivotIndex: null,
159-
pinned: null,
160-
rowGroupIndex: null,
161-
},
162-
{
163-
colId: 'firstName',
164-
hide: false,
165-
aggFunc: null,
166-
width: 177,
167-
pivotIndex: null,
168-
pinned: null,
169-
rowGroupIndex: null,
170-
},
171-
{
172-
colId: 'donationCampaign',
173-
hide: true,
174-
aggFunc: null,
175-
width: 200,
176-
pivotIndex: null,
177-
pinned: null,
178-
rowGroupIndex: null,
179-
},
180-
{
181-
colId: 'phone',
182-
hide: false,
183-
aggFunc: null,
184-
width: 288,
185-
pivotIndex: null,
186-
pinned: null,
187-
rowGroupIndex: null,
188-
},
189-
{
190-
colId: 'paymentMethod',
191-
hide: false,
192-
aggFunc: null,
193-
width: 227,
194-
pivotIndex: null,
195-
pinned: null,
196-
rowGroupIndex: null,
197-
},
198-
{
199-
colId: 'custom-field-1',
200-
hide: true,
201-
aggFunc: null,
202-
width: 200,
203-
pivotIndex: null,
204-
pinned: null,
205-
rowGroupIndex: null,
206-
},
207-
{
208-
colId: 'addField',
209-
hide: false,
210-
aggFunc: null,
211-
width: 140,
212-
pivotIndex: null,
213-
pinned: null,
214-
rowGroupIndex: null,
215-
},
216-
],
217-
filterModel: null,
21865
},
21966
{
22067
id: 1,
22168
name: 'Bigger donations',
22269
kind: 'table',
223-
fields: [
224-
'country',
225-
'paymentMethod',
226-
'member',
227-
'amount',
228-
'firstName',
229-
'gender',
230-
'phone',
231-
'addField',
232-
'createdAt',
233-
],
234-
// groupers: [{ colId: 'country' }],
235-
sorters: [{ colId: 'amount', sort: 'desc' }],
70+
state: {
71+
hiddenColumns: ['cover'],
72+
sortBy: [{ id: 'amount', desc: true }],
73+
},
23674
filterModel: { amount: { type: 'greaterThan', filter: 100 } },
23775
},
23876
{
23977
id: 2,
24078
name: 'Galleria contatti',
24179
kind: 'gallery',
242-
fields: ['avatar', 'cover', 'member', 'amount'],
243-
sorters: [{ colId: 'amount', sort: 'desc' }],
80+
state: {
81+
hiddenColumns: [
82+
'displayName',
83+
'firstName',
84+
'country',
85+
'percent',
86+
'phone',
87+
'createdAt',
88+
'updatedAt',
89+
'paymentMethod',
90+
'custom-field-1',
91+
],
92+
sortBy: [{ id: 'amount', desc: true }],
93+
},
24494
},
24595
{
24696
id: 3,

‎packages/data/data-manager/src/components/DataCard.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ export default class DataCard extends PureComponent<any> {
4343
key={item.id}
4444
>
4545
<div className="">
46-
{/* <ItemHeader cover={cover} avatar={avatar} item={item} /> */}
4746
{/* {primary && (
4847
<div
4948
className="card-header text-truncate border-bottom-0"

‎packages/data/data-manager/src/components/DataManager.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ export default function DataManager({
104104
defaultColumn,
105105
initialState: {
106106
pageSize: 100,
107+
...(currentView.state || {}),
107108
},
108109
useControlledState: (state) => {
109110
return React.useMemo(

‎packages/data/data-manager/src/components/DataView.tsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export default class DataView extends PureComponent<any> {
149149
<LoadableCalendar fallback={<ShellBodyWithSpinner />}>
150150
{({ default: Calendar }) => {
151151
return (
152-
<div className="container h-100 py-3">
152+
<div className="container h-100">
153153
<Calendar
154154
{...viewProps.calendar}
155155
onItemClick={onItemClick}
@@ -219,9 +219,7 @@ export default class DataView extends PureComponent<any> {
219219
{...viewProps.list}
220220
tableInstance={tableInstance}
221221
onItemClick={onItemClick}
222-
rowData={data.map((datum) => ({
223-
data: datum.data,
224-
}))}
222+
rowData={data}
225223
columnDefs={columns}
226224
/>
227225
)}
@@ -240,8 +238,6 @@ export default class DataView extends PureComponent<any> {
240238
onItemClick={onItemClick}
241239
rowData={data}
242240
columnDefs={columns}
243-
sorters={sorters}
244-
filterModel={filterModel || {}}
245241
/>
246242
)}
247243
</LoadableGallery>

‎packages/data/data-views/src/components/list/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import loadable from '@loadable/component';
22
import { Configurator, Filterer, Grouper, Sorter } from '@uidu/data-controls';
33
import React from 'react';
4-
import { AlignJustify, EyeOff, List as ListIcon } from 'react-feather';
4+
import { EyeOff, List as ListIcon } from 'react-feather';
55
import { FormattedMessage } from 'react-intl';
66
import { DataViewKind } from '../../types';
77

‎packages/data/gallery/src/components/Item.tsx

+4-7
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const ItemFields = styled.dl`
1515

1616
export default class Item extends PureComponent<any> {
1717
render() {
18-
const { item, primary, cover, avatar, row } = this.props;
18+
const { item, primary, row } = this.props;
1919

2020
if (!item) {
2121
return null;
@@ -31,7 +31,8 @@ export default class Item extends PureComponent<any> {
3131
cell.column.viewType !== 'addField',
3232
);
3333

34-
console.log(cover);
34+
const cover = row.cells.find((cell) => cell.column.viewType === 'cover');
35+
const avatar = row.cells.find((cell) => cell.column.viewType === 'avatar');
3536

3637
return (
3738
<>
@@ -43,11 +44,7 @@ export default class Item extends PureComponent<any> {
4344
return (
4445
<ItemField
4546
cell={cell}
46-
// column={column}
47-
// sorters={sorters}
48-
// filterModel={filterModel}
49-
// item={row}
50-
// key={`${item.id}-${column.field}-name`}
47+
key={`${item.id}-${cell.column.id}-name`}
5148
/>
5249
);
5350
})}

0 commit comments

Comments
 (0)