ecomlab-components-next 0.1.32 → 0.1.34

package/dist/components/Article/SocialMedia/SocialMedia.js

@@ -0,0 +1,242 @@
+"use strict";
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SocialMedia = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ButtonBasic = _interopRequireDefault(require("../../Buttons/ButtonBasic/ButtonBasic"));
+var _image = _interopRequireDefault(require("next/image"));
+var _ModalSelectionSocialMedia = require("./ModalSelectionSocialMedia/ModalSelectionSocialMedia");
+var _EditWrapper = require("../EditWrapper/EditWrapper");
+var _useDebounce = require("../../../common/hooks/useDebounce");
+var _link = _interopRequireDefault(require("next/link"));
+var _dzen = _interopRequireDefault(require("./img/dzen.svg"));
+var _facebook = _interopRequireDefault(require("./img/facebook.svg"));
+var _insta = _interopRequireDefault(require("./img/insta.svg"));
+var _linkendIn = _interopRequireDefault(require("./img/linkendIn.svg"));
+var _ok = _interopRequireDefault(require("./img/ok.svg"));
+var _pikabu = _interopRequireDefault(require("./img/pikabu.svg"));
+var _telegram = _interopRequireDefault(require("./img/telegram.svg"));
+var _vk = _interopRequireDefault(require("./img/vk.svg"));
+var _wp = _interopRequireDefault(require("./img/wp.svg"));
+var _x = _interopRequireDefault(require("./img/x.svg"));
+require("./SocialMedia.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // import vcru from './img/vcru.svg'
+var list_media = {
+  'facebook': [_facebook["default"], '#0863F7'],
+  'dzen.ru': [_dzen["default"], '#000'],
+  'instagram.com': [_insta["default"], 'conic-gradient(from 133deg at 50.22% 50%, #F5854C 131.40000343322754deg, #6256CB 194.40000772476196deg, #9A39B9 298.7999939918518deg, #D8317A 360deg)'],
+  'linkedin.com': [_linkendIn["default"], '#0077B5'],
+  // 'vc.ru': [vcru, '#F6E4E8'],
+  'ok.ru': [_ok["default"], '#FF7600'],
+  'pikabu.ru': [_pikabu["default"], '#88C657'],
+  't.me': [_telegram["default"], '#3390EC'],
+  'vk.com': [_vk["default"], '#07F'],
+  'whatsapp.com': [_wp["default"], '#27C200'],
+  'x.com': [_x["default"], '#020203']
+};
+var SocialMedia = exports.SocialMedia = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _data$, _data$2, _list_link;
+  var data = _ref.data,
+    setCurrentIndex = _ref.setCurrentIndex,
+    before = _ref.before,
+    id = _ref.id,
+    setContentArr = _ref.setContentArr,
+    setBeforeBlock = _ref.setBeforeBlock,
+    setIsModal = _ref.setIsModal,
+    ind = _ref.ind,
+    deleteBlock = _ref.deleteBlock,
+    changeContent = _ref.changeContent,
+    _ref$readonly = _ref.readonly,
+    readonly = _ref$readonly === void 0 ? false : _ref$readonly,
+    draggableElement = _ref.draggableElement,
+    setDraggableElement = _ref.setDraggableElement,
+    articleId = _ref.articleId,
+    fetchDataById = _ref.fetchDataById,
+    changeBlock = _ref.changeBlock;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isModalSocial = _useState2[0],
+    setIsModalSocial = _useState2[1];
+  var _useState3 = (0, _react.useState)((_data$ = data[0]) !== null && _data$ !== void 0 && _data$.properties ? (_data$2 = data[0]) === null || _data$2 === void 0 ? void 0 : _data$2.properties : {}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputValue = _useState4[0],
+    _setInputValue = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    listSocial = _useState6[0],
+    setListSocial = _useState6[1];
+
+  // Удаление блока
+  var handleDeleteBlock = function handleDeleteBlock(e) {
+    //  setContent(e.currentTarget.textContent)
+    setContentArr(function (prev) {
+      return prev.filter(function (el) {
+        if ((el === null || el === void 0 ? void 0 : el.block_id) != id) {
+          return el;
+        }
+      });
+    });
+    deleteBlock(id);
+  };
+  var getIcon = function getIcon(path) {
+    var current;
+    for (var key in list_media) {
+      if (path.includes(key)) {
+        current = list_media[key];
+      }
+    }
+    if (current) {
+      return current;
+    }
+  };
+  (0, _react.useEffect)(function () {
+    // if (Array.isArray(data)) {
+    //     if (data?.length > 0) {
+    //         let obj = {}
+    //         data[0]?.properties?.forEach((el => {
+    //             if (el) {
+    //                 const { name, value } = el
+    //                 obj[name] = value
+    //             }
+    //         }))
+    //         setInputValue(obj)
+    //         setListSocial(data)
+    //     }
+    // }
+  }, [data]);
+  (0, _react.useEffect)(function () {
+    var keys = Object.keys(inputValue);
+    if ((keys === null || keys === void 0 ? void 0 : keys.length) > 0) {
+      setListSocial(keys === null || keys === void 0 ? void 0 : keys.map(function (name) {
+        return _defineProperty({}, name, inputValue === null || inputValue === void 0 ? void 0 : inputValue[name]);
+      }));
+    }
+  }, [inputValue]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      // прикрутить открытие системного диалога с выбором изображения
+      focus: function focus() {},
+      data: inputValue
+    };
+  }, [inputValue]);
+  var list_link = function list_link() {
+    var list = [];
+    for (var el in inputValue) {
+      list.push({
+        name: el,
+        value: inputValue[el]
+      });
+    }
+    return list;
+  };
+  var debounceChange = (0, _useDebounce.useDebounce)(changeContent, 1000);
+  var handleInput = function handleInput(e) {
+    //  setContent(e.currentTarget.textContent)
+    debounceChange(id, [{
+      value: '',
+      properties: inputValue
+    }]);
+    setContentArr(function (prev) {
+      return prev.map(function (el) {
+        if ((el === null || el === void 0 ? void 0 : el.block_id) == id) {
+          return _objectSpread(_objectSpread({}, el), {}, {
+            content: [{
+              value: '',
+              properties: inputValue
+            }]
+          });
+        } else {
+          return el;
+        }
+      });
+    });
+  };
+  (0, _react.useEffect)(function () {
+    handleInput();
+  }, [inputValue]);
+  return /*#__PURE__*/_react["default"].createElement(_EditWrapper.EditWrapper, {
+    id: id,
+    before: before,
+    articleId: articleId,
+    changeBlock: changeBlock,
+    readonly: readonly,
+    draggableElement: draggableElement,
+    setDraggableElement: setDraggableElement,
+    fetchDataById: fetchDataById,
+    deleteFunc: function deleteFunc(e) {
+      return handleDeleteBlock(id);
+    },
+    type: "social",
+    child: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "social-media-links",
+      onClick: function onClick(e) {
+        setCurrentIndex(ind);
+        setBeforeBlock(before);
+      },
+      onContextMenu: function onContextMenu(e) {
+        if (!readonly) {
+          e.preventDefault();
+          setCurrentIndex(ind);
+          setIsModal(true);
+        }
+      }
+    }, !readonly && /*#__PURE__*/_react["default"].createElement(_ButtonBasic["default"], {
+      grey: true,
+      text: 'Добавить ссылку',
+      onClick: function onClick(e) {
+        return setIsModalSocial(true);
+      }
+    }), isModalSocial && !readonly && /*#__PURE__*/_react["default"].createElement(_ModalSelectionSocialMedia.ModalSelectionSocialMedia, {
+      inputValue: inputValue,
+      setInputValue: function setInputValue(e) {
+        return _setInputValue(e);
+      },
+      setIsModal: function setIsModal(e) {
+        return setIsModalSocial(e);
+      }
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "social-media-links__links"
+    }, (_list_link = list_link()) === null || _list_link === void 0 ? void 0 : _list_link.map(function (_ref3) {
+      var value = _ref3.value,
+        name = _ref3.name,
+        icon = _ref3.icon;
+      if (value) {
+        var _getIcon, _getIcon2, _name$charAt;
+        return /*#__PURE__*/_react["default"].createElement(_link["default"], {
+          href: value,
+          target: "_blank",
+          className: "social-media-links__item-bkg",
+          style: {
+            background: ((_getIcon = getIcon(value)) === null || _getIcon === void 0 ? void 0 : _getIcon.length) > 0 && getIcon(value)[1]
+          },
+          key: value
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "social-media-links__item"
+        }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
+          alt: "icon",
+          className: "article__link-icon",
+          src: ((_getIcon2 = getIcon(value)) === null || _getIcon2 === void 0 ? void 0 : _getIcon2.length) > 0 && getIcon(value)[0]
+        }), /*#__PURE__*/_react["default"].createElement("h3", {
+          className: "social-media-links__link-name"
+        }, "\u041C\u044B \u0432 ", (name === null || name === void 0 || (_name$charAt = name.charAt(0)) === null || _name$charAt === void 0 ? void 0 : _name$charAt.toUpperCase()) + (name === null || name === void 0 ? void 0 : name.slice(1)))));
+      }
+    }))))
+  });
+});

