@pie-lib/text-select 1.32.1 → 1.33.0-mui-update.0

package/src/token-select/token.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
-import Check from '@material-ui/icons/Check';
-import Close from '@material-ui/icons/Close';
+import Check from '@mui/icons-material/Check';
+import Close from '@mui/icons-material/Close';
 
 import { color } from '@pie-lib/render-ui';
 
@@ -13,22 +13,114 @@ const LINE_HEIGHT_MULTIPLIER = 3.2;
 const CORRECTNESS_LINE_HEIGHT_MULTIPLIER = 3.4;
 const CORRECTNESS_PADDING = 2;
 
-const Wrapper = ({ useWrapper, children, classNameContainer, iconClass, Icon }) =>
+// Styled components for different token states
+const StyledToken = styled('span')(({ theme }) => ({
+  cursor: 'pointer',
+  textIndent: 0,
+  '&.disabled': {
+    cursor: 'inherit',
+    color: color.disabled(),
+  },
+  '&.disabledBlack': {
+    cursor: 'inherit',
+  },
+  '&.disabledAndSelected': {
+    backgroundColor: color.blueGrey100(),
+  },
+  [`@media (min-width: ${theme.breakpoints.values.md}px)`]: {
+    '&.selectable:hover': {
+      backgroundColor: color.blueGrey300(),
+      color: theme.palette.common.black,
+      '& > *': {
+        backgroundColor: color.blueGrey300(),
+      },
+    },
+  },
+  '&.selected': {
+    backgroundColor: color.blueGrey100(),
+    color: theme.palette.common.black,
+    lineHeight: `${theme.spacing(1) * LINE_HEIGHT_MULTIPLIER}px`,
+    border: `solid 2px ${color.blueGrey900()}`,
+    borderRadius: '4px',
+    '& > *': {
+      backgroundColor: color.blueGrey100(),
+    },
+  },
+  '&.highlight': {
+    border: `dashed 2px ${color.blueGrey600()}`,
+    borderRadius: '4px',
+    lineHeight: `${theme.spacing(1) * LINE_HEIGHT_MULTIPLIER}px`,
+  },
+  '&.print': {
+    border: `dashed 2px ${color.blueGrey600()}`,
+    borderRadius: '4px',
+    lineHeight: `${theme.spacing(1) * LINE_HEIGHT_MULTIPLIER}px`,
+    color: color.text(),
+  },
+  '&.custom': {
+    display: 'initial',
+  },
+}));
+
+const StyledCommonTokenStyle = styled('span')(({ theme }) => ({
+  position: 'relative',
+  borderRadius: '4px',
+  color: theme.palette.common.black,
+  lineHeight: `${theme.spacing(1) * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING}px`,
+  padding: `${CORRECTNESS_PADDING}px`,
+}));
+
+const StyledCorrectContainer = styled(StyledCommonTokenStyle)(() => ({
+  border: `${color.correctTertiary()} solid 2px`,
+}));
+
+const StyledIncorrectContainer = styled(StyledCommonTokenStyle)(() => ({
+  border: `${color.incorrectWithIcon()} solid 2px`,
+}));
+
+const StyledMissingContainer = styled(StyledCommonTokenStyle)(() => ({
+  border: `${color.incorrectWithIcon()} dashed 2px`,
+}));
+
+const StyledCorrectnessIcon = styled('span')(() => ({
+  color: color.white(),
+  position: 'absolute',
+  top: '-8px',
+  left: '-8px',
+  borderRadius: '50%',
+  fontSize: '12px',
+  padding: '2px',
+  display: 'inline-block',
+}));
+
+const StyledCorrectIcon = styled(StyledCorrectnessIcon)(() => ({
+  backgroundColor: color.correctTertiary(),
+}));
+
+const StyledIncorrectIcon = styled(StyledCorrectnessIcon)(() => ({
+  backgroundColor: color.incorrectWithIcon(),
+}));
+
+const Wrapper = ({ useWrapper, children, Container, IconComponent, Icon }) =>
   useWrapper ? (
-    <span className={classNameContainer}>
+    <Container>
       {children}
-      <Icon className={iconClass} />
-    </span>
+      {Icon && IconComponent ? (
+        <IconComponent>
+          <Icon fontSize="inherit" />
+        </IconComponent>
+      ) : null}
+    </Container>
   ) : (
     children
   );
 
 Wrapper.propTypes = {
   useWrapper: PropTypes.bool,
-  classNameContainer: PropTypes.string,
-  iconClass: PropTypes.string,
-  Icon: PropTypes.func,
-  children: PropTypes.element,
+  Container: PropTypes.elementType,
+  IconComponent: PropTypes.elementType,
+  Icon: PropTypes.elementType,
+  children: PropTypes.node,
 };
 
 export const TokenTypes = {
@@ -41,7 +133,6 @@ export class Token extends React.Component {
 
   static propTypes = {
     ...TokenTypes,
-    classes: PropTypes.object.isRequired,
     text: PropTypes.string.isRequired,
     className: PropTypes.string,
     disabled: PropTypes.bool,
@@ -58,7 +149,6 @@ export class Token extends React.Component {
     const {
       selectable,
       selected,
-      classes,
       className: classNameProp,
       disabled,
       highlight,
@@ -68,68 +158,70 @@ export class Token extends React.Component {
     } = this.props;
     const isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
     const baseClassName = Token.rootClassName;
-    let classNameContainer;
+    let Container;
     let Icon;
-    let iconClass;
+    let IconComponent;
 
     if (correct === undefined && selected && disabled) {
       return {
-        className: classNames(classes.token, classes.selected, classes.disabledBlack),
+        className: classNames(baseClassName, 'selected', 'disabledBlack', classNameProp),
+        Component: StyledToken,
       };
     }
 
     if (correct !== undefined) {
       const isCorrect = correct === true;
       return {
-        className: classNames(baseClassName, classes.custom),
-        classNameContainer: classNames(isCorrect ? classes.correct : classes.incorrect, classes.commonTokenStyle),
+        className: classNames(baseClassName, 'custom', classNameProp),
+        Component: StyledToken,
+        Container: isCorrect ? StyledCorrectContainer : StyledIncorrectContainer,
         Icon: isCorrect ? Check : Close,
-        iconClass: classNames(
-          classes.correctnessIndicatorIcon,
-          isCorrect ? classes.correctIcon : classes.incorrectIcon,
-        ),
+        IconComponent: isCorrect ? StyledCorrectIcon : StyledIncorrectIcon,
       };
     }
 
     if (isMissing) {
       return {
-        className: classNames(baseClassName, classes.custom, classes.missing, classes.commonTokenStyle),
-        classNameContainer: classes.commonTokenStyle,
+        className: classNames(baseClassName, 'custom', 'missing', classNameProp),
+        Component: StyledToken,
+        Container: StyledMissingContainer,
         Icon: Close,
-        iconClass: classNames(classes.correctnessIndicatorIcon, classes.incorrectIcon),
+        IconComponent: StyledIncorrectIcon,
       };
     }
 
     return {
       className: classNames(
         baseClassName,
-        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,
+        disabled && 'disabled',
+        selectable && !disabled && !isTouchEnabled && 'selectable',
+        selected && !disabled && 'selected',
+        selected && disabled && 'disabledAndSelected',
+        highlight && selectable && !disabled && !selected && 'highlight',
+        animationsDisabled && 'print',
         classNameProp,
       ),
-      classNameContainer,
+      Component: StyledToken,
+      Container,
       Icon,
-      iconClass,
+      IconComponent,
     };
   };
 
   render() {
     const { text, index, correct, isMissing } = this.props;
-    const { className, classNameContainer, Icon, iconClass } = this.getClassAndIconConfig();
+    const { className, Component, Container, Icon, IconComponent } = this.getClassAndIconConfig();
+
+    const TokenComponent = Component || StyledToken;
 
     return (
       <Wrapper
         useWrapper={correct !== undefined || isMissing}
-        classNameContainer={classNameContainer}
-        iconClass={iconClass}
+        Container={Container}
+        IconComponent={IconComponent}
         Icon={Icon}
       >
-        <span
+        <TokenComponent
           className={className}
           dangerouslySetInnerHTML={{ __html: (text || '').replace(/\n/g, '<br>') }}
           data-indexkey={index}
@@ -139,87 +231,4 @@ export class Token extends React.Component {
   }
 }
 
-export default withStyles((theme) => {
-  return {
-    token: {
-      cursor: 'pointer',
-      textIndent: 0,
-    },
-    disabled: {
-      cursor: 'inherit',
-      color: color.disabled(),
-    },
-    disabledBlack: {
-      cursor: 'inherit',
-    },
-    disabledAndSelected: {
-      backgroundColor: color.blueGrey100(),
-    },
-    selectable: {
-      [theme.breakpoints.up(769)]: {
-        '&:hover': {
-          backgroundColor: color.blueGrey300(),
-          color: theme.palette.common.black,
-          '& > *': {
-            backgroundColor: color.blueGrey300(),
-          },
-        },
-      },
-    },
-    selected: {
-      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.blueGrey100(),
-      },
-    },
-    highlight: {
-      border: `dashed 2px ${color.blueGrey600()}`,
-      borderRadius: '4px',
-      lineHeight: `${theme.spacing.unit * LINE_HEIGHT_MULTIPLIER}px`,
-    },
-    print: {
-      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: {
-      border: `${color.correctTertiary()} solid 2px`,
-    },
-    incorrect: {
-      border: `${color.incorrectWithIcon()} solid 2px`,
-    },
-    missing: {
-      border: `${color.incorrectWithIcon()} dashed 2px`,
-    },
-    incorrectIcon: {
-      backgroundColor: color.incorrectWithIcon(),
-    },
-    correctIcon: {
-      backgroundColor: color.correctTertiary(),
-    },
-    correctnessIndicatorIcon: {
-      color: color.white(),
-      position: 'absolute',
-      top: '-8px',
-      left: '-8px',
-      borderRadius: '50%',
-      fontSize: '12px',
-      padding: '2px',
-    },
-  };
-})(Token);
+export default Token;

package/src/tokenizer/controls.jsx

@@ -1,15 +1,36 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/core/styles';
-import Switch from '@material-ui/core/Switch';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import { color } from '@pie-lib/render-ui';
-import classNames from 'classnames';
+
+const StyledControls = styled('div')(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+}));
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  marginRight: theme.spacing(1),
+}));
+
+const StyledSwitch = styled(Switch)(() => ({
+  '& .MuiSwitch-thumb': {
+    '&.Mui-checked': {
+      color: `${color.tertiary()} !important`,
+    },
+  },
+  '& .MuiSwitch-track': {
+    '&.Mui-checked': {
+      backgroundColor: `${color.tertiaryLight()} !important`,
+    },
+  },
+}));
 
 export class Controls extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     onClear: PropTypes.func.isRequired,
     onWords: PropTypes.func.isRequired,
     onSentences: PropTypes.func.isRequired,
