diff --git a/__tests__/AnnotationCreation.test.js b/__tests__/AnnotationCreation.test.js
index 5f79a82..698cc0c 100644
--- a/__tests__/AnnotationCreation.test.js
+++ b/__tests__/AnnotationCreation.test.js
@@ -1,5 +1,7 @@
import React from 'react';
import { shallow } from 'enzyme';
+import { I18nextProvider, initReactI18next } from 'react-i18next';
+import i18n from 'i18next';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
import AnnotationCreation from '../src/AnnotationCreation';
import AnnotationDrawing from '../src/AnnotationDrawing';
@@ -7,15 +9,19 @@ import TextEditor from '../src/TextEditor';
/** */
function createWrapper(props) {
+ const i18nconfig = i18n.createInstance();
+ i18nconfig.use(initReactI18next).init({ lng: 'en', resources: {} });
return shallow(
- ,
- );
+
+
+ ,
+ ).dive().dive().dive();
}
describe('AnnotationCreation', () => {
diff --git a/package.json b/package.json
index 6b8f48c..d29dfbc 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
"prop-types": "^15.7.2",
"react": "^17.0",
"react-dom": "^17.0",
+ "react-i18next": "^11.7.0",
"uuid": "^8.0.0"
},
"devDependencies": {
@@ -62,6 +63,7 @@
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.0.6",
+ "i18next": "^19.5.0",
"jest": "^26.1.0",
"jest-canvas-mock": "^2.2.0",
"jest-localstorage-mock": "^2.4.2",
@@ -70,6 +72,7 @@
"prop-types": "^15.7.2",
"react": "^17.0",
"react-dom": "^17.0",
+ "react-i18next": "^11.7.0",
"uuid": "^8.2.0"
},
"author": "",
diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js
index 54d09c6..1f03663 100644
--- a/src/AnnotationCreation.js
+++ b/src/AnnotationCreation.js
@@ -1,5 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
+import compose from 'lodash/flowRight';
+import { withTranslation } from 'react-i18next';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
@@ -22,6 +24,7 @@ import Divider from '@material-ui/core/Divider';
import MenuItem from '@material-ui/core/MenuItem';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import MenuList from '@material-ui/core/MenuList';
+import Select from '@material-ui/core/Select';
import { SketchPicker } from 'react-color';
import { v4 as uuid } from 'uuid';
import { withStyles } from '@material-ui/core/styles';
@@ -63,19 +66,28 @@ class AnnotationCreation extends Component {
annoState.svg = props.annotation.target.selector.value;
}
}
+
+ annoState.motivation = props.annotation.motivation;
}
- this.state = {
+
+ const toolState = {
activeTool: 'cursor',
- annoBody: '',
closedMode: 'closed',
- colorPopoverOpen: false,
currentColorType: false,
fillColor: null,
+ motivation: (props.config.annotation.motivations && props.config.annotation.motivations[0]),
+ strokeColor: '#00BFFF',
+ strokeWidth: 3,
+ ...(props.config.annotation.defaults || {}),
+ };
+
+ this.state = {
+ ...toolState,
+ annoBody: '',
+ colorPopoverOpen: false,
lineWeightPopoverOpen: false,
popoverAnchorEl: null,
popoverLineWeightAnchorEl: null,
- strokeColor: '#00BFFF',
- strokeWidth: 1,
svg: null,
xywh: null,
...annoState,
@@ -92,6 +104,7 @@ class AnnotationCreation extends Component {
this.handleCloseLineWeight = this.handleCloseLineWeight.bind(this);
this.closeChooseColor = this.closeChooseColor.bind(this);
this.updateStrokeColor = this.updateStrokeColor.bind(this);
+ this.changeMotivation = this.changeMotivation.bind(this);
}
/** */
@@ -152,7 +165,7 @@ class AnnotationCreation extends Component {
annotation, canvases, closeCompanionWindow, receiveAnnotation, config,
} = this.props;
const {
- annoBody, tags, xywh, svg,
+ annoBody, tags, motivation, xywh, svg,
} = this.state;
canvases.forEach((canvas) => {
const storageAdapter = config.annotation.adapter(canvas.id);
@@ -161,6 +174,7 @@ class AnnotationCreation extends Component {
canvasId: canvas.id,
id: (annotation && annotation.id) || `${uuid()}`,
manifestId: canvas.options.resource.id,
+ motivation,
svg,
tags,
xywh,
@@ -188,6 +202,13 @@ class AnnotationCreation extends Component {
});
}
+ /** */
+ changeMotivation(e) {
+ this.setState({
+ motivation: e.target.value,
+ });
+ }
+
/** */
changeClosedMode(e) {
this.setState({
@@ -210,12 +231,13 @@ class AnnotationCreation extends Component {
/** */
render() {
const {
- annotation, classes, closeCompanionWindow, id, windowId,
+ annotation, classes, closeCompanionWindow, config, id, t, windowId,
} = this.props;
const {
activeTool, colorPopoverOpen, currentColorType, fillColor, popoverAnchorEl, strokeColor,
popoverLineWeightAnchorEl, lineWeightPopoverOpen, strokeWidth, closedMode, annoBody, svg,
+ motivation,
} = this.state;
return (