package/dist/components/Article/SocialMedia/SocialMedia.scss

@@ -0,0 +1,57 @@
+.social-media-links {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    width: 100%;
+    align-items: flex-start;
+    gap: 12px;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+
+    &__item-bkg {
+        display: flex;
+        min-width: 257px;
+        height: 74px;
+        padding: 10px;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+        border-radius: 8px;
+        background: #3390EC;
+    }
+
+    &__item {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        background-color: #fff;
+    }
+
+    &__link-name {
+        color: #333;
+        text-align: center;
+        font-family: "Golos Text";
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 18px;
+        border-radius: 8px;
+    }
+
+    &__links {
+        gap: 12px;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    &__name-transform {
+        
+        &::first-letter {
+                text-transform: uppercase;
+            } 
+    }
+}

package/dist/components/Article/SocialMedia/img/dzen.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" rx="4" fill="black"/>
+<path d="M5.00397 13.7303C5.00133 13.8199 5 13.9097 5 14C5 14.0902 5.00133 14.1801 5.00397 14.2697C8.64997 14.3152 10.6996 14.5646 12.0675 15.9325C13.4354 17.3004 13.6848 19.35 13.7303 22.996C13.8199 22.9987 13.9098 23 14 23C14.0902 23 14.1801 22.9987 14.2697 22.996C14.3152 19.35 14.5646 17.3004 15.9325 15.9325C17.3004 14.5646 19.35 14.3152 22.996 14.2697C22.9987 14.1801 23 14.0902 23 14C23 13.9097 22.9987 13.8199 22.996 13.7303C19.35 13.6848 17.3004 13.4354 15.9325 12.0675C14.5646 10.6996 14.3152 8.64996 14.2697 5.00397C14.1801 5.00133 14.0902 5 14 5C13.9098 5 13.8199 5.00133 13.7303 5.00397C13.6848 8.64996 13.4354 10.6996 12.0675 12.0675C10.6996 13.4354 8.64996 13.6848 5.00397 13.7303Z" fill="white"/>
+</svg>

package/dist/components/Article/SocialMedia/img/facebook.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" rx="4" fill="#0863F7"/>
+<path d="M15.0468 20.7476V14.6006H17.1205L17.4288 12.1939H15.0468V10.6609C15.0468 9.96638 15.2403 9.49088 16.237 9.49088H17.5V7.34513C16.8855 7.27928 16.2678 7.24748 15.6498 7.24988C13.8168 7.24988 12.5583 8.36888 12.5583 10.4231V12.1894H10.498V14.5961H12.5628V20.7476H15.0468Z" fill="white"/>
+</svg>