Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6d7a4c4

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /