Skip to content

Commit 6d7a4c4

Browse files
AllenFangAllenFang
committed
fix #1269 
1 parent 1f73806 commit 6d7a4c4

File tree

6 files changed

+51
-26
lines changed

6 files changed

+51
-26
lines changed

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ const columns = [{
1414
dataField: 'name',
1515
text: 'Product Name',
1616
footer: 'hello',
17-
filter: textFilter()
17+
filter: textFilter({
18+
id: 'identify'
19+
})
1820
}, {
1921
dataField: 'price',
2022
text: 'Product Price',
@@ -54,7 +56,6 @@ export default () => (
5456
data={ products }
5557
columns={ columns }
5658
filter={ filterFactory() }
57-
filterPosition="bottom"
5859
selectRow={ selectRow }
5960
/>
6061
<Code>{ sourceCode }</Code>

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -128,8 +128,9 @@ class DateFilter extends Component {
128128

129129
render() {
130130
const {
131+
id,
131132
placeholder,
132-
column: { text },
133+
column: { dataField, text },
133134
style,
134135
comparatorStyle,
135136
dateStyle,
@@ -138,6 +139,9 @@ class DateFilter extends Component {
138139
dateClassName
139140
} = this.props;
140141

142+
const comparatorElmId = `date-filter-comparator-${dataField}${id ? `-${id}` : ''}`;
143+
const inputElmId = `date-filter-column-${dataField}${id ? `-${id}` : ''}`;
144+
141145
return (
142146
<div
143147
onClick={ e => e.stopPropagation() }
@@ -146,12 +150,12 @@ class DateFilter extends Component {
146150
>
147151
<label
148152
className="filter-label"
149-
htmlFor={ `date-filter-comparator-${text}` }
153+
htmlFor={ comparatorElmId }
150154
>
151155
<span className="sr-only">Filter comparator</span>
152156
<select
153157
ref={ n => this.dateFilterComparator = n }
154-
id={ `date-filter-comparator-${text}` }
158+
id={ comparatorElmId }
155159
style={ comparatorStyle }
156160
className={ `date-filter-comparator form-control ${comparatorClassName}` }
157161
onChange={ this.onChangeComparator }
@@ -160,11 +164,11 @@ class DateFilter extends Component {
160164
{ this.getComparatorOptions() }
161165
</select>
162166
</label>
163-
<label htmlFor={ `date-filter-column-${text}` }>
167+
<label htmlFor={ inputElmId }>
164168
<span className="sr-only">Enter ${ text }</span>
165169
<input
166170
ref={ n => this.inputDate = n }
167-
id={ `date-filter-column-${text}` }
171+
id={ inputElmId }
168172
className={ `filter date-filter-input form-control ${dateClassName}` }
169173
style={ dateStyle }
170174
type="date"
@@ -181,6 +185,7 @@ class DateFilter extends Component {
181185
DateFilter.propTypes = {
182186
onFilter: PropTypes.func.isRequired,
183187
column: PropTypes.object.isRequired,
188+
id: PropTypes.string,
184189
filterState: PropTypes.object,
185190
delay: PropTypes.number,
186191
defaultValue: PropTypes.shape({
@@ -232,7 +237,8 @@ DateFilter.defaultProps = {
232237
comparatorStyle: undefined,
233238
comparatorClassName: '',
234239
dateStyle: undefined,
235-
dateClassName: ''
240+
dateClassName: '',
241+
id: null
236242
};
237243

238244

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ class MultiSelectFilter extends Component {
112112

113113
render() {
114114
const {
115+
id,
115116
style,
116117
className,
117118
filterState,
@@ -128,17 +129,18 @@ class MultiSelectFilter extends Component {
128129

129130
const selectClass =
130131
`filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
132+
const elmId = `multiselect-filter-column-${column.dataField}${id ? `-${id}` : ''}`;
131133

132134
return (
133135
<label
134136
className="filter-label"
135-
htmlFor={ `multiselect-filter-column-${column.text}` }
137+
htmlFor={ elmId }
136138
>
137139
<span className="sr-only">Filter by {column.text}</span>
138140
<select
139141
{ ...rest }
140142
ref={ n => this.selectInput = n }
141-
id={ `multiselect-filter-column-${column.text}` }
143+
id={ elmId }
142144
style={ style }
143145
multiple
144146
className={ selectClass }
@@ -157,6 +159,7 @@ MultiSelectFilter.propTypes = {
157159
onFilter: PropTypes.func.isRequired,
158160
column: PropTypes.object.isRequired,
159161
options: PropTypes.object.isRequired,
162+
id: PropTypes.string,
160163
filterState: PropTypes.object,
161164
comparator: PropTypes.oneOf([LIKE, EQ]),
162165
placeholder: PropTypes.string,
@@ -174,7 +177,8 @@ MultiSelectFilter.defaultProps = {
174177
className: '',
175178
withoutEmptyOption: false,
176179
comparator: EQ,
177-
caseSensitive: true
180+
caseSensitive: true,
181+
id: null
178182
};
179183

180184
export default MultiSelectFilter;

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

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ class NumberFilter extends Component {
170170
render() {
171171
const { isSelected } = this.state;
172172
const {
173+
id,
173174
column,
174175
options,
175176
style,
@@ -188,6 +189,9 @@ class NumberFilter extends Component {
188189
${!isSelected ? 'placeholder-selected' : ''}
189190
`;
190191

192+
const comparatorElmId = `number-filter-comparator-${column.dataField}${id ? `-${id}` : ''}`;
193+
const inputElmId = `number-filter-column-${column.dataField}${id ? `-${id}` : ''}`;
194+
191195
return (
192196
<div
193197
onClick={ e => e.stopPropagation() }
@@ -196,13 +200,13 @@ class NumberFilter extends Component {
196200
>
197201
<label
198202
className="filter-label"
199-
htmlFor={ `number-filter-comparator-${column.text}` }
203+
htmlFor={ comparatorElmId }
200204
>
201205
<span className="sr-only">Filter comparator</span>
202206
<select
203207
ref={ n => this.numberFilterComparator = n }
204208
style={ comparatorStyle }
205-
id={ `number-filter-comparator-${column.text}` }
209+
id={ comparatorElmId }
206210
className={ `number-filter-comparator form-control ${comparatorClassName}` }
207211
onChange={ this.onChangeComparator }
208212
defaultValue={ this.getDefaultComparator() }
@@ -214,12 +218,12 @@ class NumberFilter extends Component {
214218
options ?
215219
<label
216220
className="filter-label"
217-
htmlFor={ `number-filter-column-${column.text}` }
221+
htmlFor={ inputElmId }
218222
>
219223
<span className="sr-only">{`Select ${column.text}`}</span>
220224
<select
221225
ref={ n => this.numberFilter = n }
222-
id={ `number-filter-column-${column.text}` }
226+
id={ inputElmId }
223227
style={ numberStyle }
224228
className={ selectClass }
225229
onChange={ this.onChangeNumberSet }
@@ -228,11 +232,11 @@ class NumberFilter extends Component {
228232
{ this.getNumberOptions() }
229233
</select>
230234
</label> :
231-
<label htmlFor={ `number-filter-column-${column.text}` }>
235+
<label htmlFor={ inputElmId }>
232236
<span className="sr-only">{`Enter ${column.text}`}</span>
233237
<input
234238
ref={ n => this.numberFilter = n }
235-
id={ `number-filter-column-${column.text}` }
239+
id={ inputElmId }
236240
type="number"
237241
style={ numberStyle }
238242
className={ `number-filter-input form-control ${numberClassName}` }
@@ -250,6 +254,7 @@ class NumberFilter extends Component {
250254
NumberFilter.propTypes = {
251255
onFilter: PropTypes.func.isRequired,
252256
column: PropTypes.object.isRequired,
257+
id: PropTypes.string,
253258
filterState: PropTypes.object,
254259
options: PropTypes.arrayOf(PropTypes.number),
255260
defaultValue: PropTypes.shape({
@@ -305,7 +310,8 @@ NumberFilter.defaultProps = {
305310
comparatorStyle: undefined,
306311
comparatorClassName: '',
307312
numberStyle: undefined,
308-
numberClassName: ''
313+
numberClassName: '',
314+
id: null
309315
};
310316

311317
export default NumberFilter;

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,7 @@ class SelectFilter extends Component {
144144

145145
render() {
146146
const {
147+
id,
147148
style,
148149
className,
149150
defaultValue,
@@ -160,17 +161,18 @@ class SelectFilter extends Component {
160161

161162
const selectClass =
162163
`filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
164+
const elmId = `select-filter-column-${column.dataField}${id ? `-${id}` : ''}`;
163165

164166
return (
165167
<label
166168
className="filter-label"
167-
htmlFor={ `select-filter-column-${column.text}` }
169+
htmlFor={ elmId }
168170
>
169171
<span className="sr-only">Filter by { column.text }</span>
170172
<select
171173
{ ...rest }
172174
ref={ n => this.selectInput = n }
173-
id={ `select-filter-column-${column.text}` }
175+
id={ elmId }
174176
style={ style }
175177
className={ selectClass }
176178
onChange={ this.filter }
@@ -187,6 +189,7 @@ class SelectFilter extends Component {
187189
SelectFilter.propTypes = {
188190
onFilter: PropTypes.func.isRequired,
189191
column: PropTypes.object.isRequired,
192+
id: PropTypes.string,
190193
filterState: PropTypes.object,
191194
options: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
192195
comparator: PropTypes.oneOf([LIKE, EQ]),
@@ -205,7 +208,8 @@ SelectFilter.defaultProps = {
205208
className: '',
206209
withoutEmptyOption: false,
207210
comparator: EQ,
208-
caseSensitive: true
211+
caseSensitive: true,
212+
id: null
209213
};
210214

211215
export default SelectFilter;

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,9 @@ class TextFilter extends Component {
8888

8989
render() {
9090
const {
91+
id,
9192
placeholder,
92-
column: { text },
93+
column: { dataField, text },
9394
style,
9495
className,
9596
onFilter,
@@ -100,18 +101,19 @@ class TextFilter extends Component {
100101
...rest
101102
} = this.props;
102103

103-
// stopPropagation for onClick event is try to prevent sort was triggered.
104+
const elmId = `text-filter-column-${dataField}${id ? `-${id}` : ''}`;
105+
104106
return (
105107
<label
106108
className="filter-label"
107-
htmlFor={ `text-filter-column-${text}` }
109+
htmlFor={ elmId }
108110
>
109111
<span className="sr-only">Filter by {text}</span>
110112
<input
111113
{ ...rest }
112114
ref={ n => this.input = n }
113115
type="text"
114-
id={ `text-filter-column-${text}` }
116+
id={ elmId }
115117
className={ `filter text-filter form-control ${className}` }
116118
style={ style }
117119
onChange={ this.filter }
@@ -127,6 +129,7 @@ class TextFilter extends Component {
127129
TextFilter.propTypes = {
128130
onFilter: PropTypes.func.isRequired,
129131
column: PropTypes.object.isRequired,
132+
id: PropTypes.string,
130133
filterState: PropTypes.object,
131134
comparator: PropTypes.oneOf([LIKE, EQ]),
132135
defaultValue: PropTypes.string,
@@ -142,7 +145,8 @@ TextFilter.defaultProps = {
142145
delay: FILTER_DELAY,
143146
filterState: {},
144147
defaultValue: '',
145-
caseSensitive: false
148+
caseSensitive: false,
149+
id: null
146150
};
147151

148152

0 commit comments

Comments
 (0)