status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add defaultRowsPerPage to Table component

This commit is contained in:
Mikhail Mikheev 2019-09-27 16:45:18 +04:00
parent 033284d835
commit cafb75c5ac
4 changed files with 44 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package.json
View File

@ -93,7 +93,7 @@
"@storybook/addon-knobs": "5.2.1", "@storybook/addon-knobs": "5.2.1",
"@storybook/addon-links": "5.2.1", "@storybook/addon-links": "5.2.1",
"@storybook/react": "5.2.1", "@storybook/react": "5.2.1",
"@testing-library/react": "9.1.4", "@testing-library/react": "9.2.0",
"autoprefixer": "9.6.1", "autoprefixer": "9.6.1",
"babel-core": "^7.0.0-bridge.0", "babel-core": "^7.0.0-bridge.0",
"babel-eslint": "10.0.3", "babel-eslint": "10.0.3",
@ -132,15 +132,15 @@
"storybook-host": "5.1.0", "storybook-host": "5.1.0",
"storybook-router": "^0.3.3", "storybook-router": "^0.3.3",
"style-loader": "1.0.0", "style-loader": "1.0.0",
"truffle": "5.0.37", "truffle": "5.0.38",
"truffle-contract": "4.0.31", "truffle-contract": "4.0.31",
"truffle-solidity-loader": "0.1.32", "truffle-solidity-loader": "0.1.32",
"uglifyjs-webpack-plugin": "2.2.0", "uglifyjs-webpack-plugin": "2.2.0",
"url-loader": "^2.1.0", "url-loader": "^2.1.0",
"webpack": "4.41.0", "webpack": "4.41.0",
"webpack-bundle-analyzer": "3.5.1", "webpack-bundle-analyzer": "3.5.2",
"webpack-cli": "3.3.9", "webpack-cli": "3.3.9",
"webpack-dev-server": "3.8.1", "webpack-dev-server": "3.8.1",
"webpack-manifest-plugin": "2.1.1" "webpack-manifest-plugin": "2.1.2"
} }
} }

14
src/components/Table/index.jsx
View File

