react-cron-generator 1.2.12 → 1.3.3

package/README.md

@@ -5,7 +5,10 @@ Simple react component to generate cron expression
 ## Getting Started
 
 Package helps to build linux scheduler cron expression.
-Make sure you have include bootstrap in your project
+
+Make sure you have include bootstrap(4.x) in your project. 
+
+For old bootstrap(3.x) version support, please use cron generator version "1.2.12"
 
 
 ```
@@ -59,7 +62,7 @@ export default App;
 | Prop | Description | Default | Mandatory
 | --- | --- | -- | -- |
 | value | cron expression  |  |  No |
-| onChange |  |  | Yes
+| onChange | have 2 arguments, 1st is cron value and 2nd is cron result text from cronstrue  |  | Yes
 | showResultText | show in readable text format | false | No
 | showResultCron | show cron expression | false | No
 | translateFn | translate function callback | method | No

package/dist/cron-builder.css

@@ -15,7 +15,6 @@
     padding-left: 5px;
     cursor: pointer;
 }
-
 .df {
     display: flex;
 }
@@ -30,7 +29,7 @@
     background-color: white;
     width: 75px;
     cursor: pointer;
-    padding: 4px 0px;
+    padding: 4px 2px;
     border-radius: 4px;
 }
 .cron_builder_bordering select option:hover {
@@ -47,11 +46,46 @@
     border: 1px solid #d0cbcb;
     padding: 5px;
     background-color: #dddef13d;
-    width: 50%;
+    width: 100%;
+    max-width: 600px;
 }
 .text_align_left {
     text-align: left;
 }
-.nav li {
+.cron_builder .nav li {
     cursor: pointer;
+    flex: 0 0 85px;
+    text-align: center;
+}
+.cron_builder .nav li a {
+    color:#337ab7;
+
+}
+.cron_builder .nav-tabs .nav-link:focus, .cron_builder .nav-tabs .nav-link:hover {
+    border-color: transparent transparent transparent;
+    background-color: #eeeeee;
+}
+.cron_builder .nav-tabs .nav-item.show .nav-link, .cron_builder .nav-tabs .nav-link.active {
+    border-color: #dee2e6 #dee2e6 #fff;
+    background-color: #ffffff;
+}
+.cron_builder { 
+    font-size: 14px;
+}
+.cron_builder .well {
+    min-height: 20px;
+    padding: 19px;
+    margin-bottom: 20px;
+    background-color: #f5f5f5;
+    border: 1px solid #e3e3e3;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
 }
+@media screen and (max-width:767px) {
+    .cron_builder .nav li {
+        cursor: pointer;
+        flex: 0 0 65px;
+        text-align: center;
+    }
+}

package/dist/cron-tab/hourly.js

@@ -89,9 +89,9 @@ var HourlyCron = /*#__PURE__*/function (_Component) {
         onChange: this.onHourChange,
         value: this.state.value[2].split('/')[1] ? this.state.value[2].split('/')[1] : ''
       }), /*#__PURE__*/React.createElement("span", null, translateFn('hour(s)'))), /*#__PURE__*/React.createElement("div", {
-        className: "well df well-small margin-right-0 margin-left-0"
+        className: "well well-small margin-right-0 margin-left-0"
       }, /*#__PURE__*/React.createElement("div", {
-        className: "text_align_right row",
+        className: "text_align_right",
         style: {
           width: '100%'
         }

package/dist/cron.js

@@ -95,12 +95,14 @@ var Cron = /*#__PURE__*/function (_Component) {
     value: function tabChanged(tab) {
       var _this2 = this;
 
-      this.setState({
-        selectedTab: tab,
-        value: this.defaultValue(tab)
-      }, function () {
-        return _this2.parentChange(_this2.defaultValue(tab));
-      });
+      if (this.state.selectedTab !== tab) {
+        this.setState({
+          selectedTab: tab,
+          value: this.defaultValue(tab)
+        }, function () {
+          return _this2.parentChange(_this2.defaultValue(tab));
+        });
+      }
     }
   }, {
     key: "getHeaders",
@@ -109,9 +111,10 @@ var Cron = /*#__PURE__*/function (_Component) {
 
       return this.state.headers.map(function (d, index) {
         return /*#__PURE__*/React.createElement("li", {
-          key: index,
-          className: _this3.state.selectedTab === d ? 'active' : ''
+          className: "nav-item",
+          key: index
         }, /*#__PURE__*/React.createElement("a", {
+          className: "nav-link ".concat(_this3.state.selectedTab === d ? 'active' : ''),
           onClick: _this3.tabChanged.bind(_this3, d)
         }, _this3.translate(d)));
       });
@@ -142,7 +145,7 @@ var Cron = /*#__PURE__*/function (_Component) {
       var newVal = '';
       newVal = val.toString().replace(/,/g, ' ');
       newVal = newVal.replace(/!/g, ',');
-      this.props.onChange(newVal);
+      this.props.onChange(newVal, this.getVal());
     }
   }, {
     key: "getVal",
@@ -161,13 +164,15 @@ var Cron = /*#__PURE__*/function (_Component) {
   }, {
     key: "defaultValue",
     value: function defaultValue(tab) {
-      var index = this.state.headers.indexOf(tab);
+      var defaultValCron = metadata.find(function (m) {
+        return m.name == tab;
+      });
 
-      if (metadata[index] === -1) {
+      if (!defaultValCron || !defaultValCron.initialCron) {
         return;
       }
 
-      return metadata[index].initialCron;
+      return defaultValCron.initialCron;
     }
   }, {
     key: "getComponent",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cron-generator",
-  "version": "1.2.12",
+  "version": "1.3.3",
   "description": "Simple react component to generate cron expression",
   "keywords": [
     "React cron generator",
@@ -41,7 +41,7 @@
     "cronstrue": "^1.72.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
-  },
+},
   "homepage": "https://sojinantony01.github.io/react-cron-generator",
   "scripts": {
     "start": "react-scripts start",
@@ -49,7 +49,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "deploy": "gh-pages -d build",
-    "react-build": "react-scripts build"
+    "react-build": "CI=false && react-scripts build"
   },
   "eslintConfig": {
     "extends": "react-app"