trepur_components 0.2.61 → 0.2.64

package/dist/components/TextAndTitle/index.js

@@ -9,7 +9,9 @@ exports.default = void 0;
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
-require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.split.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -29,15 +31,24 @@ 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,
-    children,
+    textLineOne,
+    textLineTwo,
+    textLineThree,
     title,
     titleBold,
     bgColor,
@@ -46,12 +57,27 @@ const TextAndTitle = _ref => {
     textCenter,
     titleCenter,
     withLiveUpdates = false,
-    onSave
+    onSave,
+    saveButtonProps,
+    cancelButtonProps
   } = _ref;
-  console.log('children: ', children);
+  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,
@@ -61,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 ---------------
 
@@ -79,8 +105,13 @@ const TextAndTitle = _ref => {
   };
 
   const handleButtonSave = () => {
+    const arr = [];
+    arr.push(componentData.title);
+    arr.push(componentData.textLineOne);
+    arr.push(componentData.textLineTwo);
+    arr.push(componentData.textLineThree);
     toggleEditState();
-    onSave(titleText, id);
+    onSave(arr, id);
     setIsHovering(false);
   };
 
@@ -90,26 +121,21 @@ 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 = () => {
     withLiveUpdates && setIsHovering(!isHovering);
   };
 
-  const destructChildren = children => {
-    let data = '';
-    children && children.map(child => {
-      const obj = JSON.parse(JSON.stringify(child));
-      console.log(obj);
-      obj.props.children[0].props.childen.map(item => {
-        console.log('item: ', item);
-        if (item.props) data += item.props.children;else data += item;
-      });
-    });
-    return data;
-  };
-
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
   }, {
@@ -117,43 +143,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, {
+    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: destructChildren(children),
+    id: "textLineTwo",
+    classes: editTextClasses,
+    inputClasses: editInputClasses,
+    value: componentData.textLineTwo.text,
+    onChange: e => handleChange(e),
+    type: "text"
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    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("div", {
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    style: titleStyles,
+    className: titleClassList
+  }, componentData.title.text), /*#__PURE__*/_react.default.createElement("p", {
+    style: textStyles,
+    className: textClassList
+  }, componentData.textLineOne.text), /*#__PURE__*/_react.default.createElement("p", {
+    style: textStyles,
+    className: textClassList
+  }, componentData.textLineTwo.text), /*#__PURE__*/_react.default.createElement("p", {
     style: textStyles,
     className: textClassList
-  }, children)));
+  }, 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.61",
+  "version": "0.2.64",
   "private": false,
   "keywords": [
     "react",