@pie-element/categorize 0.1.0

package/src/delivery/categorize/index.tsx

@@ -0,0 +1,515 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/src/categorize/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import debug from 'debug';
+import { styled } from '@mui/material/styles';
+import { DragOverlay } from '@dnd-kit/core';
+import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
+import { buildState, removeChoiceFromCategory, moveChoiceToCategory } from '@pie-lib/categorize';
+import { DragProvider, uid } from '@pie-lib/drag';
+import { color, Feedback as FeedbackImport, Collapsible as CollapsibleImport, hasText, hasMedia, PreviewPrompt as PreviewPromptImport, UiLayout as UiLayoutImport } from '@pie-lib/render-ui';
+
+function isRenderableReactInteropType(value: any) {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
+  );
+}
+
+function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
+  if (!maybeSymbol) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
+    return maybeSymbol[namedExport];
+  }
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
+    return maybeSymbol[namedExport].default;
+  }
+  return maybeSymbol;
+}
+const UiLayout = unwrapReactInteropSymbol(UiLayoutImport, 'UiLayout') || unwrapReactInteropSymbol(renderUi.UiLayout, 'UiLayout');
+const PreviewPrompt = unwrapReactInteropSymbol(PreviewPromptImport, 'PreviewPrompt') || unwrapReactInteropSymbol(renderUi.PreviewPrompt, 'PreviewPrompt');
+const Collapsible = unwrapReactInteropSymbol(CollapsibleImport, 'Collapsible') || unwrapReactInteropSymbol(renderUi.Collapsible, 'Collapsible');
+const Feedback = unwrapReactInteropSymbol(FeedbackImport, 'Feedback') || unwrapReactInteropSymbol(renderUi.Feedback, 'Feedback');
+import * as RenderUiNamespace from '@pie-lib/render-ui';
+const renderUiNamespaceAny = RenderUiNamespace as any;
+const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
+const renderUi =
+  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
+    ? renderUiDefaultMaybe
+    : renderUiNamespaceAny;
+import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
+import Translator from '@pie-lib/translator';
+import { AlertDialog } from '@pie-lib/config-ui';
+import Choices from './choices.js';
+import Choice from './choice.js';
+import Categories from './categories.js';
+
+const { translator } = Translator;
+const log = debug('@pie-ui:categorize');
+
+class DragPreviewWrapper extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+  };
+
+  containerRef = React.createRef();
+
+  componentDidMount() {
+    if (this.containerRef.current) {
+      renderMath(this.containerRef.current);
+    }
+  }
+
+  render() {
+    return <div ref={this.containerRef}>{this.props.children}</div>;
+  }
+}
+
+export class Categorize extends React.Component {
+  static propTypes = {
+    model: PropTypes.object,
+    session: PropTypes.shape({
+      answers: PropTypes.arrayOf(
+        PropTypes.shape({
+          choice: PropTypes.string,
+          category: PropTypes.string,
+        }),
+      ),
+    }),
+    onAnswersChange: PropTypes.func.isRequired,
+    onShowCorrectToggle: PropTypes.func.isRequired,
+    pauseMathObserver: PropTypes.func,
+    resumeMathObserver: PropTypes.func,
+  };
+
+  static defaultProps = {
+    disabled: false,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showCorrect: false,
+      showMaxChoiceAlert: false,
+    };
+  }
+
+  removeChoice: any = (c) => {
+    log('[removeChoice]: ', c);
+    const { onAnswersChange, session } = this.props;
+    const answers = removeChoiceFromCategory(c.id, c.categoryId, c.choiceIndex, session.answers);
+    onAnswersChange(answers);
+  };
+
+  dropChoice: any = (categoryId, draggedChoice) => {
+    const { session, onAnswersChange, model } = this.props;
+    const { maxChoicesPerCategory = 0 } = model || {};
+    const { answers = [] } = session || {};
+    let newAnswers;
+    if (draggedChoice) {
+      log('[dropChoice] category: ', draggedChoice.categoryId, 'choice: ', draggedChoice);
+    } else {
+      log('[dropChoice] category: ', undefined, 'choice: ', undefined);
+    }
+
+    const answer = answers.find((answer) => answer.category === categoryId);
+
+    // treat special case to replace the existing choice with the new one when maxChoicesPerCategory = 1
+    if (draggedChoice && maxChoicesPerCategory === 1 && answer && answer.choices && answer.choices.length === 1) {
+      // First, move the dragged choice to the target category (this will also remove it from source if allowMultiplePlacements is disabled)
+      newAnswers = moveChoiceToCategory(
+        draggedChoice.id,
+        draggedChoice.categoryId,
+        categoryId,
+        draggedChoice.choiceIndex,
+        answers,
+      );
+      // Then, remove the existing choice from the target category (use newAnswers, not answers)
+      newAnswers = removeChoiceFromCategory(answer.choices[0], categoryId, 0, newAnswers);
+    }
+
+    // treat special case when there are as many choices as maxChoicesPerCategory is
+    else if (
+      draggedChoice &&
+      maxChoicesPerCategory > 1 &&
+      answer &&
+      answer.choices &&
+      answer.choices.length === maxChoicesPerCategory
+    ) {
+      newAnswers = draggedChoice.categoryId
+        ? moveChoiceToCategory(
+            draggedChoice.id,
+            draggedChoice.categoryId,
+            draggedChoice.categoryId,
+            draggedChoice.choiceIndex,
+            answers,
+          )
+        : removeChoiceFromCategory(draggedChoice.id, draggedChoice.categoryId, draggedChoice.choiceIndex, answers);
+      this.setState({ showMaxChoiceAlert: true });
+    }
+
+    // treat special case when there are more choices that maxChoicesPerCategory is (testing purpose in pits)
+    else if (maxChoicesPerCategory !== 0 && answer && answer.choices && answer.choices.length > maxChoicesPerCategory) {
+      newAnswers = answers;
+      this.setState({ showMaxChoiceAlert: true });
+    } else {
+      newAnswers = draggedChoice
+        ? moveChoiceToCategory(
+            draggedChoice.id,
+            draggedChoice.categoryId,
+            categoryId,
+            draggedChoice.choiceIndex,
+            answers,
+          )
+        : this.removeChoice(categoryId);
+    }
+
+    if (draggedChoice) {
+      onAnswersChange(newAnswers);
+    }
+  };
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { model } = this.props;
+    const { model: nextModel } = nextProps;
+
+    // check if the note is the default one for prev language and change to the default one for new language
+    // this check is necessary in order to diferanciate between default and authour defined note
+    // and only change between languages for default ones
+    if (
+      model.note &&
+      model.language &&
+      model.language !== nextModel.language &&
+      model.note === translator.t('common:commonCorrectAnswerWithAlternates', { lng: model.language })
+    ) {
+      model.note = translator.t('common:commonCorrectAnswerWithAlternates', { lng: nextModel.language });
+    }
+
+    this.setState({ showCorrect: false });
+  }
+
+  toggleShowCorrect = () =>
+    this.setState({ showCorrect: !this.state.showCorrect }, () => {
+      this.props.onShowCorrectToggle();
+    });
+
+  getPositionDirection: any = (choicePosition) => {
+    let flexDirection;
+
+    switch (choicePosition) {
+      case 'left':
+        flexDirection = 'row-reverse';
+        break;
+      case 'right':
+        flexDirection = 'row';
+        break;
+      case 'below':
+        flexDirection = 'column';
+        break;
+      default:
+        // above
+        flexDirection = 'column-reverse';
+        break;
+    }
+
+    return flexDirection;
+  };
+
+  existAlternateResponse = (correctResponse) =>
+    correctResponse?.some((correctRes) => correctRes.alternateResponses?.length > 0);
+
+  render() {
+    const { model, session } = this.props;
+    const { showCorrect, showMaxChoiceAlert } = this.state;
+    const {
+      choicesPosition,
+      extraCSSRules,
+      note,
+      showNote,
+      env,
+      language,
+      maxChoicesPerCategory,
+      autoplayAudioEnabled,
+      customAudioButton,
+    } = model;
+    const { mode, role } = env || {};
+    const choicePosition = choicesPosition || 'above';
+
+    const style = {
+      flexDirection: this.getPositionDirection(choicePosition),
+      gap: '8px',
+    };
+
+    const { categories, choices, correct } = buildState(
+      model.categories,
+      model.choices,
+      showCorrect ? model.correctResponse : session.answers,
+      model.correctResponse,
+    );
+
+    log('[render] disabled: ', model.disabled);
+
+    const { rowLabels, categoriesPerRow, correctResponse, fontSizeFactor } = model;
+    const nbOfRows = (categories && Math.ceil(categories.length / categoriesPerRow)) || 0;
+    const existAlternate = this.existAlternateResponse(correctResponse) || false;
+    const displayNote =
+      (showCorrect || (mode === 'view' && role === 'instructor')) && showNote && note && existAlternate;
+    const alertMessage = translator.t('translation:categorize:limitMaxChoicesPerCategory', {
+      lng: model.language,
+      maxChoicesPerCategory,
+    });
+
+    const alertTitle = translator.t('common:warning', {
+      lng: model.language,
+    });
+
+    const onCloseText = translator.t('common:cancel', {
+      lng: model.language,
+    });
+
+    const showRationale = model.rationale && (hasText(model.rationale) || hasMedia(model.rationale));
+    const showTeacherInstructions =
+      model.teacherInstructions && (hasText(model.teacherInstructions) || hasMedia(model.teacherInstructions));
+
+    return (
+      <StyledUiLayout extraCSSRules={extraCSSRules} id={'main-container'} fontSizeFactor={fontSizeFactor}>
+        {showTeacherInstructions && (
+          <React.Fragment>
+            <StyledCollapsible
+              labels={{
+                hidden: 'Show Teacher Instructions',
+                visible: 'Hide Teacher Instructions',
+              }}
+            >
+              <PreviewPrompt prompt={model.teacherInstructions} />
+            </StyledCollapsible>
+          </React.Fragment>
+        )}
+
+        {model.prompt && (
+          <PreviewPrompt
+            prompt={model.prompt}
+            autoplayAudioEnabled={autoplayAudioEnabled}
+            customAudioButton={customAudioButton}
+          />
+        )}
+
+        <CorrectAnswerToggle
+          show={showCorrect || correct === false}
+          toggled={showCorrect}
+          onToggle={this.toggleShowCorrect}
+          language={language}
+        />
+
+        <StyledCategorize style={style}>
+          <div style={{ display: 'flex', flex: 1 }}>
+            <Categories
+              model={model}
+              disabled={model.disabled}
+              categories={categories}
+              onDropChoice={this.dropChoice}
+              onRemoveChoice={this.removeChoice}
+              rowLabels={(rowLabels || []).slice(0, nbOfRows)}
+            />
+          </div>
+          <Choices
+            disabled={model.disabled}
+            model={model}
+            choices={choices}
+            choicePosition={choicePosition}
+            onDropChoice={this.dropChoice}
+            onRemoveChoice={this.removeChoice}
+            correct={correct}
+          />
+        </StyledCategorize>
+        {displayNote && (
+          <StyledNote
+            dangerouslySetInnerHTML={{
+              __html: note,
+            }}
+          />
+        )}
+
+        {showRationale && (
+          <StyledCollapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>
+            <PreviewPrompt prompt={model.rationale} />
+          </StyledCollapsible>
+        )}
+
+        {model.correctness && model.feedback && !showCorrect && (
+          <Feedback correctness={model.correctness} feedback={model.feedback} />
+        )}
+        <AlertDialog
+          title={alertTitle}
+          text={alertMessage}
+          open={showMaxChoiceAlert}
+          onCloseText={onCloseText}
+          onClose={() => this.setState({ showMaxChoiceAlert: false })}
+        ></AlertDialog>
+      </StyledUiLayout>
+    );
+  }
+}
+
+class CategorizeProvider extends React.Component {
+  static propTypes = {
+    model: PropTypes.object,
+    session: PropTypes.shape({
+      answers: PropTypes.arrayOf(
+        PropTypes.shape({
+          choice: PropTypes.string,
+          category: PropTypes.string,
+        }),
+      ),
+    }),
+    onAnswersChange: PropTypes.func.isRequired,
+    onShowCorrectToggle: PropTypes.func.isRequired,
+    pauseMathObserver: PropTypes.func,
+    resumeMathObserver: PropTypes.func,
+  };
+
+  constructor(props) {
+    super(props);
+    this.uid = uid.generateId();
+    this.state = {
+      activeDragItem: null,
+      isValidDrop: false,
+    };
+  }
+
+  onDragStart: any = (event) => {
+    const { active } = event;
+    const { pauseMathObserver } = this.props;
+
+    if (pauseMathObserver) {
+      pauseMathObserver();
+    }
+
+    if (active?.data?.current) {
+      this.setState({
+        activeDragItem: active.data.current,
+        isValidDrop: false,
+      });
+    }
+  };
+
+  onDragEnd: any = (event) => {
+    const { active, over } = event;
+    const { resumeMathObserver } = this.props;
+
+    // Check if drop is valid
+    const draggedItem = active?.data?.current;
+    const overData = over?.data?.current;
+    const isValidDrop =
+      over && active && draggedItem && draggedItem.type === 'choice' && overData && overData.itemType === 'categorize';
+
+    this.setState({
+      activeDragItem: null,
+      isValidDrop: isValidDrop,
+    });
+
+    if (resumeMathObserver) {
+      resumeMathObserver();
+    }
+
+    if (!active || !draggedItem || draggedItem.type !== 'choice') {
+      return;
+    }
+
+    const choiceData = {
+      id: draggedItem.id,
+      categoryId: draggedItem.categoryId,
+      choiceIndex: draggedItem.choiceIndex,
+      value: draggedItem.value,
+      itemType: draggedItem.itemType,
+    };
+
+    // Dropped outside a valid/known target: remove from source category,
+    // which returns the choice to the choices pool.
+    if (!over) {
+      if (this.categorizeRef && this.categorizeRef.removeChoice && draggedItem.categoryId) {
+        this.categorizeRef.removeChoice(choiceData);
+      }
+      return;
+    }
+
+    if (over.id === 'choices-board') {
+      if (this.categorizeRef && this.categorizeRef.removeChoice && draggedItem.categoryId) {
+        this.categorizeRef.removeChoice(choiceData);
+      }
+      return;
+    }
+
+    if (this.categorizeRef && this.categorizeRef.dropChoice) {
+      this.categorizeRef.dropChoice(over.id, choiceData);
+    }
+  };
+
+  renderDragOverlay: any = () => {
+    const { activeDragItem } = this.state;
+    const { model } = this.props;
+
+    if (!activeDragItem) return null;
+
+    if (activeDragItem.type === 'choice') {
+      const choice = model.choices?.find((c) => c.id === activeDragItem.id);
+      if (choice) {
+        return <Choice key={choice.id} id={choice.id} {...choice} />;
+      }
+    }
+
+    return null;
+  };
+
+  render() {
+    const { isValidDrop } = this.state;
+    // Disable drop animation for valid drops to prevent visual snap-back
+    // Keep default animation for invalid drops to show visual feedback
+    const dropAnimation = isValidDrop ? null : undefined;
+
+    return (
+      <DragProvider onDragStart={this.onDragStart} onDragEnd={this.onDragEnd}>
+        <uid.Provider value={this.uid}>
+          <Categorize ref={(ref) => (this.categorizeRef = ref)} {...this.props} />
+          <DragOverlay dropAnimation={dropAnimation}>
+            <DragPreviewWrapper>{this.renderDragOverlay()}</DragPreviewWrapper>
+          </DragOverlay>
+        </uid.Provider>
+      </DragProvider>
+    );
+  }
+}
+
+const StyledUiLayout: any = styled(UiLayout)({
+  color: color.text(),
+  backgroundColor: color.background(),
+  position: 'relative',
+});
+
+const StyledNote: any = styled('div')(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+}));
+
+const StyledCategorize: any = styled('div')(({ theme }) => ({
+  marginBottom: theme.spacing(1),
+  display: 'flex',
+  flexDirection: 'column',
+}));
+
+const StyledCollapsible: any = styled(Collapsible)(({ theme }) => ({
+  paddingBottom: theme.spacing(2),
+}));
+
+export default CategorizeProvider;