@sima-land/moleculas 16.0.0-alpha.7 → 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.
- package/README.md +24 -0
- package/common/components/badge/index.d.ts +3 -3
- package/common/components/badge/index.js +20 -53
- package/common/components/badge/index.js.map +1 -0
- package/common/components/badge-list/index.d.ts +3 -3
- package/common/components/badge-list/index.js +14 -35
- package/common/components/badge-list/index.js.map +1 -0
- package/common/components/interactive-image/index.d.ts +4 -0
- package/common/components/interactive-image/index.js +7 -0
- package/common/components/interactive-image/index.js.map +1 -0
- package/common/components/interactive-image/interactive-image-util.scss +10 -0
- package/common/components/interactive-image/interactive-image.d.ts +15 -0
- package/common/components/interactive-image/interactive-image.js +56 -0
- package/common/components/interactive-image/interactive-image.js.map +1 -0
- package/common/components/interactive-image/interactive-image.module.scss +47 -0
- package/common/components/interactive-image/types.d.ts +23 -0
- package/common/components/interactive-image/types.js +3 -0
- package/common/components/interactive-image/types.js.map +1 -0
- package/common/components/intractive-image/index.d.ts +2 -0
- package/common/components/intractive-image/index.js +1 -0
- package/common/components/intractive-image/index.js.map +1 -0
- package/common/components/intractive-image/interactive-image.d.ts +6 -4
- package/common/components/intractive-image/interactive-image.js +12 -50
- package/common/components/intractive-image/interactive-image.js.map +1 -0
- package/common/components/intractive-image/types.d.ts +8 -4
- package/common/components/intractive-image/types.js +1 -0
- package/common/components/intractive-image/types.js.map +1 -0
- package/common/components/media-modal/__mocks__/index.js +1 -0
- package/common/components/media-modal/__mocks__/index.js.map +1 -0
- package/common/components/media-modal/index.js +1 -0
- package/common/components/media-modal/index.js.map +1 -0
- package/common/components/media-modal/layout.js +8 -35
- package/common/components/media-modal/layout.js.map +1 -0
- package/common/components/media-modal/parts/all-round-view.js +6 -42
- package/common/components/media-modal/parts/all-round-view.js.map +1 -0
- package/common/components/media-modal/parts/index.js +18 -13
- package/common/components/media-modal/parts/index.js.map +1 -0
- package/common/components/media-modal/parts/media-content.js +19 -46
- package/common/components/media-modal/parts/media-content.js.map +1 -0
- package/common/components/media-modal/parts/media-view.js +5 -32
- package/common/components/media-modal/parts/media-view.js.map +1 -0
- package/common/components/media-modal/parts/product-brief.js +6 -28
- package/common/components/media-modal/parts/product-brief.js.map +1 -0
- package/common/components/media-modal/parts/review.js +5 -17
- package/common/components/media-modal/parts/review.js.map +1 -0
- package/common/components/media-modal/parts/scroll-section.js +3 -6
- package/common/components/media-modal/parts/scroll-section.js.map +1 -0
- package/common/components/media-modal/parts/thumbnail.d.ts +3 -3
- package/common/components/media-modal/parts/thumbnail.js +5 -38
- package/common/components/media-modal/parts/thumbnail.js.map +1 -0
- package/common/components/media-modal/parts/thumbnails.js +6 -41
- package/common/components/media-modal/parts/thumbnails.js.map +1 -0
- package/common/components/media-modal/types.js +1 -0
- package/common/components/media-modal/types.js.map +1 -0
- package/common/components/media-modal/utils.js +1 -0
- package/common/components/media-modal/utils.js.map +1 -0
- package/common/components/modifier/index.js +1 -0
- package/common/components/modifier/index.js.map +1 -0
- package/common/components/modifier/modifier.js +13 -56
- package/common/components/modifier/modifier.js.map +1 -0
- package/common/components/modifier/modifier.module.scss +9 -0
- package/common/components/modifier/types.js +1 -0
- package/common/components/modifier/types.js.map +1 -0
- package/common/components/pagination-controls/index.d.ts +2 -0
- package/common/components/pagination-controls/index.js +10 -0
- package/common/components/pagination-controls/index.js.map +1 -0
- package/common/components/pagination-controls/pagination-controls.d.ts +38 -0
- package/common/components/pagination-controls/pagination-controls.js +82 -0
- package/common/components/pagination-controls/pagination-controls.js.map +1 -0
- package/common/components/pagination-controls/pagination-controls.module.scss +34 -0
- package/common/components/pagination-controls/types.d.ts +20 -0
- package/common/components/pagination-controls/types.js +3 -0
- package/common/components/pagination-controls/types.js.map +1 -0
- package/common/components/product-info/index.js +3 -13
- package/common/components/product-info/index.js.map +1 -0
- package/common/components/product-info/parts.d.ts +9 -7
- package/common/components/product-info/parts.js +18 -79
- package/common/components/product-info/parts.js.map +1 -0
- package/common/components/product-info/types.js +1 -0
- package/common/components/product-info/types.js.map +1 -0
- package/common/components/product-info/utils.js +1 -0
- package/common/components/product-info/utils.js.map +1 -0
- package/common/components/rating-counter/index.js +6 -20
- package/common/components/rating-counter/index.js.map +1 -0
- package/common/constants.js +1 -0
- package/common/constants.js.map +1 -0
- package/common/hooks/index.js +1 -0
- package/common/hooks/index.js.map +1 -0
- package/common/types.js +1 -0
- package/common/types.js.map +1 -0
- package/desktop/components/breadcrumbs/index.js +14 -46
- package/desktop/components/breadcrumbs/index.js.map +1 -0
- package/desktop/components/gallery-modal/__mocks__/index.js +1 -0
- package/desktop/components/gallery-modal/__mocks__/index.js.map +1 -0
- package/desktop/components/gallery-modal/components/all-round-view.js +8 -42
- package/desktop/components/gallery-modal/components/all-round-view.js.map +1 -0
- package/desktop/components/gallery-modal/components/gallery-modal.d.ts +2 -2
- package/desktop/components/gallery-modal/components/gallery-modal.js +8 -59
- package/desktop/components/gallery-modal/components/gallery-modal.js.map +1 -0
- package/desktop/components/gallery-modal/components/image-overlay.d.ts +2 -2
- package/desktop/components/gallery-modal/components/image-overlay.js +3 -16
- package/desktop/components/gallery-modal/components/image-overlay.js.map +1 -0
- package/desktop/components/gallery-modal/components/review-info.js +6 -47
- package/desktop/components/gallery-modal/components/review-info.js.map +1 -0
- package/desktop/components/gallery-modal/components/thumbnail.d.ts +2 -2
- package/desktop/components/gallery-modal/components/thumbnail.js +3 -6
- package/desktop/components/gallery-modal/components/thumbnail.js.map +1 -0
- package/desktop/components/gallery-modal/index.js +1 -0
- package/desktop/components/gallery-modal/index.js.map +1 -0
- package/desktop/components/gallery-modal/types.js +1 -0
- package/desktop/components/gallery-modal/types.js.map +1 -0
- package/desktop/components/gallery-modal/utils.d.ts +2 -2
- package/desktop/components/gallery-modal/utils.js +1 -0
- package/desktop/components/gallery-modal/utils.js.map +1 -0
- package/desktop/components/modifiers/button/index.d.ts +3 -3
- package/desktop/components/modifiers/button/index.js +4 -31
- package/desktop/components/modifiers/button/index.js.map +1 -0
- package/desktop/components/modifiers/group/index.js +7 -31
- package/desktop/components/modifiers/group/index.js.map +1 -0
- package/desktop/components/modifiers/group/utils.js +1 -0
- package/desktop/components/modifiers/group/utils.js.map +1 -0
- package/desktop/components/person-info/index.js +3 -25
- package/desktop/components/person-info/index.js.map +1 -0
- package/desktop/components/product-card/index.d.ts +6 -6
- package/desktop/components/product-card/index.js +7 -42
- package/desktop/components/product-card/index.js.map +1 -0
- package/desktop/components/product-carousel/hover-card.d.ts +2 -2
- package/desktop/components/product-carousel/hover-card.js +6 -40
- package/desktop/components/product-carousel/hover-card.js.map +1 -0
- package/desktop/components/product-carousel/index.js +47 -70
- package/desktop/components/product-carousel/index.js.map +1 -0
- package/desktop/components/product-carousel/utils.d.ts +2 -2
- package/desktop/components/product-carousel/utils.js +1 -0
- package/desktop/components/product-carousel/utils.js.map +1 -0
- package/desktop/components/promotion-card/banner-title.js +8 -18
- package/desktop/components/promotion-card/banner-title.js.map +1 -0
- package/desktop/components/promotion-card/estimate.js +3 -5
- package/desktop/components/promotion-card/estimate.js.map +1 -0
- package/desktop/components/promotion-card/index.d.ts +3 -3
- package/desktop/components/promotion-card/index.js +7 -54
- package/desktop/components/promotion-card/index.js.map +1 -0
- package/desktop/components/promotion-card/placeholder.d.ts +2 -2
- package/desktop/components/promotion-card/placeholder.js +3 -5
- package/desktop/components/promotion-card/placeholder.js.map +1 -0
- package/desktop/components/promotion-card/types.js +1 -0
- package/desktop/components/promotion-card/types.js.map +1 -0
- package/mobile/components/action-circles/index.js +4 -5
- package/mobile/components/action-circles/index.js.map +1 -0
- package/mobile/components/action-list/index.js +5 -4
- package/mobile/components/action-list/index.js.map +1 -0
- package/mobile/components/breadcrumbs/index.js +3 -2
- package/mobile/components/breadcrumbs/index.js.map +1 -0
- package/mobile/components/modifiers-list/index.d.ts +3 -3
- package/mobile/components/modifiers-list/index.js +3 -7
- package/mobile/components/modifiers-list/index.js.map +1 -0
- package/mobile/components/modifiers-list/modifier-item/index.d.ts +2 -2
- package/mobile/components/modifiers-list/modifier-item/index.js +3 -10
- package/mobile/components/modifiers-list/modifier-item/index.js.map +1 -0
- package/mobile/components/person-info/index.js +4 -20
- package/mobile/components/person-info/index.js.map +1 -0
- package/mobile/components/product-row/index.js +3 -33
- package/mobile/components/product-row/index.js.map +1 -0
- package/mobile/components/product-slider/index.d.ts +2 -2
- package/mobile/components/product-slider/index.js +9 -32
- package/mobile/components/product-slider/index.js.map +1 -0
- package/mobile/components/pseudo-input/index.d.ts +2 -2
- package/mobile/components/pseudo-input/index.js +3 -18
- package/mobile/components/pseudo-input/index.js.map +1 -0
- package/mobile/components/search-bar/index.d.ts +6 -6
- package/mobile/components/search-bar/index.js +16 -55
- package/mobile/components/search-bar/index.js.map +1 -0
- package/mobile/components/select-screen/index.js +7 -44
- package/mobile/components/select-screen/index.js.map +1 -0
- 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
|
|
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<
|
|
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:
|
|
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
|
|
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(
|
|
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 (
|
|
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
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
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
|
|
1
|
+
import { ReactNode, CSSProperties } from 'react';
|
|
2
2
|
export interface BadgeListProps {
|
|
3
3
|
/** Список данных для шильдиков. */
|
|
4
|
-
children?:
|
|
4
|
+
children?: ReactNode;
|
|
5
5
|
/** CSS-класс корневого элемента. */
|
|
6
6
|
className?: string;
|
|
7
7
|
/** Стили корневого элемента. */
|
|
8
|
-
style?:
|
|
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
|
|
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 }) => (
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
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
|
|
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,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 @@
|
|
|
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
|
|
1
|
+
import { AnchorHTMLAttributes } from 'react';
|
|
2
2
|
import { InteractiveImageProps, InteractiveImageImageProps, InteractiveImagePointProps } from './types';
|
|
3
|
-
|
|
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:
|
|
13
|
-
readonly Point:
|
|
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
|
|
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
|
-
|
|
46
|
-
|
|
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 (
|
|
52
|
-
|
|
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(
|
|
75
|
-
|
|
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)((
|
|
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)((
|
|
93
|
-
|
|
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
|
-
|
|
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
|
-
|
|
16
|
+
/** @deprecated */
|
|
17
|
+
export interface InteractiveImageImageProps extends ImgHTMLAttributes<HTMLImageElement> {
|
|
15
18
|
/** Идентификатор для систем автоматизированного тестирования. */
|
|
16
19
|
'data-testid'?: string;
|
|
17
20
|
}
|
|
18
|
-
|
|
21
|
+
/** @deprecated */
|
|
22
|
+
export interface InteractiveImagePointProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
19
23
|
x: number;
|
|
20
24
|
y: number;
|
|
21
25
|
/** Идентификатор для систем автоматизированного тестирования. */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/common/components/intractive-image/types.ts"],"names":[],"mappings":""}
|