config-editor-base 3.1.0 → 3.1.3

package/dist/index.js

@@ -18966,15 +18966,23 @@ var PartialConfigLoader = /*#__PURE__*/function (_React$Component) {
       className: "browse-file-name"
     }, jsonFileName))), Object.keys(jsonFile).length ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("pre", {
       className: "browse-file-preview"
-    }, JSON.stringify(jsonFile, null, 2)), formData ? /*#__PURE__*/React.createElement("div", null, mergedConfigValid ? /*#__PURE__*/React.createElement("span", null, " ", /*#__PURE__*/React.createElement("p", {
-      className: "btn-highlight"
+    }, JSON.stringify(jsonFile, null, 2)), formData ? /*#__PURE__*/React.createElement("div", null, mergedConfigValid ? /*#__PURE__*/React.createElement("div", {
+      className: "btn-highlight",
+      style: {
+        fontSize: "12px",
+        marginBottom: "8px"
+      }
     }, /*#__PURE__*/React.createElement("i", {
       className: "fa fa-check"
-    }), " \xA0Merged Configuration File validated")) : null, !mergedConfigValid ? /*#__PURE__*/React.createElement("p", {
-      className: "red-text"
+    }), " Merged Configuration File validated") : null, !mergedConfigValid ? /*#__PURE__*/React.createElement("div", {
+      className: "red-text",
+      style: {
+        fontSize: "12px",
+        marginBottom: "8px"
+      }
     }, /*#__PURE__*/React.createElement("i", {
       className: "fa fa-times"
-    }), " \xA0Merged Configuration File is invalid") : null, /*#__PURE__*/React.createElement("button", {
+    }), " Merged Configuration File is invalid") : null, /*#__PURE__*/React.createElement("button", {
       className: "btn btn-primary",
       onClick: this.onReview
     }, "Merge files")) : null) : null) : /*#__PURE__*/React.createElement("div", {
@@ -19834,6 +19842,64 @@ var SimpleDropdown = /*#__PURE__*/function (_React$Component) {
   return SimpleDropdown;
 }(React.Component);
 
+var CollapsiblePreview = /*#__PURE__*/function (_React$Component) {
+  function CollapsiblePreview() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(CollapsiblePreview, _React$Component);
+  var _proto = CollapsiblePreview.prototype;
+  _proto.render = function render() {
+    var _this$props = this.props,
+      open = _this$props.open,
+      onToggle = _this$props.onToggle,
+      data = _this$props.data,
+      onDownload = _this$props.onDownload,
+      label = _this$props.label;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: "10px"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: onToggle,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        cursor: "pointer",
+        fontSize: "12px",
+        color: "#999999",
+        userSelect: "none"
+      }
+    }, /*#__PURE__*/React.createElement("i", {
+      className: open ? "fa fa-angle-down" : "fa fa-angle-right",
+      style: {
+        marginRight: "6px",
+        width: "8px"
+      }
+    }), label || "Show partial config preview"), open ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: "10px"
+      }
+    }, /*#__PURE__*/React.createElement("pre", {
+      className: "browse-file-preview",
+      style: {
+        maxHeight: "300px",
+        overflow: "auto",
+        fontSize: "11px"
+      }
+    }, JSON.stringify(data, null, 2)), onDownload ? /*#__PURE__*/React.createElement("button", {
+      className: "btn",
+      onClick: onDownload,
+      style: {
+        backgroundColor: "#fff",
+        border: "1px solid #ccc",
+        color: "#333",
+        marginTop: "8px"
+      }
+    }, "Download JSON") : null) : null);
+  };
+  return CollapsiblePreview;
+}(React.Component);
+
 var obdPids = [
 	{
 		service: "01",
@@ -22745,48 +22811,28 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
         marginBottom: "15px",
         marginTop: "10px"
       }
-    }, "When testing supported PIDs, make sure the ignition is on for 2 minutes before you connect the device. Let the device be connected for 5 minutes to perform the test."), mergedConfigValid === false && /*#__PURE__*/React.createElement("p", {
-      className: "red-text"
+    }, "When testing supported PIDs, make sure the ignition is on for 2 minutes before you connect the device. Let the device be connected for 5 minutes to perform the test."), mergedConfigValid === false && /*#__PURE__*/React.createElement("div", {
+      className: "red-text",
+      style: {
+        fontSize: "12px",
+        marginBottom: "8px"
+      }
     }, /*#__PURE__*/React.createElement("i", {
       className: "fa fa-times"
     }), " Merged Configuration File is invalid"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
       className: "btn btn-primary",
       onClick: this.onMerge,
       disabled: !formData || Object.keys(formData).length === 0 || mergedConfigValid !== true
-    }, "Merge files"), /*#__PURE__*/React.createElement("button", {
-      className: "btn btn-default",
-      onClick: this.onDownload,
-      disabled: Object.keys(generatedConfig).length === 0,
-      style: {
-        marginLeft: "10px"
-      }
-    }, "Download JSON"))), Object.keys(generatedConfig).length > 0 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        cursor: "pointer",
-        fontSize: "12px",
-        marginTop: "8px"
-      }
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
-      checked: showPreview,
-      onChange: function onChange() {
+    }, "Merge files"))), Object.keys(generatedConfig).length > 0 && /*#__PURE__*/React.createElement(CollapsiblePreview, {
+      open: showPreview,
+      onToggle: function onToggle() {
         return _this9.setState({
           showPreview: !showPreview
         });
       },
-      style: {
-        marginRight: "6px",
-        marginBottom: "4px"
-      }
-    }), "Show partial config preview"), showPreview && /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginTop: "10px"
-      }
-    }, /*#__PURE__*/React.createElement("pre", {
-      className: "browse-file-preview"
-    }, JSON.stringify(combinedConfig, null, 2))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null)));
+      data: combinedConfig,
+      onDownload: this.onDownload
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null)));
   };
   return OBDTool;
 }(React.Component);
