@sima-land/moleculas 16.0.0-alpha.6 → 16.0.0-alpha.8

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.
Files changed (181) hide show
  1. package/README.md +24 -0
  2. package/common/components/badge/index.d.ts +3 -3
  3. package/common/components/badge/index.js +20 -53
  4. package/common/components/badge/index.js.map +1 -0
  5. package/common/components/badge-list/index.d.ts +3 -3
  6. package/common/components/badge-list/index.js +14 -35
  7. package/common/components/badge-list/index.js.map +1 -0
  8. package/common/components/interactive-image/index.d.ts +4 -0
  9. package/common/components/interactive-image/index.js +7 -0
  10. package/common/components/interactive-image/index.js.map +1 -0
  11. package/common/components/interactive-image/interactive-image-util.scss +10 -0
  12. package/common/components/interactive-image/interactive-image.d.ts +15 -0
  13. package/common/components/interactive-image/interactive-image.js +56 -0
  14. package/common/components/interactive-image/interactive-image.js.map +1 -0
  15. package/common/components/interactive-image/interactive-image.module.scss +47 -0
  16. package/common/components/interactive-image/types.d.ts +23 -0
  17. package/common/components/interactive-image/types.js +3 -0
  18. package/common/components/interactive-image/types.js.map +1 -0
  19. package/common/components/intractive-image/index.d.ts +2 -0
  20. package/common/components/intractive-image/index.js +1 -0
  21. package/common/components/intractive-image/index.js.map +1 -0
  22. package/common/components/intractive-image/interactive-image.d.ts +6 -4
  23. package/common/components/intractive-image/interactive-image.js +12 -50
  24. package/common/components/intractive-image/interactive-image.js.map +1 -0
  25. package/common/components/intractive-image/types.d.ts +8 -4
  26. package/common/components/intractive-image/types.js +1 -0
  27. package/common/components/intractive-image/types.js.map +1 -0
  28. package/common/components/media-modal/__mocks__/index.js +1 -0
  29. package/common/components/media-modal/__mocks__/index.js.map +1 -0
  30. package/common/components/media-modal/index.js +1 -0
  31. package/common/components/media-modal/index.js.map +1 -0
  32. package/common/components/media-modal/layout.js +8 -35
  33. package/common/components/media-modal/layout.js.map +1 -0
  34. package/common/components/media-modal/parts/all-round-view.js +6 -42
  35. package/common/components/media-modal/parts/all-round-view.js.map +1 -0
  36. package/common/components/media-modal/parts/index.js +18 -13
  37. package/common/components/media-modal/parts/index.js.map +1 -0
  38. package/common/components/media-modal/parts/media-content.js +19 -46
  39. package/common/components/media-modal/parts/media-content.js.map +1 -0
  40. package/common/components/media-modal/parts/media-view.js +5 -32
  41. package/common/components/media-modal/parts/media-view.js.map +1 -0
  42. package/common/components/media-modal/parts/product-brief.js +6 -28
  43. package/common/components/media-modal/parts/product-brief.js.map +1 -0
  44. package/common/components/media-modal/parts/review.js +5 -17
  45. package/common/components/media-modal/parts/review.js.map +1 -0
  46. package/common/components/media-modal/parts/scroll-section.js +3 -6
  47. package/common/components/media-modal/parts/scroll-section.js.map +1 -0
  48. package/common/components/media-modal/parts/thumbnail.d.ts +3 -3
  49. package/common/components/media-modal/parts/thumbnail.js +5 -38
  50. package/common/components/media-modal/parts/thumbnail.js.map +1 -0
  51. package/common/components/media-modal/parts/thumbnails.js +6 -41
  52. package/common/components/media-modal/parts/thumbnails.js.map +1 -0
  53. package/common/components/media-modal/types.js +1 -0
  54. package/common/components/media-modal/types.js.map +1 -0
  55. package/common/components/media-modal/utils.js +1 -0
  56. package/common/components/media-modal/utils.js.map +1 -0
  57. package/common/components/modifier/index.d.ts +2 -48
  58. package/common/components/modifier/index.js +4 -114
  59. package/common/components/modifier/index.js.map +1 -0
  60. package/common/components/modifier/modifier.d.ts +14 -0
  61. package/common/components/modifier/modifier.js +74 -0
  62. package/common/components/modifier/modifier.js.map +1 -0
  63. package/common/components/modifier/{modifiers.module.scss → modifier.module.scss} +9 -0
  64. package/common/components/modifier/types.d.ts +35 -0
  65. package/common/components/modifier/types.js +3 -0
  66. package/common/components/modifier/types.js.map +1 -0
  67. package/common/components/pagination-controls/index.d.ts +2 -0
  68. package/common/components/pagination-controls/index.js +10 -0
  69. package/common/components/pagination-controls/index.js.map +1 -0
  70. package/common/components/pagination-controls/pagination-controls.d.ts +38 -0
  71. package/common/components/pagination-controls/pagination-controls.js +82 -0
  72. package/common/components/pagination-controls/pagination-controls.js.map +1 -0
  73. package/common/components/pagination-controls/pagination-controls.module.scss +34 -0
  74. package/common/components/pagination-controls/types.d.ts +20 -0
  75. package/common/components/pagination-controls/types.js +3 -0
  76. package/common/components/pagination-controls/types.js.map +1 -0
  77. package/common/components/product-info/index.js +3 -13
  78. package/common/components/product-info/index.js.map +1 -0
  79. package/common/components/product-info/parts.d.ts +9 -7
  80. package/common/components/product-info/parts.js +18 -79
  81. package/common/components/product-info/parts.js.map +1 -0
  82. package/common/components/product-info/types.d.ts +2 -2
  83. package/common/components/product-info/types.js +1 -0
  84. package/common/components/product-info/types.js.map +1 -0
  85. package/common/components/product-info/utils.js +1 -0
  86. package/common/components/product-info/utils.js.map +1 -0
  87. package/common/components/rating-counter/index.js +6 -20
  88. package/common/components/rating-counter/index.js.map +1 -0
  89. package/common/constants.js +1 -0
  90. package/common/constants.js.map +1 -0
  91. package/common/hooks/index.d.ts +1 -0
  92. package/common/hooks/index.js +2 -0
  93. package/common/hooks/index.js.map +1 -0
  94. package/common/types.js +1 -0
  95. package/common/types.js.map +1 -0
  96. package/desktop/components/breadcrumbs/index.js +14 -46
  97. package/desktop/components/breadcrumbs/index.js.map +1 -0
  98. package/desktop/components/gallery-modal/__mocks__/index.js +1 -0
  99. package/desktop/components/gallery-modal/__mocks__/index.js.map +1 -0
  100. package/desktop/components/gallery-modal/components/all-round-view.js +8 -42
  101. package/desktop/components/gallery-modal/components/all-round-view.js.map +1 -0
  102. package/desktop/components/gallery-modal/components/gallery-modal.d.ts +2 -2
  103. package/desktop/components/gallery-modal/components/gallery-modal.js +8 -59
  104. package/desktop/components/gallery-modal/components/gallery-modal.js.map +1 -0
  105. package/desktop/components/gallery-modal/components/image-overlay.d.ts +2 -2
  106. package/desktop/components/gallery-modal/components/image-overlay.js +3 -16
  107. package/desktop/components/gallery-modal/components/image-overlay.js.map +1 -0
  108. package/desktop/components/gallery-modal/components/review-info.js +6 -47
  109. package/desktop/components/gallery-modal/components/review-info.js.map +1 -0
  110. package/desktop/components/gallery-modal/components/thumbnail.d.ts +2 -2
  111. package/desktop/components/gallery-modal/components/thumbnail.js +3 -6
  112. package/desktop/components/gallery-modal/components/thumbnail.js.map +1 -0
  113. package/desktop/components/gallery-modal/index.js +1 -0
  114. package/desktop/components/gallery-modal/index.js.map +1 -0
  115. package/desktop/components/gallery-modal/types.js +1 -0
  116. package/desktop/components/gallery-modal/types.js.map +1 -0
  117. package/desktop/components/gallery-modal/utils.d.ts +2 -2
  118. package/desktop/components/gallery-modal/utils.js +1 -0
  119. package/desktop/components/gallery-modal/utils.js.map +1 -0
  120. package/desktop/components/modifiers/button/index.d.ts +3 -3
  121. package/desktop/components/modifiers/button/index.js +4 -31
  122. package/desktop/components/modifiers/button/index.js.map +1 -0
  123. package/desktop/components/modifiers/group/index.js +7 -31
  124. package/desktop/components/modifiers/group/index.js.map +1 -0
  125. package/desktop/components/modifiers/group/utils.js +1 -0
  126. package/desktop/components/modifiers/group/utils.js.map +1 -0
  127. package/desktop/components/person-info/index.js +3 -25
  128. package/desktop/components/person-info/index.js.map +1 -0
  129. package/desktop/components/product-card/index.d.ts +6 -6
  130. package/desktop/components/product-card/index.js +7 -42
  131. package/desktop/components/product-card/index.js.map +1 -0
  132. package/desktop/components/product-carousel/hover-card.d.ts +2 -2
  133. package/desktop/components/product-carousel/hover-card.js +6 -40
  134. package/desktop/components/product-carousel/hover-card.js.map +1 -0
  135. package/desktop/components/product-carousel/index.d.ts +11 -6
  136. package/desktop/components/product-carousel/index.js +64 -86
  137. package/desktop/components/product-carousel/index.js.map +1 -0
  138. package/desktop/components/product-carousel/utils.d.ts +2 -2
  139. package/desktop/components/product-carousel/utils.js +1 -0
  140. package/desktop/components/product-carousel/utils.js.map +1 -0
  141. package/desktop/components/promotion-card/banner-title.js +8 -18
  142. package/desktop/components/promotion-card/banner-title.js.map +1 -0
  143. package/desktop/components/promotion-card/estimate.js +3 -5
  144. package/desktop/components/promotion-card/estimate.js.map +1 -0
  145. package/desktop/components/promotion-card/index.d.ts +3 -3
  146. package/desktop/components/promotion-card/index.js +7 -54
  147. package/desktop/components/promotion-card/index.js.map +1 -0
  148. package/desktop/components/promotion-card/placeholder.d.ts +2 -2
  149. package/desktop/components/promotion-card/placeholder.js +3 -5
  150. package/desktop/components/promotion-card/placeholder.js.map +1 -0
  151. package/desktop/components/promotion-card/types.js +1 -0
  152. package/desktop/components/promotion-card/types.js.map +1 -0
  153. package/mobile/components/action-circles/index.js +4 -5
  154. package/mobile/components/action-circles/index.js.map +1 -0
  155. package/mobile/components/action-list/index.js +5 -4
  156. package/mobile/components/action-list/index.js.map +1 -0
  157. package/mobile/components/breadcrumbs/index.js +3 -2
  158. package/mobile/components/breadcrumbs/index.js.map +1 -0
  159. package/mobile/components/modifiers-list/index.d.ts +3 -3
  160. package/mobile/components/modifiers-list/index.js +3 -7
  161. package/mobile/components/modifiers-list/index.js.map +1 -0
  162. package/mobile/components/modifiers-list/modifier-item/index.d.ts +2 -2
  163. package/mobile/components/modifiers-list/modifier-item/index.js +3 -10
  164. package/mobile/components/modifiers-list/modifier-item/index.js.map +1 -0
  165. package/mobile/components/person-info/index.js +4 -20
  166. package/mobile/components/person-info/index.js.map +1 -0
  167. package/mobile/components/product-row/index.js +3 -33
  168. package/mobile/components/product-row/index.js.map +1 -0
  169. package/mobile/components/product-slider/index.d.ts +2 -2
  170. package/mobile/components/product-slider/index.js +9 -32
  171. package/mobile/components/product-slider/index.js.map +1 -0
  172. package/mobile/components/pseudo-input/index.d.ts +2 -2
  173. package/mobile/components/pseudo-input/index.js +3 -18
  174. package/mobile/components/pseudo-input/index.js.map +1 -0
  175. package/mobile/components/search-bar/index.d.ts +6 -6
  176. package/mobile/components/search-bar/index.js +16 -55
  177. package/mobile/components/search-bar/index.js.map +1 -0
  178. package/mobile/components/select-screen/index.d.ts +4 -4
  179. package/mobile/components/select-screen/index.js +9 -46
  180. package/mobile/components/select-screen/index.js.map +1 -0
  181. package/package.json +7 -9
