@sima-land/moleculas 13.4.0 → 14.0.0
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/common/constants.d.ts +2 -5
- package/common/constants.js +2 -2
- package/common/types.d.ts +1 -0
- package/common/types.js +2 -0
- package/desktop/components/modifiers/button/index.d.ts +5 -3
- package/desktop/components/modifiers/button/index.js +5 -7
- package/desktop/components/modifiers/button/modifier-button.module.scss +4 -0
- package/desktop/components/modifiers/group/index.d.ts +11 -81
- package/desktop/components/modifiers/group/index.js +29 -133
- package/desktop/components/modifiers/group/modifiers-group.module.scss +19 -31
- package/desktop/components/modifiers/group/utils.d.ts +20 -0
- package/desktop/components/modifiers/group/utils.js +73 -0
- package/desktop/components/modifiers/modifiers.scss +5 -0
- package/desktop/components/product-carousel/index.js +1 -1
- package/mobile/components/modifiers-list/modifier-item/index.d.ts +2 -1
- package/mobile/components/modifiers-list/modifier-item/index.js +3 -3
- package/package.json +1 -1
- package/desktop/components/item-image/index.d.ts +0 -88
- package/desktop/components/item-image/index.js +0 -135
- package/desktop/components/item-image/item-image.module.scss +0 -158
- package/desktop/components/modifiers/widget/index.d.ts +0 -18
- package/desktop/components/modifiers/widget/index.js +0 -36
- package/desktop/components/modifiers/widget/modifiers-widget.module.scss +0 -10
- package/desktop/components/modifiers/widget/readme.md +0 -53
- package/mobile/components/item-image/index.d.ts +0 -56
- package/mobile/components/item-image/index.js +0 -88
- package/mobile/components/item-image/item-image.module.scss +0 -79
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import { Component } from 'react';
|
|
2
|
-
export interface ItemImageProps {
|
|
3
|
-
alt?: string;
|
|
4
|
-
badges?: any;
|
|
5
|
-
buttonsPos?: string;
|
|
6
|
-
className?: string;
|
|
7
|
-
fakeDivClassName?: any;
|
|
8
|
-
hasQuickPreview?: boolean;
|
|
9
|
-
hasSelectionButton?: boolean;
|
|
10
|
-
hasTrashButton?: boolean;
|
|
11
|
-
hasWishButton?: boolean;
|
|
12
|
-
isFetchingWishItems?: boolean;
|
|
13
|
-
itemUrl?: string;
|
|
14
|
-
onClick?: any;
|
|
15
|
-
onLoadImage?: any;
|
|
16
|
-
photos?: string[];
|
|
17
|
-
quickViewBtnProps?: any;
|
|
18
|
-
selectionProps?: {
|
|
19
|
-
onSelect: any;
|
|
20
|
-
isSelected?: boolean;
|
|
21
|
-
};
|
|
22
|
-
src?: string;
|
|
23
|
-
trashButtonProps?: any;
|
|
24
|
-
wishProps?: any;
|
|
25
|
-
withBlur?: boolean;
|
|
26
|
-
}
|
|
27
|
-
/**
|
|
28
|
-
* @typedef WishProps Свойства функционала избранного.
|
|
29
|
-
* @property {boolean} isWished Признак товара в избранном.
|
|
30
|
-
* @property {string} className Дополнительный класс для избранного.
|
|
31
|
-
* @property {Function} onClick Обработчик клика по избранному.
|
|
32
|
-
* @property {'left'|'right'} pos Позиция иконки.
|
|
33
|
-
*/
|
|
34
|
-
/**
|
|
35
|
-
* @typedef QuickViewBtnProps Свойства кнопки быстрого просмотра.
|
|
36
|
-
* @property {string} className Дополнительный класс для кнопки быстрого просмотра.
|
|
37
|
-
* @property {Function} onClick Обработчик клика по кнопке быстрого просмотра.
|
|
38
|
-
*/
|
|
39
|
-
/**
|
|
40
|
-
* @typedef TrashButtonProps Свойства кнопки удаления товара.
|
|
41
|
-
* @property {string} className Класс для кнопки удаления товара.
|
|
42
|
-
* @property {Function} onClick Обработчик клика по кнопке удаления товара.
|
|
43
|
-
*/
|
|
44
|
-
/**
|
|
45
|
-
* Компонент изображения товара с избранным.
|
|
46
|
-
* @param {Object} props Свойства компонента.
|
|
47
|
-
* @param {string} props.src Ссылка на изображение.
|
|
48
|
-
* @param {string} props.alt Alt для изображения.
|
|
49
|
-
* @param {string} props.className Дополнительный класс для компонента.
|
|
50
|
-
* @param {Function} [props.onClick] Обработчик клика по картинке.
|
|
51
|
-
* @param {Array} [props.badges] Шильдики.
|
|
52
|
-
* @param {WishProps} [props.wishProps] Свойства для избранного.
|
|
53
|
-
* @param {QuickViewBtnProps} [props.quickViewBtnProps] Свойства для кнопки быстрого просмотра.
|
|
54
|
-
* @param {Function} props.onLoadImage Колбэк на загрузку изображения.
|
|
55
|
-
* @param {boolean} props.withBlur Добавление блюра.
|
|
56
|
-
* @param {boolean} props.isFetchingWishItems Признак загрузки добавления товара в список избранного.
|
|
57
|
-
* @param {boolean} props.hasTrashButton Признак наличия кнопки удаления товара.
|
|
58
|
-
* @param {TrashButtonProps} [props.trashButtonProps] Свойства для кнопки удаления товара.
|
|
59
|
-
* @param {Object} props.selectionProps Свойства выделения товара.
|
|
60
|
-
* @param {boolean} props.hasSelectionButton Признак наличия кнопки выделения товара.
|
|
61
|
-
* @return {ReactElement} Компонент изображения.
|
|
62
|
-
*/
|
|
63
|
-
export declare class ItemImage extends Component<ItemImageProps, any> {
|
|
64
|
-
bootStartTime: any;
|
|
65
|
-
image: any;
|
|
66
|
-
imageWrapper: any;
|
|
67
|
-
/**
|
|
68
|
-
* @inheritdoc
|
|
69
|
-
*/
|
|
70
|
-
constructor(props: ItemImageProps);
|
|
71
|
-
/**
|
|
72
|
-
* @inheritdoc
|
|
73
|
-
*/
|
|
74
|
-
componentDidMount(): void;
|
|
75
|
-
/**
|
|
76
|
-
* Возвращает фото.
|
|
77
|
-
* @param {Object} image Данные изображения.
|
|
78
|
-
* @param {string} image.src Url изображения.
|
|
79
|
-
* @param {string} image.alt Alt изображения.
|
|
80
|
-
* @param {Function} onClick Колбэк на клик по изображению.
|
|
81
|
-
* @return {Object} Свойства для компонента.
|
|
82
|
-
*/
|
|
83
|
-
getImage: ({ src, alt }: any, onClick: any) => JSX.Element;
|
|
84
|
-
/**
|
|
85
|
-
* @inheritdoc
|
|
86
|
-
*/
|
|
87
|
-
render(): JSX.Element;
|
|
88
|
-
}
|
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
-
}) : function(o, v) {
|
|
12
|
-
o["default"] = v;
|
|
13
|
-
});
|
|
14
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
-
if (mod && mod.__esModule) return mod;
|
|
16
|
-
var result = {};
|
|
17
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
-
__setModuleDefault(result, mod);
|
|
19
|
-
return result;
|
|
20
|
-
};
|
|
21
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
22
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
23
|
-
};
|
|
24
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
exports.ItemImage = void 0;
|
|
26
|
-
const react_1 = __importStar(require("react"));
|
|
27
|
-
const link_1 = require("@sima-land/ui-nucleons/link");
|
|
28
|
-
const bind_1 = __importDefault(require("classnames/bind"));
|
|
29
|
-
const lodash_1 = require("lodash");
|
|
30
|
-
const item_image_module_scss_1 = __importDefault(require("./item-image.module.scss"));
|
|
31
|
-
const badge_list_1 = require("../../../common/components/badge-list");
|
|
32
|
-
const badge_1 = require("../../../common/components/badge");
|
|
33
|
-
const eighteen_plus_svg_1 = __importDefault(require("../../../common/icons/eighteen-plus.svg"));
|
|
34
|
-
const selected_svg_1 = __importDefault(require("../../../common/icons/selected.svg"));
|
|
35
|
-
const wish_button_1 = require("../../../common/components/wish-button");
|
|
36
|
-
const quick_view_button_1 = require("../../../common/components/quick-view-button");
|
|
37
|
-
const trash_cart_svg_1 = __importDefault(require("../../../common/icons/trash-cart.svg"));
|
|
38
|
-
const cx = bind_1.default.bind(item_image_module_scss_1.default);
|
|
39
|
-
/**
|
|
40
|
-
* @typedef WishProps Свойства функционала избранного.
|
|
41
|
-
* @property {boolean} isWished Признак товара в избранном.
|
|
42
|
-
* @property {string} className Дополнительный класс для избранного.
|
|
43
|
-
* @property {Function} onClick Обработчик клика по избранному.
|
|
44
|
-
* @property {'left'|'right'} pos Позиция иконки.
|
|
45
|
-
*/
|
|
46
|
-
/**
|
|
47
|
-
* @typedef QuickViewBtnProps Свойства кнопки быстрого просмотра.
|
|
48
|
-
* @property {string} className Дополнительный класс для кнопки быстрого просмотра.
|
|
49
|
-
* @property {Function} onClick Обработчик клика по кнопке быстрого просмотра.
|
|
50
|
-
*/
|
|
51
|
-
/**
|
|
52
|
-
* @typedef TrashButtonProps Свойства кнопки удаления товара.
|
|
53
|
-
* @property {string} className Класс для кнопки удаления товара.
|
|
54
|
-
* @property {Function} onClick Обработчик клика по кнопке удаления товара.
|
|
55
|
-
*/
|
|
56
|
-
/**
|
|
57
|
-
* Компонент изображения товара с избранным.
|
|
58
|
-
* @param {Object} props Свойства компонента.
|
|
59
|
-
* @param {string} props.src Ссылка на изображение.
|
|
60
|
-
* @param {string} props.alt Alt для изображения.
|
|
61
|
-
* @param {string} props.className Дополнительный класс для компонента.
|
|
62
|
-
* @param {Function} [props.onClick] Обработчик клика по картинке.
|
|
63
|
-
* @param {Array} [props.badges] Шильдики.
|
|
64
|
-
* @param {WishProps} [props.wishProps] Свойства для избранного.
|
|
65
|
-
* @param {QuickViewBtnProps} [props.quickViewBtnProps] Свойства для кнопки быстрого просмотра.
|
|
66
|
-
* @param {Function} props.onLoadImage Колбэк на загрузку изображения.
|
|
67
|
-
* @param {boolean} props.withBlur Добавление блюра.
|
|
68
|
-
* @param {boolean} props.isFetchingWishItems Признак загрузки добавления товара в список избранного.
|
|
69
|
-
* @param {boolean} props.hasTrashButton Признак наличия кнопки удаления товара.
|
|
70
|
-
* @param {TrashButtonProps} [props.trashButtonProps] Свойства для кнопки удаления товара.
|
|
71
|
-
* @param {Object} props.selectionProps Свойства выделения товара.
|
|
72
|
-
* @param {boolean} props.hasSelectionButton Признак наличия кнопки выделения товара.
|
|
73
|
-
* @return {ReactElement} Компонент изображения.
|
|
74
|
-
*/
|
|
75
|
-
class ItemImage extends react_1.Component {
|
|
76
|
-
/**
|
|
77
|
-
* @inheritdoc
|
|
78
|
-
*/
|
|
79
|
-
constructor(props) {
|
|
80
|
-
super(props);
|
|
81
|
-
/**
|
|
82
|
-
* Возвращает фото.
|
|
83
|
-
* @param {Object} image Данные изображения.
|
|
84
|
-
* @param {string} image.src Url изображения.
|
|
85
|
-
* @param {string} image.alt Alt изображения.
|
|
86
|
-
* @param {Function} onClick Колбэк на клик по изображению.
|
|
87
|
-
* @return {Object} Свойства для компонента.
|
|
88
|
-
*/
|
|
89
|
-
this.getImage = ({ src, alt }, onClick) => (react_1.default.createElement("img", { className: cx('image'), src: src, alt: alt, ref: this.image, onClick: onClick }));
|
|
90
|
-
this.state = {
|
|
91
|
-
currentPhotoIndex: null,
|
|
92
|
-
};
|
|
93
|
-
this.image = (0, react_1.createRef)();
|
|
94
|
-
this.imageWrapper = (0, react_1.createRef)();
|
|
95
|
-
this.bootStartTime = Date.now();
|
|
96
|
-
}
|
|
97
|
-
/**
|
|
98
|
-
* @inheritdoc
|
|
99
|
-
*/
|
|
100
|
-
componentDidMount() {
|
|
101
|
-
const img = this.image.current;
|
|
102
|
-
const { onLoadImage } = this.props;
|
|
103
|
-
if (img && img.complete && (0, lodash_1.isFunction)(onLoadImage)) {
|
|
104
|
-
onLoadImage(Date.now() - this.bootStartTime);
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
/**
|
|
108
|
-
* @inheritdoc
|
|
109
|
-
*/
|
|
110
|
-
render() {
|
|
111
|
-
const { alt, className, onClick, badges, quickViewBtnProps = {}, withBlur, itemUrl, isFetchingWishItems, photos = [], fakeDivClassName, buttonsPos = 'left', src, hasTrashButton, trashButtonProps, hasWishButton, wishProps, hasQuickPreview, hasSelectionButton, selectionProps, } = this.props;
|
|
112
|
-
const { currentPhotoIndex } = this.state;
|
|
113
|
-
const currentPhoto = currentPhotoIndex === null ? src : photos[currentPhotoIndex];
|
|
114
|
-
return (react_1.default.createElement("div", { className: cx('wrapper', className), ref: this.imageWrapper, onMouseLeave: () => this.setState({ currentPhotoIndex: null }) },
|
|
115
|
-
withBlur && (react_1.default.createElement("div", { className: cx('with-blur') },
|
|
116
|
-
react_1.default.createElement(eighteen_plus_svg_1.default, { width: 124, height: 124, opacity: '0.3' }))),
|
|
117
|
-
react_1.default.createElement("div", { className: cx('image-wrapper') },
|
|
118
|
-
react_1.default.createElement(link_1.Link, { href: itemUrl },
|
|
119
|
-
Array.isArray(photos) && photos.length > 1 && !withBlur && this.imageWrapper.current && (react_1.default.createElement("div", { className: cx('fake-hover-wrapper', fakeDivClassName) }, photos.map((value, index) => (react_1.default.createElement("div", { className: cx('fake-hover', { selected: index === currentPhotoIndex }), style: {
|
|
120
|
-
// @todo переделать это без добавления лишних элементов
|
|
121
|
-
width: this.imageWrapper.current.offsetWidth / photos.length,
|
|
122
|
-
left: (this.imageWrapper.current.offsetWidth / photos.length) * index,
|
|
123
|
-
}, key: index + 100, onMouseOver: () => this.setState({ currentPhotoIndex: index }) },
|
|
124
|
-
react_1.default.createElement("div", { className: cx('fake-hover-label') })))))),
|
|
125
|
-
withBlur ? (react_1.default.createElement("div", { className: cx('with-filter-blur'), children: this.getImage({ src: currentPhoto, alt }, onClick) })) : (this.getImage({ src: currentPhoto, alt }, onClick))),
|
|
126
|
-
hasTrashButton && (react_1.default.createElement(trash_cart_svg_1.default, { width: 24, height: 24, color: 'gray87', className: cx('icon', buttonsPos, trashButtonProps.className), onClick: trashButtonProps.onClick, "data-testid": 'item-image:remove-button' }))),
|
|
127
|
-
Array.isArray(badges) && Boolean(badges.length) && (react_1.default.createElement("div", { className: cx('badges') },
|
|
128
|
-
react_1.default.createElement(badge_list_1.BadgeList, null, badges.map((badge, index) => (react_1.default.createElement(badge_1.Badge, Object.assign({ key: index }, badge))))))),
|
|
129
|
-
hasWishButton && (react_1.default.createElement(wish_button_1.WishButton, { checked: wishProps.isWished, className: cx('icon', buttonsPos, hasTrashButton && 'as-second', wishProps.className), onClick: wishProps.onClick, disabled: isFetchingWishItems })),
|
|
130
|
-
hasQuickPreview && (react_1.default.createElement(quick_view_button_1.QuickViewButton, { onClick: quickViewBtnProps.onClick, className: cx('icon', buttonsPos, (hasTrashButton || hasWishButton) && 'as-second', hasTrashButton && hasWishButton && 'as-third', quickViewBtnProps.className) })),
|
|
131
|
-
hasSelectionButton && selectionProps && (react_1.default.createElement("div", { onClick: selectionProps.onSelect, className: cx('selection-container') },
|
|
132
|
-
react_1.default.createElement("div", { className: cx('selection-circle') }, selectionProps.isSelected && react_1.default.createElement(selected_svg_1.default, { width: 56, height: 56 }))))));
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
exports.ItemImage = ItemImage;
|
|
@@ -1,158 +0,0 @@
|
|
|
1
|
-
.wrapper {
|
|
2
|
-
min-width: 1px;
|
|
3
|
-
position: relative;
|
|
4
|
-
display: flex;
|
|
5
|
-
flex-flow: column;
|
|
6
|
-
&.small-image {
|
|
7
|
-
.image-wrapper {
|
|
8
|
-
min-height: 212px;
|
|
9
|
-
@media (max-width: 1600px) {
|
|
10
|
-
min-height: 191px;
|
|
11
|
-
}
|
|
12
|
-
@media (max-width: 1280px) {
|
|
13
|
-
min-height: 179px;
|
|
14
|
-
}
|
|
15
|
-
@media (max-width: 1024px) {
|
|
16
|
-
min-height: 168px;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
&.big-image {
|
|
21
|
-
.image-wrapper {
|
|
22
|
-
min-height: 345px;
|
|
23
|
-
@media (max-width: 1600px) {
|
|
24
|
-
min-height: 350px;
|
|
25
|
-
}
|
|
26
|
-
@media (max-width: 1280px) {
|
|
27
|
-
min-height: 250px;
|
|
28
|
-
}
|
|
29
|
-
@media (max-width: 1024px) {
|
|
30
|
-
min-height: 168px;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.image-wrapper {
|
|
37
|
-
overflow: hidden;
|
|
38
|
-
position: relative;
|
|
39
|
-
.with-filter-blur {
|
|
40
|
-
filter: blur(24px);
|
|
41
|
-
}
|
|
42
|
-
.fake-hover-wrapper {
|
|
43
|
-
opacity: 0;
|
|
44
|
-
width: 100%;
|
|
45
|
-
height: 100%;
|
|
46
|
-
min-height: 1px;
|
|
47
|
-
position: absolute;
|
|
48
|
-
z-index: 2;
|
|
49
|
-
.fake-hover {
|
|
50
|
-
.fake-hover-label {
|
|
51
|
-
position: absolute;
|
|
52
|
-
left: 2px;
|
|
53
|
-
top: 2px;
|
|
54
|
-
height: 2px;
|
|
55
|
-
right: 2px;
|
|
56
|
-
background: #9e9e9e;
|
|
57
|
-
opacity: 0.32;
|
|
58
|
-
border-radius: 4px;
|
|
59
|
-
}
|
|
60
|
-
&.selected {
|
|
61
|
-
.fake-hover-label {
|
|
62
|
-
opacity: 1;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
.fake-hover {
|
|
67
|
-
height: 100%;
|
|
68
|
-
position: absolute;
|
|
69
|
-
display: flex;
|
|
70
|
-
justify-content: center;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
|
74
|
-
a {
|
|
75
|
-
display: block;
|
|
76
|
-
position: relative;
|
|
77
|
-
}
|
|
78
|
-
a::before {
|
|
79
|
-
content: '';
|
|
80
|
-
display: block;
|
|
81
|
-
position: absolute;
|
|
82
|
-
top: 0;
|
|
83
|
-
left: 0;
|
|
84
|
-
right: 0;
|
|
85
|
-
bottom: 0;
|
|
86
|
-
background-color: rgba(0, 0, 0, 0.04);
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.badges {
|
|
92
|
-
margin-top: 4px;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.image {
|
|
96
|
-
display: block;
|
|
97
|
-
filter: brightness(96%);
|
|
98
|
-
width: 100%;
|
|
99
|
-
height: auto;
|
|
100
|
-
font-size: 14px;
|
|
101
|
-
min-height: 1px;
|
|
102
|
-
min-width: 1px;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.with-blur {
|
|
106
|
-
position: absolute;
|
|
107
|
-
top: -5px;
|
|
108
|
-
left: -5px;
|
|
109
|
-
width: calc(100% + 10px);
|
|
110
|
-
height: calc(100% + 10px);
|
|
111
|
-
background: rgba(255, 255, 255, 0.5);
|
|
112
|
-
z-index: 4;
|
|
113
|
-
display: flex;
|
|
114
|
-
justify-content: center;
|
|
115
|
-
align-items: center;
|
|
116
|
-
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
|
117
|
-
background: rgba(255, 255, 255, 0.95);
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.icon {
|
|
122
|
-
position: absolute;
|
|
123
|
-
z-index: 2;
|
|
124
|
-
user-select: none;
|
|
125
|
-
cursor: pointer;
|
|
126
|
-
top: 8px;
|
|
127
|
-
&.right {
|
|
128
|
-
right: 8px;
|
|
129
|
-
}
|
|
130
|
-
&.left {
|
|
131
|
-
left: 8px;
|
|
132
|
-
}
|
|
133
|
-
&.as-second {
|
|
134
|
-
top: 40px; // 8px + 24px + 8px
|
|
135
|
-
}
|
|
136
|
-
&.as-third {
|
|
137
|
-
top: 72px; // 8px + 2 * (24px + 8px)
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
.selection-container {
|
|
142
|
-
position: absolute;
|
|
143
|
-
top: 0;
|
|
144
|
-
width: 100%;
|
|
145
|
-
height: 100%;
|
|
146
|
-
display: flex;
|
|
147
|
-
justify-content: center;
|
|
148
|
-
align-items: center;
|
|
149
|
-
.selection-circle {
|
|
150
|
-
background: #fff;
|
|
151
|
-
width: 56px;
|
|
152
|
-
height: 56px;
|
|
153
|
-
border-radius: 50px;
|
|
154
|
-
display: flex;
|
|
155
|
-
justify-content: center;
|
|
156
|
-
align-items: center;
|
|
157
|
-
}
|
|
158
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Modifier } from '../button';
|
|
3
|
-
export interface ModifiersWidgetProps {
|
|
4
|
-
title?: string;
|
|
5
|
-
items: Modifier[];
|
|
6
|
-
sizesTableUrl?: string;
|
|
7
|
-
onSelectItem?: (item: Modifier) => void;
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* Компонент блока модификаторов.
|
|
11
|
-
* @param props Свойства компонента.
|
|
12
|
-
* @param props.title Название сущности модификатора.
|
|
13
|
-
* @param props.items Данные модификатора товара.
|
|
14
|
-
* @param props.sizesTableUrl Url таблицы размеров.
|
|
15
|
-
* @param props.onSelectItem Будет вызвана при выборе модификатора.
|
|
16
|
-
* @return Элемент.
|
|
17
|
-
*/
|
|
18
|
-
export declare const ModifiersWidget: ({ title, items, sizesTableUrl, onSelectItem, }: ModifiersWidgetProps) => JSX.Element;
|
|
@@ -1,36 +0,0 @@
|
|
|
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.ModifiersWidget = void 0;
|
|
7
|
-
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const get_declination_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/get-declination"));
|
|
9
|
-
const group_1 = require("../group");
|
|
10
|
-
const prop_1 = __importDefault(require("lodash/fp/prop"));
|
|
11
|
-
const link_1 = require("@sima-land/ui-nucleons/link");
|
|
12
|
-
const bind_1 = __importDefault(require("classnames/bind"));
|
|
13
|
-
const modifiers_widget_module_scss_1 = __importDefault(require("./modifiers-widget.module.scss"));
|
|
14
|
-
const cx = bind_1.default.bind(modifiers_widget_module_scss_1.default);
|
|
15
|
-
/**
|
|
16
|
-
* Компонент блока модификаторов.
|
|
17
|
-
* @param props Свойства компонента.
|
|
18
|
-
* @param props.title Название сущности модификатора.
|
|
19
|
-
* @param props.items Данные модификатора товара.
|
|
20
|
-
* @param props.sizesTableUrl Url таблицы размеров.
|
|
21
|
-
* @param props.onSelectItem Будет вызвана при выборе модификатора.
|
|
22
|
-
* @return Элемент.
|
|
23
|
-
*/
|
|
24
|
-
const ModifiersWidget = ({ title, items, sizesTableUrl, onSelectItem, }) => (react_1.default.createElement("div", null,
|
|
25
|
-
title && (react_1.default.createElement("h3", { className: cx('modifiers-title') },
|
|
26
|
-
title,
|
|
27
|
-
" (",
|
|
28
|
-
items.length,
|
|
29
|
-
"\u00A0",
|
|
30
|
-
(0, get_declination_1.default)(items.length, ['вариант', 'варианта', 'вариантов']),
|
|
31
|
-
"):")),
|
|
32
|
-
react_1.default.createElement(group_1.ModifiersGroup, { items: items, getItemContent: (0, prop_1.default)('name'), getItemCount: (0, prop_1.default)('inCartQty'), onSelectItem: (item, selected) => {
|
|
33
|
-
!selected && onSelectItem && onSelectItem(item);
|
|
34
|
-
} }),
|
|
35
|
-
Boolean(sizesTableUrl) && (react_1.default.createElement(link_1.Link, { href: sizesTableUrl, className: cx('modifiers-link') }, "\u0422\u0430\u0431\u043B\u0438\u0446\u0430 \u0440\u0430\u0437\u043C\u0435\u0440\u043E\u0432"))));
|
|
36
|
-
exports.ModifiersWidget = ModifiersWidget;
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
Виджет модификаторов с основными свойствами:
|
|
2
|
-
|
|
3
|
-
```jsx
|
|
4
|
-
import items from '../__stories__/items.js';
|
|
5
|
-
<ModifiersWidget
|
|
6
|
-
title='Варианты'
|
|
7
|
-
items={items.imgItems}
|
|
8
|
-
/>
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
Виджет модификаторов с отметками о количестве в корзине и уценке:
|
|
12
|
-
|
|
13
|
-
```jsx
|
|
14
|
-
import items from '../__stories__/items.js';
|
|
15
|
-
<ModifiersWidget
|
|
16
|
-
title='Варианты'
|
|
17
|
-
items={items.imgItemsWithMark}
|
|
18
|
-
/>
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
Виджет модификаторов с ссылкой на таблицу размеров:
|
|
22
|
-
|
|
23
|
-
```jsx
|
|
24
|
-
import items from '../__stories__/items.js';
|
|
25
|
-
|
|
26
|
-
<ModifiersWidget
|
|
27
|
-
title='Размер / рост'
|
|
28
|
-
items={items.textItems}
|
|
29
|
-
sizesTableUrl='/'
|
|
30
|
-
/>
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
Виджет модификаторов с модификаторами цвета:
|
|
34
|
-
|
|
35
|
-
```jsx
|
|
36
|
-
import items from '../__stories__/items.js';
|
|
37
|
-
<ModifiersWidget
|
|
38
|
-
title='Варианты'
|
|
39
|
-
items={items.colorItems}
|
|
40
|
-
/>
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
Виджет модификаторов в ограниченном блоке:
|
|
44
|
-
|
|
45
|
-
```jsx
|
|
46
|
-
import items from '../__stories__/items.js';
|
|
47
|
-
<div style={{ width: 200, border: '1px dashed #ccc' }}>
|
|
48
|
-
<ModifiersWidget
|
|
49
|
-
title='Варианты'
|
|
50
|
-
items={items.imgItems.concat(items.imgItemsWithMark)}
|
|
51
|
-
/>
|
|
52
|
-
</div>
|
|
53
|
-
```
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import React, { Component } from 'react';
|
|
2
|
-
import { BadgeProps } from '../../../common/components/badge';
|
|
3
|
-
export interface ItemImageProps {
|
|
4
|
-
src?: string;
|
|
5
|
-
alt?: string;
|
|
6
|
-
hasWishButton?: boolean;
|
|
7
|
-
wishProps?: {
|
|
8
|
-
isWished?: boolean;
|
|
9
|
-
className?: string;
|
|
10
|
-
onClick?: React.MouseEventHandler;
|
|
11
|
-
};
|
|
12
|
-
className?: string;
|
|
13
|
-
onClick?: React.MouseEventHandler;
|
|
14
|
-
badges?: BadgeProps[];
|
|
15
|
-
withBlur?: boolean;
|
|
16
|
-
itemUrl?: string;
|
|
17
|
-
isFetchingWishItems?: boolean;
|
|
18
|
-
onLoadImage?: (duration: number) => void;
|
|
19
|
-
}
|
|
20
|
-
/**
|
|
21
|
-
* Компонент изображения товара с избранным.
|
|
22
|
-
* @param props Свойства компонента.
|
|
23
|
-
* @param props.src Ссылка на изображение.
|
|
24
|
-
* @param props.alt Alt для изображения.
|
|
25
|
-
* @param props.className Дополнительный класс для компонента.
|
|
26
|
-
* @param props.onClick Обработчик клика по картинке.
|
|
27
|
-
* @param props.badges Шильдики.
|
|
28
|
-
* @param props.wishProps Свойства для избранного.
|
|
29
|
-
* @param props.withBlur Добавление блюра.
|
|
30
|
-
* @param props.isFetchingWishItems Признак загрузки добавления товара в список избранного.
|
|
31
|
-
*/
|
|
32
|
-
export declare class ItemImage extends Component<ItemImageProps> {
|
|
33
|
-
bootStartTime: number;
|
|
34
|
-
image: any;
|
|
35
|
-
/**
|
|
36
|
-
* @inheritdoc
|
|
37
|
-
*/
|
|
38
|
-
constructor(props: any);
|
|
39
|
-
/**
|
|
40
|
-
* @inheritdoc
|
|
41
|
-
*/
|
|
42
|
-
componentDidMount(): void;
|
|
43
|
-
/**
|
|
44
|
-
* Возвращает фото.
|
|
45
|
-
* @param {Object} image Данные изображения.
|
|
46
|
-
* @param {string} image.src Url изображения.
|
|
47
|
-
* @param {string} image.alt Alt изображения.
|
|
48
|
-
* @param {Function} onClick Колбэк на клик по изображению.
|
|
49
|
-
* @return {Object} Свойства для компонента.
|
|
50
|
-
*/
|
|
51
|
-
getImage: ({ src, alt }: any, onClick: any) => JSX.Element;
|
|
52
|
-
/**
|
|
53
|
-
* @inheritdoc
|
|
54
|
-
*/
|
|
55
|
-
render(): JSX.Element;
|
|
56
|
-
}
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
-
}) : function(o, v) {
|
|
12
|
-
o["default"] = v;
|
|
13
|
-
});
|
|
14
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
-
if (mod && mod.__esModule) return mod;
|
|
16
|
-
var result = {};
|
|
17
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
-
__setModuleDefault(result, mod);
|
|
19
|
-
return result;
|
|
20
|
-
};
|
|
21
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
22
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
23
|
-
};
|
|
24
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
exports.ItemImage = void 0;
|
|
26
|
-
const react_1 = __importStar(require("react"));
|
|
27
|
-
const link_1 = require("@sima-land/ui-nucleons/link");
|
|
28
|
-
const badge_list_1 = require("../../../common/components/badge-list");
|
|
29
|
-
const badge_1 = require("../../../common/components/badge");
|
|
30
|
-
const wish_button_1 = require("../../../common/components/wish-button");
|
|
31
|
-
const eighteen_plus_svg_1 = __importDefault(require("../../../common/icons/eighteen-plus.svg"));
|
|
32
|
-
const bind_1 = __importDefault(require("classnames/bind"));
|
|
33
|
-
const item_image_module_scss_1 = __importDefault(require("./item-image.module.scss"));
|
|
34
|
-
const cx = bind_1.default.bind(item_image_module_scss_1.default);
|
|
35
|
-
/**
|
|
36
|
-
* Компонент изображения товара с избранным.
|
|
37
|
-
* @param props Свойства компонента.
|
|
38
|
-
* @param props.src Ссылка на изображение.
|
|
39
|
-
* @param props.alt Alt для изображения.
|
|
40
|
-
* @param props.className Дополнительный класс для компонента.
|
|
41
|
-
* @param props.onClick Обработчик клика по картинке.
|
|
42
|
-
* @param props.badges Шильдики.
|
|
43
|
-
* @param props.wishProps Свойства для избранного.
|
|
44
|
-
* @param props.withBlur Добавление блюра.
|
|
45
|
-
* @param props.isFetchingWishItems Признак загрузки добавления товара в список избранного.
|
|
46
|
-
*/
|
|
47
|
-
class ItemImage extends react_1.Component {
|
|
48
|
-
/**
|
|
49
|
-
* @inheritdoc
|
|
50
|
-
*/
|
|
51
|
-
constructor(props) {
|
|
52
|
-
super(props);
|
|
53
|
-
/**
|
|
54
|
-
* Возвращает фото.
|
|
55
|
-
* @param {Object} image Данные изображения.
|
|
56
|
-
* @param {string} image.src Url изображения.
|
|
57
|
-
* @param {string} image.alt Alt изображения.
|
|
58
|
-
* @param {Function} onClick Колбэк на клик по изображению.
|
|
59
|
-
* @return {Object} Свойства для компонента.
|
|
60
|
-
*/
|
|
61
|
-
this.getImage = ({ src, alt }, onClick) => (react_1.default.createElement("img", { className: cx('image'), src: src, alt: alt, ref: this.image, onClick: onClick }));
|
|
62
|
-
this.image = (0, react_1.createRef)();
|
|
63
|
-
this.bootStartTime = Date.now();
|
|
64
|
-
}
|
|
65
|
-
/**
|
|
66
|
-
* @inheritdoc
|
|
67
|
-
*/
|
|
68
|
-
componentDidMount() {
|
|
69
|
-
const img = this.image.current;
|
|
70
|
-
const { onLoadImage } = this.props;
|
|
71
|
-
img && img.complete && (onLoadImage === null || onLoadImage === void 0 ? void 0 : onLoadImage(Date.now() - this.bootStartTime));
|
|
72
|
-
}
|
|
73
|
-
/**
|
|
74
|
-
* @inheritdoc
|
|
75
|
-
*/
|
|
76
|
-
render() {
|
|
77
|
-
const { src, alt, hasWishButton, wishProps, className, onClick, badges, withBlur, itemUrl, isFetchingWishItems, } = this.props;
|
|
78
|
-
return (react_1.default.createElement("div", { className: cx('wrapper', className) },
|
|
79
|
-
withBlur && (react_1.default.createElement("div", { className: cx('with-blur') },
|
|
80
|
-
react_1.default.createElement(eighteen_plus_svg_1.default, { width: 124, height: 124, opacity: '0.3' }))),
|
|
81
|
-
react_1.default.createElement("div", { className: cx('image-wrapper') },
|
|
82
|
-
react_1.default.createElement(link_1.Link, { href: itemUrl }, withBlur ? (react_1.default.createElement("div", { className: cx('with-filter-blur'), children: this.getImage({ src, alt }, onClick) })) : (this.getImage({ src, alt }, onClick)))),
|
|
83
|
-
Array.isArray(badges) && Boolean(badges.length) && !withBlur && (react_1.default.createElement("div", { className: cx('badges') },
|
|
84
|
-
react_1.default.createElement(badge_list_1.BadgeList, null, badges.map((badge, index) => (react_1.default.createElement(badge_1.Badge, Object.assign({ key: index }, badge))))))),
|
|
85
|
-
hasWishButton && (react_1.default.createElement(wish_button_1.WishButton, { checked: wishProps === null || wishProps === void 0 ? void 0 : wishProps.isWished, className: wishProps === null || wishProps === void 0 ? void 0 : wishProps.className, onClick: wishProps === null || wishProps === void 0 ? void 0 : wishProps.onClick, disabled: isFetchingWishItems }))));
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
exports.ItemImage = ItemImage;
|