@sima-land/moleculas 16.0.0-alpha.2 → 16.0.0-alpha.21

package/desktop/components/modifiers/group/modifiers-group.module.scss

@@ -1,33 +0,0 @@
-@use 'node_modules/@sima-land/ui-nucleons/colors';
-@use '../modifiers';
-
-.root {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  margin: -#{modifiers.$gutter};
-  font-size: 0;
-  overflow: hidden;
-  &:not(.opened) {
-    max-height: modifiers.$groupMaxHeight;
-  }
-}
-
-.item {
-  height: modifiers.$minSize;
-  margin: modifiers.$gutter;
-  max-width: 100%;
-  &.hidden {
-    display: none;
-  }
-  &.invisible {
-    opacity: 0;
-    cursor: default;
-    pointer-events: none;
-  }
-}
-
-.opener {
-  color: colors.$basic-blue;
-}

package/desktop/components/modifiers/group/utils.d.ts

@@ -1,20 +0,0 @@
-import { RefObject } from 'react';
-export interface ViewState {
-    phase: 'default' | 'ready';
-    lastVisibleIndex: number;
-}
-export declare const initialViewState: ViewState;
-/**
- * Хук состояния отображения блока модификаторов.
- * @param containerRef Ref элемента-контейнера.
- * @param openerRef Ref элемента кнопки, показывающей весь список модификаторов.
- * @return Состояние.
- */
-export declare function useViewState(containerRef: RefObject<HTMLElement>, openerRef: RefObject<HTMLElement>): ViewState;
-/**
- * Определяет индекс последней видимой кнопки-модификатора для свернутого списка модификаторов.
- * @param containerRef Ref элемента-контейнера.
- * @param openerRef Ref элемента кнопки, показывающей весь список модификаторов.
- * @return Состояние.
- */
-export declare function defineViewState(containerRef: RefObject<HTMLElement>, openerRef: RefObject<HTMLElement>): ViewState;

package/desktop/components/modifiers/group/utils.js

@@ -1,73 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defineViewState = exports.useViewState = exports.initialViewState = void 0;
-const react_1 = require("react");
-const hooks_1 = require("@sima-land/ui-nucleons/hooks");
-const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
-exports.initialViewState = {
-    phase: 'default',
-    lastVisibleIndex: -1,
-};
-/**
- * Хук состояния отображения блока модификаторов.
- * @param containerRef Ref элемента-контейнера.
- * @param openerRef Ref элемента кнопки, показывающей весь список модификаторов.
- * @return Состояние.
- */
-function useViewState(containerRef, openerRef) {
-    const [viewState, setViewState] = (0, react_1.useState)(exports.initialViewState);
-    (0, react_1.useEffect)(() => {
-        const off = (0, on_1.default)(window, 'resize', () => {
-            setViewState(exports.initialViewState);
-        });
-        return off;
-    }, []);
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        if (viewState.phase === 'default') {
-            setViewState(defineViewState(containerRef, openerRef));
-        }
-    }, [viewState.phase, containerRef, openerRef]);
-    return viewState;
-}
-exports.useViewState = useViewState;
-/**
- * Определяет индекс последней видимой кнопки-модификатора для свернутого списка модификаторов.
- * @param containerRef Ref элемента-контейнера.
- * @param openerRef Ref элемента кнопки, показывающей весь список модификаторов.
- * @return Состояние.
- */
-function defineViewState(containerRef, openerRef) {
-    const state = {
-        phase: 'ready',
-        lastVisibleIndex: -1,
-    };
-    const container = containerRef.current;
-    const opener = openerRef.current;
-    if (container && opener) {
-        const parentRect = container.getBoundingClientRect();
-        const childList = [...container.children];
-        const firstHiddenNodeIndex = childList
-            .filter(child => child !== opener)
-            .findIndex(child => {
-            const childRect = child.getBoundingClientRect();
-            return childRect.top - parentRect.top >= parentRect.height;
-        });
-        if (firstHiddenNodeIndex !== -1) {
-            const lastVisibleIndex = firstHiddenNodeIndex - 1;
-            const lastVisible = childList[lastVisibleIndex];
-            if (lastVisible) {
-                const rightBound = lastVisible.getBoundingClientRect().right;
-                const rightContainerBound = container.getBoundingClientRect().right;
-                // проверяем, хватает ли кнопке места (с запасом в половину) после последнего видимого дочернего элемента
-                const isOpenerFit = rightContainerBound - rightBound >= opener.clientWidth * 1.5;
-                // если хватает места - ставим кнопку после последнего, иначе - вместо
-                state.lastVisibleIndex = lastVisibleIndex + Number(isOpenerFit);
-            }
-        }
-    }
-    return state;
-}
-exports.defineViewState = defineViewState;

package/desktop/components/modifiers/modifiers.scss

@@ -1,8 +0,0 @@
-// внешний отступ вокруг каждого элемента группы
-$gutter: 4px;
-
-// размер квадратного модификатора
-$minSize: 48px;
-
-// максимальная высота блока с ограничением в 2 строки
-$groupMaxHeight: ($minSize * 2) + ($gutter * 4);

