react-live-clock - npm Package Compare versions

Comparing version 4.0.5 to 5.0.0-beta1

lib/Component.js

@@ -19,123 +19,86 @@ 'use strict';
 
-var _momentTimezone = require('moment-timezone');
+var _reactMoment = require('react-moment');
 
-var _momentTimezone2 = _interopRequireDefault(_momentTimezone);
+var _reactMoment2 = _interopRequireDefault(_reactMoment);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var BASE_UNIT = 'milliseconds';
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
 function ReactLiveClock(props) {
-  var formatTime = function formatTime(time) {
-    var filter = props.filter,
-        format = props.format,
-        timezone = props.timezone;
+  var timezone = props.timezone,
+      date = props.date,
+      format = props.format,
+      interval = props.interval,
+      ticking = props.ticking,
+      onChange = props.onChange,
+      blinking = props.blinking;
 
-
-    if (timezone) {
-      time.tz(timezone);
-    }
-
-    var formattedTime = time.format(format);
-    var filteredTime = filter(formattedTime);
-
-    return filteredTime;
-  };
-
-  var date = props.date || props.children || null;
-  var timestamp = (0, _momentTimezone2.default)();
-  var InitialBaseTime = date ? (0, _momentTimezone2.default)(new Date(date).getTime()) : timestamp;
-
-  var realTime = !date;
-  var now = InitialBaseTime;
-  var baseTime = InitialBaseTime;
-  var startTime = timestamp;
-
-  var _useState = (0, _react.useState)(formatTime(now)),
+  var _useState = (0, _react.useState)(Date.now()),
       _useState2 = _slicedToArray(_useState, 2),
-      formattedString = _useState2[0],
-      setFormattedString = _useState2[1];
+      currentTime = _useState2[0],
+      setCurrentTime = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(format),
       _useState4 = _slicedToArray(_useState3, 2),
-      tickTimer = _useState4[0],
-      setTickTimer = _useState4[1];
+      formatToUse = _useState4[0],
+      setFormatToUse = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      mounted = _useState6[0],
-      setMounted = _useState6[1];
+  var colonOn = true;
 
-  var childProps = Object.keys(props).filter(function (key) {
-    return !['date', 'interval', 'ticking', 'filter', 'format', 'timezone'].includes(key);
-  }).reduce(function (acc, key) {
-    acc[key] = props[key];
-    return acc;
-  }, {});
+  function reverseString(str) {
+    var splitString = str.split('');
+    var reverseArray = splitString.reverse();
+    var joinArray = reverseArray.join('');
 
-  var clearMyInterval = function clearMyInterval(interval) {
-    if (interval) {
-      clearInterval(tickTimer);
-    }
-  };
+    return joinArray;
+  }
 
-  var updateClock = function updateClock() {
-    var onChange = props.onChange;
+  (0, _react.useEffect)(function () {
+    if (ticking || blinking) {
+      var tick = setInterval(function () {
+        var now = Date.now();
 
-    var newNow = void 0;
+        if (blinking) {
+          if (colonOn) {
+            var newFormat = reverseString(format);
 
-    if (realTime) {
-      newNow = (0, _momentTimezone2.default)();
-    } else {
-      var newTime = (0, _momentTimezone2.default)();
-      var diff = newTime.diff(startTime, BASE_UNIT);
+            newFormat = newFormat.replace(':', ' ');
+            newFormat = reverseString(newFormat);
 
-      newNow = baseTime.clone().add(diff, BASE_UNIT);
-    }
+            colonOn = false;
+            setFormatToUse(newFormat);
+          } else {
+            setFormatToUse(format);
+            colonOn = true;
+          }
+        }
 
-    var newFormattedTime = formatTime(newNow);
-    var formattedTime = formatTime(now);
+        if (ticking) {
+          setCurrentTime(now);
+        }
 
-    if (newFormattedTime !== formattedTime) {
-      onChange({
-        moment: newNow,
-        output: formattedTime,
-        previousOutput: formattedString
-      });
-      if (mounted) {
-        setFormattedString(newFormattedTime);
-      }
-    }
-
-    now = newNow;
-  };
-
-  (0, _react.useEffect)(function () {
-    setMounted(true);
-  }, []);
-
-  (0, _react.useEffect)(function () {
-    var ticking = props.ticking,
-        interval = props.interval;
-
-
-    if (ticking || interval) {
-      if (tickTimer) {
-        clearMyInterval(tickTimer);
-      }
-      var intervalId = setInterval(function () {
-        return updateClock();
+        if (typeof onChange === 'function') {
+          onChange(now);
+        }
       }, interval);
 
-      setTickTimer(intervalId);
+      return function () {
+        return clearInterval(tick);
+      };
     }
+
     return function () {
-      return clearMyInterval(tickTimer);
+      return true;
     };
-  }, [mounted]);
+  }, [].concat(_toConsumableArray(props)));
 
   return _react2.default.createElement(
-    'time',
-    childProps,
-    formattedString
+    _reactMoment2.default,
+    {
+      date: date,
+      format: formatToUse,
+      tz: timezone
+    },
+    currentTime
   );
@@ -145,4 +108,4 @@ }
 ReactLiveClock.propTypes = {
-  children: _propTypes2.default.string,
   date: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
+  blinking: _propTypes2.default.bool,
   format: _propTypes2.default.string,
@@ -152,3 +115,2 @@ interval: _propTypes2.default.number,
   timezone: _propTypes2.default.string,
-  filter: _propTypes2.default.func,
   onChange: _propTypes2.default.func
@@ -159,2 +121,3 @@ };
   date: null,
+  blinking: false,
   format: 'HH:mm',
@@ -164,8 +127,3 @@ interval: 1000,
   timezone: null,
-  filter: function filter(date) {
-    return date;
-  },
-  onChange: function onChange(date) {
-    return date;
-  }
+  onChange: false
 };

package.json

 {
   "name": "react-live-clock",
-  "version": "4.0.5",
+  "version": "5.0.0-beta1",
   "description": "React Live Clock",
@@ -37,7 +37,10 @@ "main": "lib/index.js",
   "peerDependencies": {
-    "react": "^16.8"
+    "react": "^16.8",
+    "react-moment": "0.9.7"
   },
   "devDependencies": {
     "cf-react-component-template": "0.1.8",
-    "react": "16.12.0",
+    "moment-timezone": "0.5.31",
+    "prop-types": "15.7.2",
+    "react": "16.13.1",
     "react-component-template": "0.1.10",
@@ -47,10 +50,5 @@ "react-dom": "16.12.0",
     "react-highlight.js": "1.0.7",
+    "react-moment": "0.9.7",
     "react-router-dom": "5.1.2"
-  },
-  "dependencies": {
-    "moment": "2.24.0",
-    "moment-timezone": "0.5.27",
-    "prop-types": "15.7.2",
-    "react-moment": "0.9.7"
   }
 }

src/Component.js

 import React, {useState, useEffect} from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment-timezone';
+import Moment from 'react-moment';
 
-const BASE_UNIT = 'milliseconds';
-
 export default function ReactLiveClock(props) {
-  const formatTime = time => {
-    const {filter, format, timezone} = props;
+  const {timezone, date, format, interval, ticking, onChange, blinking} = props;
+  const [currentTime, setCurrentTime] = useState(Date.now());
+  const [formatToUse, setFormatToUse] = useState(format);
+  let colonOn = true;
 
-    if (timezone) {
-      time.tz(timezone);
-    }
 
-    const formattedTime = time.format(format);
-    const filteredTime = filter(formattedTime);
+  function reverseString(str) {
+    const splitString = str.split('');
+    const reverseArray = splitString.reverse();
+    const joinArray = reverseArray.join('');
 
-    return filteredTime;
-  };
+    return joinArray;
+  }
 
+  useEffect(() => {
+    if (ticking || blinking) {
+      const tick = setInterval(() => {
+        const now = Date.now();
 
-  const date = props.date || props.children || null;
-  const timestamp = moment();
-  const InitialBaseTime = date ? moment(new Date(date).getTime()) : timestamp;
+        if (blinking) {
+          if (colonOn) {
+            let newFormat = reverseString(format);
 
-  const realTime = !date;
-  let now = InitialBaseTime;
-  const baseTime = InitialBaseTime;
-  const startTime = timestamp;
-  const [formattedString, setFormattedString] = useState(formatTime(now));
-  const [tickTimer, setTickTimer] = useState(false);
-  const [mounted, setMounted] = useState(false);
+            newFormat = newFormat.replace(':', ' ');
+            newFormat = reverseString(newFormat);
 
-  const childProps = Object.keys(props)
-  .filter(key => !['date', 'interval', 'ticking', 'filter', 'format', 'timezone'].includes(key))
-  .reduce((acc, key) => {
-    acc[key] = props[key];
-    return acc;
-  }, {});
+            colonOn = false;
+            setFormatToUse(newFormat);
+          } else {
+            setFormatToUse(format);
+            colonOn = true;
+          }
+        }
 
-  const clearMyInterval = interval => {
-    if (interval) {
-      clearInterval(tickTimer);
-    }
-  };
+        if (ticking) {
+          setCurrentTime(now);
+        }
 
-  const updateClock = () => {
-    const {onChange} = props;
-    let newNow;
+        if (typeof onChange === 'function') {
+          onChange(now);
+        }
+      }, interval);
 
-    if (realTime) {
-      newNow = moment();
-    } else {
-      const newTime = moment();
-      const diff = newTime.diff(startTime, BASE_UNIT);
-
-      newNow = baseTime.clone().add(diff, BASE_UNIT);
+      return () => clearInterval(tick);
     }
 
-    const newFormattedTime = formatTime(newNow);
-    const formattedTime = formatTime(now);
+    return () => true;
+  }, [...props]);
 
-    if (newFormattedTime !== formattedTime) {
-      onChange({
-        moment: newNow,
-        output: formattedTime,
-        previousOutput: formattedString
-      });
-      if (mounted) {
-        setFormattedString(newFormattedTime);
-      }
-    }
 
-    now = newNow;
-  };
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  useEffect(() => {
-    const {ticking, interval} = props;
-
-    if (ticking || interval) {
-      if (tickTimer) {
-        clearMyInterval(tickTimer);
-      }
-      const intervalId = setInterval(() => updateClock(), interval);
-
-      setTickTimer(intervalId);
-    }
-    return () => clearMyInterval(tickTimer);
-  }, [mounted]);
-
-
   return (
-    <time {...childProps} >
-      { formattedString }
-    </time>
+    <Moment
+      date={date}
+      format={formatToUse}
+      tz={timezone}
+    >
+      {currentTime}
+    </Moment>
   );
@@ -104,3 +68,2 @@ }
 ReactLiveClock.propTypes = {
-  children: PropTypes.string,
   date: PropTypes.oneOfType([
@@ -110,2 +73,3 @@ PropTypes.number,
   ]),
+  blinking: PropTypes.bool,
   format: PropTypes.string,
@@ -115,3 +79,2 @@ interval: PropTypes.number,
   timezone: PropTypes.string,
-  filter: PropTypes.func,
   onChange: PropTypes.func
@@ -122,2 +85,3 @@ };
   date: null,
+  blinking: false,
   format: 'HH:mm',
@@ -127,4 +91,3 @@ interval: 1000,
   timezone: null,
-  filter: date => date,
-  onChange: date => date
+  onChange: false
 };

src/example/App/index.js

@@ -149,3 +149,3 @@ import React from 'react';
 
-    <Panel
+    {/* <Panel
       code={`
@@ -164,9 +164,9 @@ <Clock
         timezone={'Australia/Sydney'} />
-    </Panel>
+    </Panel> */}
 
-    <Panel
+    {/* <Panel
       code="<Clock filter={date => date.replace('8', '7a')} format={'HH:mm:ss'} ticking={true} />"
       title="Filter the value before output.">
       <Clock filter={date => date.replace('8', '7a')} format={'HH:mm:ss'} ticking={true} />
-    </Panel>
+    </Panel> */}
 
@@ -179,3 +179,3 @@ <Panel
         onChange={date =>
-          console.log(date.output) // eslint-disable-line no-console
+          console.log(date) // eslint-disable-line no-console
         }
@@ -188,3 +188,18 @@ ticking={true} />
       code="
-        <Clock format={'HH:mm:ss a'} />
+        <Clock blinking={true} format={'HH:mm:ss'} />
+        <Clock blinking={true} format={'HH:mm'} />
+      "
+      title="Blinking">
+      <Clock
+        blinking={true}
+        format={'HH:mm:ss'} />
+      <br />
+      <Clock
+        blinking={true}
+        format={'HH:mm'} />
+    </Panel>
+
+    <Panel
+      code="
+        <Clock format={'HH:mm:ss a'} ticking={true} />
         <br />
@@ -194,3 +209,3 @@ <button onClick={() => moment.locale('el')}>Make Greek</button>
       title="Change the language on the fly">
-      <Clock format={'HH:mm:ss a'} />
+      <Clock format={'HH:mm:ss a'} ticking={true} />
       <br />
@@ -197,0 +212,0 @@ <button onClick={() => moment.locale('el')}>Make it Greek!</button>

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

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

Improved metrics

Dependency count

2

decreased by-60%

Lines of code

79293

increased by2.61%

Number of low supply chain risk alerts

2

decreased by-95.83%

Worsened metrics

Total package byte prevSize

7444048

decreased by-22.98%

Dev dependency count

10

increased by42.86%

Number of package files

28

decreased by-3.45%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedmoment@2.30.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• - Removedmoment@2.24.0

• - Removedmoment-timezone@0.5.27

• - Removedprop-types@15.7.2

• - Removedreact-moment@0.9.7

• - Removedmoment@2.24.0(transitive)

• - Removedmoment-timezone@0.5.27(transitive)

• - Removedprop-types@15.7.2(transitive)