package/README.md ADDED
@@ -0,0 +1,24 @@
1
+ # UI-moleculas
2
+
3
+ В этом проекте собраны UI-компоненты, привязанные к контексту интернет-магазина.
4
+
5
+ ## Использование
6
+
7
+ ### Установка
8
+
9
+ ```sh
10
+ # с помощью npm
11
+ npm i -S @sima-land/moleculas
12
+
13
+ # или с помощью yarn
14
+ yarn add @sima-land/moleculas
15
+ ```
16
+
17
+ ### Настройка среды
18
+
19
+ Компоненты библиотеки используют:
20
+
21
+ - импорты css/scss-файлов как css-модулей (каждый такой файл промаркирован в виде `*.module.scss`)
22
+ - импорты svg-файлов как react-компонентов
23
+
24
+ Поэтому, для использования библиотеки необходимо сконфигурировать среду (сборщик или тестовый фреймворк) таким образом чтобы данные импорты работали корректно.
@@ -1,9 +1,9 @@
1
- import React from 'react';
1
+ import { AnchorHTMLAttributes } from 'react';
2
2
  export interface BadgeField {
3
3
  type: 'text' | 'timer' | 'svg-url';
4
4
  value: string;
5
5
  }
6
- export interface BadgeProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
6
+ export interface BadgeProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
7
7
  /** Основной цвет, используется как цвет обводки, иконок и текста. */
