@snack-uikit/fields 0.18.2-preview-734de100.0 → 0.18.2

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.18.2 (2024-04-22)
+
+### Only dependencies have been changed
+* [@snack-uikit/list@0.11.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+
+
+
+
+
 ## 0.18.1 (2024-04-18)
 
 

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, useMemo, useRef, useState } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import { InputPrivate, SIZE } from '@snack-uikit/input-private';
 import { Slider } from '@snack-uikit/slider';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -32,7 +32,6 @@ 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 hasMarksEqualToValues = useMemo(() => Object.entries(marks).every(([key, value]) => key === value), [marks]);
     const [value = getDefaultValue(range, min, max, valueProp), onChange] = useValueControl({
         value: valueProp,
         defaultValue: getDefaultValue(range, min, max, valueProp),
@@ -41,79 +40,46 @@ export const FieldSlider = forwardRef((_a, ref) => {
     const [textFieldInputValue, setTextFieldInputValue] = useState(getTextFieldValue(value, textInputFormatter));
     const localRef = useRef(null);
     const onTextFieldChange = (textFieldValue) => {
-        const numValue = parseInt(textFieldValue);
-        if (textFieldValue && Number.isNaN(numValue)) {
+        const numValue = Number(textFieldValue);
+        if (Number.isNaN(numValue)) {
             return;
         }
         setTextFieldInputValue(textFieldValue);
     };
-    const handleNonEqualMarksSliderChange = (textFieldNumValue) => {
-        const handleChange = (key) => {
-            setTextFieldInputValue(String(marks[key]));
-            onChange(Number(key));
-        };
-        const allowedValues = Object.entries(marks).map(([key, value]) => ({ key, value: parseInt(String(value)) }));
-        const suitableEntry = allowedValues.find(entry => entry.value === textFieldNumValue);
-        if (suitableEntry) {
-            handleChange(suitableEntry.key);
-            return;
-        }
-        const actualMin = parseInt(String(marks[min]));
-        const actualMax = parseInt(String(marks[max]));
-        if (textFieldNumValue < actualMin) {
-            handleChange(min);
-            return;
-        }
-        if (textFieldNumValue > actualMax) {
-            handleChange(max);
+    const handleTextValueChange = () => {
+        const textFieldNumValue = Number(textFieldInputValue);
+        if (Number.isNaN(textFieldNumValue)) {
             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) {
-            handleChange(min);
+            setTextFieldInputValue(String(min));
+            onChange(min);
             return;
         }
         if (textFieldNumValue > max) {
-            handleChange(max);
+            setTextFieldInputValue(String(max));
+            onChange(max);
             return;
         }
         if (step === null) {
             const allowedValues = Object.keys(marks).map(Number);
             if (allowedValues.includes(textFieldNumValue)) {
-                setTextFieldInputValue(String(textFieldNumValue));
-                handleChange(textFieldNumValue);
+                onChange(textFieldNumValue);
                 return;
             }
-            const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark);
-            handleChange(mark);
+            const { mark } = getClosestMark(textFieldNumValue, allowedValues);
+            setTextFieldInputValue(String(mark));
+            onChange(mark);
             return;
         }
         const allowedValues = generateAllowedValues(min, max, step);
         if (allowedValues.includes(textFieldNumValue)) {
-            handleChange(textFieldNumValue);
+            onChange(textFieldNumValue);
             return;
         }
-        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 { mark } = getClosestMark(textFieldNumValue, allowedValues);
+        setTextFieldInputValue(String(mark));
+        onChange(mark);
     };
     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: <T>(value: number, marks: T[], getMarkValue: (value: T) => number) => {
+export declare const getClosestMark: (value: number, marks: number[]) => {
     lowestDiff: number;
-    mark: T;
+    mark: number;
 };

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

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

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.18.2-preview-734de100.0",
+  "version": "0.18.2",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,9 +37,9 @@
     "@snack-uikit/droplist": "0.13.14",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/input-private": "3.1.1",
-    "@snack-uikit/list": "0.10.1-preview-734de100.0",
+    "@snack-uikit/list": "0.11.0",
     "@snack-uikit/scroll": "0.5.2",
-    "@snack-uikit/slider": "0.1.8-preview-734de100.0",
+    "@snack-uikit/slider": "0.1.7",
     "@snack-uikit/tag": "0.8.2",
     "@snack-uikit/tooltip": "0.13.1",
     "@snack-uikit/truncate-string": "0.4.12",
@@ -56,5 +56,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "98a3d3899805696c6552050bef3b4b13391672e0"
+  "gitHead": "082743508cd64cdc90ed11d2ea51280b5cab19de"
 }

package/src/components/FieldSlider/FieldSlider.tsx

@@ -1,5 +1,5 @@
 import mergeRefs from 'merge-refs';
-import { FocusEvent, forwardRef, KeyboardEvent, ReactElement, useEffect, useMemo, useRef, useState } from 'react';
+import { FocusEvent, forwardRef, KeyboardEvent, ReactElement, useEffect, useRef, useState } from 'react';
 
 import { InputPrivate, InputPrivateProps, SIZE } from '@snack-uikit/input-private';
 import { Slider, SliderProps as SliderComponentProps } from '@snack-uikit/slider';
@@ -81,8 +81,6 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
     },
     ref,
   ) => {
-    const hasMarksEqualToValues = useMemo(() => Object.entries(marks).every(([key, value]) => key === value), [marks]);
-
     const [value = getDefaultValue(range, min, max, valueProp), onChange] = useValueControl<number | number[]>({
       value: valueProp,
       defaultValue: getDefaultValue(range, min, max, valueProp),
@@ -95,97 +93,54 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
     const localRef = useRef<HTMLInputElement>(null);
 
     const onTextFieldChange = (textFieldValue: string) => {
-      const numValue = parseInt(textFieldValue);
-
-      if (textFieldValue && Number.isNaN(numValue)) {
+      const numValue = Number(textFieldValue);
+      if (Number.isNaN(numValue)) {
         return;
       }
 
       setTextFieldInputValue(textFieldValue);
     };
 
-    const handleNonEqualMarksSliderChange = (textFieldNumValue: number) => {
-      const handleChange = (key: string | number) => {
-        setTextFieldInputValue(String(marks[key]));
-        onChange(Number(key));
-      };
-
-      const allowedValues = Object.entries(marks).map(([key, value]) => ({ key, value: parseInt(String(value)) }));
-      const suitableEntry = allowedValues.find(entry => entry.value === textFieldNumValue);
-
-      if (suitableEntry) {
-        handleChange(suitableEntry.key);
-        return;
-      }
-
-      const actualMin = parseInt(String(marks[min]));
-      const actualMax = parseInt(String(marks[max]));
-
-      if (textFieldNumValue < actualMin) {
-        handleChange(min);
-        return;
-      }
-
-      if (textFieldNumValue > actualMax) {
-        handleChange(max);
+    const handleTextValueChange = () => {
+      const textFieldNumValue = Number(textFieldInputValue);
+      if (Number.isNaN(textFieldNumValue)) {
         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) {
-        handleChange(min);
+        setTextFieldInputValue(String(min));
+        onChange(min);
         return;
       }
 
       if (textFieldNumValue > max) {
-        handleChange(max);
+        setTextFieldInputValue(String(max));
+        onChange(max);
         return;
       }
 
       if (step === null) {
         const allowedValues = Object.keys(marks).map(Number);
         if (allowedValues.includes(textFieldNumValue)) {
-          setTextFieldInputValue(String(textFieldNumValue));
-          handleChange(textFieldNumValue);
+          onChange(textFieldNumValue);
           return;
         }
 
-        const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark);
-        handleChange(mark);
+        const { mark } = getClosestMark(textFieldNumValue, allowedValues);
+        setTextFieldInputValue(String(mark));
+        onChange(mark);
         return;
       }
 
       const allowedValues = generateAllowedValues(min, max, step);
       if (allowedValues.includes(textFieldNumValue)) {
-        handleChange(textFieldNumValue);
-        return;
-      }
-
-      const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark);
-      handleChange(mark);
-    };
-
-    const handleTextValueChange = () => {
-      const textFieldNumValue = parseInt(textFieldInputValue);
-
-      if (Number.isNaN(textFieldNumValue)) {
+        onChange(textFieldNumValue);
         return;
       }
 
-      if (hasMarksEqualToValues) {
-        handleEqualMarksSliderChange(textFieldNumValue);
-      } else {
-        handleNonEqualMarksSliderChange(textFieldNumValue);
-      }
+      const { mark } = getClosestMark(textFieldNumValue, allowedValues);
+      setTextFieldInputValue(String(mark));
+      onChange(mark);
     };
 
     const onTextFieldBlur = (e: FocusEvent<HTMLInputElement, Element>) => {

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

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