@cloud-ru/uikit-product-site-selector-platform-drop-list 0.1.4

package/src/helperComponents/SelectorPlatformDropListPrivate/SelectorPlatformDropListPrivate.tsx

@@ -0,0 +1,132 @@
+import { ReactNode, useMemo, useState } from 'react';
+
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/uikit-product-icons';
+import { AdaptiveDroplist } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { MobileModalCustom } from '@cloud-ru/uikit-product-mobile-modal';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { DroplistProps } from '@snack-uikit/list';
+import { Typography } from '@snack-uikit/typography';
+
+import {
+  BaseIcon,
+  ContentItemList,
+  IconItemList,
+  SelectedItemList,
+  TitleWithGoBack,
+  Tooltip,
+} from '../../helperComponents';
+import {
+  IconSelector,
+  Item,
+  MultipleSelectorPlatformDropListProps,
+  SingleSelectorPlatformDropListProps,
+  TooltipMobile,
+} from '../../types';
+import styles from './styles.module.scss';
+import { findItems } from './utils';
+
+type BaseSelectorPlatformDropListPrivateProps = WithLayoutType<{
+  /** Заголовок верхней части блока выбора */
+  title: string;
+  /** Базовый заголовок нижней части блока выбора, отображается когда ничего не выбрано */
+  baseTitle: string;
+  /** Базовая иконка блока выбора слева, отображается когда ничего не выбрано */
+  baseIcon?: IconSelector;
+  /** Список элементов droplist */
+  items: Array<Item>;
+  /** Нижняя часть под списком droplist */
+  footer?: ReactNode;
+}>;
+
+export type SelectorPlatformDropListPrivateProps = BaseSelectorPlatformDropListPrivateProps &
+  (MultipleSelectorPlatformDropListProps | SingleSelectorPlatformDropListProps);
+
+export function SelectorPlatformDropListPrivate({
+  items,
+  value,
+  onChange,
+  footer,
+  title,
+  baseTitle,
+  baseIcon,
+  layoutType,
+  mode,
+}: SelectorPlatformDropListPrivateProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [tooltipMobile, setTooltipMobile] = useState<TooltipMobile>({
+    open: false,
+  });
+
+  const handleCloseTooltipMobile = () => {
+    setTooltipMobile({
+      open: false,
+    });
+  };
+
+  const itemsView = useMemo(
+    () =>
+      items.map(item => ({
+        id: item.id,
+        content: <ContentItemList title={item.title} />,
+        beforeContent: <IconItemList icon={item.icon} />,
+        afterContent: (
+          <Tooltip setTooltipMobile={setTooltipMobile} tooltipText={item.tooltipText} layoutType={layoutType} />
+        ),
+        className: styles.rowItem,
+        onClick: item.onClick,
+      })),
+    [items, layoutType],
+  );
+
+  const itemsWithDivider: DroplistProps['items'] = useMemo(
+    () => [...itemsView, { type: 'group', divider: true, items: [] }],
+    [itemsView],
+  );
+
+  const selection = useMemo(
+    () =>
+      mode === 'multiple'
+        ? ({ value, onChange, mode: 'multiple' } as MultipleSelectorPlatformDropListProps)
+        : ({ value, onChange, mode: 'single' } as SingleSelectorPlatformDropListProps),
+    [mode, onChange, value],
+  );
+
+  const foundItems = useMemo(() => findItems(items, value), [items, value]);
+
+  return (
+    <>
+      <AdaptiveDroplist
+        // @ts-expect-error label существует только у MobileDroplist, отсутствует у Droplist
+        label={<TitleWithGoBack title='Облачная платформа' />}
+        layoutType={layoutType}
+        trigger='click'
+        open={isOpen}
+        items={footer ? itemsWithDivider : itemsView}
+        onOpenChange={setIsOpen}
+        selection={selection}
+        footer={footer}
+        closeDroplistOnItemClick
+        size='m'
+      >
+        <div className={styles.root} data-focus={isOpen} role='button'>
+          <BaseIcon baseIcon={baseIcon} value={foundItems} lengthDroplist={items.length} />
+          <div className={styles.titleContainer}>
+            <Typography className={styles.valueLabel} family='sans' purpose='body' size='s'>
+              {title}
+            </Typography>
+            <SelectedItemList lengthDroplist={items.length} baseTitle={baseTitle} value={foundItems} />
+          </div>
+          <div className={styles.iconContainer}>
+            {isOpen ? <ChevronUpSVG className={styles.icon} /> : <ChevronDownSVG className={styles.icon} />}
+          </div>
+        </div>
+      </AdaptiveDroplist>
+      <MobileModalCustom open={tooltipMobile.open} onClose={handleCloseTooltipMobile}>
+        <MobileModalCustom.Header
+          title={<TitleWithGoBack onGoBack={handleCloseTooltipMobile} title='Облачная платформа' />}
+        />
+        <MobileModalCustom.Body content={<Typography.SansBodyL>{tooltipMobile.text}</Typography.SansBodyL>} />
+      </MobileModalCustom>
+    </>
+  );
+}

