@pie-element/complex-rubric 2.6.6 → 2.6.8

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/text-select/legend.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import Check from '@material-ui/icons/Check';
-import Close from '@material-ui/icons/Close';
-import Remove from '@material-ui/icons/Remove';
-import { color } from '../render-ui';
-import Translator from '../translator';
-
-const { translator } = Translator;
-
-export const Legend = withStyles((theme) => ({
-  flexContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: `${2 * theme.spacing.unit}px`,
-    borderBottom: '1px solid lightgrey',
-    borderTop: '1px solid lightgrey',
-    paddingBottom: theme.spacing.unit,
-    paddingTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
-  },
-  container: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: `${theme.spacing.unit / 2}px`,
-    alignItems: 'center',
-  },
-  correct: {
-    fontSize: 'larger',
-    color: color.correct(),
-    backgroundColor: color.correctSecondary(),
-    border: `2px solid ${color.correct()}`,
-  },
-  incorrect: {
-    fontSize: 'larger',
-    color: color.missing(),
-    backgroundColor: color.incorrectSecondary(),
-    border: `2px solid ${color.missing()}`,
-  },
-  missing: {
-    fontSize: 'larger',
-    color: color.missing(),
-    backgroundColor: color.incorrectSecondary(),
-    border: `2px dashed ${color.missing()}`,
-  },
-}))(({ classes, language }) => {
-  const icons = [
-    {
-      iconName: Check,
-      label: translator.t('selectText.correctAnswerSelected', { lng: language }),
-      className: classes.correct,
-    },
-    {
-      iconName: Remove,
-      label: translator.t('selectText.correctAnswerNotSelected', { lng: language }),
-      className: classes.missing,
-    },
-    {
-      iconName: Close,
-      label: translator.t('selectText.incorrectSelection', { lng: language }),
-      className: classes.incorrect,
-    },
-  ];
-
-  return (
-    <div className={classes.flexContainer}>
-      {icons.map((icon, index) => {
-        const Icon = icon.iconName;
-        return (
-          <div key={index} className={classes.container}>
-            <Icon className={icon.className} width={'19px'} height={'19px'}></Icon>
-            <span>{icon.label}</span>
-          </div>
-        );
-      })}
-    </div>
-  );
-});

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/text-select/text-select.jsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import TokenSelect from './token-select';
-import { normalize } from './tokenizer/builder';
-import { TokenTypes } from './token-select/token';
-import debug from 'debug';
-
-const log = debug('@pie-lib:text-select');
-/**
- * Built on TokenSelect uses build.normalize to build the token set.
- */
-export default class TextSelect extends React.Component {
-  static propTypes = {
-    onChange: PropTypes.func,
-    disabled: PropTypes.bool,
-    tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,
-    selectedTokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,
-    text: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    highlightChoices: PropTypes.bool,
-    animationsDisabled: PropTypes.bool,
-    maxNoOfSelections: PropTypes.number,
-  };
-
-  change = (tokens) => {
-    const { onChange } = this.props;
-
-    if (!onChange) {
-      return;
-    }
-    const out = tokens.filter((t) => t.selected).map((t) => ({ start: t.start, end: t.end }));
-
-    onChange(out);
-  };
-
-  render() {
-    const {
-      text,
-      disabled,
-      tokens,
-      selectedTokens,
-      className,
-      highlightChoices,
-      maxNoOfSelections,
-      animationsDisabled,
-    } = this.props;
-
-    const normalized = normalize(text, tokens);
-    log('normalized: ', normalized);
-    const prepped = normalized.map((t) => {
-      const selectedIndex = selectedTokens.findIndex((s) => {
-        return s.start === t.start && s.end === t.end;
-      });
-      const selected = selectedIndex !== -1;
-      const correct = selected ? t.correct : undefined;
-      const isMissing = t.isMissing;
-      return {
-        ...t,
-        selectable: !disabled && t.predefined,
-        selected,
-        correct,
-        isMissing,
-      };
-    });
-
-    return (
-      <TokenSelect
-        highlightChoices={!disabled && highlightChoices}
-        className={className}
-        tokens={prepped}
-        disabled={disabled}
-        onChange={this.change}
-        maxNoOfSelections={maxNoOfSelections}
-        animationsDisabled={animationsDisabled}
-      />
-    );
-  }
-}

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/text-select/token-select/index.jsx

