@pie-element/drawing-response 6.4.1-next.47 → 6.4.1-next.62

package/src/drawing-response/__tests__/__snapshots__/container.test.jsx.snap

@@ -7,47 +7,47 @@ exports[`Container snapshot renders 1`] = `
     fillList={
       Array [
         Object {
-          "label": "no fill",
+          "label": "No fill",
           "value": "transparent",
         },
         Object {
-          "label": "light blue",
+          "label": "Light blue",
           "value": "lightblue",
         },
         Object {
-          "label": "light yellow",
+          "label": "Light yellow",
           "value": "lightyellow",
         },
         Object {
-          "label": "red",
+          "label": "Red",
           "value": "red",
         },
         Object {
-          "label": "orange",
+          "label": "Orange",
           "value": "orange",
         },
         Object {
-          "label": "yellow",
+          "label": "Yellow",
           "value": "yellow",
         },
         Object {
-          "label": "violet",
+          "label": "Violet",
           "value": "violet",
         },
         Object {
-          "label": "blue",
+          "label": "Blue",
           "value": "blue",
         },
         Object {
-          "label": "green",
+          "label": "Green",
           "value": "green",
         },
         Object {
-          "label": "white",
+          "label": "White",
           "value": "white",
         },
         Object {
-          "label": "black",
+          "label": "Black",
           "value": "black",
         },
       ]
@@ -59,72 +59,72 @@ exports[`Container snapshot renders 1`] = `
     outlineList={
       Array [
         Object {
-          "label": "red",
+          "label": "Red",
           "value": "red",
         },
         Object {
-          "label": "orange",
+          "label": "Orange",
           "value": "orange",
         },
         Object {
-          "label": "yellow",
+          "label": "Yellow",
           "value": "yellow",
         },
         Object {
-          "label": "violet",
+          "label": "Violet",
           "value": "violet",
         },
         Object {
-          "label": "blue",
+          "label": "Blue",
           "value": "blue",
         },
         Object {
-          "label": "green",
+          "label": "Green",
           "value": "green",
         },
         Object {
-          "label": "white",
+          "label": "White",
           "value": "white",
         },
         Object {
-          "label": "black",
+          "label": "Black",
           "value": "black",
         },
       ]
     }
