start datetimepicker

Author: VeraZab

package.json

@@ -7,6 +7,8 @@
     "url": "https://github.com/plotly/react-chart-editor/issues"
   },
   "dependencies": {
+    "@blueprintjs/core": "^3.10.0",
+    "@blueprintjs/datetime": "^3.5.0",
     "@plotly/draft-js-export-html": "1.2.0",
     "classnames": "^2.2.5",
     "draft-js": "^0.10.4",
@@ -52,6 +54,7 @@
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-react": "^7.4.0",
     "eslint-plugin-react-percy": "^0.2.1",
+    "file-loader": "^2.0.0",
     "fs": "^0.0.1-security",
     "gl": "^4.0.4",
     "glob": "^7.1.2",
@@ -125,4 +128,4 @@
     "watch": "babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-chart-editor.css",
     "watch-test": "jest --watch"
   }
-}
+}

src/components/fields/DateTimePicker.js

@@ -0,0 +1,30 @@
+import Field from './Field';
+import Picker from '../widgets/DateTimePicker';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {connectToContainer} from 'lib';
+
+export class UnconnectedDateTimePicker extends Component {
+  render() {
+    return (
+      <Field {...this.props}>
+        <Picker
+          value={this.props.fullValue}
+          placeholder={this.props.placeholder}
+          onUpdate={this.props.updatePlot}
+          onChange={this.props.onChange}
+        />
+      </Field>
+    );
+  }
+}
+
+UnconnectedDateTimePicker.propTypes = {
+  fullValue: PropTypes.string,
+  onChange: PropTypes.func,
+  onUpdate: PropTypes.func,
+  placeholder: PropTypes.string,
+  ...Field.propTypes,
+};
+
+export default connectToContainer(UnconnectedDateTimePicker);

src/components/fields/NumericOrDate.js

@@ -1,11 +1,11 @@
 import Field from './Field';
 import {UnconnectedNumeric} from './Numeric';
-import {UnconnectedText} from './Text';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectToContainer} from 'lib';
 import {isDateTime} from 'plotly.js/src/lib';
 import {isJSDate} from 'plotly.js/src/lib/dates';
+import {UnconnectedDateTimePicker} from './DateTimePicker';
 
 export class UnconnectedNumericOrDate extends Component {
   render() {
@@ -14,7 +14,7 @@ export class UnconnectedNumericOrDate extends Component {
       (isDateTime(this.props.fullValue) || isJSDate(this.props.fullValue));
 
     return fullValueIsDate ? (
-      <UnconnectedText {...this.props} placeholder={'yyyy-mm-dd 00:00:00.00'} />
+      <UnconnectedDateTimePicker {...this.props} placeholder={'yyyy-mm-dd 00:00:00.00'} />
     ) : (
       <UnconnectedNumeric {...this.props} />
     );

src/components/fields/index.js

@@ -32,6 +32,7 @@ import DropdownCustom from './DropdownCustom';
 import MultiColorPicker from './MultiColorPicker';
 import RectanglePositioner from './RectanglePositioner';
 import LocationSelector from './LocationSelector';
+import DateTimePicker from './DateTimePicker';
 import {
   AnnotationArrowRef,
   AnnotationRef,
@@ -122,4 +123,5 @@ export {
   HovermodeDropdown,
   BinSize,
   NumericOrDate,
+  DateTimePicker,
 };

src/components/widgets/DateTimePicker.js

@@ -0,0 +1,58 @@
+import React, {Component, Fragment} from 'react';
+import PropTypes from 'prop-types';
+import {DatePicker} from '@blueprintjs/datetime';
+import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
+import '@blueprintjs/core/lib/css/blueprint.css';
+import '@blueprintjs/icons/lib/css/blueprint-icons.css';
+import TextInput from './TextInput';
+
+export default class DateTimePicker extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: props.fullValue,
+      expanded: false,
+    };
+
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // Reset the value to the graph's actual value
+    if (nextProps.value !== this.state.value) {
+      this.setState({
+        value: nextProps.value,
+      });
+    }
+  }
+
+  onChange(e) {
+    const newValue = e.target.value;
+    this.setState({value: newValue});
+    this.props.onChange(newValue);
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <TextInput value={this.state.value} />
+        <span
+          style={{width: '10px', backgroundColor: 'blue', color: '#fff'}}
+          onClick={() => {
+            this.setState({expanded: !this.state.expanded});
+          }}
+        >
+          X
+        </span>
+        {this.state.expanded ? <DatePicker timePrecision={'millisecond'} /> : null}
+      </Fragment>
+    );
+  }
+}
+
+DateTimePicker.propTypes = {
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string.isRequired,
+};

src/components/widgets/EditableText.js

@@ -24,6 +24,9 @@ class EditableText extends Component {
   // Selects/highlights all of the text in the filename input
   handleFocus(event) {
     event.target.select();
+    if (this.props.onFocus) {
+      this.props.onFocus(event);
+    }
   }
 
   handleChange(event) {
@@ -35,11 +38,15 @@ class EditableText extends Component {
   }
 
   handleUpdate(event) {
-    const {onUpdate} = this.props;
+    const {onUpdate, onBlur} = this.props;
 
     if (onUpdate) {
       onUpdate(event.target.value);
     }
+
+    if (onBlur) {
+      onBlur(event);
+    }
   }
 
   handleKeyPress(event) {
@@ -111,6 +118,8 @@ EditableText.propTypes = {
   readOnly: PropTypes.bool,
   type: PropTypes.oneOf(['text', 'password']),
   size: PropTypes.number,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
 };
 
 EditableText.defaultProps = {

src/components/widgets/TextInput.js

@@ -29,6 +29,8 @@ export default class TextInput extends Component {
           this.setState({value});
         }}
         onUpdate={this.props.onUpdate}
+        onFocus={this.props.onFocus}
+        onBlur={this.props.onBlur}
       />
     );
   }
@@ -41,4 +43,6 @@ TextInput.propTypes = {
   onChange: PropTypes.func,
   placeholder: PropTypes.string,
   value: PropTypes.any,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
 };

src/components/widgets/index.js

@@ -1,5 +1,6 @@
 import Button from './Button';
 import RadioBlocks from './RadioBlocks';
+import DateTimePicker from './DateTimePicker';
 import TraceTypeSelector, {TraceTypeSelectorButton} from './TraceTypeSelector';
 
-export {Button, RadioBlocks, TraceTypeSelector, TraceTypeSelectorButton};
+export {Button, RadioBlocks, TraceTypeSelector, TraceTypeSelectorButton, DateTimePicker};

webpack.config.js

@@ -36,6 +36,14 @@ module.exports = {
         test: /\.(css|scss)?$/,
         use: ['style-loader', 'css-loader', 'sass-loader'],
       },
+      {
+        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [
+          {
+            loader: 'file-loader',
+          },
+        ],
+      },
     ],
   },