🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-clock

Package Overview
Dependencies
Maintainers
2
Versions
27
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-clock - npm Package Compare versions

Comparing version

to
2.3.0

src/__tests__/Mark.jsx

11

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,

@@ -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;

@@ -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;

@@ -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];

{
"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": "yinhengliben@gmail.com"
}
],
"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": {

@@ -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`|

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

@@ -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,

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;

@@ -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;

@@ -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];

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet