Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@uiw/react-slider
Advanced tools
@uiw/react-slider - npm Package Compare versions
Comparing version 5.0.0-bate-5 to 5.0.0-bate-6
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"]; | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -9,20 +8,15 @@ value: true | ||
| exports["default"] = Dots; | ||
| var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
| var _react = _interopRequireDefault(require("react")); | ||
| var _style = require("./style"); | ||
| var _jsxRuntime = require("react/jsx-runtime"); | ||
| function Dots(props) { | ||
| var prefixCls = props.prefixCls, | ||
| data = props.data, | ||
| step = props.step, | ||
| min = props.min, | ||
| vertical = props.vertical, | ||
| marks = props.marks, | ||
| markRender = props.markRender, | ||
| disabled = props.disabled; | ||
| data = props.data, | ||
| step = props.step, | ||
| min = props.min, | ||
| vertical = props.vertical, | ||
| marks = props.marks, | ||
| markRender = props.markRender, | ||
| disabled = props.disabled; | ||
| return /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.SliderStyleDot, { | ||
@@ -48,4 +42,3 @@ params: { | ||
| } | ||
| module.exports = exports.default; | ||
| //# sourceMappingURL=Dots.js.map |
124
cjs/index.js
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"]; | ||
| var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"]; | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -12,21 +10,11 @@ value: true | ||
| exports["default"] = Slider; | ||
| var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof")); | ||
| var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
| var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); | ||
| var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray")); | ||
| var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); | ||
| var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); | ||
| var _react = _interopRequireWildcard(require("react")); | ||
| var _Dots = _interopRequireDefault(require("./Dots")); | ||
| var _style = require("./style"); | ||
| Object.keys(_style).forEach(function (key) { | ||
@@ -43,60 +31,45 @@ if (key === "default" || key === "__esModule") return; | ||
| }); | ||
| var _jsxRuntime = require("react/jsx-runtime"); | ||
| var _excluded = ["prefixCls", "value", "min", "max", "dots", "step", "disabled", "progress", "tooltip", "className", "marks", "renderMarks", "vertical", "onChange"]; | ||
| function Slider(props) { | ||
| var _objectSpread2; | ||
| var _props$prefixCls = props.prefixCls, | ||
| prefixCls = _props$prefixCls === void 0 ? 'w-slider' : _props$prefixCls, | ||
| _props$value = props.value, | ||
| value = _props$value === void 0 ? 0 : _props$value, | ||
| _props$min = props.min, | ||
| min = _props$min === void 0 ? 0 : _props$min, | ||
| _props$max = props.max, | ||
| max = _props$max === void 0 ? 100 : _props$max, | ||
| _props$dots = props.dots, | ||
| dots = _props$dots === void 0 ? false : _props$dots, | ||
| _props$step = props.step, | ||
| step = _props$step === void 0 ? 1 : _props$step, | ||
| _props$disabled = props.disabled, | ||
| disabled = _props$disabled === void 0 ? false : _props$disabled, | ||
| _props$progress = props.progress, | ||
| progress = _props$progress === void 0 ? true : _props$progress, | ||
| _props$tooltip = props.tooltip, | ||
| tooltip = _props$tooltip === void 0 ? false : _props$tooltip, | ||
| className = props.className, | ||
| marks = props.marks, | ||
| renderMarks = props.renderMarks, | ||
| vertical = props.vertical, | ||
| onChange = props.onChange, | ||
| other = (0, _objectWithoutProperties2["default"])(props, _excluded); | ||
| prefixCls = _props$prefixCls === void 0 ? 'w-slider' : _props$prefixCls, | ||
| _props$value = props.value, | ||
| value = _props$value === void 0 ? 0 : _props$value, | ||
| _props$min = props.min, | ||
| min = _props$min === void 0 ? 0 : _props$min, | ||
| _props$max = props.max, | ||
| max = _props$max === void 0 ? 100 : _props$max, | ||
| _props$dots = props.dots, | ||
| dots = _props$dots === void 0 ? false : _props$dots, | ||
| _props$step = props.step, | ||
| step = _props$step === void 0 ? 1 : _props$step, | ||
| _props$disabled = props.disabled, | ||
| disabled = _props$disabled === void 0 ? false : _props$disabled, | ||
| _props$progress = props.progress, | ||
| progress = _props$progress === void 0 ? true : _props$progress, | ||
| _props$tooltip = props.tooltip, | ||
| tooltip = _props$tooltip === void 0 ? false : _props$tooltip, | ||
| className = props.className, | ||
| marks = props.marks, | ||
| renderMarks = props.renderMarks, | ||
| vertical = props.vertical, | ||
| onChange = props.onChange, | ||
| other = (0, _objectWithoutProperties2["default"])(props, _excluded); | ||
| var bar = _react["default"].useRef(null); | ||
| var slider = _react["default"].useRef(null); | ||
| var indexBar = _react["default"].useRef(); | ||
| var startX = _react["default"].useRef(); | ||
| var curValue = _react["default"].useRef(); | ||
| var barWidth = _react["default"].useRef(); | ||
| var barOffsetLeft = _react["default"].useRef(); | ||
| var move = _react["default"].useRef(); | ||
| var _useState = (0, _react.useState)(Array.isArray(value) ? value : [value]), | ||
| _useState2 = (0, _slicedToArray2["default"])(_useState, 2), | ||
| arrValue = _useState2[0], | ||
| setArrValue = _useState2[1]; | ||
| _useState2 = (0, _slicedToArray2["default"])(_useState, 2), | ||
| arrValue = _useState2[0], | ||
| setArrValue = _useState2[1]; | ||
| (0, _react.useEffect)(function () { | ||
| return setArrValue(Array.isArray(value) ? value : [value]); | ||
| }, [value]); | ||
| other.onClick = function (evn) { | ||
@@ -106,3 +79,2 @@ if (move.current !== undefined) { | ||
| } | ||
| var markOffset = slider.current.getBoundingClientRect(); | ||
@@ -113,3 +85,2 @@ var vals = getWidthToValue(evn[vertical ? 'clientY' : 'clientX'] - markOffset[vertical ? 'y' : 'x']); | ||
| }; | ||
| function getRangeValue(val) { | ||
@@ -119,22 +90,16 @@ if (!Array.isArray(value)) { | ||
| } | ||
| var newData = (0, _toConsumableArray2["default"])(arrValue); | ||
| var val1 = newData[0]; | ||
| var val2 = newData[1]; | ||
| if (val1 < val2 && val1 > val || val1 > val2 && val1 < val) { | ||
| newData[0] = val; | ||
| } | ||
| if (val1 < val2 && val2 < val || val1 > val2 && val2 > val) { | ||
| newData[1] = val; | ||
| } | ||
| if (val1 > val && val2 < val) { | ||
| var half = val2 + (val1 - val2) / 2; | ||
| if (half >= val) { | ||
| newData[1] = val; | ||
| } | ||
| if (half < val) { | ||
@@ -144,10 +109,7 @@ newData[0] = val; | ||
| } | ||
| if (val2 > val && val1 < val) { | ||
| var _half = val1 + (val2 - val1) / 2; | ||
| if (_half >= val) { | ||
| newData[0] = val; | ||
| } | ||
| if (_half < val) { | ||
@@ -157,6 +119,4 @@ newData[1] = val; | ||
| } | ||
| return newData; | ||
| } | ||
| function handleChange(val) { | ||
@@ -166,19 +126,14 @@ setArrValue((0, _toConsumableArray2["default"])(val)); | ||
| } | ||
| function getWidthToValue(width) { | ||
| var equal = (max - min) / step; | ||
| var percent = 0; | ||
| if (slider.current) { | ||
| percent = width / slider.current[vertical ? 'clientHeight' : 'clientWidth'] * 100; | ||
| } | ||
| if (percent <= 0) { | ||
| percent = 0; | ||
| } | ||
| if (percent >= 100) { | ||
| percent = 100; | ||
| } | ||
| var num = equal * (percent / 100) + 0.5; | ||
@@ -189,3 +144,2 @@ var numFloor = Math.floor(num); | ||
| } | ||
| function onHandleBtnDown(idx, env) { | ||
@@ -195,7 +149,5 @@ if (disabled) { | ||
| } | ||
| indexBar.current = idx; | ||
| move.current = true; | ||
| startX.current = env[vertical ? 'clientY' : 'clientX']; | ||
| if (bar.current) { | ||
@@ -205,13 +157,9 @@ barWidth.current = bar.current[vertical ? 'clientHeight' : 'clientWidth']; | ||
| } | ||
| var vals = (0, _toConsumableArray2["default"])(arrValue); | ||
| if (Array.isArray(value)) { | ||
| barWidth.current = indexBar.current === 1 && vals[1] > vals[0] || indexBar.current !== 1 && vals[0] > vals[1] ? barWidth.current + barOffsetLeft.current : barOffsetLeft.current; | ||
| } | ||
| window.addEventListener('mousemove', onDragging); | ||
| window.addEventListener('mouseup', onDragEnd); | ||
| } | ||
| function onDragging(env) { | ||
@@ -221,11 +169,7 @@ if (!move.current) { | ||
| } | ||
| var vals = (0, _toConsumableArray2["default"])(arrValue); | ||
| var valueToWidth = getWidthToValue(env[vertical ? 'clientY' : 'clientX'] - startX.current + barWidth.current); | ||
| if (valueToWidth !== curValue.current) { | ||
| vals[indexBar.current] = valueToWidth; | ||
| var _barStyl = getStyle(vals); | ||
| if (bar.current) { | ||
@@ -235,3 +179,2 @@ bar.current.style[vertical ? 'top' : 'left'] = _barStyl.left; | ||
| } | ||
| handleChange(vals); | ||
@@ -241,3 +184,2 @@ curValue.current = valueToWidth; | ||
| } | ||
| function onDragEnd() { | ||
@@ -248,3 +190,2 @@ move.current = undefined; | ||
| } | ||
| var stepArray = function stepArray() { | ||
@@ -254,15 +195,11 @@ var equal = (max - min) / step; | ||
| var result = [0]; | ||
| for (var i = 1; i < equal; i += 1) { | ||
| result.push(i * stepWidth); | ||
| } | ||
| result.push(100); | ||
| return result; | ||
| }; | ||
| function getValueToPercent(vals) { | ||
| return (vals - min) * 100 / (max - min); | ||
| } | ||
| function getStyle(val) { | ||
@@ -274,3 +211,2 @@ val = val || arrValue; | ||
| }; | ||
| if (!Array.isArray(value)) { | ||
@@ -284,6 +220,4 @@ barStyl.right = "".concat(100 - getValueToPercent(val[0]), "%"); | ||
| } | ||
| return barStyl; | ||
| } | ||
| function getLabelValue(val) { | ||
@@ -297,12 +231,8 @@ if (marks && marks !== true && marks[val] && marks[val].label) { | ||
| } | ||
| return val; | ||
| } | ||
| var barStyl = getStyle(); | ||
| if (disabled) { | ||
| delete other.onClick; | ||
| } | ||
| return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.SliderStyleWarp, (0, _objectSpread3["default"])((0, _objectSpread3["default"])({ | ||
@@ -358,3 +288,2 @@ ref: slider, | ||
| var mark = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| if (!mark) { | ||
@@ -365,3 +294,2 @@ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { | ||
| } | ||
| var other = (0, _typeof2["default"])(mark) === 'object' ? mark : {}; | ||
@@ -368,0 +296,0 @@ delete other.label; |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"]; | ||
| var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"]; | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -11,13 +9,7 @@ value: true | ||
| exports.SliderStyleWarp = exports.SliderStyleTooltip = exports.SliderStyleTheme = exports.SliderStyleMark = exports.SliderStyleHandle = exports.SliderStyleDot = exports.SliderStyleBar = void 0; | ||
| var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); | ||
| var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral")); | ||
| var _styledComponents = _interopRequireWildcard(require("styled-components")); | ||
| var _utils = require("@uiw/utils"); | ||
| var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20; | ||
| var SliderStyleTheme = { | ||
@@ -41,3 +33,2 @@ fontSizeSmall: '12px', | ||
| exports.SliderStyleTheme = SliderStyleTheme; | ||
| var SliderStyleWarp = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n width: stretch;\n height: 4px;\n margin: 13px 7px;\n background-color: ", ";\n border-radius: 3px;\n position: relative;\n font-size: ", ";\n cursor: pointer;\n user-select: none;\n vertical-align: middle;\n ", "\n ", "\n ", "\n"])), function (props) { | ||
@@ -53,17 +44,13 @@ return (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, { | ||
| var _props$params; | ||
| return ((_props$params = props.params) === null || _props$params === void 0 ? void 0 : _props$params.disabled) && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n {\n & {\n cursor: not-allowed;\n }\n }\n "]))); | ||
| }, function (props) { | ||
| var _props$params2; | ||
| return ((_props$params2 = props.params) === null || _props$params2 === void 0 ? void 0 : _props$params2.marks) && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n & {\n margin-bottom: 24px;\n }\n "]))); | ||
| }, function (props) { | ||
| var _props$params3; | ||
| return ((_props$params3 = props.params) === null || _props$params3 === void 0 ? void 0 : _props$params3.vertical) && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n height: 100%;\n height: stretch;\n width: 4px;\n margin: 7px 13px;\n "]))); | ||
| }); // SliderStyleWarp.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| }); | ||
| // SliderStyleWarp.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| exports.SliderStyleWarp = SliderStyleWarp; | ||
| var SliderStyleBar = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n height: 4px;\n border-radius: 3px;\n background-color: ", ";\n position: absolute;\n ", "\n\n ", "\n"])), function (props) { | ||
@@ -75,16 +62,12 @@ return (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, { | ||
| var _props$params4; | ||
| return ((_props$params4 = props.params) === null || _props$params4 === void 0 ? void 0 : _props$params4.disabled) && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n & {\n background-color: #bdc2cc;\n }\n "]))); | ||
| }, function (props) { | ||
| var _props$params5; | ||
| return ((_props$params5 = props.params) === null || _props$params5 === void 0 ? void 0 : _props$params5.vertical) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n & {\n width: 4px;\n height: initial;\n }\n "]))); | ||
| }); // SliderStyleBar.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| }); | ||
| // SliderStyleBar.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| exports.SliderStyleBar = SliderStyleBar; | ||
| var SliderStyleHandle = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n left: 0%;\n width: 14px;\n height: 14px;\n position: absolute;\n z-index: 1;\n margin-top: -5px;\n transform: translateX(-50%);\n box-shadow: ", ";\n background-color: ", ";\n background-image: ", ";\n border-radius: 50%;\n transition: all 0.3;\n ", "\n ", "\n"])), function (props) { | ||
| var _props$params6; | ||
| return ((_props$params6 = props.params) === null || _props$params6 === void 0 ? void 0 : _props$params6.disabled) && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n & {\n background-color: ", ";\n box-shadow: ", ";\n }\n "])), function (props) { | ||
@@ -113,3 +96,2 @@ return (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, { | ||
| var _props$params7; | ||
| return ((_props$params7 = props.params) === null || _props$params7 === void 0 ? void 0 : _props$params7.disabled) && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n &:active {\n background-color: ", ";\n transition: all 0.3;\n box-shadow: ", ";\n }\n "])), function (props) { | ||
@@ -126,12 +108,9 @@ return (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, { | ||
| var _props$params8; | ||
| return ((_props$params8 = props.params) === null || _props$params8 === void 0 ? void 0 : _props$params8.vertical) && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n & {\n margin-left: 2px;\n }\n "]))); | ||
| }); // SliderStyleHandle.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| }); | ||
| // SliderStyleHandle.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| exports.SliderStyleHandle = SliderStyleHandle; | ||
| var SliderStyleTooltip = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n display: none;\n font-size: ", ";\n position: absolute;\n background-color: ", ";\n color: ", ";\n padding: 0px 4px;\n margin-top: -3px;\n border-radius: 3px;\n transform: translate(-50%, -100%);\n margin-left: 6px;\n ", "\n"])), function (props) { | ||
| var _props$params9; | ||
| return ((_props$params9 = props.params) === null || _props$params9 === void 0 ? void 0 : _props$params9.disabled) && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n ", ":hover &,\n ", ":focus &,\n ", ":active & {\n display: inline-block;\n }\n "])), SliderStyleHandle, SliderStyleHandle, SliderStyleHandle); | ||
@@ -152,9 +131,7 @@ }, function (props) { | ||
| var _props$params10; | ||
| return ((_props$params10 = props.params) === null || _props$params10 === void 0 ? void 0 : _props$params10.open) && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n && {\n display: inline-block;\n }\n "]))); | ||
| }); // SliderStyleTooltip.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| }); | ||
| // SliderStyleTooltip.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| exports.SliderStyleTooltip = SliderStyleTooltip; | ||
| var SliderStyleDot = _styledComponents["default"].div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n & > div {\n position: absolute;\n width: 4px;\n height: 4px;\n border-radius: 100%;\n background-color: ", ";\n box-shadow: ", ";\n top: 0px;\n transform: translateX(-50%);\n }\n ", "\n"])), function (props) { | ||
@@ -170,9 +147,7 @@ return (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, { | ||
| var _props$params11; | ||
| return ((_props$params11 = props.params) === null || _props$params11 === void 0 ? void 0 : _props$params11.vertical) && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n & > div {\n left: 2px;\n }\n "]))); | ||
| }); // SliderStyleDot.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| }); | ||
| // SliderStyleDot.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| exports.SliderStyleDot = SliderStyleDot; | ||
| var SliderStyleMark = _styledComponents["default"].div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["\n & > div {\n margin-bottom: -50%;\n margin-left: 3px;\n padding: 0 3px;\n position: absolute;\n display: inline-block;\n vertical-align: middle;\n text-align: center;\n cursor: pointer;\n transform: translate(-50%, 50%);\n color: ", ";\n }\n ", "\n ", "\n\n ", "\n"])), function (props) { | ||
@@ -184,16 +159,13 @@ return (0, _utils.getThemeVariantValue)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, { | ||
| var _props$params12; | ||
| return ((_props$params12 = props.params) === null || _props$params12 === void 0 ? void 0 : _props$params12.vertical) && (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["\n & > div {\n transform: translate(0, -50%);\n padding: 0;\n margin-left: 12px;\n margin-top: 2px;\n }\n "]))); | ||
| }, function (props) { | ||
| var _props$params13; | ||
| return ((_props$params13 = props.params) === null || _props$params13 === void 0 ? void 0 : _props$params13.noMarks) && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["\n & {\n display: none;\n }\n "]))); | ||
| }, function (props) { | ||
| var _props$params14; | ||
| return ((_props$params14 = props.params) === null || _props$params14 === void 0 ? void 0 : _props$params14.disabled) && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["\n & > div {\n cursor: not-allowed;\n }\n "]))); | ||
| }); // SliderStyleMark.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| }); | ||
| // SliderStyleMark.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| exports.SliderStyleMark = SliderStyleMark; | ||
| //# sourceMappingURL=index.js.map |
@@ -12,19 +12,18 @@ import _extends from "@babel/runtime/helpers/extends"; | ||
| var { | ||
| prefixCls = 'w-slider', | ||
| value = 0, | ||
| min = 0, | ||
| max = 100, | ||
| dots = false, | ||
| step = 1, | ||
| disabled = false, | ||
| progress = true, | ||
| tooltip = false, | ||
| className, | ||
| marks, | ||
| renderMarks, | ||
| vertical, | ||
| onChange | ||
| } = props, | ||
| other = _objectWithoutPropertiesLoose(props, _excluded); | ||
| prefixCls = 'w-slider', | ||
| value = 0, | ||
| min = 0, | ||
| max = 100, | ||
| dots = false, | ||
| step = 1, | ||
| disabled = false, | ||
| progress = true, | ||
| tooltip = false, | ||
| className, | ||
| marks, | ||
| renderMarks, | ||
| vertical, | ||
| onChange | ||
| } = props, | ||
| other = _objectWithoutPropertiesLoose(props, _excluded); | ||
| var bar = React.useRef(null); | ||
@@ -40,3 +39,2 @@ var slider = React.useRef(null); | ||
| useEffect(() => setArrValue(Array.isArray(value) ? value : [value]), [value]); | ||
| other.onClick = evn => { | ||
@@ -46,3 +44,2 @@ if (move.current !== undefined) { | ||
| } | ||
| var markOffset = slider.current.getBoundingClientRect(); | ||
@@ -53,3 +50,2 @@ var vals = getWidthToValue(evn[vertical ? 'clientY' : 'clientX'] - markOffset[vertical ? 'y' : 'x']); | ||
| }; | ||
| function getRangeValue(val) { | ||
@@ -59,22 +55,16 @@ if (!Array.isArray(value)) { | ||
| } | ||
| var newData = [...arrValue]; | ||
| var val1 = newData[0]; | ||
| var val2 = newData[1]; | ||
| if (val1 < val2 && val1 > val || val1 > val2 && val1 < val) { | ||
| newData[0] = val; | ||
| } | ||
| if (val1 < val2 && val2 < val || val1 > val2 && val2 > val) { | ||
| newData[1] = val; | ||
| } | ||
| if (val1 > val && val2 < val) { | ||
| var half = val2 + (val1 - val2) / 2; | ||
| if (half >= val) { | ||
| newData[1] = val; | ||
| } | ||
| if (half < val) { | ||
@@ -84,10 +74,7 @@ newData[0] = val; | ||
| } | ||
| if (val2 > val && val1 < val) { | ||
| var _half = val1 + (val2 - val1) / 2; | ||
| if (_half >= val) { | ||
| newData[0] = val; | ||
| } | ||
| if (_half < val) { | ||
@@ -97,6 +84,4 @@ newData[1] = val; | ||
| } | ||
| return newData; | ||
| } | ||
| function handleChange(val) { | ||
@@ -106,19 +91,14 @@ setArrValue([...val]); | ||
| } | ||
| function getWidthToValue(width) { | ||
| var equal = (max - min) / step; | ||
| var percent = 0; | ||
| if (slider.current) { | ||
| percent = width / slider.current[vertical ? 'clientHeight' : 'clientWidth'] * 100; | ||
| } | ||
| if (percent <= 0) { | ||
| percent = 0; | ||
| } | ||
| if (percent >= 100) { | ||
| percent = 100; | ||
| } | ||
| var num = equal * (percent / 100) + 0.5; | ||
@@ -129,3 +109,2 @@ var numFloor = Math.floor(num); | ||
| } | ||
| function onHandleBtnDown(idx, env) { | ||
@@ -135,7 +114,5 @@ if (disabled) { | ||
| } | ||
| indexBar.current = idx; | ||
| move.current = true; | ||
| startX.current = env[vertical ? 'clientY' : 'clientX']; | ||
| if (bar.current) { | ||
@@ -145,13 +122,9 @@ barWidth.current = bar.current[vertical ? 'clientHeight' : 'clientWidth']; | ||
| } | ||
| var vals = [...arrValue]; | ||
| if (Array.isArray(value)) { | ||
| barWidth.current = indexBar.current === 1 && vals[1] > vals[0] || indexBar.current !== 1 && vals[0] > vals[1] ? barWidth.current + barOffsetLeft.current : barOffsetLeft.current; | ||
| } | ||
| window.addEventListener('mousemove', onDragging); | ||
| window.addEventListener('mouseup', onDragEnd); | ||
| } | ||
| function onDragging(env) { | ||
@@ -161,11 +134,7 @@ if (!move.current) { | ||
| } | ||
| var vals = [...arrValue]; | ||
| var valueToWidth = getWidthToValue(env[vertical ? 'clientY' : 'clientX'] - startX.current + barWidth.current); | ||
| if (valueToWidth !== curValue.current) { | ||
| vals[indexBar.current] = valueToWidth; | ||
| var _barStyl = getStyle(vals); | ||
| if (bar.current) { | ||
@@ -175,3 +144,2 @@ bar.current.style[vertical ? 'top' : 'left'] = _barStyl.left; | ||
| } | ||
| handleChange(vals); | ||
@@ -181,3 +149,2 @@ curValue.current = valueToWidth; | ||
| } | ||
| function onDragEnd() { | ||
@@ -188,3 +155,2 @@ move.current = undefined; | ||
| } | ||
| var stepArray = () => { | ||
@@ -194,15 +160,11 @@ var equal = (max - min) / step; | ||
| var result = [0]; | ||
| for (var i = 1; i < equal; i += 1) { | ||
| result.push(i * stepWidth); | ||
| } | ||
| result.push(100); | ||
| return result; | ||
| }; | ||
| function getValueToPercent(vals) { | ||
| return (vals - min) * 100 / (max - min); | ||
| } | ||
| function getStyle(val) { | ||
@@ -214,3 +176,2 @@ val = val || arrValue; | ||
| }; | ||
| if (!Array.isArray(value)) { | ||
@@ -224,6 +185,4 @@ barStyl.right = 100 - getValueToPercent(val[0]) + "%"; | ||
| } | ||
| return barStyl; | ||
| } | ||
| function getLabelValue(val) { | ||
@@ -237,12 +196,8 @@ if (marks && marks !== true && marks[val] && marks[val].label) { | ||
| } | ||
| return val; | ||
| } | ||
| var barStyl = getStyle(); | ||
| if (disabled) { | ||
| delete other.onClick; | ||
| } | ||
| return /*#__PURE__*/_jsxs(SliderStyleWarp, _extends({ | ||
@@ -303,3 +258,2 @@ ref: slider, | ||
| } | ||
| if (!mark) { | ||
@@ -310,3 +264,2 @@ return /*#__PURE__*/_jsxs("div", { | ||
| } | ||
| var other = typeof mark === 'object' ? mark : {}; | ||
@@ -313,0 +266,0 @@ delete other.label; |
| import _extends from "@babel/runtime/helpers/extends"; | ||
| import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose"; | ||
| var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20; | ||
| import styled, { css } from 'styled-components'; | ||
@@ -31,14 +29,13 @@ import { getThemeVariantValue } from '@uiw/utils'; | ||
| var _props$params; | ||
| return ((_props$params = props.params) == null ? void 0 : _props$params.disabled) && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n {\n & {\n cursor: not-allowed;\n }\n }\n "]))); | ||
| }, props => { | ||
| var _props$params2; | ||
| return ((_props$params2 = props.params) == null ? void 0 : _props$params2.marks) && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n & {\n margin-bottom: 24px;\n }\n "]))); | ||
| }, props => { | ||
| var _props$params3; | ||
| return ((_props$params3 = props.params) == null ? void 0 : _props$params3.vertical) && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n height: 100%;\n height: stretch;\n width: 4px;\n margin: 7px 13px;\n "]))); | ||
| }); // SliderStyleWarp.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| }); | ||
| // SliderStyleWarp.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| export var SliderStyleBar = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n height: 4px;\n border-radius: 3px;\n background-color: ", ";\n position: absolute;\n ", "\n\n ", "\n"])), props => getThemeVariantValue(_extends({}, props, { | ||
@@ -48,13 +45,12 @@ defaultTheme: SliderStyleTheme | ||
| var _props$params4; | ||
| return ((_props$params4 = props.params) == null ? void 0 : _props$params4.disabled) && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n & {\n background-color: #bdc2cc;\n }\n "]))); | ||
| }, props => { | ||
| var _props$params5; | ||
| return ((_props$params5 = props.params) == null ? void 0 : _props$params5.vertical) && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n & {\n width: 4px;\n height: initial;\n }\n "]))); | ||
| }); // SliderStyleBar.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| }); | ||
| // SliderStyleBar.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| export var SliderStyleHandle = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n ", "\n left: 0%;\n width: 14px;\n height: 14px;\n position: absolute;\n z-index: 1;\n margin-top: -5px;\n transform: translateX(-50%);\n box-shadow: ", ";\n background-color: ", ";\n background-image: ", ";\n border-radius: 50%;\n transition: all 0.3;\n ", "\n ", "\n"])), props => { | ||
| var _props$params6; | ||
| return ((_props$params6 = props.params) == null ? void 0 : _props$params6.disabled) && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n & {\n background-color: ", ";\n box-shadow: ", ";\n }\n "])), props => getThemeVariantValue(_extends({}, props, { | ||
@@ -73,3 +69,2 @@ defaultTheme: SliderStyleTheme | ||
| var _props$params7; | ||
| return ((_props$params7 = props.params) == null ? void 0 : _props$params7.disabled) && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n &:active {\n background-color: ", ";\n transition: all 0.3;\n box-shadow: ", ";\n }\n "])), props => getThemeVariantValue(_extends({}, props, { | ||
@@ -82,9 +77,9 @@ defaultTheme: SliderStyleTheme | ||
| var _props$params8; | ||
| return ((_props$params8 = props.params) == null ? void 0 : _props$params8.vertical) && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n & {\n margin-left: 2px;\n }\n "]))); | ||
| }); // SliderStyleHandle.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| }); | ||
| // SliderStyleHandle.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| export var SliderStyleTooltip = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n ", "\n display: none;\n font-size: ", ";\n position: absolute;\n background-color: ", ";\n color: ", ";\n padding: 0px 4px;\n margin-top: -3px;\n border-radius: 3px;\n transform: translate(-50%, -100%);\n margin-left: 6px;\n ", "\n"])), props => { | ||
| var _props$params9; | ||
| return ((_props$params9 = props.params) == null ? void 0 : _props$params9.disabled) && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n ", ":hover &,\n ", ":focus &,\n ", ":active & {\n display: inline-block;\n }\n "])), SliderStyleHandle, SliderStyleHandle, SliderStyleHandle); | ||
@@ -99,6 +94,7 @@ }, props => getThemeVariantValue(_extends({}, props, { | ||
| var _props$params10; | ||
| return ((_props$params10 = props.params) == null ? void 0 : _props$params10.open) && css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n && {\n display: inline-block;\n }\n "]))); | ||
| }); // SliderStyleTooltip.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| }); | ||
| // SliderStyleTooltip.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| export var SliderStyleDot = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n & > div {\n position: absolute;\n width: 4px;\n height: 4px;\n border-radius: 100%;\n background-color: ", ";\n box-shadow: ", ";\n top: 0px;\n transform: translateX(-50%);\n }\n ", "\n"])), props => getThemeVariantValue(_extends({}, props, { | ||
@@ -110,6 +106,7 @@ defaultTheme: SliderStyleTheme | ||
| var _props$params11; | ||
| return ((_props$params11 = props.params) == null ? void 0 : _props$params11.vertical) && css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n & > div {\n left: 2px;\n }\n "]))); | ||
| }); // SliderStyleDot.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| }); | ||
| // SliderStyleDot.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| export var SliderStyleMark = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n & > div {\n margin-bottom: -50%;\n margin-left: 3px;\n padding: 0 3px;\n position: absolute;\n display: inline-block;\n vertical-align: middle;\n text-align: center;\n cursor: pointer;\n transform: translate(-50%, 50%);\n color: ", ";\n }\n ", "\n ", "\n\n ", "\n"])), props => getThemeVariantValue(_extends({}, props, { | ||
@@ -119,13 +116,12 @@ defaultTheme: SliderStyleTheme | ||
| var _props$params12; | ||
| return ((_props$params12 = props.params) == null ? void 0 : _props$params12.vertical) && css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n & > div {\n transform: translate(0, -50%);\n padding: 0;\n margin-left: 12px;\n margin-top: 2px;\n }\n "]))); | ||
| }, props => { | ||
| var _props$params13; | ||
| return ((_props$params13 = props.params) == null ? void 0 : _props$params13.noMarks) && css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n & {\n display: none;\n }\n "]))); | ||
| }, props => { | ||
| var _props$params14; | ||
| return ((_props$params14 = props.params) == null ? void 0 : _props$params14.disabled) && css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n & > div {\n cursor: not-allowed;\n }\n "]))); | ||
| }); | ||
| return ((_props$params14 = props.params) == null ? void 0 : _props$params14.disabled) && css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n & > div {\n cursor: not-allowed;\n }\n "]))); | ||
| }); // SliderStyleMark.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| // SliderStyleMark.defaultProps = { defaultTheme: SliderStyleTheme }; | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "@uiw/react-slider", | ||
| "version": "5.0.0-bate-5", | ||
| "version": "5.0.0-bate-6", | ||
| "description": "Slider component", | ||
@@ -48,4 +48,4 @@ "author": "Kenny Wong <wowohoo@qq.com>", | ||
| "dependencies": { | ||
| "@uiw/utils": "^5.0.0-bate-5" | ||
| "@uiw/utils": "^5.0.0-bate-6" | ||
| } | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
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
Fixed alerts
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
Improved metrics
- Lines of code
- increased by0.72%
1683
Worsened metrics
- Total package byte prevSize
- decreased by-0.51%
157384
Dependency changes
Updated@uiw/utils@^5.0.0-bate-6