@sima-land/moleculas 13.4.0 → 14.2.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/components/intractive-image/index.d.ts +1 -1
- package/common/components/intractive-image/index.js +3 -4
- 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/mobile/components/search-bar/index.d.ts +15 -17
- package/mobile/components/search-bar/index.js +3 -14
- 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
|
@@ -8,34 +8,32 @@ export interface ButtonProps {
|
|
|
8
8
|
iconColor?: Token;
|
|
9
9
|
}
|
|
10
10
|
export interface SearchBarProps {
|
|
11
|
-
|
|
11
|
+
/** Поисковый Запрос. */
|
|
12
12
|
value?: string;
|
|
13
|
+
/** Вызовется при изменении поискового запроса. */
|
|
13
14
|
onChange: React.ChangeEventHandler<HTMLInputElement>;
|
|
15
|
+
/** Тип клавиатуры. */
|
|
16
|
+
inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
|
|
17
|
+
/** Подсказка. */
|
|
14
18
|
placeholder?: string;
|
|
19
|
+
/** Вызовется при нажатии на кнопку очистки. */
|
|
15
20
|
onClear?: React.MouseEventHandler;
|
|
16
|
-
|
|
17
|
-
onButtonClick?: (...args: any[]) => any;
|
|
21
|
+
/** Кнопки(а) после поля. */
|
|
18
22
|
endButtons?: any[];
|
|
23
|
+
/** Кнопки(а) до поля. */
|
|
19
24
|
startButtons?: any[];
|
|
25
|
+
/** Признак наличия иконки поиска слева. */
|
|
20
26
|
withSearchIcon?: boolean;
|
|
27
|
+
/** Признак авто-фокуса. */
|
|
21
28
|
autoFocus?: boolean;
|
|
29
|
+
/** Описание в поле ввода. */
|
|
22
30
|
description?: string;
|
|
31
|
+
/** Ref для элемента текстового поля. */
|
|
32
|
+
inputRef?: React.MutableRefObject<HTMLInputElement | null>;
|
|
23
33
|
}
|
|
24
34
|
/**
|
|
25
35
|
* Компонент поисковой строки.
|
|
26
|
-
* @param props
|
|
27
|
-
* @param props.value Поисковый Запрос.
|
|
28
|
-
* @param props.onChange Вызовется при изменении поискового запроса.
|
|
29
|
-
* @param props.inputMode Тип клавиатуры.
|
|
30
|
-
* @param props.placeholder Подсказка.
|
|
31
|
-
* @param props.onClear Вызовется при нажатии на кнопку очистки.
|
|
32
|
-
* @param props.buttonText Текст кнопки.
|
|
33
|
-
* @param props.onButtonClick Обработчик нажатия на кнопку.
|
|
34
|
-
* @param props.endButtons Кнопки(а) после поля.
|
|
35
|
-
* @param props.startButtons Кнопки(а) до поля.
|
|
36
|
-
* @param props.withSearchIcon Признак наличия иконки поиска слева.
|
|
37
|
-
* @param props.autoFocus Признак автофокуса.
|
|
38
|
-
* @param props.description Описание в поле ввода.
|
|
36
|
+
* @param props Свойства.
|
|
39
37
|
* @return Элемент.
|
|
40
38
|
*/
|
|
41
|
-
export declare const SearchBar: ({
|
|
39
|
+
export declare const SearchBar: ({ value, onChange, inputMode, placeholder, onClear, endButtons, startButtons, withSearchIcon, autoFocus, description, inputRef: inputRefProp, }: SearchBarProps) => JSX.Element;
|
|
@@ -39,27 +39,16 @@ const more_vert_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Fi
|
|
|
39
39
|
exports.cx = bind_1.default.bind(search_bar_module_scss_1.default);
|
|
40
40
|
/**
|
|
41
41
|
* Компонент поисковой строки.
|
|
42
|
-
* @param props
|
|
43
|
-
* @param props.value Поисковый Запрос.
|
|
44
|
-
* @param props.onChange Вызовется при изменении поискового запроса.
|
|
45
|
-
* @param props.inputMode Тип клавиатуры.
|
|
46
|
-
* @param props.placeholder Подсказка.
|
|
47
|
-
* @param props.onClear Вызовется при нажатии на кнопку очистки.
|
|
48
|
-
* @param props.buttonText Текст кнопки.
|
|
49
|
-
* @param props.onButtonClick Обработчик нажатия на кнопку.
|
|
50
|
-
* @param props.endButtons Кнопки(а) после поля.
|
|
51
|
-
* @param props.startButtons Кнопки(а) до поля.
|
|
52
|
-
* @param props.withSearchIcon Признак наличия иконки поиска слева.
|
|
53
|
-
* @param props.autoFocus Признак автофокуса.
|
|
54
|
-
* @param props.description Описание в поле ввода.
|
|
42
|
+
* @param props Свойства.
|
|
55
43
|
* @return Элемент.
|
|
56
44
|
*/
|
|
57
|
-
const SearchBar = ({
|
|
45
|
+
const SearchBar = ({ value, onChange, inputMode, placeholder = 'Поиск', onClear, endButtons = [], startButtons = [], withSearchIcon = true, autoFocus = true, description, inputRef: inputRefProp, }) => {
|
|
58
46
|
const [shownDropdown, toggleDropdown] = (0, react_1.useState)(false);
|
|
59
47
|
const inputRef = (0, react_1.useRef)(null);
|
|
60
48
|
const dropDownRef = (0, react_1.useRef)(null);
|
|
61
49
|
const dropDownOpenerRef = (0, react_1.useRef)(null);
|
|
62
50
|
const needHideEndButtons = endButtons.length > 1;
|
|
51
|
+
(0, react_1.useImperativeHandle)(inputRefProp, () => inputRef.current);
|
|
63
52
|
(0, hooks_1.useOutsideClick)(dropDownRef, e => {
|
|
64
53
|
!dropDownOpenerRef.current.contains(e.target) &&
|
|
65
54
|
toggleDropdown(false);
|
package/package.json
CHANGED
|
@@ -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
|
-
}
|