@bytedance/mona-client-web
Version:
web for mona
119 lines • 6.46 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { useCallback, useEffect, useRef, useState } from 'react';
import styles from './index.module.less';
import { useHandlers } from '../hooks';
import { useFormContext } from '../Form/hooks';
function formatValue(value, min, max, step) {
var targetValue = value < min ? min : value > max ? max : value;
var remainder = (targetValue - min) % step;
if (remainder >= step / 2) {
targetValue = targetValue - remainder + step;
}
else {
targetValue = targetValue - remainder;
}
var decimalLength = (String(step).split('.')[1] || '').length;
return Number(Number(targetValue).toFixed(decimalLength));
}
function formatSize(value) {
return value < 12 ? 12 : value > 28 ? 28 : value;
}
function getPercent(value, min, max) {
return (value - min) / (max - min) * 100;
}
var Slider = function (props) {
var children = props.children, _a = props.min, min = _a === void 0 ? 0 : _a, _b = props.max, max = _b === void 0 ? 100 : _b, _c = props.step, step = _c === void 0 ? 1 : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, _e = props.value, value = _e === void 0 ? 0 : _e, _f = props.color, color = _f === void 0 ? '#e9e9e9' : _f, _g = props.selectedColor, selectedColor = _g === void 0 ? '#1aad19' : _g, _h = props.activeColor, activeColor = _h === void 0 ? '#1aad19' : _h, _j = props.backgroundColor, backgroundColor = _j === void 0 ? '#e9e9e9' : _j, _k = props.blockSize, blockSize = _k === void 0 ? 28 : _k, _l = props.name, name = _l === void 0 ? '' : _l, _m = props.blockColor, blockColor = _m === void 0 ? '#ffffff' : _m, _o = props.showValue, showValue = _o === void 0 ? false : _o, onChange = props.onChange, onChanging = props.onChanging, restProps = __rest(props, ["children", "min", "max", "step", "disabled", "value", "color", "selectedColor", "activeColor", "backgroundColor", "blockSize", "name", "blockColor", "showValue", "onChange", "onChanging"]);
var _p = useState(formatValue(value, min, max, step)), v = _p[0], setV = _p[1];
var thumbRef = useRef(null);
useEffect(function () {
setV(formatValue(value, min, max, step));
}, [value, min, max, step]);
var reset = useCallback(function () { return setV(min); }, []);
useFormContext(name, value, reset);
var size = formatSize(blockSize);
var _q = useHandlers(restProps), handleClassName = _q.handleClassName, handlerProps = __rest(_q, ["handleClassName"]);
var handleClick = function (e) {
var target = e.currentTarget;
var left = target.getBoundingClientRect().left;
var width = target.clientWidth;
var gapWidth = e.clientX - left;
var ratio = gapWidth / width;
var newValue = (max - min) * ratio + min;
setV(formatValue(newValue, min, max, step));
};
var percent = getPercent(v, min, max);
var validTouchDistanceRef = useRef(30);
var wrapperRef = useRef(null);
useEffect(function () {
if (wrapperRef.current) {
var width = wrapperRef.current.offsetWidth;
var result = width / (max - min) * step;
var d = validTouchDistanceRef.current;
validTouchDistanceRef.current = d < result ? d : result;
}
}, [wrapperRef.current, max, min, step]);
var startThumbRef = useRef(null);
var handleTouchStart = function (e) {
if (e.target === thumbRef.current) {
var changedTouches = e.changedTouches;
startThumbRef.current = {
x: changedTouches[0].clientX,
};
}
};
var handleTouchMove = function (e) {
// console.log('move');
if (!startThumbRef.current) {
return;
}
var changedTouches = e.changedTouches;
var moveX = changedTouches[0].pageX;
var x = startThumbRef.current.x;
var dx = moveX - x;
var abs = Math.abs(dx);
var dv = validTouchDistanceRef.current;
if (abs >= dv) {
startThumbRef.current = {
x: moveX
};
var pos = dx / abs;
var newValue = v + pos * step * (abs / dv);
setV(formatValue(newValue, min, max, step));
}
};
var handleTouchEnd = function () {
startThumbRef.current = null;
};
return (React.createElement("div", __assign({ className: handleClassName(styles.slider) }, handlerProps),
React.createElement("div", { className: styles.wrapper },
React.createElement("div", { className: styles.tapArea },
React.createElement("div", { className: styles.handleWrapper, ref: wrapperRef, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onClick: handleClick, style: { backgroundColor: backgroundColor || color } },
React.createElement("div", { className: styles.sliderHandle, ref: thumbRef, style: { left: "".concat(percent, "%") } }),
React.createElement("div", { className: styles.sliderThumb, style: { width: size, height: size, marginLeft: -size / 2, marginTop: -size / 2, left: "".concat(percent, "%"), backgroundColor: blockColor } }),
React.createElement("div", { className: styles.sliderTrack, style: { width: "".concat(percent, "%"), backgroundColor: activeColor || selectedColor } }),
React.createElement("div", { className: styles.sliderStep }))),
showValue ? React.createElement("span", { className: styles.sliderValue }, v) : null)));
};
export default Slider;
//# sourceMappingURL=index.js.map