Merge pull request #2 from opsramp/data-color-fix

update to fix data-color warning
opsramp · Feb 22, 2021 · ab6698e · ab6698e
2 parents 2ce33c4 + d0333cb
commit ab6698e
Show file tree

Hide file tree

Showing 3 changed files with 304 additions and 205 deletions.
diff --git a/package.json b/package.json
@@ -34,49 +34,49 @@
     "url": "http://github.com/opsramp/react-date-range/issues"
   },
   "dependencies": {
-    "classnames": "^2.2.1",
+    "classnames": "2.2.1",
     "date-fns": "2.0.0-alpha.7",
-    "postcss": "^7.0.27",
-    "postcss-cli": "^7.1.0",
-    "prop-types": "^15.5.10",
-    "react-list": "^0.8.8"
+    "postcss": "7.0.27",
+    "postcss-cli": "7.1.0",
+    "prop-types": "15.5.10",
+    "react-list": "0.8.8"
   },
   "peerDependencies": {
     "react": "16.13.0"
   },
   "devDependencies": {
-    "autoprefixer": "^7.2.4",
-    "babel-cli": "^6.26.0",
-    "babel-eslint": "^8.1.2",
-    "babel-jest": "^22.1.0",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-date-fns": "^0.1.0",
-    "babel-plugin-transform-export-extensions": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "css-loader": "^0.28.8",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^4.15.0",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-prettier": "^2.4.0",
-    "eslint-plugin-react": "^7.5.1",
-    "html-webpack-plugin": "^2.30.1",
-    "jest": "^22.1.4",
-    "normalize.css": "^7.0.0",
-    "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
-    "precss": "^2.0.0",
-    "prettier": "^1.9.2",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-hot-loader": "^3.1.3",
-    "style-loader": "^0.19.1",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.9.7",
-    "webpack-hot-middleware": "^2.21.0"
+    "autoprefixer": "7.2.4",
+    "babel-cli": "6.26.0",
+    "babel-eslint": "8.1.2",
+    "babel-jest": "22.1.0",
+    "babel-loader": "7.1.2",
+    "babel-plugin-date-fns": "0.1.0",
+    "babel-plugin-transform-export-extensions": "6.22.0",
+    "babel-plugin-transform-object-rest-spread": "6.26.0",
+    "babel-preset-env": "1.6.1",
+    "babel-preset-react": "6.24.1",
+    "css-loader": "0.28.8",
+    "enzyme": "3.3.0",
+    "enzyme-adapter-react-16": "1.1.1",
+    "eslint": "4.15.0",
+    "eslint-config-prettier": "2.9.0",
+    "eslint-plugin-import": "2.8.0",
+    "eslint-plugin-jsx-a11y": "6.0.3",
+    "eslint-plugin-prettier": "2.4.0",
+    "eslint-plugin-react": "7.5.1",
+    "html-webpack-plugin": "2.30.1",
+    "jest": "22.1.4",
+    "normalize.css": "7.0.0",
+    "postcss-import": "12.0.1",
+    "postcss-loader": "3.0.0",
+    "precss": "2.0.0",
+    "prettier": "2.0.5",
+    "react": "16.13.0",
+    "react-dom": "16.13.0",
+    "react-hot-loader": "3.1.3",
+    "style-loader": "0.19.1",
+    "webpack": "3.10.0",
+    "webpack-dev-server": "2.9.7",
+    "webpack-hot-middleware": "2.21.0"
   }
 }
diff --git a/src/components/DayCell.js b/src/components/DayCell.js
@@ -1,8 +1,15 @@
 /* eslint-disable no-fallthrough */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { startOfDay, format, isSameDay, isAfter, isBefore, endOfDay } from 'date-fns';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import classnames from "classnames";
