trepur_components 0.2.69 → 0.2.70

package/dist/components/SocialBlock/index.js

@@ -1,16 +1,22 @@
 "use strict";
 
-require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.object.assign.js");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-require("core-js/modules/es.object.assign.js");
+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"));
+
 var _Button = _interopRequireDefault(require("../Button"));
 
 require("../index.css");
@@ -25,13 +31,44 @@ 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 SocialBlock = _ref => {
   let {
     id,
-    classNames,
+    classes,
     title,
-    text
+    text,
+    withLiveUpdates,
+    onSave,
+    saveButtonProps,
+    cancelButtonProps,
+    editTitleClasses,
+    editTextClasses,
+    editInputClasses
   } = _ref;
+  const defaultComponentData = {
+    title: {
+      text: title
+    },
+    text: {
+      text: text
+    }
+  };
+  const [isInEditingMode, setIsInEditingMode] = (0, _react.useState)(false);
+  const [isHovering, setIsHovering] = (0, _react.useState)(false);
+  const [componentData, setComponentData] = (0, _react.useState)(defaultComponentData);
+  const hoverClasses = 'border-dashed border';
+  const classList = (0, _classnames.default)({
+    [classes]: classes
+  });
+  const hoverClassList = (0, _classnames.default)({
+    [hoverClasses]: withLiveUpdates && !isInEditingMode && isHovering
+  });
   const socialButtons = [{
     classes: 'mx-2 w-16 py-4 border border-1',
     buttonBgColor: "#3b5999",
@@ -80,15 +117,89 @@ const SocialBlock = _ref => {
     hoverButtonTextColor: "#dc143c",
     url: "mailto:irupertbennett@gmail.com?subject=rupertbennett.com-&body=Referred from rupertbennett.com"
   }];
+
+  const toggleEditState = () => {
+    withLiveUpdates && setIsInEditingMode(!isInEditingMode);
+  };
+
+  const handleButtonSave = () => {
+    const arr = [];
+    arr.push({
+      key: 'title',
+      value: componentData.title.text
+    });
+    arr.push({
+      key: 'text',
+      value: componentData.text.text
+    });
+    toggleEditState();
+    onSave(arr, id);
+    setIsHovering(false);
+  };
+
+  const handleButtonCancel = () => {
+    toggleEditState();
+    setIsHovering(false);
+  };
+
+  const handleChange = e => {
+    let id = e.target.id;
+    console.log('id', id);
+    id = id.split('-')[id.split('-').length - 1];
+    setComponentData(_objectSpread(_objectSpread({}, componentData), {}, {
+      [id]: {
+        text: e.target.value
+      }
+    }));
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
   }, {
-    className: classNames
-  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h2", {
+    className: classList
+  }), withLiveUpdates && isInEditingMode ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    id: "title",
+    classes: editTitleClasses,
+    inputClasses: editInputClasses,
+    autoFocus: true,
+    value: componentData.title.text,
+    onChange: e => handleChange(e),
+    type: "text"
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    id: "text",
+    classes: editTextClasses,
+    inputClasses: editInputClasses,
+    value: componentData.text.text,
+    onChange: e => handleChange(e),
+    type: "text"
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    buttonClasses: "mt-4",
+    buttonText: "Save",
+    buttonOnClick: handleButtonSave,
+    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: "mt-4 ml-4",
+    buttonText: "Cancel",
+    buttonOnClick: handleButtonCancel,
+    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(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    onClick: toggleEditState,
+    className: hoverClassList
+  }, /*#__PURE__*/_react.default.createElement("h2", {
     className: "text-md sm:text-lg"
-  }, title), /*#__PURE__*/_react.default.createElement("p", {
+  }, componentData.title.text), /*#__PURE__*/_react.default.createElement("p", {
     className: "pt-4"
-  }, text)), /*#__PURE__*/_react.default.createElement("div", {
+  }, componentData.text.text)), /*#__PURE__*/_react.default.createElement("div", {
     className: "pt-4 text-center"
   }, socialButtons && socialButtons.map((button, i) => {
     return /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -108,7 +219,7 @@ const SocialBlock = _ref => {
       buttonIconBrand: button.iconBrand,
       iconSize: 2
     });
-  })));
+  }))));
 };
 
 var _default = SocialBlock;

package/dist/components/TextAndTitle/index.js

@@ -136,7 +136,6 @@ const TextAndTitle = _ref => {
     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

package/dist/index.js

@@ -165,6 +165,12 @@ Object.defineProperty(exports, "Search", {
     return _Search.default;
   }
 });
+Object.defineProperty(exports, "SocialBlock", {
+  enumerable: true,
+  get: function get() {
+    return _SocialBlock.default;
+  }
+});
 Object.defineProperty(exports, "StarRating", {
   enumerable: true,
   get: function get() {
@@ -268,6 +274,8 @@ var _Row = _interopRequireDefault(require("./components/Row"));
 
 var _Search = _interopRequireDefault(require("./components/Search"));
 
+var _SocialBlock = _interopRequireDefault(require("./components/SocialBlock"));
+
 var _StarRating = _interopRequireDefault(require("./components/StarRating"));
 
 var _Testimonial = _interopRequireDefault(require("./components/Testimonial"));

package/package.json

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