@pie-lib/text-select 1.12.7 → 1.12.8-next.1639

package/src/legend.js

@@ -2,9 +2,9 @@ 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 '@pie-lib/render-ui';
 import Translator from '@pie-lib/translator';
+import classNames from 'classnames';
 
 const { translator } = Translator;
 
@@ -12,6 +12,7 @@ export const Legend = withStyles((theme) => ({
   flexContainer: {
     display: 'flex',
     flexDirection: 'row',
+    alignItems: 'center',
     gap: `${2 * theme.spacing.unit}px`,
     borderBottom: '1px solid lightgrey',
     borderTop: '1px solid lightgrey',
@@ -19,60 +20,77 @@ export const Legend = withStyles((theme) => ({
     paddingTop: theme.spacing.unit,
     marginBottom: theme.spacing.unit,
   },
+  key: {
+    fontSize: '14px',
+    fontWeight: 'bold',
+    color: color.black(),
+    marginLeft: theme.spacing.unit,
+  },
   container: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: `${theme.spacing.unit / 2}px`,
-    alignItems: 'center',
+    position: 'relative',
+    padding: '4px',
+    fontSize: '14px',
+    borderRadius: '4px',
   },
   correct: {
-    fontSize: 'larger',
-    color: color.correct(),
-    backgroundColor: color.correctSecondary(),
-    border: `2px solid ${color.correct()}`,
+    border: `${color.correctTertiary()} solid 2px`,
   },
   incorrect: {
-    fontSize: 'larger',
-    color: color.missing(),
-    backgroundColor: color.incorrectSecondary(),
-    border: `2px solid ${color.missing()}`,
+    border: `${color.incorrectWithIcon()} solid 2px`,
   },
   missing: {
-    fontSize: 'larger',
-    color: color.missing(),
-    backgroundColor: color.incorrectSecondary(),
-    border: `2px dashed ${color.missing()}`,
+    border: `${color.incorrectWithIcon()} dashed 2px`,
+  },
+  incorrectIcon: {
+    backgroundColor: color.incorrectWithIcon(),
+  },
+  correctIcon: {
+    backgroundColor: color.correctTertiary(),
   },
-}))(({ classes, language }) => {
-  const icons = [
+  icon: {
+    color: color.white(),
+    position: 'absolute',
+    top: '-8px',
+    left: '-8px',
+    borderRadius: '50%',
+    fontSize: '12px',
+    padding: '2px',
+  },
+}))(({ classes, language, showOnlyCorrect }) => {
+  const legendItems = [
     {
-      iconName: Check,
+      Icon: Check,
       label: translator.t('selectText.correctAnswerSelected', { lng: language }),
-      className: classes.correct,
+      containerClass: classNames(classes.correct, classes.container),
+      iconClass: classNames(classes.correctIcon, classes.icon),
     },
     {
-      iconName: Remove,
-      label: translator.t('selectText.correctAnswerNotSelected', { lng: language }),
-      className: classes.missing,
+      Icon: Close,
+      label: translator.t('selectText.incorrectSelection', { lng: language }),
+      containerClass: classNames(classes.incorrect, classes.container),
+      iconClass: classNames(classes.incorrectIcon, classes.icon),
     },
     {
-      iconName: Close,
-      label: translator.t('selectText.incorrectSelection', { lng: language }),
-      className: classes.incorrect,
+      Icon: Close,
+      label: translator.t('selectText.correctAnswerNotSelected', { lng: language }),
+      containerClass: classNames(classes.missing, classes.container),
+      iconClass: classNames(classes.incorrectIcon, classes.icon),
     },
   ];
 
+  if (showOnlyCorrect) {
+    legendItems.splice(1, 2);
+  }
+
   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>
-        );
-      })}
+      <span className={classes.key}>{translator.t('selectText.key', { lng: language })}</span>
+      {legendItems.map(({ Icon, label, containerClass, iconClass }, idx) => (
+        <div key={idx} className={containerClass}>
+          <Icon className={iconClass} />
+          <span>{label}</span>
+        </div>
+      ))}
     </div>
   );
 });

