diff --git a/packages/react-bootstrap-table2-editor/README.md b/packages/react-bootstrap-table2-editor/README.md
index 55d6c1d..f5d98aa 100644
--- a/packages/react-bootstrap-table2-editor/README.md
+++ b/packages/react-bootstrap-table2-editor/README.md
@@ -132,7 +132,7 @@ const columns = [
if (typeof cell !== 'object') {
dateObj = new Date(cell);
}
- return `${('0' + dateObj.getDate()).slice(-2)}/${('0' + (dateObj.getMonth() + 1)).slice(-2)}/${dateObj.getFullYear()}`;
+ return `${('0' + dateObj.getUTCDate()).slice(-2)}/${('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/${dateObj.getUTCFullYear()}`;
},
editor: {
type: Type.DATE
@@ -173,16 +173,16 @@ If you feel above predefined editors are not satisfied to your requirement, you
* `editorProps`: Some useful attributes you can use on DOM editor, like class, style etc.
* `value`: Current cell value
-* `row`: Current row data
-* `column`: Current column definition
-* `rowIndex`: Current row index
+* `row`: Current row data
+* `column`: Current column definition
+* `rowIndex`: Current row index
* `columnIndex`: Current column index
> Note when implement a custom React editor component, this component should have a **getValue** function which return current value on editor
> Note when you want to save value, you can call **editorProps.onUpdate** function
-Following is a short example:
+Following is a short example:
```js
class QualityRanger extends React.Component {
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/date-editor-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/date-editor-table.js
index d166c94..465970d 100644
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/date-editor-table.js
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/date-editor-table.js
@@ -23,7 +23,7 @@ const columns = [{
if (typeof cell !== 'object') {
dateObj = new Date(cell);
}
- return `${('0' + dateObj.getDate()).slice(-2)}/${('0' + (dateObj.getMonth() + 1)).slice(-2)}/${dateObj.getFullYear()}`;
+ return `${('0' + dateObj.getUTCDate()).slice(-2)}/${('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/${dateObj.getUTCFullYear()}`;
},
editor: {
type: Type.DATE
@@ -48,7 +48,7 @@ const columns = [{
if (typeof cell !== 'object') {
dateObj = new Date(cell);
}
- return \`$\{('0' + dateObj.getDate()).slice(-2)}/$\{('0' + (dateObj.getMonth() + 1)).slice(-2)}/$\{dateObj.getFullYear()}\`;
+ return \`$\{('0' + dateObj.getUTCDate()).slice(-2)}/$\{('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/$\{dateObj.getUTCFullYear()}\`;
},
editor: {
type: Type.DATE
diff --git a/packages/react-bootstrap-table2-filter/src/components/date.js b/packages/react-bootstrap-table2-filter/src/components/date.js
index 5a6b1aa..45717ae 100644
--- a/packages/react-bootstrap-table2-filter/src/components/date.js
+++ b/packages/react-bootstrap-table2-filter/src/components/date.js
@@ -18,7 +18,7 @@ const legalComparators = [
];
function dateParser(d) {
- return `${d.getFullYear()}-${('0' + (d.getMonth() + 1)).slice(-2)}-${('0' + d.getDate()).slice(-2)}`;
+ return `${d.getUTCFullYear()}-${('0' + (d.getUTCMonth() + 1)).slice(-2)}-${('0' + d.getUTCDate()).slice(-2)}`;
}
class DateFilter extends Component {
diff --git a/packages/react-bootstrap-table2-filter/src/filter.js b/packages/react-bootstrap-table2-filter/src/filter.js
index 07454c4..de61577 100644
--- a/packages/react-bootstrap-table2-filter/src/filter.js
+++ b/packages/react-bootstrap-table2-filter/src/filter.js
@@ -98,9 +98,9 @@ export const filterByDate = _ => (
customFilterValue
) => {
if (!date || !comparator) return data;
- const filterDate = date.getDate();
- const filterMonth = date.getMonth();
- const filterYear = date.getFullYear();
+ const filterDate = date.getUTCDate();
+ const filterMonth = date.getUTCMonth();
+ const filterYear = date.getUTCFullYear();
return data.filter((row) => {
let valid = true;
@@ -114,9 +114,9 @@ export const filterByDate = _ => (
cell = new Date(cell);
}
- const targetDate = cell.getDate();
- const targetMonth = cell.getMonth();
- const targetYear = cell.getFullYear();
+ const targetDate = cell.getUTCDate();
+ const targetMonth = cell.getUTCMonth();
+ const targetYear = cell.getUTCFullYear();
switch (comparator) {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 61e0c18..f6c22a5 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -37,6 +37,7 @@
],
"dependencies": {
"classnames": "2.2.5",
+ "react-transition-group": "2.5.3",
"underscore": "1.9.1"
},
"peerDependencies": {
diff --git a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
index 9c038ab..601c338 100644
--- a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
@@ -10,18 +10,31 @@ class RowExpandProvider extends React.Component {
children: PropTypes.node.isRequired,
data: PropTypes.array.isRequired,
keyField: PropTypes.string.isRequired
- }
+ };
- state = { expanded: this.props.expandRow.expanded || [] };
+ state = { expanded: this.props.expandRow.expanded || [],
+ isClosing: this.props.expandRow.isClosing || [] };
componentWillReceiveProps(nextProps) {
if (nextProps.expandRow) {
+ const isClosing = this.state.expanded.reduce((acc, cur) => {
+ if (!nextProps.expandRow.expanded.includes(cur)) {
+ acc.push(cur);
+ }
+ return acc;
+ }, []);
+ this.setState(() => ({ expanded: nextProps.expandRow.expanded, isClosing }));
+ } else {
this.setState(() => ({
- expanded: nextProps.expandRow.expanded || this.state.expanded
+ expanded: this.state.expanded
}));
}
}
+ onClosed = (closedRow) => {
+ this.setState({ isClosing: this.state.isClosing.filter(value => value !== closedRow) });
+ };
+
handleRowExpand = (rowKey, expanded, rowIndex, e) => {
const { data, keyField, expandRow: { onExpand, onlyOneExpanding, nonExpandable } } = this.props;
if (nonExpandable && nonExpandable.includes(rowKey)) {
@@ -29,11 +42,15 @@ class RowExpandProvider extends React.Component {
}
let currExpanded = [...this.state.expanded];
+ let isClosing = [...this.state.isClosing];
if (expanded) {
- if (onlyOneExpanding) currExpanded = [rowKey];
- else currExpanded.push(rowKey);
+ if (onlyOneExpanding) {
+ isClosing = isClosing.concat(currExpanded);
+ currExpanded = [rowKey];
+ } else currExpanded.push(rowKey);
} else {
+ isClosing.push(rowKey);
currExpanded = currExpanded.filter(value => value !== rowKey);
}
@@ -41,8 +58,8 @@ class RowExpandProvider extends React.Component {
const row = dataOperator.getRowByRowId(data, keyField, rowKey);
onExpand(row, expanded, rowIndex, e);
}
- this.setState(() => ({ expanded: currExpanded }));
- }
+ this.setState(() => ({ expanded: currExpanded, isClosing }));
+ };
handleAllRowExpand = (e, expandAll) => {
const {
@@ -68,7 +85,7 @@ class RowExpandProvider extends React.Component {
}
this.setState(() => ({ expanded: currExpanded }));
- }
+ };
render() {
const { data, keyField } = this.props;
@@ -78,6 +95,8 @@ class RowExpandProvider extends React.Component {
...this.props.expandRow,
nonExpandable: this.props.expandRow.nonExpandable,
expanded: this.state.expanded,
+ isClosing: this.state.isClosing,
+ onClosed: this.onClosed,
isAnyExpands: dataOperator.isAnyExpands(data, keyField, this.state.expanded),
onRowExpand: this.handleRowExpand,
onAllRowExpand: this.handleAllRowExpand
diff --git a/packages/react-bootstrap-table2/src/row-expand/expand-row.js b/packages/react-bootstrap-table2/src/row-expand/expand-row.js
index 0a89628..3699ada 100644
--- a/packages/react-bootstrap-table2/src/row-expand/expand-row.js
+++ b/packages/react-bootstrap-table2/src/row-expand/expand-row.js
@@ -1,18 +1,37 @@
import React from 'react';
import PropTypes from 'prop-types';
+import { CSSTransition } from 'react-transition-group';
-const ExpandRow = ({ children, ...rest }) => (
-
- | { children } |
+const ExpandRow = ({ children, expanded, onClosed, ...rest }) => (
+
+ |
+
+
+
+ |
);
ExpandRow.propTypes = {
- children: PropTypes.node
+ children: PropTypes.node,
+ expanded: PropTypes.bool,
+ onClosed: PropTypes.func
};
ExpandRow.defaultProps = {
- children: null
+ children: null,
+ expanded: false,
+ onClosed: null
};
export default ExpandRow;
diff --git a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
index 7578d6d..724b5d2 100644
--- a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
+++ b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
@@ -8,8 +8,8 @@ export default (Component) => {
const key = props.value;
const expanded = expandRow.expanded.includes(key);
+ const isClosing = expandRow.isClosing.includes(key);
const expandable = !expandRow.nonExpandable || !expandRow.nonExpandable.includes(key);
-
return [
{
expandable={ expandable }
expandRow={ { ...expandRow } }
/>,
- expanded ? expandRow.onClosed(key) }
>
{ expandRow.renderer(props.row) }
: null
diff --git a/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss b/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
index 5974e45..e2a0895 100644
--- a/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
+++ b/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
@@ -68,10 +68,6 @@
text-align: center;
}
- tr.expanding-row {
- padding: 5px;
- }
-
td.react-bootstrap-table-editing-cell {
.animated {
animation-fill-mode: both;
@@ -161,4 +157,26 @@
animation-name: bounceOut;
}
}
-}
\ No newline at end of file
+ .reset-expansion-style{
+ padding: 0;
+ }
+ .row-expansion-style{
+ padding: 8px;
+ }
+ .row-expand-slide-appear{
+ max-height: 0;
+ overflow: hidden;
+ }
+ .row-expand-slide-appear-active{
+ max-height: 1000px;
+ transition: max-height 3s linear;
+ }
+ .row-expand-slide-exit{
+ max-height: 1000px;
+ }
+ .row-expand-slide-exit-active{
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 400ms cubic-bezier(0, 0.95, 0, 0.95)
+ }
+}