mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 11:32:52 +08:00
refactor: slider with cssinjs (#34489)
* chore: slider cssinjs * chore: clean up
This commit is contained in:
二货机器人
GitHub
parent
ade0a5c5e7
commit
cd30664ce3
@ -128,6 +128,7 @@ export interface DerivativeToken extends Omit<DesignToken, 'duration'> {
|
|||||||
durationFast: string;
|
durationFast: string;
|
||||||
|
|
||||||
// TMP
|
// TMP
|
||||||
|
tmpPrimaryColorWeak: string;
|
||||||
tmpPrimaryHoverColorWeak: string;
|
tmpPrimaryHoverColorWeak: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -153,6 +154,7 @@ function derivative(designToken: DesignToken): DerivativeToken {
|
|||||||
|
|
||||||
...designToken,
|
...designToken,
|
||||||
|
|
||||||
|
tmpPrimaryColorWeak: primaryColors[2],
|
||||||
tmpPrimaryHoverColorWeak: primaryColors[0],
|
tmpPrimaryHoverColorWeak: primaryColors[0],
|
||||||
primaryHoverColor: primaryColors[4],
|
primaryHoverColor: primaryColors[4],
|
||||||
primaryActiveColor: primaryColors[6],
|
primaryActiveColor: primaryColors[6],
|
||||||
|
|||||||
@ -4,6 +4,7 @@ import classNames from 'classnames';
|
|||||||
import { TooltipPlacement } from '../tooltip';
|
import { TooltipPlacement } from '../tooltip';
|
||||||
import SliderTooltip from './SliderTooltip';
|
import SliderTooltip from './SliderTooltip';
|
||||||
import { ConfigContext } from '../config-provider';
|
import { ConfigContext } from '../config-provider';
|
||||||
|
import useStyle from './style';
|
||||||
|
|
||||||
export type SliderMarks = RcSliderProps['marks'];
|
export type SliderMarks = RcSliderProps['marks'];
|
||||||
|
|
||||||
@ -95,9 +96,16 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
|
|||||||
} = props;
|
} = props;
|
||||||
const prefixCls = getPrefixCls('slider', customizePrefixCls);
|
const prefixCls = getPrefixCls('slider', customizePrefixCls);
|
||||||
const tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls);
|
const tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls);
|
||||||
const cls = classNames(className, {
|
|
||||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||||
});
|
|
||||||
|
const cls = classNames(
|
||||||
|
className,
|
||||||
|
{
|
||||||
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||||
|
},
|
||||||
|
hashId,
|
||||||
|
);
|
||||||
|
|
||||||
// make reverse default on rtl direction
|
// make reverse default on rtl direction
|
||||||
if (direction === 'rtl' && !restProps.vertical) {
|
if (direction === 'rtl' && !restProps.vertical) {
|
||||||
@ -145,7 +153,7 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return wrapSSR(
|
||||||
<RcSlider
|
<RcSlider
|
||||||
{...(restProps as SliderRangeProps)}
|
{...(restProps as SliderRangeProps)}
|
||||||
step={restProps.step!}
|
step={restProps.step!}
|
||||||
@ -155,7 +163,7 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
|
|||||||
ref={ref}
|
ref={ref}
|
||||||
prefixCls={prefixCls}
|
prefixCls={prefixCls}
|
||||||
handleRender={handleRender}
|
handleRender={handleRender}
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,206 +1,206 @@
|
|||||||
@import '../../style/themes/index';
|
// @import '../../style/themes/index';
|
||||||
@import '../../style/mixins/index';
|
// @import '../../style/mixins/index';
|
||||||
|
|
||||||
@slider-prefix-cls: ~'@{ant-prefix}-slider';
|
// @slider-prefix-cls: ~'@{ant-prefix}-slider';
|
||||||
|
|
||||||
.@{slider-prefix-cls} {
|
// .@{slider-prefix-cls} {
|
||||||
.reset-component();
|
// .reset-component();
|
||||||
|
|
||||||
position: relative;
|
// position: relative;
|
||||||
height: 12px;
|
// height: 12px;
|
||||||
margin: @slider-margin;
|
// margin: @slider-margin;
|
||||||
padding: 4px 0;
|
// padding: 4px 0;
|
||||||
cursor: pointer;
|
// cursor: pointer;
|
||||||
touch-action: none;
|
// touch-action: none;
|
||||||
|
|
||||||
.vertical();
|
// .vertical();
|
||||||
|
|
||||||
&-with-marks {
|
// &-with-marks {
|
||||||
margin-bottom: 28px;
|
// margin-bottom: 28px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-rail {
|
// &-rail {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
height: 4px;
|
// height: 4px;
|
||||||
background-color: @slider-rail-background-color;
|
// background-color: @slider-rail-background-color;
|
||||||
border-radius: @border-radius-base;
|
// border-radius: @border-radius-base;
|
||||||
transition: background-color 0.3s;
|
// transition: background-color 0.3s;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-track {
|
// &-track {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
height: 4px;
|
// height: 4px;
|
||||||
background-color: @slider-track-background-color;
|
// background-color: @slider-track-background-color;
|
||||||
border-radius: @border-radius-base;
|
// border-radius: @border-radius-base;
|
||||||
transition: background-color 0.3s;
|
// transition: background-color 0.3s;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-handle {
|
// &-handle {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
width: @slider-handle-size;
|
// width: @slider-handle-size;
|
||||||
height: @slider-handle-size;
|
// height: @slider-handle-size;
|
||||||
margin-top: @slider-handle-margin-top;
|
// margin-top: @slider-handle-margin-top;
|
||||||
background-color: @slider-handle-background-color;
|
// background-color: @slider-handle-background-color;
|
||||||
border: solid @slider-handle-border-width @slider-handle-color;
|
// border: solid @slider-handle-border-width @slider-handle-color;
|
||||||
border-radius: 50%;
|
// border-radius: 50%;
|
||||||
box-shadow: @slider-handle-shadow;
|
// box-shadow: @slider-handle-shadow;
|
||||||
cursor: pointer;
|
// cursor: pointer;
|
||||||
transition: border-color 0.3s, box-shadow 0.6s,
|
// transition: border-color 0.3s, box-shadow 0.6s,
|
||||||
transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
// transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||||
|
|
||||||
// &-dragging&-dragging&-dragging {
|
// // &-dragging&-dragging&-dragging {
|
||||||
// border-color: @slider-handle-color-focus;
|
// // border-color: @slider-handle-color-focus;
|
||||||
// box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
|
// // box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
|
||||||
// }
|
// // }
|
||||||
&-dragging {
|
// &-dragging {
|
||||||
z-index: 1;
|
// z-index: 1;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&:focus {
|
// &:focus {
|
||||||
border-color: @slider-handle-color-focus;
|
// border-color: @slider-handle-color-focus;
|
||||||
outline: none;
|
// outline: none;
|
||||||
box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
|
// box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&.@{ant-prefix}-tooltip-open {
|
// &.@{ant-prefix}-tooltip-open {
|
||||||
border-color: @slider-handle-color-tooltip-open;
|
// border-color: @slider-handle-color-tooltip-open;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
&:hover {
|
// &:hover {
|
||||||
.@{slider-prefix-cls}-rail {
|
// .@{slider-prefix-cls}-rail {
|
||||||
background-color: @slider-rail-background-color-hover;
|
// background-color: @slider-rail-background-color-hover;
|
||||||
}
|
// }
|
||||||
.@{slider-prefix-cls}-track {
|
// .@{slider-prefix-cls}-track {
|
||||||
background-color: @slider-track-background-color-hover;
|
// background-color: @slider-track-background-color-hover;
|
||||||
}
|
// }
|
||||||
.@{slider-prefix-cls}-handle:not(.@{ant-prefix}-tooltip-open) {
|
// .@{slider-prefix-cls}-handle:not(.@{ant-prefix}-tooltip-open) {
|
||||||
border-color: @slider-handle-color-hover;
|
// border-color: @slider-handle-color-hover;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-mark {
|
// &-mark {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 14px;
|
// top: 14px;
|
||||||
left: 0;
|
// left: 0;
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
font-size: @font-size-base;
|
// font-size: @font-size-base;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-mark-text {
|
// &-mark-text {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
display: inline-block;
|
// display: inline-block;
|
||||||
color: @text-color-secondary;
|
// color: @text-color-secondary;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
word-break: keep-all;
|
// word-break: keep-all;
|
||||||
cursor: pointer;
|
// cursor: pointer;
|
||||||
user-select: none;
|
// user-select: none;
|
||||||
|
|
||||||
&-active {
|
// &-active {
|
||||||
color: @text-color;
|
// color: @text-color;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-step {
|
// &-step {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
height: 4px;
|
// height: 4px;
|
||||||
background: transparent;
|
// background: transparent;
|
||||||
pointer-events: none;
|
// pointer-events: none;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-dot {
|
// &-dot {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: -2px;
|
// top: -2px;
|
||||||
width: 8px;
|
// width: 8px;
|
||||||
height: 8px;
|
// height: 8px;
|
||||||
background-color: @component-background;
|
// background-color: @component-background;
|
||||||
border: 2px solid @slider-dot-border-color;
|
// border: 2px solid @slider-dot-border-color;
|
||||||
border-radius: 50%;
|
// border-radius: 50%;
|
||||||
cursor: pointer;
|
// cursor: pointer;
|
||||||
|
|
||||||
&-active {
|
// &-active {
|
||||||
border-color: @slider-dot-border-color-active;
|
// border-color: @slider-dot-border-color-active;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-disabled {
|
// &-disabled {
|
||||||
cursor: not-allowed;
|
// cursor: not-allowed;
|
||||||
|
|
||||||
.@{slider-prefix-cls}-rail {
|
// .@{slider-prefix-cls}-rail {
|
||||||
background-color: @slider-rail-background-color !important;
|
// background-color: @slider-rail-background-color !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{slider-prefix-cls}-track {
|
// .@{slider-prefix-cls}-track {
|
||||||
background-color: @slider-disabled-color !important;
|
// background-color: @slider-disabled-color !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{slider-prefix-cls}-handle,
|
// .@{slider-prefix-cls}-handle,
|
||||||
.@{slider-prefix-cls}-dot {
|
// .@{slider-prefix-cls}-dot {
|
||||||
background-color: @component-background;
|
// background-color: @component-background;
|
||||||
border-color: @slider-disabled-color !important;
|
// border-color: @slider-disabled-color !important;
|
||||||
box-shadow: none;
|
// box-shadow: none;
|
||||||
cursor: not-allowed;
|
// cursor: not-allowed;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{slider-prefix-cls}-mark-text,
|
// .@{slider-prefix-cls}-mark-text,
|
||||||
.@{slider-prefix-cls}-dot {
|
// .@{slider-prefix-cls}-dot {
|
||||||
cursor: not-allowed !important;
|
// cursor: not-allowed !important;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.vertical() {
|
// .vertical() {
|
||||||
&-vertical {
|
// &-vertical {
|
||||||
width: 12px;
|
// width: 12px;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
margin: 6px 10px;
|
// margin: 6px 10px;
|
||||||
padding: 0 4px;
|
// padding: 0 4px;
|
||||||
|
|
||||||
.@{slider-prefix-cls}-rail {
|
// .@{slider-prefix-cls}-rail {
|
||||||
width: 4px;
|
// width: 4px;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{slider-prefix-cls}-track {
|
// .@{slider-prefix-cls}-track {
|
||||||
width: 4px;
|
// width: 4px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{slider-prefix-cls}-handle {
|
// .@{slider-prefix-cls}-handle {
|
||||||
margin-top: -6px; // we chould consider border width as well: (10 + 2 ) / 2
|
// margin-top: -6px; // we chould consider border width as well: (10 + 2 ) / 2
|
||||||
margin-left: -5px;
|
// margin-left: -5px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{slider-prefix-cls}-mark {
|
// .@{slider-prefix-cls}-mark {
|
||||||
top: 0;
|
// top: 0;
|
||||||
left: 12px;
|
// left: 12px;
|
||||||
width: 18px;
|
// width: 18px;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{slider-prefix-cls}-mark-text {
|
// .@{slider-prefix-cls}-mark-text {
|
||||||
left: 4px;
|
// left: 4px;
|
||||||
white-space: nowrap;
|
// white-space: nowrap;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{slider-prefix-cls}-step {
|
// .@{slider-prefix-cls}-step {
|
||||||
width: 4px;
|
// width: 4px;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{slider-prefix-cls}-dot {
|
// .@{slider-prefix-cls}-dot {
|
||||||
top: auto;
|
// top: auto;
|
||||||
margin-left: -2px;
|
// margin-left: -2px;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-tooltip {
|
// &-tooltip {
|
||||||
// https://github.com/ant-design/ant-design/issues/20014
|
// // https://github.com/ant-design/ant-design/issues/20014
|
||||||
.@{ant-prefix}-tooltip-inner {
|
// .@{ant-prefix}-tooltip-inner {
|
||||||
min-width: unset;
|
// min-width: unset;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@import './rtl';
|
// @import './rtl';
|
||||||
|
|||||||
@ -1,5 +1,296 @@
|
|||||||
import '../../style/index.less';
|
// import '../../style/index.less';
|
||||||
import './index.less';
|
// import './index.less';
|
||||||
|
|
||||||
// style dependencies
|
// // style dependencies
|
||||||
import '../../tooltip/style';
|
// import '../../tooltip/style';
|
||||||
|
|
||||||
|
// deps-lint-skip-all
|
||||||
|
import * as React from 'react';
|
||||||
|
import { CSSObject } from '@ant-design/cssinjs';
|
||||||
|
import { TinyColor } from '@ctrl/tinycolor';
|
||||||
|
import {
|
||||||
|
DerivativeToken,
|
||||||
|
useStyleRegister,
|
||||||
|
useToken,
|
||||||
|
UseComponentStyleResult,
|
||||||
|
GenerateStyle,
|
||||||
|
resetComponent,
|
||||||
|
} from '../../_util/theme';
|
||||||
|
|
||||||
|
interface SliderToken extends DerivativeToken {
|
||||||
|
sliderCls: string;
|
||||||
|
handleSize: number;
|
||||||
|
sliderSize: number;
|
||||||
|
railSize: number;
|
||||||
|
dotSize: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============================== Base ===============================
|
||||||
|
const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||||
|
const { sliderCls, sliderSize, dotSize } = token;
|
||||||
|
|
||||||
|
const FIXED_RAIL_HOVER_COLOR = '#e1e1e1';
|
||||||
|
|
||||||
|
return {
|
||||||
|
[sliderCls]: {
|
||||||
|
...resetComponent(token),
|
||||||
|
|
||||||
|
position: 'relative',
|
||||||
|
height: sliderSize,
|
||||||
|
margin: '10px 6px', // FIXME: hard code in v4
|
||||||
|
padding: 0,
|
||||||
|
cursor: 'pointer',
|
||||||
|
touchAction: 'none',
|
||||||
|
|
||||||
|
// .vertical();
|
||||||
|
|
||||||
|
[`${sliderCls}-rail`]: {
|
||||||
|
position: 'absolute',
|
||||||
|
backgroundColor: token.background,
|
||||||
|
borderRadius: token.borderRadius,
|
||||||
|
transition: `background-color ${token.duration}`,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${sliderCls}-track`]: {
|
||||||
|
position: 'absolute',
|
||||||
|
backgroundColor: token.tmpPrimaryColorWeak, // FIXME: Origin @primary-3
|
||||||
|
borderRadius: token.borderRadius,
|
||||||
|
transition: `background-color ${token.duration}`,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${sliderCls}-handle`]: {
|
||||||
|
position: 'absolute',
|
||||||
|
width: token.handleSize,
|
||||||
|
height: token.handleSize,
|
||||||
|
backgroundColor: token.componentBackground,
|
||||||
|
border: `2px solid ${token.tmpPrimaryColorWeak}`,
|
||||||
|
borderRadius: '50%',
|
||||||
|
boxShadow: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: `
|
||||||
|
border-color ${token.duration},
|
||||||
|
box-shadow ${token.duration},
|
||||||
|
transform ${token.duration} cubic-bezier(0.18, 0.89, 0.32, 1.28)
|
||||||
|
`,
|
||||||
|
outline: 'none',
|
||||||
|
|
||||||
|
[`${sliderCls}-dragging`]: {
|
||||||
|
zIndex: 1,
|
||||||
|
},
|
||||||
|
|
||||||
|
'&:focus': {
|
||||||
|
borderColor: token.primaryHoverColor,
|
||||||
|
boxShadow: 'none',
|
||||||
|
},
|
||||||
|
|
||||||
|
'&:focus-visible': {
|
||||||
|
// FIXME: This is a inline color calculation
|
||||||
|
boxShadow: `0 0 0 5px ${new TinyColor(token.primaryHoverColor)
|
||||||
|
.setAlpha(0.2)
|
||||||
|
.toRgbString()}`,
|
||||||
|
},
|
||||||
|
|
||||||
|
// FIXME: Seems useless?
|
||||||
|
// &.@{ant-prefix}-tooltip-open {
|
||||||
|
// border-color: @slider-handle-color-tooltip-open;
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
|
||||||
|
'&:hover': {
|
||||||
|
[`${sliderCls}-rail`]: {
|
||||||
|
backgroundColor: FIXED_RAIL_HOVER_COLOR, // FIXME: Not match color
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${sliderCls}-track`]: {
|
||||||
|
backgroundColor: token.primaryHoverColor, // FIXME: origin primary-4
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${sliderCls}-dot`]: {
|
||||||
|
borderColor: FIXED_RAIL_HOVER_COLOR,
|
||||||
|
},
|
||||||
|
|
||||||
|
// FIXME: We use below style instead
|
||||||
|
// ${sliderCls}-handle:not(.@{ant-prefix}-tooltip-open) {
|
||||||
|
// border-color: @slider-handle-color-hover;
|
||||||
|
// }
|
||||||
|
|
||||||
|
[`
|
||||||
|
${sliderCls}-handle,
|
||||||
|
${sliderCls}-dot-active
|
||||||
|
`]: {
|
||||||
|
borderColor: token.primaryHoverColor,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${sliderCls}-mark`]: {
|
||||||
|
position: 'absolute',
|
||||||
|
fontSize: token.fontSize,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${sliderCls}-mark-text`]: {
|
||||||
|
position: 'absolute',
|
||||||
|
display: 'inline-block',
|
||||||
|
color: token.textColorSecondary,
|
||||||
|
textAlign: 'center',
|
||||||
|
wordBreak: 'keep-all',
|
||||||
|
cursor: 'pointer',
|
||||||
|
userSelect: 'none',
|
||||||
|
|
||||||
|
'&-active': {
|
||||||
|
color: token.textColor,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${sliderCls}-step`]: {
|
||||||
|
position: 'absolute',
|
||||||
|
background: 'transparent',
|
||||||
|
pointerEvents: 'none',
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${sliderCls}-dot`]: {
|
||||||
|
position: 'absolute',
|
||||||
|
width: dotSize,
|
||||||
|
height: dotSize,
|
||||||
|
backgroundColor: token.componentBackground,
|
||||||
|
border: `2px solid ${token.borderColorSplit}`, // FIXME: hardcode in v4
|
||||||
|
borderRadius: '50%',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: `border-color ${token.duration}`,
|
||||||
|
|
||||||
|
'&-active': {
|
||||||
|
borderColor: token.tmpPrimaryColorWeak,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'&-disabled': {
|
||||||
|
cursor: 'not-allowed',
|
||||||
|
|
||||||
|
[`${sliderCls}-rail`]: {
|
||||||
|
backgroundColor: `${token.background} !important`,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${sliderCls}-track`]: {
|
||||||
|
backgroundColor: `${token.textColorDisabled} !important`,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`
|
||||||
|
${sliderCls}-handle,
|
||||||
|
${sliderCls}-dot
|
||||||
|
`]: {
|
||||||
|
backgroundColor: token.componentBackground,
|
||||||
|
borderColor: `${token.textColorDisabled} !important`,
|
||||||
|
boxShadow: 'none',
|
||||||
|
cursor: 'not-allowed',
|
||||||
|
},
|
||||||
|
|
||||||
|
[`
|
||||||
|
${sliderCls}-mark-text,
|
||||||
|
${sliderCls}-dot
|
||||||
|
`]: {
|
||||||
|
cursor: `not-allowed !important`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================ Horizontal ============================
|
||||||
|
const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject => {
|
||||||
|
const { sliderCls, railSize, sliderSize, handleSize, dotSize } = token;
|
||||||
|
|
||||||
|
const railPadding: keyof React.CSSProperties = horizontal ? 'paddingBlock' : 'paddingInline';
|
||||||
|
const stretch: keyof React.CSSProperties = horizontal ? 'width' : 'height';
|
||||||
|
const contain: keyof React.CSSProperties = horizontal ? 'height' : 'width';
|
||||||
|
const handlePos: keyof React.CSSProperties = horizontal ? 'insetBlockStart' : 'insetInlineStart';
|
||||||
|
const markInset: keyof React.CSSProperties = horizontal ? 'top' : 'insetInlineStart';
|
||||||
|
|
||||||
|
return {
|
||||||
|
[railPadding]: railSize,
|
||||||
|
|
||||||
|
[`${sliderCls}-rail`]: {
|
||||||
|
[stretch]: '100%',
|
||||||
|
[contain]: railSize,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${sliderCls}-track`]: {
|
||||||
|
[contain]: railSize,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${sliderCls}-handle`]: {
|
||||||
|
[handlePos]: (sliderSize - handleSize) / 2,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${sliderCls}-mark`]: {
|
||||||
|
// Reset all
|
||||||
|
insetInlineStart: 0,
|
||||||
|
top: 0,
|
||||||
|
[markInset]: handleSize,
|
||||||
|
[stretch]: '100%',
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${sliderCls}-step`]: {
|
||||||
|
// Reset all
|
||||||
|
insetInlineStart: 0,
|
||||||
|
top: 0,
|
||||||
|
[markInset]: railSize,
|
||||||
|
[stretch]: '100%',
|
||||||
|
[contain]: railSize,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${sliderCls}-dot`]: {
|
||||||
|
position: 'absolute',
|
||||||
|
[handlePos]: (railSize - dotSize) / 2,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
// ============================ Horizontal ============================
|
||||||
|
const genHorizontalStyle: GenerateStyle<SliderToken> = token => {
|
||||||
|
const { sliderCls } = token;
|
||||||
|
|
||||||
|
return {
|
||||||
|
[`${sliderCls}-horizontal`]: {
|
||||||
|
...genDirectionStyle(token, true),
|
||||||
|
|
||||||
|
[`&${sliderCls}-with-marks`]: {
|
||||||
|
marginBottom: 28, // FIXME: hard code in v4
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================= Vertical =============================
|
||||||
|
const genVerticalStyle: GenerateStyle<SliderToken> = token => {
|
||||||
|
const { sliderCls } = token;
|
||||||
|
|
||||||
|
return {
|
||||||
|
[`${sliderCls}-vertical`]: {
|
||||||
|
...genDirectionStyle(token, false),
|
||||||
|
height: '100%',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================== Export ==============================
|
||||||
|
export default function useStyle(prefixCls: string): UseComponentStyleResult {
|
||||||
|
const [theme, token, hashId] = useToken();
|
||||||
|
|
||||||
|
const sliderSize = 12; // FIXME: hard code in v4
|
||||||
|
|
||||||
|
const sliderToken: SliderToken = {
|
||||||
|
...token,
|
||||||
|
sliderCls: `.${prefixCls}`,
|
||||||
|
handleSize: 14, // FIXME: hard code in v4
|
||||||
|
sliderSize,
|
||||||
|
railSize: sliderSize / 3,
|
||||||
|
dotSize: 8,
|
||||||
|
};
|
||||||
|
|
||||||
|
return [
|
||||||
|
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
|
||||||
|
genBaseStyle(sliderToken, hashId),
|
||||||
|
genHorizontalStyle(sliderToken),
|
||||||
|
genVerticalStyle(sliderToken),
|
||||||
|
]),
|
||||||
|
hashId,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user