feat: Move xxStyle & xxClassName into styles & classNames (#945)

* chore: styles & classNames

* test: add test case

Author: zombieJ

assets/index.less

@@ -38,7 +38,8 @@
     border-radius: @border-radius-base;
   }
 
-  &-track {
+  &-track,
+  &-tracks {
     position: absolute;
     height: 4px;
     background-color: tint(@primary-color, 60%);

docs/demo/mulitple.md

@@ -0,0 +1,8 @@
+---
+title: Multiple
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/multiple.tsx"></code>

docs/examples/multiple.tsx

@@ -0,0 +1,30 @@
+/* eslint react/no-multi-comp: 0, no-console: 0 */
+import Slider from 'rc-slider';
+import React from 'react';
+import '../../assets/index.less';
+
+const style = { width: 400, margin: 50 };
+
+function log(value) {
+  console.log(value);
+}
+
+export default () => (
+  <div>
+    <div style={style}>
+      <Slider
+        range
+        defaultValue={[0, 10, 30]}
+        onChange={log}
+        styles={{
+          tracks: {
+            background: `linear-gradient(to right, blue, red)`,
+          },
+          track: {
+            background: 'transparent',
+          },
+        }}
+      />
+    </div>
+  </div>
+);

src/Handles/Handle.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import classNames from 'classnames';
+import cls from 'classnames';
 import KeyCode from 'rc-util/lib/KeyCode';
+import * as React from 'react';
 import SliderContext from '../context';
-import { getDirectionStyle, getIndex } from '../util';
 import type { OnStartMove } from '../interface';
+import { getDirectionStyle, getIndex } from '../util';
 
 interface RenderProps {
   index: number;
@@ -48,6 +48,8 @@ const Handle = React.forwardRef((props: HandleProps, ref: React.Ref<HTMLDivEleme
     ariaLabelForHandle,
     ariaLabelledByForHandle,
     ariaValueTextFormatterForHandle,
+    styles,
+    classNames,
   } = React.useContext(SliderContext);
   const handlePrefixCls = `${prefixCls}-handle`;
 
@@ -114,13 +116,18 @@ const Handle = React.forwardRef((props: HandleProps, ref: React.Ref<HTMLDivEleme
   let handleNode = (
     <div
       ref={ref}
-      className={classNames(handlePrefixCls, {
-        [`${handlePrefixCls}-${valueIndex + 1}`]: range,
-        [`${handlePrefixCls}-dragging`]: dragging,
-      })}
+      className={cls(
+        handlePrefixCls,
+        {
+          [`${handlePrefixCls}-${valueIndex + 1}`]: range,
+          [`${handlePrefixCls}-dragging`]: dragging,
+        },
+        classNames.handle,
+      )}
       style={{
         ...positionStyle,
         ...style,
+        ...styles.handle,
       }}
       onMouseDown={onInternalStartMove}
       onTouchStart={onInternalStartMove}

src/Slider.tsx

@@ -1,21 +1,25 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import isEqual from 'rc-util/lib/isEqual';
+import cls from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import type { HandlesRef } from './Handles';
+import isEqual from 'rc-util/lib/isEqual';
+import warning from 'rc-util/lib/warning';
+import * as React from 'react';
+import type { SliderContextProps } from './context';
+import SliderContext from './context';
+import type { HandlesProps, HandlesRef } from './Handles';
 import Handles from './Handles';
-import type { HandlesProps } from './Handles';
 import useDrag from './hooks/useDrag';
-import SliderContext from './context';
-import type { SliderContextProps } from './context';
-import Tracks from './Tracks';
-import type { AriaValueFormat, Direction, OnStartMove } from './interface';
+import useOffset from './hooks/useOffset';
+import type {
+  AriaValueFormat,
+  Direction,
+  OnStartMove,
+  SliderClassNames,
+  SliderStyles,
+} from './interface';
+import type { InternalMarkObj, MarkObj } from './Marks';
 import Marks from './Marks';
-import type { MarkObj } from './Marks';
-import type { InternalMarkObj } from './Marks';
 import Steps from './Steps';
-import useOffset from './hooks/useOffset';
-import warning from 'rc-util/lib/warning';
+import Tracks from './Tracks';
 
 /**
  * New:
@@ -36,6 +40,9 @@ export interface SliderProps<ValueType = number | number[]> {
   className?: string;
   style?: React.CSSProperties;
 
+  classNames?: SliderClassNames;
+  styles?: SliderStyles;
+
   // Status
   disabled?: boolean;
   keyboard?: boolean;
@@ -70,8 +77,11 @@ export interface SliderProps<ValueType = number | number[]> {
   // Style
   included?: boolean;
   startPoint?: number;
+  /** @deprecated Please use `styles.track` instead */
   trackStyle?: React.CSSProperties | React.CSSProperties[];
+  /** @deprecated Please use `styles.handle` instead */
   handleStyle?: React.CSSProperties | React.CSSProperties[];
+  /** @deprecated Please use `styles.rail` instead */
   railStyle?: React.CSSProperties;
   dotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
   activeDotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
@@ -100,6 +110,8 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
     prefixCls = 'rc-slider',
     className,
     style,
+    classNames,
+    styles,
 
     // Status
     disabled = false,
@@ -456,6 +468,8 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
       ariaLabelForHandle,
       ariaLabelledByForHandle,
       ariaValueTextFormatterForHandle,
+      styles: styles || {},
+      classNames: classNames || {},
     }),
     [
       mergedMin,
@@ -472,6 +486,8 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
       ariaLabelForHandle,
       ariaLabelledByForHandle,
       ariaValueTextFormatterForHandle,
+      styles,
+      classNames,
     ],
   );
 
@@ -480,7 +496,7 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
     <SliderContext.Provider value={context}>
       <div
         ref={containerRef}
-        className={classNames(prefixCls, className, {
+        className={cls(prefixCls, className, {
           [`${prefixCls}-disabled`]: disabled,
           [`${prefixCls}-vertical`]: vertical,
           [`${prefixCls}-horizontal`]: !vertical,
@@ -489,7 +505,13 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
         style={style}
         onMouseDown={onSliderMouseDown}
       >
-        <div className={`${prefixCls}-rail`} style={railStyle} />
+        <div
+          className={cls(`${prefixCls}-rail`, classNames?.rail)}
+          style={{
+            ...railStyle,
+            ...styles?.rail,
+          }}
+        />
 
         <Tracks
           prefixCls={prefixCls}

src/Tracks/Track.tsx

@@ -1,21 +1,23 @@
+import cls from 'classnames';
 import * as React from 'react';
-import classNames from 'classnames';
 import SliderContext from '../context';
-import { getOffset } from '../util';
 import type { OnStartMove } from '../interface';
+import { getOffset } from '../util';
 
 export interface TrackProps {
   prefixCls: string;
   style?: React.CSSProperties;
+  /** Replace with origin prefix concat className */
+  replaceCls?: string;
   start: number;
   end: number;
   index: number;
   onStartMove?: OnStartMove;
 }
 
 export default function Track(props: TrackProps) {
-  const { prefixCls, style, start, end, index, onStartMove } = props;
-  const { direction, min, max, disabled, range } = React.useContext(SliderContext);
+  const { prefixCls, style, start, end, index, onStartMove, replaceCls } = props;
+  const { direction, min, max, disabled, range, classNames } = React.useContext(SliderContext);
 
   const trackPrefixCls = `${prefixCls}-track`;
 
@@ -53,12 +55,20 @@ export default function Track(props: TrackProps) {
       positionStyle.width = `${offsetEnd * 100 - offsetStart * 100}%`;
   }
 
+  const className =
+    replaceCls ||
+    cls(
+      trackPrefixCls,
+      {
+        [`${trackPrefixCls}-${index + 1}`]: index !== null && range,
+        [`${prefixCls}-track-draggable`]: onStartMove,
+      },
+      classNames.track,
+    );
+
   return (
     <div
-      className={classNames(trackPrefixCls, {
-        [`${trackPrefixCls}-${index + 1}`]: range,
-        [`${prefixCls}-track-draggable`]: onStartMove,
-      })}
+      className={className}
       style={{
         ...positionStyle,
         ...style,

src/Tracks/index.tsx

@@ -1,8 +1,9 @@
+import cls from 'classnames';
 import * as React from 'react';
 import SliderContext from '../context';
-import Track from './Track';
 import type { OnStartMove } from '../interface';
 import { getIndex } from '../util';
+import Track from './Track';
 
 export interface TrackProps {
   prefixCls: string;
@@ -14,8 +15,9 @@ export interface TrackProps {
 
 export default function Tracks(props: TrackProps) {
   const { prefixCls, style, values, startPoint, onStartMove } = props;
-  const { included, range, min } = React.useContext(SliderContext);
+  const { included, range, min, styles, classNames } = React.useContext(SliderContext);
 
+  // =========================== List ===========================
   const trackList = React.useMemo(() => {
     if (!range) {
       // null value do not have track
@@ -35,7 +37,7 @@ export default function Tracks(props: TrackProps) {
     }
 
     // Multiple
-    const list = [];
+    const list: { start: number; end: number }[] = [];
 
     for (let i = 0; i < values.length - 1; i += 1) {
       list.push({
@@ -47,17 +49,39 @@ export default function Tracks(props: TrackProps) {
     return list;
   }, [values, range, startPoint, min]);
 
-  return (included
-    ? trackList.map(({ start, end }, index) => (
+  // ========================== Render ==========================
+  let tracksNode: React.ReactElement = null;
+
+  if (classNames.tracks || styles.tracks) {
+    tracksNode = (
+      <Track
+        index={null}
+        prefixCls={prefixCls}
+        start={trackList[0].start}
+        end={trackList[trackList.length - 1].end}
+        replaceCls={cls(classNames.tracks, `${prefixCls}-tracks`)}
+        style={styles.tracks}
+      />
+    );
+  }
+
+  return (included ? (
+    <>
+      {tracksNode}
+      {trackList.map(({ start, end }, index) => (
         <Track
           index={index}
           prefixCls={prefixCls}
-          style={getIndex(style, index)}
+          style={{
+            ...getIndex(style, index),
+            ...styles.track,
+          }}
           start={start}
           end={end}
           key={index}
           onStartMove={onStartMove}
         />
-      ))
-    : null) as unknown as React.ReactElement;
+      ))}
+    </>
+  ) : null) as unknown as React.ReactElement;
 }

src/context.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { AriaValueFormat, Direction } from './interface';
+import type { AriaValueFormat, Direction, SliderClassNames, SliderStyles } from './interface';
 
 export interface SliderContextProps {
   min: number;
@@ -16,6 +16,8 @@ export interface SliderContextProps {
   ariaLabelForHandle?: string | string[];
   ariaLabelledByForHandle?: string | string[];
   ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[];
+  classNames: SliderClassNames;
+  styles: SliderStyles;
 }
 
 const SliderContext = React.createContext<SliderContextProps>({
@@ -27,6 +29,8 @@ const SliderContext = React.createContext<SliderContextProps>({
   includedEnd: 0,
   tabIndex: 0,
   keyboard: true,
+  styles: {},
+  classNames: {},
 });
 
 export default SliderContext;

src/interface.ts

@@ -5,3 +5,9 @@ export type Direction = 'rtl' | 'ltr' | 'ttb' | 'btt';
 export type OnStartMove = (e: React.MouseEvent | React.TouchEvent, valueIndex: number) => void;
 
 export type AriaValueFormat = (value: number) => string;
+
+export type SemanticName = 'tracks' | 'track' | 'rail' | 'handle';
+
+export type SliderClassNames = Partial<Record<SemanticName, string>>;
+
+export type SliderStyles = Partial<Record<SemanticName, React.CSSProperties>>;