feat(plasma-new-hope): add react-draggable

salute-developers · May 21, 2024 · d06d75c · d06d75c
1 parent c8168c7
commit d06d75c
Show file tree

Hide file tree

Showing 29 changed files with 1,127 additions and 419 deletions.
diff --git a/...components/Slider/Slider.component-test.tsx/plasma-web Slider -- focus.snap.png b/...components/Slider/Slider.component-test.tsx/plasma-web Slider -- focus.snap.png
diff --git a/...components/Slider/Slider.component-test.tsx/plasma-web Slider -- focus.snap.png b/...components/Slider/Slider.component-test.tsx/plasma-web Slider -- focus.snap.png
diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
@@ -775,19 +775,11 @@ l: string;
 view: {
 default: string;
 };
-<<<<<<< HEAD
-}> & ((Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "target" | "onChange" | "size" | "value" | "checked" | "maxLength" | "minLength"> & CustomComboboxProps & {
+}> & ((Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "target" | "size" | "value" | "checked" | "maxLength" | "minLength"> & CustomComboboxProps & {
 valueType?: "single" | undefined;
 value?: ComboboxPrimitiveValue | undefined;
 onChangeValue?: ((value?: ComboboxPrimitiveValue | undefined) => void) | undefined;
-} & RefAttributes<HTMLInputElement>) | (Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "target" | "onChange" | "size" | "value" | "checked" | "maxLength" | "minLength"> & CustomComboboxProps & {
-=======
-}> & ((Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "target" | "size" | "value" | "checked" | "minLength" | "maxLength"> & CustomComboboxProps & {
-valueType?: "single" | undefined;
-value?: ComboboxPrimitiveValue | undefined;
-onChangeValue?: ((value?: ComboboxPrimitiveValue | undefined) => void) | undefined;
-} & RefAttributes<HTMLInputElement>) | (Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "target" | "size" | "value" | "checked" | "minLength" | "maxLength"> & CustomComboboxProps & {
->>>>>>> a61c59f64 (Update package-lock.json files)
+} & RefAttributes<HTMLInputElement>) | (Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "target" | "size" | "value" | "checked" | "maxLength" | "minLength"> & CustomComboboxProps & {
 valueType: "multiple";
 value?: ComboboxPrimitiveValue[] | undefined;
 onChangeValue?: ((value?: ComboboxPrimitiveValue[] | undefined) => void) | undefined;

diff --git a/packages/plasma-b2c/src/components/Slider/Slider.stories.tsx b/packages/plasma-b2c/src/components/Slider/Slider.stories.tsx
@@ -61,9 +61,13 @@ const StoryDefault = (args: StorySingleProps) => {
         setValue(values);
     };
 
+    const onChangeHandle = (values) => {
+        setValue(values);
+    };
+
     return (
         <SliderWrapper>
-            <Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={action('onChange')} {...args} />
+            <Slider value={value} onChangeCommitted={onChangeCommittedHandle} onChange={onChangeHandle} {...args} />
         </SliderWrapper>
     );
 };
@@ -103,13 +107,27 @@ export const Default: StorySingle = {
 const StoryMultipleValues = (args: StoryProps) => {
     const [value, setValue] = useState([10, 80]);
     const sortValues = (values) => {
-        return values.sort((a, b) => a - b);
+        return values
+            .map((val) => {
+                if (val < args.min) {
+                    return args.min;
+                }
+                if (val > args.max) {
+                    return args.max;
+                }
+                return val;
+            })
+            .sort((a, b) => a - b);
     };
 
     const onChangeHandle = (values) => {
         setValue(sortValues(values));
     };
 
+    const onChangeCommitedHandle = (values) => {
+        setValue(sortValues(values));
+    };
+
     const onBlurTextField = (values) => {
         setValue(sortValues(values));
     };
@@ -126,6 +144,7 @@ const StoryMultipleValues = (args: StoryProps) => {
                 value={value}
                 onKeyDownTextField={onKeyDownTextField}
                 onBlurTextField={onBlurTextField}
+                onChangeCommitted={onChangeCommitedHandle}
                 onChange={onChangeHandle}
                 {...args}
             />

diff --git a/packages/plasma-new-hope/package-lock.json b/packages/plasma-new-hope/package-lock.json
diff --git a/packages/plasma-new-hope/package.json b/packages/plasma-new-hope/package.json
@@ -99,6 +99,7 @@
     "@popperjs/core": "2.11.8",
     "@salutejs/plasma-core": "1.160.0-dev.0",
     "focus-visible": "5.2.0",
+    "react-draggable": "4.4.3",
     "react-popper": "2.3.0",
     "storeon": "3.1.5"
   }

diff --git a/packages/plasma-new-hope/src/components/Slider/Slider.tsx b/packages/plasma-new-hope/src/components/Slider/Slider.tsx
@@ -13,16 +13,10 @@ const isSingleValueProps = (props: SliderProps): props is SingleSliderProps => t
 
 export const sliderRoot = (Root: RootPropsOmitOnChange<HTMLDivElement, SliderProps>) =>
     forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
-        if (isSingleValueProps(props)) {
-            return (
-                <Root ref={ref} {...props}>
-                    <SingleSlider {...props} />
-                </Root>
-            );
-        }
         return (
             <Root ref={ref} {...props}>
-                <DoubleSlider {...props} />
+                {isSingleValueProps(props) && <SingleSlider {...props} />}
+                {!isSingleValueProps(props) && <DoubleSlider {...props} />}
             </Root>
         );
     });