@@ -21,68 +42,45 @@ export class Controls extends React.Component {
   static defaultProps = {};
 
   render() {
-    const { classes, onClear, onWords, onSentences, onParagraphs, setCorrectMode, onToggleCorrectMode } = this.props;
+    const { onClear, onWords, onSentences, onParagraphs, setCorrectMode, onToggleCorrectMode } = this.props;
 
     return (
-      <div className={classes.controls}>
+      <StyledControls>
         <div>
-          <Button onClick={onWords} className={classes.button} size="small" color="primary" disabled={setCorrectMode}>
+          <StyledButton onClick={onWords} size="small" color="primary" disabled={setCorrectMode}>
             Words
-          </Button>
-          <Button
+          </StyledButton>
+          <StyledButton
             onClick={onSentences}
-            className={classes.button}
             size="small"
             color="primary"
             disabled={setCorrectMode}
           >
             Sentences
-          </Button>
-          <Button
+          </StyledButton>
+          <StyledButton
             onClick={onParagraphs}
-            className={classes.button}
             size="small"
             color="primary"
             disabled={setCorrectMode}
           >
             Paragraphs
-          </Button>
-          <Button className={classes.button} size="small" color="secondary" onClick={onClear} disabled={setCorrectMode}>
+          </StyledButton>
+          <StyledButton size="small" color="secondary" onClick={onClear} disabled={setCorrectMode}>
             Clear
-          </Button>
+          </StyledButton>
         </div>
         <FormControlLabel
           control={
-            <Switch
-              classes={{
-                checked: classes.checkedThumb,
-                bar: classNames({
-                  [classes.checkedBar]: setCorrectMode,
-                }),
-              }}
+            <StyledSwitch
               checked={setCorrectMode}
               onChange={onToggleCorrectMode}
             />
           }
           label="Set correct answers"
         />
-      </div>
+      </StyledControls>
     );
   }
 }
