Skip to content

Commit 47848e7

Browse files
AllenFangAllenFang
authored
Merge pull request #1053 from react-bootstrap-table/develop
20190810 release
2 parents 05b50ac + 1a44ce0 commit 47848e7

22 files changed

Lines changed: 284 additions & 111 deletions

File tree

‎packages/react-bootstrap-table2-editor/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ const columns = [
140140
text: 'Job Type',
141141
editor: {
142142
type: Type.SELECT,
143-
getOptions: () => [.....]
143+
getOptions: (setOptions, { row, column }) => [.....]
144144
}
145145
}];
146146

@@ -152,7 +152,7 @@ const columns = [
152152
text: 'Job Type',
153153
editor: {
154154
type: Type.SELECT,
155-
getOptions: (setOptions) => {
155+
getOptions: (setOptions, { row, column }) => {
156156
setTimeout(() => setOptions([...]), 1500);
157157
}
158158
}

‎packages/react-bootstrap-table2-editor/src/dropdown-editor.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,13 @@ class DropDownEditor extends Component {
88
super(props);
99
let options = props.options;
1010
if (props.getOptions) {
11-
options = props.getOptions(this.setOptions.bind(this)) || [];
11+
options = props.getOptions(
12+
this.setOptions.bind(this),
13+
{
14+
row: props.row,
15+
column: props.column
16+
}
17+
) || [];
1218
}
1319
this.state = { options };
1420
}
@@ -54,6 +60,8 @@ class DropDownEditor extends Component {
5460
}
5561

5662
DropDownEditor.propTypes = {
63+
row: PropTypes.object.isRequired,
64+
column: PropTypes.object.isRequired,
5765
defaultValue: PropTypes.oneOfType([
5866
PropTypes.string,
5967
PropTypes.number

‎packages/react-bootstrap-table2-editor/src/editing-cell.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ export default (_, onStartEdit) =>
201201
if (_.isFunction(column.editorRenderer)) {
202202
editor = column.editorRenderer(editorProps, value, row, column, rowIndex, columnIndex);
203203
} else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.SELECT) {
204-
editor = <DropdownEditor { ...editorProps } />;
204+
editor = <DropdownEditor { ...editorProps } row={ row } column={ column } />;
205205
} else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.TEXTAREA) {
206206
editor = <TextAreaEditor { ...editorProps } autoSelectText={ autoSelectText } />;
207207
} else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.CHECKBOX) {

‎packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-with-dynamic-options-table.js‎

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint no-console: 0 */
12
/* eslint react/prefer-stateless-function: 0 */
23
import React from 'react';
34

@@ -25,22 +26,26 @@ const columns = [{
2526
text: 'Job Type1',
2627
editor: {
2728
type: Type.SELECT,
28-
getOptions: () => [{
29-
value: 'A',
30-
label: 'A'
31-
}, {
32-
value: 'B',
33-
label: 'B'
34-
}, {
35-
value: 'C',
36-
label: 'C'
37-
}, {
38-
value: 'D',
39-
label: 'D'
40-
}, {
41-
value: 'E',
42-
label: 'E'
43-
}]
29+
getOptions: (setOptions, { row, column }) => {
30+
console.log(`current editing row id: ${row.id}`);
31+
console.log(`current editing column: ${column.dataField}`);
32+
return [{
33+
value: 'A',
34+
label: 'A'
35+
}, {
36+
value: 'B',
37+
label: 'B'
38+
}, {
39+
value: 'C',
40+
label: 'C'
41+
}, {
42+
value: 'D',
43+
label: 'D'
44+
}, {
45+
value: 'E',
46+
label: 'E'
47+
}];
48+
}
4449
}
4550
}, {
4651
dataField: 'type2',
@@ -88,22 +93,26 @@ const columns = [{
8893
text: 'Job Type1',
8994
editor: {
9095
type: Type.SELECT,
91-
getOptions: () => [{
92-
value: 'A',
93-
label: 'A'
94-
}, {
95-
value: 'B',
96-
label: 'B'
97-
}, {
98-
value: 'C',
99-
label: 'C'
100-
}, {
101-
value: 'D',
102-
label: 'D'
103-
}, {
104-
value: 'E',
105-
label: 'E'
106-
}]
96+
getOptions: (setOptions, { row, column }) => {
97+
console.log(\`current editing row id: $\{row.id}\`);
98+
console.log(\`current editing column: $\{column.dataField}\`);
99+
return [{
100+
value: 'A',
101+
label: 'A'
102+
}, {
103+
value: 'B',
104+
label: 'B'
105+
}, {
106+
value: 'C',
107+
label: 'C'
108+
}, {
109+
value: 'D',
110+
label: 'D'
111+
}, {
112+
value: 'E',
113+
label: 'E'
114+
}];
115+
}
107116
}
108117
}, {
109118
dataField: 'type2',

‎packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ import BootstrapTable from 'react-bootstrap-table-next';
1212
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
1313
1414
class Table extends React.Component {
15-
filterByPrice = (filterVal) => {
15+
filterByPrice = (filterVal, data) => {
1616
if (filterVal) {
17-
return products.filter(product => product.price == filterVal);
17+
return data.filter(product => product.price == filterVal);
1818
}
19-
return products;
19+
return data;
2020
}
2121
2222
render() {
@@ -50,11 +50,11 @@ class Table extends React.Component {
5050
`;
5151

5252
export default class Table extends React.Component {
53-
filterByPrice = (filterVal) => {
53+
filterByPrice = (filterVal, data) => {
5454
if (filterVal) {
55-
return products.filter(product => product.price == filterVal);
55+
return data.filter(product => product.price == filterVal);
5656
}
57-
return products;
57+
return data;
5858
}
5959

6060
render() {
@@ -75,7 +75,7 @@ export default class Table extends React.Component {
7575

7676
return (
7777
<div>
78-
<h2>Implement Custom Filter</h2>
78+
<h2>Implement a eq price filter</h2>
7979
<BootstrapTable
8080
keyField="id"
8181
data={ products }

‎packages/react-bootstrap-table2-example/examples/column-toggle/column-toggle-with-filter.js‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/* eslint react/prop-types: 0 */
2+
import React from 'react';
3+
4+
import BootstrapTable from 'react-bootstrap-table-next';
5+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
6+
import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
7+
import Code from 'components/common/code-block';
8+
import { productsGenerator } from 'utils/common';
9+
10+
const { ToggleList } = ColumnToggle;
11+
const products = productsGenerator();
12+
13+
const columns = [{
14+
dataField: 'id',
15+
text: 'Product ID'
16+
}, {
17+
dataField: 'name',
18+
text: 'Product Name',
19+
sort: true,
20+
filter: textFilter()
21+
}, {
22+
dataField: 'price',
23+
text: 'Product Price',
24+
sort: true,
25+
filter: textFilter()
26+
}];
27+
28+
const sourceCode = `\
29+
import BootstrapTable from 'react-bootstrap-table-next';
30+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
31+
import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
32+
33+
const { ToggleList } = ColumnToggle;
34+
const columns = [{
35+
dataField: 'id',
36+
text: 'Product ID'
37+
}, {
38+
dataField: 'name',
39+
text: 'Product Name',
40+
sort: true,
41+
filter: textFilter()
42+
}, {
43+
dataField: 'price',
44+
text: 'Product Price',
45+
sort: true,
46+
filter: textFilter()
47+
}];
48+
49+
<ToolkitProvider
50+
keyField="id"
51+
data={ products }
52+
columns={ columns }
53+
columnToggle
54+
>
55+
{
56+
props => (
57+
<div>
58+
<ToggleList { ...props.columnToggleProps } />
59+
<hr />
60+
<BootstrapTable
61+
{ ...props.baseProps }
62+
filter={ filterFactory() }
63+
/>
64+
</div>
65+
)
66+
}
67+
</ToolkitProvider>
68+
`;
69+
70+
export default () => (
71+
<div>
72+
<h3>Table will keep the filter/sort state when column toggle</h3>
73+
<ToolkitProvider
74+
keyField="id"
75+
data={ products }
76+
columns={ columns }
77+
columnToggle
78+
>
79+
{
80+
props => (
81+
<div>
82+
<ToggleList { ...props.columnToggleProps } />
83+
<hr />
84+
<BootstrapTable
85+
{ ...props.baseProps }
86+
filter={ filterFactory() }
87+
/>
88+
</div>
89+
)
90+
}
91+
</ToolkitProvider>
92+
<Code>{ sourceCode }</Code>
93+
</div>
94+
);

‎packages/react-bootstrap-table2-example/stories/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,7 @@ import BasicColumnToggle from 'examples/column-toggle';
210210
import DefaultVisibility from 'examples/column-toggle/default-visibility';
211211
import StylingColumnToggle from 'examples/column-toggle/styling-toggle-list';
212212
import CustomToggleList from 'examples/column-toggle/custom-toggle-list';
213+
import ColumnToggleWithFilter from 'examples/column-toggle/column-toggle-with-filter';
213214

214215
// loading overlay
215216
import EmptyTableOverlay from 'examples/loading-overlay/empty-table-overlay';
@@ -443,15 +444,16 @@ storiesOf('Table Search', module)
443444
.add('Default Search Table', () => <DefaultSearch />)
444445
.add('Default Custom Search', () => <DefaultCustomSearch />)
445446
.add('Fully Custom Search', () => <FullyCustomSearch />)
446-
.add('Search Fromatted Value', () => <SearchFormattedData />)
447+
.add('Search Formatted Value', () => <SearchFormattedData />)
447448
.add('Custom Search Value', () => <CustomSearchValue />);
448449

449450
storiesOf('Column Toggle', module)
450451
.addDecorator(bootstrapStyle())
451452
.add('Basic Column Toggle', () => <BasicColumnToggle />)
452453
.add('Default Visibility', () => <DefaultVisibility />)
453454
.add('Styling Column Toggle', () => <StylingColumnToggle />)
454-
.add('Custom Column Toggle', () => <CustomToggleList />);
455+
.add('Custom Column Toggle', () => <CustomToggleList />)
456+
.add('Column Toggle with Filter', () => <ColumnToggleWithFilter />);
455457

456458
storiesOf('Export CSV', module)
457459
.addDecorator(bootstrapStyle())

‎packages/react-bootstrap-table2-filter/src/components/date.js‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,27 @@ class DateFilter extends Component {
8383
return optionTags;
8484
}
8585

86+
getDefaultComparator() {
87+
const { defaultValue, filterState } = this.props;
88+
if (filterState && filterState.filterVal) {
89+
return filterState.filterVal.comparator;
90+
}
91+
if (defaultValue && defaultValue.comparator) {
92+
return defaultValue.comparator;
93+
}
94+
return '';
95+
}
96+
8697
getDefaultDate() {
87-
let defaultDate = '';
88-
const { defaultValue } = this.props;
98+
// Set the appropriate format for the input type=date, i.e. "YYYY-MM-DD"
99+
const { defaultValue, filterState } = this.props;
100+
if (filterState && filterState.filterVal && filterState.filterVal.date) {
101+
return dateParser(filterState.filterVal.date);
102+
}
89103
if (defaultValue && defaultValue.date) {
90-
// Set the appropriate format for the input type=date, i.e. "YYYY-MM-DD"
91-
defaultDate = dateParser(new Date(defaultValue.date));
104+
return dateParser(new Date(defaultValue.date));
92105
}
93-
return defaultDate;
106+
return '';
94107
}
95108

96109
applyFilter(value, comparator, isInitial) {
@@ -122,8 +135,7 @@ class DateFilter extends Component {
122135
dateStyle,
123136
className,
124137
comparatorClassName,
125-
dateClassName,
126-
defaultValue
138+
dateClassName
127139
} = this.props;
128140

129141
return (
@@ -143,7 +155,7 @@ class DateFilter extends Component {
143155
style={ comparatorStyle }
144156
className={ `date-filter-comparator form-control ${comparatorClassName}` }
145157
onChange={ this.onChangeComparator }
146-
defaultValue={ defaultValue ? defaultValue.comparator : '' }
158+
defaultValue={ this.getDefaultComparator() }
147159
>
148160
{ this.getComparatorOptions() }
149161
</select>
@@ -169,6 +181,7 @@ class DateFilter extends Component {
169181
DateFilter.propTypes = {
170182
onFilter: PropTypes.func.isRequired,
171183
column: PropTypes.object.isRequired,
184+
filterState: PropTypes.object,
172185
delay: PropTypes.number,
173186
defaultValue: PropTypes.shape({
174187
date: PropTypes.oneOfType([PropTypes.object]),
@@ -210,6 +223,7 @@ DateFilter.defaultProps = {
210223
date: undefined,
211224
comparator: ''
212225
},
226+
filterState: {},
213227
withoutEmptyComparatorOption: false,
214228
comparators: legalComparators,
215229
placeholder: undefined,

0 commit comments

Comments
 (0)