{this.state.loadingOptions ? (
@@ -77,16 +103,34 @@ export default class OTypeahead extends Typeahead {
)
) : (
(this.inputRef = ref)} onFocus={this._onFocus}>
- (this.entryRef = ref)}
- type={this.state.datatype == "number" ? "number" : "text"}
- placeholder={this.props.placeholder}
- className={inputClassList}
- defaultValue={this.state.entryValue}
- onChange={this._onTextEntryUpdated}
- onKeyDown={this._onKeyDown}
- disabled={this.props.disabled}
- />
+ {this.state.datatype == "query" ? (
+ (this.entryRef = ref)}
+ type={this.state.datatype}
+ placeholder={this.props.placeholder}
+ defaultValue={this.state.entryValue}
+ parentCallBack={this.props.parentCallBack}
+ disabled={this.props.disabled}
+ updatedInputText={this._onTextEntryUpdated}
+ defaultSelected={this.props.queryValueToEdit}
+ parentSetEntryText={this.setEntryText}
+ {...this.props}
+ />
+ ) : (
+
+ (this.entryRef = ref)}
+ type={this.state.datatype == "number" ? "number" : "text"}
+ placeholder={this.props.placeholder}
+ className={inputClassList}
+ defaultValue={this.state.entryValue}
+ onChange={this._onTextEntryUpdated}
+ onKeyDown={this._onKeyDown}
+ disabled={this.props.disabled}
+ />
+ {this.props.ediTableTokenId !== null && this.props.ediTableTokenId !== undefined && closeBtn}
+
+ )}
{this._renderIncrementalSearchResults()}
)}
diff --git a/src/lib/react-structured-filter/react-typeahead/tokenizer/index.js b/src/lib/react-structured-filter/react-typeahead/tokenizer/index.js
index 503d37f..da57989 100755
--- a/src/lib/react-structured-filter/react-typeahead/tokenizer/index.js
+++ b/src/lib/react-structured-filter/react-typeahead/tokenizer/index.js
@@ -3,7 +3,7 @@ import propTypes from "prop-types";
import Token from "./token";
import KeyEvent from "../keyevent";
import Typeahead from "../typeahead";
-import classNames from "classNames";
+import classNames from "classnames";
/**
* A typeahead that, when an option is selected, instead of simply filling
@@ -49,12 +49,17 @@ export default class TypeaheadTokenizer extends Component {
this.skipCategorySet = new Set();
this.state = {
selected: [],
+ conditional: "",
category: "",
operator: "",
options: this.props.options,
- focused: false
+ focused: this.props.autoFocus || false,
+ ediTableTokenId: null,
+ queryValueToEdit: null
};
this.state.selected = this.getDefaultSelectedValue();
+ this.queryOptions = [];
+ this.queryResultObj = {};
}
_renderTokens() {
@@ -72,9 +77,12 @@ export default class TypeaheadTokenizer extends Component {
let mykey =
selected.category +
(this.props.isAllowOperator ? selected.operator : "") +
- (typeof selected.value == "string" ? selected.value : selected.value[fuzzySearchKeyAttribute]) +
+ (selected.value ? (typeof selected.value == "string" ? selected.value : selected.value[fuzzySearchKeyAttribute]) : "") +
index;
- return (
+
+ return this.state.ediTableTokenId === index ? (
+ this._getTypeahed({ mykey, show: true })
+ ) : (
{selected}
@@ -94,7 +105,8 @@ export default class TypeaheadTokenizer extends Component {
if (this.state.category == "") {
var categories = [];
for (var i = 0; i < this.state.options.length; i++) {
- categories.push(this.state.options[i].category);
+ const _category = this._getCategoryName(this.state.options[i].category);
+ categories.push(_category);
}
return categories;
} else if (this.state.operator == "") {
@@ -118,6 +130,14 @@ export default class TypeaheadTokenizer extends Component {
return this.state.options;
}
+ _getCategoryName(category, displayTextFlag) {
+ let _category = category;
+ if (category.toString() === "[object Object]") {
+ _category = displayTextFlag ? category.displayName || category.name : category.name;
+ }
+ return _category;
+ }
+
_getHeader() {
if (this.state.category == "") {
return "Category";
@@ -126,13 +146,11 @@ export default class TypeaheadTokenizer extends Component {
} else {
return "Value";
}
-
- return this.state.options;
}
_getCategoryType() {
for (var i = 0; i < this.state.options.length; i++) {
- if (this.state.options[i].category == this.state.category) {
+ if (this._getCategoryName(this.state.options[i].category) == this.state.category) {
return this.state.options[i].type;
}
}
@@ -140,7 +158,7 @@ export default class TypeaheadTokenizer extends Component {
_getCategoryOptions() {
for (var i = 0; i < this.state.options.length; i++) {
- if (this.state.options[i].category == this.state.category) {
+ if (this._getCategoryName(this.state.options[i].category) == this.state.category) {
return this.state.options[i].options;
}
}
@@ -151,7 +169,6 @@ export default class TypeaheadTokenizer extends Component {
if (event.keyCode !== KeyEvent.DOM_VK_BACK_SPACE) {
return;
}
-
// Remove token ONLY when bksp pressed at beginning of line
// without a selection
var entry = this.typeaheadRef.getInputRef();
@@ -160,12 +177,20 @@ export default class TypeaheadTokenizer extends Component {
this.setState({ operator: "" });
} else if (this.state.category != "") {
this.setState({ category: "" });
+ } else if (this.state.conditional != "") {
+ this.setState({ conditional: "" });
} else {
// No tokens
if (!this.state.selected.length) {
+ if (this.props.emptyParentCategoryState) {
+ this.props.emptyParentCategoryState();
+ }
return;
}
- this._removeTokenForValue(this.state.selected[this.state.selected.length - 1]);
+ if (this.state.ediTableTokenId === null || this.state.ediTableTokenId === undefined) {
+ this.state.queryValueToEdit = null;
+ }
+ this.state.ediTableTokenId === null && this._removeTokenForValue(this.state.selected[this.state.selected.length - 1]);
}
event.preventDefault();
}
@@ -184,6 +209,30 @@ export default class TypeaheadTokenizer extends Component {
return;
};
+ _editTokenForValue = value => {
+ const index = this.state.selected.indexOf(value),
+ type = this.state.options.find(o => this._getCategoryName(o.category) === value.category).type;
+ let queryVal = null;
+ if (type === "query") {
+ queryVal = value.value.trim().substr(0, value.value.trim().length - 1);
+ }
+ this.setState(
+ {
+ conditional: value.conditional || "",
+ category: value.category || "",
+ operator: value.operator,
+ value: null,
+ ediTableTokenId: index,
+ focused: true,
+ queryValueToEdit: queryVal
+ },
+ () =>
+ setTimeout(() => {
+ this._focusInput();
+ }, 0)
+ );
+ };
+
_addTokenForValue = value => {
if (this.state.category == "") {
this.setState({ category: value });
@@ -224,7 +273,7 @@ export default class TypeaheadTokenizer extends Component {
}
}
- _getTypeahed({ classList }) {
+ _getTypeahed() {
return (
(this.typeaheadRef = ref)}
@@ -242,24 +291,31 @@ export default class TypeaheadTokenizer extends Component {
}
render() {
- var classes = {};
- classes[this.props.customClasses.typeahead] = !!this.props.customClasses.typeahead;
- var classList = classNames(classes);
+ var classes = {
+ "filter-tokenizer": true
+ };
+ classes[this.props.customClasses.query] = this.props.customClasses.query;
+ var classList = classNames(classes, {
+ "padding-for-clear-all": this.props.isAllowClearAll,
+ disabled: this.props.disabled
+ });
return (
{
this.node = node;
}}
>
{this._renderTokens()}
-
-
{this.state.category}
-
{this.state.operator}
-
- {this._getTypeahed({ classList })}
-
+ {this.state.ediTableTokenId === null && (
+
+
{this.state.conditional}
+
{this.state.category}
+
{this.state.operator}
+ {this._getTypeahed({ show: false })}
+
+ )}
{this.props.isAllowClearAll ? this._getClearAllButton() : null}
(this.listParentRef = ref)}>
{this.props.fromTokenizer === true && this.props.isAllowSearchDropDownHeader === true ? (
diff --git a/src/lib/react-structured-filter/scss/style.scss b/src/lib/react-structured-filter/scss/style.scss
index 9a6a76f..f8104a5 100644
--- a/src/lib/react-structured-filter/scss/style.scss
+++ b/src/lib/react-structured-filter/scss/style.scss
@@ -41,7 +41,7 @@
}
ul.typeahead-selector {
z-index: 100;
- position: absolute;
+ position: fixed;
list-style: none;
margin: 0;
padding: 0;
@@ -80,10 +80,16 @@
cursor: not-allowed;
}
}
+ a.group-items {
+ padding: 5px 0px 5px 10px;
+ }
}
.hover a {
@extend %extend_2;
}
+ li.group-title {
+ padding: 5px;
+ }
}
}
@@ -156,10 +162,34 @@
margin: 3px;
padding: 5px;
font-weight: bold;
+ .typeahead-token-close,
+ .typeahead-token-edit {
+ visibility: hidden;
+ text-decoration: none;
+ }
+
+ &:hover > .typeahead-token-close,
+ &:hover > .typeahead-token-edit {
+ visibility: visible;
+ }
+ }
+
+ .filter-tokenizer.custom-query {
+ border: none;
+ margin-top: -7px;
+ width: 100%;
+ .token-collection{
+ .typeahead-token {
+ background-color: transparent;
+ background-image: none;
+ border: none;
+ margin: 3px 0;
+ }
+ }
}
ul.typeahead-selector {
z-index: 100;
- position: absolute;
+ position: fixed;
list-style: none;
margin: 0;
padding: 0;
@@ -213,6 +243,9 @@
margin: 3px;
padding: 5px;
float: left;
+ .filter-conditional {
+ @extend %filter-popup;
+ }
.filter-category {
@extend %filter-popup;
}
@@ -344,4 +377,11 @@
&:focus {
outline: none;
}
-}
\ No newline at end of file
+}
+.token-text:hover {
+ cursor: pointer;
+ text-decoration: underline;
+}
+.filter-tokenizer .typeahead input.editMode {
+ width: 90%;
+}