-    paintColor="red"
+    paintColor="Red"
     paintList={
       Array [
         Object {
-          "label": "red",
+          "label": "Red",
           "value": "red",
         },
         Object {
-          "label": "orange",
+          "label": "Orange",
           "value": "orange",
         },
         Object {
-          "label": "yellow",
+          "label": "Yellow",
           "value": "yellow",
         },
         Object {
-          "label": "violet",
+          "label": "Violet",
           "value": "violet",
         },
         Object {
-          "label": "blue",
+          "label": "Blue",
           "value": "blue",
         },
         Object {
-          "label": "green",
+          "label": "Green",
           "value": "green",
         },
         Object {
-          "label": "white",
+          "label": "White",
           "value": "white",
         },
         Object {
-          "label": "black",
+          "label": "Black",
           "value": "black",
         },
       ]
@@ -244,7 +244,7 @@ exports[`Container snapshot renders 1`] = `
         imageUrl="url"
         onSessionChange={[MockFunction]}
         outlineColor="black"
-        paintColor="red"
+        paintColor="Red"
         scale={1}
         session={Object {}}
         toolActive={
@@ -377,7 +377,7 @@ exports[`Container snapshot renders disabled 1`] = `
         imageUrl="url"
         onSessionChange={[MockFunction]}
         outlineColor="black"
-        paintColor="red"
+        paintColor="Red"
         scale={1}
         session={Object {}}
         toolActive={

package/src/drawing-response/container.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
+import Translator from '@pie-lib/translator';
 
 import constants from './constants';
 import Button from './button';
@@ -10,6 +11,7 @@ import DrawableText from './drawable-text';
 import Icon from './icon';
 
 const { tools: TOOLS } = constants;
+const { translator } = Translator;
 
 const ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map((c) => ({
   value: c,
@@ -25,6 +27,7 @@ export class Container extends Component {
     imageDimensions: PropTypes.object.isRequired,
     imageUrl: PropTypes.string.isRequired,
     backgroundImageEnabled: PropTypes.bool.isRequired,
+    language: PropTypes.string,
   };
 
   constructor(props) {
@@ -53,6 +56,30 @@ export class Container extends Component {
     };
   }
 
+  setTranslatedState(language) {
+    const translatedROGVAIV = ROGVAIV.map((c) => ({
+      value: c.value,
+      label: translator.t(`drawingResponse.${c.label}`, { lng: language }),
+    }));
+
+    this.setState({
+      fillColorList: [
+        { value: 'transparent', label: translator.t('drawingResponse.noFill', { lng: language }), },
+        { value: 'lightblue', label: translator.t('drawingResponse.lightblue', { lng: language }), },
+        { value: 'lightyellow', label: translator.t('drawingResponse.lightyellow', { lng: language }), },
+        ...translatedROGVAIV,
+      ],
+      paintColor: translator.t('drawingResponse.red', { lng: language }),
+      outlineColorList: translatedROGVAIV,
+      paintColorList: translatedROGVAIV,
+    });
+  }
+
+  UNSAFE_componentWillReceiveProps(props) {
+    const { language } = props;
+    this.setTranslatedState(language);
+  }
+
   setDimensions() {
     const checkExist = setInterval(() => {
       try {
@@ -75,6 +102,9 @@ export class Container extends Component {
   }
 
   componentDidMount() {
+    const { language } = this.props;
+    this.setTranslatedState(language);
+
     this.setDimensions();
 
     this.observer = new MutationObserver((mutations) => {
@@ -114,13 +144,14 @@ export class Container extends Component {
   handleMakeToolActive(tool) {
     const { TextEntry } = this.state;
     const { type } = tool;
+    const { language } = this.props;
 
     if (type !== 'Text') {
       this.setState({
         toolActive: tool,
       });
     } else {
-      TextEntry.addNewTextEntry();
+      TextEntry.addNewTextEntry(language);
       // Force update
       this.setState({
         updatedAt: new Date(),
@@ -147,7 +178,7 @@ export class Container extends Component {
   }
 
   render() {
-    const { classes, disabled, imageUrl, imageDimensions, onSessionChange, session, backgroundImageEnabled } =
+    const { classes, disabled, imageUrl, imageDimensions, onSessionChange, session, backgroundImageEnabled, language } =
       this.props;
     const {
       drawableDimensions,
@@ -176,6 +207,7 @@ export class Container extends Component {
             onFillColorChange={(color) => this.handleColorChange('fill', color)}
             onOutlineColorChange={(color) => this.handleColorChange('outline', color)}
             onPaintColorChange={(color) => this.handleColorChange('paint', color)}
+            language={language}
           />
         )}
 
@@ -190,7 +222,7 @@ export class Container extends Component {
                   key={type}
                   disabled={this.checkIfToolIsDisabled(type)}
                   onClick={() => this.handleMakeToolActive(tool)}
-                  label={<Icon path={icon} />}
+                  label={<Icon path={icon}/>}
                 />
               );
             })}
@@ -217,6 +249,7 @@ export class Container extends Component {
               toolActive={toolActive}
               TextEntry={TextEntry}
               backgroundImageEnabled={backgroundImageEnabled}
+              language={language}
             />
           </div>
         </div>

package/src/drawing-response/drawable-main.jsx

@@ -6,7 +6,9 @@ import isEqual from 'lodash/isEqual';
 import classnames from 'classnames';
 import { Layer, Stage } from 'react-konva';
 import { withStyles } from '@material-ui/core/styles';
+import Translator from '@pie-lib/translator';
 
+const { translator } = Translator;
 import ImageBackground from './drawable-image';
 import Button from './button';
 import factory from './factory';
@@ -185,6 +187,7 @@ export class DrawableMain extends React.Component {
       backgroundImageEnabled = true,
       toolActive: { type },
       scale,
+      language
     } = this.props;
     const { isOver, newDrawable } = this.state;
 
@@ -205,7 +208,7 @@ export class DrawableMain extends React.Component {
       stage: this.stage,
       onMouseOverElement: this.onMouseOverElement,
       onMouseOutElement: this.onMouseOutElement,
-      scale,
+      scale
     };
 
     let listeners = {};
@@ -230,8 +233,8 @@ export class DrawableMain extends React.Component {
     return (
       <div className={classes.wrapper}>
         <div className={classes.undoControls}>
-          <Button disabled={disabled} onClick={this.handleUndo} label="Undo" />
-          <Button disabled={disabled} onClick={this.handleClearAll} label="Clear all" />
+          <Button disabled={disabled} onClick={this.handleUndo} label={translator.t('common:undo', { lng: language })} />
+          <Button disabled={disabled} onClick={this.handleClearAll} label={translator.t('common:clearAll', { lng: language })} />
         </div>
         <div className={classes.base}>
           {backgroundImageEnabled && imageUrl && (
@@ -290,7 +293,7 @@ const styles = () => ({
   },
   undoControls: {
     marginTop: -43,
-    width: 172,
+    marginRight: 10,
   },
 });
 
@@ -309,6 +312,7 @@ DrawableMain.propTypes = {
   session: PropTypes.object.isRequired,
   backgroundImageEnabled: PropTypes.bool.isRequired,
   scale: PropTypes.number.isRequired,
+  language: PropTypes.string,
 };
 
 export default withStyles(styles)(DrawableMain);

package/src/drawing-response/drawable-palette.jsx

@@ -5,6 +5,9 @@ import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import { withStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
+import Translator from '@pie-lib/translator';
+
+const { translator } = Translator;
 
 // TODO: Change Palette so will render inputs and colors dynamically
 class Palette extends React.Component {
@@ -22,11 +25,11 @@ class Palette extends React.Component {
   };
 
   render() {
-    const { classes, fillColor, outlineColor, fillList, outlineList } = this.props;
+    const { classes, fillColor, outlineColor, fillList, outlineList, language } = this.props;
 
     return (
       <div className={classes.base}>
-        <InputContainer label="Fill Color" className={classes.input}>
+        <InputContainer label={translator.t('drawingResponse.fillColor', { lng: language })} className={classes.input}>
           <Select className={classes.select} onChange={this.onChange('fill')} value={fillColor}>
             {fillList.map(({ value, label }) => (
               <MenuItem
@@ -43,7 +46,7 @@ class Palette extends React.Component {
           </Select>
         </InputContainer>
 
-        <InputContainer label="Outline Color" className={classes.input}>
+        <InputContainer label={translator.t('drawingResponse.outlineColor', { lng: language })} className={classes.input}>
           <Select className={classes.select} onChange={this.onChange('outline')} value={outlineColor}>
             {outlineList.map(({ value, label }) => (
               <MenuItem key={value} value={value} className={classes.item} style={{ border: `2px solid ${value}` }}>
@@ -93,6 +96,7 @@ Palette.propTypes = {
   onPaintColorChange: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
   outlineList: PropTypes.array.isRequired,
+  language: PropTypes.string,
 };
 
 export default withStyles(styles)(Palette);

package/src/drawing-response/drawable-text.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Text } from 'react-konva';
+import Translator from '@pie-lib/translator';
 
+const { translator } = Translator;
 import Transformer from './drawable-transformer';
 
 export const generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
@@ -30,14 +32,14 @@ export default class TextDrawable {
     this.props.forceUpdate();
   };
 
-  addNewTextEntry = () => {
+  addNewTextEntry = (language) => {
     const all = this.all;
     const id = generateId();
 
     all.push({
       id: id,
       isDefault: true,
-      label: 'Double click to edit this text. Press Enter to submit.',
+      label: translator.t('drawingResponse.onDoubleClick', { lng: language }),
       width: 200,
       x: (all.length + 1) * 5 + 50,
       y: (all.length + 1) * 5 + 50,

package/src/drawing-response/index.jsx

@@ -20,7 +20,16 @@ class DrawingResponseComponent extends React.Component {
 
   render() {
     const {
-      model: { disabled, imageDimensions, imageUrl, prompt, mode, teacherInstructions, backgroundImageEnabled = true },
+      model: {
+        disabled,
+        imageDimensions,
+        imageUrl,
+        prompt,
+        mode,
+        teacherInstructions,
+        backgroundImageEnabled,
+        language
+      },
       session,
       onSessionChange,
       classes,
@@ -54,6 +63,7 @@ class DrawingResponseComponent extends React.Component {
           imageUrl={imageUrl}
           backgroundImageEnabled={backgroundImageEnabled}
           disabled={disabled}
+          language={language}
         />
       </div>
     );