react-compound-timer - npm Package Compare versions

Comparing version 1.0.11 to 1.0.12

build/components/Timer/Timer.d.ts

 import React from 'react';
 import { TimePartsType } from 'src/lib/helpers/getTimeParts';
 import { TimerStateType } from 'src/lib/models/TimerState';
+declare type FormatValueType = (value: number) => string;
+declare type TimerContextType = TimePartsType & {
+    formatValue: FormatValueType;
+};
+interface TimerValueItemProps {
+    formatValue?: FormatValueType;
+}
 interface TimerProps {
@@ -13,2 +20,4 @@ /** Timer count direction */
     startImmediately?: boolean;
+    /** Function to format all values */
+    formatValue?: (value: number) => string;
     /** Function that will be called on timer start */
@@ -36,8 +45,8 @@ onStart?: () => any;
 declare class Timer extends React.PureComponent<TimerProps, TimerState> {
-    static Consumer: React.ExoticComponent<React.ConsumerProps<TimePartsType>>;
-    static Milliseconds: () => JSX.Element;
-    static Seconds: () => JSX.Element;
-    static Minutes: () => JSX.Element;
-    static Hours: () => JSX.Element;
-    static Days: () => JSX.Element;
+    static Consumer: React.ExoticComponent<React.ConsumerProps<TimerContextType>>;
+    static Milliseconds: React.FunctionComponent<TimerValueItemProps>;
+    static Seconds: React.FunctionComponent<TimerValueItemProps>;
+    static Minutes: React.FunctionComponent<TimerValueItemProps>;
+    static Hours: React.FunctionComponent<TimerValueItemProps>;
+    static Days: React.FunctionComponent<TimerValueItemProps>;
     static defaultProps: {
@@ -51,2 +60,3 @@ timeToUpdate: number;
         children: any;
+        formatValue: (value: any) => string;
         onStart: () => void;
@@ -53,0 +63,0 @@ onResume: () => void;

build/components/Timer/Timer.js

@@ -33,41 +33,16 @@ var __extends = (this && this.__extends) || (function () {
     d: 0,
+    formatValue: function (value) { return String(value); },
 });
-var TimerValue = /** @class */ (function (_super) {
-    __extends(TimerValue, _super);
-    function TimerValue() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    TimerValue.prototype.shouldComponentUpdate = function (nextProps) {
-        var value = this.props.value;
-        if (value !== nextProps.value) {
-            return true;
-        }
-        return false;
-    };
-    TimerValue.prototype.render = function () {
-        var value = this.props.value;
-        return String(value) || null;
-    };
-    return TimerValue;
-}(React.Component));
-var Milliseconds = function () { return (React.createElement(Timer.Consumer, null, function (_a) {
-    var ms = _a.ms;
-    return React.createElement(TimerValue, { value: ms });
-})); };
-var Seconds = function () { return (React.createElement(Timer.Consumer, null, function (_a) {
-    var s = _a.s;
-    return React.createElement(TimerValue, { value: s });
-})); };
-var Minutes = function () { return (React.createElement(Timer.Consumer, null, function (_a) {
-    var m = _a.m;
-    return React.createElement(TimerValue, { value: m });
-})); };
-var Hours = function () { return (React.createElement(Timer.Consumer, null, function (_a) {
-    var h = _a.h;
-    return React.createElement(TimerValue, { value: h });
-})); };
-var Days = function () { return (React.createElement(Timer.Consumer, null, function (_a) {
-    var d = _a.d;
-    return React.createElement(TimerValue, { value: d });
-})); };
+var TimerValue = function (_a) {
+    var unit = _a.unit, formatValue = _a.formatValue;
+    return (React.createElement(Timer.Consumer, null, function (props) {
+        var format = formatValue || props.formatValue;
+        return format(props[unit]) || null;
+    }));
+};
+var Milliseconds = function (props) { return (React.createElement(TimerValue, __assign({ unit: "ms" }, props))); };
+var Seconds = function (props) { return (React.createElement(TimerValue, __assign({ unit: "s" }, props))); };
+var Minutes = function (props) { return (React.createElement(TimerValue, __assign({ unit: "m" }, props))); };
+var Hours = function (props) { return (React.createElement(TimerValue, __assign({ unit: "h" }, props))); };
+var Days = function (props) { return (React.createElement(TimerValue, __assign({ unit: "d" }, props))); };
 var Timer = /** @class */ (function (_super) {
@@ -124,4 +99,4 @@ __extends(Timer, _super);
         var _b = this.state, ms = _b.ms, s = _b.s, m = _b.m, h = _b.h, d = _b.d, timerState = _b.timerState;
-        var children = this.props.children;
-        return (React.createElement(TimerContext.Provider, { value: { ms: ms, s: s, m: m, h: h, d: d } }, Timer.getUI(children, {
+        var _c = this.props, formatValue = _c.formatValue, children = _c.children;
+        return (React.createElement(TimerContext.Provider, { value: { ms: ms, s: s, m: m, h: h, d: d, formatValue: formatValue } }, Timer.getUI(children, {
             start: start,
@@ -189,2 +164,3 @@ resume: resume,
         children: null,
+        formatValue: function (value) { return String(value); },
         onStart: function () { },
@@ -191,0 +167,0 @@ onResume: function () { },

package.json

 {
   "name": "react-compound-timer",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Timer compound react component",
@@ -5,0 +5,0 @@ "main": "build/components/Timer/Timer",

No alert changes

Worsened metrics

Total package byte prevSize

52842

decreased by-0.3%

Lines of code

794

decreased by-1.73%

No dependency changes