@cloud-ru/uikit-product-claudia 1.8.4 → 1.9.1

package/src/components/RateForm/components/TextFieldWithAccordionMessage/TextFieldWithAccordionMessage.tsx

@@ -0,0 +1,147 @@
+import { KeyboardEventHandler, useRef, useState } from 'react';
+
+import { themeVars } from '@sbercloud/figma-tokens-cloud-platform';
+import { ChevronUpInterfaceSVG } from '@cloud-ru/uikit-product-icons';
+import { Divider } from '@snack-uikit/divider';
+import { FieldTextArea } from '@snack-uikit/fields';
+import { Typography } from '@snack-uikit/typography';
+import { useLayoutEffect } from '@snack-uikit/utils';
+
+import { MESSAGE_MAX_LENGTH, STATIC_LINE_HEIGHT } from '../../constants';
+import { FieldSubmitButton } from '../FieldSubmitButton';
+import styles from './styles.module.scss';
+
+export type TextFieldWithAccordionMessageProps = {
+  /** Существующий комментарий */
+  comment?: string;
+  /** Плейсхолдер для поля ввода */
+  placeholder?: string;
+  /** Callback при изменении текста */
+  onChange?: (value: string) => void;
+  /** Callback при отправке */
+  onSubmit?: (value: string) => void;
+  /** Максимальная длина сообщения */
+  maxLength?: number;
+  /** Является ли устройство тач-девайсом */
+  isTouchDevice?: boolean;
+  /** Показывать ли тултип на кнопке отправки */
+  showSubmitTooltip?: boolean;
+  /** Текст тултипа для кнопки отправки */
+  submitTooltipText?: string;
+};
+
+export function TextFieldWithAccordionMessage({
+  comment,
+  placeholder,
+  onChange,
+  onSubmit,
+  maxLength = MESSAGE_MAX_LENGTH,
+  isTouchDevice = false,
+  showSubmitTooltip = true,
+  submitTooltipText,
+}: TextFieldWithAccordionMessageProps) {
+  const textRef = useRef<HTMLDivElement>(null);
+  const [isMultiLine, setIsMultiLine] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [message, setMessage] = useState(comment || '');
+
+  const isValid = typeof message === 'string' && message.trim().length > 0;
+
+  useLayoutEffect(() => {
+    if (!comment) return;
+
+    setMessage(comment);
+
+    const timeout = setTimeout(() => {
+      if (textRef.current) {
+        const textHeight = textRef.current.scrollHeight;
+        setIsMultiLine(textHeight > STATIC_LINE_HEIGHT * 2 + 5);
+      }
+    }, 0);
+
+    return () => clearTimeout(timeout);
+  }, [comment]);
+
+  const handleClickMessage = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const handleChangeMessage = (value: string) => {
+    const truncatedValue = value.slice(0, maxLength);
+    setMessage(truncatedValue);
+    onChange?.(truncatedValue);
+  };
+
+  const handleSubmit = () => {
+    if (isValid) {
+      onSubmit?.(message);
+    }
+  };
+
+  const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = event => {
+    if (event.key === 'Enter' && !event.shiftKey && !isTouchDevice) {
+      event.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <>
+      {comment && (
+        <div className={styles.comment}>
+          <Divider />
+
+          <div
+            className={styles.container}
+            data-clickable={isMultiLine || undefined}
+            onClick={isMultiLine ? handleClickMessage : undefined}
+            role={isMultiLine ? 'button' : undefined}
+          >
+            <div
+              ref={textRef}
+              className={styles.textContainer}
+              data-collapsed={(isMultiLine && !isExpanded) || undefined}
+            >
+              <Typography.LightBodyS className={styles.text}>{message}</Typography.LightBodyS>
+            </div>
+
+            {isMultiLine && (
+              <ChevronUpInterfaceSVG
+                color={themeVars.sys.neutral.textLight}
+                className={styles.textIcon}
+                data-rotated={!isExpanded || undefined}
+                size={20}
+              />
+            )}
+          </div>
+        </div>
+      )}
+
+      {!comment && (
+        <FieldTextArea
+          value={message}
+          size='m'
+          minRows={1}
+          maxRows={4}
+          placeholder={placeholder}
+          onChange={handleChangeMessage}
+          onKeyDown={handleKeyDown}
+          spellCheck
+          footer={
+            <div className={styles.actionsFooter}>
+              <FieldSubmitButton
+                tooltipText={showSubmitTooltip && !isTouchDevice ? submitTooltipText : undefined}
+                className={styles.buttonRight}
+                data-mobile={isTouchDevice || undefined}
+                active={isValid}
+                onClick={handleSubmit}
+                size={isTouchDevice ? 's' : 'xs'}
+              />
+            </div>
+          }
+          showClearButton={false}
+        />
+      )}
+    </>
+  );
+}

package/src/components/RateForm/components/TextFieldWithAccordionMessage/index.ts

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

package/src/components/RateForm/components/TextFieldWithAccordionMessage/styles.module.scss

@@ -0,0 +1,68 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.actionsFooter {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  padding: 0 10px 9px 0;
+  cursor: text;
+}
+
+.textIcon {
+  min-width: 20px;
+  min-height: 20px;
+  transition: transform 0.2s ease;
+
+  &[data-rotated] {
+    transform: rotate(180deg);
+  }
+}
+
+.textContainer {
+  flex: 1;
+  min-width: 0;
+  line-height: 16px;
+
+  &[data-collapsed] {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 16px;
+    max-height: 32px;
+  }
+}
+
+.comment {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.text {
+  color: var.$sys-neutral-text-light;
+  line-height: 16px;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  gap: 4px;
+  width: 100%;
+
+  svg path {
+    fill: var.$sys-neutral-text-light;
+  }
+
+  &[data-clickable] {
+    cursor: pointer;
+  }
+}

package/src/components/RateForm/constants.ts

@@ -0,0 +1,3 @@
+export const MESSAGE_MAX_LENGTH = 255;
+
+export const STATIC_LINE_HEIGHT = 16;

package/src/components/RateForm/index.ts

@@ -0,0 +1,3 @@
+export * from './RateForm';
+export type { Grade } from './types';
+export { MESSAGE_MAX_LENGTH, STATIC_LINE_HEIGHT } from './constants';

package/src/components/RateForm/styles.module.scss

@@ -0,0 +1,143 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.closeIcon {
+  cursor: pointer;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  will-change: opacity;
+}
+
+.feedbackForm {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 296px;
+  background-color: var.$sys-neutral-background2-level;
+  border: 1px solid var.$sys-neutral-decor-default;
+  border-radius: 8px;
+  padding: 24px;
+  gap: 16px;
+
+  &:hover {
+    .closeIcon {
+      opacity: 1;
+    }
+  }
+
+  &[data-touch] {
+    .closeIcon {
+      opacity: 1;
+    }
+  }
+}
+
+.feedbackFormTitle {
+  color: var.$sys-neutral-text-main;
+}
+
+.feedbackFormLoading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 296px;
+  height: 141px;
+  background-color: var.$sys-neutral-background2-level;
+  border: 1px solid var.$sys-neutral-decor-default;
+  border-radius: 8px;
+  padding: 24px;
+
+  &[data-loading] {
+    cursor: wait;
+  }
+}
+
+.gradeBlock {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  position: relative;
+}
+
+.description {
+  color: var.$sys-neutral-text-light;
+  position: absolute;
+  bottom: -12px;
+  opacity: 0;
+}
+
+.grade {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.2s ease;
+  height: 40px;
+  width: 36px;
+
+  &:hover > .description {
+    opacity: 1;
+  }
+}
+
+.gradeIcon {
+  transition: all 0.2s ease;
+  font-size: 32px;
+
+  &:hover {
+    /* stylelint-disable-next-line declaration-no-important */
+    font-size: 36px !important;
+  }
+}
+
+.ratingContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+}
+
+.ratingTitle {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  color: var.$sys-neutral-text-main;
+}
+
+.ratingSubtitle {
+  color: var.$sys-neutral-text-main;
+}
+
+.ratingIcon {
+  /* stylelint-disable-next-line declaration-no-important */
+  line-height: 20px !important;
+}
+
+.mobileSubmitButton {
+  /* stylelint-disable-next-line declaration-no-important */
+  position: relative !important;
+  /* stylelint-disable-next-line declaration-no-important */
+  flex-shrink: 0 !important;
+
+  &:after {
+    content: '';
+    display: flex;
+    width: 48px;
+    height: 48px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

package/src/components/RateForm/types.ts

@@ -0,0 +1,8 @@
+export type Grade = {
+  /** Уникальный идентификатор оценки */
+  id: string;
+  /** Иконка (эмодзи) */
+  icon: string;
+  /** Описание оценки */
+  description: string;
+};

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export * from './ButtonClaudia';
 export * from './ButtonGiga';
 export * from './ChatStatusAnnouncement';
+export * from './RateForm';
 export * from './IconGiga';
 export * from './RecommendPannel';
 export * from './SshField';