8
8
  color?: string;
9
9
  /** Содержимое шильдика. */
@@ -16,4 +16,4 @@ export interface BadgeProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEl
16
16
  * @param props Свойства.
17
17
  * @return Элемент.
18
18
  */
19
- export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLAnchorElement>>;
19
+ export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLAnchorElement>>;
@@ -1,44 +1,11 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- var __rest = (this && this.__rest) || function (s, e) {
26
- var t = {};
27
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
28
- t[p] = s[p];
29
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
30
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
31
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
32
- t[p[i]] = s[p[i]];
33
- }
34
- return t;
35
- };
36
2
  var __importDefault = (this && this.__importDefault) || function (mod) {
37
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
38
4
  };
39
5
  Object.defineProperty(exports, "__esModule", { value: true });
40
6
  exports.Badge = void 0;
41
- const react_1 = __importStar(require("react"));
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const react_1 = require("react");
42
9
  const timer_1 = require("@sima-land/ui-nucleons/timer");
43
10
  const bind_1 = __importDefault(require("classnames/bind"));
44
11
  const badge_module_scss_1 = __importDefault(require("./badge.module.scss"));
@@ -48,26 +15,25 @@ const cx = bind_1.default.bind(badge_module_scss_1.default);
48
15
  * @param props Свойства.
49
16
  * @return Элемент.
50
17
  */
