@leenguyen/react-flip-clock-countdown - npm Package Compare versions

Comparing version 1.0.5 to 1.1.0

dist/FlipClockCountDown.d.ts

@@ -15,9 +15,10 @@ import React from 'react';
 export declare type FlipClockCountdownTimeDeltaFn = (props: FlipClockCountdownState) => void;
-export interface FlipClockCountdownProps {
+export interface FlipClockCountdownProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     readonly to: Date | number | string;
-    readonly children?: React.ReactElement<any>;
-    readonly className?: string;
+    /**
+     * @deprecated
+     */
     readonly containerProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-    readonly onComplete?: () => void;
-    readonly onTick?: FlipClockCountdownTimeDeltaFn;
+    readonly onComplete: () => void;
+    readonly onTick: FlipClockCountdownTimeDeltaFn;
 }
@@ -37,2 +38,8 @@ export interface FlipClockCountdownTimeDeltaFormatted {
 declare function FlipClockCountdown(props: FlipClockCountdownProps): JSX.Element;
+declare namespace FlipClockCountdown {
+    var defaultProps: {
+        onComplete: () => void;
+        onTick: () => void;
+    };
+}
 export default FlipClockCountdown;

dist/index.js

 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var React = _interopDefault(require('react'));
+var React = require('react');
+var React__default = _interopDefault(React);
 var clsx = _interopDefault(require('clsx'));
@@ -24,2 +25,17 @@
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 function calcTimeDelta(target) {
@@ -79,3 +95,3 @@ var date = new Date(target);
 
-  var _React$useState = React.useState({
+  var _React$useState = React__default.useState({
     current: current,
@@ -87,7 +103,7 @@ next: next
 
-  var _React$useState2 = React.useState(false),
+  var _React$useState2 = React__default.useState(false),
       flipped = _React$useState2[0],
       setFlipped = _React$useState2[1];
 
-  React.useEffect(function () {
+  React__default.useEffect(function () {
     if (digit.current !== current) {
@@ -114,14 +130,14 @@ if (digit.current === digit.next) {
 
-  return React.createElement("div", {
+  return React__default.createElement("div", {
     className: clsx(styles.fcc__digit_block, className)
-  }, React.createElement("div", {
+  }, React__default.createElement("div", {
     className: styles.fcc__next_above
-  }, digit.next), React.createElement("div", {
+  }, digit.next), React__default.createElement("div", {
     className: styles.fcc__current_below
-  }, digit.current), React.createElement("div", {
+  }, digit.current), React__default.createElement("div", {
     className: clsx(styles.fcc__card, (_clsx = {}, _clsx[styles.fcc__flipped] = flipped, _clsx)),
     onTransitionEnd: handleTransitionEnd
-  }, React.createElement("div", {
+  }, React__default.createElement("div", {
     className: clsx(styles.fcc__card_face, styles.fcc__card_face_front)
-  }, digit.current), React.createElement("div", {
+  }, digit.current), React__default.createElement("div", {
     className: clsx(styles.fcc__card_face, styles.fcc__card_face_back)
@@ -131,24 +147,17 @@ }, digit.next)));
 
+var _excluded = ["to", "className", "children", "onComplete", "onTick"];
+
 function FlipClockCountdown(props) {
   var to = props.to,
       className = props.className,
-      containerProps = props.containerProps,
       children = props.children,
-      _props$onComplete = props.onComplete,
-      onComplete = _props$onComplete === void 0 ? function () {} : _props$onComplete,
-      _props$onTick = props.onTick,
-      onTick = _props$onTick === void 0 ? function () {} : _props$onTick;
+      onComplete = props.onComplete,
+      onTick = props.onTick,
+      other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  var _React$useState = React.useState(constructState),
+  var _React$useState = React__default.useState(constructState),
       state = _React$useState[0],
       setState = _React$useState[1];
 
-  var countdownRef = React.useRef(0);
-  React.useEffect(function () {
-    clearTimer();
-    countdownRef.current = window.setInterval(tick, 1000);
-    return function () {
-      return clearTimer();
-    };
-  }, [to]);
+  var countdownRef = React__default.useRef(0);
 
@@ -178,3 +187,10 @@ function clearTimer() {
 
-  function getRenderProps() {
+  React__default.useEffect(function () {
+    clearTimer();
+    countdownRef.current = window.setInterval(tick, 1000);
+    return function () {
+      return clearTimer();
+    };
+  }, [to]);
+  var renderProps = React.useMemo(function () {
     var timeDelta = state.timeDelta;
@@ -184,9 +200,8 @@ return _extends({}, timeDelta, {
     });
-  }
+  }, [state]);
 
   if (state !== null && state !== void 0 && state.completed) {
-    return React.createElement(React.Fragment, null, children);
+    return React__default.createElement(React__default.Fragment, null, children);
   }
 
-  var renderProps = getRenderProps();
   var _renderProps$formatte = renderProps.formatted,
@@ -198,13 +213,13 @@ days = _renderProps$formatte.days,
   var labels = ['days', 'hours', 'minutes', 'seconds'];
-  return React.createElement("div", Object.assign({}, containerProps, {
+  return React__default.createElement("div", Object.assign({}, other, {
     className: clsx(styles.fcc__container, className)
   }), [days, hours, minutes, seconds].map(function (item, idx) {
-    return React.createElement(React.Fragment, {
+    return React__default.createElement(React__default.Fragment, {
       key: "digit-block-" + idx
-    }, React.createElement("div", {
+    }, React__default.createElement("div", {
       className: styles.fcc__digit_block_container
-    }, React.createElement("div", {
+    }, React__default.createElement("div", {
       className: styles.fcc__digit_block_label
     }, labels[idx]), item.current.map(function (cItem, cIdx) {
-      return React.createElement(FlipClockDigit, {
+      return React__default.createElement(FlipClockDigit, {
         key: cIdx,
@@ -214,3 +229,3 @@ current: cItem,
       });
-    })), idx < 3 && React.createElement("div", {
+    })), idx < 3 && React__default.createElement("div", {
       className: styles.fcc__colon
@@ -221,3 +236,8 @@ }, ":"));
 
+FlipClockCountdown.defaultProps = {
+  onComplete: function onComplete() {},
+  onTick: function onTick() {}
+};
+
 module.exports = FlipClockCountdown;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import clsx from 'clsx';
@@ -22,2 +22,17 @@
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 function calcTimeDelta(target) {
@@ -126,11 +141,11 @@ var date = new Date(target);
 
+var _excluded = ["to", "className", "children", "onComplete", "onTick"];
+
 function FlipClockCountdown(props) {
   var to = props.to,
       className = props.className,
-      containerProps = props.containerProps,
       children = props.children,
-      _props$onComplete = props.onComplete,
-      onComplete = _props$onComplete === void 0 ? function () {} : _props$onComplete,
-      _props$onTick = props.onTick,
-      onTick = _props$onTick === void 0 ? function () {} : _props$onTick;
+      onComplete = props.onComplete,
+      onTick = props.onTick,
+      other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -142,9 +157,2 @@ var _React$useState = React.useState(constructState),
   var countdownRef = React.useRef(0);
-  React.useEffect(function () {
-    clearTimer();
-    countdownRef.current = window.setInterval(tick, 1000);
-    return function () {
-      return clearTimer();
-    };
-  }, [to]);
 
@@ -174,3 +182,10 @@ function clearTimer() {
 
-  function getRenderProps() {
+  React.useEffect(function () {
+    clearTimer();
+    countdownRef.current = window.setInterval(tick, 1000);
+    return function () {
+      return clearTimer();
+    };
+  }, [to]);
+  var renderProps = useMemo(function () {
     var timeDelta = state.timeDelta;
@@ -180,3 +195,3 @@ return _extends({}, timeDelta, {
     });
-  }
+  }, [state]);
 
@@ -187,3 +202,2 @@ if (state !== null && state !== void 0 && state.completed) {
 
-  var renderProps = getRenderProps();
   var _renderProps$formatte = renderProps.formatted,
@@ -195,3 +209,3 @@ days = _renderProps$formatte.days,
   var labels = ['days', 'hours', 'minutes', 'seconds'];
-  return React.createElement("div", Object.assign({}, containerProps, {
+  return React.createElement("div", Object.assign({}, other, {
     className: clsx(styles.fcc__container, className)
@@ -217,3 +231,8 @@ }), [days, hours, minutes, seconds].map(function (item, idx) {
 
+FlipClockCountdown.defaultProps = {
+  onComplete: function onComplete() {},
+  onTick: function onTick() {}
+};
+
 export default FlipClockCountdown;
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "@leenguyen/react-flip-clock-countdown",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "A 3D animated countdown component for React.",
@@ -5,0 +5,0 @@ "author": "leenguyen",

README.md

@@ -108,9 +108,10 @@ # react-flip-clock-countdown
   --fcc-flip-duration: 0.5s; /* transition duration when flip card */
-  --fcc-digit-block-width: 40px; /* digit card's width */
-  --fcc-digit-block-height: 64px; /* digit card's height */
+  --fcc-digit-block-width: 40px; /* width of digit card */
+  --fcc-digit-block-height: 64px; /* height of digit card, highly recommend in even number */
   --fcc-digit-font-size: 50px; /* font size of digit */
+  --fcc-label-font-size: 16px; /* font size of label */
   --fcc-digit-color: white; /* color of digit */
-  --fcc-background: black; /* digit card's background */
-  --fcc-label-color: #ffffff; /* time label's color */
-  --fcc-divider-color: #ffffff66; /* divider's color */
+  --fcc-background: black; /* background of digit card */
+  --fcc-label-color: #ffffff; /* color of label */
+  --fcc-divider-color: #ffffff66; /* color of divider */
 }
@@ -121,11 +122,11 @@ ```
 
-| Name                                  |                   Type                    | Required |        Default         | Description                                                                                                                                                                                                                                                                              |
-| :------------------------------------ | :---------------------------------------: | :------: | :--------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [**to**](#to)                         | <code>Date&#124;string&#124;number</code> |   yes    |                        | <code>Date</code> or timestamp in the future                                                                                                                                                                                                                                             |
-| [**className**](#classname)           |            <code>string</code>            |    no    | <code>undefined</code> | Classes applied to flip clock container                                                                                                                                                                                                                                                  |
-| [**containerProps**](#containerprops) |            <code>object</code>            |    no    | <code>undefined</code> | Props applied to the flip clock container                                                                                                                                                                                                                                                |
-| [**children**](#children)             |             <code>node</code>             |    no    | <code>undefined</code> | React child component which will only be shown once the countdown is complete                                                                                                                                                                                                            |
-| [**onComplete**](#oncomplete)         |             <code>func</code>             |    no    |                        | Callback when countdown ends<br/> **Signature**:<br/>`function() => void`                                                                                                                                                                                                                |
-| [**onTick**](#ontick)                 |             <code>func</code>             |    no    |                        | Callback on every interval tick<br /> **Signature**:<br/>`function({ timeDelta, completed }) => void`<br/> - `timeDelta: { total: number, days: number, hours: number, minutes: number, seconds: number}` the remaining time in formatted <br/> - `completed: boolean` countdown's state |
+The <code>FlipClockCountdown</code> has all properties of `div` and additional props below
 
+| Name                                      |                   Type                    | Required |        Default         | Description                                                                                                                                  |
+| :---------------------------------------- | :---------------------------------------: | :------: | :--------------------: | :------------------------------------------------------------------------------------------------------------------------------------------- |
+| [**to**](#to)                             | <code>Date&#124;string&#124;number</code> |   yes    |                        | <code>Date</code> or timestamp in the future                                                                                                 |
+| [~~**containerProps**~~](#containerprops) |            <code>object</code>            |    no    | <code>undefined</code> | Props apply to the flip clock container. This prop is deprecated, you should apply directly to the <code>FlipClockCountdown</code> component |
+| [**onComplete**](#oncomplete)             |             <code>func</code>             |    no    |                        | Callback when countdown ends<br/> **Signature**:<br/>`function() => void`                                                                    |
+| [**onTick**](#ontick)                     |             <code>func</code>             |    no    |                        | Callback on every interval tick<br /> **Signature**:<br/>`function({ timeDelta, completed }) => void`                                        |
+
 ### `to`
@@ -147,3 +148,3 @@
 
-`HTMLDivElement`'s props
+All props of `div`
 
@@ -150,0 +151,0 @@ ### `children`

No alert changes

Improved metrics

Total package byte prevSize

58924

increased by0.13%

Lines of code

596

increased by6.62%

Number of lines in readme file

188

increased by0.53%

No dependency changes