react-live-clock - npm Package Compare versions

Comparing version 1.1.1 to 2.0.0

bower.json

@@ -0,0 +0,0 @@ {

lib/Component.js

@@ -17,10 +17,8 @@ 'use strict';
 
-var _dateformat = require('dateformat');
+var _moment = require('moment/moment');
 
-var _dateformat2 = _interopRequireDefault(_dateformat);
+var _moment2 = _interopRequireDefault(_moment);
 
-var _loaded = require('timezone/loaded');
+require('moment-timezone');
 
-var _loaded2 = _interopRequireDefault(_loaded);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -76,6 +74,10 @@
       var dateValue = getDate(date || children);
-      var utc = (0, _loaded2.default)(dateValue);
-      var localizedTime = (0, _loaded2.default)(utc, '%x %X', 'en_US', timezone);
-      var formattedTime = (0, _dateformat2.default)(new Date(localizedTime), format);
+      var localizedTime = (0, _moment2.default)(dateValue);
 
+      if (timezone) {
+        localizedTime.tz(timezone);
+      }
+
+      var formattedTime = localizedTime.format(format);
+
       return _react2.default.createElement(
@@ -108,3 +110,3 @@ 'time',
   date: null,
-  format: 'HH:MM',
+  format: 'HH:mm',
   interval: 1000,
@@ -111,0 +113,0 @@ ticking: false,

package-scripts.js

@@ -0,0 +0,0 @@ const pathTo = require('path').join.bind(null, process.cwd());

package.json

 {
   "name": "react-live-clock",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "React Live Clock",
@@ -44,6 +44,6 @@ "main": "lib/index.js",
   "dependencies": {
-    "dateformat": "2.0.0",
-    "prop-types": "15.5.10",
-    "timezone": "1.0.6"
+    "moment": "2.18.1",
+    "moment-timezone": "0.5.13",
+    "prop-types": "15.5.10"
   }
 }

README.md

@@ -31,3 +31,3 @@ # react-live-clock [![npm](https://img.shields.io/npm/v/react-live-clock.svg?style=flat-square)](https://www.npmjs.com/package/react-live-clock)
     render() {
-        <Clock format={'HH:MM:ss'} ticking={true} timezone={'US/Pacific'} />
+        <Clock format={'HH:mm:ss'} ticking={true} timezone={'US/Pacific'} />
     }
@@ -48,3 +48,3 @@ }
 
-you can use any formatting from [node-dateformat](https://github.com/felixge/node-dateformat) date library
+you can use any formatting from [moment.js](https://momentjs.com/docs/#/displaying/format/) date library
 
@@ -56,3 +56,3 @@ ### Properties
 | `date`     | timestamp or string | currrent date | Date to output, If nothing is set then it take current date. |
-| `format`   | string              | 'HH:MM'       | Formatting from [node-dateformat](https://github.com/felixge/node-dateformat) library.
+| `format`   | string              | 'HH:MM'       | Formatting from [moment.js](https://momentjs.com/docs/#/displaying/format/) library.
 | `timezone` | string              | null          | If timezone is set, the date is show in this timezone. You can find the list. [here](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones), the TZ column.
@@ -59,0 +59,0 @@ | `ticking`  | boolean             | false         | If you want the clock to be auto-updated every `inteval` seconds.

src/Component.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import dateFormat from 'dateformat';
-import tz from 'timezone/loaded';
+import moment from 'moment/moment';
+import 'moment-timezone';
 
@@ -26,6 +26,10 @@ const getDate = date => date ? new Date(date).getTime() : new Date().getTime();
     const dateValue = getDate(date || children);
-    const utc = tz(dateValue);
-    const localizedTime = tz(utc, '%x %X', 'en_US', timezone);
-    const formattedTime = dateFormat(new Date(localizedTime), format);
+    const localizedTime = moment(dateValue);
 
+    if (timezone) {
+      localizedTime.tz(timezone);
+    }
+
+    const formattedTime = localizedTime.format(format);
+
     return (
@@ -53,3 +57,3 @@ <time className={className}>{ formattedTime }</time>
   date: null,
-  format: 'HH:MM',
+  format: 'HH:mm',
   interval: 1000,
@@ -56,0 +60,0 @@ ticking: false,

src/example/App/index.js

 import React from 'react';
-import Highlight from 'react-highlight.js'
+import Highlight from 'react-highlight.js';
 import Clock from '../..';
@@ -44,7 +44,7 @@ import css from './App.css';
       className={css.ukFormat}
-      format={'h:MM:sstt'}
+      format={'h:mm:ssa'}
       ticking={true} />`}>
       <Clock
         className={css.ukFormat}
-        format={'h:MM:sstt'}
+        format={'h:mm:ssa'}
         ticking={true} />
@@ -56,7 +56,7 @@ </Panel>
       code={`<Clock
-        format={'HH:MM:ss'}
+        format={'HH:mm:ss'}
         ticking={true}
         timezone={'US/Pacific'} />`}>
       <Clock
-        format={'HH:MM:ss'}
+        format={'HH:mm:ss'}
         ticking={true}
@@ -70,6 +70,6 @@ timezone={'US/Pacific'} />
         date={'1997-12-31T14:15:23+01:00'}
-        format={'dddd, mmmm dS, yyyy, h:MM:ss TT'} />`}>
+        format={'dddd, MMMM Mo, YYYY, h:mm:ss A'} />`}>
       <Clock
         date={'1997-12-31T14:15:23+01:00'}
-        format={'dddd, mmmm dS, yyyy, h:MM:ss TT'} />
+        format={'dddd, MMMM Mo, YYYY, h:mm:ss A'} />
     </Panel>
@@ -81,7 +81,7 @@
         date={'1997-12-31T14:15:23+01:00'}
-        format={'dddd, mmmm dS, yyyy, h:MM:ss TT'}
+        format={'dddd, MMMM Mo, YYYY, h:mm:ss A'}
         timezone={'Australia/Sydney'} />`}>
       <Clock
         date={'1997-12-31T14:15:23+01:00'}
-        format={'dddd, mmmm dS, yyyy, h:MM:ss TT'}
+        format={'dddd, MMMM Mo, YYYY, h:mm:ss A'}
         timezone={'Australia/Sydney'} />
@@ -88,0 +88,0 @@ </Panel>

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Improved metrics

Lines of code

69447

increased by3.17%

Worsened metrics

Total package byte prevSize

8835707

decreased by-48.32%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

47

increased by4600%

Dependency changes

• + Addedmoment@2.18.1

• + Addedmoment-timezone@0.5.13

• + Addedmoment@2.18.1(transitive)

• + Addedmoment-timezone@0.5.13(transitive)

• - Removeddateformat@2.0.0

• - Removedtimezone@1.0.6

• - Removeddateformat@2.0.0(transitive)

• - Removedtimezone@1.0.6(transitive)