51
- exports.Badge = (0, react_1.forwardRef)(function Badge(_a, ref) {
52
- var { className, color, fields, href, style, 'data-testid': testId = 'badge' } = _a, restProps = __rest(_a, ["className", "color", "fields", "href", "style", 'data-testid']);
18
+ exports.Badge = (0, react_1.forwardRef)(function Badge({ className, color, fields, href, style, 'data-testid': testId = 'badge', ...restProps }, ref) {
53
19
  const iconOnly = fields.length === 1 && fields[0].type === 'svg-url';
54
- return (react_1.default.createElement("a", Object.assign({ ref: ref }, restProps, { "data-testid": testId, href: href, style: Object.assign(Object.assign({}, style), { '--badge-color': color }), className: cx('root', iconOnly && 'icon-only', href && 'interactive', className), children: iconOnly ? (react_1.default.createElement("img", { className: cx('icon'), src: fields[0].value, alt: '' })) : (
20
+ return ((0, jsx_runtime_1.jsx)("a", { ref: ref, ...restProps, "data-testid": testId, href: href, style: { ...style, '--badge-color': color }, className: cx('root', iconOnly && 'icon-only', href && 'interactive', className), children: iconOnly ? ((0, jsx_runtime_1.jsx)("img", { className: cx('icon'), src: fields[0].value, alt: '' })) : (
55
21
  // вложенный span нужен для того чтобы объединить `display: inline-flex` и `text-overflow: ellipsis`
56
- react_1.default.createElement("span", { className: cx('content') }, fields.reduce((acc, item, i) => {
57
- let result = null;
58
- // на данный момент сочетание иконки с другими элементами не предусмотрено макетами - игнорируем
59
- switch (item.type) {
60
- case 'text':
61
- result = item.value;
62
- break;
63
- case 'timer':
64
- result = (react_1.default.createElement(timer_1.Timer, { key: i, date: item.value, timeout: 1000 * 60, format: formatDistance }));
65
- break;
66
- }
67
- acc.push(result);
68
- i < fields.length - 1 && acc.push(' ');
69
- return acc;
70
- }, []))) })));
22
+ (0, jsx_runtime_1.jsx)("span", { className: cx('content'), children: fields.reduce((acc, item, i) => {
23
+ let result = null;
24
+ // на данный момент сочетание иконки с другими элементами не предусмотрено макетами - игнорируем
25
+ switch (item.type) {
26
+ case 'text':
27
+ result = item.value;
28
+ break;
29
+ case 'timer':
30
+ result = ((0, jsx_runtime_1.jsx)(timer_1.Timer, { date: item.value, timeout: 1000 * 60, format: formatDistance }, i));
31
+ break;
32
+ }
33
+ acc.push(result);
34
+ i < fields.length - 1 && acc.push(' ');
35
+ return acc;
36
+ }, []) })) }));
71
37
  });
72
38
  /**
73
39
  * Форматирует оставшееся время.
@@ -81,3 +47,4 @@ const formatDistance = ({ days, hours, minutes, }) => [toTimePart(days), ...[hou
81
47
  * @return Отформатированное число.
82
48
  */
83
49
  const toTimePart = (n) => `${n}`.padStart(2, '0');
50
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/badge/index.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAoE;AACpE,wDAAqD;AACrD,2DAAyC;AACzC,4EAAyC;AAkBzC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,2BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACU,QAAA,KAAK,GAAG,IAAA,kBAAU,EAAgC,SAAS,KAAK,CAC3E,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,GAAG,OAAO,EAAE,GAAG,SAAS,EAAE,EACxF,GAAG;IAEH,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC;IAErE,OAAO,CACL,8BACE,GAAG,EAAE,GAAG,KACJ,SAAS,iBACA,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,eAAe,EAAE,KAAK,EAAS,EAClD,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,QAAQ,IAAI,WAAW,EAAE,IAAI,IAAI,aAAa,EAAE,SAAS,CAAC,EAChF,QAAQ,EACN,QAAQ,CAAC,CAAC,CAAC,CACT,gCAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAC,EAAE,GAAG,CAC5D,CAAC,CAAC,CAAC;QACF,oGAAoG;QACpG,iCAAM,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,YAC3B,MAAM,CAAC,MAAM,CAAc,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE;gBAC3C,IAAI,MAAM,GAAG,IAAI,CAAC;gBAElB,gGAAgG;gBAChG,QAAQ,IAAI,CAAC,IAAI,EAAE;oBACjB,KAAK,MAAM;wBACT,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;wBACpB,MAAM;oBACR,KAAK,OAAO;wBACV,MAAM,GAAG,CACP,uBAAC,aAAK,IAAS,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,MAAM,EAAE,cAAc,IAA/D,CAAC,CAAkE,CAChF,CAAC;wBACF,MAAM;iBACT;gBAED,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAEjB,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAEvC,OAAO,GAAG,CAAC;YACb,CAAC,EAAE,EAAE,CAAC,GACD,CACR,GAEH,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,cAAc,GAAG,CAAC,EACtB,IAAI,EACJ,KAAK,EACL,OAAO,GAKR,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,KAAK,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAElF;;;;GAIG;AACH,MAAM,UAAU,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC"}
@@ -1,11 +1,11 @@
1
- import React, { ReactNode } from 'react';
1
+ import { ReactNode, CSSProperties } from 'react';
2
2
  export interface BadgeListProps {
3
3
  /** Список данных для шильдиков. */
4
- children?: React.ReactNode;
4
+ children?: ReactNode;
5
5
  /** CSS-класс корневого элемента. */
6
6
  className?: string;
7
7
  /** Стили корневого элемента. */
8
- style?: React.CSSProperties;
8
+ style?: CSSProperties;
9
9
  /** Лимит количества строк, не влезающие шильдики будут скрыты. */
10
10
  lineLimit?: number;
11
11
  }
@@ -1,33 +1,11 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
2
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
4
  };
28
5
  Object.defineProperty(exports, "__esModule", { value: true });
29
6
  exports.BadgeList = void 0;
30
- const react_1 = __importStar(require("react"));
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const react_1 = require("react");
31
9
  const badge_1 = require("../badge");
32
10
  const bind_1 = __importDefault(require("classnames/bind"));
33
11
  const badge_list_module_scss_1 = __importDefault(require("./badge-list.module.scss"));
@@ -37,16 +15,16 @@ const cx = bind_1.default.bind(badge_list_module_scss_1.default);
37
15
  * @param props Свойства компонента.
38
16
  * @return Элемент.
39
17
  */
40
- const BadgeList = ({ children, className, lineLimit, style }) => (react_1.default.createElement("div", { className: cx('root', className, lineLimit && 'line-limit'), style: lineLimit ? Object.assign(Object.assign({}, style), { '--line-limit': lineLimit }) : style }, react_1.Children.toArray(children).map((child, index) => {
41
- switch (true) {
42
- case (0, react_1.isValidElement)(child) && child.type === badge_1.Badge:
43
- return react_1.default.createElement(BadgeListSlot, { key: index }, child);
44
- case (0, react_1.isValidElement)(child) && child.type === BadgeListSlot:
45
- return child;
46
- default:
47
- return null;
48
- }
49
- })));
18
+ const BadgeList = ({ children, className, lineLimit, style }) => ((0, jsx_runtime_1.jsx)("div", { className: cx('root', className, lineLimit && 'line-limit'), style: lineLimit ? { ...style, '--line-limit': lineLimit } : style, children: react_1.Children.toArray(children).map((child, index) => {
19
+ switch (true) {
20
+ case (0, react_1.isValidElement)(child) && child.type === badge_1.Badge:
21
+ return (0, jsx_runtime_1.jsx)(BadgeListSlot, { children: child }, index);
22
+ case (0, react_1.isValidElement)(child) && child.type === BadgeListSlot:
23
+ return child;
24
+ default:
25
+ return null;
26
+ }
27
+ }) }));
50
28
  exports.BadgeList = BadgeList;
51
29
  /**
52
30
  * Слот для вывода Badge с произвольной оберткой.
@@ -54,6 +32,7 @@ exports.BadgeList = BadgeList;
54
32
  * @return Элемент.
55
33
  */
56
34
  function BadgeListSlot({ children }) {
57
- return react_1.default.createElement("div", { className: cx('item') }, children);
35
+ return (0, jsx_runtime_1.jsx)("div", { className: cx('item'), children: children });
58
36
  }
59
37
  exports.BadgeList.Slot = BadgeListSlot;
38
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/badge-list/index.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA2E;AAC3E,oCAAiC;AACjC,2DAAyC;AACzC,sFAA8C;AAgB9C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,gCAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACI,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAkB,EAAE,EAAE,CAAC,CACtF,gCACE,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,IAAI,YAAY,CAAC,EAC3D,KAAK,EAAE,SAAS,CAAC,CAAC,CAAE,EAAE,GAAG,KAAK,EAAE,cAAc,EAAE,SAAS,EAAoB,CAAC,CAAC,CAAC,KAAK,YAEpF,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC/C,QAAQ,IAAI,EAAE;YACZ,KAAK,IAAA,sBAAc,EAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,aAAK;gBAChD,OAAO,uBAAC,aAAa,cAAc,KAAK,IAAb,KAAK,CAAyB,CAAC;YAC5D,KAAK,IAAA,sBAAc,EAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa;gBACxD,OAAO,KAAK,CAAC;YACf;gBACE,OAAO,IAAI,CAAC;SACf;IACH,CAAC,CAAC,GACE,CACP,CAAC;AAhBW,QAAA,SAAS,aAgBpB;AAEF;;;;GAIG;AACH,SAAS,aAAa,CAAC,EAAE,QAAQ,EAA4B;IAC3D,OAAO,gCAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,YAAG,QAAQ,GAAO,CAAC;AACtD,CAAC;AAED,iBAAS,CAAC,IAAI,GAAG,aAAa,CAAC"}
@@ -0,0 +1,4 @@
1
+ import type { InteractiveImageStyle, InteractiveImageProps, InteractiveImageImageProps, InteractiveImagePointProps } from './types';
2
+ import { InteractiveImage, Parts } from './interactive-image';
3
+ export type { InteractiveImageStyle, InteractiveImageProps, InteractiveImageImageProps, InteractiveImagePointProps, };
4
+ export { InteractiveImage, Parts };
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Parts = exports.InteractiveImage = void 0;
4
+ const interactive_image_1 = require("./interactive-image");
5
+ Object.defineProperty(exports, "InteractiveImage", { enumerable: true, get: function () { return interactive_image_1.InteractiveImage; } });
6
+ Object.defineProperty(exports, "Parts", { enumerable: true, get: function () { return interactive_image_1.Parts; } });
7
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/interactive-image/index.ts"],"names":[],"mappings":";;;AAMA,2DAA8D;AASrD,iGATA,oCAAgB,OASA;AAAE,sFATA,yBAAK,OASA"}
@@ -0,0 +1,10 @@
1
+ @use 'node_modules/@sima-land/ui-nucleons/breakpoints';
2
+
3
+ @mixin dot-size-default {
4
+ --dot-size: 32px;
5
+ --dot-size-core: 12px;
6
+ @include breakpoints.down('xs') {
7
+ --dot-size: 40px;
8
+ --dot-size-core: 16px;
9
+ }
10
+ }
@@ -0,0 +1,15 @@
1
+ import { AnchorHTMLAttributes } from 'react';
2
+ import { InteractiveImageProps, InteractiveImageImageProps, InteractiveImagePointProps } from './types';
3
+ export declare const InteractiveImage: import("react").ForwardRefExoticComponent<InteractiveImageProps & import("react").RefAttributes<HTMLDivElement>>;
4
+ /**
5
+ * Обертка-ссылка для картинки.
6
+ * @param props Свойства.
7
+ * @return Элемент.
8
+ */
9
+ declare function ImageAnchor({ children, className, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement>): JSX.Element;
10
+ export declare const Parts: {
11
+ readonly ImageAnchor: typeof ImageAnchor;
12
+ readonly Image: import("react").ForwardRefExoticComponent<InteractiveImageImageProps & import("react").RefAttributes<HTMLImageElement>>;
13
+ readonly Point: import("react").ForwardRefExoticComponent<InteractiveImagePointProps & import("react").RefAttributes<HTMLAnchorElement>>;
14
+ };
15
+ export {};
@@ -0,0 +1,56 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.Parts = exports.InteractiveImage = void 0;
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const react_1 = require("react");
9
+ const bind_1 = __importDefault(require("classnames/bind"));
10
+ const interactive_image_module_scss_1 = __importDefault(require("./interactive-image.module.scss"));
11
+ const cx = bind_1.default.bind(interactive_image_module_scss_1.default);
12
+ exports.InteractiveImage = (0, react_1.forwardRef)(({ children, 'data-testid': testId, className, dotSize, ...rest }, ref) => {
13
+ const rootClassName = cx('root', {
14
+ 'dot-size-unset': dotSize === 'unset',
15
+ }, className);
16
+ validateChildren(children);
17
+ return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: rootClassName, ...rest, "data-testid": testId, children: react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) &&
18
+ (child.type === ImageAnchor || child.type === Image || child.type === Point)) }));
19
+ });
20
+ /**
21
+ * Проверка валидности содержимого, переданного в InteractiveImage.
22
+ * @param children Содержимое.
23
+ */
24
+ function validateChildren(children) {
25
+ let counter = 0;
26
+ for (const child of react_1.Children.toArray(children)) {
27
+ if ((0, react_1.isValidElement)(child) && (child.type === ImageAnchor || child.type === Image)) {
28
+ counter++;
29
+ }
30
+ if (counter > 1) {
31
+ throw new Error('[InteractiveImage] Either Image or ImageAnchor allowed. Not both.');
32
+ }
33
+ }
34
+ }
35
+ /**
36
+ * Обертка-ссылка для картинки.
37
+ * @param props Свойства.
38
+ * @return Элемент.
39
+ */
40
+ function ImageAnchor({ children, className, ...rest }) {
41
+ return ((0, jsx_runtime_1.jsx)("a", { ...rest, className: cx('image-anchor', className), "data-testid": 'interactive-image:image-anchor', children: react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) && child.type === Image) }));
42
+ }
43
+ /**
44
+ * Изображение на котором будут располагаться точки.
45
+ * @param props Свойства.
46
+ * @return Элемент.
47
+ */
48
+ const Image = (0, react_1.forwardRef)(({ className, 'data-testid': testId = 'interactive-image:image', ...rest }, ref) => ((0, jsx_runtime_1.jsx)("img", { ref: ref, className: cx('image', className), "data-testid": testId, ...rest })));
49
+ /**
50
+ * Точка которая будет располагаться на изображении.
51
+ * @param props Свойства.
52
+ * @return Элемент.
53
+ */
54
+ const Point = (0, react_1.forwardRef)(({ x, y, className, style, 'data-testid': testId = 'interactive-image:point', ...rest }, ref) => ((0, jsx_runtime_1.jsx)("a", { ref: ref, "aria-label": '\u0422\u043E\u0447\u043A\u0430 \u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0438', "data-testid": testId, className: cx('point', className), style: { ...style, top: `${y}%`, left: `${x}%` }, ...rest })));
55
+ exports.Parts = { ImageAnchor, Image, Point };
56
+ //# sourceMappingURL=interactive-image.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"interactive-image.js","sourceRoot":"","sources":["../../../../src/common/components/interactive-image/interactive-image.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,47 @@
1
+ @use 'node_modules/@sima-land/ui-nucleons/colors';
2
+ @use 'node_modules/@sima-land/ui-nucleons/breakpoints';
3
+ @use './interactive-image-util';
4
+
5
+ .root {
6
+ display: inline-block;
7
+ font-size: 0;
8
+ position: relative;
9
+ overflow: hidden;
10
+ background: colors.$basic-gray4;
11
+ &:not(.dot-size-unset) {
12
+ @include interactive-image-util.dot-size-default;
13
+ }
14
+ }
15
+
16
+ .image-anchor,
17
+ .image {
18
+ display: block;
19
+ max-width: 100%;
20
+ max-height: 100%;
21
+ min-width: 100%;
22
+ min-height: 100%;
23
+ }
24
+
25
+ .point {
26
+ position: absolute;
27
+ display: flex;
28
+ justify-content: center;
29
+ align-items: center;
30
+ width: var(--dot-size, 32px);
31
+ height: var(--dot-size, 32px);
32
+ background: rgba(colors.$basic-gray87, 0.4);
33
+ border-radius: 50%;
34
+ transform: translate(-50%, -50%);
35
+ &:hover {
36
+ cursor: pointer;
37
+ background: rgba(colors.$basic-gray87, 0.64);
38
+ }
39
+ &::after {
40
+ content: '';
41
+ display: block;
42
+ width: var(--dot-size-core, 12px);
43
+ height: var(--dot-size-core, 12px);
44
+ background: #fff;
45
+ border-radius: 50%;
46
+ }
47
+ }
@@ -0,0 +1,23 @@
1
+ import type { HTMLAttributes, AnchorHTMLAttributes, ImgHTMLAttributes, CSSProperties } from 'react';
2
+ export interface InteractiveImageStyle extends CSSProperties {
3
+ '--dot-size'?: string;
4
+ '--dot-size-core'?: string;
5
+ }
6
+ export interface InteractiveImageProps extends HTMLAttributes<HTMLDivElement> {
7
+ /** Размер точек. При указании "unset" можно задать css-переменные через className или style. */
8
+ dotSize?: 'unset';
9
+ /** Стили с возможностью указания размера точек через css-переменные. */
10
+ style?: InteractiveImageStyle;
11
+ /** Идентификатор для систем автоматизированного тестирования. */
12
+ 'data-testid'?: string;
13
+ }
14
+ export interface InteractiveImageImageProps extends ImgHTMLAttributes<HTMLImageElement> {
15
+ /** Идентификатор для систем автоматизированного тестирования. */
16
+ 'data-testid'?: string;
17
+ }
18
+ export interface InteractiveImagePointProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
19
+ x: number;
20
+ y: number;
21
+ /** Идентификатор для систем автоматизированного тестирования. */
22
+ 'data-testid'?: string;
23
+ }
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/common/components/interactive-image/types.ts"],"names":[],"mappings":""}
@@ -1,4 +1,6 @@
1
1
  import type { InteractiveImageStyle, InteractiveImageProps, InteractiveImageImageProps, InteractiveImagePointProps } from './types';
