1
1
import CategoryList from 'components/CategoryList/CategoryList.react' ;
2
2
import SidebarAction from 'components/Sidebar/SidebarAction' ;
3
- import TableHeader from 'components/Table/TableHeader.react' ;
4
3
import TableView from 'dashboard/TableView.react' ;
5
4
import Toolbar from 'components/Toolbar/Toolbar.react' ;
6
5
import Parse from 'parse' ;
7
6
import React from 'react' ;
8
7
import Notification from 'dashboard/Data/Browser/Notification.react' ;
9
- import Pill from 'components/Pill/Pill.react' ;
8
+ import Icon from 'components/Icon/Icon.react' ;
9
+ import DragHandle from 'components/DragHandle/DragHandle.react' ;
10
10
import CreateViewDialog from './CreateViewDialog.react' ;
11
11
import * as ViewPreferences from 'lib/ViewPreferences' ;
12
12
import generatePath from 'lib/generatePath' ;
13
13
import { withRouter } from 'lib/withRouter' ;
14
14
import subscribeTo from 'lib/subscribeTo' ;
15
15
import { ActionTypes as SchemaActionTypes } from 'lib/stores/SchemaStore' ;
16
+ import styles from './Views.scss' ;
16
17
17
- const BROWSER_LAST_LOCATION = 'brower_last_location' ;
18
18
19
19
export default
20
20
@subscribeTo ( 'Schema' , 'schema' )
@@ -95,11 +95,10 @@ class Views extends TableView {
95
95
. aggregate ( view . query , { useMasterKey : true } )
96
96
. then ( results => {
97
97
const columns = { } ;
98
+ const computeWidth = str =>
99
+ Math . min ( 100 , Math . max ( ( String ( str ) . length + 2 ) * 8 , 40 ) ) ;
98
100
results . forEach ( item => {
99
101
Object . keys ( item ) . forEach ( key => {
100
- if ( columns [ key ] ) {
101
- return ;
102
- }
103
102
const val = item [ key ] ;
104
103
let type = 'String' ;
105
104
if ( typeof val === 'number' ) {
@@ -119,13 +118,23 @@ class Views extends TableView {
119
118
type = 'Object' ;
120
119
}
121
120
}
122
- columns [ key ] = { type } ;
121
+ const content =
122
+ type === 'Pointer'
123
+ ? val . objectId
124
+ : type === 'Object'
125
+ ? JSON . stringify ( val )
126
+ : val ;
127
+ const width = computeWidth ( content || key ) ;
128
+ if ( ! columns [ key ] ) {
129
+ columns [ key ] = { type, width } ;
130
+ } else if ( width > columns [ key ] . width ) {
131
+ columns [ key ] . width = width ;
132
+ }
133
+ } ) ;
123
134
} ) ;
124
- } ) ;
125
- const colNames = Object . keys ( columns ) ;
126
- const width = colNames . length > 0 ? 100 / colNames . length : 0 ;
127
- const order = colNames . map ( name => ( { name, width } ) ) ;
128
- this . setState ( { data : results , order, columns } ) ;
135
+ const colNames = Object . keys ( columns ) ;
136
+ const order = colNames . map ( name => ( { name, width : columns [ name ] . width } ) ) ;
137
+ this . setState ( { data : results , order, columns } ) ;
129
138
} )
130
139
. catch ( error => {
131
140
this . showNote (
@@ -142,7 +151,7 @@ class Views extends TableView {
142
151
143
152
renderRow ( row ) {
144
153
return (
145
- < tr key = { JSON . stringify ( row ) } >
154
+ < tr key = { JSON . stringify ( row ) } className = { styles . tableRow } >
146
155
{ this . state . order . map ( ( { name, width } ) => {
147
156
const value = row [ name ] ;
148
157
const type = this . state . columns [ name ] ?. type ;
@@ -151,21 +160,21 @@ class Views extends TableView {
151
160
const id = value . objectId ;
152
161
const className = value . className ;
153
162
content = (
154
- < Pill
155
- value = { id }
156
- followClick = { true }
157
- onClick = { ( ) = >
158
- this . handlePointerClick ( { className , id } )
159
- }
160
- / >
163
+ < span
164
+ className = { styles . pointerLink }
165
+ onClick = { ( ) => this . handlePointerClick ( { className , id } ) }
166
+ >
167
+ { id }
168
+ < Icon name = "right-outline" width = { 12 } height = { 12 } fill = "#1669a1" />
169
+ </ span >
161
170
) ;
162
171
} else if ( type === 'Object' ) {
163
172
content = JSON . stringify ( value ) ;
164
173
} else {
165
174
content = String ( value ) ;
166
175
}
167
176
return (
168
- < td key = { name } style = { { width : width + '%' } } >
177
+ < td key = { name } className = { styles . cell } style = { { width } } >
169
178
{ content }
170
179
</ td >
171
180
) ;
@@ -174,11 +183,21 @@ class Views extends TableView {
174
183
) ;
175
184
}
176
185
186
+ handleResize ( index , delta ) {
187
+ this . setState ( ( { order } ) => {
188
+ const newOrder = [ ...order ] ;
189
+ const next = Math . max ( 40 , newOrder [ index ] . width + delta ) ;
190
+ newOrder [ index ] = { ...newOrder [ index ] , width : next } ;
191
+ return { order : newOrder } ;
192
+ } ) ;
193
+ }
194
+
177
195
renderHeaders ( ) {
178
- return this . state . order . map ( ( { name, width } ) => (
179
- < TableHeader key = { name } width = { width } >
196
+ return this . state . order . map ( ( { name, width } , i ) => (
197
+ < div key = { name } className = { styles . headerWrap } style = { { width } } >
180
198
{ name }
181
- </ TableHeader >
199
+ < DragHandle className = { styles . handle } onDrag = { delta => this . handleResize ( i , delta ) } />
200
+ </ div >
182
201
) ) ;
183
202
}
184
203
@@ -258,24 +277,6 @@ class Views extends TableView {
258
277
this . context ,
259
278
`browser/${ className } ?filters=${ encodeURIComponent ( filters ) } `
260
279
) ;
261
- try {
262
- const existing = JSON . parse (
263
- window . localStorage . getItem ( BROWSER_LAST_LOCATION )
264
- ) || [ ] ;
265
- const updated = existing . filter (
266
- e => e . appId !== this . context . applicationId
267
- ) ;
268
- updated . push ( {
269
- appId : this . context . applicationId ,
270
- location : path ,
271
- } ) ;
272
- window . localStorage . setItem (
273
- BROWSER_LAST_LOCATION ,
274
- JSON . stringify ( updated )
275
- ) ;
276
- } catch {
277
- // ignore write errors
278
- }
279
280
this . props . navigate ( path ) ;
280
281
}
281
282
0 commit comments