From b59f7960ecc7f4bd4e6a044b0a9ba6e2e12103d1 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 7 Jun 2022 14:26:50 +0700
Subject: [PATCH] refine

---
 packages/mui-joy/src/Slider/Slider.tsx | 78 ++++++++++++--------------
 1 file changed, 36 insertions(+), 42 deletions(-)

diff --git a/packages/mui-joy/src/Slider/Slider.tsx b/packages/mui-joy/src/Slider/Slider.tsx
index 69df395b44911c..10d420cfb1d22d 100644
--- a/packages/mui-joy/src/Slider/Slider.tsx
+++ b/packages/mui-joy/src/Slider/Slider.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import {
+  unstable_composeClasses as composeClasses,
+  unstable_capitalize as capitalize,
+} from '@mui/utils';
 import { OverridableComponent } from '@mui/types';
-import { shouldForwardProp } from '@mui/system';
 import { useSlider } from '@mui/base/SliderUnstyled';
 import { useThemeProps, styled, Theme } from '../styles';
 import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
@@ -20,7 +22,7 @@ const valueToPercent = (value: number, min: number, max: number) =>
 const Identity = (x: any) => x;
 
 const useUtilityClasses = (ownerState: OwnerState) => {
-  const { disabled, dragging, marked, orientation, track, classes } = ownerState;
+  const { disabled, dragging, marked, orientation, track, color, size } = ownerState;
 
   const slots = {
     root: [
@@ -31,6 +33,8 @@ const useUtilityClasses = (ownerState: OwnerState) => {
       orientation === 'vertical' && 'vertical',
       track === 'inverted' && 'trackInverted',
       track === false && 'trackFalse',
+      color && `color${capitalize(color)}`,
+      size && `size${capitalize(size)}`,
     ],
     rail: ['rail'],
     track: ['track'],
@@ -47,7 +51,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
     focusVisible: ['focusVisible'],
   };
 
-  return composeClasses(slots, getSliderUtilityClass, classes);
+  return composeClasses(slots, getSliderUtilityClass, {});
 };
 
 const sliderColorVariables =
@@ -240,44 +244,36 @@ const SliderThumb = styled('span', {
 const SliderMark = styled('span', {
   name: 'JoySlider',
   slot: 'Mark',
-  // `markActive` is injected by SliderUnstyled, should not spread to DOM
-  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'markActive',
   overridesResolver: (props, styles) => styles.mark,
-})<{ ownerState: SliderProps & { markActive: boolean }; 'data-index': number }>(
-  ({ ownerState, ...props }) => {
-    return {
-      position: 'absolute',
-      width: 'var(--Slider-mark-size)',
-      height: 'var(--Slider-mark-size)',
-      borderRadius: 'var(--Slider-mark-size)',
-      backgroundColor: 'var(--Slider-mark-background)',
-      ...(ownerState.orientation === 'horizontal' && {
-        top: '50%',
-        transform: `translate(calc(var(--Slider-mark-size) / -2), -50%)`,
-        ...(props['data-index'] === 0 && {
-          // data-index is from SliderUnstyled
-          transform: `translate(min(var(--Slider-mark-size), 3px), -50%)`,
-        }),
-        ...(props.style?.left === '100%' && {
-          // workaround for detecting last mark
-          transform: `translate(calc(var(--Slider-mark-size) * -1 - min(var(--Slider-mark-size), 3px)), -50%)`,
-        }),
+})<{ ownerState: SliderProps & { percent: number } }>(({ ownerState }) => {
+  return {
+    position: 'absolute',
+    width: 'var(--Slider-mark-size)',
+    height: 'var(--Slider-mark-size)',
+    borderRadius: 'var(--Slider-mark-size)',
+    backgroundColor: 'var(--Slider-mark-background)',
+    ...(ownerState.orientation === 'horizontal' && {
+      top: '50%',
+      transform: `translate(calc(var(--Slider-mark-size) / -2), -50%)`,
+      ...(ownerState.percent === 0 && {
+        transform: `translate(min(var(--Slider-mark-size), 3px), -50%)`,
       }),
-      ...(ownerState.orientation === 'vertical' && {
-        left: '50%',
-        transform: 'translate(-50%, calc(var(--Slider-mark-size) / 2))',
-        ...(props['data-index'] === 0 && {
-          // data-index is from SliderUnstyled
-          transform: `translate(-50%, calc(min(var(--Slider-mark-size), 3px) * -1))`,
-        }),
-        ...(props.style?.bottom === '100%' && {
-          // workaround for detecting last mark
-          transform: `translate(-50%, calc(var(--Slider-mark-size) * 1 + min(var(--Slider-mark-size), 3px)))`,
-        }),
+      ...(ownerState.percent === 100 && {
+        transform: `translate(calc(var(--Slider-mark-size) * -1 - min(var(--Slider-mark-size), 3px)), -50%)`,
       }),
-    };
-  },
-);
+    }),
+    ...(ownerState.orientation === 'vertical' && {
+      left: '50%',
+      transform: 'translate(-50%, calc(var(--Slider-mark-size) / 2))',
+      ...(ownerState.percent === 0 && {
+        transform: `translate(-50%, calc(min(var(--Slider-mark-size), 3px) * -1))`,
+      }),
+      ...(ownerState.percent === 100 && {
+        transform: `translate(-50%, calc(var(--Slider-mark-size) * 1 + min(var(--Slider-mark-size), 3px)))`,
+      }),
+    }),
+  };
+});
 
 const SliderValueLabel = styled('span', {
   name: 'JoySlider',
@@ -342,8 +338,6 @@ const SliderValueLabel = styled('span', {
 const SliderMarkLabel = styled('span', {
   name: 'JoySlider',
   slot: 'MarkLabel',
-  // `markLabelActive` is injected by SliderUnstyled, should not spread to DOM
-  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'markLabelActive',
   overridesResolver: (props, styles) => styles.markLabel,
 })<{ ownerState: SliderProps }>(({ theme, ownerState }) => ({
   fontFamily: theme.vars.fontFamily.body,
@@ -507,7 +501,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
               <SliderMark
                 data-index={index}
                 {...componentsProps.mark}
-                ownerState={{ ...ownerState, markActive }}
+                ownerState={{ ...ownerState, percent }}
                 style={{ ...style, ...componentsProps.mark?.style }}
                 className={clsx(classes.mark, componentsProps.mark?.className, {
                   [classes.markActive]: markActive,