2
2
  import { InteractiveImage, Parts } from './interactive-image';
3
+ /** @deprecated */
3
4
  export type { InteractiveImageStyle, InteractiveImageProps, InteractiveImageImageProps, InteractiveImagePointProps, };
5
+ /** @deprecated */
4
6
  export { InteractiveImage, Parts };
@@ -4,3 +4,4 @@ exports.Parts = exports.InteractiveImage = void 0;
4
4
  const interactive_image_1 = require("./interactive-image");
5
5
  Object.defineProperty(exports, "InteractiveImage", { enumerable: true, get: function () { return interactive_image_1.InteractiveImage; } });
6
6
  Object.defineProperty(exports, "Parts", { enumerable: true, get: function () { return interactive_image_1.Parts; } });
7
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/intractive-image/index.ts"],"names":[],"mappings":";;;AAMA,2DAA8D;AAWrD,iGAXA,oCAAgB,OAWA;AAAE,sFAXA,yBAAK,OAWA"}
@@ -1,15 +1,17 @@
1
- import React, { AnchorHTMLAttributes } from 'react';
1
+ import { AnchorHTMLAttributes } from 'react';
2
2
  import { InteractiveImageProps, InteractiveImageImageProps, InteractiveImagePointProps } from './types';
3
- export declare const InteractiveImage: React.ForwardRefExoticComponent<InteractiveImageProps & React.RefAttributes<HTMLDivElement>>;
3
+ /** @deprecated */
4
+ export declare const InteractiveImage: import("react").ForwardRefExoticComponent<InteractiveImageProps & import("react").RefAttributes<HTMLDivElement>>;
4
5
  /**
5
6
  * Обертка-ссылка для картинки.
6
7
  * @param props Свойства.
7
8
  * @return Элемент.
8
9
  */