@@ -1,162 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Token, { TokenTypes } from './token';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import clone from 'lodash/clone';
-import debug from 'debug';
-import { noSelect } from '../../style-utils';
-import { renderToString } from 'react-dom/server';
-import isEqual from 'lodash/isEqual';
-
-const log = debug('@pie-lib:text-select:token-select');
-
-export class TokenSelect extends React.Component {
-  static propTypes = {
-    tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,
-    className: PropTypes.string,
-    classes: PropTypes.object.isRequired,
-    onChange: PropTypes.func.isRequired,
-    disabled: PropTypes.bool,
-    highlightChoices: PropTypes.bool,
-    animationsDisabled: PropTypes.bool,
-    maxNoOfSelections: PropTypes.number,
-  };
-
-  static defaultProps = {
-    highlightChoices: false,
-    maxNoOfSelections: 0,
-    tokens: [],
-  };
-
-  selectedCount = () => this.props.tokens.filter((t) => t.selected).length;
-
-  canSelectMore = (selectedCount) => {
-    const { maxNoOfSelections } = this.props;
-
-    if (maxNoOfSelections === 1) {
-      return true;
-    }
-
-    log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);
-    return maxNoOfSelections <= 0 || (isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections);
-  };
-
-  /**
-   @function
-   @param { object } event
-
-   @description
-    each token is wrapped into a span that has Token.rootClassName class and indexkey attribute (represents the index of the token)
-    tokens are updated with the targeted token having the correct value set for 'selected' property
-   */
-  toggleToken = (event) => {
-    const { target } = event;
-    const { tokens, animationsDisabled } = this.props;
-    const tokensCloned = clone(tokens);
-    const targetSpanWrapper = target.closest(`.${Token.rootClassName}`);
-    const targetedTokenIndex = targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;
-    const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];
-
-    if (t && t.correct === undefined && !animationsDisabled) {
-      const { onChange, maxNoOfSelections } = this.props;
-      const selected = !t.selected;
-
-      if (maxNoOfSelections === 1 && this.selectedCount() === 1) {
-        const selectedToken = (tokens || []).filter((t) => t.selected);
-
-        const updatedTokens = tokensCloned.map((token) => {
-          if (isEqual(token, selectedToken[0])) {
-            return { ...token, selected: false };
-          }
-
-          return { ...token, selectable: true };
-        });
-
-        const update = { ...t, selected: !t.selected };
-
-        updatedTokens.splice(targetedTokenIndex, 1, update);
-        onChange(updatedTokens);
-      } else {
-        if (selected && maxNoOfSelections > 0 && this.selectedCount() >= maxNoOfSelections) {
-          log('skip toggle max reached');
-          return;
-        }
-
-        const update = { ...t, selected: !t.selected };
-
-        tokensCloned.splice(targetedTokenIndex, 1, update);
-        onChange(tokensCloned);
-      }
-    }
-  };
-
-  generateTokensInHtml = () => {
-    const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;
-    const selectedCount = this.selectedCount();
-    const isLineBreak = (text) => text === '\n';
-    const isNewParagraph = (text) => text === '\n\n';
-
-    const reducer = (accumulator, t, index) => {
-      const selectable = t.selected || (t.selectable && this.canSelectMore(selectedCount));
-      const showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);
-      let finalAcc = accumulator;
-
-      if (isNewParagraph(t.text)) {
-        return finalAcc + '</p><p>';
-      }
-
-      if (isLineBreak(t.text)) {
-        return finalAcc + '<br>';
-      }
-
-      if (
-        (selectable && !disabled) ||
-        showCorrectAnswer ||
-        t.selected ||
-        t.isMissing ||
-        (animationsDisabled && t.predefined) // if we are in print mode
-      ) {
-        return (
-          finalAcc +
-          renderToString(
-            <Token
-              key={index}
-              disabled={disabled}
-              index={index}
-              {...t}
-              selectable={selectable}
-              highlight={highlightChoices}
-              animationsDisabled={animationsDisabled}
-            />,
-          )
-        );
-      } else {
-        return accumulator + t.text;
-      }
-    };
-
-    const reduceResult = (tokens || []).reduce(reducer, '<p>');
-
-    return reduceResult + '</p>';
-  };
-
-  render() {
-    const { classes, className: classNameProp } = this.props;
-    const className = classNames(classes.tokenSelect, classNameProp);
-    const html = this.generateTokensInHtml();
-
-    return <div className={className} dangerouslySetInnerHTML={{ __html: html }} onClick={this.toggleToken} />;
-  }
-}
-
-export default withStyles(() => ({
-  tokenSelect: {
-    backgroundColor: 'none',
-    whiteSpace: 'pre',
-    ...noSelect(),
-    '& p': {
-      whiteSpace: 'break-spaces',
-    },
-  },
-}))(TokenSelect);

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/text-select/token-select/token.jsx