+import {
+  startOfDay,
+  format,
+  isSameDay,
+  isAfter,
+  isBefore,
+  endOfDay,
+} from "date-fns";
 
 class DayCell extends Component {
   constructor(props, context) {
@@ -15,7 +22,9 @@ class DayCell extends Component {
     this.getClassNames = this.getClassNames.bind(this);
     this.handleMouseEvent = this.handleMouseEvent.bind(this);
     this.handleKeyEvent = this.handleKeyEvent.bind(this);
-    this.renderSelectionPlaceholders = this.renderSelectionPlaceholders.bind(this);
+    this.renderSelectionPlaceholders = this.renderSelectionPlaceholders.bind(
+      this
+    );
     this.renderPreviewPlaceholder = this.renderPreviewPlaceholder.bind(this);
   }
 
@@ -24,7 +33,7 @@ class DayCell extends Component {
     switch (event.keyCode) {
       case 13: //space
       case 32: //enter
-        if (event.type === 'keydown') {
+        if (event.type === "keydown") {
           this.props.onMouseDown(day);
         } else {
           this.props.onMouseUp(day);
@@ -41,25 +50,25 @@ class DayCell extends Component {
     }
 
     switch (event.type) {
-      case 'mouseenter':
+      case "mouseenter":
         this.props.onMouseEnter(day);
         onPreviewChange(day);
         stateChanges.hover = true;
         break;
-      case 'blur':
-      case 'mouseleave':
+      case "blur":
+      case "mouseleave":
         stateChanges.hover = false;
         break;
-      case 'mousedown':
+      case "mousedown":
         stateChanges.active = true;
         this.props.onMouseDown(day);
         break;
-      case 'mouseup':
+      case "mouseup":
         event.stopPropagation();
         stateChanges.active = false;
         this.props.onMouseUp(day);
         break;
-      case 'focus':
+      case "focus":
         onPreviewChange(day);
         break;
     }
@@ -99,7 +108,8 @@ class DayCell extends Component {
     const startDate = preview.startDate ? endOfDay(preview.startDate) : null;
     const endDate = preview.endDate ? startOfDay(preview.endDate) : null;
     const isInRange =
-      (!startDate || isAfter(day, startDate)) && (!endDate || isBefore(day, endDate));
+      (!startDate || isAfter(day, startDate)) &&
+      (!endDate || isBefore(day, endDate));
     const isStartEdge = !isInRange && isSameDay(day, startDate);
     const isEndEdge = !isInRange && isSameDay(day, endDate);
     return (
@@ -115,7 +125,7 @@ class DayCell extends Component {
   }
   renderSelectionPlaceholders() {
     const { styles, ranges, day } = this.props;
-    if (this.props.displayMode === 'date') {
+    if (this.props.displayMode === "date") {
       let isSelected = isSameDay(this.props.day, this.props.date);
       return isSelected ? (
         <span className={styles.selected} style={{ color: this.props.color }} />
@@ -131,7 +141,8 @@ class DayCell extends Component {
       startDate = startDate ? endOfDay(startDate) : null;
       endDate = endDate ? startOfDay(endDate) : null;
       const isInRange =
-        (!startDate || isAfter(day, startDate)) && (!endDate || isBefore(day, endDate));
+        (!startDate || isAfter(day, startDate)) &&
+        (!endDate || isBefore(day, endDate));
       const isStartEdge = !isInRange && isSameDay(day, startDate);
       const isEndEdge = !isInRange && isSameDay(day, endDate);
       if (isInRange || isStartEdge || isEndEdge) {
@@ -175,12 +186,15 @@ class DayCell extends Component {
         onKeyDown={this.handleKeyEvent}
         onKeyUp={this.handleKeyEvent}
         className={this.getClassNames(styles)}
-        {...(this.props.disabled || this.props.isPassive ? { tabIndex: -1 } : {})}
-        style={{ 'data-color': this.props.color }}>
+        {...(this.props.disabled || this.props.isPassive
+          ? { tabIndex: -1 }
+          : {})}
+        style={{ color: this.props.color }}
+      >
         {this.renderSelectionPlaceholders()}
         {this.renderPreviewPlaceholder()}
         <span className={styles.dayNumber}>
-          <span>{format(this.props.day, 'D')}</span>
+          <span>{format(this.props.day, "D")}</span>
         </span>
       </button>
     );
@@ -218,7 +232,7 @@ DayCell.propTypes = {
   isStartOfMonth: PropTypes.bool,
   isEndOfMonth: PropTypes.bool,
   color: PropTypes.string,
-  displayMode: PropTypes.oneOf(['dateRange', 'date']),
+  displayMode: PropTypes.oneOf(["dateRange", "date"]),
   styles: PropTypes.object,
   onMouseDown: PropTypes.func,
   onMouseUp: PropTypes.func,