9
10
  declare function ImageAnchor({ children, className, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement>): JSX.Element;
11
+ /** @deprecated */
10
12
  export declare const Parts: {
11
13
  readonly ImageAnchor: typeof ImageAnchor;
12
- readonly Image: React.ForwardRefExoticComponent<InteractiveImageImageProps & React.RefAttributes<HTMLImageElement>>;
13
- readonly Point: React.ForwardRefExoticComponent<InteractiveImagePointProps & React.RefAttributes<HTMLAnchorElement>>;
14
+ readonly Image: import("react").ForwardRefExoticComponent<InteractiveImageImageProps & import("react").RefAttributes<HTMLImageElement>>;
15
+ readonly Point: import("react").ForwardRefExoticComponent<InteractiveImagePointProps & import("react").RefAttributes<HTMLAnchorElement>>;
14
16
  };
15
17
  export {};
@@ -1,55 +1,22 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- var __rest = (this && this.__rest) || function (s, e) {
26
- var t = {};
27
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
28
- t[p] = s[p];
29
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
30
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
31
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
32
- t[p[i]] = s[p[i]];
33
- }
34
- return t;
35
- };
36
2
  var __importDefault = (this && this.__importDefault) || function (mod) {
37
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
38
4
  };
39
5
  Object.defineProperty(exports, "__esModule", { value: true });
