@pie-lib/math-input 6.6.1-next.124 → 6.6.1-next.333

package/src/horizontal-keypad.jsx

@@ -18,6 +18,7 @@ export default class HorizontalKeypad extends React.Component {
   static propTypes = {
     className: PropTypes.string,
     mode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    layoutForKeyPad: PropTypes.object,
     onClick: PropTypes.func.isRequired,
     onFocus: PropTypes.func,
     noDecimal: PropTypes.bool,
@@ -37,7 +38,7 @@ export default class HorizontalKeypad extends React.Component {
   };
 
   render() {
-    const { mode, onFocus, noDecimal, className, additionalKeys } = this.props;
+    const { mode, onFocus, noDecimal, className, additionalKeys, layoutForKeyPad } = this.props;
     const normalizedKeys = normalizeAdditionalKeys(additionalKeys);
 
     return (
@@ -45,6 +46,7 @@ export default class HorizontalKeypad extends React.Component {
         className={className}
         onFocus={onFocus}
         noDecimal={noDecimal}
+        layoutForKeyPad={layoutForKeyPad}
         additionalKeys={extendKeySet(keysForGrade(mode), normalizedKeys)}
         onPress={this.keypadPress}
         mode={mode}

package/src/keypad/index.jsx

@@ -145,6 +145,20 @@ const LatexButton = withStyles(theme => ({
   } else {
     buttonClass = classNames(props.classes.latexButton, props.mqClassName);
   }
+
+  try {
+    const MQ = MathQuill.getInterface(2);
+    const span = document.createElement('span');
+    span.innerHTML = '';
+    const mathField = MQ.StaticMath(span);
+
+    mathField.parseLatex(props.latex);
+    mathField.latex(props.latex);
+  } catch (e) {
+    // received latex has errors - do not create button
+    return <></>;
+  }
+
   return (
     <Button className={classNames(props.classes.root, props.className)} onClick={props.onClick}>
       <mq.Static className={buttonClass} latex={props.latex} />
@@ -152,12 +166,25 @@ const LatexButton = withStyles(theme => ({
   );
 });
 
+const createCustomLayout = layoutObj => {
+  if (layoutObj) {
+    return {
+      gridTemplateColumns: `repeat(${layoutObj.columns}, minmax(min-content, 150px))`,
+      gridTemplateRows: `repeat(${layoutObj.rows}, minmax(40px, 60px))`,
+      gridAutoFlow: 'initial'
+    };
+  }
+
+  return {};
+};
+
 export class KeyPad extends React.Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     baseSet: PropTypes.array,
     additionalKeys: PropTypes.array,
+    layoutForKeyPad: PropTypes.object,
     onPress: PropTypes.func.isRequired,
     onFocus: PropTypes.func,
     noDecimal: PropTypes.bool,
@@ -193,14 +220,23 @@ export class KeyPad extends React.Component {
   };
 
   render() {
-    const { classes, className, baseSet, additionalKeys, onFocus, mode } = this.props;
+    const {
+      classes,
+      className,
+      baseSet,
+      additionalKeys,
+      layoutForKeyPad,
+      onFocus,
+      mode
+    } = this.props;
 
     const noBaseSet = [
       'non-negative-integers',
       'integers',
       'decimals',
       'fractions',
-      'item-authoring'
+      'item-authoring',
+      'language'
     ];
 
     const keysWithoutBaseSet = noBaseSet.includes(mode);
@@ -211,10 +247,15 @@ export class KeyPad extends React.Component {
     const shift = allKeys.length % 5 ? 1 : 0;
     const style = {
       gridTemplateColumns: `repeat(${Math.floor(allKeys.length / 5) +
-        shift}, minmax(min-content, 150px))`
+        shift}, minmax(min-content, 150px))`,
+      ...createCustomLayout(layoutForKeyPad)
     };
     return (
-      <div className={classNames(classes.keys, className)} style={style} onFocus={onFocus}>
+      <div
+        className={classNames(classes.keys, className, classes[mode])}
+        style={style}
+        onFocus={onFocus}
+      >
         {allKeys.map((k, index) => {
           const onClick = this.buttonClick.bind(this, k);
 
@@ -227,11 +268,13 @@ export class KeyPad extends React.Component {
             className: classNames(
               classes.labelButton,
               !keysWithoutBaseSet && classes[k.category],
+              classes[k.extraClass],
               k.label === ',' && classes.comma,
               k.label === '.' && classes.dot
             ),
             disabled: this.keyIsNotAllowed(k),
-            key: `${k.label || k.latex || k.command}-${index}`
+            key: `${k.label || k.latex || k.command}-${index}`,
+            ...(k.actions || {})
           };
 
           if (k.latex) {
@@ -267,6 +310,9 @@ const styles = theme => ({
     gridColumnGap: '0px',
     gridAutoFlow: 'column'
   },
+  character: {
+    textTransform: 'initial !important'
+  },
   holder: {
     position: 'relative',
     width: '100%',

package/src/keys/grades.js

@@ -374,6 +374,6 @@ export const normalizeAdditionalKeys = additionalKeys => {
         latex === key.otherNotation
     );
 
-    return predefinedKey || additionalkey;
+    return !latex ? additionalkey : predefinedKey || additionalkey;
   });
 };