rc-countdown-view - npm Package Compare versions

Comparing version 1.2.1 to 2.0.0

es/index.d.ts

+import React from "react";
+import CountDownPro from "countdown-pro";
+export declare type ActionType = {
+    start: () => void;
+    pause: () => void;
+    reset: () => void;
+};
+export interface CountDownProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'> {
+    time: number;
+    interval?: number;
+    format?: string | ((timestamp: number, formatRes: ReturnType<typeof CountDownPro.parseTimeData>) => string);
+    autoStart?: boolean;
+    onChange?: (formatTime: string) => void;
+    onEnd?: () => void;
+}
+declare const CountDown: React.ForwardRefExoticComponent<CountDownProps & React.RefAttributes<ActionType>>;
+export default CountDown;

es/index.js

+import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, useState, useEffect, useImperativeHandle, useRef } from "react";
+import CountDownPro from "countdown-pro";
+var CountDown = forwardRef(function (_a, ref) {
+    var _b = _a.time, time = _b === void 0 ? 0 : _b, _c = _a.interval, interval = _c === void 0 ? 1000 : _c, _d = _a.format, format = _d === void 0 ? 'HH:mm:ss' : _d, _e = _a.autoStart, autoStart = _e === void 0 ? true : _e, onChange = _a.onChange, onEnd = _a.onEnd, restProps = __rest(_a, ["time", "interval", "format", "autoStart", "onChange", "onEnd"]);
+    var formatTime = function (timestamp) {
+        if (typeof format === 'string') {
+            return CountDownPro.format(timestamp, format);
+        }
+        else if (format instanceof Function) {
+            return format(timestamp, CountDownPro.parseTimeData(timestamp));
+        }
+        else {
+            return timestamp + '';
+        }
+    };
+    var unmountedRef = useRef(false);
+    var _f = __read(useState(function () { return formatTime(time); }), 2), timeState = _f[0], setTimeState = _f[1];
+    var handleChange = function (currentTime) {
+        if (!unmountedRef.current) {
+            var fmtTime = formatTime(currentTime);
+            setTimeState(fmtTime);
+            onChange === null || onChange === void 0 ? void 0 : onChange(fmtTime);
+        }
+    };
+    var handleEnd = function () {
+        onEnd === null || onEnd === void 0 ? void 0 : onEnd();
+    };
+    var countdownRef = useRef();
+    if (!countdownRef.current) {
+        countdownRef.current = new CountDownPro({
+            time: time,
+            interval: interval,
+            onChange: handleChange,
+            onEnd: handleEnd
+        });
+    }
+    useImperativeHandle(ref, function () { return ({
+        get start() {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            return countdownRef.current.start.bind(countdownRef.current);
+        },
+        get pause() {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            return countdownRef.current.pause.bind(countdownRef.current);
+        },
+        get reset() {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            return countdownRef.current.reset.bind(countdownRef.current);
+        }
+    }); }, []);
+    useEffect(function () {
+        if (countdownRef.current) {
+            countdownRef.current.options.time = time;
+            countdownRef.current.options.interval = interval;
+        }
+    }, [time, interval]);
+    useEffect(function () {
+        var _a;
+        if (autoStart) {
+            (_a = countdownRef.current) === null || _a === void 0 ? void 0 : _a.start();
+        }
+        return function () {
+            var _a;
+            unmountedRef.current = true;
+            (_a = countdownRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return React.createElement("span", __assign({}, restProps), timeState);
+});
+CountDown.displayName = 'CountDown';
+export default CountDown;

lib/index.d.ts

+import React from "react";
+import CountDownPro from "countdown-pro";
+export declare type ActionType = {
+    start: () => void;
+    pause: () => void;
+    reset: () => void;
+};
+export interface CountDownProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'> {
+    time: number;
+    interval?: number;
+    format?: string | ((timestamp: number, formatRes: ReturnType<typeof CountDownPro.parseTimeData>) => string);
+    autoStart?: boolean;
+    onChange?: (formatTime: string) => void;
+    onEnd?: () => void;
+}
+declare const CountDown: React.ForwardRefExoticComponent<CountDownProps & React.RefAttributes<ActionType>>;
+export default CountDown;

LICENSE

+MIT License
+
+Copyright (c) 2022 caijf
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

lib/index.js

 "use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _countdownPro = _interopRequireDefault(require("countdown-pro"));
-
-var _util = require("countdown-pro/lib/util");
-
-var noop = function noop() {};
-
-var CountDown = _react["default"].forwardRef(function (_ref, ref) {
-  var _ref$time = _ref.time,
-      time = _ref$time === void 0 ? 0 : _ref$time,
-      _ref$interval = _ref.interval,
-      interval = _ref$interval === void 0 ? 1000 : _ref$interval,
-      _ref$format = _ref.format,
-      format = _ref$format === void 0 ? 'HH:mm:ss' : _ref$format,
-      _ref$autoStart = _ref.autoStart,
-      autoStart = _ref$autoStart === void 0 ? true : _ref$autoStart,
-      _ref$onChange = _ref.onChange,
-      _onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
-      _ref$onEnd = _ref.onEnd,
-      onEnd = _ref$onEnd === void 0 ? noop : _ref$onEnd;
-
-  var formatTime = (0, _react.useCallback)(function (timestamp) {
-    if (typeof format === 'string') {
-      return (0, _util.format)(timestamp, format);
-    } else if (typeof format === 'function') {
-      return format(timestamp);
-    } else {
-      return timestamp;
-    }
-  }, [format]);
-
-  var _useState = (0, _react.useState)(function () {
-    return formatTime(time);
-  }),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      timeState = _useState2[0],
-      setTimeState = _useState2[1];
-
-  var countdown = (0, _react.useMemo)(function () {
-    return new _countdownPro["default"]({
-      time: time,
-      interval: interval,
-      format: formatTime,
-      onChange: function onChange(fmtTime) {
-        setTimeState(fmtTime);
-
-        _onChange(fmtTime);
-      },
-      onEnd: onEnd
-    });
-  }, [time, interval, format]);
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      start: countdown.start.bind(countdown),
-      pause: countdown.pause.bind(countdown),
-      reset: countdown.reset.bind(countdown)
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var countdown_pro_1 = tslib_1.__importDefault(require("countdown-pro"));
+var CountDown = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b = _a.time, time = _b === void 0 ? 0 : _b, _c = _a.interval, interval = _c === void 0 ? 1000 : _c, _d = _a.format, format = _d === void 0 ? 'HH:mm:ss' : _d, _e = _a.autoStart, autoStart = _e === void 0 ? true : _e, onChange = _a.onChange, onEnd = _a.onEnd, restProps = tslib_1.__rest(_a, ["time", "interval", "format", "autoStart", "onChange", "onEnd"]);
+    var formatTime = function (timestamp) {
+        if (typeof format === 'string') {
+            return countdown_pro_1.default.format(timestamp, format);
+        }
+        else if (format instanceof Function) {
+            return format(timestamp, countdown_pro_1.default.parseTimeData(timestamp));
+        }
+        else {
+            return timestamp + '';
+        }
     };
-  }, [ref]);
-  (0, _react.useEffect)(function () {
-    if (autoStart) {
-      countdown.start();
+    var unmountedRef = (0, react_1.useRef)(false);
+    var _f = tslib_1.__read((0, react_1.useState)(function () { return formatTime(time); }), 2), timeState = _f[0], setTimeState = _f[1];
+    var handleChange = function (currentTime) {
+        if (!unmountedRef.current) {
+            var fmtTime = formatTime(currentTime);
+            setTimeState(fmtTime);
+            onChange === null || onChange === void 0 ? void 0 : onChange(fmtTime);
+        }
+    };
+    var handleEnd = function () {
+        onEnd === null || onEnd === void 0 ? void 0 : onEnd();
+    };
+    var countdownRef = (0, react_1.useRef)();
+    if (!countdownRef.current) {
+        countdownRef.current = new countdown_pro_1.default({
+            time: time,
+            interval: interval,
+            onChange: handleChange,
+            onEnd: handleEnd
+        });
     }
-
-    return function () {
-      return countdown.pause();
-    };
-  }, []);
-  return timeState;
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        get start() {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            return countdownRef.current.start.bind(countdownRef.current);
+        },
+        get pause() {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            return countdownRef.current.pause.bind(countdownRef.current);
+        },
+        get reset() {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            return countdownRef.current.reset.bind(countdownRef.current);
+        }
+    }); }, []);
+    (0, react_1.useEffect)(function () {
+        if (countdownRef.current) {
+            countdownRef.current.options.time = time;
+            countdownRef.current.options.interval = interval;
+        }
+    }, [time, interval]);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (autoStart) {
+            (_a = countdownRef.current) === null || _a === void 0 ? void 0 : _a.start();
+        }
+        return function () {
+            var _a;
+            unmountedRef.current = true;
+            (_a = countdownRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return react_1.default.createElement("span", tslib_1.__assign({}, restProps), timeState);
 });