package/mobile/components/modifiers-list/index.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import { ModifierItemProps } from './modifier-item';
-export interface ModifierListProps {
-    /** Массив данных модификаторов. */
-    items?: ModifierItemProps[];
-    /** Графема валюты пользователя. */
-    currencyGrapheme?: string;
-    /** Url таблицы размеров. */
-    sizesTableUrl?: string;
-    /** Свойства блока-обертки. */
-    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
-    /** Свойства блока-обертки списка модификаторов. */
-    itemsContainerProps?: React.HTMLAttributes<HTMLDivElement>;
-    /** Обработчик клика на модификатор. */
-    onItemClick?: (item: ModifierItemProps) => void;
-}
-/**
- * Компонент списка модификаторов.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const ModifiersList: ({ items, currencyGrapheme, sizesTableUrl, wrapperProps, itemsContainerProps, onItemClick, }: ModifierListProps) => JSX.Element;

package/mobile/components/modifiers-list/index.js

@@ -1,25 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModifiersList = void 0;
-const react_1 = __importDefault(require("react"));
-const modifier_item_1 = require("./modifier-item");
-const link_1 = require("@sima-land/ui-nucleons/link");
-const statement_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/statement"));
-const modifiers_list_module_scss_1 = __importDefault(require("./modifiers-list.module.scss"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const cx = bind_1.default.bind(modifiers_list_module_scss_1.default);
-/**
- * Компонент списка модификаторов.
- * @param props Свойства.
- * @return Элемент.
- */
-const ModifiersList = ({ items, currencyGrapheme, sizesTableUrl, wrapperProps, itemsContainerProps, onItemClick, }) => (react_1.default.createElement("div", Object.assign({}, wrapperProps),
-    sizesTableUrl && (react_1.default.createElement("div", { className: cx('sizes-table-wrapper') },
-        react_1.default.createElement(link_1.Link, { className: cx('sizes-table-link'), href: sizesTableUrl },
-            "\u0422\u0430\u0431\u043B\u0438\u0446\u0430 \u0440\u0430\u0437\u043C\u0435\u0440\u043E\u0432",
-            react_1.default.createElement(statement_1.default, { role: 'presentation', className: cx('sizes-table-icon') })))),
-    Array.isArray(items) && (react_1.default.createElement("div", Object.assign({}, itemsContainerProps), items.map((item, index) => (react_1.default.createElement(modifier_item_1.ModifierItem, Object.assign({ key: index }, item, { onClick: () => onItemClick && onItemClick(item), currencyGrapheme: currencyGrapheme }))))))));
-exports.ModifiersList = ModifiersList;

package/mobile/components/modifiers-list/modifier-item/index.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-import { ModifierType } from '../../../../common/types';
-export interface ModifierItemProps {
-    name: string;
-    selected?: boolean;
-    type?: ModifierType;
-    color?: string;
-    image?: string;
-    price: number;
-    currencyGrapheme?: string;
-    additionalText?: string;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-}
-export declare const cx: (...args: import("classnames").ArgumentArray) => string;
-/**
- * Компонент модификатора в списке.
- * @param props Свойства компонента.
- * @param props.name Наименование модификатора.
- * @param props.selected Выбран ли модификатор.
- * @param props.type Тип модификатора.
- * @param props.color Цвет модификатора.
- * @param props.image URL изображения модификатора.
- * @param props.price Цена товара-модификатора.
- * @param props.currencyGrapheme Графема валюты пользователя.
- * @param props.additionalText Дополнительный текст.
- * @param props.onClick Обработчик клика на модификатор.
- * @return Элемент.
- */
-export declare const ModifierItem: ({ name, selected, type, color, image, price, currencyGrapheme, additionalText, onClick, }: ModifierItemProps) => JSX.Element;

package/mobile/components/modifiers-list/modifier-item/index.js