package/src/token-select/__tests__/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`token-select snapshot renders 1`] = `
+<div
+  className=""
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"0\\" data-reactroot=\\"\\">foo bar</span></p>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;
+
+exports[`token-select snapshot renders in view mode with selected tokens 1`] = `
+<div
+  className=""
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><span class=\\"Token-token-1 Token-selected-6 Token-disabledBlack-3\\" data-indexkey=\\"0\\" data-reactroot=\\"\\">foo,</span><br><span class=\\"Token-token-1 Token-selected-6 Token-disabledBlack-3\\" data-indexkey=\\"2\\" data-reactroot=\\"\\">bar</span></p>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;
+
+exports[`token-select snapshot renders paragraphs properly 1`] = `
+<div
+  className=""
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"0\\" data-reactroot=\\"\\">foo,</span></p><p><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"2\\" data-reactroot=\\"\\">bar</span></p>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;
+
+exports[`token-select snapshot renders sentences properly 1`] = `
+<div
+  className=""
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"0\\" data-reactroot=\\"\\">foo,</span><br><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"2\\" data-reactroot=\\"\\">bar</span></p>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;

package/src/token-select/__tests__/__snapshots__/token.test.jsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`token snapshot renders 1`] = `
+<Wrapper>
+  <span
+    className="tokenRootClass token"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "foo bar",
+      }
+    }
+  />
+</Wrapper>
+`;
+
+exports[`token snapshot renders with brs 1`] = `
+<Wrapper>
+  <span
+    className="tokenRootClass token"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "foo <br>bar",
+      }
+    }
+  />
+</Wrapper>
+`;

package/src/token-select/__tests__/index.test.jsx