-
-CountDown.propTypes = {
-  time: _propTypes["default"].number,
-  interval: _propTypes["default"].number,
-  format: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].func]),
-  autoStart: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  onEnd: _propTypes["default"].func
-};
-var _default = CountDown;
-exports["default"] = _default;
+CountDown.displayName = 'CountDown';
+exports.default = CountDown;

package.json

 {
   "name": "rc-countdown-view",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "description": "A simple countdown react component.",
   "main": "lib/index.js",
-  "types": "types/index.d.ts",
+  "module": "es/index.js",
+  "files": [
+    "es",
+    "lib"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npm run build:lib",
-    "build:lib": "rm -rf lib && babel src --out-dir lib"
+    "test": "jest --verbose",
+    "start": "dumi dev",
+    "doc": "dumi build",
+    "build": "npm run build:cjs && npm run build:es",
+    "build:cjs": "rm -rf lib && tsc --outDir lib -t es5 -m commonjs",
+    "build:es": "rm -rf es && tsc --outDir es -t es5 -m es2015",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+    "lint-fix": "npm run lint -- --fix",
+    "prettier": "prettier --write **/*",
+    "commit": "cz",
+    "prepublishOnly": "npm test && npm run build"
   },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": "eslint",
+    "**/*.{css,scss,less,js,jsx,ts,tsx,json,md}": "prettier -w"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged",
+    "commit-msg": "npx --no -- commitlint --edit \"$1\""
+  },
   "repository": {
@@ -28,12 +53,31 @@ "type": "git",
   "dependencies": {
-    "@babel/runtime": "^7.14.0",
-    "countdown-pro": "^1.0.0",
-    "prop-types": "^15.7.2"
+    "countdown-pro": "^2.0.0",
+    "tslib": "^2.4.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-transform-runtime": "^7.9.6",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/preset-react": "^7.9.4"
+    "@babel/preset-env": "^7.19.0",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@types/jest": "^29.0.0",
+    "@types/react": "^18.0.18",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-test-renderer": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
+    "babel-jest": "^29.0.2",
+    "cz-conventional-changelog": "^3.3.0",
+    "dumi": "^1.1.47",
+    "eslint": "^8.23.0",
+    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.0.2",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "typescript": "^4.8.3",
+    "yorkie": "^2.0.0"
   },
@@ -43,21 +87,6 @@ "peerDependencies": {
   },
-  "babel": {
-    "presets": [
-      [
-        "@babel/env",
-        {
-          "targets": [
-            "> 1%",
-            "last 4 versions",
-            "Firefox ESR",
-            "not ie < 9"
-          ]
-        }
-      ],
-      "@babel/react"
-    ],
-    "plugins": [
-      "@babel/transform-runtime"
-    ]
+  "resolutions": {
+    "react": "18",
+    "react-dom": "18"
   }
 }

README.md

 # rc-countdown-view
 
-一个简单的 `react` 倒计时组件。
+[![npm][npm]][npm-url] ![GitHub](https://img.shields.io/github/license/caijf/rc-countdown-view.svg)
 
+一个简单倒计时 `react` 组件。
+
 [查看示例][site]
@@ -15,29 +17,28 @@
 
-
 ## 示例
 
 ```javascript
-import React from 'react';
 import CountDown from 'rc-countdown-view';
 
 export default () => {
-  return (
-    <CountDown time={10 * 60 * 60 * 1000} />
-  )
-}
+  return <CountDown time={10 * 60 * 60 * 1000} />;
+};
 ```
 
-
 ## API
 
-参数 | 说明 | 类型 | 默认值 |
-------------- | ------------- | ------------- | ------------- |
-time  | 倒计时，单位毫秒 | `number` | `0` |
-interval  | 时间间隔，单位毫秒 | `number` | `1000` |
-format  | 时间格式化。如果传入 `string`，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒。如果传入 `function`，必须要有返回值 `(timestamp)=>any` | `string` `function` | `HH:mm:ss` |
-autoStart | 自动开始 | `boolean` | `true` |
-onChange | 时间变化时触发 `(time)=>void` | `function` | - |
-onEnd | 倒计时结束时触发 | `function` | - |
-ref | 当需要手动控制时，传入 `useRef` 将在 `ref.current` 挂载三个方法：`start` `pause` `reset` | - | - |
+除了以下属性，还支持 `span` 标签的其他属性。
 
-[site]: https://caijf.github.io/rc-countdown-view/site/
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| time | 倒计时，单位毫秒 | `number` | `0` |
+| interval | 时间间隔，单位毫秒 | `number` | `1000` |
+| format | 格式化。<br/>如果传入 `string` 将自动转换 `DD-日，HH-时，mm-分，ss-秒，SSS-毫秒` 。<br/>如果传入 `function`，必须要有返回值 `string` 且不会自动转换。 | `string \| (timestamp: number, formatRes: { days: number, hours: number, minutes: number, seconds: number, milliseconds: number }) => void` | `HH:mm:ss` |
+| autoStart | 自动开始 | `boolean` | `true` |
+| onChange | 时间变化时触发，参数是 `format` 的返回值。 | `(formatTime: string) => void` | - |
+| onEnd | 倒计时结束时触发 | `() => void` | - |
+| ref | 常用操作，开始/暂停/重置 | `ActionType` | - |
+
+[site]: https://caijf.github.io/rc-countdown-view/index.html
+[npm]: https://img.shields.io/npm/v/rc-countdown-view.svg
+[npm-url]: https://npmjs.com/package/rc-countdown-view

types/index.d.ts

-import React from 'react';
-
-interface CountDownProps {
-  time: number;
-  interval?: number;
-  format?: string | ((timestamp: number) => any);
-  autoStart?: boolean;
-  onChange?: (time: any) => void;
-  onEnd?: () => void;
-  ref?: React.Ref<any>
-}
-
-declare const CountDown: React.FC<CountDownProps>;
-
-export default CountDown;

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Improved metrics

Total package byte prevSize

12879

121.48%

Dependency count

3

-25%

Number of package files

7

75%

Lines of code

184

104.44%

Number of low quality alerts

0

-100%

Number of lines in readme file

44

4.76%

Worsened metrics

Dev dependency count

25

400%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  tslib@^2.4.0

• + Added

  countdown-pro@2.2.1
  (transitive)

• + Added

  tslib@2.8.1
  (transitive)

• - Removed

  @babel/runtime@^7.14.0

• - Removed

  prop-types@^15.7.2

• - Removed

  @babel/runtime@7.29.7
  (transitive)

• - Removed

  countdown-pro@1.0.2
  (transitive)

• Updated

  countdown-pro@^2.0.0