otp-timer 1.1.5 → 2.0.0

package/README.md

@@ -45,10 +45,14 @@ Functionality:
 
 Styling:
 
-| Prop name   |                 Description                 | Default Value |                Example |
-| :---------- | :-----------------------------------------: | :-----------: | ---------------------: |
-| textColor   |      describes the timer's text color       |   "#000000"   |  textColor={"#000000"} |
-| buttonColor |      describes the button's text color      |    "#fff"     |   buttonColor={"#fff"} |
-| background  | describe the background color of the button |   "#0033cc"   | background={"#0033cc"} |
+| Prop name       |                 Description                 | Default Value |             Example             |
+| :-------------- | :-----------------------------------------: | :-----------: | ------------------------------: |
+| textColor       |      describes the timer's text color       |   "#000000"   | textColor={"#000000"}           |
+| buttonColor     |      describes the button's text color      |    "#fff"     | buttonColor={"#fff"}            |
+| background      | describe the background color of the button |   "#0033cc"   | background={"#0033cc"}          |
+| buttonClassName |    describe custom classname for button     |      n/a      | buttonClassName="btnClass"      |
+| buttonStyle     |     describe custome styles for button      |       -       | buttonStyle={{color:"#fff"}}    |
+| timerSpanClass  |   describe custom classname for timerspan   |       -       | timerSpanClass="timerClass"     |
+| timerSpanStyle  |    describe custom styles for timerspan     |       -       | timerSpanStyle={{font:"Inter"}} |
 
 ---

package/example/index.css

@@ -0,0 +1,3 @@
+.btn {
+    color:red !important;
+}

package/example/index.js

@@ -1,6 +1,7 @@
 import OtpTimer from "../lib/timer";
 import ReactDOM from "react-dom";
 import React, { Component, PropTypes } from "react";
