diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js index 0408b6ebc0..e63a9a208e 100644 --- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js +++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js @@ -14,12 +14,16 @@ import { DndProvider } from 'react-dnd' export default class DataBrowserHeaderBar extends React.Component { render() { - let { headers, onResize, selectAll, onAddColumn, updateOrdering, readonly, preventSchemaEdits } = this.props; + let { headers, onResize, selectAll, onAddColumn, updateOrdering, readonly, preventSchemaEdits, selected } = this.props; let elements = [ - // Note: bulk checkbox is disabled as all rows are selected (not just visible ones due to current lazy loading implementation) - // TODO: add bulk checking only visible rows
- {readonly ? null : selectAll(e.target.checked)} />} + {readonly + ? null + : selectAll(e.target.checked)} /> + }
]; diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss index be4c3dc317..2f21ff4c88 100644 --- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss +++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss @@ -64,7 +64,3 @@ margin: 0 -4px; cursor: ew-resize; } - -.disabled { - cursor: not-allowed; -} diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js index b41a7b2739..b4e7bcd284 100644 --- a/src/dashboard/Data/Browser/Browser.react.js +++ b/src/dashboard/Data/Browser/Browser.react.js @@ -37,6 +37,9 @@ import { Helmet } from 'react-helmet'; import PropTypes from 'lib/PropTypes'; import ParseApp from 'lib/ParseApp'; +// The initial and max amount of rows fetched by lazy loading +const MAX_ROWS_FETCHED = 200; + export default @subscribeTo('Schema', 'schema') class Browser extends DashboardView { @@ -337,7 +340,7 @@ class Browser extends DashboardView { query.ascending(field) } - query.limit(200); + query.limit(MAX_ROWS_FETCHED); let promise = query.find({ useMasterKey: true }); let isUnique = false; @@ -374,7 +377,7 @@ class Browser extends DashboardView { } else { delete filteredCounts[source]; } - this.setState({ data: data, filters, lastMax: 200 , filteredCounts: filteredCounts}); + this.setState({ data: data, filters, lastMax: MAX_ROWS_FETCHED , filteredCounts: filteredCounts}); } async fetchRelation(relation, filters = new List()) { @@ -386,7 +389,7 @@ class Browser extends DashboardView { selection: {}, data, filters, - lastMax: 200, + lastMax: MAX_ROWS_FETCHED, }); } @@ -429,14 +432,16 @@ class Browser extends DashboardView { query.lessThan('createdAt', this.state.data[this.state.data.length - 1].get('createdAt')); } query.addDescending('createdAt'); - query.limit(200); + query.limit(MAX_ROWS_FETCHED); query.find({ useMasterKey: true }).then((nextPage) => { if (className === this.props.params.className) { - this.setState((state) => ({ data: state.data.concat(nextPage)})); + this.setState((state) => ({ + data: state.data.concat(nextPage) + })); } }); - this.setState({ lastMax: this.state.lastMax + 200 }); + this.setState({ lastMax: this.state.lastMax + MAX_ROWS_FETCHED }); } updateFilters(filters) { @@ -587,7 +592,7 @@ class Browser extends DashboardView { this.state.counts[className] = 0; this.setState({ data: [], - lastMax: 200, + lastMax: MAX_ROWS_FETCHED, selection: {}, }); } @@ -640,7 +645,14 @@ class Browser extends DashboardView { this.state.data.splice(indexes[i] - i, 1); } this.state.counts[className] -= indexes.length; - this.forceUpdate(); + + // If after deletion, the remaining elements on the table is lesser than the maximum allowed elements + // we fetch more data to fill the table + if (this.state.data.length < MAX_ROWS_FETCHED) { + this.prefetchData(this.props, this.context); + } else { + this.forceUpdate(); + } } }, (error) => { let errorDeletingNote = null; @@ -669,9 +681,6 @@ class Browser extends DashboardView { selectRow(id, checked) { this.setState(({ selection }) => { - if (id === '*') { - return { selection: checked ? { '*': true } : {} }; - } if (checked) { selection[id] = true; } else { diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js index 9ba3584252..4f0af38a7a 100644 --- a/src/dashboard/Data/Browser/BrowserTable.react.js +++ b/src/dashboard/Data/Browser/BrowserTable.react.js @@ -23,8 +23,6 @@ const ROW_HEIGHT = 31; const READ_ONLY = [ 'objectId', 'createdAt', 'updatedAt' ]; -let scrolling = false; - export default class BrowserTable extends React.Component { constructor() { super(); @@ -59,9 +57,6 @@ export default class BrowserTable extends React.Component { } handleScroll() { - if (scrolling) { - return; - } if (!this.props.data || this.props.data.length === 0) { return; } @@ -329,8 +324,12 @@ export default class BrowserTable extends React.Component {
{table} checked).length === this.props.data.length + } + selectAll={checked => this.props.data.forEach(({ id }) => this.props.selectRow(id, checked))} headers={headers} updateOrdering={this.props.updateOrdering} readonly={!!this.props.relation || !!this.props.isUnique}