Create NumericOrDate

Author: VeraZab

src/components/fields/NumericOrDate.js

@@ -0,0 +1,38 @@
+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';
+
+export class UnconnectedNumericOrDate extends Component {
+  render() {
+    const fullValueIsDate =
+      typeof this.props.fullValue === 'string' &&
+      (isDateTime(this.props.fullValue) || isJSDate(this.props.fullValue));
+
+    return fullValueIsDate ? (
+      <UnconnectedText {...this.props} placeholder={'yyyy-mm-dd 00:00:00.00'} />
+    ) : (
+      <UnconnectedNumeric {...this.props} />
+    );
+  }
+}
+
+UnconnectedNumericOrDate.propTypes = {
+  defaultValue: PropTypes.any,
+  fullValue: PropTypes.any,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  multiValued: PropTypes.bool,
+  hideArrows: PropTypes.bool,
+  showSlider: PropTypes.bool,
+  step: PropTypes.number,
+  fullContainer: PropTypes.object,
+  updatePlot: PropTypes.func,
+  ...Field.propTypes,
+};
+
+export default connectToContainer(UnconnectedNumericOrDate);

src/components/fields/derived.js

@@ -3,6 +3,7 @@ import {UnconnectedDropdown} from './Dropdown';
 import {UnconnectedDropdownCustom} from './DropdownCustom';
 import {UnconnectedFlaglist} from './Flaglist';
 import {UnconnectedNumeric} from './Numeric';
+import {UnconnectedNumericOrDate} from './NumericOrDate';
 import {UnconnectedAxisRangeValue} from './AxisRangeValue';
 import {UnconnectedRadio} from './Radio';
 import Info from './Info';
@@ -196,6 +197,8 @@ export const AxesRange = connectToContainer(UnconnectedAxisRangeValue, {
   },
 });
 
+export const NumericOrDate = connectToContainer(UnconnectedNumericOrDate);
+
 export const NTicks = connectToContainer(UnconnectedNumeric, {
   modifyPlotProps: (props, context, plotProps) => {
     const {fullContainer} = plotProps;

src/components/fields/index.js

@@ -55,6 +55,7 @@ import {
   HoveronDropdown,
   HovermodeDropdown,
   TickFormat,
+  NumericOrDate,
 } from './derived';
 import {LineDashSelector, LineShapeSelector} from './LineSelectors';
 
@@ -118,4 +119,5 @@ export {
   LocationSelector,
   HoveronDropdown,
   HovermodeDropdown,
+  NumericOrDate,
 };

src/components/index.js

@@ -57,6 +57,7 @@ import {
   HoveronDropdown,
   HovermodeDropdown,
   TickFormat,
+  NumericOrDate,
 } from './fields';
 
 import {
@@ -175,4 +176,5 @@ export {
   LocationSelector,
   HoveronDropdown,
   HovermodeDropdown,
+  NumericOrDate,
 };