Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix issues with always rendering #1692

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix issues with always rendering #1692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 9 additions & 9 deletions examples/custom-components/TableViewCol.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import Checkbox from '@material-ui/core/Checkbox';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import Checkbox from '@material-ui/core/Checkbox';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormGroup from '@material-ui/core/FormGroup';
import PropTypes from 'prop-types';
import React from 'react';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(
Expand Down Expand Up @@ -42,12 +42,12 @@ const useStyles = makeStyles(
{ name: 'MUIDataTableViewCol' },
);

const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updateColumns }) => {
const TableViewCol = React.memo(({ columns, options, components = {}, onColumnUpdate, updateColumns }) => {
const classes = useStyles();
const textLabels = options.textLabels.viewColumns;
const CheckboxComponent = components.Checkbox || Checkbox;

const handleColChange = index => {
const handleColChange = index => () => {
onColumnUpdate(index);
};

Expand Down Expand Up @@ -85,7 +85,7 @@ const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updat
root: classes.checkboxRoot,
checked: classes.checked,
}}
onChange={() => handleColChange(index)}
onChange={handleColChange(index)}
checked={column.display === 'true'}
value={column.name}
/>
Expand All @@ -98,7 +98,7 @@ const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updat
</FormGroup>
</FormControl>
);
};
});

TableViewCol.propTypes = {
/** Columns used to describe table */
Expand Down
12 changes: 6 additions & 6 deletions src/components/TableFilterList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { makeStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import React from 'react';
import TableFilterListItem from './TableFilterListItem';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(
() => ({
Expand All @@ -18,7 +18,7 @@ const useStyles = makeStyles(
{ name: 'MUIDataTableFilterList' },
);

const TableFilterList = ({
const TableFilterList = React.memo(({
options,
filterList,
filterUpdate,
Expand All @@ -31,7 +31,7 @@ const TableFilterList = ({
const classes = useStyles();
const { serverSide } = options;

const removeFilter = (index, filterValue, columnName, filterType, customFilterListUpdate = null) => {
const removeFilter = (index, filterValue, columnName, filterType, customFilterListUpdate = null) => () => {
let removedFilter = filterValue;
if (Array.isArray(removedFilter) && removedFilter.length === 0) {
removedFilter = filterList[index];
Expand All @@ -57,7 +57,7 @@ const TableFilterList = ({
<ItemComponent
label={customFilterItem}
key={customFilterItemIndex}
onDelete={() =>
onDelete={
removeFilter(
index,
item[customFilterItemIndex] || [],
Expand All @@ -84,7 +84,7 @@ const TableFilterList = ({
<ItemComponent
label={filterListRenderers[index](data)}
key={colIndex}
onDelete={() => removeFilter(index, data, columnNames[index].name, 'chip')}
onDelete={removeFilter(index, data, columnNames[index].name, 'chip')}
className={classes.chip}
itemKey={colIndex}
index={index}
Expand Down Expand Up @@ -117,7 +117,7 @@ const TableFilterList = ({
{serverSide && serverSideFilterList ? getFilterList(serverSideFilterList) : getFilterList(filterList)}
</div>
);
};
});

TableFilterList.propTypes = {
/** Data used to filter table against */
Expand Down
27 changes: 18 additions & 9 deletions src/components/TableHeadCell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import React, { useState } from 'react';

import Button from '@material-ui/core/Button';
import clsx from 'clsx';
import HelpIcon from '@material-ui/icons/Help';
import MuiTooltip from '@material-ui/core/Tooltip';
import PropTypes from 'prop-types';
import React, { useState } from 'react';
import TableCell from '@material-ui/core/TableCell';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import useColumnDrop from '../hooks/useColumnDrop.js';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import useColumnDrop from '../hooks/useColumnDrop.js';
import { useDrag } from 'react-dnd';

const useStyles = makeStyles(
Expand Down Expand Up @@ -64,7 +65,7 @@ const useStyles = makeStyles(
{ name: 'MUIDataTableHeadCell' },
);

const TableHeadCell = ({
const TableHeadCell = React.memo(({
cellHeaderProps = {},
children,
colPosition,
Expand Down Expand Up @@ -189,6 +190,14 @@ const TableHeadCell = ({
setSortTooltipOpen(false);
};

const handleSortTooltipOpen = (open) => () => {
setSortTooltipOpen(open);
};

const handleHintTooltipOpen = (open) => () => {
setHintTooltipOpen(open);
};

return (
<TableCell
ref={ref => {
Expand All @@ -208,8 +217,8 @@ const TableHeadCell = ({
title={getTooltipTitle()}
placement="bottom"
open={sortTooltipOpen}
onOpen={() => (dragging ? setSortTooltipOpen(false) : setSortTooltipOpen(true))}
onClose={() => setSortTooltipOpen(false)}
onOpen={handleSortTooltipOpen(!dragging)}
onClose={handleSortTooltipOpen(false)}
classes={{
tooltip: classes.tooltip,
popper: classes.mypopper,
Expand Down Expand Up @@ -253,8 +262,8 @@ const TableHeadCell = ({
title={hint}
placement={'bottom-end'}
open={hintTooltipOpen}
onOpen={() => showHintTooltip()}
onClose={() => setHintTooltipOpen(false)}
onOpen={showHintTooltip}
onClose={handleHintTooltipOpen(false)}
classes={{
tooltip: classes.tooltip,
popper: classes.mypopper,
Expand All @@ -267,7 +276,7 @@ const TableHeadCell = ({
)}
</TableCell>
);
};
});

TableHeadCell.propTypes = {
/** Options used to describe table */
Expand Down
16 changes: 8 additions & 8 deletions src/components/TableViewCol.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import Checkbox from '@material-ui/core/Checkbox';
import Typography from '@material-ui/core/Typography';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormGroup from '@material-ui/core/FormGroup';
import PropTypes from 'prop-types';
import React from 'react';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(
Expand Down Expand Up @@ -41,12 +41,12 @@ const useStyles = makeStyles(
{ name: 'MUIDataTableViewCol' },
);

const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updateColumns }) => {
const TableViewCol = React.memo(({ columns, options, components = {}, onColumnUpdate, updateColumns }) => {
const classes = useStyles();
const textLabels = options.textLabels.viewColumns;
const CheckboxComponent = components.Checkbox || Checkbox;

const handleColChange = index => {
const handleColChange = index => () => {
onColumnUpdate(index);
};

Expand Down Expand Up @@ -75,7 +75,7 @@ const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updat
root: classes.checkboxRoot,
checked: classes.checked,
}}
onChange={() => handleColChange(index)}
onChange={handleColChange(index)}
checked={column.display === 'true'}
value={column.name}
/>
Expand All @@ -88,7 +88,7 @@ const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updat
</FormGroup>
</FormControl>
);
};
});

TableViewCol.propTypes = {
/** Columns used to describe table */
Expand Down