@snack-uikit/fields 0.18.3 → 0.18.4-preview-5d3667ec.0

package/dist/components/FieldSlider/FieldSlider.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { InputPrivate, SIZE } from '@snack-uikit/input-private';
 import { Slider } from '@snack-uikit/slider';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -19,7 +19,7 @@ import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
 import { FieldDecorator } from '../FieldDecorator';
-import { generateAllowedValues, getClosestMark, getTextFieldValue } from './helpers';
+import { generateAllowedValues, getClosestMark, getTextFieldValue, isMarkObject } from './helpers';
 import styles from './styles.module.css';
 const getDefaultValue = (range, min, max, value) => {
     if (range) {
@@ -32,6 +32,14 @@ const getDefaultValue = (range, min, max, value) => {
 };
 export const FieldSlider = forwardRef((_a, ref) => {
     var { id, name, min, max, step, marks, showScaleBar = true, value: valueProp, range = false, disabled = false, readonly = false, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required, hint, showHintIcon, size = SIZE.S, postfixIcon, textInputFormatter } = _a, rest = __rest(_a, ["id", "name", "min", "max", "step", "marks", "showScaleBar", "value", "range", "disabled", "readonly", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "postfixIcon", "textInputFormatter"]);
+    const getMarkValue = useCallback((key) => {
+        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({
         value: valueProp,
         defaultValue: getDefaultValue(range, min, max, valueProp),
@@ -40,46 +48,82 @@ export const FieldSlider = forwardRef((_a, ref) => {
     const [textFieldInputValue, setTextFieldInputValue] = useState(getTextFieldValue(value, textInputFormatter));
     const localRef = useRef(null);
     const onTextFieldChange = (textFieldValue) => {
-        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) => {
+        const handleChange = (key) => {
+            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) => {
+        const handleChange = (value) => {
+            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) => {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);

package/dist/components/FieldSlider/helpers/getClosestMark.d.ts

@@ -1,4 +1,4 @@
-export declare const getClosestMark: (value: number, marks: number[]) => {
+export declare const getClosestMark: <T>(value: number, marks: T[], getMarkValue: (value: T) => number) => {
     lowestDiff: number;
-    mark: number;
+    mark: T;
 };

package/dist/components/FieldSlider/helpers/getClosestMark.js

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

package/dist/components/FieldSlider/helpers/index.d.ts

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

package/dist/components/FieldSlider/helpers/index.js

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

package/dist/components/FieldSlider/helpers/isMarkObject.d.ts

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

package/dist/components/FieldSlider/helpers/isMarkObject.js

@@ -0,0 +1,3 @@
+export function isMarkObject(mark) {
+    return Boolean(mark && typeof mark === 'object' && 'label' in mark);
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.18.3",
+  "version": "0.18.4-preview-5d3667ec.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,9 +37,9 @@
     "@snack-uikit/droplist": "0.13.15",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/input-private": "3.1.1",
-    "@snack-uikit/list": "0.11.0",
+    "@snack-uikit/list": "0.11.1-preview-5d3667ec.0",
     "@snack-uikit/scroll": "0.5.2",
-    "@snack-uikit/slider": "0.1.7",
+    "@snack-uikit/slider": "0.1.8-preview-5d3667ec.0",
     "@snack-uikit/tag": "0.9.0",
     "@snack-uikit/tooltip": "0.13.1",
     "@snack-uikit/truncate-string": "0.4.12",
@@ -56,5 +56,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "f6b48b7373bda024626822d7c17b05d6ddbf20b2"
+  "gitHead": "311bf31807d9b8cc975e80caf14ec35108256337"
 }

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);
+}