Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[DataGrid] Refactor state (mui#412)
Browse files Browse the repository at this point in the history
Refactored state to attach it to apiRef. Performance issues will be treated in following PRs

* WIP state refactoring on pagination

* fix merging issues

* WIP working on the rowsReducer and global state

* fixes state refactoring finalizing api

* refactored grid reducer

* fix issue with state and cleanup

* fix state and added sortedSelctor for viewport

* prettier

* fix state virtualisation

* small refactoring with selector

* rollback lint rules

* remove options prop to useGridSelector

* prettier

* cleanup commented code

* fix pagination and rendering issues

* fix sorting and refactored hooks props

* Refactored useSorting to new gridState

* rebased and fix issues

* cleanup

* prettier

* fix test

* rebased

* fix demo app

* small refactoring on header item

* fix dependency cycle

* fix index

* prettier

* removed unused fn

* fixing test

* small refactoringg

* prettier

* perf improvements and keyboard refactoring

* improve perf and fix keyboard and test

* move virtualisation folder

* prettier

* refactor useComponents and useEvents

* yarn docs ts formatted

* fix demos and issue with resizing

* fix types in doc

* small fix prettier

* fix rows perf, and prettier

* fix dependency array

* fix prettier

* restored rowIndex
dtassone committed Nov 9, 2020

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
1 parent 3f58aaa commit 753671b
Showing 84 changed files with 2,327 additions and 1,821 deletions.
21 changes: 13 additions & 8 deletions docs/src/pages/components/data-grid/rendering/AntDesignGrid.js
Original file line number Diff line number Diff line change
@@ -101,33 +101,38 @@ const useStyles = makeStyles((theme) => ({
}));

function CustomPagination(props) {
const { paginationProps } = props;
const { pagination, api } = props;

return (
<Pagination
color="primary"
variant="outlined"
shape="rounded"
page={paginationProps.page}
count={paginationProps.pageCount}
page={pagination.page}
count={pagination.pageCount}
// @ts-expect-error
renderItem={(props2) => <PaginationItem {...props2} disableRipple />}
onChange={(event, value) => paginationProps.setPage(value)}
onChange={(event, value) => api.current.setPage(value)}
/>
);
}

CustomPagination.propTypes = {
/**
* The object containing all pagination details in [[PaginationProps]].
* ApiRef that let you manipulate the grid.
*/
paginationProps: PropTypes.shape({
api: PropTypes.shape({
current: PropTypes.object.isRequired,
}).isRequired,
/**
* The object containing all pagination details in [[PaginationState]].
*/
pagination: PropTypes.shape({
page: PropTypes.number.isRequired,
pageCount: PropTypes.number.isRequired,
pageSize: PropTypes.number.isRequired,
paginationMode: PropTypes.oneOf(['client', 'server']).isRequired,
rowCount: PropTypes.number.isRequired,
setPage: PropTypes.func.isRequired,
setPageSize: PropTypes.func.isRequired,
}).isRequired,
};

Original file line number Diff line number Diff line change
@@ -102,18 +102,18 @@ const useStyles = makeStyles((theme: Theme) =>
);

function CustomPagination(props: ComponentProps) {
const { paginationProps } = props;
const { pagination, api } = props;

return (
<Pagination
color="primary"
variant="outlined"
shape="rounded"
page={paginationProps.page}
count={paginationProps.pageCount}
page={pagination.page}
count={pagination.pageCount}
// @ts-expect-error
renderItem={(props2) => <PaginationItem {...props2} disableRipple />}
onChange={(event, value) => paginationProps.setPage(value)}
onChange={(event, value) => api.current.setPage(value)}
/>
);
}
Original file line number Diff line number Diff line change
@@ -12,31 +12,36 @@ const useStyles = makeStyles({
});

function CustomPagination(props) {
const { paginationProps } = props;
const { pagination, api } = props;
const classes = useStyles();

return (
<Pagination
className={classes.root}
color="primary"
page={paginationProps.page}
count={paginationProps.pageCount}
onChange={(event, value) => paginationProps.setPage(value)}
page={pagination.page}
count={pagination.pageCount}
onChange={(event, value) => api.current.setPage(value)}
/>
);
}

CustomPagination.propTypes = {
/**
* The object containing all pagination details in [[PaginationProps]].
* ApiRef that let you manipulate the grid.
*/
paginationProps: PropTypes.shape({
api: PropTypes.shape({
current: PropTypes.object.isRequired,
}).isRequired,
/**
* The object containing all pagination details in [[PaginationState]].
*/
pagination: PropTypes.shape({
page: PropTypes.number.isRequired,
pageCount: PropTypes.number.isRequired,
pageSize: PropTypes.number.isRequired,
paginationMode: PropTypes.oneOf(['client', 'server']).isRequired,
rowCount: PropTypes.number.isRequired,
setPage: PropTypes.func.isRequired,
setPageSize: PropTypes.func.isRequired,
}).isRequired,
};

Original file line number Diff line number Diff line change
@@ -11,16 +11,16 @@ const useStyles = makeStyles({
});

function CustomPagination(props: ComponentProps) {
const { paginationProps } = props;
const { pagination, api } = props;
const classes = useStyles();

return (
<Pagination
className={classes.root}
color="primary"
page={paginationProps.page}
count={paginationProps.pageCount}
onChange={(event, value) => paginationProps.setPage(value)}
page={pagination.page}
count={pagination.pageCount}
onChange={(event, value) => api.current.setPage(value)}
/>
);
}
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@
"test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.tsx' --exclude '**/node_modules/**'",
"test:watch": "yarn test:unit --watch",
"lint": "yarn eslint && yarn jsonlint",
"eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx",
"eslint": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx",
"eslint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx",
"jsonlint": "node scripts/jsonlint.js",
"typescript": "lerna run typescript --parallel",
1 change: 0 additions & 1 deletion packages/demo-app/src/app/app.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import styled, { createGlobalStyle } from 'styled-components';
import './app.less';
import { DemoAppBar } from './app-bar';
import { AppDrawer } from './app-drawer';
import { appReducer } from './app-reducer';
2 changes: 1 addition & 1 deletion packages/demo-app/webpack.dev.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const merge = require('webpack-merge');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
Loading

0 comments on commit 753671b

Please sign in to comment.