[Feature #332] Changed mask behavior - use standard symbols for date/…

…time masks (YMDhms). Display the mask as input placeholder.

src/components/MaskedInput.js

@@ -6,6 +6,7 @@ import InputMask from "inputmask-core";
 import {getSelection, setSelection} from "react/lib/ReactInputSelection";
 import assign from "object-assign";
 import Configuration from "../model/Configuration";
+import MaskMapper from "../util/MaskMapper";
 
 const KEYCODE_Z = 90;
 const KEYCODE_Y = 89;
@@ -35,7 +36,7 @@ export default class MaskedInput extends React.Component {
 
     componentWillMount() {
         const options = {
-            pattern: this.props.mask,
+            pattern: MaskMapper.mapMask(this.props.mask),
             value: this.props.value,
             formatCharacters: this.props.formatCharacters
         };
@@ -52,14 +53,14 @@ export default class MaskedInput extends React.Component {
             // - if so use the nextProps value
             // - otherwise the `this.mask` has a value for us (most likely from paste action)
             if (this.mask.getValue() === this.mask.emptyValue) {
-                this.mask.setPattern(nextProps.mask, {value: nextProps.value})
+                this.mask.setPattern(MaskMapper.mapMask(nextProps.mask), {value: nextProps.value})
             }
             else {
-                this.mask.setPattern(nextProps.mask, {value: this.mask.getRawValue()})
+                this.mask.setPattern(MaskMapper.mapMask(nextProps.mask), {value: this.mask.getRawValue()})
             }
         }
         else if (this.props.mask !== nextProps.mask) {
-            this.mask.setPattern(nextProps.mask, {value: this.mask.getRawValue()})
+            this.mask.setPattern(MaskMapper.mapMask(nextProps.mask), {value: this.mask.getRawValue()})
         }
         else if (this.props.value !== nextProps.value) {
             this.mask.setValue(nextProps.value)
@@ -79,7 +80,7 @@ export default class MaskedInput extends React.Component {
     }
 
     _updatePattern(props) {
-        this.mask.setPattern(props.mask, {
+        this.mask.setPattern(MaskMapper.mapMask(props.mask), {
             value: this.mask.getRawValue(),
             selection: getSelection(this.input)
         });

src/components/answer/MaskedInputAnswer.js

@@ -10,15 +10,15 @@ import Logger from '../../util/Logger';
 import MaskedInput from '../MaskedInput';
 
 const MaskedInputAnswer = (props) => {
-    var question = props.question,
+    const question = props.question,
         value = props.value,
         mask = JsonLdUtils.getJsonAttValue(question, Constants.INPUT_MASK);
 
     if (!mask) {
         Logger.warn('Input mask not provided. Falling back to regular input.');
         return <InputAnswer {...props}/>;
     }
-    return <MaskedInput mask={mask} value={value} label={props.label} title={props.title} placeholder={props.label}
+    return <MaskedInput mask={mask} value={value} label={props.label} title={props.title} placeholder={mask}
                         onChange={(e) => props.onChange(e.target.value)} disabled={FormUtils.isDisabled(question)}/>;
 };
 

src/util/MaskMapper.js

@@ -0,0 +1,35 @@
+'use strict';
+
+const REPLACEMENTS = {
+    'D': '1',
+    'M': '1',
+    'Y': '1',
+    'h': '1',
+    'm': '1',
+    's': '1'
+};
+
+module.exports = {
+
+    /**
+     * Attempts to map regular mask (e.g. date) to the format supported by inputmask-core.
+     *
+     * E.g. it maps (DD-MM-YYYY) to 11-11-1111.
+     *
+     * If an unsupported mask character is encountered, it is simply skipped. Datetime masks are processed according to
+     * ISO 8601 acronyms (e.g. M for month and m for minute).
+     * @param mask The mask to map
+     */
+    mapMask(mask) {
+        if (!mask) {
+            return mask;
+        }
+        let result = '',
+            character;
+        for (let i = 0, len = mask.length; i < len; i++) {
+            character = mask.charAt(i);
+            result += REPLACEMENTS[character] ? REPLACEMENTS[character] : character;
+        }
+        return result;
+    }
+};

test/__tests__/MaskMapperTest.js

@@ -0,0 +1,31 @@
+'use strict';
+
+import MaskMapper from "../../src/util/MaskMapper";
+
+describe('MaskMapper', () => {
+
+    it('maps date/time/datetime masks to numeric input mask', () => {
+        const data = [{
+            mask: 'DD-MM-YYYY',
+            expected: '11-11-1111'
+        }, {
+            mask: 'hh:mm:ss',
+            expected: '11:11:11'
+        }, {
+            mask: 'DD/MM/YYYY hh:mm:ss',
+            expected: '11/11/1111 11:11:11'
+        }];
+
+        data.forEach(d => {
+            expect(MaskMapper.mapMask(d.mask)).toEqual(d.expected);
+        });
+    });
+
+    it('returns null form null value passed in', () => {
+        expect(MaskMapper.mapMask(null)).toBeNull();
+    });
+
+    it('returns undefined for undefined passed in', () => {
+        expect(MaskMapper.mapMask(undefined)).not.toBeDefined();
+    });
+});