...
 
Commits (6)
/* CSS TO INTEGRATE INTO THE JSX */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
......@@ -9,3 +10,8 @@ input[type='number']::-webkit-outer-spin-button {
input[type='number'] {
-moz-appearance: textfield;
}
/* TESTING CSS */
input:required {
background: pink;
}
This diff is collapsed.
......@@ -2,7 +2,6 @@ import React from 'react';
import PropTypes from 'prop-types';
import NumberInput from './NumberInput';
import makeCharacterRegex from '../utilities/makeRegex';
// import makeCharacterRegex from '../utilities/makeRegex';
//TODO: One single search bar, comprising the three query parameters: inputs for title & year (validated input/dropdown?) & dropdown for type
const QUERY_TYPES = {
......@@ -11,15 +10,7 @@ const QUERY_TYPES = {
type: 'type'
};
const isValidYear = yearString => {
const result = yearString.match(/[0-9]{4}/)[0];
console.log('Logged Output: result', result);
};
const MAX_YEAR = new Date().getFullYear() + 10;
console.log('Logged Output: MAX_YEAR', MAX_YEAR);
// const isValidQuery = () => this.state.title || this.state.year || this.state.type.
class SearchBar extends React.Component {
constructor(props) {
......@@ -33,31 +24,22 @@ class SearchBar extends React.Component {
};
}
handleTitleChange = evt => {
console.log(evt.target.value);
this.setState({ title: evt.target.value });
};
handleYearChange = evt => {
const numValue = parseFloat(evt.target.value);
console.log(
'%cLogged Output: in change, newValue',
'background: teal',
numValue,
'target',
evt.target,
'data-value-buffer',
evt.target.getAttribute('data-numeric-value')
);
// console.trace();
const match = numValue.toString().match(/\d{0,4}/)[0];
console.log('Logged Output: in change, match', match);
// if (match) {
console.log(
`SearchBar.handleYearChange: year (${
evt.target.value
}), yearFloat (${evt.target.getAttribute('data-numeric-value')})`
);
this.setState({
year: evt.target.value,
yearFloat: parseFloat(evt.target['data-numeric-value'])
yearFloat: parseFloat(evt.target.getAttribute('data-numeric-value'))
});
// }
};
render() {
......@@ -69,32 +51,35 @@ class SearchBar extends React.Component {
onChange={this.handleTitleChange}
/>
<br />
{/* <input
value={this.state.year}
type='number'
min='1901'
max={MAX_YEAR}
onChange={this.handleYearChange}
/> */}
{this.state.title}
<br />
<NumberInput
placeholder='Enter Year'
value={this.state.year}
maxDecimalPlaces={4}
requireLeadingZero={true}
maxIntegerPlaces={4}
maxDecimalPlaces={2}
requireLeadingZeroForDecimals={true}
allowNegatives={false}
min={1901}
max={MAX_YEAR}
// onKeyDown={this.handleYearKeyDown}
onChange={this.handleYearChange}
id={'number-input'}
required
// onlyValidateOnSubmit={true}
/>
{/* <Input placeholder={`Enter Title`} />
<Input placeholder={`Enter Year`} />
<Input placeholder={`Enter Type`} /> */}
{/* <button
// disabled={!isValidQueryType(props.query).toString()}
disabled={!isValidQueryType(props.query)}
>{`Search by ${props.query}`}</button> */}
{/* <input
type='number'
value={this.state.year}
onChange={this.handleYearChange}
/> */}
<br />
As target.value:
{this.state.year}
<br />
As a float:
{this.state.yearFloat}
{/* <br />
{numInputWidth} */}
<br />
<input type='submit' />
</form>
......
......@@ -44,7 +44,6 @@ function makeCharacterRegex(optionString, minRepeats, maxRepeats) {
patternAtoms[character] = true;
}
// console.log('min max', minRepeats, maxRepeats);
let repeatString = '';
if (parseInt(minRepeats) === minRepeats) {
let maxRepeatsErrorCondition = '';
......@@ -81,7 +80,6 @@ function makeCharacterRegex(optionString, minRepeats, maxRepeats) {
}
return new RegExp(`[${Object.keys(patternAtoms).join('')}]${repeatString}`);
// return `/[${Object.keys(patternAtoms).join('')}]${repeatString}/`;
}
function testMakeCharacterRegex() {
......