@pie-element/hotspot 4.10.13 → 4.10.16-next.1

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-configure",
   "private": true,
-  "version": "4.6.12",
+  "version": "4.6.8",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -10,8 +10,8 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@pie-framework/pie-configure-events": "^1.2.0",
-    "@pie-lib/config-ui": "^10.10.22",
-    "@pie-lib/editable-html": "^7.19.1",
+    "@pie-lib/config-ui": "^10.10.24",
+    "@pie-lib/editable-html": "^7.19.3",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "konva": "^3.2.4",

package/configure/src/__tests__/__snapshots__/root.test.js.snap

@@ -28,6 +28,11 @@ exports[`Root render renders 1`] = `
               "label": "Rationale",
               "settings": true,
             },
+            "spellCheck": Object {
+              "enabled": true,
+              "label": "Spellcheck",
+              "settings": false,
+            },
             "teacherInstructions": Object {
               "label": "Teacher Instructions",
               "settings": true,
@@ -38,6 +43,7 @@ exports[`Root render renders 1`] = `
           Object {
             "Properties": Object {
               "rationaleEnabled": undefined,
+              "spellCheckEnabled": false,
               "teacherInstructionsEnabled": undefined,
             },
             "Settings": Object {

package/configure/src/defaults.js

@@ -44,6 +44,11 @@ export default {
       settings: true,
       label: 'Prompt'
     },
+    spellCheck: {
+      label: 'Spellcheck',
+      settings:false,
+      enabled:true
+    },
     teacherInstructions: {
       settings: true,
       label: 'Teacher Instructions'

package/configure/src/root.jsx

@@ -9,6 +9,8 @@ import PropTypes from 'prop-types';
 import EditableHtml from '@pie-lib/editable-html';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
+import Info from '@material-ui/icons/Info';
+import Tooltip from '@material-ui/core/Tooltip';
 
 import HotspotPalette from './hotspot-palette';
 import HotspotContainer from './hotspot-container';
@@ -72,10 +74,20 @@ export class Root extends React.Component {
       prompt = {},
       teacherInstructions = {},
       rationale = {},
-      preserveAspectRatio = {}
+      spellCheck = {},
+      preserveAspectRatio = {},
+      maxSelections,
+      minShapes,
+      maxShapes
     } = configuration || {};
-    const { teacherInstructionsEnabled, promptEnabled, rationaleEnabled } = model || {};
+    const { teacherInstructionsEnabled, promptEnabled, rationaleEnabled, spellCheckEnabled, errors } = model || {};
     const toolbarOpts = {};
+    const configSettings = maxSelections || minShapes || maxShapes;
+    const maxSelectionsValidation = maxSelections ? `\nNo more than ${maxSelections} shapes should be selected.` : '';
+    const minShapesValidation = minShapes ? `\nThere should be at least ${minShapes} shapes defined.` : '';
+    const maxShapesValidation = maxShapes ? `\nNo more than ${maxShapes} shapes should be defined.` : '';
+
+    const { shapesError, selectionsError } = errors || {};
 
     switch (model.toolbarEditorPosition) {
       case 'top':
@@ -107,7 +119,9 @@ export class Root extends React.Component {
                 Properties: {
                   teacherInstructionsEnabled:
                     teacherInstructions.settings && toggle(teacherInstructions.label),
-                  rationaleEnabled: rationale.settings && toggle(rationale.label)
+                  rationaleEnabled: rationale.settings && toggle(rationale.label),
+                  spellCheckEnabled:
+                    spellCheck.settings && toggle(spellCheck.label),
                 }
               }}
             />
@@ -122,6 +136,7 @@ export class Root extends React.Component {
                   imageSupport={imageSupport}
                   nonEmpty={false}
                   toolbarOpts={toolbarOpts}
+                  spellCheck={spellCheckEnabled}
                 />
               </InputContainer>
             )}
@@ -133,6 +148,7 @@ export class Root extends React.Component {
                   imageSupport={imageSupport}
                   nonEmpty={false}
                   toolbarOpts={toolbarOpts}
+                  spellCheck={spellCheckEnabled}
                 />
               </InputContainer>
             )}
@@ -147,6 +163,7 @@ export class Root extends React.Component {
                   onChange={onRationaleChanged}
                   imageSupport={imageSupport}
                   toolbarOpts={toolbarOpts}
+                  spellCheck={spellCheckEnabled}
                 />
               </InputContainer>
             )}
@@ -155,6 +172,19 @@ export class Root extends React.Component {
               Define Hotspot
             </Typography>
 
+            {configSettings && <Tooltip
+              classes={{tooltip: classes.tooltip}}
+              disableFocusListener
+              disableTouchListener
+              placement={'left'}
+              title={`Validation requirements:${maxSelectionsValidation}${minShapesValidation}${maxShapesValidation}`}
+            >
+              <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }}/>
+            </Tooltip>}
+
+            {shapesError && <div className={classes.errorText}>{shapesError}</div>}
+            {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}
+
             <HotspotPalette
               hotspotColor={model.hotspotColor}
               hotspotList={model.hotspotList}
@@ -245,6 +275,16 @@ const styles = theme => ({
   switchElement: {
     justifyContent: 'space-between',
     margin: 0
+  },
+  tooltip: {
+    fontSize: '12px',
+    whiteSpace: 'pre',
+    maxWidth: '500px',
+  },
+  errorText: {
+    fontSize: '12px',
+    color: 'red',
+    padding: '5px 0'
   }
 });