+import './index.css'
 
 class Example extends Component {
   submit() {
@@ -15,6 +16,9 @@ class Example extends Component {
           resend={this.submit.bind(this)}
           text="Time:"
           ButtonText="Resend"
+          timerSpanClass= "btn"
+          timerSpanStyle={{ fontSize: "16px" }}
+          buttonStyle={{ backgroundColor: "lightBlue" }}
         />
       </div>
     );

package/example/webpack.config.js

@@ -10,7 +10,11 @@ module.exports = {
         test: /\.js$/,
         use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/react'] } } ],
         exclude: /node_modules/,
-      }
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
     ]
   },
   plugins: [

package/lib/timer.js

@@ -1,72 +1,45 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-
+exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var Otp = /*#__PURE__*/function (_Component) {
-  _inherits(Otp, _Component);
-
-  var _super = _createSuper(Otp);
-
-  _createClass(Otp, null, [{
-    key: "propTypes",
-    get: function get() {
-      return {
-        options: _propTypes.default.object
-      };
-    }
-  }]);
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+var Otp = exports["default"] = /*#__PURE__*/function (_Component) {
   function Otp(props) {
     var _this;
-
     _classCallCheck(this, Otp);
-
-    _this = _super.call(this, props);
+    _this = _callSuper(this, Otp, [props]);
     _this.state = {
       showfield: false,
       minutes: _this.props.minutes ? _this.props.minutes : 0,
       seconds: _this.props.seconds ? _this.props.seconds : 30
     };
-    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
+    _this.handleClick = _this.handleClick.bind(_this);
     return _this;
   }
-
-  _createClass(Otp, [{
+  _inherits(Otp, _Component);
+  return _createClass(Otp, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       clearInterval(this.myInterval);
@@ -76,13 +49,11 @@ var Otp = /*#__PURE__*/function (_Component) {
     key: "otptimer",
     value: function otptimer() {
       var _this2 = this;
-
       clearInterval(this.myInterval);
       this.myInterval = setInterval(function () {
         var _this2$state = _this2.state,
-            seconds = _this2$state.seconds,
-            minutes = _this2$state.minutes;
-
+          seconds = _this2$state.seconds,
+          minutes = _this2$state.minutes;
         if (seconds > 0) {
           _this2.setState(function (_ref) {
             var seconds = _ref.seconds;
@@ -91,7 +62,6 @@ var Otp = /*#__PURE__*/function (_Component) {
             };
           });
         }
-
         if (seconds === 0) {
           if (minutes === 0) {
             clearInterval(_this2.myInterval);
@@ -122,11 +92,11 @@ var Otp = /*#__PURE__*/function (_Component) {
       this.props.resend();
       this.otptimer();
       event.preventDefault();
-    } //   wrapperFunction(e){
+    }
+    //   wrapperFunction(e){
     //     this.props.resend;
     //     this.handleClick.bind(this);
     // }
-
   }, {
     key: "render",
     value: function render() {
@@ -138,21 +108,29 @@ var Otp = /*#__PURE__*/function (_Component) {
       };
       var buttonStyling = {
         border: "none",
+        cursor: "pointer",
         background: this.props.background ? this.props.background : "#0033cc",
         color: this.props.buttonColor ? this.props.buttonColor : "#fff",
         fontSize: "16px",
         lineHeight: "22px"
       };
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
         style: textStyle
-      }, this.state.minutes === 0 && this.state.seconds === 0 ? /*#__PURE__*/_react.default.createElement("button", {
-        style: buttonStyling,
-        onClick: this.handleClick
-      }, this.props.ButtonText ? /*#__PURE__*/_react.default.createElement("span", null, this.props.ButtonText, " ") : /*#__PURE__*/_react.default.createElement("span", null, "Resend")) : /*#__PURE__*/_react.default.createElement("span", null, this.props.text ? /*#__PURE__*/_react.default.createElement("span", null, this.props.text, " ") : /*#__PURE__*/_react.default.createElement("span", null, "Time left: "), this.state.minutes < 10 ? "0".concat(this.state.minutes) : this.state.minutes, ":", this.state.seconds < 10 ? "0".concat(this.state.seconds) : this.state.seconds));
+      }, this.state.minutes === 0 && this.state.seconds === 0 ? /*#__PURE__*/_react["default"].createElement("button", {
+        style: _objectSpread(_objectSpread({}, buttonStyling), this.props.buttonStyle),
+        onClick: this.handleClick,
+        className: this.props.buttonClassName
+      }, this.props.ButtonText ? /*#__PURE__*/_react["default"].createElement("span", null, this.props.ButtonText, " ") : /*#__PURE__*/_react["default"].createElement("span", null, "Resend")) : /*#__PURE__*/_react["default"].createElement("span", {
+        className: this.props.timerSpanClass,
+        style: this.props.timerSpanStyle
+      }, this.props.text ? /*#__PURE__*/_react["default"].createElement("span", null, this.props.text, " ") : /*#__PURE__*/_react["default"].createElement("span", null, "Time left: "), this.state.minutes < 10 ? "0".concat(this.state.minutes) : this.state.minutes, ":", this.state.seconds < 10 ? "0".concat(this.state.seconds) : this.state.seconds));
+    }
+  }], [{
+    key: "propTypes",
+    get: function get() {
+      return {
+        options: _propTypes["default"].object
+      };
     }
   }]);
-
-  return Otp;
-}(_react.Component);
-
-exports.default = Otp;
+}(_react.Component);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "otp-timer",
-  "version": "1.1.5",
+  "version": "2.0.0",
   "description": "otp timer component",
   "main": "lib/timer.js",
   "author": "Simran Gupta & Tanmay Sharma",
@@ -18,24 +18,26 @@
     "react-dom": "^16.13.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "7.3.3",
-    "@babel/preset-env": "7.3.1",
-    "@babel/preset-react": "7.0.0",
-    "babel-jest": "^24.7.1",
-    "babel-loader": "8.0.5",
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@babel/preset-react": "^7.22.5",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^7.1.2",
     "enzyme": "3.9.0",
     "enzyme-adapter-react-16": "^1.9.1",
-    "html-webpack-plugin": "3.2.0",
-    "jest": "^24.7.1",
+    "html-webpack-plugin": "^5.5.3",
+    "jest": "^29.7.0",
     "jsdom": "13.2.0",
-    "webpack": "4.29.4",
-    "webpack-cli": "3.2.3",
-    "webpack-dev-server": "3.1.14"
+    "style-loader": "^4.0.0",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.0"
   },
   "scripts": {
     "build": "babel src --out-dir lib",
-    "dev": "webpack-dev-server --mode=development --port 3001 --inline --hot --config example/webpack.config",
+    "dev": "webpack serve --mode development --port 3001 --hot --config example/webpack.config.js",
     "test": "jest"
   },
   "keywords": [

package/src/timer.js

@@ -75,6 +75,7 @@ export default class Otp extends Component {
 
     const buttonStyling = {
       border: "none",
+      cursor: "pointer",
       background: this.props.background ? this.props.background : "#0033cc",
       color: this.props.buttonColor ? this.props.buttonColor : "#fff",
       fontSize: "16px",
@@ -84,7 +85,7 @@ export default class Otp extends Component {
     return (
       <div style={textStyle}>
         {this.state.minutes === 0 && this.state.seconds === 0 ? (
-          <button style={buttonStyling} onClick={this.handleClick}>
+          <button style={{...buttonStyling, ...this.props.buttonStyle}} onClick={this.handleClick} className={this.props.buttonClassName}>
             {this.props.ButtonText ? (
               <span>{this.props.ButtonText} </span>
             ) : (
@@ -92,7 +93,7 @@ export default class Otp extends Component {
             )}
           </button>
         ) : (
-          <span>
+          <span className={this.props.timerSpanClass} style={this.props.timerSpanStyle}>
             {this.props.text ? (
               <span>{this.props.text} </span>
             ) : (