trepur_components 0.2.56 → 0.2.59

package/dist/components/Input/index.js

@@ -42,12 +42,12 @@ const Input = _ref => {
     errors,
     value
   } = _ref;
-  let classList = 'flex flex-col';
+  let classList = 'flex flex-col ';
   classList += classes ? classes : '';
   let labelClassList = 'w-auto ';
   labelClassList += bold ? 'font-bold ' : '';
   labelClassList += labelClasses ? labelClasses : '';
-  let inputClassList = 'border px-2 rounded-md h-24';
+  let inputClassList = 'border px-2 rounded-md ';
   inputClassList += inputClasses ? inputClasses : '';
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id

package/dist/components/TextAndTitle/index.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
+require("core-js/modules/es.json.stringify.js");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _Input = _interopRequireDefault(require("../Input"));
@@ -17,6 +19,8 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 require("../index.css");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -30,6 +34,8 @@ const TextAndTitle = _ref => {
     id,
     classes,
     titleClasses,
+    editTitleClasses,
+    editTitleInputClasses,
     textClasses,
     children,
     title,
@@ -39,12 +45,17 @@ const TextAndTitle = _ref => {
     titleColor,
     textCenter,
     titleCenter,
-    withLiveUpdates,
+    withLiveUpdates = false,
     onSave
   } = _ref;
   const [isInEditingMode, setIsInEditingMode] = (0, _react.useState)(false);
   const [titleText, setTitleText] = (0, _react.useState)(title);
-  let classList = classes ? classes : '';
+  const [isHovering, setIsHovering] = (0, _react.useState)(false);
+  const hoverClasses = 'border-dashed border';
+  const classList = (0, _classnames.default)({
+    [hoverClasses]: withLiveUpdates && !isInEditingMode && isHovering,
+    [classes]: classes
+  });
   let titleClassList = 'text-md sm:text-lg ';
   titleClassList += titleBold ? 'font-bold ' : '';
   titleClassList += titleCenter ? 'text-center ' : '';
@@ -63,32 +74,52 @@ const TextAndTitle = _ref => {
   }; //-----------------------------------
 
   const toggleEditState = () => {
-    setIsInEditingMode(!isInEditingMode);
+    withLiveUpdates && setIsInEditingMode(!isInEditingMode);
   };
 
   const handleButtonSave = () => {
     toggleEditState();
     onSave(titleText, id);
+    setIsHovering(false);
+  };
+
+  const handleButtonCancel = () => {
+    toggleEditState();
+    setIsHovering(false);
   };
 
   const handleChange = e => {
     setTitleText(e.target.value);
   };
 
+  const toggleHoverState = () => {
+    withLiveUpdates && setIsHovering(!isHovering);
+  };
+
+  const destructChildren = children => {
+    let data = '';
+    children && children.map(child => {
+      data += "".concat(JSON.parse(JSON.stringify(child)).props.children);
+    });
+    return data;
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
   }, {
-    className: classList
+    className: classList,
+    onMouseOver: () => toggleHoverState(),
+    onMouseOut: () => toggleHoverState()
   }), withLiveUpdates && isInEditingMode ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
-    className: "w-full text-brand-primary mt-20 border border-2",
+    classes: editTitleClasses,
+    inputClasses: editTitleInputClasses,
     autoFocus: true,
     value: titleText,
     onChange: e => handleChange(e),
     type: "text"
   }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    className: "w-full text-brand-primary border border-2",
-    autoFocus: true,
-    value: "",
+    classes: "py-4",
+    value: destructChildren(children),
     onChange: e => handleChange(e),
     type: "text"
   }), /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -99,6 +130,16 @@ const TextAndTitle = _ref => {
     buttonHoverTextColor: "#000000",
     buttonHoverBorderColor: "#000000",
     buttonHoverBgColor: "white"
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    buttonClasses: "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,

package/package.json

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