Skip to content

Commit da7f748

Browse files
NeilAllavarpuNeilAllavarpu
committed
You can actually edit the timeline filters by typing
Close ScandinavianSection-UCLA#164 So, we were using the same ref twice for both filters which caused the draggable timelines to override the actual text inputs. Instead, I realized that each change event can be directly used to get the values, so no refs are needed there. Had to change a couple of other things to get it to work, but it should work out properly.
1 parent a168249 commit da7f748

File tree

2 files changed

+66
-63
lines changed

2 files changed

+66
-63
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ node_modules/babel-preset-env/package.json
1212

1313
# misc
1414
/.vscode
15-
.eslintrc.js
15+
.eslintrc.json
1616
.idea
1717
.DS_Store
1818
.env.local

‎src/components/Navigation/Navigation.js

+65-62
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ class Navigation extends Component {
111111
var idKey = ontologyToID[this.state.displayOntology];
112112
if (this.state.timeFilterOn) {
113113
// filter by time to get array with display artifacts that fit the time filter
114-
var itemsWithinFieldtrips = dateFilterHelper(this.refs.fromDate.value, this.refs.toDate.value, this.state.displayOntology);
114+
let itemsWithinFieldtrips = dateFilterHelper(this.state.fromDate, this.state.toDate, this.state.displayOntology);
115115
// if an item is in the itemsWithinFieldtrips, change what is displayed, NOT items list
116116
var displayList = [];
117117
// if it isn't a fieldtrip
@@ -155,65 +155,50 @@ class Navigation extends Component {
155155
}
156156

157157
// sets time filters
158-
timeFilterHandler() {
159-
let fromDateForm = parseInt(this.refs.fromDate.value, 10);
160-
let toDateForm = parseInt(this.refs.toDate.value, 10);
161-
// check if the dates are valid dates (4 digits, between 1887 and 1899)
162-
if (fromDateForm >= 1887 && toDateForm <= 1899) {
163-
// check if time filter was switched
164-
if (this.refs.TimeFilterOn.checked !== this.state.timeFilterOn) {
165-
// if they are, then set this.state variables
158+
timeFilterHandler(filter, event) {
159+
switch (filter) {
160+
case "fromDate":
166161
this.setState({
167-
"timeFilterOn": !this.state.timeFilterOn,
168-
"fromDate": fromDateForm,
169-
"toDate": toDateForm,
170-
}, () => {
171-
this.updateItems.bind(this)();
162+
"fromDate": event.target.value,
163+
}, function() {
164+
// check if the dates are valid dates (4 digits, between 1887 and 1899)
165+
if (this.state.fromDate >= 1887) {
166+
this.updateItems();
167+
}
172168
});
173-
} else {
174-
// just change from/to dates
169+
break;
170+
case "toDate":
175171
this.setState({
176-
"fromDate": fromDateForm,
177-
"toDate": toDateForm,
178-
}, () => {
179-
this.updateItems.bind(this)();
172+
"toDate": event.target.value,
173+
}, function() {
174+
// check if the dates are valid dates (4 digits, between 1887 and 1899)
175+
if (this.state.toDate <= 1899) {
176+
this.updateItems();
177+
}
180178
});
181-
}
179+
break;
180+
case "timelineFilter":
181+
this.setState({
182+
"timeFilterOn": event.target.checked,
183+
}, function() {
184+
this.updateItems();
185+
});
186+
break;
187+
default:
188+
console.warn(`Invalid filter: ${filter}`);
182189
}
183190
}
184191

185192
timeInputClickHandler(year) {
186-
// display slider
187-
if (year === "ToYear") {
188-
// set this.state.toSelect = true
189-
this.setState(() => {
190-
return {"toSelect": true};
191-
});
192-
} else {
193-
// set this.state.fromSelect = true
194-
this.setState(() => {
195-
return {"fromSelect": true};
196-
});
197-
}
193+
this.setState({
194+
[year === "ToYear" ? "toSelect" : "fromSelect"]: true,
195+
});
198196
}
199197

200198
timeInputEnd(year) {
201-
// display slider
202-
if (year === "toDate") {
203-
// set this.state.toSelect = true
204-
this.setState(() => {
205-
return {"toSelect": false};
206-
}, () => {
207-
this.timeFilterHandler.bind(this);
208-
});
209-
} else {
210-
// set this.state.fromSelect = true
211-
this.setState(() => {
212-
return {"fromSelect": false};
213-
}, () => {
214-
this.timeFilterHandler.bind(this);
215-
});
216-
}
199+
this.setState({
200+
[year === "toDate" ? "toSelect" : "fromSelect"]: false,
201+
});
217202
}
218203

219204
flipSearch(CurrentState) {
@@ -285,7 +270,7 @@ class Navigation extends Component {
285270
<div className="medium-2 medium-offset-1 cell">
286271
<div className="switch">
287272
<input className="switch-input" id="exampleSwitch" type="checkbox" checked={this.state.timeFilterOn}
288-
name="exampleSwitch" onChange={this.timeFilterHandler.bind(this)} ref="TimeFilterOn" />
273+
name="exampleSwitch" onChange={this.timeFilterHandler.bind(this, "timelineFilter")} />
289274
<label className="switch-paddle" htmlFor="exampleSwitch"><br />
290275
<span style={{"fontSize": ".8em", "color": "black", "width": "150%"}}>Timeline</span>
291276
<span className="show-for-sr">Enable Timeline</span>
@@ -294,38 +279,56 @@ class Navigation extends Component {
294279
</div>
295280
<div className="medium-2 cell text"><b>From</b></div>
296281
<div className="medium-2 cell">
297-
<input className="year" type="text" name="FromYear" ref="fromDate"
282+
<input
283+
className="year"
284+
type="number"
285+
name="FromYear"
286+
min={1887}
287+
max={this.state.toDate}
298288
value={this.state.fromDate}
299-
onChange={this.timeFilterHandler.bind(this)} onClick={(e) => {
289+
onChange={this.timeFilterHandler.bind(this, "fromDate")}
290+
onClick={(e) => {
300291
e.preventDefault();
301292
this.timeInputClickHandler.bind(this)("FromYear");
302293
}} />
303-
<input className={`slider ${this.state.fromSelect ? "active" : ""}`}
304-
type="range" min="1887" max={this.state.toDate} value={this.state.fromDate}
305-
onChange={this.timeFilterHandler.bind(this)}
294+
<input
295+
className={`slider ${this.state.fromSelect ? "active" : ""}`}
296+
type="range"
297+
min="1887"
298+
max={this.state.toDate}
299+
value={this.state.fromDate}
300+
onChange={this.timeFilterHandler.bind(this, "fromDate")}
306301
onMouseUp={(e) => {
307302
e.preventDefault();
308303
this.timeInputEnd.bind(this)("fromDate");
309304
}}
310-
ref="fromDate"
311305
id="myRange" />
312306
</div>
313307
<div className="medium-1 cell text"><b>To</b></div>
314308
<div className="medium-2 cell">
315-
<input className="year" type="text" name="ToYear" ref="toDate"
309+
<input
310+
className="year"
311+
type="number"
312+
name="ToYear"
313+
min={this.state.fromDate}
314+
max={1899}
316315
value={this.state.toDate}
317-
onChange={this.timeFilterHandler.bind(this)} onClick={(e) => {
316+
onChange={this.timeFilterHandler.bind(this, "toDate")}
317+
onClick={(e) => {
318318
e.preventDefault();
319319
this.timeInputClickHandler.bind(this)("ToYear");
320320
}} />
321-
<input className={`slider ${this.state.toSelect ? "active" : ""}`}
322-
type="range" min={this.state.fromDate} max="1899" value={this.state.toDate}
323-
onChange={this.timeFilterHandler.bind(this)}
321+
<input
322+
className={`slider ${this.state.toSelect ? "active" : ""}`}
323+
type="range"
324+
min={this.state.fromDate}
325+
max="1899"
326+
value={this.state.toDate}
327+
onChange={this.timeFilterHandler.bind(this, "toDate")}
324328
onMouseUp={(e) => {
325329
e.preventDefault();
326330
this.timeInputEnd.bind(this)("toDate");
327331
}}
328-
ref="toDate"
329332
id="myRange" />
330333
</div>
331334
</form>

0 commit comments

Comments
 (0)