package/src/helperComponents/SelectorPlatformDropListPrivate/index.ts

@@ -0,0 +1,2 @@
+export { SelectorPlatformDropListPrivate } from './SelectorPlatformDropListPrivate';
+export type { SelectorPlatformDropListPrivateProps } from './SelectorPlatformDropListPrivate';

package/src/helperComponents/SelectorPlatformDropListPrivate/styles.module.scss

@@ -0,0 +1,59 @@
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element' as ste;
+
+.root {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 48px;
+  padding: 4px 12px 4px 8px;
+  background-color: ste.$sys-neutral-background1-level;
+  border: 1px solid ste.$sys-neutral-decor-default;
+  box-sizing: border-box;
+
+  &:hover {
+    border-color: ste.$sys-neutral-decor-hovered;
+  }
+
+  &[data-focus='true'] {
+    @include ste.outline-var(ste.$container-focused-m);
+
+    background-color: ste.simple-var(ste.$sys-neutral-background2-level);
+    border-color: ste.simple-var(ste.$theme-variables, 'sys', 'primary', 'accent-default');
+    outline-color: ste.simple-var(ste.$theme-variables, 'sys', 'primary', 'decor-activated');
+  }
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 36px;
+  width: 100%;
+
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.iconContainer {
+  width: 24px;
+  height: 24px;
+}
+
+.valueLabel {
+  cursor: pointer;
+  color: ste.$sys-neutral-text-light;
+}
+
+.valueTitle {
+  color: ste.$sys-neutral-text-main;
+}
+
+.icon {
+  color: ste.$sys-graphite-text-main;
+}
+
+.rowItem {
+  box-sizing: border-box;
+}
+

package/src/helperComponents/SelectorPlatformDropListPrivate/utils.ts

@@ -0,0 +1,15 @@
+import { Item } from '../../types';
+
+export function findItems(items: Array<Item>, value: Array<string> | string | undefined) {
+  if (!value) return [];
+
+  if (typeof value === 'string') {
+    const foundItem = items.find(item => item.id === value);
+    if (!foundItem) {
+      return [];
+    }
+    return [foundItem];
+  }
+
+  return items.filter(item => value.find(val => val === item.id));
+}

package/src/helperComponents/TitleWithGoBack/TitleWithGoBack.tsx

@@ -0,0 +1,21 @@
+import { MouseEventHandler, ReactNode } from 'react';
+
+import { ArrowLeftSVG } from '@cloud-ru/uikit-product-icons';
+import { Typography } from '@snack-uikit/typography';
+
+import s from './styles.module.scss';
+
+type TitleWithGoBackProps = {
+  title: ReactNode;
+  onGoBack?: MouseEventHandler<SVGElement>;
+};
+
+export function TitleWithGoBack({ onGoBack, title }: TitleWithGoBackProps) {
+  return (
+    <div className={s.wrapper} data-icon-back={Boolean(onGoBack)}>
+      {onGoBack && <ArrowLeftSVG size={24} className={s.arrow} onClick={onGoBack} />}
+      <Typography.SansTitleL>{title}</Typography.SansTitleL>
+      {onGoBack && <div className={s.buttonStub} />}
+    </div>
+  );
+}

package/src/helperComponents/TitleWithGoBack/index.ts

@@ -0,0 +1 @@
+export { TitleWithGoBack } from './TitleWithGoBack';

package/src/helperComponents/TitleWithGoBack/styles.module.scss

@@ -0,0 +1,21 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ste;
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  // оставляем, потому нет возможности отцентрировать через пропс, в компоненте AdaptiveDroplist ->MobileDroplist -> MobileModalCustom.Header не передается align, который в MobileModalCustom.Header имеется
+  width: calc(100vw - 32px);
+
+  &[data-icon-back="false"] {
+    justify-content: center;
+  }
+}
+
+.arrow {
+  color: ste.$sys-neutral-text-light;
+}
+
+.buttonStub {
+  width: 24px;
+}