-export default withStyles((theme) => ({
-  button: {
-    marginRight: theme.spacing.unit,
-  },
-  controls: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  checkedThumb: {
-    color: `${color.tertiary()} !important`,
-  },
-  checkedBar: {
-    backgroundColor: `${color.tertiaryLight()} !important`,
-  },
-}))(Controls);
+export default Controls;

package/src/tokenizer/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Controls from './controls';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { words, sentences, paragraphs } from './builder';
 import clone from 'lodash/clone';
 import isEqual from 'lodash/isEqual';
@@ -10,6 +10,15 @@ import classNames from 'classnames';
 import { noSelect } from '@pie-lib/style-utils';
 import TokenText from './token-text';
 
+const StyledTokenizer = styled('div')(() => ({}));
+
+const StyledText = styled('div')(() => ({
+  whiteSpace: 'pre-wrap',
+  '&.noselect': {
+    ...noSelect(),
+  },
+}));
+
 export class Tokenizer extends React.Component {
   static propTypes = {
     text: PropTypes.string.isRequired,
@@ -21,7 +30,6 @@ export class Tokenizer extends React.Component {
         end: PropTypes.number,
       }),
     ),
-    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     onChange: PropTypes.func.isRequired,
   };
@@ -112,15 +120,13 @@ export class Tokenizer extends React.Component {
   };
 
   render() {
-    const { text, tokens, classes, className } = this.props;
+    const { text, tokens, className } = this.props;
     const { setCorrectMode } = this.state;
 
-    const tokenClassName = classNames(classes.text, setCorrectMode && classes.noselect);
-
-    const rootName = classNames(classes.tokenizer, className);
+    const tokenClassName = classNames('text', setCorrectMode && 'noselect');
 
     return (
-      <div className={rootName}>
+      <StyledTokenizer className={className}>
         <Controls
           onClear={this.clear}
           onWords={() => this.buildTokens('words', words)}
@@ -129,21 +135,17 @@ export class Tokenizer extends React.Component {
           setCorrectMode={setCorrectMode}
           onToggleCorrectMode={this.toggleCorrectMode}
         />
-        <TokenText
+        <StyledText
           className={tokenClassName}
+          as={TokenText}
           text={text}
           tokens={tokens}
           onTokenClick={this.tokenClick}
           onSelectToken={this.selectToken}
         />
-      </div>
+      </StyledTokenizer>
     );
   }
 }
 
