react-clock - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

dist/Clock.js

@@ -31,2 +31,4 @@ 'use strict';
 
+var _propTypes3 = require('./shared/propTypes');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -50,45 +52,62 @@
   _createClass(Clock, [{
-    key: 'renderFace',
-    value: function renderFace() {
+    key: 'renderMinuteMarks',
+    value: function renderMinuteMarks() {
+      if (!this.props.renderMinuteMarks) {
+        return null;
+      }
+
       var _props = this.props,
-          renderMinuteMarks = _props.renderMinuteMarks,
-          renderHourMarks = _props.renderHourMarks,
           minuteMarksLength = _props.minuteMarksLength,
           minuteMarksWidth = _props.minuteMarksWidth,
-          hourMarksLength = _props.hourMarksLength,
-          hourMarksWidth = _props.hourMarksWidth;
+          renderHourMarks = _props.renderHourMarks;
 
 
-      var marks = [];
+      var minuteMarks = [];
+      for (var i = 1; i <= 60; i += 1) {
+        var isHourMark = renderHourMarks && !(i % 5);
 
-      if (renderMinuteMarks) {
-        for (var i = 1; i <= 60; i += 1) {
-          var isHour = renderHourMarks && !(i % 5);
-          var width = isHour ? hourMarksWidth : minuteMarksWidth;
-          var length = isHour ? hourMarksLength : minuteMarksLength;
-
-          marks.push(_react2.default.createElement(_Mark2.default, {
+        if (!isHourMark) {
+          minuteMarks.push(_react2.default.createElement(_Mark2.default, {
             angle: i * 6,
-            key: isHour ? 'hour_' + Math.floor(i / 5) : 'minute_' + i,
-            length: length,
-            name: isHour ? 'hour' : 'minute',
-            width: width
+            key: 'minute_' + i,
+            length: minuteMarksLength,
+            name: 'minute',
+            width: minuteMarksWidth
           }));
         }
-      } else if (renderHourMarks) {
-        for (var _i = 1; _i <= 12; _i += 1) {
-          marks.push(_react2.default.createElement(_Mark2.default, {
-            angle: _i * 30,
-            key: 'hour_' + _i,
-            length: hourMarksLength,
-            name: 'hour',
-            width: hourMarksWidth
-          }));
-        }
       }
+      return minuteMarks;
+    }
+  }, {
+    key: 'renderHourMarks',
+    value: function renderHourMarks() {
+      if (!this.props.renderHourMarks) {
+        return null;
+      }
 
+      var _props2 = this.props,
+          hourMarksLength = _props2.hourMarksLength,
+          hourMarksWidth = _props2.hourMarksWidth;
+
+
+      var hourMarks = [];
+      for (var i = 1; i <= 12; i += 1) {
+        hourMarks.push(_react2.default.createElement(_Mark2.default, {
+          angle: i * 30,
+          key: 'hour_' + i,
+          length: hourMarksLength,
+          name: 'hour',
+          width: hourMarksWidth
+        }));
+      }
+      return hourMarks;
+    }
+  }, {
+    key: 'renderFace',
+    value: function renderFace() {
       return _react2.default.createElement(
         'div',
         { className: 'react-clock__face' },
-        marks
+        this.renderMinuteMarks(),
+        this.renderHourMarks()
       );
@@ -99,7 +118,7 @@ }
     value: function renderHourHand() {
-      var _props2 = this.props,
-          hourHandWidth = _props2.hourHandWidth,
-          hourHandLength = _props2.hourHandLength,
-          hourHandOppositeLength = _props2.hourHandOppositeLength,
-          value = _props2.value;
+      var _props3 = this.props,
+          hourHandWidth = _props3.hourHandWidth,
+          hourHandLength = _props3.hourHandLength,
+          hourHandOppositeLength = _props3.hourHandOppositeLength,
+          value = _props3.value;
 
@@ -124,7 +143,7 @@
 
-      var _props3 = this.props,
-          minuteHandWidth = _props3.minuteHandWidth,
-          minuteHandLength = _props3.minuteHandLength,
-          minuteHandOppositeLength = _props3.minuteHandOppositeLength,
-          value = _props3.value;
+      var _props4 = this.props,
+          minuteHandWidth = _props4.minuteHandWidth,
+          minuteHandLength = _props4.minuteHandLength,
+          minuteHandOppositeLength = _props4.minuteHandOppositeLength,
+          value = _props4.value;
 
@@ -149,7 +168,7 @@
 
-      var _props4 = this.props,
-          secondHandWidth = _props4.secondHandWidth,
-          secondHandLength = _props4.secondHandLength,
-          secondHandOppositeLength = _props4.secondHandOppositeLength,
-          value = _props4.value;
+      var _props5 = this.props,
+          secondHandWidth = _props5.secondHandWidth,
+          secondHandLength = _props5.secondHandLength,
+          secondHandOppositeLength = _props5.secondHandOppositeLength,
+          value = _props5.value;
 
@@ -170,5 +189,5 @@
     value: function render() {
-      var _props5 = this.props,
-          size = _props5.size,
-          value = _props5.value;
+      var _props6 = this.props,
+          size = _props6.size,
+          value = _props6.value;
 
@@ -220,12 +239,12 @@
   className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)]),
-  hourHandLength: _propTypes2.default.number,
-  hourHandOppositeLength: _propTypes2.default.number,
-  hourHandWidth: _propTypes2.default.number,
-  hourMarksLength: _propTypes2.default.number,
-  hourMarksWidth: _propTypes2.default.number,
-  minuteHandLength: _propTypes2.default.number,
-  minuteHandOppositeLength: _propTypes2.default.number,
-  minuteHandWidth: _propTypes2.default.number,
-  minuteMarksLength: _propTypes2.default.number,
-  minuteMarksWidth: _propTypes2.default.number,
+  hourHandLength: _propTypes3.isHandLength,
+  hourHandOppositeLength: _propTypes3.isHandLength,
+  hourHandWidth: _propTypes3.isHandWidth,
+  hourMarksLength: _propTypes3.isMarkLength,
+  hourMarksWidth: _propTypes3.isMarkWidth,
+  minuteHandLength: _propTypes3.isHandLength,
+  minuteHandOppositeLength: _propTypes3.isHandLength,
+  minuteHandWidth: _propTypes3.isHandWidth,
+  minuteMarksLength: _propTypes3.isMarkLength,
+  minuteMarksWidth: _propTypes3.isMarkWidth,
   renderHourMarks: _propTypes2.default.bool,
@@ -235,7 +254,7 @@ renderMinuteHand: _propTypes2.default.bool,
   renderSecondHand: _propTypes2.default.bool,
-  secondHandLength: _propTypes2.default.number,
-  secondHandOppositeLength: _propTypes2.default.number,
-  secondHandWidth: _propTypes2.default.number,
+  secondHandLength: _propTypes3.isHandLength,
+  secondHandOppositeLength: _propTypes3.isHandLength,
+  secondHandWidth: _propTypes3.isHandWidth,
   size: _propTypes2.default.number,
   value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.instanceOf(Date)])
 };

dist/Hand.js

@@ -15,2 +15,4 @@ 'use strict';
 
+var _propTypes3 = require('./shared/propTypes');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,15 +26,2 @@
       width = _ref.width;
-
-  if (length > 100) {
-    throw new Error('Hand can\'t be longer than 100 (%).');
-  }
-
-  if (oppositeLength < 0 || oppositeLength > 100) {
-    throw new Error('Opposite length of the hand must be between 0 and 100.');
-  }
-
-  if (oppositeLength > length) {
-    throw new Error('Opposite side of the hand can\'t be longer than its main part.');
-  }
-
   return _react2.default.createElement(
@@ -66,5 +55,5 @@ 'div',
   angle: _propTypes2.default.number,
-  name: _propTypes2.default.string,
-  length: _propTypes2.default.number,
-  oppositeLength: _propTypes2.default.number,
+  name: _propTypes2.default.string.isRequired,
+  length: _propTypes3.isHandLength,
+  oppositeLength: _propTypes3.isHandLength,
   width: _propTypes2.default.number
@@ -71,0 +60,0 @@ };

dist/Mark.js

@@ -15,2 +15,4 @@ 'use strict';
 
+var _propTypes3 = require('./shared/propTypes');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,7 +25,2 @@
       width = _ref.width;
-
-  if (length > 100) {
-    throw new Error('Mark can\'t be longer than 100 (%).');
-  }
-
   return _react2.default.createElement(
@@ -56,7 +53,7 @@ 'div',
   angle: _propTypes2.default.number,
-  length: _propTypes2.default.number,
-  name: _propTypes2.default.string,
-  width: _propTypes2.default.number
+  length: _propTypes3.isMarkLength,
+  name: _propTypes2.default.string.isRequired,
+  width: _propTypes3.isMarkWidth
 };
 
 exports.default = Mark;

package.json

 {
   "name": "react-clock",
-  "version": "2.2.0",
-  "description": "A component to display clock for your React application.",
+  "version": "2.2.1",
+  "description": "An analog clock for your React app.",
   "main": "dist/entry.js",
@@ -24,3 +24,4 @@ "es6": "src/entry.js",
       "**/src/**.{js,jsx}",
-      "!**/src/entry.js"
+      "!**/src/entry.js",
+      "!**/src/entry.nostyle.js"
     ]
@@ -42,5 +43,3 @@ },
     "merge-class-names": "^1.1.1",
-    "prop-types": "^15.6.0",
-    "react": ">=15.5",
-    "react-dom": ">=15.5"
+    "prop-types": "^15.6.0"
   },
@@ -50,3 +49,3 @@ "devDependencies": {
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.3",
+    "babel-eslint": "^8.2.1",
     "babel-plugin-transform-class-properties": "^6.24.1",
@@ -58,15 +57,21 @@ "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "babel-preset-stage-2": "^6.24.1",
-    "enzyme": "^3.2.0",
-    "enzyme-adapter-react-16": "^1.1.0",
-    "eslint": "^4.13.1",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^4.16.0",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-class-property": "^1.0.6",
+    "eslint-plugin-class-property": "^1.1.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.5.1",
-    "jest": "^22.0.4",
-    "jest-cli": "^22.0.4",
+    "eslint-plugin-react": "^7.6.0",
+    "jest": "^22.0.6",
+    "jest-cli": "^22.0.6",
     "less": "^2.7.3",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-test-renderer": "^16.2.0"
   },
+  "peerDependencies": {
+    "react": ">=15.5",
+    "react-dom": ">=15.5"
+  },
   "files": [
@@ -73,0 +78,0 @@ "LICENSE",

README.md

@@ -7,3 +7,3 @@ ![downloads](https://img.shields.io/npm/dt/react-clock.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-clock.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-clock.svg
 
-A component to display clock for your React application.
+An analog clock for your React app.
 
@@ -19,3 +19,3 @@ ## tl;dr
 
-[Online demo](http://projekty.wojtekmaj.pl/react-clock/) is also available!
+[Online demo](http://projects.wojtekmaj.pl/react-clock/) is also available!
 
@@ -22,0 +22,0 @@ ## Installation

src/__tests__/Clock.jsx

@@ -0,0 +0,0 @@ import React from 'react';

src/Clock.jsx

@@ -14,48 +14,65 @@ import React, { Component } from 'react';
 
+import { isHandLength, isHandWidth, isMarkLength, isMarkWidth } from './shared/propTypes';
+
 export default class Clock extends Component {
-  renderFace() {
+  renderMinuteMarks() {
+    if (!this.props.renderMinuteMarks) {
+      return null;
+    }
+
     const {
-      renderMinuteMarks,
-      renderHourMarks,
       minuteMarksLength,
       minuteMarksWidth,
-      hourMarksLength,
-      hourMarksWidth,
+      renderHourMarks,
     } = this.props;
 
-    const marks = [];
+    const minuteMarks = [];
+    for (let i = 1; i <= 60; i += 1) {
+      const isHourMark = renderHourMarks && !(i % 5);
 
-    if (renderMinuteMarks) {
-      for (let i = 1; i <= 60; i += 1) {
-        const isHour = renderHourMarks && !(i % 5);
-        const width = isHour ? hourMarksWidth : minuteMarksWidth;
-        const length = isHour ? hourMarksLength : minuteMarksLength;
-
-        marks.push(
+      if (!isHourMark) {
+        minuteMarks.push(
           <Mark
             angle={i * 6}
-            key={isHour ? `hour_${Math.floor(i / 5)}` : `minute_${i}`}
-            length={length}
-            name={isHour ? 'hour' : 'minute'}
-            width={width}
+            key={`minute_${i}`}
+            length={minuteMarksLength}
+            name="minute"
+            width={minuteMarksWidth}
           />,
         );
       }
-    } else if (renderHourMarks) {
-      for (let i = 1; i <= 12; i += 1) {
-        marks.push(
-          <Mark
-            angle={i * 30}
-            key={`hour_${i}`}
-            length={hourMarksLength}
-            name="hour"
-            width={hourMarksWidth}
-          />,
-        );
-      }
     }
+    return minuteMarks;
+  }
 
+  renderHourMarks() {
+    if (!this.props.renderHourMarks) {
+      return null;
+    }
+
+    const {
+      hourMarksLength,
+      hourMarksWidth,
+    } = this.props;
+
+    const hourMarks = [];
+    for (let i = 1; i <= 12; i += 1) {
+      hourMarks.push(
+        <Mark
+          angle={i * 30}
+          key={`hour_${i}`}
+          length={hourMarksLength}
+          name="hour"
+          width={hourMarksWidth}
+        />,
+      );
+    }
+    return hourMarks;
+  }
+
+  renderFace() {
     return (
       <div className="react-clock__face">
-        {marks}
+        {this.renderMinuteMarks()}
+        {this.renderHourMarks()}
       </div>
@@ -191,12 +208,12 @@ );
   ]),
-  hourHandLength: PropTypes.number,
-  hourHandOppositeLength: PropTypes.number,
-  hourHandWidth: PropTypes.number,
-  hourMarksLength: PropTypes.number,
-  hourMarksWidth: PropTypes.number,
-  minuteHandLength: PropTypes.number,
-  minuteHandOppositeLength: PropTypes.number,
-  minuteHandWidth: PropTypes.number,
-  minuteMarksLength: PropTypes.number,
-  minuteMarksWidth: PropTypes.number,
+  hourHandLength: isHandLength,
+  hourHandOppositeLength: isHandLength,
+  hourHandWidth: isHandWidth,
+  hourMarksLength: isMarkLength,
+  hourMarksWidth: isMarkWidth,
+  minuteHandLength: isHandLength,
+  minuteHandOppositeLength: isHandLength,
+  minuteHandWidth: isHandWidth,
+  minuteMarksLength: isMarkLength,
+  minuteMarksWidth: isMarkWidth,
   renderHourMarks: PropTypes.bool,
@@ -206,5 +223,5 @@ renderMinuteHand: PropTypes.bool,
   renderSecondHand: PropTypes.bool,
-  secondHandLength: PropTypes.number,
-  secondHandOppositeLength: PropTypes.number,
-  secondHandWidth: PropTypes.number,
+  secondHandLength: isHandLength,
+  secondHandOppositeLength: isHandLength,
+  secondHandWidth: isHandWidth,
   size: PropTypes.number,
@@ -211,0 +228,0 @@ value: PropTypes.oneOfType([

src/Hand.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { isHandLength } from './shared/propTypes';
+
 const Hand = ({
@@ -10,33 +12,19 @@ angle,
   width,
-}) => {
-  if (length > 100) {
-    throw new Error('Hand can\'t be longer than 100 (%).');
-  }
-
-  if (oppositeLength < 0 || oppositeLength > 100) {
-    throw new Error('Opposite length of the hand must be between 0 and 100.');
-  }
-
-  if (oppositeLength > length) {
-    throw new Error('Opposite side of the hand can\'t be longer than its main part.');
-  }
-
-  return (
+}) => (
+  <div
+    className={`react-clock__hand react-clock__${name}-hand`}
+    style={{
+      transform: `rotate(${angle}deg)`,
+    }}
+  >
     <div
-      className={`react-clock__hand react-clock__${name}-hand`}
+      className={`react-clock__hand__body react-clock__${name}-hand__body`}
       style={{
-        transform: `rotate(${angle}deg)`,
+        width: `${width}px`,
+        top: `${50 - (length / 2)}%`,
+        bottom: `${50 - (oppositeLength / 2)}%`,
       }}
-    >
-      <div
-        className={`react-clock__hand__body react-clock__${name}-hand__body`}
-        style={{
-          width: `${width}px`,
-          top: `${50 - (length / 2)}%`,
-          bottom: `${50 - (oppositeLength / 2)}%`,
-        }}
-      />
-    </div>
-  );
-};
+    />
+  </div>
+);
 
@@ -52,5 +40,5 @@ Hand.defaultProps = {
   angle: PropTypes.number,
-  name: PropTypes.string,
-  length: PropTypes.number,
-  oppositeLength: PropTypes.number,
+  name: PropTypes.string.isRequired,
+  length: isHandLength,
+  oppositeLength: isHandLength,
   width: PropTypes.number,
@@ -57,0 +45,0 @@ };

src/Mark.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { isMarkLength, isMarkWidth } from './shared/propTypes';
+
 const Mark = ({
@@ -9,25 +11,19 @@ angle,
   width,
-}) => {
-  if (length > 100) {
-    throw new Error('Mark can\'t be longer than 100 (%).');
-  }
-
-  return (
+}) => (
+  <div
+    className={`react-clock__mark react-clock__${name}-mark`}
+    style={{
+      transform: `rotate(${angle}deg)`,
+    }}
+  >
     <div
-      className={`react-clock__mark react-clock__${name}-mark`}
+      className={`react-clock__mark__body react-clock__${name}-mark__body`}
       style={{
-        transform: `rotate(${angle}deg)`,
+        width: `${width}px`,
+        top: 0,
+        bottom: `${100 - (length / 2)}%`,
       }}
-    >
-      <div
-        className={`react-clock__mark__body react-clock__${name}-mark__body`}
-        style={{
-          width: `${width}px`,
-          top: 0,
-          bottom: `${100 - (length / 2)}%`,
-        }}
-      />
-    </div>
-  );
-};
+    />
+  </div>
+);
 
@@ -42,7 +38,7 @@ Mark.defaultProps = {
   angle: PropTypes.number,
-  length: PropTypes.number,
-  name: PropTypes.string,
-  width: PropTypes.number,
+  length: isMarkLength,
+  name: PropTypes.string.isRequired,
+  width: isMarkWidth,
 };
 
 export default Mark;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46425

increased by17.77%

Number of package files

25

increased by25%

Lines of code

1123

increased by16.37%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

23

increased by9.52%

Dependency changes

• - Removedreact@>=15.5

• - Removedreact-dom@>=15.5