diff options
| -rw-r--r-- | src/client/views/FieldsDropdown.tsx | 18 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionPivotView.tsx | 8 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionStackingView.tsx | 9 |
3 files changed, 17 insertions, 18 deletions
diff --git a/src/client/views/FieldsDropdown.tsx b/src/client/views/FieldsDropdown.tsx index e7ab6a180..74ff8ffd4 100644 --- a/src/client/views/FieldsDropdown.tsx +++ b/src/client/views/FieldsDropdown.tsx @@ -6,7 +6,7 @@ * this list is then pruned down to only include fields that are not marked in Documents.ts to be non-filterable */ -import { computed, makeObservable, observable, runInAction } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import Select from 'react-select'; @@ -24,6 +24,7 @@ interface fieldsDropdownProps { placeholder?: string | (() => string); showPlaceholder?: true; // if true, then input field always shows the placeholder value; otherwise, it shows the current selection addedFields?: string[]; + isInactive?: boolean; } @observer @@ -57,10 +58,11 @@ export class FieldsDropdown extends ObservableReactComponent<fieldsDropdownProps const filteredOptions = ['author', ...(this._newField ? [this._newField] : []), ...(this._props.addedFields ?? []), ...this.fieldsOfDocuments.filter(facet => facet[0] === facet.charAt(0).toUpperCase())]; Object.entries(DocOptions) - .filter(opts => opts[1].filterable) - .forEach((pair: [string, FInfo]) => filteredOptions.push(pair[0])); + .filter(opts => opts[1] instanceof FInfo && opts[1].filterable) + .forEach((pair: [string, unknown]) => filteredOptions.push(pair[0])); const options = filteredOptions.sort().map(facet => ({ value: facet, label: facet })); + console.log(this._props.isInactive); return ( <Select styles={{ @@ -77,11 +79,13 @@ export class FieldsDropdown extends ObservableReactComponent<fieldsDropdownProps ...baseStyles, color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor, + display: this._props.isInactive ? 'none' : undefined, }), placeholder: (baseStyles /* , state */) => ({ ...baseStyles, color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor, + display: this._props.isInactive ? 'none' : undefined, }), input: (baseStyles /* , state */) => ({ ...baseStyles, @@ -104,14 +108,12 @@ export class FieldsDropdown extends ObservableReactComponent<fieldsDropdownProps options={options} isMulti={false} onChange={val => this._props.selectFunc((val as { value: string; label: string }).value)} - onKeyDown={e => { + onKeyDown={action(e => { if (e.key === 'Enter') { - runInAction(() => { - this._props.selectFunc((this._newField = (e.nativeEvent.target as HTMLSelectElement)?.value)); - }); + this._props.selectFunc((this._newField = (e.nativeEvent.target as HTMLSelectElement)?.value)); } e.stopPropagation(); - }} + })} onMenuClose={this._props.menuClose} closeMenuOnSelect value={this._props.showPlaceholder ? null : undefined} diff --git a/src/client/views/collections/CollectionPivotView.tsx b/src/client/views/collections/CollectionPivotView.tsx index 4736070c3..5487315f0 100644 --- a/src/client/views/collections/CollectionPivotView.tsx +++ b/src/client/views/collections/CollectionPivotView.tsx @@ -102,13 +102,7 @@ export class CollectionPivotView extends CollectionSubView() { <div className="collectionTimeView-pivot" style={{ width: this._props.PanelWidth(), height: '100%' }}> {this.contents} <div style={{ right: 0, top: 0, position: 'absolute' }}> - <FieldsDropdown - Doc={this.Document} - selectFunc={fieldKey => { - this.layoutDoc._pivotField = fieldKey; - }} - placeholder={StrCast(this.layoutDoc._pivotField)} - /> + <FieldsDropdown Doc={this.Document} isInactive={!this._props.isContentActive()} selectFunc={fieldKey => (this.layoutDoc._pivotField = fieldKey)} placeholder={StrCast(this.layoutDoc._pivotField)} /> </div> </div> ); diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index cc514f262..4a0ddc631 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -69,7 +69,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection return this._props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden); } @computed get colHeaderData() { - return Cast(this.dataDoc['_' + this.fieldKey + '_columnHeaders'], listSpec(SchemaHeaderField), null); + return Cast(this.dataDoc[this.fieldKey + '_columnHeaders'], listSpec(SchemaHeaderField), null); } @computed get Sections() { @@ -192,7 +192,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection // reset section headers when a new filter is inputted this._disposers.pivotField = reaction( () => this.pivotField, - () => (this.dataDoc['_' + this.fieldKey + '_columnHeaders'] = new List()) + () => (this.dataDoc[this.fieldKey + '_columnHeaders'] = new List()) ); // reset section headers when a new filter is inputted this._disposers.width = reaction( @@ -595,6 +595,9 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection /// add a new group category (column) to the active set of note categories. (e.g., if the pivot field is 'transportation', groups might be 'car', 'plane', 'bike', etc) @action addGroup = (value: string) => { + if (!this.colHeaderData) { + this.dataDoc[this.fieldKey + '_columnHeaders'] = new List(); + } if (value && this.colHeaderData) { this.colHeaderData.push(new SchemaHeaderField(value)); return true; @@ -723,7 +726,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection <EditableView {...editableViewProps} /> </div> <div style={{ right: 0, top: 0, position: 'absolute', display: !this.layoutDoc._pivotField ? 'none' : undefined }}> - <FieldsDropdown Doc={this.Document} selectFunc={fieldKey => (this.layoutDoc._pivotField = fieldKey)} placeholder={StrCast(this.layoutDoc._pivotField)} /> + <FieldsDropdown Doc={this.Document} isInactive={!this._props.isContentActive()} selectFunc={fieldKey => (this.layoutDoc._pivotField = fieldKey)} placeholder={StrCast(this.layoutDoc._pivotField)} /> </div> </div> </div> |