-export default withStyles(() => ({
-  text: {
-    whiteSpace: 'pre-wrap',
-  },
-  noselect: { ...noSelect() },
-}))(Tokenizer);
+export default Tokenizer;

package/src/tokenizer/token-text.jsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { normalize, intersection } from './builder';
-import yellow from '@material-ui/core/colors/yellow';
-import green from '@material-ui/core/colors/green';
 import debug from 'debug';
 import classNames from 'classnames';
 
 import { clearSelection, getCaretCharacterOffsetWithin } from './selection-utils';
 
+import { yellow, green } from '@mui/material/colors';
+
 const log = debug('@pie-lib:text-select:token-text');
 
-export const Text = withStyles(() => ({
-  predefined: {
+const StyledText = styled('span')(() => ({
+  '&.predefined': {
     cursor: 'pointer',
     backgroundColor: yellow[100],
     border: `dashed 0px ${yellow[700]}`,
@@ -23,23 +23,25 @@ export const Text = withStyles(() => ({
       border: `dashed 0px ${yellow[700]}`,
     },
   },
-  correct: {
+  '&.correct': {
     backgroundColor: green[500],
     '& *': {
       backgroundColor: green[500],
     },
   },
-}))(({ text, predefined, classes, onClick, correct }) => {
+}));
+
+export const Text = ({ text, predefined, onClick, correct }) => {
   const formattedText = (text || '').replace(/\n/g, '<br>');
 
   if (predefined) {
-    const className = classNames(classes.predefined, correct && classes.correct);
+    const className = classNames('predefined', correct && 'correct');
 
-    return <span onClick={onClick} className={className} dangerouslySetInnerHTML={{ __html: formattedText }} />;
+    return <StyledText onClick={onClick} className={className} dangerouslySetInnerHTML={{ __html: formattedText }} />;
   } else {
     return <span dangerouslySetInnerHTML={{ __html: formattedText }} />;
   }
-});
+};
 
 const notAllowedCharacters = ['\n', ' ', '\t'];