aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections/CollectionCarouselView.tsx
diff options
context:
space:
mode:
authoreleanor-park <eleanor_park@brown.edu>2024-08-27 16:44:12 -0400
committereleanor-park <eleanor_park@brown.edu>2024-08-27 16:44:12 -0400
commit39d2bba7bf4b0cc3759931691640083a48cce662 (patch)
tree8bf110760aa926237b6294aec545f48cfc92747d /src/client/views/collections/CollectionCarouselView.tsx
parent6f73686ec4dc3e01ae3eacc0150aa59eafea0325 (diff)
parentb8a04a0fedf8ef3612395764a0ecd01f6824ebd1 (diff)
Merge branch 'master' into eleanor-gptdraw
Diffstat (limited to 'src/client/views/collections/CollectionCarouselView.tsx')
-rw-r--r--src/client/views/collections/CollectionCarouselView.tsx19
1 files changed, 8 insertions, 11 deletions
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 8b083de15..7ce4ecc2f 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable react/jsx-props-no-spreading */
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { computed, makeObservable } from 'mobx';
@@ -12,13 +10,12 @@ import { Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Typ
import { DocumentType } from '../../documents/DocumentTypes';
import { DragManager } from '../../util/DragManager';
import { ContextMenu } from '../ContextMenu';
-import { ContextMenuProps } from '../ContextMenuItem';
import { StyleProp } from '../StyleProp';
import { DocumentView } from '../nodes/DocumentView';
import { FieldViewProps } from '../nodes/FieldView';
import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
import './CollectionCarouselView.scss';
-import { CollectionSubView } from './CollectionSubView';
+import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
enum cardMode {
PRACTICE = 'practice',
@@ -35,7 +32,7 @@ export class CollectionCarouselView extends CollectionSubView() {
get practiceField() { return this.fieldKey + "_practice"; } // prettier-ignore
get starField() { return this.fieldKey + "_star"; } // prettier-ignore
- constructor(props: any) {
+ constructor(props: SubCollectionViewProps) {
super(props);
makeObservable(this);
}
@@ -124,7 +121,7 @@ export class CollectionCarouselView extends CollectionSubView() {
this.advance(e);
};
- captionStyleProvider = (doc: Doc | undefined, captionProps: Opt<FieldViewProps>, property: string): any => {
+ captionStyleProvider = (doc: Doc | undefined, captionProps: Opt<FieldViewProps>, property: string) => {
// first look for properties on the document in the carousel, then fallback to properties on the container
const childValue = doc?.['caption_' + property] ? this._props.styleProvider?.(doc, captionProps, property) : undefined;
return childValue ?? this._props.styleProvider?.(this.layoutDoc, captionProps, property);
@@ -137,7 +134,7 @@ export class CollectionCarouselView extends CollectionSubView() {
const cm = ContextMenu.Instance;
const revealOptions = cm.findByDescription('Filter Flashcards');
- const revealItems: ContextMenuProps[] = revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : [];
+ const revealItems = revealOptions?.subitems ?? [];
revealItems.push({description: 'All', event: () => {this.layoutDoc.filterOp = undefined;}, icon: 'layer-group',}); // prettier-ignore
revealItems.push({description: 'Star', event: () => {this.layoutDoc.filterOp = cardMode.STAR;}, icon: 'star',}); // prettier-ignore
revealItems.push({description: 'Practice Mode', event: () => {this.layoutDoc.filterOp = cardMode.PRACTICE;}, icon: 'check',}); // prettier-ignore
@@ -163,7 +160,7 @@ export class CollectionCarouselView extends CollectionSubView() {
onDoubleClickScript={this.onContentDoubleClick}
onClickScript={this.onContentClick}
isDocumentActive={this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive}
- isContentActive={this._props.childContentsActive ?? this._props.isContentActive() === false ? returnFalse : emptyFunction}
+ isContentActive={(this._props.childContentsActive ?? this._props.isContentActive() === false) ? returnFalse : emptyFunction}
hideCaptions={!!carouselShowsCaptions} // hide captions if the carousel is configured to show the captions
renderDepth={this._props.renderDepth + 1}
LayoutTemplate={this._props.childLayoutTemplate}
@@ -180,7 +177,7 @@ export class CollectionCarouselView extends CollectionSubView() {
key="caption"
onWheel={StopEvent}
style={{
- borderRadius: this._props.styleProvider?.(this.layoutDoc, captionProps, StyleProp.BorderRounding),
+ borderRadius: this._props.styleProvider?.(this.layoutDoc, captionProps, StyleProp.BorderRounding) as string,
marginRight: this.marginX,
marginLeft: this.marginX,
width: `calc(100% - ${this.marginX * 2}px)`,
@@ -221,8 +218,8 @@ export class CollectionCarouselView extends CollectionSubView() {
ref={this.createDashEventsTarget}
onContextMenu={this.specificMenu}
style={{
- background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor),
- color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color),
+ background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string,
+ color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string,
}}>
{this.content}
{/* Displays a message to the user to add more flashcards if they are in practice mode and no flashcards are there. */}