@snack-uikit/fields 0.19.0 → 0.19.2

package/src/components/FieldSelect/FieldSelectMultiple.tsx

@@ -9,6 +9,7 @@ import { extractSupportProps } from '@snack-uikit/utils';
 
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
 import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearchInput } from './hooks';
@@ -164,13 +165,15 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
     const result =
       autocomplete || !searchable || prevInputValue.current === inputValue ? items : fuzzySearch(inputValue);
 
+    const fieldValidationState = getValidationState({ validationState, error: rest.error });
+
     return (
       <FieldDecorator
         {...extractSupportProps(rest)}
         {...extractFieldDecoratorProps(rest)}
         labelFor={id}
         size={size}
-        validationState={validationState}
+        validationState={fieldValidationState}
       >
         <Droplist
           {...extractListProps(rest)}
@@ -192,7 +195,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
           {({ onKeyDown }) => (
             <FieldContainerPrivate
               className={cn(styles.container, styles.tagContainer)}
-              validationState={validationState}
+              validationState={fieldValidationState}
               disabled={disabled}
               readonly={readonly}
               focused={open}

package/src/components/FieldSelect/FieldSelectSingle.tsx

@@ -18,6 +18,7 @@ import { extractSupportProps } from '@snack-uikit/utils';
 
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
 import { useButtons, useHandleOnKeyDown, useSearchInput } from './hooks';
@@ -184,11 +185,13 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
         ? items
         : fuzzySearch(inputValue);
 
+    const fieldValidationState = getValidationState({ validationState, error: rest.error });
+
     return (
       <FieldDecorator
         {...extractSupportProps(rest)}
         {...extractFieldDecoratorProps(rest)}
-        validationState={validationState}
+        validationState={fieldValidationState}
         required={required}
         readonly={readonly}
         labelFor={id}
@@ -211,7 +214,7 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
           {({ onKeyDown }) => (
             <FieldContainerPrivate
               className={styles.container}
-              validationState={validationState}
+              validationState={fieldValidationState}
               disabled={disabled}
               readonly={readonly}
               focused={open}

package/src/components/FieldSelect/types.ts

@@ -83,8 +83,8 @@ export type FieldSelectPrivateProps = InputProps & WrapperProps & { options: Opt
 type FiledSelectCommonProps = WithSupportProps<{
   options: OptionProps[];
 
-  pinTop: OptionProps[];
-  pinBottom: OptionProps[];
+  pinTop?: OptionProps[];
+  pinBottom?: OptionProps[];
 
   searchable?: boolean;
   /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */

package/src/components/FieldSlider/FieldSlider.tsx

@@ -1,5 +1,15 @@
 import mergeRefs from 'merge-refs';
-import { FocusEvent, forwardRef, KeyboardEvent, ReactElement, useEffect, useRef, useState } from 'react';
+import {
+  FocusEvent,
+  forwardRef,
+  KeyboardEvent,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { InputPrivate, InputPrivateProps, SIZE } from '@snack-uikit/input-private';
 import { Slider, SliderProps as SliderComponentProps } from '@snack-uikit/slider';
@@ -9,7 +19,7 @@ import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
 import { FieldDecorator, FieldDecoratorProps } from '../FieldDecorator';
-import { generateAllowedValues, getClosestMark, getTextFieldValue } from './helpers';
+import { generateAllowedValues, getClosestMark, getTextFieldValue, isMarkObject } from './helpers';
 import styles from './styles.module.scss';
 import { TextInputFormatter } from './types';
 
@@ -81,6 +91,24 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
     },
     ref,
   ) => {
+    const getMarkValue = useCallback(
+      (key: keyof SliderProps['marks']) => {
+        const mark = marks[key];
+
+        if (isMarkObject(mark)) {
+          return mark.label;
+        }
+
+        return mark;
+      },
+      [marks],
+    );
+
+    const hasMarksEqualToValues = useMemo(
+      () => Object.keys(marks).every(key => key === getMarkValue(key)),
+      [getMarkValue, marks],
+    );
+
     const [value = getDefaultValue(range, min, max, valueProp), onChange] = useValueControl<number | number[]>({
       value: valueProp,
       defaultValue: getDefaultValue(range, min, max, valueProp),
@@ -93,54 +121,100 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
     const localRef = useRef<HTMLInputElement>(null);
 
     const onTextFieldChange = (textFieldValue: string) => {
-      const numValue = Number(textFieldValue);
-      if (Number.isNaN(numValue)) {
+      const numValue = parseInt(textFieldValue);
+
+      if (textFieldValue && Number.isNaN(numValue)) {
         return;
       }
 
       setTextFieldInputValue(textFieldValue);
     };
 
-    const handleTextValueChange = () => {
-      const textFieldNumValue = Number(textFieldInputValue);
-      if (Number.isNaN(textFieldNumValue)) {
+    const handleNonEqualMarksSliderChange = (textFieldNumValue: number) => {
+      const handleChange = (key: string | number) => {
+        setTextFieldInputValue(String(getMarkValue(key)));
+        onChange(Number(key));
+      };
+
+      const allowedValues = Object.keys(marks).map(key => ({
+        key,
+        value: parseInt(String(getMarkValue(key))),
+      }));
+      const suitableEntry = allowedValues.find(entry => entry.value === textFieldNumValue);
+
+      if (suitableEntry) {
+        handleChange(suitableEntry.key);
+        return;
+      }
+
+      const actualMin = parseInt(String(getMarkValue(min)));
+      const actualMax = parseInt(String(getMarkValue(max)));
+
+      if (textFieldNumValue < actualMin) {
+        handleChange(min);
         return;
       }
 
+      if (textFieldNumValue > actualMax) {
+        handleChange(max);
+        return;
+      }
+
+      const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark.value);
+      handleChange(mark.key);
+    };
+
+    const handleEqualMarksSliderChange = (textFieldNumValue: number) => {
+      const handleChange = (value: number) => {
+        setTextFieldInputValue(String(value));
+        onChange(value);
+      };
+
       if (textFieldNumValue < min) {
-        setTextFieldInputValue(String(min));
-        onChange(min);
+        handleChange(min);
         return;
       }
 
       if (textFieldNumValue > max) {
-        setTextFieldInputValue(String(max));
-        onChange(max);
+        handleChange(max);
         return;
       }
 
       if (step === null) {
         const allowedValues = Object.keys(marks).map(Number);
         if (allowedValues.includes(textFieldNumValue)) {
-          onChange(textFieldNumValue);
+          setTextFieldInputValue(String(textFieldNumValue));
+          handleChange(textFieldNumValue);
           return;
         }
 
-        const { mark } = getClosestMark(textFieldNumValue, allowedValues);
-        setTextFieldInputValue(String(mark));
-        onChange(mark);
+        const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark);
+        handleChange(mark);
         return;
       }
 
       const allowedValues = generateAllowedValues(min, max, step);
       if (allowedValues.includes(textFieldNumValue)) {
-        onChange(textFieldNumValue);
+        handleChange(textFieldNumValue);
         return;
       }
 
-      const { mark } = getClosestMark(textFieldNumValue, allowedValues);
-      setTextFieldInputValue(String(mark));
-      onChange(mark);
+      const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark);
+      handleChange(mark);
+    };
+
+    const handleTextValueChange = () => {
+      const textFieldNumValue = parseInt(textFieldInputValue);
+
+      if (Number.isNaN(textFieldNumValue)) {
+        return;
+      }
+
+      if (hasMarksEqualToValues) {
+        handleEqualMarksSliderChange(textFieldNumValue);
+      } else {
+        handleNonEqualMarksSliderChange(textFieldNumValue);
+      }
     };
 
     const onTextFieldBlur = (e: FocusEvent<HTMLInputElement, Element>) => {

package/src/components/FieldSlider/helpers/getClosestMark.ts

@@ -1,9 +1,13 @@
 const getDiff = (value: number, mark: number): number => Math.abs(mark - value);
 
-export const getClosestMark = (value: number, marks: number[]): { lowestDiff: number; mark: number } =>
+export const getClosestMark = <T>(
+  value: number,
+  marks: T[],
+  getMarkValue: (value: T) => number,
+): { lowestDiff: number; mark: T } =>
   marks.reduce(
     (accResult, mark) => {
-      const diff = getDiff(value, mark);
+      const diff = getDiff(value, getMarkValue(mark));
       if (diff < accResult.lowestDiff) {
         return {
           lowestDiff: diff,
@@ -14,7 +18,7 @@ export const getClosestMark = (value: number, marks: number[]): { lowestDiff: nu
       return accResult;
     },
     {
-      lowestDiff: getDiff(value, marks[0]),
+      lowestDiff: getDiff(value, getMarkValue(marks[0])),
       mark: marks[0],
     },
   );

package/src/components/FieldSlider/helpers/index.ts

@@ -1,3 +1,4 @@
 export * from './getTextFieldValue';
 export * from './getClosestMark';
 export * from './generateAllowedValues';
+export * from './isMarkObject';

package/src/components/FieldSlider/helpers/isMarkObject.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+import { SliderProps as SliderComponentProps } from '@snack-uikit/slider';
+
+type Marks = NonNullable<SliderComponentProps['marks']>;
+
+type MarkObject = {
+  label: ReactNode;
+};
+
+export function isMarkObject(mark: Marks[keyof Marks]): mark is MarkObject {
+  return Boolean(mark && typeof mark === 'object' && 'label' in mark);
+}

package/src/components/FieldStepper/FieldStepper.tsx

@@ -20,6 +20,7 @@ import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator, FieldDecoratorProps } from '../FieldDecorator';
 import styles from './styles.module.scss';
 
@@ -113,6 +114,8 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
     const isMinusButtonDisabled = (typeof min === 'number' && value <= min) || readonly || disabled;
     const isPlusButtonDisabled = (typeof max === 'number' && value >= max) || readonly || disabled;
 
+    const fieldValidationState = getValidationState({ validationState, error });
+
     const adjustValue = (value: number) => {
       setValue(value);
       setTooltipOpen(true);
@@ -217,7 +220,7 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
         readonly={readonly}
         showHintIcon={showHintIcon}
         size={size}
-        validationState={validationState}
+        validationState={fieldValidationState}
         error={error}
         {...extractSupportProps(rest)}
       >
@@ -228,7 +231,7 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
         >
           <FieldContainerPrivate
             size={size}
-            validationState={validationState}
+            validationState={fieldValidationState}
             disabled={disabled}
             readonly={readonly}
             variant={CONTAINER_VARIANT.SingleLine}

package/src/components/FieldText/FieldText.tsx

@@ -7,6 +7,7 @@ import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useCopyButton, useValueControl } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator, FieldDecoratorProps } from '../FieldDecorator';
 
 type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> &
@@ -84,6 +85,7 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
     const showAdditionalButton = Boolean(value && !disabled);
     const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
     const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
+    const fieldValidationState = getValidationState({ validationState, error });
 
     const onClear = () => {
       onChange('');
@@ -116,13 +118,13 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
         readonly={readonly}
         showHintIcon={showHintIcon}
         size={size}
-        validationState={validationState}
+        validationState={fieldValidationState}
         error={error}
         {...extractSupportProps(rest)}
       >
         <FieldContainerPrivate
           size={size}
-          validationState={validationState}
+          validationState={fieldValidationState}
           disabled={disabled}
           readonly={readonly}
           variant={CONTAINER_VARIANT.SingleLine}

package/src/components/FieldTextArea/FieldTextArea.tsx

@@ -8,6 +8,7 @@ import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate, TextArea, TextAreaProps } from '../../helperComponents';
 import { useCopyButton, useValueControl } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator, FieldDecoratorProps } from '../FieldDecorator';
 import styles from './styles.module.scss';
 
@@ -93,6 +94,8 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
     const showCopyButton = showCopyButtonProp && Boolean(value) && !disabled && readonly;
     const showClearButton = showClearButtonProp && Boolean(value) && !disabled && !readonly;
 
+    const fieldValidationState = getValidationState({ validationState, error });
+
     const onClear = () => {
       onChange('');
 
@@ -125,13 +128,13 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
         showHintIcon={showHintIcon}
         size={size}
         error={error}
-        validationState={validationState}
+        validationState={fieldValidationState}
         {...extractSupportProps(rest)}
       >
         <FieldContainerPrivate
           className={styles.container}
           size={size}
-          validationState={validationState}
+          validationState={fieldValidationState}
           disabled={disabled}
           readonly={readonly}
           data-resizable={isResizable || undefined}

package/src/utils/getValidationState.ts

@@ -0,0 +1,6 @@
+import { VALIDATION_STATE } from '../constants';
+import { ValidationState } from '../types';
+
+export function getValidationState({ validationState, error }: { validationState?: ValidationState; error?: string }) {
+  return error ? VALIDATION_STATE.Error : validationState ?? VALIDATION_STATE.Default;
+}