@@ -25645,11 +25691,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
           className: "btn btn-primary",
           onClick: _this10.onMerge,
           disabled: !_this10.props.formData || Object.keys(_this10.props.formData).length === 0 || _this10.state.mergedConfigValid !== true || !isFirmwareSupported || !isDeviceSupported
-        }, "Merge files"), /*#__PURE__*/React.createElement("button", {
-          className: "btn btn-default",
-          onClick: _this10.onDownload,
-          disabled: Object.keys(_this10.state.generatedFilterConfig).length === 0
-        }, "Download JSON")), function () {
+        }, "Merge files")), function () {
           var mergeDisabled = !_this10.props.formData || Object.keys(_this10.props.formData).length === 0 || _this10.state.mergedConfigValid !== true || !isFirmwareSupported || !isDeviceSupported;
           if (!mergeDisabled) return null;
           var reason = "";
@@ -25672,41 +25714,16 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
             }
           }, reason) : null;
         }());
-      }(), Object.keys(_this10.state.generatedFilterConfig).length > 0 && /*#__PURE__*/React.createElement("div", {
-        style: {
-          marginTop: "10px"
-        }
-      }, /*#__PURE__*/React.createElement("label", {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          cursor: "pointer",
-          fontSize: "12px"
-        }
-      }, /*#__PURE__*/React.createElement("input", {
-        type: "checkbox",
-        checked: _this10.state.showFilterPreview,
-        onChange: function onChange() {
+      }(), Object.keys(_this10.state.generatedFilterConfig).length > 0 && /*#__PURE__*/React.createElement(CollapsiblePreview, {
+        open: _this10.state.showFilterPreview,
+        onToggle: function onToggle() {
           return _this10.setState({
             showFilterPreview: !_this10.state.showFilterPreview
           });
         },
-        style: {
-          marginRight: "6px",
-          marginBottom: "4px"
-        }
-      }), "Show partial config preview"), _this10.state.showFilterPreview && /*#__PURE__*/React.createElement("div", {
-        style: {
-          marginTop: "10px"
-        }
-      }, /*#__PURE__*/React.createElement("pre", {
-        className: "browse-file-preview",
-        style: {
-          maxHeight: "300px",
-          overflow: "auto",
-          fontSize: "11px"
-        }
-      }, JSON.stringify(_this10.state.generatedFilterConfig, null, 2)))));
+        data: _this10.state.generatedFilterConfig,
+        onDownload: _this10.onDownload
+      }));
     }()), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null)));
   };
   return FilterBuilderTool;