@ -21,6 +21,7 @@ type Props<K> = {
children: Function, children: Function,
size: number, size: number,
defaultFixed: boolean, defaultFixed: boolean,
defaultRowsPerPage: number,
defaultOrder: 'desc' | 'asc', defaultOrder: 'desc' | 'asc',
noBorder: boolean, noBorder: boolean,
disablePagination: boolean, disablePagination: boolean,
@ -31,7 +32,7 @@ type State = {
order?: Order, order?: Order,
orderBy?: string, orderBy?: string,
orderProp: boolean, orderProp: boolean,
rowsPerPage: number, rowsPerPage?: number,
fixed?: boolean, fixed?: boolean,
} }
@ -83,7 +84,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
orderBy: undefined, orderBy: undefined,
fixed: undefined, fixed: undefined,
orderProp: false, orderProp: false,
rowsPerPage: 5, rowsPerPage: undefined,
} }
} }
@ -147,6 +148,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
defaultOrderBy, defaultOrderBy,
defaultOrder, defaultOrder,
defaultFixed, defaultFixed,
defaultRowsPerPage,
noBorder, noBorder,
} = this.props } = this.props
const { const {
@ -154,6 +156,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
} = this.state } = this.state
const orderByParam = orderBy || defaultOrderBy const orderByParam = orderBy || defaultOrderBy
const orderParam = order || defaultOrder const orderParam = order || defaultOrder
const displayRows = rowsPerPage || defaultRowsPerPage
const fixedParam = typeof fixed !== 'undefined' ? fixed : !!defaultFixed const fixedParam = typeof fixed !== 'undefined' ? fixed : !!defaultFixed
const paginationClasses = { const paginationClasses = {
@ -165,10 +168,10 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
let sortedData = stableSort(data, getSorting(orderParam, orderByParam, orderProp), fixedParam) let sortedData = stableSort(data, getSorting(orderParam, orderByParam, orderProp), fixedParam)
if (!disablePagination) { if (!disablePagination) {
sortedData = sortedData.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) sortedData = sortedData.slice(page * displayRows, page * displayRows + displayRows)
} }
const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage) const emptyRows = displayRows - Math.min(displayRows, data.length - page * displayRows)
const isEmpty = size === 0 const isEmpty = size === 0
return ( return (
@ -191,7 +194,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
<TablePagination <TablePagination
component="div" component="div"
count={size} count={size}
rowsPerPage={rowsPerPage} rowsPerPage={displayRows}
rowsPerPageOptions={[5, 10, 25, 50, 100]} rowsPerPageOptions={[5, 10, 25, 50, 100]}
page={page} page={page}
backIconButtonProps={backProps} backIconButtonProps={backProps}
@ -209,6 +212,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
GnoTable.defaultProps = { GnoTable.defaultProps = {
defaultOrder: 'asc', defaultOrder: 'asc',
disablePagination: false, disablePagination: false,
defaultRowsPerPage: 5,
} }
export default withStyles(styles)(GnoTable) export default withStyles(styles)(GnoTable)

1
src/routes/safe/components/Balances/index.jsx
View File

@ -155,6 +155,7 @@ class Balances extends React.Component<Props, State> {
<Table <Table
label="Balances" label="Balances"
defaultOrderBy={BALANCE_TABLE_ASSET_ID} defaultOrderBy={BALANCE_TABLE_ASSET_ID}
defaultRowsPerPage={10}
columns={columns} columns={columns}
data={filteredData} data={filteredData}
size={filteredData.size} size={filteredData.size}

51
yarn.lock
View File

@ -1332,6 +1332,13 @@
dependencies: dependencies:
regenerator-runtime "^0.13.2" regenerator-runtime "^0.13.2"
"@babel/runtime@^7.6.0":
version "7.6.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.2.tgz#c3d6e41b304ef10dcf13777a33e7694ec4a9a6dd"
integrity sha512-EXxN64agfUqqIGeEjI5dL5z0Sw0ZwWo1mLTi4mQowCZ42O59b7DRpZAnTC6OqdF28wMBMFKNb/4uFGrVaigSpg==
dependencies:
regenerator-runtime "^0.13.2"
"@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4": "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4":
version "7.4.4" version "7.4.4"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
@ -2497,10 +2504,10 @@
dependencies: dependencies:
defer-to-connect "^1.0.1" defer-to-connect "^1.0.1"
"@testing-library/dom@^6.1.0": "@testing-library/dom@^6.3.0":
version "6.1.0" version "6.4.1"
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.1.0.tgz#8d5a954158e81ecd7c994907f4ec240296ed823b" resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.4.1.tgz#4efd38d896b9b2255025acf9567e2360e1f4814f"
integrity sha512-qivqFvnbVIH3DyArFofEU/jlOhkGIioIemOy9A9M/NQTpPyDDQmtVkAfoB18RKN581f0s/RJMRBbq9WfMIhFTw== integrity sha512-bjPHLO5NzlTvA57Tfz8txHEUmnOed3NuvObB2ttoKfO6A/utr7TZt9bDHHcYymcZIG2IsQZLix/m4ZKkedDDwQ==
dependencies: dependencies:
"@babel/runtime" "^7.5.5" "@babel/runtime" "^7.5.5"
"@sheerun/mutationobserver-shim" "^0.3.2" "@sheerun/mutationobserver-shim" "^0.3.2"
@ -2524,13 +2531,13 @@
pretty-format "^24.0.0" pretty-format "^24.0.0"
redent "^3.0.0" redent "^3.0.0"
"@testing-library/react@9.1.4": "@testing-library/react@9.2.0":
version "9.1.4" version "9.2.0"
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.1.4.tgz#4cc1a228a944c0f468ee501e7da1651d8bbd9902" resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.2.0.tgz#143ad2d96b03c3c334e47aaf33cc2c9b7d007123"
integrity sha512-fQ/PXZoLcmnS1W5ZiM3P7XBy2x6Hm9cJAT/ZDuZKzJ1fS1rN3j31p7ReAqUe3N1kJ46sNot0n1oiGbz7FPU+FA== integrity sha512-Hr87KZflfI+vPZjgyzBKQHolQHiXGU5aTGjQSCJdH/yGPbm+IzrvuWPS97GD3RUH3rSS1IXq1e2Sn8Hmyw2ctA==
dependencies: dependencies:
"@babel/runtime" "^7.5.5" "@babel/runtime" "^7.6.0"
"@testing-library/dom" "^6.1.0" "@testing-library/dom" "^6.3.0"
"@types/testing-library__react" "^9.1.0" "@types/testing-library__react" "^9.1.0"
"@truffle/blockchain-utils@^0.0.11": "@truffle/blockchain-utils@^0.0.11":
@ -17836,10 +17843,10 @@ truffle-workflow-compile@^2.1.3:
truffle-external-compile "^1.0.15" truffle-external-compile "^1.0.15"
truffle-resolver "^5.0.15" truffle-resolver "^5.0.15"
truffle@5.0.37: truffle@5.0.38:
version "5.0.37" version "5.0.38"
resolved "https://registry.yarnpkg.com/truffle/-/truffle-5.0.37.tgz#10da6f1bb9e661c4ccec75c295554bc4434f6b18" resolved "https://registry.yarnpkg.com/truffle/-/truffle-5.0.38.tgz#f306ad1bddea7ad87b795783da2ca9f19a8345dc"
integrity sha512-od3mnu6sCV7sYbJCLSDV66RZ4bYeuLQ1QDpjGQHyJMB5AIw+u8GnxBmj6MKBOWHC+zixnwkRwS9yTYpj5IObFg== integrity sha512-RmbhEFROg+SGyQRM0tWk4NHUrS/uqHDTcc/ZY0k3JFd4cbr2vGD2csdWCfVW2/+SQ2qufXymurt9aRNvkpYQDA==
dependencies: dependencies:
app-module-path "^2.2.0" app-module-path "^2.2.0"
mocha "5.2.0" mocha "5.2.0"
@ -19548,10 +19555,10 @@ webidl-conversions@^4.0.2:
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad" resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg== integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
webpack-bundle-analyzer@3.5.1: webpack-bundle-analyzer@3.5.2:
version "3.5.1" version "3.5.2"
resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.5.1.tgz#84aabb1547178d842ebb4ccc7324084b6c3b0ea9" resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.5.2.tgz#ac02834f4b31de8e27d71e6c7a612301ebddb79f"
integrity sha512-CDdaT3TTu4F9X3tcDq6PNJOiNGgREOM0WdN2vVAoUUn+M6NLB5kJ543HImCWbrDwOpbpGARSwU8r+u0Pl367kA== integrity sha512-g9spCNe25QYUVqHRDkwG414GTok2m7pTTP0wr6l0J50Z3YLS04+BGodTqqoVBL7QfU/U/9p/oiI5XFOyfZ7S/A==
dependencies: dependencies:
acorn "^6.0.7" acorn "^6.0.7"
acorn-walk "^6.1.1" acorn-walk "^6.1.1"
@ -19662,10 +19669,10 @@ webpack-log@^2.0.0:
ansi-colors "^3.0.0" ansi-colors "^3.0.0"
uuid "^3.3.2" uuid "^3.3.2"
webpack-manifest-plugin@2.1.1: webpack-manifest-plugin@2.1.2:
version "2.1.1" version "2.1.2"
resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.1.1.tgz#6b3e280327815b83152c79f42d0ca13b665773c4" resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.1.2.tgz#990c448b4cfe1cf0b2dfad4a422264aabc4c98eb"
integrity sha512-2zqJ6mvc3yoiqfDjghAIpljhLSDh/G7vqGrzYcYqqRCd/ZZZCAuc/YPE5xG0LGpLgDJRhUNV1H+znyyhIxahzA== integrity sha512-XWjPY0NXXJ1tGQZgtOMZtEsm8mST23nvO7q5e5H26NH4pv7wfYbHaX9Uwogve+IF6Ilv4j1e3hPr9N3JGZdilA==
dependencies: dependencies:
fs-extra "^7.0.0" fs-extra "^7.0.0"
lodash ">=3.5 <5" lodash ">=3.5 <5"