@pie-element/ebsr 9.12.1 → 9.12.2-next.19

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/text-select/legend.js

@@ -0,0 +1,78 @@
+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/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/text-select/text-select.jsx

@@ -0,0 +1,79 @@
+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/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/text-select/token-select/index.jsx

@@ -0,0 +1,162 @@
+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/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/text-select/token-select/token.jsx

@@ -0,0 +1,190 @@
+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);