40
6
  exports.Parts = exports.InteractiveImage = void 0;
41
- const react_1 = __importStar(require("react"));
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const react_1 = require("react");
42
9
  const bind_1 = __importDefault(require("classnames/bind"));
43
10
  const interactive_image_module_scss_1 = __importDefault(require("./interactive-image.module.scss"));
44
11
  const cx = bind_1.default.bind(interactive_image_module_scss_1.default);
45
- exports.InteractiveImage = (0, react_1.forwardRef)((_a, ref) => {
46
- var { children, 'data-testid': testId, className, dotSize } = _a, rest = __rest(_a, ["children", 'data-testid', "className", "dotSize"]);
12
+ /** @deprecated */
13
+ exports.InteractiveImage = (0, react_1.forwardRef)(({ children, 'data-testid': testId, className, dotSize, ...rest }, ref) => {
47
14
  const rootClassName = cx('root', {
48
15
  'dot-size-unset': dotSize === 'unset',
49
16
  }, className);
50
17
  validateChildren(children);
51
- return (react_1.default.createElement("div", Object.assign({ ref: ref, className: rootClassName }, rest, { "data-testid": testId }), react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) &&
52
- (child.type === ImageAnchor || child.type === Image || child.type === Point))));
18
+ return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: rootClassName, ...rest, "data-testid": testId, children: react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) &&
19
+ (child.type === ImageAnchor || child.type === Image || child.type === Point)) }));
53
20
  });
