@pie-element/placement-ordering 12.3.4-next.0 → 13.0.0-beta.0

package/lib/placement-ordering.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/placement-ordering.jsx"],"names":["translator","Translator","log","OrderingTiler","props","Comp","tiler","ordering","onDropChoice","onRemoveChoice","compProps","tiles","t","s","propTypes","PropTypes","func","any","PlacementOrdering","showingCorrect","setState","model","session","areChoicesShuffled","config","choices","includeTargets","choicesIds","map","c","id","value","needsReset","sessionMissing","length","missingChoiceIds","extraChoiceIds","sessionIsMismatched","concat","Array","filter","cId","includes","console","warn","target","source","onSessionChange","from","find","type","to","update","sessionUpdate","Object","assign","response","state","orientation","correctResponse","outcome","allowSameChoiceInTargets","outcomes","instanceId","validateSession","env","mode","domNode","ReactDOM","findDOMNode","nextProps","nextModel","currentModel","nextChoices","newState","isLanguageChanged","language","isDefaultNote","note","lng","validatedSession","newSession","includeTargetsChanged","classes","correctness","extraCSSRules","prompt","rationale","feedback","configs","showNote","disabled","teacherInstructions","showToggle","vertical","createOrdering","role","Tiler","VerticalTiler","HorizontalTiler","displayNote","showRationale","showTeacherInstructions","placementOrdering","hidden","visible","collapsible","toggle","toggleCorrect","choiceLabel","targetLabel","showOrdering","tileSize","choiceLabelEnabled","__html","React","Component","isRequired","object","oneOfType","array","styles","theme","color","text","backgroundColor","background","display","flexDirection","alignItems","boxSizing","paddingBottom","spacing","unit","marginBottom","alignSelf"],"mappings":"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","sourcesContent":["import { HorizontalTiler, VerticalTiler } from './tiler';\nimport { buildState, reducer } from './ordering';\nimport { Collapsible, color, Feedback, hasMedia, hasText, PreviewPrompt, UiLayout } from '@pie-lib/render-ui';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport uniqueId from 'lodash/uniqueId';\nimport { withStyles } from '@material-ui/core/styles';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport isEqual from 'lodash/isEqual';\nimport difference from 'lodash/difference';\nimport Translator from '@pie-lib/translator';\nimport { haveSameValuesButDifferentOrder } from './utils';\n\nconst { translator } = Translator;\n\nconst log = debug('pie-elements:placement-ordering');\n\nconst OrderingTiler = (props) => {\n  const { tiler: Comp, ordering, onDropChoice, onRemoveChoice, ...compProps } = props;\n\n  return (\n    <Comp\n      {...compProps}\n      tiles={ordering.tiles}\n      onDropChoice={(t, s) => onDropChoice(t, s, ordering)}\n      onRemoveChoice={(t) => onRemoveChoice(t, ordering)}\n    />\n  );\n};\n\nOrderingTiler.propTypes = {\n  tiler: PropTypes.func,\n  ordering: PropTypes.any,\n  onDropChoice: PropTypes.func,\n  onRemoveChoice: PropTypes.func,\n};\n\nexport class PlacementOrdering extends React.Component {\n  static propTypes = {\n    onSessionChange: PropTypes.func.isRequired,\n    model: PropTypes.object.isRequired,\n    session: PropTypes.oneOfType([PropTypes.array.isRequired, PropTypes.object.isRequired]),\n    classes: PropTypes.object.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.instanceId = uniqueId();\n\n    const { value, needsReset } = this.validateSession(props);\n\n    this.state = {\n      showingCorrect: false,\n    };\n\n    const { model } = props || {};\n    const { env } = model || {};\n    const { mode } = env || {};\n\n    if (needsReset && mode === 'gather') {\n      this.props.onSessionChange({\n        ...props.session,\n        value,\n      });\n    }\n  }\n\n  toggleCorrect = (showingCorrect) => this.setState({ showingCorrect });\n\n  componentDidUpdate() {\n    //eslint-disable-next-line\n    const domNode = ReactDOM.findDOMNode(this);\n\n    renderMath(domNode);\n  }\n\n  validateSession = ({ model, session }, areChoicesShuffled = false) => {\n    const { config, choices } = model || {};\n    const { includeTargets } = config || {};\n    const choicesIds = choices.map((c) => c.id);\n\n    let { value } = session || {};\n    let needsReset;\n\n    if (!includeTargets) {\n      // Use all choice IDs if choices were shuffled or session is missing/invalid\n      const sessionMissing = !value || !value.length;\n      if (sessionMissing || areChoicesShuffled) {\n        // if there's no value on session in No Targets Mode, we need to set an initial session\n        value = choicesIds;\n      } else {\n        // in No Targets Mode, all choice ids need to be used\n        const missingChoiceIds = difference(choicesIds, value);\n        // this is the case that handles extra choice ids in session\n        const extraChoiceIds = difference(value, choicesIds);\n\n        if (missingChoiceIds.length || extraChoiceIds.length) {\n          value = choicesIds;\n        }\n      }\n\n      needsReset = !isEqual(session.value, value);\n    } else {\n      // in Targets Area selected, it's important to check the length of session\n      const sessionIsMismatched = value && value.length !== choicesIds.length;\n      if (sessionIsMismatched) {\n        needsReset = true;\n\n        // if choices were added, add value in session\n        if (value.length < choicesIds.length) {\n          value = value.concat(new Array(choicesIds.length - value.length));\n        } else {\n          // if choices were removed, make sure to remove from session as well\n          value = value.filter((cId) => choicesIds.includes(cId));\n        }\n      }\n    }\n\n    if (needsReset) {\n      // eslint-disable-next-line no-console\n      console.warn('This session is not valid anymore. It will be reset.');\n    }\n\n    return { value, needsReset };\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    const { model: nextModel = {} } = nextProps || {};\n    const { model: currentModel = {} } = this.props || {};\n    const { correctResponse, config, choices: nextChoices = [], env } = nextModel;\n    const { includeTargets } = config || {};\n\n    const newState = {};\n\n    const isLanguageChanged = currentModel.language && currentModel.language !== nextModel.language;\n    const isDefaultNote =\n      currentModel.note &&\n      currentModel.note === translator.t('common:commonCorrectAnswerWithAlternates', { lng: currentModel.language });\n\n    // check if the note is the default one for prev language and change to the default one for new language\n    // this check is necessary in order to diferanciate between default and authour defined note\n    // and only change between languages for default ones\n    if (isLanguageChanged && isDefaultNote) {\n      currentModel.note = translator.t('common:commonCorrectAnswerWithAlternates', { lng: nextModel.language });\n    }\n\n    if (!correctResponse) {\n      newState.showingCorrect = false;\n    }\n\n    //PD-4924\n    // show student choices same order as in model when teacher changes student choices order\n    // for cases when student view and instructor view are on same page\n    const areChoicesShuffled = haveSameValuesButDifferentOrder(nextChoices, currentModel.choices);\n\n    const validatedSession = this.validateSession(nextProps, areChoicesShuffled);\n    let { value, needsReset } = validatedSession;\n\n    const newSession = {\n      ...nextProps.session,\n      value,\n    };\n    const includeTargetsChanged = currentModel.config?.includeTargets !== includeTargets;\n\n    if (includeTargets && includeTargetsChanged) {\n      needsReset = true;\n\n      delete newSession.value;\n    }\n\n    this.setState(newState, () => {\n      const { mode } = env || {};\n\n      if (needsReset && mode === 'gather') {\n        this.props.onSessionChange(newSession);\n      }\n    });\n  }\n\n  onDropChoice = (target, source, ordering) => {\n    const { onSessionChange, session } = this.props;\n    const from = ordering.tiles.find((t) => t.id === source.id && t.type === source.type);\n    const to = target;\n    log('[onDropChoice] ', from, to);\n    const update = reducer({ type: 'move', from, to }, ordering);\n    const sessionUpdate = Object.assign({}, session, {\n      value: update.response,\n    });\n\n    onSessionChange(sessionUpdate);\n  };\n\n  onRemoveChoice = (target, ordering) => {\n    const { onSessionChange, session } = this.props;\n    log('[onRemoveChoice]', target);\n    const update = reducer({ type: 'remove', target }, ordering);\n    const sessionUpdate = Object.assign({}, session, {\n      value: update.response,\n    });\n    onSessionChange(sessionUpdate);\n  };\n\n  createOrdering = () => {\n    const { model, session } = this.props;\n    const { showingCorrect } = this.state;\n    const config = model.config || {\n      orientation: 'vertical',\n      includeTargets: true,\n    };\n    const { includeTargets } = config;\n\n    return showingCorrect\n      ? buildState(\n          model.choices,\n          model.correctResponse,\n          model.correctResponse.map((id) => ({ id, outcome: 'correct' })),\n          {\n            includeTargets,\n            allowSameChoiceInTargets: model.config.allowSameChoiceInTargets,\n          },\n        )\n      : buildState(model.choices, session.value, model.outcomes, {\n          includeTargets,\n          allowSameChoiceInTargets: model.config.allowSameChoiceInTargets,\n        });\n  };\n\n  render() {\n    const { classes, model } = this.props;\n    const {\n      correctResponse,\n      correctness,\n      extraCSSRules,\n      prompt,\n      rationale,\n      feedback,\n      config: configs,\n      note,\n      showNote,\n      env,\n      disabled,\n      teacherInstructions,\n      language,\n    } = model;\n    const showToggle = correctResponse && correctResponse.length > 0;\n    const { showingCorrect } = this.state;\n    const config = configs || {\n      orientation: 'vertical',\n      includeTargets: true,\n    };\n    const { orientation, includeTargets } = config;\n    const vertical = orientation === 'vertical';\n    const ordering = this.createOrdering();\n    const { mode, role } = env || {};\n\n    const Tiler = vertical ? VerticalTiler : HorizontalTiler;\n    const displayNote = (showingCorrect || (mode === 'view' && role === 'instructor')) && showNote && note;\n    const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));\n    const showTeacherInstructions =\n      teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));\n\n    return (\n      <UiLayout extraCSSRules={extraCSSRules} className={classes.placementOrdering}>\n        {showTeacherInstructions && (\n          <Collapsible\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n            className={classes.collapsible}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        <div className={classes.prompt}>\n          <PreviewPrompt prompt={prompt} />\n        </div>\n\n        <CorrectAnswerToggle\n          className={classes.toggle}\n          show={showToggle}\n          toggled={showingCorrect}\n          onToggle={this.toggleCorrect}\n          language={language}\n        />\n\n        <OrderingTiler\n          instanceId={this.instanceId}\n          choiceLabel={config.choiceLabel}\n          targetLabel={config.targetLabel}\n          ordering={ordering}\n          tiler={Tiler}\n          disabled={disabled}\n          addGuide={config.showOrdering}\n          tileSize={config.tileSize}\n          includeTargets={includeTargets}\n          choiceLabelEnabled={model.config && model.config.choiceLabelEnabled}\n          onDropChoice={this.onDropChoice}\n          onRemoveChoice={this.onRemoveChoice}\n        />\n\n        {displayNote && <div className={classes.note} dangerouslySetInnerHTML={{ __html: note }} />}\n\n        {showRationale && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }} className={classes.collapsible}>\n            <PreviewPrompt prompt={rationale} />\n          </Collapsible>\n        )}\n\n        {!showingCorrect && <Feedback correctness={correctness} feedback={feedback} />}\n      </UiLayout>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  placementOrdering: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    boxSizing: 'border-box',\n  },\n  prompt: {\n    paddingBottom: theme.spacing.unit,\n  },\n  toggle: {\n    paddingBottom: theme.spacing.unit,\n  },\n  note: {\n    paddingBottom: theme.spacing.unit * 2,\n  },\n  collapsible: {\n    marginBottom: theme.spacing.unit * 2,\n    alignSelf: 'flex-start',\n  },\n});\n\nexport default withStyles(styles)(PlacementOrdering);\n"],"file":"placement-ordering.js"}
+{"version":3,"file":"placement-ordering.js","names":["_react","_interopRequireDefault","require","_reactDom","_propTypes","_debug","_uniqueId","_isEqual","_difference","_styles","_renderUi","_mathRendering","_translator","_correctAnswerToggle","_drag","_tiler","_ordering","_utils","translator","Translator","log","debug","PlacementOrderingContainer","styled","color","text","backgroundColor","background","display","flexDirection","alignItems","boxSizing","StyledPrompt","theme","paddingBottom","spacing","StyledNote","StyledToggle","CorrectAnswerToggle","StyledCollapsible","Collapsible","marginBottom","alignSelf","OrderingTiler","props","tiler","Comp","ordering","onDropChoice","onRemoveChoice","compProps","default","createElement","_extends2","tiles","t","s","propTypes","PropTypes","func","any","PlacementOrdering","React","Component","constructor","_defineProperty2","showingCorrect","setState","model","session","areChoicesShuffled","config","choices","includeTargets","choicesIds","map","c","id","value","needsReset","sessionMissing","length","missingChoiceIds","difference","extraChoiceIds","isEqual","sessionIsMismatched","concat","Array","filter","cId","includes","console","warn","target","source","onSessionChange","from","find","type","to","update","reducer","sessionUpdate","Object","assign","response","state","orientation","buildState","correctResponse","outcome","allowSameChoiceInTargets","outcomes","event","over","active","createOrdering","draggedItem","data","current","droppedOnItem","instanceId","uniqueId","validateSession","env","mode","componentDidUpdate","domNode","ReactDOM","findDOMNode","renderMath","UNSAFE_componentWillReceiveProps","nextProps","nextModel","currentModel","nextChoices","newState","isLanguageChanged","language","isDefaultNote","note","lng","haveSameValuesButDifferentOrder","validatedSession","newSession","includeTargetsChanged","render","correctness","extraCSSRules","prompt","rationale","feedback","configs","showNote","disabled","teacherInstructions","showToggle","vertical","role","Tiler","VerticalTiler","HorizontalTiler","displayNote","showRationale","hasText","hasMedia","showTeacherInstructions","containerStyle","DragProvider","onDragStart","onDragEnd","UiLayout","style","labels","hidden","visible","className","PreviewPrompt","show","toggled","onToggle","toggleCorrect","choiceLabel","targetLabel","addGuide","showOrdering","tileSize","choiceLabelEnabled","dangerouslySetInnerHTML","__html","Feedback","exports","isRequired","object","oneOfType","array","_default"],"sources":["../src/placement-ordering.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport debug from 'debug';\nimport uniqueId from 'lodash/uniqueId';\nimport isEqual from 'lodash/isEqual';\nimport difference from 'lodash/difference';\nimport { styled } from '@mui/material/styles';\n\nimport { Collapsible, color, Feedback, hasMedia, hasText, PreviewPrompt, UiLayout } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport Translator from '@pie-lib/translator';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { DragProvider } from '@pie-lib/drag';\n\nimport { HorizontalTiler, VerticalTiler } from './tiler';\nimport { buildState, reducer } from './ordering';\nimport { haveSameValuesButDifferentOrder } from './utils';\n\nconst { translator } = Translator;\n\nconst log = debug('pie-elements:placement-ordering');\n\nconst PlacementOrderingContainer = styled('div')({\n  color: color.text(),\n  backgroundColor: color.background(),\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  boxSizing: 'border-box',\n});\n\nconst StyledPrompt = styled('div')(({ theme }) => ({\n  paddingBottom: theme.spacing(1),\n}));\n\nconst StyledNote = styled('div')(({ theme }) => ({\n  paddingBottom: theme.spacing(2),\n}));\n\nconst StyledToggle = styled(CorrectAnswerToggle)(({ theme }) => ({\n  paddingBottom: theme.spacing(1),\n}));\n\nconst StyledCollapsible = styled(Collapsible)(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n  alignSelf: 'flex-start',\n}));\n\nconst OrderingTiler = (props) => {\n  const { tiler: Comp, ordering, onDropChoice, onRemoveChoice, ...compProps } = props;\n\n  return (\n    <Comp\n      {...compProps}\n      tiles={ordering.tiles}\n      onDropChoice={(t, s) => onDropChoice(t, s, ordering)}\n      onRemoveChoice={(t) => onRemoveChoice(t, ordering)}\n    />\n  );\n};\n\nOrderingTiler.propTypes = {\n  tiler: PropTypes.func,\n  ordering: PropTypes.any,\n  onDropChoice: PropTypes.func,\n  onRemoveChoice: PropTypes.func,\n};\n\nexport class PlacementOrdering extends React.Component {\n  static propTypes = {\n    onSessionChange: PropTypes.func.isRequired,\n    model: PropTypes.object.isRequired,\n    session: PropTypes.oneOfType([PropTypes.array.isRequired, PropTypes.object.isRequired]),\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.instanceId = uniqueId();\n\n    const { value, needsReset } = this.validateSession(props);\n\n    this.state = {\n      showingCorrect: false,\n    };\n\n    const { model } = props || {};\n    const { env } = model || {};\n    const { mode } = env || {};\n\n    if (needsReset && mode === 'gather') {\n      this.props.onSessionChange({\n        ...props.session,\n        value,\n      });\n    }\n  }\n\n  toggleCorrect = (showingCorrect) => this.setState({ showingCorrect });\n\n  componentDidUpdate() {\n    //eslint-disable-next-line\n    const domNode = ReactDOM.findDOMNode(this);\n\n    renderMath(domNode);\n  }\n\n  validateSession = ({ model, session }, areChoicesShuffled = false) => {\n    const { config, choices } = model || {};\n    const { includeTargets } = config || {};\n    const choicesIds = choices.map((c) => c.id);\n\n    let { value } = session || {};\n    let needsReset;\n\n    if (!includeTargets) {\n      // Use all choice IDs if choices were shuffled or session is missing/invalid\n      const sessionMissing = !value || !value.length;\n      if (sessionMissing || areChoicesShuffled) {\n        // if there's no value on session in No Targets Mode, we need to set an initial session\n        value = choicesIds;\n      } else {\n        // in No Targets Mode, all choice ids need to be used\n        const missingChoiceIds = difference(choicesIds, value);\n        // this is the case that handles extra choice ids in session\n        const extraChoiceIds = difference(value, choicesIds);\n\n        if (missingChoiceIds.length || extraChoiceIds.length) {\n          value = choicesIds;\n        }\n      }\n\n      needsReset = !isEqual(session.value, value);\n    } else {\n      // in Targets Area selected, it's important to check the length of session\n      const sessionIsMismatched = value && value.length !== choicesIds.length;\n      if (sessionIsMismatched) {\n        needsReset = true;\n\n        // if choices were added, add value in session\n        if (value.length < choicesIds.length) {\n          value = value.concat(new Array(choicesIds.length - value.length));\n        } else {\n          // if choices were removed, make sure to remove from session as well\n          value = value.filter((cId) => choicesIds.includes(cId));\n        }\n      }\n    }\n\n    if (needsReset) {\n      // eslint-disable-next-line no-console\n      console.warn('This session is not valid anymore. It will be reset.');\n    }\n\n    return { value, needsReset };\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    const { model: nextModel = {} } = nextProps || {};\n    const { model: currentModel = {} } = this.props || {};\n    const { correctResponse, config, choices: nextChoices = [], env } = nextModel;\n    const { includeTargets } = config || {};\n\n    const newState = {};\n\n    const isLanguageChanged = currentModel.language && currentModel.language !== nextModel.language;\n    const isDefaultNote =\n      currentModel.note &&\n      currentModel.note === translator.t('common:commonCorrectAnswerWithAlternates', { lng: currentModel.language });\n\n    // check if the note is the default one for prev language and change to the default one for new language\n    // this check is necessary in order to diferanciate between default and authour defined note\n    // and only change between languages for default ones\n    if (isLanguageChanged && isDefaultNote) {\n      currentModel.note = translator.t('common:commonCorrectAnswerWithAlternates', { lng: nextModel.language });\n    }\n\n    if (!correctResponse) {\n      newState.showingCorrect = false;\n    }\n\n    //PD-4924\n    // show student choices same order as in model when teacher changes student choices order\n    // for cases when student view and instructor view are on same page\n    const areChoicesShuffled = haveSameValuesButDifferentOrder(nextChoices, currentModel.choices);\n\n    const validatedSession = this.validateSession(nextProps, areChoicesShuffled);\n    let { value, needsReset } = validatedSession;\n\n    const newSession = {\n      ...nextProps.session,\n      value,\n    };\n    const includeTargetsChanged = currentModel.config?.includeTargets !== includeTargets;\n\n    if (includeTargets && includeTargetsChanged) {\n      needsReset = true;\n\n      delete newSession.value;\n    }\n\n    this.setState(newState, () => {\n      const { mode } = env || {};\n\n      if (needsReset && mode === 'gather') {\n        this.props.onSessionChange(newSession);\n      }\n    });\n  }\n\n  onDropChoice = (target, source, ordering) => {\n    const { onSessionChange, session } = this.props;\n    const from = ordering.tiles.find((t) => t.id === source.id && t.type === source.type);\n    const to = target;\n    log('[onDropChoice] ', from, to);\n    const update = reducer({ type: 'move', from, to }, ordering);\n    const sessionUpdate = Object.assign({}, session, {\n      value: update.response,\n    });\n\n    onSessionChange(sessionUpdate);\n  };\n\n  onRemoveChoice = (target, ordering) => {\n    const { onSessionChange, session } = this.props;\n    log('[onRemoveChoice]', target);\n    const update = reducer({ type: 'remove', target }, ordering);\n    const sessionUpdate = Object.assign({}, session, {\n      value: update.response,\n    });\n    onSessionChange(sessionUpdate);\n  };\n\n  createOrdering = () => {\n    const { model, session } = this.props;\n    const { showingCorrect } = this.state;\n    const config = model.config || {\n      orientation: 'vertical',\n      includeTargets: true,\n    };\n    const { includeTargets } = config;\n\n    return showingCorrect\n      ? buildState(\n        model.choices,\n        model.correctResponse,\n        model.correctResponse.map((id) => ({ id, outcome: 'correct' })),\n        {\n          includeTargets,\n          allowSameChoiceInTargets: model.config.allowSameChoiceInTargets,\n        },\n      )\n      : buildState(model.choices, session.value, model.outcomes, {\n        includeTargets,\n        allowSameChoiceInTargets: model.config.allowSameChoiceInTargets,\n      });\n  };\n\n  onDragEnd = (event) => {\n    const { over, active } = event;\n    const ordering = this.createOrdering();\n\n    if (over && active) {\n      const draggedItem = active.data.current;\n      const droppedOnItem = over.data.current;\n\n      if (draggedItem && droppedOnItem && droppedOnItem.type === 'target') {\n        this.onDropChoice(droppedOnItem, draggedItem, ordering);\n        return;\n      }\n\n      if (draggedItem && droppedOnItem) {\n        this.onDropChoice(droppedOnItem, draggedItem, ordering);\n      }\n    } else if (!over && active) {\n      const draggedItem = active.data.current;\n      if (draggedItem && draggedItem.type === 'target') {\n        this.onRemoveChoice(draggedItem, ordering);\n      }\n    }\n  }\n\n  render() {\n    const { model } = this.props;\n    const {\n      correctResponse,\n      correctness,\n      extraCSSRules,\n      prompt,\n      rationale,\n      feedback,\n      config: configs,\n      note,\n      showNote,\n      env,\n      disabled,\n      teacherInstructions,\n      language,\n    } = model;\n    const showToggle = correctResponse && correctResponse.length > 0;\n    const { showingCorrect } = this.state;\n    const config = configs || {\n      orientation: 'vertical',\n      includeTargets: true,\n    };\n    const { orientation, includeTargets } = config;\n    const vertical = orientation === 'vertical';\n    const ordering = this.createOrdering();\n    const { mode, role } = env || {};\n\n    const Tiler = vertical ? VerticalTiler : HorizontalTiler;\n    const displayNote = (showingCorrect || (mode === 'view' && role === 'instructor')) && showNote && note;\n    const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));\n    const showTeacherInstructions =\n      teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));\n\n    const containerStyle = {\n      color: color.text(),\n      backgroundColor: color.background(),\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      boxSizing: 'border-box',\n    };\n\n    return (\n      <DragProvider onDragStart={() => { }} onDragEnd={this.onDragEnd}>\n        <PlacementOrderingContainer>\n          <UiLayout extraCSSRules={extraCSSRules} style={containerStyle}>\n            {showTeacherInstructions && (\n              <StyledCollapsible\n                labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n                className=\"collapsible\"\n              >\n                <PreviewPrompt prompt={teacherInstructions} />\n              </StyledCollapsible>\n            )}\n\n            <StyledPrompt>\n              <PreviewPrompt prompt={prompt} />\n            </StyledPrompt>\n\n            <StyledToggle\n              className=\"toggle\"\n              show={showToggle}\n              toggled={showingCorrect}\n              onToggle={this.toggleCorrect}\n              language={language}\n            />\n\n            <OrderingTiler\n              instanceId={this.instanceId}\n              choiceLabel={config.choiceLabel}\n              targetLabel={config.targetLabel}\n              ordering={ordering}\n              tiler={Tiler}\n              disabled={disabled}\n              addGuide={config.showOrdering}\n              tileSize={config.tileSize}\n              includeTargets={includeTargets}\n              choiceLabelEnabled={model.config && model.config.choiceLabelEnabled}\n            />\n\n            {displayNote && <StyledNote dangerouslySetInnerHTML={{ __html: note }} />}\n\n            {showRationale && (\n              <StyledCollapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }} className=\"collapsible\">\n                <PreviewPrompt prompt={rationale} />\n              </StyledCollapsible>\n            )}\n\n            {!showingCorrect && <Feedback correctness={correctness} feedback={feedback} />}\n          </UiLayout>\n        </PlacementOrderingContainer>\n      </DragProvider>\n    );\n  }\n}\n\nexport default PlacementOrdering;\n"],"mappings":"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","ignoreList":[]}

package/lib/tile.js

@@ -1,302 +1,228 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Tile = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _reactDnd = require("react-dnd");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
+exports.default = exports.Tile = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _debug = _interopRequireDefault(require("debug"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _core = require("@dnd-kit/core");
+var _styles = require("@mui/material/styles");
 var _drag = require("@pie-lib/drag");
-
 var _renderUi = require("@pie-lib/render-ui");
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var log = (0, _debug["default"])('pie-elements:placement-ordering:tile');
-var Holder = (0, _styles.withStyles)(function (theme) {
-  return {
-    number: {
-      width: '100%',
-      fontSize: theme.typography.fontSize + 4,
-      textAlign: 'center',
-      color: "rgba(".concat(theme.palette.common.black, ", 0.6)")
-    }
-  };
-})(function (_ref) {
-  var classes = _ref.classes,
-      type = _ref.type,
-      index = _ref.index,
-      isOver = _ref.isOver,
-      disabled = _ref.disabled;
-  return /*#__PURE__*/_react["default"].createElement(_drag.PlaceHolder, {
-    type: type,
-    isOver: isOver,
-    disabled: disabled
-  }, type === 'target' && index !== undefined && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.number
-  }, index));
-});
+const log = (0, _debug.default)('pie-elements:placement-ordering:tile');
+const StyledNumberContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  width: '100%',
+  fontSize: theme.typography.fontSize + 4,
+  textAlign: 'center',
+  color: `rgba(${theme.palette.common.black}, 0.6)`
+}));
+const Holder = ({
+  type,
+  index,
+  isOver,
+  disabled
+}) => /*#__PURE__*/_react.default.createElement(_drag.PlaceHolder, {
+  type: type,
+  isOver: isOver,
+  disabled: disabled
+}, type === 'target' && index !== undefined && /*#__PURE__*/_react.default.createElement(StyledNumberContainer, null, index));
 Holder.propTypes = {
-  type: _propTypes["default"].string,
-  index: _propTypes["default"].number,
-  isOver: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool
+  type: _propTypes.default.string,
+  index: _propTypes.default.number,
+  isOver: _propTypes.default.bool,
+  disabled: _propTypes.default.bool
 };
