react-clock - npm Package Compare versions

Comparing version 2.2.1 to 2.3.0

dist/Clock.js

@@ -88,3 +88,4 @@ 'use strict';
           hourMarksLength = _props2.hourMarksLength,
-          hourMarksWidth = _props2.hourMarksWidth;
+          hourMarksWidth = _props2.hourMarksWidth,
+          renderNumbers = _props2.renderNumbers;
 
@@ -97,2 +98,3 @@
           key: 'hour_' + i,
+          number: renderNumbers ? i : null,
           length: hourMarksLength,
@@ -236,3 +238,3 @@ name: 'hour',
   hourHandLength: _propTypes3.isHandLength,
-  hourHandOppositeLength: _propTypes3.isHandLength,
+  hourHandOppositeLength: _propTypes3.isOppositeHandLength,
   hourHandWidth: _propTypes3.isHandWidth,
@@ -242,3 +244,3 @@ hourMarksLength: _propTypes3.isMarkLength,
   minuteHandLength: _propTypes3.isHandLength,
-  minuteHandOppositeLength: _propTypes3.isHandLength,
+  minuteHandOppositeLength: _propTypes3.isOppositeHandLength,
   minuteHandWidth: _propTypes3.isHandWidth,
@@ -250,5 +252,6 @@ minuteMarksLength: _propTypes3.isMarkLength,
   renderMinuteMarks: _propTypes2.default.bool,
+  renderNumbers: _propTypes2.default.bool,
   renderSecondHand: _propTypes2.default.bool,
   secondHandLength: _propTypes3.isHandLength,
-  secondHandOppositeLength: _propTypes3.isHandLength,
+  secondHandOppositeLength: _propTypes3.isOppositeHandLength,
   secondHandWidth: _propTypes3.isHandWidth,
@@ -255,0 +258,0 @@ size: _propTypes2.default.number,

dist/entry.js

@@ -12,3 +12,3 @@ 'use strict';
 
-require('./Clock.less');
+require('./Clock.css');
 
@@ -19,4 +19,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// import './Clock.css';
+// File is created during build phase and placed in dist directory
+// eslint-disable-next-line import/no-unresolved
 
 exports.Clock = _Clock2.default;

dist/Mark.js

@@ -23,3 +23,4 @@ 'use strict';
       name = _ref.name,
-      width = _ref.width;
+      width = _ref.width,
+      number = _ref.number;
   return _react2.default.createElement(
@@ -40,3 +41,14 @@ 'div',
       }
-    })
+    }),
+    number && _react2.default.createElement(
+      'div',
+      {
+        className: 'react-clock__mark__number',
+        style: {
+          transform: 'rotate(-' + angle + 'deg)',
+          top: length / 2 + '%'
+        }
+      },
+      number
+    )
   );
@@ -55,5 +67,6 @@ };
   name: _propTypes2.default.string.isRequired,
-  width: _propTypes3.isMarkWidth
+  width: _propTypes3.isMarkWidth,
+  number: _propTypes2.default.number
 };
 
 exports.default = Mark;

dist/shared/propTypes.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.isMarkWidth = exports.isMarkLength = exports.isHandWidth = exports.isHandLength = undefined;
+exports.isMarkWidth = exports.isMarkLength = exports.isHandWidth = exports.isOppositeHandLength = exports.isHandLength = undefined;
 