@@ -0,0 +1,257 @@
+import { TokenSelect } from '../index';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+describe('token-select', () => {
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = shallow(
+        <TokenSelect
+          tokens={[
+            {
+              text: 'foo bar',
+              start: 0,
+              end: 7,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+          ]}
+          classes={{}}
+          onChange={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders sentences properly', () => {
+      const w = shallow(
+        <TokenSelect
+          tokens={[
+            {
+              text: 'foo,',
+              start: 0,
+              end: 4,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+            {
+              text: '\n',
+              start: 4,
+              end: 5,
+              selected: false,
+            },
+            {
+              text: 'bar',
+              start: 5,
+              end: 8,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+          ]}
+          classes={{}}
+          onChange={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders paragraphs properly', () => {
+      const w = shallow(
+        <TokenSelect
+          tokens={[
+            {
+              text: 'foo,',
+              start: 0,
+              end: 4,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+            {
+              text: '\n\n',
+              start: 4,
+              end: 5,
+              selected: false,
+            },
+            {
+              text: 'bar',
+              start: 5,
+              end: 8,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+          ]}
+          classes={{}}
+          onChange={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders in view mode with selected tokens', () => {
+      const w = shallow(
+        <TokenSelect
+          disabled
+          tokens={[
+            {
+              text: 'foo,',
+              start: 0,
+              end: 4,
+              predefined: true,
+              selectable: true,
+              selected: true,
+            },
+            {
+              text: '\n',
+              start: 4,
+              end: 5,
+              selected: false,
+            },
+            {
+              text: 'bar',
+              start: 5,
+              end: 8,
+              predefined: true,
+              selectable: true,
+              selected: true,
+            },
+          ]}
+          classes={{}}
+          onChange={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    let w, onChange;
+    beforeEach(() => {
+      onChange = jest.fn();
+      w = shallow(
+        <TokenSelect
+          tokens={[
+            {
+              text: 'foo',
+              start: 0,
+              end: 3,
+            },
+            {
+              text: 'bar',
+              start: 4,
+              end: 7,
+            },
+          ]}
+          classes={{}}
+          onChange={onChange}
+        />,
+      );
+    });
+    describe('selectedCount', () => {
+      it('returns the correct count', () => {
+        expect(w.instance().selectedCount()).toEqual(0);
+      });
+
+      it('returns the correct count for 1 selected', () => {
+        w.setProps({ tokens: [{ selected: true }] });
+        expect(w.instance().selectedCount()).toEqual(1);
+      });
+    });
+
+    describe('canSelectMore', () => {
+      it('returns true for undefined max selections', () => {
+        w.setProps({ maxNoOfSelections: undefined });
+        expect(w.instance().canSelectMore(10)).toEqual(true);
+      });
+      it('returns true for 0 max selections', () => {
+        w.setProps({ maxNoOfSelections: 0 });
+        expect(w.instance().canSelectMore(10)).toEqual(true);
+      });
+      it('returns true for -1 max selections', () => {
+        w.setProps({ maxNoOfSelections: -1 });
+        expect(w.instance().canSelectMore(10)).toEqual(true);
+      });
+      it('returns true for 5 max selections and count 4', () => {
+        w.setProps({ maxNoOfSelections: 5 });
+        expect(w.instance().canSelectMore(4)).toEqual(true);
+      });
+
+      it('returns true for 5 max selections and count 5', () => {
+        w.setProps({ maxNoOfSelections: 5 });
+        expect(w.instance().canSelectMore(5)).toEqual(false);
+      });
+
+      it('returns false for 5 max selections and count 6', () => {
+        w.setProps({ maxNoOfSelections: 5 });
+        expect(w.instance().canSelectMore(6)).toEqual(false);
+      });
+
+      it('returns true for 1 max selections and count 1', () => {
+        w.setProps({ maxNoOfSelections: 1 });
+        expect(w.instance().canSelectMore(1)).toEqual(true);
+      });
+    });
+
+    describe('toggleToken', () => {
+      it('return if clicked target is not selectable', () => {
+        w.setProps({ maxNoOfSelections: 1, tokens: [{ selected: true }] });
+
+        const closest = jest.fn().mockReturnValue(null);
+        const mockedEvent = { target: { closest } };
+
+        w.instance().toggleToken(mockedEvent);
+
+        expect(onChange).not.toBeCalled();
+      });
+
+      it('calls onChange', () => {
+        w.setProps({ maxNoOfSelections: 0, tokens: [{ selected: true }] });
+
+        const closest = jest.fn().mockReturnValue({
+          dataset: {
+            indexkey: '0',
+          },
+        });
+        const mockedEvent = { target: { closest } };
+
+        w.instance().toggleToken(mockedEvent);
+
+        expect(onChange).toBeCalled();
+      });
+
+      it('returns if max tokens have been selected', () => {
+        w.setProps({ maxNoOfSelections: 0, tokens: [{ selected: true }] });
+
+        const closest = jest.fn().mockReturnValue({
+          dataset: {
+            indexkey: '0',
+          },
+        });
+        const mockedEvent = { target: { closest } };
+
+        w.instance().toggleToken(mockedEvent);
+
+        expect(onChange).not.toBeCalledWith([{ selected: true }]);
+      });
+
+      it('calls onChange if maxNoOfSelections is 1 and selectedCount is 1', () => {
+        w.setProps({ maxNoOfSelections: 1, tokens: [{ selected: true }] });
+
+        const closest = jest.fn().mockReturnValue({
+          dataset: {
+            indexkey: '0',
+          },
+        });
+        const mockedEvent = { target: { closest } };
+
+        w.instance().toggleToken(mockedEvent);
+
+        expect(onChange).toBeCalled();
+      });
+    });
+  });
+});

package/src/token-select/__tests__/token.test.jsx

@@ -0,0 +1,33 @@
+import { Token } from '../token';
+import { shallow } from 'enzyme';
+import React from 'react';
+
+describe('token', () => {
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = shallow(
+        <Token
+          classes={{
+            token: 'token',
+            selectable: 'selectable',
+          }}
+          text={'foo bar'}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders with brs', () => {
+      const w = shallow(
+        <Token
+          classes={{
+            token: 'token',
+            selectable: 'selectable',
+          }}
+          text={'foo \nbar'}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/token-select/index.jsx

@@ -58,7 +58,9 @@ export class TokenSelect extends React.Component {
     const targetedTokenIndex = targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;
     const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];
 
-    if (t && t.correct === undefined && !animationsDisabled) {
+    // don't toggle if we are in print mode, token correctness is defined or if it's missing
+    // (missing means that it was evaluated as correct and not selected)
+    if (t && t.correct === undefined && !animationsDisabled && !t.isMissing) {
       const { onChange, maxNoOfSelections } = this.props;
       const selected = !t.selected;