Merge pull request mac-s-g#56 from mac-s-g/support-dates

added support for dates

Author: mac-s-g

example/example.html

@@ -75,6 +75,7 @@
           integer: 42,
           float: -2.757,
           array: [1, 2, 3, 'test'],
+          date: new Date(),
           object: {
               sibling1: true,
               sibling2: false,

example/example.js

@@ -75,7 +75,8 @@ function getExampleJson1() {
             sibling2: false,
             sibling3: null,
         },
-        string_number: "1234"
+        string_number: "1234",
+        date: new Date()
     };
 }
 
@@ -132,6 +133,7 @@ function getExampleJson3() {
 function getExampleArray() {
     return [
         'you can also display arrays!',
+        new Date(),
         1,
         2,
         3,

src/html/test-dist.html.template

@@ -61,6 +61,7 @@
           another_sibling: 42,
           how_will_array_do: [1, 2, 3, 'test'],
           how_will_floats_do: -2.757,
+          date: new Date(),
           parent: {
               sibling1: true,
               sibling2: false,

src/js/components/DataTypes/DataTypes.js

@@ -1,4 +1,5 @@
 export {default as JsonBoolean} from './Boolean';
+export {default as JsonDate} from './Date';
 export {default as JsonFloat} from './Float';
 export {default as JsonFunction} from './Function';
 export {default as JsonNan} from './Nan';

src/js/components/DataTypes/Date.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import DataTypeLabel from './DataTypeLabel';
+
+//theme
+import Theme from './../../themes/getStyle';
+
+export default class extends React.Component {
+
+    render() {
+        const type_name = 'date';
+        const {props} = this;
+        const {value} = props.variable;
+        const display_options = {
+            weekday: "short",
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+            hour: "2-digit",
+            minute: "2-digit"
+        };
+        return (
+        <div {...Theme(props.theme, 'date')}>
+            <DataTypeLabel type_name={type_name} {...props} />
+            <span class="date-value" {...Theme(props.theme, 'date-value')}>
+            {value.toLocaleTimeString(
+                'en-us', display_options
+            )}
+            </span>
+        </div>
+        );
+    }
+
+}

src/js/components/VariableEditor.js

@@ -5,7 +5,7 @@ import dispatcher from './../helpers/dispatcher';
 
 //data type components
 import {
-    JsonBoolean, JsonFloat, JsonFunction, JsonInteger,
+    JsonBoolean, JsonDate, JsonFloat, JsonFunction, JsonInteger,
     JsonNan, JsonNull, JsonObject, JsonString, JsonUndefined
 } from './DataTypes/DataTypes';
 
@@ -133,8 +133,10 @@ class VariableEditor extends React.Component {
                 return <JsonNan {...props} />;
             case 'undefined':
                 return <JsonUndefined {...props} />;
+            case 'date':
+                return <JsonDate {...props} />;
             default:
-                //catch-all for types that weren't anticipated
+                // catch-all for types that weren't anticipated
                 return <div class="object-value" {...props} >
                     {variable.value}
                 </div>;

src/js/themes/getStyle.js

@@ -22,6 +22,7 @@ const colorMap = theme => ({
     },
     dataTypes: {
         boolean: theme.base0E,
+        date: theme.base0D,
         float: theme.base0B,
         function: theme.base0D,
         integer: theme.base0F,
@@ -132,6 +133,13 @@ const getDefaultThemeStyling = theme => {
             display: 'inline-block',
             color: colors.dataTypes.boolean
         },
+        'date': {
+            display: 'inline-block',
+            color: colors.dataTypes.date
+        },
+        'date-value': {
+            marginLeft: styleConstants.dateValueMarginLeft
+        },
         'float': {
             display: 'inline-block',
             color: colors.dataTypes.float

src/js/themes/styleConstants.js

@@ -80,6 +80,8 @@ export default {
 
   iconCursor: 'pointer',
   iconFontSize: '15px',
-  iconPaddingRight: '1px'
+  iconPaddingRight: '1px',
+
+  dateValueMarginLeft: '2px'
 };
 

test/tests/js/components/DataTypes/Date-test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import {expect} from 'chai';
+
+import JsonDate from '/react/src/js/components/DataTypes/Date';
+import DataTypeLabel from '/react/src/js/components/DataTypes/DataTypeLabel';
+
+describe('<JsonDate />', function () {
+    const rjvId = 1;
+
+    it('integer component should have a data type label', function () {
+        const wrapper = shallow(
+            <JsonDate
+            variable={{value: new Date()}}
+            displayDataTypes={true}
+            rjvId={rjvId}
+            theme='rjv-default'/>
+        );
+        expect(wrapper.find(DataTypeLabel)).to.have.length(1);
+    });
+
+});