🚀 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
3.1.0

dist/esm/HourMark.js

13

dist/esm/Clock.js

@@ -6,6 +6,8 @@ import React from 'react';

import Hand from './Hand';
import Mark from './Mark';
import MinuteMark from './MinuteMark';
import HourMark from './HourMark';
import { isHandLength, isOppositeHandLength, isHandWidth, isMarkLength, isMarkWidth } from './shared/propTypes';
export default function Clock(_ref) {
var className = _ref.className,
formatHour = _ref.formatHour,
_ref$hourHandLength = _ref.hourHandLength,

@@ -20,2 +22,3 @@ hourHandLength = _ref$hourHandLength === void 0 ? 50 : _ref$hourHandLength,

hourMarksWidth = _ref$hourMarksWidth === void 0 ? 3 : _ref$hourMarksWidth,
locale = _ref.locale,
_ref$minuteHandLength = _ref.minuteHandLength,

@@ -59,3 +62,3 @@ minuteHandLength = _ref$minuteHandLength === void 0 ? 70 : _ref$minuteHandLength,

if (!isHourMark) {
minuteMarks.push( /*#__PURE__*/React.createElement(Mark, {
minuteMarks.push( /*#__PURE__*/React.createElement(MinuteMark, {
key: "minute_".concat(i),

@@ -81,6 +84,8 @@ angle: i * 6,

for (var i = 1; i <= 12; i += 1) {
hourMarks.push( /*#__PURE__*/React.createElement(Mark, {
hourMarks.push( /*#__PURE__*/React.createElement(HourMark, {
key: "hour_".concat(i),
angle: i * 30,
formatHour: formatHour,
length: hourMarksLength,
locale: locale,
name: "hour",

@@ -153,2 +158,3 @@ number: renderNumbers ? i : null,

className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
formatHour: PropTypes.func,
hourHandLength: isHandLength,

@@ -159,2 +165,3 @@ hourHandOppositeLength: isOppositeHandLength,

hourMarksWidth: isMarkWidth,
locale: PropTypes.string,
minuteHandLength: isHandLength,

@@ -161,0 +168,0 @@ minuteHandOppositeLength: isOppositeHandLength,

@@ -37,4 +37,4 @@ import React from 'react';

name: PropTypes.string.isRequired,
number: PropTypes.number,
number: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
width: isMarkWidth
};

@@ -1,2 +0,2 @@

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

@@ -3,0 +3,0 @@ import { isDefined } from './utils';

@@ -1,3 +0,1 @@

/* eslint-disable import/prefer-default-export */
/**

@@ -8,4 +6,4 @@ * Checks whether a variable is defined.

*/
export var isDefined = function isDefined(variable) {
export function isDefined(variable) {
return typeof variable !== 'undefined';
};
}

@@ -18,4 +18,6 @@ "use strict";

var _Mark = _interopRequireDefault(require("./Mark"));
var _MinuteMark = _interopRequireDefault(require("./MinuteMark"));
var _HourMark = _interopRequireDefault(require("./HourMark"));
var _propTypes2 = require("./shared/propTypes");

@@ -27,2 +29,3 @@

var className = _ref.className,
formatHour = _ref.formatHour,
_ref$hourHandLength = _ref.hourHandLength,

@@ -37,2 +40,3 @@ hourHandLength = _ref$hourHandLength === void 0 ? 50 : _ref$hourHandLength,

hourMarksWidth = _ref$hourMarksWidth === void 0 ? 3 : _ref$hourMarksWidth,
locale = _ref.locale,
_ref$minuteHandLength = _ref.minuteHandLength,

@@ -76,3 +80,3 @@ minuteHandLength = _ref$minuteHandLength === void 0 ? 70 : _ref$minuteHandLength,

if (!isHourMark) {
minuteMarks.push( /*#__PURE__*/_react["default"].createElement(_Mark["default"], {
minuteMarks.push( /*#__PURE__*/_react["default"].createElement(_MinuteMark["default"], {
key: "minute_".concat(i),

@@ -98,6 +102,8 @@ angle: i * 6,

for (var i = 1; i <= 12; i += 1) {
hourMarks.push( /*#__PURE__*/_react["default"].createElement(_Mark["default"], {
hourMarks.push( /*#__PURE__*/_react["default"].createElement(_HourMark["default"], {
key: "hour_".concat(i),
angle: i * 30,
formatHour: formatHour,
length: hourMarksLength,
locale: locale,
name: "hour",

@@ -171,2 +177,3 @@ number: renderNumbers ? i : null,

className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
formatHour: _propTypes["default"].func,
hourHandLength: _propTypes2.isHandLength,

@@ -177,2 +184,3 @@ hourHandOppositeLength: _propTypes2.isOppositeHandLength,

hourMarksWidth: _propTypes2.isMarkWidth,
locale: _propTypes["default"].string,
minuteHandLength: _propTypes2.isHandLength,

@@ -179,0 +187,0 @@ minuteHandOppositeLength: _propTypes2.isOppositeHandLength,

@@ -50,4 +50,4 @@ "use strict";

name: _propTypes["default"].string.isRequired,
number: _propTypes["default"].number,
number: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
width: _propTypes2.isMarkWidth
};

@@ -6,7 +6,7 @@ "use strict";

});
exports.isMarkWidth = exports.isMarkLength = exports.isHandWidth = exports.isOppositeHandLength = exports.isHandLength = void 0;
exports.isOppositeHandLength = exports.isMarkWidth = exports.isMarkLength = exports.isHandWidth = exports.isHandLength = void 0;
var _utils = require("./utils");
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

@@ -13,0 +13,0 @@ var isNumberBetween = function isNumberBetween(min, max) {

@@ -6,6 +6,4 @@ "use strict";

});
exports.isDefined = void 0;
exports.isDefined = isDefined;
/* eslint-disable import/prefer-default-export */
/**

@@ -16,6 +14,4 @@ * Checks whether a variable is defined.

*/
var isDefined = function isDefined(variable) {
function isDefined(variable) {
return typeof variable !== 'undefined';
};
exports.isDefined = isDefined;
}
{
"name": "react-clock",
"version": "3.0.0",
"version": "3.1.0",
"description": "An analog clock for your React app.",

@@ -9,3 +9,4 @@ "main": "dist/umd/index.js",

"sideEffects": [
"*.css"
"*.css",
"*.less"
],

@@ -15,4 +16,4 @@ "scripts": {

"build-js-all": "yarn build-js-esm && yarn build-js-umd",
"build-js-esm": "cross-env BABEL_ENV=production-esm babel src -d dist/esm --ignore **/*.spec.js,**/*.spec.jsx",
"build-js-umd": "cross-env BABEL_ENV=production-umd babel src -d dist/umd --ignore **/*.spec.js,**/*.spec.jsx",
"build-js-esm": "BABEL_ENV=production-esm babel src -d dist/esm --ignore \"**/*.spec.js,**/*.spec.jsx\"",
"build-js-umd": "BABEL_ENV=production-umd babel src -d dist/umd --ignore \"**/*.spec.js,**/*.spec.jsx\"",
"build-styles": "lessc ./dist/Clock.less ./dist/Clock.css",

@@ -22,16 +23,6 @@ "clean": "rimraf dist",

"jest": "jest",
"jest-coverage": "jest --coverage",
"lint": "eslint sample/ src/ test/ --ext .jsx,.js",
"prepublishOnly": "yarn clean && yarn build",
"prepack": "yarn clean && yarn build",
"test": "yarn lint && yarn jest"
},
"jest": {
"setupFiles": [
"<rootDir>/jest.setup.js"
],
"collectCoverageFrom": [
"**/src/**.{js,jsx}",
"!**/src/index.js"
]
},
"keywords": [

@@ -57,2 +48,3 @@ "clock",

"@wojtekmaj/date-utils": "^1.0.0",
"get-user-locale": "^1.4.0",
"merge-class-names": "^1.1.1",

@@ -62,33 +54,29 @@ "prop-types": "^15.6.0"

"devDependencies": {
"@babel/cli": "^7.8.0",
"@babel/core": "^7.9.0",
"@babel/plugin-proposal-class-properties": "^7.8.0",
"@babel/preset-env": "^7.9.0",
"@babel/preset-react": "^7.9.0",
"babel-eslint": "^10.0.0",
"cross-env": "^7.0.0",
"@babel/cli": "^7.15.0",
"@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"@babel/preset-react": "^7.14.0",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"eslint": "~7.2.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-jsx-a11y": "^6.3.0",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^4.0.0",
"jest": "^26.0.0",
"less": "^3.8.1",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-test-renderer": "^16.7.0",
"eslint": "^8.5.0",
"eslint-config-wojtekmaj": "^0.6.5",
"husky": "^7.0.0",
"jest": "^27.0.0",
"less": "^4.0.0",
"prettier": "^2.5.0",
"pretty-quick": "^3.1.0",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"rimraf": "^3.0.0"
},
"peerDependencies": {
"react": ">=15.5",
"react-dom": ">=15.5"
"react": "^15.5.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^15.5.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
},
"resolutions": {
"semver@7.0.0": "^7.0.0"
},
"files": [
"LICENSE",
"README.md",
"dist/",
"src/"
"dist",
"src"
],

@@ -99,3 +87,4 @@ "repository": {

},
"funding": "https://github.com/wojtekmaj/react-clock?sponsor=1"
}
"funding": "https://github.com/wojtekmaj/react-clock?sponsor=1",
"packageManager": "yarn@3.1.0"
}

@@ -1,4 +0,2 @@

[![npm](https://img.shields.io/npm/v/react-clock.svg)](https://www.npmjs.com/package/react-clock) ![downloads](https://img.shields.io/npm/dt/react-clock.svg) [![build](https://travis-ci.com/wojtekmaj/react-clock.svg?branch=master)](https://travis-ci.com/wojtekmaj/react-clock) ![dependencies](https://img.shields.io/david/wojtekmaj/react-clock.svg
) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-clock.svg
) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
[![npm](https://img.shields.io/npm/v/react-clock.svg)](https://www.npmjs.com/package/react-clock) ![downloads](https://img.shields.io/npm/dt/react-clock.svg) [![CI](https://github.com/wojtekmaj/react-clock/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-clock/actions) ![dependencies](https://img.shields.io/david/wojtekmaj/react-clock.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-clock.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)

@@ -10,6 +8,7 @@ # React-Clock

## tl;dr
* Install by executing `npm install react-clock` or `yarn add react-clock`.
* Import by adding `import Clock from 'react-clock'`.
* Use by adding `<Clock />`.
- Install by executing `npm install react-clock` or `yarn add react-clock`.
- Import by adding `import Clock from 'react-clock'`.
- Use by adding `<Clock />`.
## Demo

@@ -37,10 +36,7 @@

useEffect(() => {
const interval = setInterval(
() => setValue(new Date()),
1000
);
const interval = setInterval(() => setValue(new Date()), 1000);
return () => {
clearInterval(interval);
}
};
}, []);

@@ -53,3 +49,3 @@

</div>
)
);
}

@@ -74,25 +70,27 @@ ```

|Prop name|Description|Default value|Example values|
|----|----|----|----|
|className|Class name(s) that will be added along with `"react-clock"` to the main React-Clock `<time>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
|hourHandLength|Hour hand length, in %.|`50`|`80`|
|hourHandOppositeLength|The length of the part of an hour hand on the opposite side the hand is pointing to, in %.|`10`|`20`|
|hourHandWidth|Hour hand width, in pixels.|`4`|`3`|
|hourMarksLength|Hour marks length, in %.|`10`|`8`|
|hourMarksWidth|Hour marks width, in pixels.|`3`|`2`|
|minuteHandLength|Minute hand length, in %.|`70`|`80`|
|minuteHandOppositeLength|The length of the part of a minute hand on the opposite side the hand is pointing to, in %.|`10`|`20`|
|minuteHandWidth|Minute hand width, in pixels.|`2`|`3`|
|minuteMarksLength|Minute marks length, in %.|`6`|`8`|
|minuteMarksWidth|Minute marks width, in pixels.|`1`|`2`|
|renderHourMarks|Whether hour marks shall be rendered.|`true`|`false`|
|renderMinuteHand|Whether minute hand shall be rendered.|`true`|`false`|
|renderMinuteMarks|Whether minute marks shall be rendered.|`true`|`false`|
|renderNumbers|Whether numbers shall be rendered.|`false`|`true`|
|renderSecondHand|Whether second hand shall be rendered.|`true`|`false`|
|secondHandLength|Second hand length, in %.|`90`|`80`|
|secondHandOppositeLength|The length of the part of a second hand on the opposite side the hand is pointing to, in %.|`10`|`20`|
|secondHandWidth|Second hand width, in pixels.|`1`|`2`|
|size|Clock size, in pixels.|`150`|`250`|
|value|Clock value. Must be provided.|n/a|Date: `new Date()`|
| Prop name | Description | Default value | Example values |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------- |
| className | Class name(s) that will be added along with `"react-clock"` to the main React-Clock `<time>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
| formatHour | Function called to override default formatting of hour marks. Can be used to use your own formatting function. | (default formatter) | `(locale, hour) => formatHour(hour, 'HH')` |
| hourHandLength | Hour hand length, in %. | `50` | `80` |
| hourHandOppositeLength | The length of the part of an hour hand on the opposite side the hand is pointing to, in %. | `10` | `20` |
| hourHandWidth | Hour hand width, in pixels. | `4` | `3` |
| hourMarksLength | Hour marks length, in %. | `10` | `8` |
| hourMarksWidth | Hour marks width, in pixels. | `3` | `2` |
| locale | Locale that should be used by the clock. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). | User's browser settings | `"hu-HU"` |
| minuteHandLength | Minute hand length, in %. | `70` | `80` |
| minuteHandOppositeLength | The length of the part of a minute hand on the opposite side the hand is pointing to, in %. | `10` | `20` |
| minuteHandWidth | Minute hand width, in pixels. | `2` | `3` |
| minuteMarksLength | Minute marks length, in %. | `6` | `8` |
| minuteMarksWidth | Minute marks width, in pixels. | `1` | `2` |
| renderHourMarks | Whether hour marks shall be rendered. | `true` | `false` |
| renderMinuteHand | Whether minute hand shall be rendered. | `true` | `false` |
| renderMinuteMarks | Whether minute marks shall be rendered. | `true` | `false` |
| renderNumbers | Whether numbers shall be rendered. | `false` | `true` |
| renderSecondHand | Whether second hand shall be rendered. | `true` | `false` |
| secondHandLength | Second hand length, in %. | `90` | `80` |
| secondHandOppositeLength | The length of the part of a second hand on the opposite side the hand is pointing to, in %. | `10` | `20` |
| secondHandWidth | Second hand width, in pixels. | `1` | `2` |
| size | Clock size, in pixels. | `150` | `250` |
| value | Clock value. Must be provided. | n/a | Date: `new Date()` |

@@ -113,5 +111,5 @@ ## License

<a href="mailto:kontakt@wojtekmaj.pl">kontakt@wojtekmaj.pl</a><br />
<a href="http://wojtekmaj.pl">http://wojtekmaj.pl</a>
<a href="https://wojtekmaj.pl">https://wojtekmaj.pl</a>
</td>
</tr>
</table>

@@ -7,3 +7,4 @@ import React from 'react';

import Hand from './Hand';
import Mark from './Mark';
import MinuteMark from './MinuteMark';
import HourMark from './HourMark';

@@ -20,2 +21,3 @@ import {

className,
formatHour,
hourHandLength = 50,

@@ -26,2 +28,3 @@ hourHandOppositeLength,

hourMarksWidth = 3,
locale,
minuteHandLength = 70,

@@ -54,3 +57,3 @@ minuteHandOppositeLength,

minuteMarks.push(
<Mark
<MinuteMark
key={`minute_${i}`}

@@ -76,6 +79,8 @@ angle={i * 6}

hourMarks.push(
<Mark
<HourMark
key={`hour_${i}`}
angle={i * 30}
formatHour={formatHour}
length={hourMarksLength}
locale={locale}
name="hour"

@@ -100,7 +105,5 @@ number={renderNumbers ? i : null}

function renderHourHandFn() {
const angle = value ? (
(getHours(value) * 30)
+ (getMinutes(value) / 2)
+ (getSeconds(value) / 600)
) : 0;
const angle = value
? getHours(value) * 30 + getMinutes(value) / 2 + getSeconds(value) / 600
: 0;

@@ -123,7 +126,5 @@ return (

const angle = value ? (
(getHours(value) * 360)
+ (getMinutes(value) * 6)
+ (getSeconds(value) / 10)
) : 0;
const angle = value
? getHours(value) * 360 + getMinutes(value) * 6 + getSeconds(value) / 10
: 0;

@@ -146,6 +147,3 @@ return (

const angle = value ? (
(getMinutes(value) * 360)
+ (getSeconds(value) * 6)
) : 0;
const angle = value ? getMinutes(value) * 360 + getSeconds(value) * 6 : 0;

@@ -181,6 +179,4 @@ return (

Clock.propTypes = {
className: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.string),
]),
className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
formatHour: PropTypes.func,
hourHandLength: isHandLength,

@@ -191,2 +187,3 @@ hourHandOppositeLength: isOppositeHandLength,

hourMarksWidth: isMarkWidth,
locale: PropTypes.string,
minuteHandLength: isHandLength,

@@ -206,6 +203,3 @@ minuteHandOppositeLength: isOppositeHandLength,

size: PropTypes.number,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(Date),
]),
value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
};

@@ -6,10 +6,6 @@ import React from 'react';

/* eslint-disable comma-dangle */
describe('Clock', () => {
describe('<time> element', () => {
it('is rendered properly', () => {
const component = shallow(
<Clock />
);
const component = shallow(<Clock />);

@@ -22,5 +18,3 @@ const time = component.find('time');

it('has 150px size by default', () => {
const component = shallow(
<Clock />
);
const component = shallow(<Clock />);

@@ -36,5 +30,3 @@ const time = component.find('time');

const component = shallow(
<Clock size={size} />
);
const component = shallow(<Clock size={size} />);

@@ -50,5 +42,3 @@ const time = component.find('time');

const component = shallow(
<Clock value={date} />
);
const component = shallow(<Clock value={date} />);

@@ -63,5 +53,3 @@ const time = component.find('time');

const component = shallow(
<Clock value={date} />
);
const component = shallow(<Clock value={date} />);

@@ -76,5 +64,3 @@ const time = component.find('time');

it('is rendered properly', () => {
const component = shallow(
<Clock />
);
const component = shallow(<Clock />);

@@ -87,11 +73,7 @@ const face = component.find('.react-clock__face');

it('has hour and minute marks by default', () => {
const component = mount(
<Clock />
);
const component = shallow(<Clock />);
const marks = component.find('.react-clock__mark');
const hourMarks = component.find('.react-clock__hour-mark');
const minuteMarks = component.find('.react-clock__minute-mark');
const hourMarks = component.find('HourMark');
const minuteMarks = component.find('MinuteMark');
expect(marks).toHaveLength(60);
expect(hourMarks).toHaveLength(12);

@@ -102,36 +84,36 @@ expect(minuteMarks).toHaveLength(60 - 12);

it('does not have hour numbers rendered by default', () => {
const component = mount(
<Clock />
);
const component = shallow(<Clock />);
const hourMarkNumbers = component.find('.react-clock__mark__number');
const hourMarks = component.find('HourMark');
expect(hourMarkNumbers).toHaveLength(0);
expect(hourMarks.at(0).prop('number')).toBeFalsy();
});
it('has hour numbers given renderNumbers flag', () => {
const component = mount(
<Clock renderNumbers />
);
const component = shallow(<Clock renderNumbers />);
const hourMarks = component.find('.react-clock__hour-mark');
const hourMarks = component.find('HourMark');
hourMarks.forEach((hourMark, index) => {
const hourMarkNumber = hourMark.find('.react-clock__mark__number');
const hourMarkNumber = hourMark.prop('number');
expect(hourMarkNumber).toHaveLength(1);
expect(hourMarkNumber.text()).toBe(`${index + 1}`);
expect(hourMarkNumber).toBe(index + 1);
});
});
it('passes formatHour to HourMark components', () => {
const formatHour = () => 'H';
const component = shallow(<Clock formatHour={formatHour} renderNumbers />);
const hourMarks = component.find('HourMark');
expect(hourMarks.at(0).prop('formatHour')).toBe(formatHour);
});
it('has only minute marks when renderHourMarks is false', () => {
const component = mount(
<Clock renderHourMarks={false} />
);
const component = shallow(<Clock renderHourMarks={false} />);
const marks = component.find('.react-clock__mark');
const hourMarks = component.find('.react-clock__hour-mark');
const minuteMarks = component.find('.react-clock__minute-mark');
const hourMarks = component.find('HourMark');
const minuteMarks = component.find('MinuteMark');
expect(marks).toHaveLength(60);
expect(hourMarks).toHaveLength(0);

@@ -142,11 +124,7 @@ expect(minuteMarks).toHaveLength(60);

it('has only hour marks when renderMinuteMarks is false', () => {
const component = mount(
<Clock renderMinuteMarks={false} />
);
const component = shallow(<Clock renderMinuteMarks={false} />);
const marks = component.find('.react-clock__mark');
const hourMarks = component.find('.react-clock__hour-mark');
const minuteMarks = component.find('.react-clock__minute-mark');
const hourMarks = component.find('HourMark');
const minuteMarks = component.find('MinuteMark');
expect(marks).toHaveLength(12);
expect(hourMarks).toHaveLength(12);

@@ -157,12 +135,9 @@ expect(minuteMarks).toHaveLength(0);

it('has no marks when renderHourMarks and renderMinuteMarks are false', () => {
const component = mount(
<Clock
renderHourMarks={false}
renderMinuteMarks={false}
/>
);
const component = shallow(<Clock renderHourMarks={false} renderMinuteMarks={false} />);
const marks = component.find('.react-clock__mark');
const hourMarks = component.find('HourMark');
const minuteMarks = component.find('MinuteMark');
expect(marks).toHaveLength(0);
expect(hourMarks).toHaveLength(0);
expect(minuteMarks).toHaveLength(0);
});

@@ -178,10 +153,8 @@ });

const getDeg = transform => parseFloat(transform.match(/rotate\(([0-9.]*)deg\)/)[1]);
const getAngle = hand => getDeg(hand.prop('style').transform) % 360;
const getDeg = (transform) => parseFloat(transform.match(/rotate\(([0-9.]*)deg\)/)[1]);
const getAngle = (hand) => getDeg(hand.prop('style').transform) % 360;
describe('hour hand', () => {
it('is rendered properly', () => {
const component = mount(
<Clock />
);
const component = mount(<Clock />);

@@ -198,9 +171,7 @@ const face = component.find('.react-clock__hour-hand');

const component = mount(
<Clock value={date} />
);
const component = mount(<Clock value={date} />);
const hand = component.find('.react-clock__hour-hand');
expect(getAngle(hand)).toBeCloseTo((hour * hourAngle) + (minute * hourMinuteAngle));
expect(getAngle(hand)).toBeCloseTo(hour * hourAngle + minute * hourMinuteAngle);
});

@@ -211,5 +182,3 @@ });

it('is rendered properly', () => {
const component = mount(
<Clock />
);
const component = mount(<Clock />);

@@ -222,5 +191,3 @@ const face = component.find('.react-clock__minute-hand');

it('is not rendered when renderMinuteHand is false', () => {
const component = mount(
<Clock renderMinuteHand={false} />
);
const component = mount(<Clock renderMinuteHand={false} />);

@@ -238,9 +205,7 @@ const face = component.find('.react-clock__minute-hand');

const component = mount(
<Clock value={date} />
);
const component = mount(<Clock value={date} />);
const hand = component.find('.react-clock__minute-hand');
expect(getAngle(hand)).toBeCloseTo((minute * minuteAngle) + (second * minuteSecondAngle));
expect(getAngle(hand)).toBeCloseTo(minute * minuteAngle + second * minuteSecondAngle);
});

@@ -251,5 +216,3 @@ });

it('is rendered properly', () => {
const component = mount(
<Clock />
);
const component = mount(<Clock />);

@@ -262,5 +225,3 @@ const face = component.find('.react-clock__second-hand');

it('is not rendered when renderSecondHand is false', () => {
const component = mount(
<Clock renderSecondHand={false} />
);
const component = mount(<Clock renderSecondHand={false} />);

@@ -278,5 +239,3 @@ const face = component.find('.react-clock__second-hand');

const component = mount(
<Clock value={date} />
);
const component = mount(<Clock value={date} />);

@@ -283,0 +242,0 @@ const hand = component.find('.react-clock__second-hand');

@@ -6,9 +6,3 @@ import React from 'react';

export default function Hand({
angle = 0,
name,
length = 100,
oppositeLength = 10,
width = 1,
}) {
export default function Hand({ angle = 0, name, length = 100, oppositeLength = 10, width = 1 }) {
return (

@@ -25,4 +19,4 @@ <div

width: `${width}px`,
top: `${50 - (length / 2)}%`,
bottom: `${50 - (oppositeLength / 2)}%`,
top: `${50 - length / 2}%`,
bottom: `${50 - oppositeLength / 2}%`,
}}

@@ -29,0 +23,0 @@ />

@@ -6,9 +6,5 @@ import React from 'react';

/* eslint-disable comma-dangle */
describe('Hand', () => {
it('renders a hand with given name', () => {
const component = shallow(
<Hand name="minute" />
);
const component = shallow(<Hand name="minute" />);

@@ -23,5 +19,3 @@ const hand = component.find('.react-clock__hand');

it('renders hand angled at 0° by default', () => {
const component = shallow(
<Hand name="minute" />
);
const component = shallow(<Hand name="minute" />);

@@ -34,5 +28,3 @@ const hand = component.find('.react-clock__hand');

it('renders properly angled hand given angle prop', () => {
const component = shallow(
<Hand angle={15} name="minute" />
);
const component = shallow(<Hand angle={15} name="minute" />);

@@ -45,5 +37,3 @@ const hand = component.find('.react-clock__hand');

it('renders hand with 100% length by default', () => {
const component = shallow(
<Hand name="minute" />
);
const component = shallow(<Hand name="minute" />);

@@ -56,5 +46,3 @@ const handBody = component.find('.react-clock__hand__body');

it('renders hand with proper length given length prop', () => {
const component = shallow(
<Hand length={50} name="minute" />
);
const component = shallow(<Hand length={50} name="minute" />);

@@ -67,5 +55,3 @@ const handBody = component.find('.react-clock__hand__body');

it('renders hand with 10% oppositeLength by default', () => {
const component = shallow(
<Hand name="minute" />
);
const component = shallow(<Hand name="minute" />);

@@ -78,5 +64,3 @@ const handBody = component.find('.react-clock__hand__body');

it('renders hand with proper oppositeLength given oppositeLength prop', () => {
const component = shallow(
<Hand name="minute" oppositeLength={50} />
);
const component = shallow(<Hand name="minute" oppositeLength={50} />);

@@ -89,5 +73,3 @@ const handBody = component.find('.react-clock__hand__body');

it('renders hand with 1px width by default', () => {
const component = shallow(
<Hand name="minute" />
);
const component = shallow(<Hand name="minute" />);

@@ -100,5 +82,3 @@ const handBody = component.find('.react-clock__hand__body');

it('renders hand with proper width given length prop', () => {
const component = shallow(
<Hand name="minute" width={5} />
);
const component = shallow(<Hand name="minute" width={5} />);

@@ -105,0 +85,0 @@ const handBody = component.find('.react-clock__hand__body');

@@ -6,9 +6,3 @@ import React from 'react';

export default function Mark({
angle = 0,
length = 10,
name,
width = 1,
number,
}) {
export default function Mark({ angle = 0, length = 10, name, width = 1, number }) {
return (

@@ -26,3 +20,3 @@ <div

top: 0,
bottom: `${100 - (length / 2)}%`,
bottom: `${100 - length / 2}%`,
}}

@@ -49,4 +43,4 @@ />

name: PropTypes.string.isRequired,
number: PropTypes.number,
number: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
width: isMarkWidth,
};

@@ -6,9 +6,5 @@ import React from 'react';

/* eslint-disable comma-dangle */
describe('Mark', () => {
it('renders a hand with given name', () => {
const component = shallow(
<Mark name="minute" />
);
const component = shallow(<Mark name="minute" />);

@@ -23,5 +19,3 @@ const mark = component.find('.react-clock__mark');

it('renders mark angled at 0° by default', () => {
const component = shallow(
<Mark name="minute" />
);
const component = shallow(<Mark name="minute" />);

@@ -34,5 +28,3 @@ const mark = component.find('.react-clock__mark');

it('renders properly angled mark given angle prop', () => {
const component = shallow(
<Mark angle={15} name="minute" />
);
const component = shallow(<Mark angle={15} name="minute" />);

@@ -45,5 +37,3 @@ const mark = component.find('.react-clock__mark');

it('renders mark with 10% length by default', () => {
const component = shallow(
<Mark name="minute" />
);
const component = shallow(<Mark name="minute" />);

@@ -56,5 +46,3 @@ const markBody = component.find('.react-clock__mark__body');

it('renders mark with proper length given length prop', () => {
const component = shallow(
<Mark length={50} name="minute" />
);
const component = shallow(<Mark length={50} name="minute" />);

@@ -67,5 +55,3 @@ const markBody = component.find('.react-clock__mark__body');

it('renders mark with 1px width by default', () => {
const component = shallow(
<Mark name="minute" />
);
const component = shallow(<Mark name="minute" />);

@@ -78,5 +64,3 @@ const markBody = component.find('.react-clock__mark__body');

it('renders mark with proper length given length prop', () => {
const component = shallow(
<Mark name="minute" width={5} />
);
const component = shallow(<Mark name="minute" width={5} />);

@@ -89,5 +73,3 @@ const markBody = component.find('.react-clock__mark__body');

it('renders number given number prop', () => {
const component = shallow(
<Mark name="minute" number={1} />
);
const component = shallow(<Mark name="minute" number={1} />);

@@ -100,5 +82,3 @@ const markNumber = component.find('.react-clock__mark__number');

it('renders number angled at 0° by default', () => {
const component = shallow(
<Mark name="minute" number={1} />
);
const component = shallow(<Mark name="minute" number={1} />);

@@ -111,5 +91,3 @@ const markNumber = component.find('.react-clock__mark__number');

it('renders properly angled mark given angle prop', () => {
const component = shallow(
<Mark angle={15} name="minute" number={1} />
);
const component = shallow(<Mark angle={15} name="minute" number={1} />);

@@ -116,0 +94,0 @@ const markNumber = component.find('.react-clock__mark__number');

@@ -8,7 +8,11 @@ import { isDefined } from './utils';

if (typeof value !== 'number') {
return new Error(`Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, expected \`number\`.`);
return new Error(
`Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, expected \`number\`.`,
);
}
if (value < min || value > max) {
return new Error(`Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, length must be between ${min} and ${max}.`);
return new Error(
`Invalid prop \`${propName}\` of type \`${typeof value}\` supplied to \`${componentName}\`, length must be between ${min} and ${max}.`,
);
}

@@ -30,7 +34,11 @@ }

if (typeof width !== 'number') {
return new Error(`Invalid prop \`${propName}\` of type \`${typeof width}\` supplied to \`${componentName}\`, expected \`number\`.`);
return new Error(
`Invalid prop \`${propName}\` of type \`${typeof width}\` supplied to \`${componentName}\`, expected \`number\`.`,
);
}
if (width < 0) {
return new Error(`Invalid prop \`${propName}\` of type \`${typeof width}\` supplied to \`${componentName}\`, width must be greater or equal to 0.`);
return new Error(
`Invalid prop \`${propName}\` of type \`${typeof width}\` supplied to \`${componentName}\`, width must be greater or equal to 0.`,
);
}

@@ -37,0 +45,0 @@ }

@@ -1,3 +0,1 @@

/* eslint-disable import/prefer-default-export */
/**

@@ -8,2 +6,4 @@ * Checks whether a variable is defined.

*/
export const isDefined = variable => typeof variable !== 'undefined';
export function isDefined(variable) {
return typeof variable !== 'undefined';
}

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