+
{this.props.isWithinAttrTbl ? this.renderOperatorField() : null}
{this.renderTooltip(this.renderInput())}
@@ -137,8 +152,15 @@ class AttributeFilter extends React.PureComponent {
}
handleChange = (e) => {
const value = e.target.value;
- this.setState({value});
- this.props.onChange({value, attribute: this.props.column && this.props.column.key, inputOperator: this.state.operator});
+ // todo: validate input based on type
+ let isValid = true;
+ const match = /\s*(!==|!=|<>|<=|>=|===|==|=|<|>)?(.*)/.exec(value);
+ if (match[1]) isValid = false;
+ if (match[2]) {
+ if (['integer', 'number'].includes(this.props.type) && isNaN(match[2])) isValid = false;
+ }
+ this.setState({value, isInputValid: isValid});
+ if (isValid) this.props.onChange({value, attribute: this.props.column && this.props.column.key, inputOperator: this.state.operator});
}
}
diff --git a/web/client/components/data/featuregrid/filterRenderers/__tests__/NumberFilter-test.jsx b/web/client/components/data/featuregrid/filterRenderers/__tests__/NumberFilter-test.jsx
index 04af11804b..722c68b837 100644
--- a/web/client/components/data/featuregrid/filterRenderers/__tests__/NumberFilter-test.jsx
+++ b/web/client/components/data/featuregrid/filterRenderers/__tests__/NumberFilter-test.jsx
@@ -33,15 +33,17 @@ const EXPRESSION_TESTS = [
[" ", "=", undefined],
["ZZZ", "=", undefined]
];
-const testExpression = (spyonChange, spyonValueChange, rawValue, expectedOperator, expectedValue) => {
+const testExpression = (spyonChange, spyonValueChange, rawValue, expectedOperator, expectedValue, index) => {
const input = document.getElementsByTagName("input")[0];
input.value = rawValue;
ReactTestUtils.Simulate.change(input);
- const args = spyonChange.calls[spyonChange.calls.length - 1].arguments[0];
- const valueArgs = spyonValueChange.calls[spyonValueChange.calls.length - 1].arguments[0];
- expect(args.value).toBe(expectedValue);
- expect(args.operator).toBe(expectedOperator);
- expect(valueArgs).toBe(rawValue);
+ const args = spyonChange.calls[index]?.arguments[0];
+ const valueArgs = spyonValueChange.calls[index]?.arguments[0];
+ if (valueArgs) { // in case of invalid number expression it will be undefined
+ expect(args.value).toBe(expectedValue);
+ expect(args.operator).toBe(expectedOperator);
+ expect(valueArgs).toBe(rawValue);
+ }
};
describe('Test for NumberFilter component', () => {
@@ -75,7 +77,7 @@ describe('Test for NumberFilter component', () => {
ReactDOM.render(
, document.getElementById("container"));
const input = document.getElementsByTagName("input")[0];
- input.value = "> 2";
+ input.value = "2";
ReactTestUtils.Simulate.change(input);
expect(spyonChange).toHaveBeenCalled();
});
@@ -115,6 +117,6 @@ describe('Test for NumberFilter component', () => {
const spyonChange = expect.spyOn(actions, 'onChange');
const spyonValueChange = expect.spyOn(actions, 'onValueChange');
ReactDOM.render(
, document.getElementById("container"));
- EXPRESSION_TESTS.map( params => testExpression(spyonChange, spyonValueChange, ...params));
+ EXPRESSION_TESTS.map( (params, index) => testExpression(spyonChange, spyonValueChange, ...params, index));
});
});
diff --git a/web/client/components/misc/datetimepicker/CustomDateTimePickerWithRange.js b/web/client/components/misc/datetimepicker/CustomDateTimePickerWithRange.js
index 2f9f0e426b..0aa42a4812 100644
--- a/web/client/components/misc/datetimepicker/CustomDateTimePickerWithRange.js
+++ b/web/client/components/misc/datetimepicker/CustomDateTimePickerWithRange.js
@@ -42,7 +42,7 @@ const formats = {
};
/**
- * @name DateTimePicker
+ * @name DateTimePickerWithRange
* The revised react-widget datetimepicker to support operator in addition to date and time.
* This component mimick the react-widget date time picker component behaviours and
* props. Please see https://jquense.github.io/react-widgets/api/DateTimePicker/.
@@ -51,7 +51,7 @@ const formats = {
* considered as operator by this component.
*
*/
-class DateTimePicker extends Component {
+class DateTimePickerWithRange extends Component {
static propTypes = {
format: PropTypes.string,
@@ -89,11 +89,12 @@ class DateTimePicker extends Component {
startDate: '',
endDate: ''
},
- operator: '',
+ operator: '><',
date: { // stored values
startDate: null,
endDate: null
- }
+ },
+ isInputValid: false
}
componentDidMount() {
@@ -114,20 +115,20 @@ class DateTimePicker extends Component {
return format ? format : !time && calendar ? dateFormat : time && !calendar ? timeFormat : defaultFormat;
}
- renderInput = (inputValue, operator, toolTip, placeholder, tabIndex, calendarVisible, timeVisible, disabled, isFullWidth) => {
+ renderInput = (inputValue, operator, toolTip, placeholder, tabIndex, calendarVisible, timeVisible, style) => {
let inputV = this.props.isWithinAttrTbl ? `${inputValue}` : `${operator}${inputValue}`;
if (toolTip) {
return (
{toolTip}}>
-
+
);
}
- return (
);
+ return (
);
}
renderHoursRange = () =>{
const { inputValue, operator, focused, openRangeInputs, openTime } = this.state;
const { placeholder, tabIndex } = this.props;
const props = Object.keys(this.props).reduce((acc, key) => {
- if (['placeholder', 'calendar', 'time', 'onChange', 'value'].includes(key)) {
+ if (['placeholder', 'calendar', 'time', 'onChange', 'value', 'toolTip', 'onMouseOver'].includes(key)) {
// remove these props because they might have undesired effects to the subsequent components
return acc;
}
@@ -136,23 +137,23 @@ class DateTimePicker extends Component {
}, {});
return (
-
+
-
+
Start
{inputValue.startDate || 'Please Enter ...' }
-
+
End
{inputValue.endDate || 'Please Enter ...' }
-
-
+
+
{this.renderInput(inputValue.startDate, operator, '', placeholder, tabIndex, false, true)}
-
+
{this.renderInput(inputValue.endDate, operator, '', placeholder, tabIndex, false, true)}