54
21
  /**
55
22
  * Проверка валидности содержимого, переданного в InteractiveImage.
@@ -71,26 +38,21 @@ function validateChildren(children) {
71
38
  * @param props Свойства.
72
39
  * @return Элемент.
73
40
  */
74
- function ImageAnchor(_a) {
75
- var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
76
- return (react_1.default.createElement("a", Object.assign({}, rest, { className: cx('image-anchor', className), "data-testid": 'interactive-image:image-anchor' }), react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) && child.type === Image)));
41
+ function ImageAnchor({ children, className, ...rest }) {
42
+ return ((0, jsx_runtime_1.jsx)("a", { ...rest, className: cx('image-anchor', className), "data-testid": 'interactive-image:image-anchor', children: react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) && child.type === Image) }));
77
43
  }
78
44
  /**
79
45
  * Изображение на котором будут располагаться точки.
80
46
  * @param props Свойства.
81
47
  * @return Элемент.
82
48
  */
83
- const Image = (0, react_1.forwardRef)((_a, ref) => {
84
- var { className, 'data-testid': testId = 'interactive-image:image' } = _a, rest = __rest(_a, ["className", 'data-testid']);
85
- return (react_1.default.createElement("img", Object.assign({ ref: ref, className: cx('image', className), "data-testid": testId }, rest)));
86
- });
49
+ const Image = (0, react_1.forwardRef)(({ className, 'data-testid': testId = 'interactive-image:image', ...rest }, ref) => ((0, jsx_runtime_1.jsx)("img", { ref: ref, className: cx('image', className), "data-testid": testId, ...rest })));
87
50
  /**
88
51
  * Точка которая будет располагаться на изображении.
89
52
  * @param props Свойства.
90
53
  * @return Элемент.
91
54
  */
92
- const Point = (0, react_1.forwardRef)((_a, ref) => {
93
- var { x, y, className, style, 'data-testid': testId = 'interactive-image:point' } = _a, rest = __rest(_a, ["x", "y", "className", "style", 'data-testid']);
94
- return (react_1.default.createElement("a", Object.assign({ ref: ref, "aria-label": '\u0422\u043E\u0447\u043A\u0430 \u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0438', "data-testid": testId, className: cx('point', className), style: Object.assign(Object.assign({}, style), { top: `${y}%`, left: `${x}%` }) }, rest)));
95
- });
55
+ const Point = (0, react_1.forwardRef)(({ x, y, className, style, 'data-testid': testId = 'interactive-image:point', ...rest }, ref) => ((0, jsx_runtime_1.jsx)("a", { ref: ref, "aria-label": '\u0422\u043E\u0447\u043A\u0430 \u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0438', "data-testid": testId, className: cx('point', className), style: { ...style, top: `${y}%`, left: `${x}%` }, ...rest })));
56
+ /** @deprecated */
96
57
  exports.Parts = { ImageAnchor, Image, Point };
58
+ //# sourceMappingURL=interactive-image.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"interactive-image.js","sourceRoot":"","sources":["../../../../src/common/components/intractive-image/interactive-image.tsx"],"names":[],"mappings":"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"}
@@ -1,9 +1,11 @@
1
- import type { CSSProperties } from 'react';
1
+ import type { HTMLAttributes, AnchorHTMLAttributes, ImgHTMLAttributes, CSSProperties } from 'react';
2
+ /** @deprecated */
2
3
  export interface InteractiveImageStyle extends CSSProperties {
3
4
  '--dot-size'?: string;
4
5
  '--dot-size-core'?: string;
5
6
  }
6
- export interface InteractiveImageProps extends React.HTMLAttributes<HTMLDivElement> {
7
+ /** @deprecated */
8
+ export interface InteractiveImageProps extends HTMLAttributes<HTMLDivElement> {
7
9
  /** Размер точек. При указании "unset" можно задать css-переменные через className или style. */
8
10
  dotSize?: 'unset';
9
11
  /** Стили с возможностью указания размера точек через css-переменные. */
@@ -11,11 +13,13 @@ export interface InteractiveImageProps extends React.HTMLAttributes<HTMLDivEleme
11
13
  /** Идентификатор для систем автоматизированного тестирования. */
12
14
  'data-testid'?: string;
13
15
  }
14
- export interface InteractiveImageImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
16
+ /** @deprecated */
17
+ export interface InteractiveImageImageProps extends ImgHTMLAttributes<HTMLImageElement> {
15
18
  /** Идентификатор для систем автоматизированного тестирования. */
16
19
  'data-testid'?: string;
17
20
  }
18
- export interface InteractiveImagePointProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
21
+ /** @deprecated */
22
+ export interface InteractiveImagePointProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
19
23
  x: number;
20
24
  y: number;
21
25
  /** Идентификатор для систем автоматизированного тестирования. */
@@ -1,2 +1,3 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/common/components/intractive-image/types.ts"],"names":[],"mappings":""}
@@ -224,3 +224,4 @@ exports.videos = [
224
224
  },
225
225
  },
226
226
  ];
227
+ //# sourceMappingURL=index.js.map