package/src/helperComponents/Tooltip/Tooltip.tsx

@@ -0,0 +1,33 @@
+import { Dispatch, MouseEvent, SetStateAction } from 'react';
+
+import { QuestionSVG } from '@cloud-ru/uikit-product-icons';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { QuestionTooltip } from '@snack-uikit/tooltip';
+
+import { TooltipMobile } from '../../types';
+import styles from './styles.module.scss';
+
+type TooltipProps = WithLayoutType<{
+  tooltipText?: string;
+  setTooltipMobile: Dispatch<SetStateAction<TooltipMobile>>;
+}>;
+
+export function Tooltip({ layoutType, tooltipText, setTooltipMobile }: TooltipProps) {
+  if (!tooltipText) {
+    return null;
+  }
+
+  if (layoutType !== 'mobile') {
+    return <QuestionTooltip className={styles.questionTooltip} tip={tooltipText} />;
+  }
+
+  const handleOpen = (event: MouseEvent<SVGElement>) => {
+    event.stopPropagation();
+    setTooltipMobile({
+      open: true,
+      text: tooltipText,
+    });
+  };
+
+  return <QuestionSVG className={styles.icon} onClick={handleOpen} size={16} />;
+}

package/src/helperComponents/Tooltip/index.ts

@@ -0,0 +1 @@
+export { Tooltip } from './Tooltip';

package/src/helperComponents/Tooltip/styles.module.scss

@@ -0,0 +1,10 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ste;
+
+.questionTooltip {
+  margin: auto 0;
+}
+
+.icon {
+  color: ste.$sys-neutral-text-light;
+  margin: auto 0;
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,7 @@
+export { SelectedItemList } from './SelectedItemList';
+export { ContentItemList } from './ContentItemList';
+export { IconItemList } from './IconItemList';
+export { BaseIcon } from './BaseIcon';
+export { TitleWithGoBack } from './TitleWithGoBack';
+export { Tooltip } from './Tooltip';
+export { SelectorPlatformDropListPrivate } from './SelectorPlatformDropListPrivate';

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/types.ts

@@ -0,0 +1,37 @@
+import { JSXElementConstructor } from 'react';
+
+export type IconSelector = JSXElementConstructor<{
+  size?: number;
+  className?: string;
+}>;
+
+export type Item = {
+  id: string;
+  title: string;
+  icon: IconSelector;
+  onClick?: () => void;
+  tooltipText?: string;
+};
+
+export type TooltipMobile = {
+  open: boolean;
+  text?: string;
+};
+
+export type MultipleSelectorPlatformDropListProps = {
+  /** Режим выбора */
+  mode: 'multiple';
+  /** Controlled состояние */
+  value: Array<string>;
+  /** Controlled обработчик изменения состояния */
+  onChange(value: Array<string>): void;
+};
+
+export type SingleSelectorPlatformDropListProps = {
+  /** Режим выбора */
+  mode: 'single';
+  /** Controlled состояние */
+  value: string | undefined;
+  /** Controlled обработчик изменения состояния */
+  onChange(value: string | undefined): void;
+};