rc-slider
Advanced tools
Comparing version 10.2.1 to 10.3.0
import * as React from 'react'; | ||
import type { AriaValueFormat, Direction } from './interface'; | ||
import type { AriaValueFormat, Direction, SliderClassNames, SliderStyles } from './interface'; | ||
export interface SliderContextProps { | ||
@@ -18,4 +18,6 @@ min: number; | ||
ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[]; | ||
classNames: SliderClassNames; | ||
styles: SliderStyles; | ||
} | ||
declare const SliderContext: React.Context<SliderContextProps>; | ||
export default SliderContext; |
@@ -10,4 +10,6 @@ import * as React from 'react'; | ||
tabIndex: 0, | ||
keyboard: true | ||
keyboard: true, | ||
styles: {}, | ||
classNames: {} | ||
}); | ||
export default SliderContext; |
@@ -6,9 +6,9 @@ import _extends from "@babel/runtime/helpers/esm/extends"; | ||
var _excluded = ["prefixCls", "value", "valueIndex", "onStartMove", "style", "render", "dragging", "onOffsetChange"]; | ||
import cls from 'classnames'; | ||
import KeyCode from "rc-util/es/KeyCode"; | ||
import * as React from 'react'; | ||
import classNames from 'classnames'; | ||
import KeyCode from "rc-util/es/KeyCode"; | ||
import SliderContext from '../context'; | ||
import { getDirectionStyle, getIndex } from '../util'; | ||
import SliderContext from "../context"; | ||
import { getDirectionStyle, getIndex } from "../util"; | ||
var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) { | ||
var _classNames, _getIndex; | ||
var _cls, _getIndex; | ||
var prefixCls = props.prefixCls, | ||
@@ -33,4 +33,7 @@ value = props.value, | ||
ariaLabelledByForHandle = _React$useContext.ariaLabelledByForHandle, | ||
ariaValueTextFormatterForHandle = _React$useContext.ariaValueTextFormatterForHandle; | ||
ariaValueTextFormatterForHandle = _React$useContext.ariaValueTextFormatterForHandle, | ||
styles = _React$useContext.styles, | ||
classNames = _React$useContext.classNames; | ||
var handlePrefixCls = "".concat(prefixCls, "-handle"); | ||
// ============================ Events ============================ | ||
@@ -42,2 +45,3 @@ var onInternalStartMove = function onInternalStartMove(e) { | ||
}; | ||
// =========================== Keyboard =========================== | ||
@@ -47,2 +51,3 @@ var onKeyDown = function onKeyDown(e) { | ||
var offset = null; | ||
// Change the value | ||
@@ -56,2 +61,3 @@ switch (e.which || e.keyCode) { | ||
break; | ||
// Up is plus | ||
@@ -61,2 +67,3 @@ case KeyCode.UP: | ||
break; | ||
// Down is minus | ||
@@ -85,9 +92,11 @@ case KeyCode.DOWN: | ||
}; | ||
// ============================ Offset ============================ | ||
var positionStyle = getDirectionStyle(direction, value, min, max); | ||
// ============================ Render ============================ | ||
var handleNode = /*#__PURE__*/React.createElement("div", _extends({ | ||
ref: ref, | ||
className: classNames(handlePrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(handlePrefixCls, "-").concat(valueIndex + 1), range), _defineProperty(_classNames, "".concat(handlePrefixCls, "-dragging"), dragging), _classNames)), | ||
style: _objectSpread(_objectSpread({}, positionStyle), style), | ||
className: cls(handlePrefixCls, (_cls = {}, _defineProperty(_cls, "".concat(handlePrefixCls, "-").concat(valueIndex + 1), range), _defineProperty(_cls, "".concat(handlePrefixCls, "-dragging"), dragging), _cls), classNames.handle), | ||
style: _objectSpread(_objectSpread(_objectSpread({}, positionStyle), style), styles.handle), | ||
onMouseDown: onInternalStartMove, | ||
@@ -107,2 +116,3 @@ onTouchStart: onInternalStartMove, | ||
}, restProps)); | ||
// Customize | ||
@@ -109,0 +119,0 @@ if (render) { |
@@ -5,4 +5,4 @@ import _extends from "@babel/runtime/helpers/esm/extends"; | ||
import * as React from 'react'; | ||
import Handle from './Handle'; | ||
import { getIndex } from '../util'; | ||
import Handle from "./Handle"; | ||
import { getIndex } from "../util"; | ||
var Handles = /*#__PURE__*/React.forwardRef(function (props, ref) { | ||
@@ -9,0 +9,0 @@ var prefixCls = props.prefixCls, |
@@ -35,2 +35,3 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray"; | ||
}, [rawValues, draggingIndex]); | ||
// Clean up event | ||
@@ -59,2 +60,3 @@ React.useEffect(function () { | ||
// Basic point offset | ||
if (valueIndex === -1) { | ||
@@ -66,2 +68,3 @@ // >>>> Dragging on the track | ||
var maxEndOffset = max - endValue; | ||
// Get valid offset | ||
@@ -71,2 +74,3 @@ var offset = offsetPercent * (max - min); | ||
offset = Math.min(offset, maxEndOffset); | ||
// Use first value to revert back of valid offset (like steps marks) | ||
@@ -82,2 +86,3 @@ var formatStartValue = formatValue(startValue + offset); | ||
var offsetDist = (max - min) * offsetPercent; | ||
// Always start with the valueIndex origin value | ||
@@ -90,2 +95,3 @@ var cloneValues = _toConsumableArray(cacheValues); | ||
}; | ||
// Resolve closure | ||
@@ -103,2 +109,3 @@ var updateCacheValueRef = React.useRef(updateCacheValue); | ||
startY = _getPosition.pageY; | ||
// Moving | ||
@@ -131,2 +138,3 @@ var onMouseMove = function onMouseMove(event) { | ||
}; | ||
// End | ||
@@ -151,2 +159,3 @@ var onMouseUp = function onMouseUp(event) { | ||
}; | ||
// Only return cache value when it mapping with rawValues | ||
@@ -153,0 +162,0 @@ var returnValues = React.useMemo(function () { |
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray"; | ||
import * as React from 'react'; | ||
/** Format the value in the range of [min, max] */ | ||
/** Format value align with step */ | ||
/** Format value align with step & marks */ | ||
export default function useOffset(min, max, step, markList, allowCross, pushable) { | ||
@@ -13,2 +20,3 @@ var formatRangeValue = React.useCallback(function (val) { | ||
var stepValue = min + Math.round((formatRangeValue(val) - min) / step) * step; | ||
// Cut number in case to be like 0.30000000000000004 | ||
@@ -26,2 +34,3 @@ var getDecimal = function getDecimal(num) { | ||
var formatNextValue = formatRangeValue(val); | ||
// List align values | ||
@@ -34,4 +43,6 @@ var alignValues = markList.map(function (mark) { | ||
} | ||
// min & max | ||
alignValues.push(min, max); | ||
// Align with marks | ||
@@ -49,2 +60,3 @@ var closeValue = alignValues[0]; | ||
}, [min, max, markList, step, formatRangeValue, formatStepValue]); | ||
// ========================== Offset ========================== | ||
@@ -57,4 +69,6 @@ // Single Value | ||
var originValue = values[valueIndex]; | ||
// Only used for `dist` mode | ||
var targetDistValue = originValue + offset; | ||
// Compare next step value & mark value which is best match | ||
@@ -65,6 +79,9 @@ var potentialValues = []; | ||
}); | ||
// Min & Max | ||
potentialValues.push(min, max); | ||
// In case origin value is align with mark but not with step | ||
potentialValues.push(formatStepValue(originValue)); | ||
// Put offset step value also | ||
@@ -77,2 +94,3 @@ var sign = offset > 0 ? 1 : -1; | ||
} | ||
// Find close one | ||
@@ -102,2 +120,3 @@ potentialValues = potentialValues.filter(function (val) { | ||
}); | ||
// Out of range will back to range | ||
@@ -107,2 +126,3 @@ if (nextValue === undefined) { | ||
} | ||
// `dist` mode | ||
@@ -112,2 +132,3 @@ if (mode === 'dist') { | ||
} | ||
// `unit` mode may need another round | ||
@@ -126,2 +147,3 @@ if (Math.abs(offset) > 1) { | ||
}; | ||
/** Same as `offsetValue` but return `changed` mark to tell value changed */ | ||
@@ -140,2 +162,3 @@ var offsetChangedValue = function offsetChangedValue(values, offset, valueIndex) { | ||
}; | ||
// Values | ||
@@ -151,2 +174,3 @@ var offsetValues = function offsetValues(values, offset, valueIndex) { | ||
var pushNum = pushable || 0; | ||
// ============ AllowCross =============== | ||
@@ -162,2 +186,3 @@ if (valueIndex > 0 && nextValues[valueIndex - 1] !== originValue) { | ||
// =============== Push ================== | ||
// >>>>>> Basic push | ||
@@ -173,2 +198,3 @@ // End values | ||
} | ||
// Start values | ||
@@ -183,2 +209,3 @@ for (var _i = valueIndex; _i > 0; _i -= 1) { | ||
} | ||
// >>>>> Revert back to safe push range | ||
@@ -194,2 +221,3 @@ // End to Start | ||
} | ||
// Start to End | ||
@@ -196,0 +224,0 @@ for (var _i3 = 0; _i3 < nextValues.length - 1; _i3 += 1) { |
@@ -1,2 +0,2 @@ | ||
import Slider from './Slider'; | ||
import Slider from "./Slider"; | ||
export default Slider; |
@@ -5,1 +5,4 @@ import type React from 'react'; | ||
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>>; |
import * as React from 'react'; | ||
import Mark from './Mark'; | ||
import Mark from "./Mark"; | ||
export default function Marks(props) { | ||
@@ -8,2 +8,3 @@ var prefixCls = props.prefixCls, | ||
var markPrefixCls = "".concat(prefixCls, "-mark"); | ||
// Not render mark if empty | ||
@@ -10,0 +11,0 @@ if (!marks.length) { |
@@ -5,4 +5,4 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2"; | ||
import classNames from 'classnames'; | ||
import { getDirectionStyle } from '../util'; | ||
import SliderContext from '../context'; | ||
import { getDirectionStyle } from "../util"; | ||
import SliderContext from "../context"; | ||
export default function Mark(props) { | ||
@@ -22,2 +22,3 @@ var prefixCls = props.prefixCls, | ||
var textCls = "".concat(prefixCls, "-text"); | ||
// ============================ Offset ============================ | ||
@@ -24,0 +25,0 @@ var positionStyle = getDirectionStyle(direction, value, min, max); |
import * as React from 'react'; | ||
import type { HandlesProps } from './Handles'; | ||
import type { AriaValueFormat } from './interface'; | ||
import type { AriaValueFormat, SliderClassNames, SliderStyles } from './interface'; | ||
import type { MarkObj } from './Marks'; | ||
@@ -22,2 +22,4 @@ /** | ||
style?: React.CSSProperties; | ||
classNames?: SliderClassNames; | ||
styles?: SliderStyles; | ||
disabled?: boolean; | ||
@@ -48,4 +50,7 @@ keyboard?: 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; | ||
@@ -52,0 +57,0 @@ dotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties); |
@@ -0,1 +1,2 @@ | ||
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2"; | ||
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; | ||
@@ -5,16 +6,31 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray"; | ||
import _typeof from "@babel/runtime/helpers/esm/typeof"; | ||
import * as React from 'react'; | ||
import classNames from 'classnames'; | ||
import cls from 'classnames'; | ||
import useMergedState from "rc-util/es/hooks/useMergedState"; | ||
import isEqual from "rc-util/es/isEqual"; | ||
import useMergedState from "rc-util/es/hooks/useMergedState"; | ||
import Handles from './Handles'; | ||
import useDrag from './hooks/useDrag'; | ||
import SliderContext from './context'; | ||
import Tracks from './Tracks'; | ||
import Marks from './Marks'; | ||
import Steps from './Steps'; | ||
import useOffset from './hooks/useOffset'; | ||
import warning from "rc-util/es/warning"; | ||
import * as React from 'react'; | ||
import SliderContext from "./context"; | ||
import Handles from "./Handles"; | ||
import useDrag from "./hooks/useDrag"; | ||
import useOffset from "./hooks/useOffset"; | ||
import Marks from "./Marks"; | ||
import Steps from "./Steps"; | ||
import Tracks from "./Tracks"; | ||
/** | ||
* New: | ||
* - click mark to update range value | ||
* - handleRender | ||
* - Fix handle with count not correct | ||
* - Fix pushable not work in some case | ||
* - No more FindDOMNode | ||
* - Move all position related style into inline style | ||
* - Key: up is plus, down is minus | ||
* - fix Key with step = null not align with marks | ||
* - Change range should not trigger onChange | ||
* - keyboard support pushable | ||
*/ | ||
var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) { | ||
var _classNames; | ||
var _cls; | ||
var _props$prefixCls = props.prefixCls, | ||
@@ -24,2 +40,4 @@ prefixCls = _props$prefixCls === void 0 ? 'rc-slider' : _props$prefixCls, | ||
style = props.style, | ||
classNames = props.classNames, | ||
styles = props.styles, | ||
_props$disabled = props.disabled, | ||
@@ -76,2 +94,3 @@ disabled = _props$disabled === void 0 ? false : _props$disabled, | ||
}, [reverse, vertical]); | ||
// ============================ Range ============================= | ||
@@ -84,2 +103,3 @@ var mergedMin = React.useMemo(function () { | ||
}, [max]); | ||
// ============================= Step ============================= | ||
@@ -89,2 +109,3 @@ var mergedStep = React.useMemo(function () { | ||
}, [step]); | ||
// ============================= Push ============================= | ||
@@ -97,2 +118,3 @@ var mergedPush = React.useMemo(function () { | ||
}, [pushable, mergedStep]); | ||
// ============================ Marks ============================= | ||
@@ -120,2 +142,3 @@ var markList = React.useMemo(function () { | ||
}, [marks]); | ||
// ============================ Format ============================ | ||
@@ -126,2 +149,3 @@ var _useOffset = useOffset(mergedMin, mergedMax, mergedStep, markList, allowCross, mergedPush), | ||
offsetValues = _useOffset2[1]; | ||
// ============================ Values ============================ | ||
@@ -140,5 +164,7 @@ var _useMergedState = useMergedState(defaultValue, { | ||
var returnValues = mergedValue === null ? [] : [val0]; | ||
// Format as range | ||
if (range) { | ||
returnValues = _toConsumableArray(valueList); | ||
// When count provided or value is `undefined`, we fill values | ||
@@ -148,2 +174,3 @@ if (count || mergedValue === undefined) { | ||
returnValues = returnValues.slice(0, pointCount); | ||
// Fill with count | ||
@@ -159,2 +186,3 @@ while (returnValues.length < pointCount) { | ||
} | ||
// Align in range | ||
@@ -166,2 +194,3 @@ returnValues.forEach(function (val, index) { | ||
}, [mergedValue, range, mergedMin, count, formatValue]); | ||
// =========================== onChange =========================== | ||
@@ -178,2 +207,3 @@ var rawValuesRef = React.useRef(rawValues); | ||
}); | ||
// Trigger event if needed | ||
@@ -183,2 +213,3 @@ if (onChange && !isEqual(cloneNextValues, rawValuesRef.current, true)) { | ||
} | ||
// We set this later since it will re-render component immediately | ||
@@ -198,5 +229,7 @@ setValue(cloneNextValues); | ||
}); | ||
// Create new values | ||
var cloneNextValues = _toConsumableArray(rawValues); | ||
cloneNextValues[valueIndex] = newValue; | ||
// Fill value to match default 2 | ||
@@ -211,2 +244,3 @@ if (range && !rawValues.length && count === undefined) { | ||
}; | ||
// ============================ Click ============================= | ||
@@ -241,2 +275,3 @@ var onSliderMouseDown = function onSliderMouseDown(e) { | ||
}; | ||
// =========================== Keyboard =========================== | ||
@@ -265,2 +300,3 @@ var _React$useState = React.useState(null), | ||
}, [keyboardValue]); | ||
// ============================= Drag ============================= | ||
@@ -289,2 +325,3 @@ var mergedDraggableTrack = React.useMemo(function () { | ||
}; | ||
// Auto focus for updated handle | ||
@@ -298,2 +335,3 @@ var dragging = draggingIndex !== -1; | ||
}, [dragging]); | ||
// =========================== Included =========================== | ||
@@ -305,2 +343,3 @@ var sortedCacheValues = React.useMemo(function () { | ||
}, [cacheValues]); | ||
// Provide a range values with included [min, max] | ||
@@ -317,2 +356,3 @@ // Used for Track, Mark & Dot | ||
includedEnd = _React$useMemo2[1]; | ||
// ============================= Refs ============================= | ||
@@ -333,2 +373,3 @@ React.useImperativeHandle(ref, function () { | ||
}); | ||
// ========================== Auto Focus ========================== | ||
@@ -340,2 +381,3 @@ React.useEffect(function () { | ||
}, []); | ||
// =========================== Context ============================ | ||
@@ -357,5 +399,8 @@ var context = React.useMemo(function () { | ||
ariaLabelledByForHandle: ariaLabelledByForHandle, | ||
ariaValueTextFormatterForHandle: ariaValueTextFormatterForHandle | ||
ariaValueTextFormatterForHandle: ariaValueTextFormatterForHandle, | ||
styles: styles || {}, | ||
classNames: classNames || {} | ||
}; | ||
}, [mergedMin, mergedMax, direction, disabled, keyboard, mergedStep, included, includedStart, includedEnd, range, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaValueTextFormatterForHandle]); | ||
}, [mergedMin, mergedMax, direction, disabled, keyboard, mergedStep, included, includedStart, includedEnd, range, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaValueTextFormatterForHandle, styles, classNames]); | ||
// ============================ Render ============================ | ||
@@ -366,8 +411,8 @@ return /*#__PURE__*/React.createElement(SliderContext.Provider, { | ||
ref: containerRef, | ||
className: classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(prefixCls, "-vertical"), vertical), _defineProperty(_classNames, "".concat(prefixCls, "-horizontal"), !vertical), _defineProperty(_classNames, "".concat(prefixCls, "-with-marks"), markList.length), _classNames)), | ||
className: cls(prefixCls, className, (_cls = {}, _defineProperty(_cls, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_cls, "".concat(prefixCls, "-vertical"), vertical), _defineProperty(_cls, "".concat(prefixCls, "-horizontal"), !vertical), _defineProperty(_cls, "".concat(prefixCls, "-with-marks"), markList.length), _cls)), | ||
style: style, | ||
onMouseDown: onSliderMouseDown | ||
}, /*#__PURE__*/React.createElement("div", { | ||
className: "".concat(prefixCls, "-rail"), | ||
style: railStyle | ||
className: cls("".concat(prefixCls, "-rail"), classNames === null || classNames === void 0 ? void 0 : classNames.rail), | ||
style: _objectSpread(_objectSpread({}, railStyle), styles === null || styles === void 0 ? void 0 : styles.rail) | ||
}), /*#__PURE__*/React.createElement(Tracks, { | ||
@@ -374,0 +419,0 @@ prefixCls: prefixCls, |
@@ -5,4 +5,4 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; | ||
import classNames from 'classnames'; | ||
import { getDirectionStyle } from '../util'; | ||
import SliderContext from '../context'; | ||
import { getDirectionStyle } from "../util"; | ||
import SliderContext from "../context"; | ||
export default function Dot(props) { | ||
@@ -22,2 +22,3 @@ var prefixCls = props.prefixCls, | ||
var active = included && includedStart <= value && value <= includedEnd; | ||
// ============================ Offset ============================ | ||
@@ -24,0 +25,0 @@ var mergedStyle = _objectSpread(_objectSpread({}, getDirectionStyle(direction, value, min, max)), typeof style === 'function' ? style(value) : style); |
import * as React from 'react'; | ||
import SliderContext from '../context'; | ||
import Dot from './Dot'; | ||
import SliderContext from "../context"; | ||
import Dot from "./Dot"; | ||
export default function Steps(props) { | ||
@@ -16,2 +16,3 @@ var prefixCls = props.prefixCls, | ||
var dotSet = new Set(); | ||
// Add marks | ||
@@ -21,2 +22,3 @@ marks.forEach(function (mark) { | ||
}); | ||
// Fill dots | ||
@@ -23,0 +25,0 @@ if (dots && step !== null) { |
@@ -0,5 +1,7 @@ | ||
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2"; | ||
import cls from 'classnames'; | ||
import * as React from 'react'; | ||
import SliderContext from '../context'; | ||
import Track from './Track'; | ||
import { getIndex } from '../util'; | ||
import SliderContext from "../context"; | ||
import { getIndex } from "../util"; | ||
import Track from "./Track"; | ||
export default function Tracks(props) { | ||
@@ -14,3 +16,7 @@ var prefixCls = props.prefixCls, | ||
range = _React$useContext.range, | ||
min = _React$useContext.min; | ||
min = _React$useContext.min, | ||
styles = _React$useContext.styles, | ||
classNames = _React$useContext.classNames; | ||
// =========================== List =========================== | ||
var trackList = React.useMemo(function () { | ||
@@ -29,2 +35,3 @@ if (!range) { | ||
} | ||
// Multiple | ||
@@ -40,3 +47,16 @@ var list = []; | ||
}, [values, range, startPoint, min]); | ||
return included ? trackList.map(function (_ref, index) { | ||
// ========================== Render ========================== | ||
var tracksNode = null; | ||
if (classNames.tracks || styles.tracks) { | ||
tracksNode = /*#__PURE__*/React.createElement(Track, { | ||
index: null, | ||
prefixCls: prefixCls, | ||
start: trackList[0].start, | ||
end: trackList[trackList.length - 1].end, | ||
replaceCls: cls(classNames.tracks, "".concat(prefixCls, "-tracks")), | ||
style: styles.tracks | ||
}); | ||
} | ||
return included ? /*#__PURE__*/React.createElement(React.Fragment, null, tracksNode, trackList.map(function (_ref, index) { | ||
var start = _ref.start, | ||
@@ -47,3 +67,3 @@ end = _ref.end; | ||
prefixCls: prefixCls, | ||
style: getIndex(style, index), | ||
style: _objectSpread(_objectSpread({}, getIndex(style, index)), styles.track), | ||
start: start, | ||
@@ -54,3 +74,3 @@ end: end, | ||
}); | ||
}) : null; | ||
})) : null; | ||
} |
@@ -6,2 +6,4 @@ import * as React from 'react'; | ||
style?: React.CSSProperties; | ||
/** Replace with origin prefix concat className */ | ||
replaceCls?: string; | ||
start: number; | ||
@@ -8,0 +10,0 @@ end: number; |
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2"; | ||
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; | ||
import cls from 'classnames'; | ||
import * as React from 'react'; | ||
import classNames from 'classnames'; | ||
import SliderContext from '../context'; | ||
import { getOffset } from '../util'; | ||
import SliderContext from "../context"; | ||
import { getOffset } from "../util"; | ||
export default function Track(props) { | ||
var _classNames; | ||
var _cls; | ||
var prefixCls = props.prefixCls, | ||
@@ -14,3 +14,4 @@ style = props.style, | ||
index = props.index, | ||
onStartMove = props.onStartMove; | ||
onStartMove = props.onStartMove, | ||
replaceCls = props.replaceCls; | ||
var _React$useContext = React.useContext(SliderContext), | ||
@@ -21,6 +22,8 @@ direction = _React$useContext.direction, | ||
disabled = _React$useContext.disabled, | ||
range = _React$useContext.range; | ||
range = _React$useContext.range, | ||
classNames = _React$useContext.classNames; | ||
var trackPrefixCls = "".concat(prefixCls, "-track"); | ||
var offsetStart = getOffset(start, min, max); | ||
var offsetEnd = getOffset(end, min, max); | ||
// ============================ Events ============================ | ||
@@ -32,2 +35,3 @@ var onInternalStartMove = function onInternalStartMove(e) { | ||
}; | ||
// ============================ Render ============================ | ||
@@ -52,4 +56,5 @@ var positionStyle = {}; | ||
} | ||
var className = replaceCls || cls(trackPrefixCls, (_cls = {}, _defineProperty(_cls, "".concat(trackPrefixCls, "-").concat(index + 1), index !== null && range), _defineProperty(_cls, "".concat(prefixCls, "-track-draggable"), onStartMove), _cls), classNames.track); | ||
return /*#__PURE__*/React.createElement("div", { | ||
className: classNames(trackPrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(trackPrefixCls, "-").concat(index + 1), range), _defineProperty(_classNames, "".concat(prefixCls, "-track-draggable"), onStartMove), _classNames)), | ||
className: className, | ||
style: _objectSpread(_objectSpread({}, positionStyle), style), | ||
@@ -56,0 +61,0 @@ onMouseDown: onInternalStartMove, |
@@ -27,2 +27,3 @@ export function getOffset(value, min, max) { | ||
} | ||
/** Return index value if is list or return value directly */ | ||
@@ -29,0 +30,0 @@ export function getIndex(value, index) { |
import * as React from 'react'; | ||
import type { AriaValueFormat, Direction } from './interface'; | ||
import type { AriaValueFormat, Direction, SliderClassNames, SliderStyles } from './interface'; | ||
export interface SliderContextProps { | ||
@@ -18,4 +18,6 @@ min: number; | ||
ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[]; | ||
classNames: SliderClassNames; | ||
styles: SliderStyles; | ||
} | ||
declare const SliderContext: React.Context<SliderContextProps>; | ||
export default SliderContext; |
@@ -19,5 +19,7 @@ "use strict"; | ||
tabIndex: 0, | ||
keyboard: true | ||
keyboard: true, | ||
styles: {}, | ||
classNames: {} | ||
}); | ||
var _default = SliderContext; | ||
exports.default = _default; |
@@ -13,5 +13,5 @@ "use strict"; | ||
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); | ||
var React = _interopRequireWildcard(require("react")); | ||
var _classnames = _interopRequireDefault(require("classnames")); | ||
var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode")); | ||
var React = _interopRequireWildcard(require("react")); | ||
var _context = _interopRequireDefault(require("../context")); | ||
@@ -23,3 +23,3 @@ var _util = require("../util"); | ||
var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) { | ||
var _classNames, _getIndex; | ||
var _cls, _getIndex; | ||
var prefixCls = props.prefixCls, | ||
@@ -44,4 +44,7 @@ value = props.value, | ||
ariaLabelledByForHandle = _React$useContext.ariaLabelledByForHandle, | ||
ariaValueTextFormatterForHandle = _React$useContext.ariaValueTextFormatterForHandle; | ||
ariaValueTextFormatterForHandle = _React$useContext.ariaValueTextFormatterForHandle, | ||
styles = _React$useContext.styles, | ||
classNames = _React$useContext.classNames; | ||
var handlePrefixCls = "".concat(prefixCls, "-handle"); | ||
// ============================ Events ============================ | ||
@@ -53,2 +56,3 @@ var onInternalStartMove = function onInternalStartMove(e) { | ||
}; | ||
// =========================== Keyboard =========================== | ||
@@ -58,2 +62,3 @@ var onKeyDown = function onKeyDown(e) { | ||
var offset = null; | ||
// Change the value | ||
@@ -67,2 +72,3 @@ switch (e.which || e.keyCode) { | ||
break; | ||
// Up is plus | ||
@@ -72,2 +78,3 @@ case _KeyCode.default.UP: | ||
break; | ||
// Down is minus | ||
@@ -96,9 +103,11 @@ case _KeyCode.default.DOWN: | ||
}; | ||
// ============================ Offset ============================ | ||
var positionStyle = (0, _util.getDirectionStyle)(direction, value, min, max); | ||
// ============================ Render ============================ | ||
var handleNode = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({ | ||
ref: ref, | ||
className: (0, _classnames.default)(handlePrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(handlePrefixCls, "-").concat(valueIndex + 1), range), (0, _defineProperty2.default)(_classNames, "".concat(handlePrefixCls, "-dragging"), dragging), _classNames)), | ||
style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, positionStyle), style), | ||
className: (0, _classnames.default)(handlePrefixCls, (_cls = {}, (0, _defineProperty2.default)(_cls, "".concat(handlePrefixCls, "-").concat(valueIndex + 1), range), (0, _defineProperty2.default)(_cls, "".concat(handlePrefixCls, "-dragging"), dragging), _cls), classNames.handle), | ||
style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, positionStyle), style), styles.handle), | ||
onMouseDown: onInternalStartMove, | ||
@@ -118,2 +127,3 @@ onTouchStart: onInternalStartMove, | ||
}, restProps)); | ||
// Customize | ||
@@ -120,0 +130,0 @@ if (render) { |
@@ -45,2 +45,3 @@ "use strict"; | ||
}, [rawValues, draggingIndex]); | ||
// Clean up event | ||
@@ -69,2 +70,3 @@ React.useEffect(function () { | ||
// Basic point offset | ||
if (valueIndex === -1) { | ||
@@ -76,2 +78,3 @@ // >>>> Dragging on the track | ||
var maxEndOffset = max - endValue; | ||
// Get valid offset | ||
@@ -81,2 +84,3 @@ var offset = offsetPercent * (max - min); | ||
offset = Math.min(offset, maxEndOffset); | ||
// Use first value to revert back of valid offset (like steps marks) | ||
@@ -92,2 +96,3 @@ var formatStartValue = formatValue(startValue + offset); | ||
var offsetDist = (max - min) * offsetPercent; | ||
// Always start with the valueIndex origin value | ||
@@ -100,2 +105,3 @@ var cloneValues = (0, _toConsumableArray2.default)(cacheValues); | ||
}; | ||
// Resolve closure | ||
@@ -113,2 +119,3 @@ var updateCacheValueRef = React.useRef(updateCacheValue); | ||
startY = _getPosition.pageY; | ||
// Moving | ||
@@ -141,2 +148,3 @@ var onMouseMove = function onMouseMove(event) { | ||
}; | ||
// End | ||
@@ -161,2 +169,3 @@ var onMouseUp = function onMouseUp(event) { | ||
}; | ||
// Only return cache value when it mapping with rawValues | ||
@@ -163,0 +172,0 @@ var returnValues = React.useMemo(function () { |
@@ -13,2 +13,8 @@ "use strict"; | ||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
/** Format the value in the range of [min, max] */ | ||
/** Format value align with step */ | ||
/** Format value align with step & marks */ | ||
function useOffset(min, max, step, markList, allowCross, pushable) { | ||
@@ -24,2 +30,3 @@ var formatRangeValue = React.useCallback(function (val) { | ||
var stepValue = min + Math.round((formatRangeValue(val) - min) / step) * step; | ||
// Cut number in case to be like 0.30000000000000004 | ||
@@ -37,2 +44,3 @@ var getDecimal = function getDecimal(num) { | ||
var formatNextValue = formatRangeValue(val); | ||
// List align values | ||
@@ -45,4 +53,6 @@ var alignValues = markList.map(function (mark) { | ||
} | ||
// min & max | ||
alignValues.push(min, max); | ||
// Align with marks | ||
@@ -60,2 +70,3 @@ var closeValue = alignValues[0]; | ||
}, [min, max, markList, step, formatRangeValue, formatStepValue]); | ||
// ========================== Offset ========================== | ||
@@ -68,4 +79,6 @@ // Single Value | ||
var originValue = values[valueIndex]; | ||
// Only used for `dist` mode | ||
var targetDistValue = originValue + offset; | ||
// Compare next step value & mark value which is best match | ||
@@ -76,6 +89,9 @@ var potentialValues = []; | ||
}); | ||
// Min & Max | ||
potentialValues.push(min, max); | ||
// In case origin value is align with mark but not with step | ||
potentialValues.push(formatStepValue(originValue)); | ||
// Put offset step value also | ||
@@ -88,2 +104,3 @@ var sign = offset > 0 ? 1 : -1; | ||
} | ||
// Find close one | ||
@@ -113,2 +130,3 @@ potentialValues = potentialValues.filter(function (val) { | ||
}); | ||
// Out of range will back to range | ||
@@ -118,2 +136,3 @@ if (nextValue === undefined) { | ||
} | ||
// `dist` mode | ||
@@ -123,2 +142,3 @@ if (mode === 'dist') { | ||
} | ||
// `unit` mode may need another round | ||
@@ -137,2 +157,3 @@ if (Math.abs(offset) > 1) { | ||
}; | ||
/** Same as `offsetValue` but return `changed` mark to tell value changed */ | ||
@@ -151,2 +172,3 @@ var offsetChangedValue = function offsetChangedValue(values, offset, valueIndex) { | ||
}; | ||
// Values | ||
@@ -162,2 +184,3 @@ var offsetValues = function offsetValues(values, offset, valueIndex) { | ||
var pushNum = pushable || 0; | ||
// ============ AllowCross =============== | ||
@@ -173,2 +196,3 @@ if (valueIndex > 0 && nextValues[valueIndex - 1] !== originValue) { | ||
// =============== Push ================== | ||
// >>>>>> Basic push | ||
@@ -184,2 +208,3 @@ // End values | ||
} | ||
// Start values | ||
@@ -194,2 +219,3 @@ for (var _i = valueIndex; _i > 0; _i -= 1) { | ||
} | ||
// >>>>> Revert back to safe push range | ||
@@ -205,2 +231,3 @@ // End to Start | ||
} | ||
// Start to End | ||
@@ -207,0 +234,0 @@ for (var _i3 = 0; _i3 < nextValues.length - 1; _i3 += 1) { |
@@ -5,1 +5,4 @@ import type React from 'react'; | ||
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>>; |
@@ -18,2 +18,3 @@ "use strict"; | ||
var markPrefixCls = "".concat(prefixCls, "-mark"); | ||
// Not render mark if empty | ||
@@ -20,0 +21,0 @@ if (!marks.length) { |
@@ -31,2 +31,3 @@ "use strict"; | ||
var textCls = "".concat(prefixCls, "-text"); | ||
// ============================ Offset ============================ | ||
@@ -33,0 +34,0 @@ var positionStyle = (0, _util.getDirectionStyle)(direction, value, min, max); |
import * as React from 'react'; | ||
import type { HandlesProps } from './Handles'; | ||
import type { AriaValueFormat } from './interface'; | ||
import type { AriaValueFormat, SliderClassNames, SliderStyles } from './interface'; | ||
import type { MarkObj } from './Marks'; | ||
@@ -22,2 +22,4 @@ /** | ||
style?: React.CSSProperties; | ||
classNames?: SliderClassNames; | ||
styles?: SliderStyles; | ||
disabled?: boolean; | ||
@@ -48,4 +50,7 @@ keyboard?: 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; | ||
@@ -52,0 +57,0 @@ dotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties); |
@@ -9,2 +9,3 @@ "use strict"; | ||
exports.default = void 0; | ||
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); | ||
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
@@ -14,18 +15,32 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray")); | ||
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof")); | ||
var React = _interopRequireWildcard(require("react")); | ||
var _classnames = _interopRequireDefault(require("classnames")); | ||
var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState")); | ||
var _isEqual = _interopRequireDefault(require("rc-util/lib/isEqual")); | ||
var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState")); | ||
var _warning = _interopRequireDefault(require("rc-util/lib/warning")); | ||
var React = _interopRequireWildcard(require("react")); | ||
var _context = _interopRequireDefault(require("./context")); | ||
var _Handles = _interopRequireDefault(require("./Handles")); | ||
var _useDrag3 = _interopRequireDefault(require("./hooks/useDrag")); | ||
var _context = _interopRequireDefault(require("./context")); | ||
var _Tracks = _interopRequireDefault(require("./Tracks")); | ||
var _useOffset3 = _interopRequireDefault(require("./hooks/useOffset")); | ||
var _Marks = _interopRequireDefault(require("./Marks")); | ||
var _Steps = _interopRequireDefault(require("./Steps")); | ||
var _useOffset3 = _interopRequireDefault(require("./hooks/useOffset")); | ||
var _warning = _interopRequireDefault(require("rc-util/lib/warning")); | ||
var _Tracks = _interopRequireDefault(require("./Tracks")); | ||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } | ||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
/** | ||
* New: | ||
* - click mark to update range value | ||
* - handleRender | ||
* - Fix handle with count not correct | ||
* - Fix pushable not work in some case | ||
* - No more FindDOMNode | ||
* - Move all position related style into inline style | ||
* - Key: up is plus, down is minus | ||
* - fix Key with step = null not align with marks | ||
* - Change range should not trigger onChange | ||
* - keyboard support pushable | ||
*/ | ||
var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) { | ||
var _classNames; | ||
var _cls; | ||
var _props$prefixCls = props.prefixCls, | ||
@@ -35,2 +50,4 @@ prefixCls = _props$prefixCls === void 0 ? 'rc-slider' : _props$prefixCls, | ||
style = props.style, | ||
classNames = props.classNames, | ||
styles = props.styles, | ||
_props$disabled = props.disabled, | ||
@@ -87,2 +104,3 @@ disabled = _props$disabled === void 0 ? false : _props$disabled, | ||
}, [reverse, vertical]); | ||
// ============================ Range ============================= | ||
@@ -95,2 +113,3 @@ var mergedMin = React.useMemo(function () { | ||
}, [max]); | ||
// ============================= Step ============================= | ||
@@ -100,2 +119,3 @@ var mergedStep = React.useMemo(function () { | ||
}, [step]); | ||
// ============================= Push ============================= | ||
@@ -108,2 +128,3 @@ var mergedPush = React.useMemo(function () { | ||
}, [pushable, mergedStep]); | ||
// ============================ Marks ============================= | ||
@@ -131,2 +152,3 @@ var markList = React.useMemo(function () { | ||
}, [marks]); | ||
// ============================ Format ============================ | ||
@@ -137,2 +159,3 @@ var _useOffset = (0, _useOffset3.default)(mergedMin, mergedMax, mergedStep, markList, allowCross, mergedPush), | ||
offsetValues = _useOffset2[1]; | ||
// ============================ Values ============================ | ||
@@ -151,5 +174,7 @@ var _useMergedState = (0, _useMergedState3.default)(defaultValue, { | ||
var returnValues = mergedValue === null ? [] : [val0]; | ||
// Format as range | ||
if (range) { | ||
returnValues = (0, _toConsumableArray2.default)(valueList); | ||
// When count provided or value is `undefined`, we fill values | ||
@@ -159,2 +184,3 @@ if (count || mergedValue === undefined) { | ||
returnValues = returnValues.slice(0, pointCount); | ||
// Fill with count | ||
@@ -170,2 +196,3 @@ while (returnValues.length < pointCount) { | ||
} | ||
// Align in range | ||
@@ -177,2 +204,3 @@ returnValues.forEach(function (val, index) { | ||
}, [mergedValue, range, mergedMin, count, formatValue]); | ||
// =========================== onChange =========================== | ||
@@ -189,2 +217,3 @@ var rawValuesRef = React.useRef(rawValues); | ||
}); | ||
// Trigger event if needed | ||
@@ -194,2 +223,3 @@ if (onChange && !(0, _isEqual.default)(cloneNextValues, rawValuesRef.current, true)) { | ||
} | ||
// We set this later since it will re-render component immediately | ||
@@ -209,5 +239,7 @@ setValue(cloneNextValues); | ||
}); | ||
// Create new values | ||
var cloneNextValues = (0, _toConsumableArray2.default)(rawValues); | ||
cloneNextValues[valueIndex] = newValue; | ||
// Fill value to match default 2 | ||
@@ -222,2 +254,3 @@ if (range && !rawValues.length && count === undefined) { | ||
}; | ||
// ============================ Click ============================= | ||
@@ -252,2 +285,3 @@ var onSliderMouseDown = function onSliderMouseDown(e) { | ||
}; | ||
// =========================== Keyboard =========================== | ||
@@ -276,2 +310,3 @@ var _React$useState = React.useState(null), | ||
}, [keyboardValue]); | ||
// ============================= Drag ============================= | ||
@@ -300,2 +335,3 @@ var mergedDraggableTrack = React.useMemo(function () { | ||
}; | ||
// Auto focus for updated handle | ||
@@ -309,2 +345,3 @@ var dragging = draggingIndex !== -1; | ||
}, [dragging]); | ||
// =========================== Included =========================== | ||
@@ -316,2 +353,3 @@ var sortedCacheValues = React.useMemo(function () { | ||
}, [cacheValues]); | ||
// Provide a range values with included [min, max] | ||
@@ -328,2 +366,3 @@ // Used for Track, Mark & Dot | ||
includedEnd = _React$useMemo2[1]; | ||
// ============================= Refs ============================= | ||
@@ -344,2 +383,3 @@ React.useImperativeHandle(ref, function () { | ||
}); | ||
// ========================== Auto Focus ========================== | ||
@@ -351,2 +391,3 @@ React.useEffect(function () { | ||
}, []); | ||
// =========================== Context ============================ | ||
@@ -368,5 +409,8 @@ var context = React.useMemo(function () { | ||
ariaLabelledByForHandle: ariaLabelledByForHandle, | ||
ariaValueTextFormatterForHandle: ariaValueTextFormatterForHandle | ||
ariaValueTextFormatterForHandle: ariaValueTextFormatterForHandle, | ||
styles: styles || {}, | ||
classNames: classNames || {} | ||
}; | ||
}, [mergedMin, mergedMax, direction, disabled, keyboard, mergedStep, included, includedStart, includedEnd, range, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaValueTextFormatterForHandle]); | ||
}, [mergedMin, mergedMax, direction, disabled, keyboard, mergedStep, included, includedStart, includedEnd, range, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaValueTextFormatterForHandle, styles, classNames]); | ||
// ============================ Render ============================ | ||
@@ -377,8 +421,8 @@ return /*#__PURE__*/React.createElement(_context.default.Provider, { | ||
ref: containerRef, | ||
className: (0, _classnames.default)(prefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-vertical"), vertical), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-horizontal"), !vertical), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-with-marks"), markList.length), _classNames)), | ||
className: (0, _classnames.default)(prefixCls, className, (_cls = {}, (0, _defineProperty2.default)(_cls, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_cls, "".concat(prefixCls, "-vertical"), vertical), (0, _defineProperty2.default)(_cls, "".concat(prefixCls, "-horizontal"), !vertical), (0, _defineProperty2.default)(_cls, "".concat(prefixCls, "-with-marks"), markList.length), _cls)), | ||
style: style, | ||
onMouseDown: onSliderMouseDown | ||
}, /*#__PURE__*/React.createElement("div", { | ||
className: "".concat(prefixCls, "-rail"), | ||
style: railStyle | ||
className: (0, _classnames.default)("".concat(prefixCls, "-rail"), classNames === null || classNames === void 0 ? void 0 : classNames.rail), | ||
style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, railStyle), styles === null || styles === void 0 ? void 0 : styles.rail) | ||
}), /*#__PURE__*/React.createElement(_Tracks.default, { | ||
@@ -385,0 +429,0 @@ prefixCls: prefixCls, |
@@ -31,2 +31,3 @@ "use strict"; | ||
var active = included && includedStart <= value && value <= includedEnd; | ||
// ============================ Offset ============================ | ||
@@ -33,0 +34,0 @@ var mergedStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _util.getDirectionStyle)(direction, value, min, max)), typeof style === 'function' ? style(value) : style); |
@@ -26,2 +26,3 @@ "use strict"; | ||
var dotSet = new Set(); | ||
// Add marks | ||
@@ -31,2 +32,3 @@ marks.forEach(function (mark) { | ||
}); | ||
// Fill dots | ||
@@ -33,0 +35,0 @@ if (dots && step !== null) { |
@@ -9,6 +9,8 @@ "use strict"; | ||
exports.default = Tracks; | ||
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); | ||
var _classnames = _interopRequireDefault(require("classnames")); | ||
var React = _interopRequireWildcard(require("react")); | ||
var _context = _interopRequireDefault(require("../context")); | ||
var _util = require("../util"); | ||
var _Track = _interopRequireDefault(require("./Track")); | ||
var _util = require("../util"); | ||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } | ||
@@ -25,3 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
range = _React$useContext.range, | ||
min = _React$useContext.min; | ||
min = _React$useContext.min, | ||
styles = _React$useContext.styles, | ||
classNames = _React$useContext.classNames; | ||
// =========================== List =========================== | ||
var trackList = React.useMemo(function () { | ||
@@ -40,2 +46,3 @@ if (!range) { | ||
} | ||
// Multiple | ||
@@ -51,3 +58,16 @@ var list = []; | ||
}, [values, range, startPoint, min]); | ||
return included ? trackList.map(function (_ref, index) { | ||
// ========================== Render ========================== | ||
var tracksNode = null; | ||
if (classNames.tracks || styles.tracks) { | ||
tracksNode = /*#__PURE__*/React.createElement(_Track.default, { | ||
index: null, | ||
prefixCls: prefixCls, | ||
start: trackList[0].start, | ||
end: trackList[trackList.length - 1].end, | ||
replaceCls: (0, _classnames.default)(classNames.tracks, "".concat(prefixCls, "-tracks")), | ||
style: styles.tracks | ||
}); | ||
} | ||
return included ? /*#__PURE__*/React.createElement(React.Fragment, null, tracksNode, trackList.map(function (_ref, index) { | ||
var start = _ref.start, | ||
@@ -58,3 +78,3 @@ end = _ref.end; | ||
prefixCls: prefixCls, | ||
style: (0, _util.getIndex)(style, index), | ||
style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _util.getIndex)(style, index)), styles.track), | ||
start: start, | ||
@@ -65,3 +85,3 @@ end: end, | ||
}); | ||
}) : null; | ||
})) : null; | ||
} |
@@ -6,2 +6,4 @@ import * as React from 'react'; | ||
style?: React.CSSProperties; | ||
/** Replace with origin prefix concat className */ | ||
replaceCls?: string; | ||
start: number; | ||
@@ -8,0 +10,0 @@ end: number; |
@@ -11,4 +11,4 @@ "use strict"; | ||
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
var _classnames = _interopRequireDefault(require("classnames")); | ||
var React = _interopRequireWildcard(require("react")); | ||
var _classnames = _interopRequireDefault(require("classnames")); | ||
var _context = _interopRequireDefault(require("../context")); | ||
@@ -19,3 +19,3 @@ var _util = require("../util"); | ||
function Track(props) { | ||
var _classNames; | ||
var _cls; | ||
var prefixCls = props.prefixCls, | ||
@@ -26,3 +26,4 @@ style = props.style, | ||
index = props.index, | ||
onStartMove = props.onStartMove; | ||
onStartMove = props.onStartMove, | ||
replaceCls = props.replaceCls; | ||
var _React$useContext = React.useContext(_context.default), | ||
@@ -33,6 +34,8 @@ direction = _React$useContext.direction, | ||
disabled = _React$useContext.disabled, | ||
range = _React$useContext.range; | ||
range = _React$useContext.range, | ||
classNames = _React$useContext.classNames; | ||
var trackPrefixCls = "".concat(prefixCls, "-track"); | ||
var offsetStart = (0, _util.getOffset)(start, min, max); | ||
var offsetEnd = (0, _util.getOffset)(end, min, max); | ||
// ============================ Events ============================ | ||
@@ -44,2 +47,3 @@ var onInternalStartMove = function onInternalStartMove(e) { | ||
}; | ||
// ============================ Render ============================ | ||
@@ -64,4 +68,5 @@ var positionStyle = {}; | ||
} | ||
var className = replaceCls || (0, _classnames.default)(trackPrefixCls, (_cls = {}, (0, _defineProperty2.default)(_cls, "".concat(trackPrefixCls, "-").concat(index + 1), index !== null && range), (0, _defineProperty2.default)(_cls, "".concat(prefixCls, "-track-draggable"), onStartMove), _cls), classNames.track); | ||
return /*#__PURE__*/React.createElement("div", { | ||
className: (0, _classnames.default)(trackPrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(trackPrefixCls, "-").concat(index + 1), range), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-track-draggable"), onStartMove), _classNames)), | ||
className: className, | ||
style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, positionStyle), style), | ||
@@ -68,0 +73,0 @@ onMouseDown: onInternalStartMove, |
@@ -35,2 +35,3 @@ "use strict"; | ||
} | ||
/** Return index value if is list or return value directly */ | ||
@@ -37,0 +38,0 @@ function getIndex(value, index) { |
{ | ||
"name": "rc-slider", | ||
"version": "10.2.1", | ||
"version": "10.3.0", | ||
"description": "Slider UI component for React", | ||
@@ -43,4 +43,4 @@ "engines": { | ||
"prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"", | ||
"test": "father test", | ||
"coverage": "father test --coverage", | ||
"test": "rc-test", | ||
"coverage": "rc-test --coverage", | ||
"now-build": "npm run docs:build" | ||
@@ -58,2 +58,3 @@ }, | ||
"devDependencies": { | ||
"@rc-component/father-plugin": "^1.0.2", | ||
"@testing-library/jest-dom": "^5.16.2", | ||
@@ -67,8 +68,5 @@ "@testing-library/react": "^12.1.3", | ||
"cross-env": "^7.0.0", | ||
"dumi": "^1.1.7", | ||
"enzyme": "^3.1.0", | ||
"enzyme-adapter-react-16": "^1.0.1", | ||
"enzyme-to-json": "^3.1.2", | ||
"dumi": "^2.2.10", | ||
"eslint": "^7.1.0", | ||
"father": "^2.22.0", | ||
"father": "^4.3.5", | ||
"father-build": "^1.18.6", | ||
@@ -79,2 +77,3 @@ "gh-pages": "^3.1.0", | ||
"np": "^7.0.0", | ||
"rc-test": "^7.0.15", | ||
"rc-tooltip": "^5.0.1", | ||
@@ -81,0 +80,0 @@ "rc-trigger": "^5.0.4", |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1419087
24
110
9293
2