trepur_components 0.2.62 → 0.2.65

package/dist/components/TextAndTitle/index.js

@@ -9,6 +9,10 @@ exports.default = void 0;
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.split.js");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _Input = _interopRequireDefault(require("../Input"));
@@ -27,13 +31,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 const TextAndTitle = _ref => {
   let {
     id,
     classes,
     titleClasses,
     editTitleClasses,
-    editTitleInputClasses,
+    editTextClasses,
+    editInputClasses,
     textClasses,
     textLineOne,
     textLineTwo,
@@ -46,11 +57,27 @@ const TextAndTitle = _ref => {
     textCenter,
     titleCenter,
     withLiveUpdates = false,
-    onSave
+    onSave,
+    saveButtonProps,
+    cancelButtonProps
   } = _ref;
+  const defaultComponentData = {
+    title: {
+      text: title
+    },
+    textLineOne: {
+      text: textLineOne
+    },
+    textLineTwo: {
+      text: textLineTwo
+    },
+    textLineThree: {
+      text: textLineThree
+    }
+  };
   const [isInEditingMode, setIsInEditingMode] = (0, _react.useState)(false);
-  const [titleText, setTitleText] = (0, _react.useState)(title);
   const [isHovering, setIsHovering] = (0, _react.useState)(false);
+  const [componentData, setComponentData] = (0, _react.useState)(defaultComponentData);
   const hoverClasses = 'border-dashed border';
   const classList = (0, _classnames.default)({
     [hoverClasses]: withLiveUpdates && !isInEditingMode && isHovering,
@@ -60,7 +87,7 @@ const TextAndTitle = _ref => {
   titleClassList += titleBold ? 'font-bold ' : '';
   titleClassList += titleCenter ? 'text-center ' : '';
   titleClassList += titleClasses ? titleClasses : '';
-  let textClassList = '';
+  let textClassList = 'pt-4';
   textClassList += textCenter ? 'text-center ' : '';
   textClassList += textClasses ? textClasses : ''; //---------- Styling ---------------
 
@@ -78,8 +105,25 @@ const TextAndTitle = _ref => {
   };
 
   const handleButtonSave = () => {
+    const arr = [];
+    arr.push({
+      key: 'title',
+      value: componentData.title.text
+    });
+    arr.push({
+      key: 'textLineOne',
+      value: componentData.textLineOne.text
+    });
+    arr.push({
+      key: 'textLineTwo',
+      value: componentData.textLineTwo.text
+    });
+    arr.push({
+      key: 'textLineThree',
+      value: componentData.textLineThree.text
+    });
     toggleEditState();
-    onSave(titleText, id);
+    onSave(arr, id);
     setIsHovering(false);
   };
 
@@ -89,7 +133,15 @@ const TextAndTitle = _ref => {
   };
 
   const handleChange = e => {
-    setTitleText(e.target.value);
+    let id = e.target.id;
+    console.log('id', id);
+    id = id.split('-')[id.split('-').length - 1];
+    console.log('id: ', id);
+    setComponentData(_objectSpread(_objectSpread({}, componentData), {}, {
+      [id]: {
+        text: e.target.value
+      }
+    }));
   };
 
   const toggleHoverState = () => {
@@ -103,59 +155,69 @@ const TextAndTitle = _ref => {
     onMouseOver: () => toggleHoverState(),
     onMouseOut: () => toggleHoverState()
   }), withLiveUpdates && isInEditingMode ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    id: "title",
     classes: editTitleClasses,
-    inputClasses: editTitleInputClasses,
+    inputClasses: editInputClasses,
     autoFocus: true,
-    value: titleText,
+    value: componentData.title.text,
     onChange: e => handleChange(e),
     type: "text"
   }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    classes: "py-4",
-    value: textLineOne,
+    id: "textLineOne",
+    classes: editTextClasses,
+    inputClasses: editInputClasses,
+    value: componentData.textLineOne.text,
     onChange: e => handleChange(e),
     type: "text"
   }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    classes: "py-4",
-    value: textLineTwo,
+    id: "textLineTwo",
+    classes: editTextClasses,
+    inputClasses: editInputClasses,
+    value: componentData.textLineTwo.text,
     onChange: e => handleChange(e),
     type: "text"
   }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    classes: "py-4",
-    value: textLineThree,
+    id: "textLineThree",
+    classes: editTextClasses,
+    inputClasses: editInputClasses,
+    value: componentData.textLineThree.text,
     onChange: e => handleChange(e),
     type: "text"
   }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    buttonClasses: "mt-4",
     buttonText: "Save",
     buttonOnClick: handleButtonSave,
-    buttonBgColor: "black",
-    buttonTextColor: "white",
-    buttonHoverTextColor: "#000000",
-    buttonHoverBorderColor: "#000000",
-    buttonHoverBgColor: "white"
+    buttonBgColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.bgColor,
+    buttonBorderColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.borderColor,
+    buttonTextColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.textColor,
+    buttonHoverTextColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.hoverTextColor,
+    buttonHoverBorderColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.hoverBorderColor,
+    buttonHoverBgColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.hoverBgColor
   }), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    buttonClasses: "ml-4",
+    buttonClasses: "mt-4 ml-4",
     buttonText: "Cancel",
-    class: true,
     buttonOnClick: handleButtonCancel,
-    buttonBgColor: "black",
-    buttonTextColor: "white",
-    buttonHoverTextColor: "#000000",
-    buttonHoverBorderColor: "#000000",
-    buttonHoverBgColor: "white"
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
-    style: titleStyles,
-    className: titleClassList,
+    buttonBgColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.bgColor,
+    buttonBorderColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.borderColor,
+    buttonTextColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.textColor,
+    buttonHoverTextColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.hoverTextColor,
+    buttonHoverBorderColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.hoverBorderColor,
+    buttonHoverBgColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.hoverBgColor
+  })) : /*#__PURE__*/_react.default.createElement("div", {
     onClick: toggleEditState
-  }, titleText), /*#__PURE__*/_react.default.createElement("p", {
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    style: titleStyles,
+    className: titleClassList
+  }, componentData.title.text), /*#__PURE__*/_react.default.createElement("p", {
     style: textStyles,
     className: textClassList
-  }, textLineOne), /*#__PURE__*/_react.default.createElement("p", {
+  }, componentData.textLineOne.text), /*#__PURE__*/_react.default.createElement("p", {
     style: textStyles,
     className: textClassList
-  }, textLineTwo), /*#__PURE__*/_react.default.createElement("p", {
+  }, componentData.textLineTwo.text), /*#__PURE__*/_react.default.createElement("p", {
     style: textStyles,
     className: textClassList
-  }, textLineThree)));
+  }, componentData.textLineThree.text)));
 };
 
 var _default = TextAndTitle;

package/package.json

@@ -2,7 +2,7 @@
   "name": "trepur_components",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "0.2.62",
+  "version": "0.2.65",
   "private": false,
   "keywords": [
     "react",