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

package/src/token-select/token.jsx

@@ -2,22 +2,26 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
-import { color } from '@pie-lib/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>
-    );
-  }
+import { color } from '@pie-lib/render-ui';
 
-  return children;
-};
+// we need to use a larger line height for the token to be more readable
+const LINE_HEIGHT_MULTIPLIER = 3.2;
+// we need a bit more space for correctness indicators
+const CORRECTNESS_LINE_HEIGHT_MULTIPLIER = 3.4;
+const CORRECTNESS_PADDING = 2;
+
+const Wrapper = ({ useWrapper, children, classNameContainer, iconClass, Icon }) =>
+  useWrapper ? (
+    <span className={classNameContainer}>
+      {children}
+      <Icon className={iconClass} />
+    </span>
+  ) : (
+    children
+  );
 
 Wrapper.propTypes = {
   useWrapper: PropTypes.bool,
@@ -38,11 +42,11 @@ export class Token extends React.Component {
   static propTypes = {
     ...TokenTypes,
     classes: PropTypes.object.isRequired,
+    text: PropTypes.string.isRequired,
     className: PropTypes.string,
     disabled: PropTypes.bool,
     highlight: PropTypes.bool,
     correct: PropTypes.bool,
-    text: PropTypes.string.isRequired,
   };
 
   static defaultProps = {
@@ -50,39 +54,55 @@ export class Token extends React.Component {
     text: '',
   };
 
-  render() {
+  getClassAndIconConfig = () => {
     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;
+    const baseClassName = Token.rootClassName;
     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,
+      return {
+        className: classNames(classes.token, classes.selected, classes.disabledBlack),
+      };
+    }
+
+    if (correct !== undefined) {
+      const isCorrect = correct === true;
+      return {
+        className: classNames(baseClassName, classes.custom),
+        classNameContainer: classNames(isCorrect ? classes.correct : classes.incorrect, classes.commonTokenStyle),
+        Icon: isCorrect ? Check : Close,
+        iconClass: classNames(
+          classes.correctnessIndicatorIcon,
+          isCorrect ? classes.correctIcon : classes.incorrectIcon,
+        ),
+      };
+    }
+
+    if (isMissing) {
+      return {
+        className: classNames(baseClassName, classes.custom, classes.missing, classes.commonTokenStyle),
+        classNameContainer: classes.commonTokenStyle,
+        Icon: Close,
+        iconClass: classNames(classes.correctnessIndicatorIcon, classes.incorrectIcon),
+      };
+    }
+
+    return {
+      className: classNames(
+        baseClassName,
         classes.token,
         disabled && classes.disabled,
         selectable && !disabled && !isTouchEnabled && classes.selectable,
@@ -91,11 +111,20 @@ export class Token extends React.Component {
         highlight && selectable && !disabled && !selected && classes.highlight,
         animationsDisabled && classes.print,
         classNameProp,
-      );
-    }
+      ),
+      classNameContainer,
+      Icon,
+      iconClass,
+    };
+  };
+
+  render() {
+    const { text, index, correct, isMissing } = this.props;
+    const { className, classNameContainer, Icon, iconClass } = this.getClassAndIconConfig();
+
     return (
       <Wrapper
-        useWrapper={correct !== undefined}
+        useWrapper={correct !== undefined || isMissing}
         classNameContainer={classNameContainer}
         iconClass={iconClass}
         Icon={Icon}
@@ -115,10 +144,6 @@ export default withStyles((theme) => {
     token: {
       cursor: 'pointer',
       textIndent: 0,
-      padding: theme.spacing.unit / 2,
-      paddingRight: 0,
-      paddingLeft: 0,
-      transition: 'background-color 100ms ease-in',
     },
     disabled: {
       cursor: 'inherit',
@@ -128,72 +153,73 @@ export default withStyles((theme) => {
       cursor: 'inherit',
     },
     disabledAndSelected: {
-      backgroundColor: color.secondaryLight(),
+      backgroundColor: color.blueGrey100(),
     },
     selectable: {
       [theme.breakpoints.up(769)]: {
         '&:hover': {
-          backgroundColor: color.primaryLight(),
+          backgroundColor: color.blueGrey300(),
+          color: theme.palette.common.black,
           '& > *': {
-            backgroundColor: color.primaryLight(),
+            backgroundColor: color.blueGrey300(),
           },
         },
       },
     },
     selected: {
-      lineHeight: 2,
-      marginTop: theme.spacing.unit / 2,
-      backgroundColor: color.primaryLight(),
+      backgroundColor: color.blueGrey100(),
+      color: theme.palette.common.black,
+      lineHeight: `${theme.spacing.unit * LINE_HEIGHT_MULTIPLIER}px`,
+      border: `solid 2px ${color.blueGrey900()}`,
+      borderRadius: '4px',
       '& > *': {
-        backgroundColor: color.primaryLight(),
+        backgroundColor: color.blueGrey100(),
       },
     },
     highlight: {
-      border: `dashed 2px ${color.disabled()}`,
-      lineHeight: 2,
-      boxSizing: 'border-box',
-      marginTop: theme.spacing.unit / 2,
-      display: 'inline-block',
-      padding: theme.spacing.unit,
+      border: `dashed 2px ${color.blueGrey600()}`,
+      borderRadius: '4px',
+      lineHeight: `${theme.spacing.unit * LINE_HEIGHT_MULTIPLIER}px`,
     },
     print: {
-      border: `dashed 2px ${color.disabled()}`,
-      lineHeight: 2,
-      boxSizing: 'border-box',
-      marginTop: theme.spacing.unit / 2,
-      display: 'inline-block',
-      padding: theme.spacing.unit,
+      border: `dashed 2px ${color.blueGrey600()}`,
+      borderRadius: '4px',
+      lineHeight: `${theme.spacing.unit * LINE_HEIGHT_MULTIPLIER}px`,
       color: color.text(),
     },
-
     custom: {
       display: 'initial',
     },
+    commonTokenStyle: {
+      position: 'relative',
+      borderRadius: '4px',
+      color: theme.palette.common.black,
+      lineHeight: `${theme.spacing.unit * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING}px`,
+      padding: `${CORRECTNESS_PADDING}px`,
+    },
     correct: {
-      backgroundColor: color.correctSecondary(),
-      border: `${color.correct()} solid 2px`,
-      lineHeight: `${theme.spacing.unit * 4}px`,
+      border: `${color.correctTertiary()} solid 2px`,
     },
     incorrect: {
-      backgroundColor: color.incorrectSecondary(),
-      border: `${color.missing()} solid 2px`,
-      lineHeight: `${theme.spacing.unit * 4}px`,
+      border: `${color.incorrectWithIcon()} solid 2px`,
     },
     missing: {
-      backgroundColor: color.incorrectSecondary(),
-      border: `${color.missing()} dashed 2px`,
-      textDecoration: `line-through ${color.missing()}`,
+      border: `${color.incorrectWithIcon()} dashed 2px`,
     },
     incorrectIcon: {
-      verticalAlign: 'middle',
-      fontSize: 'larger',
-      color: color.missing(),
+      backgroundColor: color.incorrectWithIcon(),
     },
-
     correctIcon: {
-      verticalAlign: 'middle',
-      fontSize: 'larger',
-      color: color.correct(),
+      backgroundColor: color.correctTertiary(),
+    },
+    correctnessIndicatorIcon: {
+      color: color.white(),
+      position: 'absolute',
+      top: '-8px',
+      left: '-8px',
+      borderRadius: '50%',
+      fontSize: '12px',
+      padding: '2px',
     },
   };
 })(Token);

package/src/tokenizer/__tests__/__snapshots__/controls.test.jsx.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`controls snapshot renders 1`] = `
+<div>
+  <div>
+    <WithStyles(Button)
+      className="button"
+      color="primary"
+      disabled={false}
+      onClick={[MockFunction]}
+      size="small"
+    >
+      Words
+    </WithStyles(Button)>
+    <WithStyles(Button)
+      className="button"
+      color="primary"
+      disabled={false}
+      onClick={[MockFunction]}
+      size="small"
+    >
+      Sentences
+    </WithStyles(Button)>
+    <WithStyles(Button)
+      className="button"
+      color="primary"
+      disabled={false}
+      onClick={[MockFunction]}
+      size="small"
+    >
+      Paragraphs
+    </WithStyles(Button)>
+    <WithStyles(Button)
+      className="button"
+      color="secondary"
+      disabled={false}
+      onClick={[MockFunction]}
+      size="small"
+    >
+      Clear
+    </WithStyles(Button)>
+  </div>
+  <WithStyles(WithFormControlContext(FormControlLabel))
+    control={
+      <WithStyles(Switch)
+        checked={false}
+        classes={
+          Object {
+            "bar": "",
+            "checked": undefined,
+          }
+        }
+        onChange={[MockFunction]}
+      />
+    }
+    label="Set correct answers"
+  />
+</div>
+`;

package/src/tokenizer/__tests__/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tokenizer snapshot renders 1`] = `
+<div
+  className=""
+>
+  <WithStyles(Controls)
+    onClear={[Function]}
+    onParagraphs={[Function]}
+    onSentences={[Function]}
+    onToggleCorrectMode={[Function]}
+    onWords={[Function]}
+    setCorrectMode={false}
+  />
+  <TokenText
+    className=""
+    onSelectToken={[Function]}
+    onTokenClick={[Function]}
+    text="foo"
+    tokens={
+      Array [
+        Object {
+          "end": 1,
+          "start": 0,
+          "text": "f",
+        },
+      ]
+    }
+  />
+</div>
+`;

package/src/tokenizer/__tests__/__snapshots__/token-text.test.jsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`token-text snapshot renders 1`] = `
+<div
+  onClick={[Function]}
+>
+  <WithStyles(Component)
+    end={13}
+    key="0"
+    onClick={[Function]}
+    predefined={true}
+    start={0}
+    text="lorem
+foo bar"
+  />
+</div>
+`;

package/src/tokenizer/__tests__/builder.test.js

@@ -0,0 +1,256 @@
+import { normalize, sentences, words, paragraphs, sort, intersection } from '../builder';
+
+const token = (start, end, text) => ({ start, end, text });
+
+const selection = (start, end) => ({ start, end });
+
+const o = (strings, ...exp) => {
+  return strings.reduce((acc, v, index) => {
+    const e = exp[index];
+    const s = typeof e === 'object' ? JSON.stringify(e) : e;
+    return `${acc}${v}${s || ''}`;
+  }, '');
+};
+
+describe('builder', () => {
+  describe('intersection', () => {
+    const assert = (selection, tokens, expected) => {
+      it(o`${selection}, ${tokens} => ${expected}`, () => {
+        const received = intersection(selection, tokens);
+        expect(received.results).toEqual(expected);
+      });
+    };
+
+    assert(selection(2, 3), [token(0, 1)], []);
+    assert(selection(1, 2), [token(0, 1)], []);
+    assert(selection(0, 1), [token(0, 1)], [{ token: token(0, 1), type: 'exact-fit' }]);
+    assert(selection(0, 2), [token(0, 1)], [{ token: token(0, 1), type: 'within-selection' }]);
+    assert(selection(0, 2), [token(1, 2)], [{ token: token(1, 2), type: 'within-selection' }]);
+    assert(
+      selection(0, 10),
+      [token(1, 2), token(2, 3)],
+      [
+        { token: token(1, 2), type: 'within-selection' },
+        { token: token(2, 3), type: 'within-selection' },
+      ],
+    );
+    assert(
+      selection(0, 10),
+      [token(1, 2), token(2, 11)],
+      [
+        { token: token(1, 2), type: 'within-selection' },
+        { token: token(2, 11), type: 'overlap' },
+      ],
+    );
+  });
+
+  describe('sort', () => {
+    it('sorts', () => {
+      const out = sort([token(1, 2), token(0, 1)]);
+      expect(out).toEqual([token(0, 1), token(1, 2)]);
+    });
+    it('sorts', () => {
+      const out = sort([token(0, 1), token(1, 2)]);
+      expect(out).toEqual([token(0, 1), token(1, 2)]);
+    });
+    xit('sorts', () => {
+      expect(() => sort([token(0, 2), token(1, 2)])).toThrow(Error);
+    });
+  });
+  describe('normalize', () => {
+    const assert = (input, tokens, expected) => {
+      it(`${input} + ${JSON.stringify(tokens)} -> ${JSON.stringify(expected)}`, () => {
+        const out = normalize(input, tokens);
+        expect(out).toEqual(expected);
+      });
+    };
+    assert(
+      null,
+      [],
+      [
+        {
+          text: '',
+          start: 0,
+          end: 0,
+        },
+      ],
+    );
+    assert(
+      'abcde',
+      [
+        { text: 'b', start: 1, end: 2 },
+        { text: 'd', start: 3, end: 4 },
+      ],
+      [
+        { text: 'a', start: 0, end: 1 },
+        { text: 'b', start: 1, end: 2, predefined: true },
+        { text: 'c', start: 2, end: 3 },
+        { text: 'd', start: 3, end: 4, predefined: true },
+        { text: 'e', start: 4, end: 5 },
+      ],
+    );
+    assert(
+      'abc',
+      [{ text: 'c', start: 2, end: 3 }],
+      [
+        { text: 'ab', start: 0, end: 2 },
+        { text: 'c', start: 2, end: 3, predefined: true },
+      ],
+    );
+
+    assert(
+      'abc',
+      [
+        { text: 'c', start: 2, end: 3 },
+        { text: 'b', start: 1, end: 2 },
+      ],
+      [
+        { text: 'a', start: 0, end: 1 },
+        { text: 'b', start: 1, end: 2, predefined: true },
+        { text: 'c', start: 2, end: 3, predefined: true },
+      ],
+    );
+
+    assert(
+      'abc',
+      [{ text: 'a', start: 0, end: 1 }],
+      [
+        { text: 'a', start: 0, end: 1, predefined: true },
+        { text: 'bc', start: 1, end: 3 },
+      ],
+    );
+
+    assert(
+      'abcd',
+      [
+        { text: 'b', start: 1, end: 2 },
+        { text: 'c', start: 2, end: 3 },
+        { text: 'd', start: 3, end: 4 },
+      ],
+      [
+        { text: 'a', start: 0, end: 1 },
+        { text: 'b', start: 1, end: 2, predefined: true },
+        { text: 'c', start: 2, end: 3, predefined: true },
+        { text: 'd', start: 3, end: 4, predefined: true },
+      ],
+    );
+    assert(
+      'abcde',
+      [
+        { text: 'b', start: 1, end: 2 },
+        { text: 'c', start: 2, end: 3 },
+        { text: 'd', start: 3, end: 4 },
+      ],
+      [
+        { text: 'a', start: 0, end: 1 },
+        { text: 'b', start: 1, end: 2, predefined: true },
+        { text: 'c', start: 2, end: 3, predefined: true },
+        { text: 'd', start: 3, end: 4, predefined: true },
+        { text: 'e', start: 4, end: 5 },
+      ],
+    );
+
+    // same token defined multiple times
+    assert(
+      'abcde',
+      [
+        { text: 'c', start: 2, end: 3 },
+        { text: 'b', start: 1, end: 2 },
+        { text: 'c', start: 2, end: 3 },
+        { text: 'd', start: 3, end: 4 },
+        { text: 'c', start: 2, end: 3 },
+      ],
+      [
+        { text: 'a', start: 0, end: 1 },
+        { text: 'b', start: 1, end: 2, predefined: true },
+        { text: 'c', start: 2, end: 3, predefined: true },
+        { text: 'd', start: 3, end: 4, predefined: true },
+        { text: 'e', start: 4, end: 5 },
+      ],
+    );
+  });
+
+  describe('words', () => {
+    it('works', () => {
+      const out = words('foo. bar');
+      expect(out).toEqual([
+        {
+          text: 'foo.',
+          start: 0,
+          end: 4,
+        },
+        {
+          text: 'bar',
+          start: 5,
+          end: 8,
+        },
+      ]);
+    });
+  });
+
+  describe('sentences', () => {
+    it('foobar', () => {
+      const text = 'This is foo. This is bar.';
+      const out = sentences(text);
+      expect(out[0]).toEqual({ text: 'This is foo.', start: 0, end: 12 });
+      expect(out[1]).toEqual({ text: 'This is bar.', start: 13, end: 25 });
+    });
+
+    it('works', () => {
+      const text =
+        'On Jan. 20, former Sen. Barack Obama became the 44th President of the USA. Millions attended the Inauguration.';
+
+      const out = sentences(text);
+      expect(out.length).toEqual(2);
+    });
+
+    it('works for sentences separated by \n', () => {
+      const text = 'This is foo\nThis is bar';
+      const out = sentences(text);
+      expect(out[0]).toEqual({ text: 'This is foo', start: 0, end: 11 });
+      expect(out[1]).toEqual({ text: 'This is bar', start: 12, end: 23 });
+    });
+
+    it('works for sentences ending in one-character-words', () => {
+      const text =
+        "This is Sentence 1. This is Sentence 2. This is Sentence 3. This is Sentence 4. Dr. A. said he'll call in 5.";
+
+      const out = sentences(text);
+
+      expect(out.length).toEqual(5);
+
+      expect(out).toEqual([
+        { text: 'This is Sentence 1.', start: 0, end: 19 },
+        { text: 'This is Sentence 2.', start: 20, end: 39 },
+        { text: 'This is Sentence 3.', start: 40, end: 59 },
+        { text: 'This is Sentence 4.', start: 60, end: 79 },
+        { text: "Dr. A. said he'll call in 5.", start: 80, end: 108 },
+      ]);
+    });
+  });
+
+  describe('paragraphs', () => {
+    it('foobar', () => {
+      const text = 'This is foo. This is bar.\nThis is foobar. This is barfoo.';
+      const out = paragraphs(text);
+      expect(out[0]).toEqual({
+        text: 'This is foo. This is bar.',
+        start: 0,
+        end: 25,
+      });
+      expect(out[1]).toEqual({
+        text: 'This is foobar. This is barfoo.',
+        start: 26,
+        end: 57,
+      });
+    });
+    it('works', () => {
+      const text =
+        'On Jan. 20, former Sen. Barack Obama became the 44th President of the USA. Millions attended the Inauguration.' +
+        '\\ndadadadadadadadada.';
+
+      const out = paragraphs(text);
+      expect(out.length).toEqual(1);
+    });
+  });
+});

package/src/tokenizer/__tests__/controls.test.jsx

@@ -0,0 +1,25 @@
+import { Controls } from '../controls';
+import React from 'react';
+import { shallow, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
+
+describe('controls', () => {
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = shallow(
+        <Controls
+          classes={{ button: 'button' }}
+          onClear={jest.fn()}
+          onWords={jest.fn()}
+          onSentences={jest.fn()}
+          onParagraphs={jest.fn()}
+          setCorrectMode={false}
+          onToggleCorrectMode={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+  });
+});