diff options
Diffstat (limited to 'src/client/views')
| -rw-r--r-- | src/client/views/collections/CollectionMenu.tsx | 173 |
1 files changed, 101 insertions, 72 deletions
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index aa1765c14..cfbcec2d6 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -311,25 +311,49 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu }, }; - @computed get _freeform_commands() { return Doc.noviceMode ? [this._viewCommand, this._saveFilterCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; } - @computed get _stacking_commands() { return Doc.noviceMode ? undefined : [this._contentCommand, this._templateCommand]; } - @computed get _notetaking_commands() { return Doc.noviceMode ? undefined : [this._contentCommand, this._templateCommand]; } - @computed get _masonry_commands() { return Doc.noviceMode ? undefined : [this._contentCommand, this._templateCommand]; } - @computed get _schema_commands() { return Doc.noviceMode ? undefined : [this._templateCommand, this._narrativeCommand]; } - @computed get _doc_commands() { return Doc.noviceMode ? undefined : [this._openLinkInCommand, this._onClickCommand]; } - @computed get _tree_commands() { return undefined; } + @computed get _freeform_commands() { + return Doc.noviceMode ? [this._viewCommand, this._saveFilterCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; + } + @computed get _stacking_commands() { + return Doc.noviceMode ? undefined : [this._contentCommand, this._templateCommand]; + } + @computed get _notetaking_commands() { + return Doc.noviceMode ? undefined : [this._contentCommand, this._templateCommand]; + } + @computed get _masonry_commands() { + return Doc.noviceMode ? undefined : [this._contentCommand, this._templateCommand]; + } + @computed get _schema_commands() { + return Doc.noviceMode ? undefined : [this._templateCommand, this._narrativeCommand]; + } + @computed get _doc_commands() { + return Doc.noviceMode ? undefined : [this._openLinkInCommand, this._onClickCommand]; + } + @computed get _tree_commands() { + return undefined; + } private get _buttonizableCommands() { switch (this.props.type) { - default: return this._doc_commands; - case CollectionViewType.Freeform: return this._freeform_commands; - case CollectionViewType.Tree: return this._tree_commands; - case CollectionViewType.Schema: return this._schema_commands; - case CollectionViewType.Stacking: return this._stacking_commands; - case CollectionViewType.NoteTaking: return this._notetaking_commands; - case CollectionViewType.Masonry: return this._stacking_commands; - case CollectionViewType.Time: return this._freeform_commands; - case CollectionViewType.Carousel: return this._freeform_commands; - case CollectionViewType.Carousel3D: return this._freeform_commands; + default: + return this._doc_commands; + case CollectionViewType.Freeform: + return this._freeform_commands; + case CollectionViewType.Tree: + return this._tree_commands; + case CollectionViewType.Schema: + return this._schema_commands; + case CollectionViewType.Stacking: + return this._stacking_commands; + case CollectionViewType.NoteTaking: + return this._notetaking_commands; + case CollectionViewType.Masonry: + return this._stacking_commands; + case CollectionViewType.Time: + return this._freeform_commands; + case CollectionViewType.Carousel: + return this._freeform_commands; + case CollectionViewType.Carousel3D: + return this._freeform_commands; } } private _commandRef = React.createRef<HTMLInputElement>(); @@ -363,12 +387,18 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu default: return this.otherSubChrome; case CollectionViewType.Invalid: - case CollectionViewType.Freeform: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={this.props.type === CollectionViewType.Invalid} />); - case CollectionViewType.Stacking: return (<CollectionStackingViewChrome key="collchrome" {...this.props} />); - case CollectionViewType.NoteTaking: return (<CollectionNoteTakingViewChrome key="collchrome" {...this.props} />); - case CollectionViewType.Schema: return (<CollectionSchemaViewChrome key="collchrome" {...this.props} />); - case CollectionViewType.Tree: return (<CollectionTreeViewChrome key="collchrome" {...this.props} />); - case CollectionViewType.Masonry: return (<CollectionStackingViewChrome key="collchrome" {...this.props} />); + case CollectionViewType.Freeform: + return <CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={this.props.type === CollectionViewType.Invalid} />; + case CollectionViewType.Stacking: + return <CollectionStackingViewChrome key="collchrome" {...this.props} />; + case CollectionViewType.NoteTaking: + return <CollectionNoteTakingViewChrome key="collchrome" {...this.props} />; + case CollectionViewType.Schema: + return <CollectionSchemaViewChrome key="collchrome" {...this.props} />; + case CollectionViewType.Tree: + return <CollectionTreeViewChrome key="collchrome" {...this.props} />; + case CollectionViewType.Masonry: + return <CollectionStackingViewChrome key="collchrome" {...this.props} />; case CollectionViewType.Carousel: case CollectionViewType.Carousel3D: return <Collection3DCarouselViewChrome key="collchrome" {...this.props} />; @@ -1124,13 +1154,19 @@ export class CollectionStackingViewChrome extends React.Component<CollectionView @observer export class CollectionNoteTakingViewChrome extends React.Component<CollectionViewMenuProps> { - @observable private _currentKey: string = ""; + @observable private _currentKey: string = ''; @observable private suggestions: string[] = []; - get document() { return this.props.docView.props.Document; } + get document() { + return this.props.docView.props.Document; + } - @computed private get descending() { return StrCast(this.document._columnsSort) === "descending"; } - @computed get pivotField() { return StrCast(this.document._pivotField); } + @computed private get descending() { + return StrCast(this.document._columnsSort) === 'descending'; + } + @computed get pivotField() { + return StrCast(this.document._pivotField); + } getKeySuggestions = async (value: string): Promise<string[]> => { const val = value.toLowerCase(); @@ -1138,16 +1174,14 @@ export class CollectionNoteTakingViewChrome extends React.Component<CollectionVi if (Doc.UserDoc().noviceMode) { if (docs instanceof Doc) { - const keys = Object.keys(docs).filter(key => key.indexOf("title") >= 0 || key.indexOf("author") >= 0 || - key.indexOf("creationDate") >= 0 || key.indexOf("lastModified") >= 0 || - (key[0].toUpperCase() === key[0] && key[0] !== "_")); + const keys = Object.keys(docs).filter(key => key.indexOf('title') >= 0 || key.indexOf('author') >= 0 || key.indexOf('creationDate') >= 0 || key.indexOf('lastModified') >= 0 || (key[0].toUpperCase() === key[0] && key[0] !== '_')); return keys.filter(key => key.toLowerCase().indexOf(val) > -1); } else { const keys = new Set<string>(); docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key))); - const noviceKeys = Array.from(keys).filter(key => key.indexOf("title") >= 0 || key.indexOf("author") >= 0 || - key.indexOf("creationDate") >= 0 || key.indexOf("lastModified") >= 0 || - (key[0]?.toUpperCase() === key[0] && key[0] !== "_")); + const noviceKeys = Array.from(keys).filter( + key => key.indexOf('title') >= 0 || key.indexOf('author') >= 0 || key.indexOf('creationDate') >= 0 || key.indexOf('lastModified') >= 0 || (key[0]?.toUpperCase() === key[0] && key[0] !== '_') + ); return noviceKeys.filter(key => key.toLowerCase().indexOf(val) > -1); } } @@ -1159,81 +1193,77 @@ export class CollectionNoteTakingViewChrome extends React.Component<CollectionVi docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key))); return Array.from(keys).filter(key => key.toLowerCase().indexOf(val) > -1); } - } + }; @action onKeyChange = (e: React.ChangeEvent, { newValue }: { newValue: string }) => { this._currentKey = newValue; - } + }; getSuggestionValue = (suggestion: string) => suggestion; renderSuggestion = (suggestion: string) => { return <p>{suggestion}</p>; - } + }; onSuggestionFetch = async ({ value }: { value: string }) => { const sugg = await this.getKeySuggestions(value); runInAction(() => { this.suggestions = sugg; }); - } + }; @action onSuggestionClear = () => { this.suggestions = []; - } + }; @action setValue = (value: string) => { this.document._pivotField = value; return true; - } + }; @action toggleSort = () => { - this.document._columnsSort = - this.document._columnsSort === "descending" ? "ascending" : - this.document._columnsSort === "ascending" ? undefined : "descending"; - } - @action resetValue = () => { this._currentKey = this.pivotField; }; + this.document._columnsSort = this.document._columnsSort === 'descending' ? 'ascending' : this.document._columnsSort === 'ascending' ? undefined : 'descending'; + }; + @action resetValue = () => { + this._currentKey = this.pivotField; + }; render() { const doctype = this.props.docView.Document.type; - const isPres: boolean = (doctype === DocumentType.PRES); - return ( - isPres ? (null) : <div className="collectionStackingViewChrome-cont"> + const isPres: boolean = doctype === DocumentType.PRES; + return isPres ? null : ( + <div className="collectionStackingViewChrome-cont"> <div className="collectionStackingViewChrome-pivotField-cont"> - <div className="collectionStackingViewChrome-pivotField-label"> - GROUP BY: - </div> - <div className="collectionStackingViewChrome-sortIcon" onClick={this.toggleSort} style={{ transform: `rotate(${this.descending ? "180" : "0"}deg)` }}> + <div className="collectionStackingViewChrome-pivotField-label">GROUP BY:</div> + <div className="collectionStackingViewChrome-sortIcon" onClick={this.toggleSort} style={{ transform: `rotate(${this.descending ? '180' : '0'}deg)` }}> <FontAwesomeIcon icon="caret-up" size="2x" color="white" /> </div> <div className="collectionStackingViewChrome-pivotField"> <EditableView GetValue={() => this.pivotField} - autosuggestProps={ - { - resetValue: this.resetValue, - value: this._currentKey, - onChange: this.onKeyChange, - autosuggestProps: { - inputProps: - { - value: this._currentKey, - onChange: this.onKeyChange - }, - getSuggestionValue: this.getSuggestionValue, - suggestions: this.suggestions, - alwaysRenderSuggestions: true, - renderSuggestion: this.renderSuggestion, - onSuggestionsFetchRequested: this.onSuggestionFetch, - onSuggestionsClearRequested: this.onSuggestionClear - } - }} + autosuggestProps={{ + resetValue: this.resetValue, + value: this._currentKey, + onChange: this.onKeyChange, + autosuggestProps: { + inputProps: { + value: this._currentKey, + onChange: this.onKeyChange, + }, + getSuggestionValue: this.getSuggestionValue, + suggestions: this.suggestions, + alwaysRenderSuggestions: true, + renderSuggestion: this.renderSuggestion, + onSuggestionsFetchRequested: this.onSuggestionFetch, + onSuggestionsClearRequested: this.onSuggestionClear, + }, + }} oneLine SetValue={this.setValue} - contents={this.pivotField ? this.pivotField : "N/A"} + contents={this.pivotField ? this.pivotField : 'N/A'} /> </div> </div> @@ -1242,7 +1272,6 @@ export class CollectionNoteTakingViewChrome extends React.Component<CollectionVi } } - @observer export class CollectionSchemaViewChrome extends React.Component<CollectionViewMenuProps> { // private _textwrapAllRows: boolean = Cast(this.document.textwrappedSchemaRows, listSpec("string"), []).length > 0; |