@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.
Files changed (31) hide show
  1. package/common/components/intractive-image/index.d.ts +1 -1
  2. package/common/components/intractive-image/index.js +3 -4
  3. package/common/constants.d.ts +2 -5
  4. package/common/constants.js +2 -2
  5. package/common/types.d.ts +1 -0
  6. package/common/types.js +2 -0
  7. package/desktop/components/modifiers/button/index.d.ts +5 -3
  8. package/desktop/components/modifiers/button/index.js +5 -7
  9. package/desktop/components/modifiers/button/modifier-button.module.scss +4 -0
  10. package/desktop/components/modifiers/group/index.d.ts +11 -81
  11. package/desktop/components/modifiers/group/index.js +29 -133
  12. package/desktop/components/modifiers/group/modifiers-group.module.scss +19 -31
  13. package/desktop/components/modifiers/group/utils.d.ts +20 -0
  14. package/desktop/components/modifiers/group/utils.js +73 -0
  15. package/desktop/components/modifiers/modifiers.scss +5 -0
  16. package/desktop/components/product-carousel/index.js +1 -1
  17. package/mobile/components/modifiers-list/modifier-item/index.d.ts +2 -1
  18. package/mobile/components/modifiers-list/modifier-item/index.js +3 -3
  19. package/mobile/components/search-bar/index.d.ts +15 -17
  20. package/mobile/components/search-bar/index.js +3 -14
  21. package/package.json +1 -1
  22. package/desktop/components/item-image/index.d.ts +0 -88
  23. package/desktop/components/item-image/index.js +0 -135
  24. package/desktop/components/item-image/item-image.module.scss +0 -158
  25. package/desktop/components/modifiers/widget/index.d.ts +0 -18
  26. package/desktop/components/modifiers/widget/index.js +0 -36
  27. package/desktop/components/modifiers/widget/modifiers-widget.module.scss +0 -10
  28. package/desktop/components/modifiers/widget/readme.md +0 -53
  29. package/mobile/components/item-image/index.d.ts +0 -56
  30. package/mobile/components/item-image/index.js +0 -88
  31. 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
- inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
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
- buttonText?: string;
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: ({ inputMode, value, onChange, placeholder, onClear, endButtons, startButtons, withSearchIcon, autoFocus, description, }: SearchBarProps) => JSX.Element;
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 = ({ inputMode, value, onChange, placeholder = 'Поиск', onClear, endButtons = [], startButtons = [], withSearchIcon = true, autoFocus = true, description, }) => {
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,6 +1,6 @@
1
1
  {
2
2
  "name": "@sima-land/moleculas",
3
- "version": "13.4.0",
3
+ "version": "14.2.0",
4
4
  "repository": "ssh://git@github.com:sima-land/moleculas.git",
5
5
  "author": "www.sima-land.ru team",
6
6
  "license": "Apache-2.0",
@@ -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,10 +0,0 @@
1
- .modifiers-title {
2
- font-size: 14px;
3
- font-weight: normal;
4
- margin: 0 0 16px;
5
- }
6
-
7
- .modifiers-link {
8
- display: inline-block;
9
- margin: 16px 0;
10
- }
@@ -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
- }