-var TileContent = (0, _styles.withStyles)(function (theme) {
-  return {
-    over: {
-      opacity: 0.2
-    },
-    tileContent: {
-      cursor: 'pointer',
-      width: '100%',
-      height: '100%',
-      padding: '10px',
-      boxSizing: 'border-box',
-      overflow: 'hidden',
-      border: "1px solid ".concat(theme.palette.grey[400]),
-      backgroundColor: _renderUi.color.background(),
-      transition: 'opacity 200ms linear',
-      pointerEvents: 'none',
-      '&:hover': {
-        backgroundColor: _renderUi.color.secondary()
-      }
-    },
-    dragging: {
-      backgroundColor: _renderUi.color.secondaryLight(),
-      opacity: 0.5
-    },
-    disabled: {
-      cursor: 'not-allowed',
-      '&:hover': {
-        backgroundColor: _renderUi.color.background()
-      }
-    },
-    incorrect: {
-      border: "1px solid ".concat(_renderUi.color.incorrect())
-    },
-    correct: {
-      border: "1px solid ".concat(_renderUi.color.correct())
-    },
-    emptyTile: {
-      border: 'none',
-      '&:hover': {
-        backgroundColor: 'unset'
-      }
+const StyledTileContent = (0, _styles.styled)('div')(({
+  theme,
+  isDragging,
+  isOver,
+  disabled,
+  outcome,
+  label
+}) => ({
+  cursor: 'pointer',
+  width: '100%',
+  height: '100%',
+  padding: '10px',
+  boxSizing: 'border-box',
+  overflow: 'hidden',
+  border: `1px solid ${theme.palette.grey[400]}`,
+  backgroundColor: _renderUi.color.background(),
+  transition: 'opacity 200ms linear',
+  pointerEvents: 'none',
+  '&:hover': {
+    backgroundColor: _renderUi.color.secondary()
+  },
+  // Apply conditional styles based on props
+  ...(isOver && !disabled && {
+    opacity: 0.2
+  }),
+  ...(isDragging && !disabled && {
+    opacity: 0.5,
+    backgroundColor: _renderUi.color.secondaryLight()
+  }),
+  ...(disabled && {
+    cursor: 'not-allowed',
+    '&:hover': {
+      backgroundColor: _renderUi.color.background()
     }
-  };
-})(function (props) {
-  var type = props.type,
-      classes = props.classes,
-      isDragging = props.isDragging,
-      empty = props.empty,
-      isOver = props.isOver,
-      label = props.label,
-      disabled = props.disabled,
-      outcome = props.outcome,
-      guideIndex = props.guideIndex;
-
+  }),
+  ...(outcome === 'incorrect' && {
+    border: `1px solid ${_renderUi.color.incorrect()}`
+  }),
+  ...(outcome === 'correct' && {
+    border: `1px solid ${_renderUi.color.correct()}`
+  }),
+  ...(!label && {
+    border: 'none',
+    '&:hover': {
+      backgroundColor: 'unset'
+    }
+  })
+}));
+const TileContent = props => {
+  const {
+    type,
+    isDragging,
+    empty,
+    isOver,
+    label,
+    disabled,
+    outcome,
+    guideIndex
+  } = props;
   if (empty) {
-    return /*#__PURE__*/_react["default"].createElement(Holder, {
+    return /*#__PURE__*/_react.default.createElement(Holder, {
       type: type,
       index: guideIndex,
       isOver: isOver,
       disabled: disabled
     });
   } else {
-    var names = (0, _classnames["default"])(classes.tileContent, !label ? classes.emptyTile : null, isDragging && !disabled && classes.dragging, isOver && !disabled && classes.over, disabled && classes.disabled, outcome && classes[outcome]);
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: names,
+    return /*#__PURE__*/_react.default.createElement(StyledTileContent, {
+      isDragging: isDragging,
+      isOver: isOver,
+      disabled: disabled,
+      outcome: outcome,
+      label: label,
       dangerouslySetInnerHTML: {
         __html: label
       }
     });
   }
-});
-
-var Tile = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Tile, _React$Component);
-
-  var _super = _createSuper(Tile);
-
-  function Tile() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Tile);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+};
+const Tile = props => {
+  const {
+    label,
+    type,
+    id,
+    empty,
+    disabled,
+    outcome,
+    index,
+    guideIndex,
+    instanceId,
+    draggable
+  } = props;
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDragRef,
+    transform,
+    isDragging
+  } = (0, _core.useDraggable)({
+    id: `tile-${id}-${instanceId}`,
+    data: {
+      id,
+      type,
+      instanceId,
+      value: label,
+      index
+    },
+    disabled: !draggable || disabled
+  });
+  const {
+    setNodeRef: setDropRef,
+    isOver: dropIsOver
+  } = (0, _core.useDroppable)({
+    id: `drop-tile-${id ? id : index}-${instanceId}`,
+    data: {
+      id,
+      type,
+      instanceId,
+      value: label,
+      index
     }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTouchStart", function (e) {
+  });
+  const ref = _react.default.useRef(null);
+  _react.default.useEffect(() => {
+    const currentRef = ref.current;
+    const handleTouchStart = e => {
       e.preventDefault(); // Prevent the default touch event behavior
-    });
-    return _this;
-  }
-
-  (0, _createClass2["default"])(Tile, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.ref) {
-        this.ref.addEventListener('touchstart', this.handleTouchStart, {
-          passive: false
-        });
-      }
+    };
+    if (currentRef) {
+      currentRef.addEventListener('touchstart', handleTouchStart, {
+        passive: false
+      });
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.ref) {
-        this.ref.removeEventListener('touchstart', this.handleTouchStart);
+    return () => {
+      if (currentRef) {
+        currentRef.removeEventListener('touchstart', handleTouchStart);
       }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          label = _this$props.label,
-          isDragging = _this$props.isDragging,
-          connectDragSource = _this$props.connectDragSource,
-          connectDropTarget = _this$props.connectDropTarget,
-          classes = _this$props.classes,
-          isOver = _this$props.isOver,
-          type = _this$props.type,
-          id = _this$props.id,
-          empty = _this$props.empty,
-          disabled = _this$props.disabled,
-          outcome = _this$props.outcome,
-          index = _this$props.index,
-          guideIndex = _this$props.guideIndex;
-      log('[render], props: ', this.props);
-      var name = (0, _classnames["default"])(classes.title);
-      var dragSourceOpts = {//dropEffect: moveOnDrag ? 'move' : 'copy'
-      };
-      return connectDragSource(connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
-        className: name,
-        ref: function ref(_ref2) {
-          return _this2.ref = _ref2;
-        }
-      }, /*#__PURE__*/_react["default"].createElement(TileContent, {
-        label: label,
-        id: id,
-        empty: empty,
-        index: index,
-        guideIndex: guideIndex,
-        isOver: isOver,
-        isDragging: isDragging,
-        disabled: disabled,
-        outcome: outcome,
-        type: type
-      }))), dragSourceOpts);
-    }
-  }]);
-  return Tile;
-}(_react["default"].Component);
-
-exports.Tile = Tile;
-(0, _defineProperty2["default"])(Tile, "propTypes", {
-  connectDragSource: _propTypes["default"].func.isRequired,
-  connectDropTarget: _propTypes["default"].func.isRequired,
-  isDragging: _propTypes["default"].bool.isRequired,
-  id: _propTypes["default"].any,
-  label: _propTypes["default"].string,
-  isOver: _propTypes["default"].bool,
-  classes: _propTypes["default"].object.isRequired,
-  type: _propTypes["default"].string,
-  empty: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  outcome: _propTypes["default"].string,
-  index: _propTypes["default"].number,
-  guideIndex: _propTypes["default"].number
-});
-var StyledTile = (0, _styles.withStyles)({
-  title: {
+    };
+  }, []);
+  const setRefs = element => {
+    ref.current = element;
+    setDragRef(element);
+    setDropRef(element);
+  };
+  log('[render], props: ', props);
+  const style = {
+    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
     boxSizing: 'border-box',
     overflow: 'hidden',
-    margin: '0px',
-    padding: '0px',
+    padding: 0,
+    margin: 0,
     textAlign: 'center'
-  }
-})(Tile);
-var tileTarget = {
-  drop: function drop(props, monitor) {
-    var draggedItem = monitor.getItem();
-    log('props.instanceId', props.instanceId, 'draggedItem.instanceId:', draggedItem.instanceId);
-
-    if (draggedItem.instanceId === props.instanceId) {
-      props.onDropChoice(draggedItem, props.index);
-    }
-  },
-  canDrop: function canDrop(props, monitor) {
-    var draggedItem = monitor.getItem();
-    var canDrop = draggedItem.instanceId === props.instanceId;
-    return canDrop;
-  }
-};
-var DropTile = (0, _reactDnd.DropTarget)('Tile', tileTarget, function (connect, monitor) {
-  return {
-    connectDropTarget: connect.dropTarget(),
-    isOver: monitor.isOver()
   };
-})(StyledTile);
-var tileSource = {
-  canDrag: function canDrag(props) {
-    return props.draggable && !props.disabled;
-  },
-  beginDrag: function beginDrag(props) {
-    return {
-      id: props.id,
-      type: props.type,
-      instanceId: props.instanceId,
-      value: props.label
-    };
-  },
-  endDrag: function endDrag(props, monitor) {
-    if (!monitor.didDrop()) {
-      if (props.type === 'target') {
-        props.onRemoveChoice(monitor.getItem());
-      }
-    }
-  }
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: setRefs,
+    style: style
+  }, draggable && !disabled ? {
+    ...listeners,
+    ...attributes
+  } : {}), /*#__PURE__*/_react.default.createElement(TileContent, {
+    label: label,
+    id: id,
+    empty: empty,
+    index: index,
+    guideIndex: guideIndex,
+    isOver: dropIsOver,
+    isDragging: isDragging,
+    disabled: disabled,
+    outcome: outcome,
+    type: type
+  }));
 };
-var DragDropTile = (0, _reactDnd.DragSource)('Tile', tileSource, function (connect, monitor) {
-  return {
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging()
-  };
-})(DropTile);
-var _default = DragDropTile;
-exports["default"] = _default;
+exports.Tile = Tile;
+Tile.propTypes = {
+  id: _propTypes.default.any,
+  label: _propTypes.default.string,
+  isOver: _propTypes.default.bool,
+  type: _propTypes.default.string,
+  empty: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  outcome: _propTypes.default.string,
+  index: _propTypes.default.number,
+  guideIndex: _propTypes.default.number,
+  instanceId: _propTypes.default.any,
+  draggable: _propTypes.default.bool
+};
+var _default = exports.default = Tile;
 //# sourceMappingURL=tile.js.map