@@ -1,190 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import { color } from '../../render-ui';
-import Check from '@material-ui/icons/Check';
-import Close from '@material-ui/icons/Close';
-
-const Wrapper = ({ useWrapper, children, classNameContainer, iconClass, Icon }) => {
-  if (useWrapper) {
-    return (
-      <span className={classNameContainer}>
-        {children}
-        <Icon className={iconClass} viewBox={'0 1 24 24'} />
-      </span>
-    );
-  }
-
-  return children;
-};
-
-Wrapper.propTypes = {
-  useWrapper: PropTypes.bool,
-  classNameContainer: PropTypes.string,
-  iconClass: PropTypes.string,
-  Icon: PropTypes.func,
-  children: PropTypes.element,
-};
-
-export const TokenTypes = {
-  text: PropTypes.string,
-  selectable: PropTypes.bool,
-};
-
-export class Token extends React.Component {
-  static rootClassName = 'tokenRootClass';
-
-  static propTypes = {
-    ...TokenTypes,
-    classes: PropTypes.object.isRequired,
-    className: PropTypes.string,
-    disabled: PropTypes.bool,
-    highlight: PropTypes.bool,
-    correct: PropTypes.bool,
-    text: PropTypes.string.isRequired,
-  };
-
-  static defaultProps = {
-    selectable: false,
-    text: '',
-  };
-
-  render() {
-    const {
-      text,
-      selectable,
-      selected,
-      classes,
-      className: classNameProp,
-      disabled,
-      index,
-      highlight,
-      correct,
-      animationsDisabled,
-      isMissing,
-    } = this.props;
-    const isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
-
-    let className;
-    let classNameContainer;
-    let Icon;
-    let iconClass;
-
-    if (correct === undefined && selected && disabled) {
-      className = classNames(classes.token, classes.selected, classes.disabledBlack);
-    } else if (correct !== undefined) {
-      className = classNames(Token.rootClassName, classes.custom);
-      Icon = correct ? Check : Close;
-      classNameContainer = correct === true ? classes.correct : classes.incorrect;
-      iconClass = correct === true ? classes.correctIcon : classes.incorrectIcon;
-    } else if (isMissing) {
-      className = classNames(Token.rootClassName, classes.custom, isMissing === true && classes.missing);
-    } else {
-      className = classNames(
-        Token.rootClassName,
-        classes.token,
-        disabled && classes.disabled,
-        selectable && !disabled && !isTouchEnabled && classes.selectable,
-        selected && !disabled && classes.selected,
-        selected && disabled && classes.disabledAndSelected,
-        highlight && selectable && !disabled && !selected && classes.highlight,
-        animationsDisabled && classes.print,
-        classNameProp,
-      );
-    }
-    return (
-      <Wrapper
-        useWrapper={correct !== undefined}
-        classNameContainer={classNameContainer}
-        iconClass={iconClass}
-        Icon={Icon}
-      >
-        <span
-          className={className}
-          dangerouslySetInnerHTML={{ __html: (text || '').replace(/\n/g, '<br>') }}
-          data-indexkey={index}
-        />
-      </Wrapper>
-    );
-  }
-}
-
-export default withStyles((theme) => {
-  return {
-    token: {
-      cursor: 'pointer',
-      textIndent: 0,
-    },
-    disabled: {
-      cursor: 'inherit',
-      color: color.disabled(),
-    },
-    disabledBlack: {
-      cursor: 'inherit',
-    },
-    disabledAndSelected: {
-      backgroundColor: color.secondaryLight(),
-    },
-    selectable: {
-      [theme.breakpoints.up(769)]: {
-        '&:hover': {
-          backgroundColor: color.primaryLight(),
-          color: theme.palette.common.black,
-          '& > *': {
-            backgroundColor: color.primaryLight(),
-          },
-        },
-      },
-    },
-    selected: {
-      backgroundColor: color.primaryLight(),
-      color: theme.palette.common.black,
-      lineHeight: `${theme.spacing.unit * 3}px`,
-      '& > *': {
-        backgroundColor: color.primaryLight(),
-      },
-    },
-    highlight: {
-      border: `dashed 2px ${color.disabled()}`,
-      lineHeight: `${theme.spacing.unit * 3}px`,
-    },
-    print: {
-      border: `dashed 2px ${color.disabled()}`,
-      lineHeight: `${theme.spacing.unit * 3}px`,
-      color: color.text(),
-    },
-    custom: {
-      display: 'initial',
-    },
-    correct: {
-      backgroundColor: color.correctSecondary(),
-      border: `${color.correct()} solid 2px`,
-      color: theme.palette.common.black,
-      lineHeight: `${theme.spacing.unit * 3}px`,
-    },
-    incorrect: {
-      backgroundColor: color.incorrectSecondary(),
-      border: `${color.missing()} solid 2px`,
-      color: theme.palette.common.black,
-      lineHeight: `${theme.spacing.unit * 3}px`,
-    },
-    missing: {
-      backgroundColor: color.incorrectSecondary(),
-      border: `${color.missing()} dashed 2px`,
-      color: theme.palette.common.black,
-      lineHeight: `${theme.spacing.unit * 3}px`,
-      textDecoration: `line-through ${color.missing()}`,
-    },
-    incorrectIcon: {
-      verticalAlign: 'middle',
-      fontSize: 'larger',
-      color: color.missing(),
-    },
-    correctIcon: {
-      verticalAlign: 'middle',
-      fontSize: 'larger',
-      color: color.correct(),
-    },
-  };
-})(Token);