@@ -1,38 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModifierItem = exports.cx = void 0;
-const react_1 = __importDefault(require("react"));
-const modifier_item_module_scss_1 = __importDefault(require("./modifier-item.module.scss"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const price_1 = require("@sima-land/ui-nucleons/price");
-const text_1 = require("@sima-land/ui-nucleons/text");
-const check_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/check"));
-const constants_1 = require("../../../../common/constants");
-exports.cx = bind_1.default.bind(modifier_item_module_scss_1.default);
-/**
- * Компонент модификатора в списке.
- * @param props Свойства компонента.
- * @param props.name Наименование модификатора.
- * @param props.selected Выбран ли модификатор.
- * @param props.type Тип модификатора.
- * @param props.color Цвет модификатора.
- * @param props.image URL изображения модификатора.
- * @param props.price Цена товара-модификатора.
- * @param props.currencyGrapheme Графема валюты пользователя.
- * @param props.additionalText Дополнительный текст.
- * @param props.onClick Обработчик клика на модификатор.
- * @return Элемент.
- */
-const ModifierItem = ({ name, selected, type = 'text', color, image, price, currencyGrapheme, additionalText, onClick, }) => (react_1.default.createElement("div", { onClick: onClick, className: (0, exports.cx)('wrapper', selected && 'selected') },
-    Boolean(type === constants_1.MODIFIER_TYPE.image && image) && (react_1.default.createElement("img", { className: (0, exports.cx)('adornment'), src: image, alt: name })),
-    Boolean(type === constants_1.MODIFIER_TYPE.color && color) && (react_1.default.createElement("div", { className: (0, exports.cx)('adornment', 'color'), style: { backgroundColor: color } })),
-    react_1.default.createElement("div", { className: (0, exports.cx)('info') },
-        react_1.default.createElement("span", { className: (0, exports.cx)('name') }, name),
-        Boolean(price) && (react_1.default.createElement(price_1.Price, { value: price, currencyGrapheme: currencyGrapheme, className: (0, exports.cx)('price', additionalText && 'additional') })),
-        Boolean(additionalText) && (react_1.default.createElement(text_1.Text, { color: 'basic-gray38', children: additionalText, size: 12, lineHeight: 16 }))),
-    react_1.default.createElement("div", { className: (0, exports.cx)('icon-wrapper') }, selected && (react_1.default.createElement("div", { className: (0, exports.cx)('icon') },
-        react_1.default.createElement(check_1.default, { fill: '#fff', role: 'presentation' }))))));
-exports.ModifierItem = ModifierItem;

package/mobile/components/modifiers-list/modifier-item/modifier-item.module.scss

@@ -1,70 +0,0 @@
-@use 'node_modules/@sima-land/ui-nucleons/colors';
-
-.wrapper {
-  box-sizing: border-box;
-  cursor: pointer;
-  display: flex;
-  padding: 16px;
-  width: 100%;
-  &:not(:last-child) {
-    box-shadow: inset 0 -1px 0 colors.$basic-gray12;
-  }
-  &.selected {
-    background: colors.$basic-gray4;
-    cursor: auto;
-    pointer-events: none;
-  }
-}
-
-.adornment {
-  flex-shrink: 0;
-  display: block;
-  width: 48px;
-  height: 48px;
-  margin-right: 16px;
-  border-radius: 4px;
-  &.color {
-    box-sizing: border-box;
-    border: 1px solid #e0e0e0;
-  }
-}
-
-.info {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  .name {
-    &::first-letter {
-      text-transform: capitalize;
-    }
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 500;
-    padding-bottom: 4px;
-  }
-  .price {
-    font-size: 14px;
-    line-height: 20px;
-    &.additional {
-      padding-bottom: 12px;
-    }
-  }
-}
-
-.icon-wrapper {
-  flex-shrink: 0;
-  margin-left: 16px;
-  width: 48px;
-  height: 48px;
-}
-
-.icon {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  border-radius: 50%;
-  background-color: colors.$additional-teal;
-}

package/mobile/components/modifiers-list/modifiers-list.module.scss

@@ -1,21 +0,0 @@
-@use 'node_modules/@sima-land/ui-nucleons/colors';
-
-.sizes-table-wrapper {
-  box-shadow: inset 0 -1px 0 colors.$basic-gray12;
-  padding: 16px;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.sizes-table-icon {
-  vertical-align: middle;
-  fill: currentColor;
-  margin-left: 8px;
-  padding-bottom: 4px;
-}
-
-.sizes-table-link {
-  display: inline-block;
-  vertical-align: middle;
-  height: 24px;
-}

package/mobile/components/pseudo-input/index.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export interface PseudoInputProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Текст, введенный в поле. */
-    text?: string;
-}
-/**
- * Псевдо-поле поиска.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const PseudoInput: ({ text, className, ...rest }: PseudoInputProps) => JSX.Element;

package/mobile/components/pseudo-input/index.js

@@ -1,34 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PseudoInput = void 0;
-const react_1 = __importDefault(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const search_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/search"));
-const pseudo_input_module_scss_1 = __importDefault(require("./pseudo-input.module.scss"));
-const cx = bind_1.default.bind(pseudo_input_module_scss_1.default);
-/**
- * Псевдо-поле поиска.
- * @param props Свойства.
- * @return Элемент.
- */
-const PseudoInput = (_a) => {
-    var { text, className } = _a, rest = __rest(_a, ["text", "className"]);
-    return (react_1.default.createElement("div", Object.assign({}, rest, { role: 'button', className: cx('input', className) }),
-        react_1.default.createElement(search_1.default, { className: cx('icon'), "aria-hidden": 'true' }),
-        react_1.default.createElement("span", { className: cx('text') }, text)));
-};
-exports.PseudoInput = PseudoInput;

package/mobile/components/pseudo-input/pseudo-input.module.scss

@@ -1,24 +0,0 @@
-@use 'node_modules/@sima-land/ui-nucleons/colors';
-
-.input {
-  display: flex;
-  align-items: center;
-  height: 40px;
-  padding: 0 16px 0 12px;
-  border-radius: 8px;
-  background-color: colors.$basic-gray4;
-}
-
-.icon {
-  display: block;
-  flex-shrink: 0;
-  fill: colors.$basic-gray38;
-}
-
-.text {
-  display: block;
-  margin-left: 12px;
-  font-size: 16px;
-  line-height: 24px;
-  color: colors.$basic-gray38;
-}