ecomlab-components-next 0.1.264 → 0.1.266

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ // hooks/useReveal.js
2
3
  'use client';
3
4
 
4
5
  Object.defineProperty(exports, "__esModule", {
@@ -7,31 +8,27 @@ Object.defineProperty(exports, "__esModule", {
7
8
  exports["default"] = void 0;
8
9
  var _react = require("react");
9
10
  var useReveal = function useReveal() {
10
- var threshold = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.1;
11
- var delayStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
11
+ var dependencies = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
12
12
  (0, _react.useEffect)(function () {
13
13
  var observer = new IntersectionObserver(function (entries) {
14
14
  entries.forEach(function (entry, index) {
15
- if (entry.isIntersecting) {
15
+ if (entry.isIntersecting && !entry.target.classList.contains('visible')) {
16
16
  setTimeout(function () {
17
17
  entry.target.classList.add('visible');
18
- }, index * delayStep);
18
+ }, index * 60);
19
19
  observer.unobserve(entry.target);
20
20
  }
21
21
  });
22
22
  }, {
23
- threshold: threshold
23
+ threshold: 0.1
24
24
  });
25
- var elements = document.querySelectorAll('.reveal');
25
+ var elements = document.querySelectorAll('.reveal:not(.visible)');
26
26
  elements.forEach(function (el) {
27
27
  return observer.observe(el);
28
28
  });
29
29
  return function () {
30
- elements.forEach(function (el) {
31
- return observer.unobserve(el);
32
- });
33
30
  observer.disconnect();
34
31
  };
35
- }, [threshold, delayStep]);
32
+ }, dependencies);
36
33
  };
37
34
  var _default = exports["default"] = useReveal;
@@ -109,7 +109,7 @@ var CardsServicesV2 = function CardsServicesV2(_ref) {
109
109
  _useState2 = _slicedToArray(_useState, 2),
110
110
  isShow = _useState2[0],
111
111
  setIsShow = _useState2[1];
112
- (0, _useReveal["default"])();
112
+ (0, _useReveal["default"])([isShow], true);
113
113
  var getFirstLetter = function getFirstLetter(label) {
114
114
  return (label === null || label === void 0 ? void 0 : label.charAt(0)) || '?';
115
115
  };
@@ -26,6 +26,8 @@ var QuestionsV2 = function QuestionsV2(_ref) {
26
26
  _useState2 = _slicedToArray(_useState, 2),
27
27
  currentDrop = _useState2[0],
28
28
  setCurrentDrop = _useState2[1];
29
+
30
+ // Используем хук, но с флагом, чтобы не трогать уже видимые элементы
29
31
  (0, _useReveal["default"])();
30
32
  var toggleItem = function toggleItem(question) {
31
33
  var newState = new Set(currentDrop);
@@ -35,6 +37,14 @@ var QuestionsV2 = function QuestionsV2(_ref) {
35
37
  newState.add(question);
36
38
  }
37
39
  setCurrentDrop(newState);
40
+
41
+ // Небольшая задержка для корректного обновления анимации
42
+ setTimeout(function () {
43
+ var visibleElements = document.querySelectorAll('.questions-v2__item.visible');
44
+ visibleElements.forEach(function (el) {
45
+ el.classList.add('visible');
46
+ });
47
+ }, 50);
38
48
  };
39
49
  return /*#__PURE__*/_react["default"].createElement("section", {
40
50
  className: "questions-v2",
@@ -49,16 +59,18 @@ var QuestionsV2 = function QuestionsV2(_ref) {
49
59
  }, title || 'Часто задаваемые вопросы'), /*#__PURE__*/_react["default"].createElement("p", {
50
60
  className: "questions-v2__subtitle"
51
61
  }, "\u041E\u0442\u0432\u0435\u0442\u044B \u043D\u0430 \u0441\u0430\u043C\u044B\u0435 \u043F\u043E\u043F\u0443\u043B\u044F\u0440\u043D\u044B\u0435 \u0432\u043E\u043F\u0440\u043E\u0441\u044B \u043E \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u0435")), /*#__PURE__*/_react["default"].createElement("div", {
52
- className: "questions-v2__list"
62
+ className: "questions-v2__list reveal"
53
63
  }, list === null || list === void 0 ? void 0 : list.map(function (_ref2, index) {
54
64
  var questions = _ref2.questions,
55
65
  response = _ref2.response;
66
+ var isOpen = currentDrop.has(questions);
56
67
  return /*#__PURE__*/_react["default"].createElement("div", {
57
68
  key: questions + index,
58
- className: "questions-v2__item ".concat(currentDrop.has(questions) ? 'questions-v2__item_open' : '', " reveal"),
69
+ className: "questions-v2__item ".concat(isOpen ? 'questions-v2__item_open' : ''),
59
70
  style: {
60
71
  '--index': index
61
- }
72
+ },
73
+ "data-open": isOpen
62
74
  }, /*#__PURE__*/_react["default"].createElement("div", {
63
75
  className: "questions-v2__question",
64
76
  onClick: function onClick() {
@@ -58,18 +58,7 @@ var DEFAULT_LIST = [{
58
58
  }];
59
59
 
60
60
  // Градиенты для аватарок как в референсе
61
- var avatarGradients = ['linear-gradient(135deg, #6B5CE7, #9B5DFF)',
62
- // фиолетовый
63
- 'linear-gradient(135deg, #EC4899, #F97316)',
64
- // розово-оранжевый
65
- 'linear-gradient(135deg, #22C55E, #0EA5E9)',
66
- // зелено-голубой
67
- 'linear-gradient(135deg, #F59E0B, #EF4444)',
68
- // оранжево-красный
69
- 'linear-gradient(135deg, #8B5CF6, #3B82F6)',
70
- // фиолетово-синий
71
- 'linear-gradient(135deg, #06B6D4, #6B5CE7)' // голубо-фиолетовый
72
- ];
61
+ var avatarGradients = ['linear-gradient(135deg, #6B5CE7, #9B5DFF)', 'linear-gradient(135deg, #EC4899, #F97316)', 'linear-gradient(135deg, #22C55E, #0EA5E9)', 'linear-gradient(135deg, #F59E0B, #EF4444)', 'linear-gradient(135deg, #8B5CF6, #3B82F6)', 'linear-gradient(135deg, #06B6D4, #6B5CE7)'];
73
62
  var SmartReplies = function SmartReplies(_ref) {
74
63
  var title = _ref.title,
75
64
  _ref$reviews = _ref.reviews,
@@ -78,11 +67,14 @@ var SmartReplies = function SmartReplies(_ref) {
78
67
  _useState2 = _slicedToArray(_useState, 2),
79
68
  visibleCount = _useState2[0],
80
69
  setVisibleCount = _useState2[1];
81
- (0, _useReveal["default"])();
82
70
  var showMore = function showMore() {
83
71
  setVisibleCount(reviews.length);
84
72
  };
85
73
  var visibleReviews = reviews.slice(0, visibleCount);
74
+
75
+ // Используем хук с зависимостью от visibleCount
76
+ // При изменении visibleCount (нажатии на кнопку) новые карточки анимируются сразу
77
+ (0, _useReveal["default"])([visibleCount], true);
86
78
  return /*#__PURE__*/_react["default"].createElement("section", {
87
79
  className: "smart-replies"
88
80
  }, /*#__PURE__*/_react["default"].createElement("div", {
package/dist/index.js CHANGED
@@ -63,6 +63,12 @@ Object.defineProperty(exports, "ButtonBasic", {
63
63
  return _ButtonBasic["default"];
64
64
  }
65
65
  });
66
+ Object.defineProperty(exports, "ButtonBasicV2", {
67
+ enumerable: true,
68
+ get: function get() {
69
+ return _ButtonBasicV["default"];
70
+ }
71
+ });
66
72
  Object.defineProperty(exports, "ButtonSignUp", {
67
73
  enumerable: true,
68
74
  get: function get() {
@@ -446,6 +452,7 @@ var _SmartReplies = _interopRequireDefault(require("./components/ConstructorComp
446
452
  var _CardsWithButton = _interopRequireDefault(require("./components/ConstructorComponents/CardsWithButton/CardsWithButton"));
447
453
  var _LogosStrip = _interopRequireDefault(require("./components/ConstructorComponents/LogosStrip/LogosStrip"));
448
454
  var _ButtonBasic = _interopRequireDefault(require("./components/Buttons/ButtonBasic/ButtonBasic"));
455
+ var _ButtonBasicV = _interopRequireDefault(require("./components/Buttons/ButtonBasicV2/ButtonBasicV2"));
449
456
  var _ButtonSignUp = _interopRequireDefault(require("./components/Buttons/ButtonSignUp/ButtonSignUp"));
450
457
  var _InputDinamycPlaceholder = _interopRequireDefault(require("./components/Inputs/InputDinamycPlaceholder/InputDinamycPlaceholder"));
451
458
  var _ModalCrm = _interopRequireDefault(require("./components/ModalCrm/ModalCrm"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ecomlab-components-next",
3
- "version": "0.1.264",
3
+ "version": "0.1.266",
4
4
  "description": "A set of common and reusable React components",
5
5
  "main": "dist/index.js",
6
6
  "files": [