@@ -30,2 +30,19 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
+var isOppositeHandLength = exports.isOppositeHandLength = function isOppositeHandLength(props, propName, componentName) {
+  var length = props[propName];
+
+  if ((0, _utils.isDefined)(length)) {
+    if (typeof length !== 'number') {
+      return new Error('Invalid prop `' + propName + '` of type `' + (typeof length === 'undefined' ? 'undefined' : _typeof(length)) + '` supplied to `' + componentName + '`, expected `number`.');
+    }
+
+    if (length < -100 || length > 100) {
+      return new Error('Invalid prop `' + propName + '` of type `' + (typeof length === 'undefined' ? 'undefined' : _typeof(length)) + '` supplied to `' + componentName + '`, length must be between -100 and 100.');
+    }
+  }
+
+  // Everything is fine
+  return null;
+};
+
 var isHandWidth = exports.isHandWidth = function isHandWidth(props, propName, componentName) {
@@ -32,0 +49,0 @@ var width = props[propName];

package.json

 {
   "name": "react-clock",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "An analog clock for your React app.",
@@ -8,5 +8,5 @@ "main": "dist/entry.js",
   "scripts": {
-    "build": "npm run build-js && npm run build-styles && npm run copy-styles",
+    "build": "npm run build-js && npm run copy-styles && npm run build-styles",
     "build-js": "babel src -d dist --ignore **/__tests__",
-    "build-styles": "lessc ./src/Clock.less ./src/Clock.css",
+    "build-styles": "lessc ./dist/Clock.less ./dist/Clock.css",
     "copy-styles": "node ./copy-styles.js",
@@ -40,2 +40,8 @@ "prepublishOnly": "npm run build",
   },
+  "contributors": [
+    {
+      "name": "Yin Hengli",
+      "email": "[e-mail]"
+    }
+  ],
   "license": "MIT",
@@ -67,5 +73,4 @@ "dependencies": {
     "less": "^2.7.3",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-test-renderer": "^16.2.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
@@ -72,0 +77,0 @@ "peerDependencies": {

README.md

@@ -1,2 +0,2 @@
-![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
+![downloads](https://img.shields.io/npm/dt/react-clock.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-clock/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-clock.svg
 ) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-clock.svg
@@ -73,3 +73,3 @@ ) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 |hourHandLength|Defines the length of an hour hand, in %. Defaults to `50`.|`80`|
-|hourHandOppositeLength|Defines the length of the part of an hour hand on the opposite side the hand is pointing to, in %.|`20`|
+|hourHandOppositeLength|Defines the length of the part of an hour hand on the opposite side the hand is pointing to, in %. Defaults to `10`.|`20`|
 |hourHandWidth|Defines the width of an hour hand, in pixels. Defaults to `4`.|`3`|
@@ -79,3 +79,3 @@ |hourMarksLength|Defines the length of hour marks, in %. Defaults to `10`.|`8`|
 |minuteHandLength|Defines the length of a minute hand, in %. Defaults to `70`.|`80`|
-|minuteHandOppositeLength|Defines the length of the part of a minute hand on the opposite side the hand is pointing to, in %. Defaults to `0`.|`20`|
+|minuteHandOppositeLength|Defines the length of the part of a minute hand on the opposite side the hand is pointing to, in %. Defaults to `10`.|`20`|
 |minuteHandWidth|Defines the width of a minute hand, in pixels. Defaults to `2`.|`3`|
@@ -87,5 +87,6 @@ |minuteMarksLength|Defines the length of minute marks, in %. Defaults to `6`.|`8`|
 |renderMinuteMarks|Defines whether minute marks shall be rendered. Defaults to `true`.|`false`|
+|renderNumbers|Defined whether numbers shall be rendered. Defaults to `false`.|`true`|
 |renderSecondHand|Defines whether second hand shall be rendered. Defaults to `true`.|`false`|
 |secondHandLength|Defines the length of a second hand, in %. Defaults to `90`.|`80`|
-|secondHandOppositeLength|Defines the length of the part of a second hand on the opposite side the hand is pointing to, in %. Defaults to `0`.|`20`|
+|secondHandOppositeLength|Defines the length of the part of a second hand on the opposite side the hand is pointing to, in %. Defaults to `10`.|`20`|
 |secondHandWidth|Defines the width of a second hand, in pixels. Defaults to `1`.|`2`|
@@ -92,0 +93,0 @@ |size|Defines the size of the clock, in pixels. Defaults to `150`.|`250`|

src/__tests__/Hand.jsx

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

src/Clock.jsx

@@ -14,3 +14,3 @@ import React, { Component } from 'react';
 
-import { isHandLength, isHandWidth, isMarkLength, isMarkWidth } from './shared/propTypes';
+import { isHandLength, isOppositeHandLength, isHandWidth, isMarkLength, isMarkWidth } from './shared/propTypes';
 
@@ -56,2 +56,3 @@ export default class Clock extends Component {
       hourMarksWidth,
+      renderNumbers,
     } = this.props;
@@ -65,2 +66,3 @@
           key={`hour_${i}`}
+          number={renderNumbers ? i : null}
           length={hourMarksLength}
@@ -211,3 +213,3 @@ name="hour"
   hourHandLength: isHandLength,
-  hourHandOppositeLength: isHandLength,
+  hourHandOppositeLength: isOppositeHandLength,
   hourHandWidth: isHandWidth,
@@ -217,3 +219,3 @@ hourMarksLength: isMarkLength,
   minuteHandLength: isHandLength,
-  minuteHandOppositeLength: isHandLength,
+  minuteHandOppositeLength: isOppositeHandLength,
   minuteHandWidth: isHandWidth,
@@ -225,5 +227,6 @@ minuteMarksLength: isMarkLength,
   renderMinuteMarks: PropTypes.bool,
+  renderNumbers: PropTypes.bool,
   renderSecondHand: PropTypes.bool,
   secondHandLength: isHandLength,
-  secondHandOppositeLength: isHandLength,
+  secondHandOppositeLength: isOppositeHandLength,
   secondHandWidth: isHandWidth,
@@ -230,0 +233,0 @@ size: PropTypes.number,

src/entry.js

 import Clock from './Clock';
 
-// import './Clock.css';
-import './Clock.less';
+// File is created during build phase and placed in dist directory
+// eslint-disable-next-line import/no-unresolved
+import './Clock.css';
 
@@ -6,0 +7,0 @@ export default Clock;

src/Mark.jsx

@@ -11,2 +11,3 @@ import React from 'react';
   width,
+  number,
 }) => (
@@ -27,2 +28,13 @@ <div
     />
+    {number && (
+      <div
+        className="react-clock__mark__number"
+        style={{
+          transform: `rotate(-${angle}deg)`,
+          top: `${length / 2}%`,
+        }}
+      >
+        {number}
+      </div>
+    )}
   </div>
@@ -42,4 +54,5 @@ );
   width: isMarkWidth,
+  number: PropTypes.number,
 };
 
 export default Mark;

src/shared/propTypes.js

@@ -20,2 +20,19 @@ import { isDefined } from './utils';
 
+export const isOppositeHandLength = (props, propName, componentName) => {
+  const length = props[propName];
+
+  if (isDefined(length)) {
+    if (typeof length !== 'number') {
+      return new Error(`Invalid prop \`${propName}\` of type \`${typeof length}\` supplied to \`${componentName}\`, expected \`number\`.`);
+    }
+
+    if (length < -100 || length > 100) {
+      return new Error(`Invalid prop \`${propName}\` of type \`${typeof length}\` supplied to \`${componentName}\`, length must be between -100 and 100.`);
+    }
+  }
+
+  // Everything is fine
+  return null;
+};
+
 export const isHandWidth = (props, propName, componentName) => {
@@ -22,0 +39,0 @@ const width = props[propName];

No alert changes

Improved metrics

Total package byte prevSize

50869

9.57%

Dev dependency count

22

-4.35%

Lines of code

1219

8.55%

Number of lines in readme file

111

0.91%

No dependency changes