@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
569 lines (568 loc) • 24.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Range", {
enumerable: true,
get: function() {
return Range;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _ts_generator = require("@swc/helpers/_/_ts_generator");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _components = require("@tarojs/components");
var _taro = require("@tarojs/taro");
var _pxtransform = require("../../utils/taro/px-transform");
var _usetouch = require("../../hooks/use-touch");
var _typings = require("../../utils/typings");
var _usepropsvalue = require("../../hooks/use-props-value");
var _getrect = require("../../utils/taro/get-rect");
var _index = require("../configprovider/index");
var _platform = require("../../utils/taro/platform");
var _mergeprops = require("../../utils/merge-props");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
range: false,
min: 0,
max: 100,
step: 1,
vertical: false,
marks: {}
});
var isHm = (0, _platform.harmony)();
var classPrefix = 'nut-range';
var verticalClassPrefix = "".concat(classPrefix, "-vertical");
var isSameValue = function isSameValue(newValue, oldValue) {
return JSON.stringify(newValue) === JSON.stringify(oldValue);
};
var handleOverlap = function handleOverlap(value) {
return value[0] > value[1] ? value.slice(0).reverse() : value;
};
var Range = function Range(props) {
var rtl = (0, _index.useRtl)();
var _mergeProps = (0, _mergeprops.mergeProps)(defaultProps, props), className = _mergeProps.className, style = _mergeProps.style, range = _mergeProps.range, disabled = _mergeProps.disabled, button = _mergeProps.button, vertical = _mergeProps.vertical, marks = _mergeProps.marks, minDescription = _mergeProps.minDescription, maxDescription = _mergeProps.maxDescription, currentDescription = _mergeProps.currentDescription, min = _mergeProps.min, max = _mergeProps.max, step = _mergeProps.step, value = _mergeProps.value, defaultValue = _mergeProps.defaultValue, onChange = _mergeProps.onChange, onStart = _mergeProps.onStart, onEnd = _mergeProps.onEnd;
var rtlClassPrefix = (0, _react.useMemo)(function() {
return "rtl-".concat(vertical ? verticalClassPrefix : classPrefix);
}, [
vertical
]);
var buttonRef = (0, _react.useRef)(0);
var dragStatusRef = (0, _react.useRef)('start');
var touch = (0, _usetouch.useTouch)();
var root = (0, _react.useRef)(null);
var rootRect = (0, _react.useRef)(null);
var _useState = (0, _sliced_to_array._)((0, _react.useState)([]), 2), marksList = _useState[0], setMarksList = _useState[1];
var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), startValue = _useState1[0], setStartValue = _useState1[1];
var scope = (0, _react.useMemo)(function() {
if (max < min || max === min) {
console.log('max 的值需要大于 min的值');
}
return max - min;
}, [
max,
min
]);
var handleChange = function handleChange(value) {
onChange && onChange(value);
};
var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
value: value,
defaultValue: defaultValue,
finalValue: 0,
onChange: handleChange
}), 2), innerValue = _usePropsValue[0], setInnerValue = _usePropsValue[1];
var exactValueRef = (0, _react.useRef)(value || defaultValue || 0);
var marksRef = (0, _react.useRef)({});
(0, _react.useEffect)(function() {
if (marks) {
if (Array.isArray(marks)) {
var list = marks.sort(function(a, b) {
return a.value - b.value;
}).filter(function(point) {
return point.value >= min && point.value <= max;
});
setMarksList(list.map(function(mark) {
return mark.value;
}));
list.forEach(function(mark) {
marksRef.current[mark.value] = mark.label !== undefined ? mark.label : mark.value;
});
} else {
var marksKeys = Object.keys(marks);
var list1 = marksKeys.map(parseFloat).sort(function(a, b) {
return a - b;
}).filter(function(point) {
return point >= min && point <= max;
});
setMarksList(list1);
}
}
}, [
marks,
max,
min
]);
var _obj;
var classes = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-disabled"), disabled), (0, _define_property._)(_obj, verticalClassPrefix, vertical), (0, _define_property._)(_obj, "".concat(classPrefix, "-native"), isHm), _obj));
var _obj1;
var containerClasses = (0, _classnames.default)("".concat(classPrefix, "-container"), (_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-container-native"), isHm), (0, _define_property._)(_obj1, "".concat(verticalClassPrefix, "-container"), vertical), _obj1), className);
var markClassName = (0, _react.useCallback)(function(mark) {
var classPrefix = 'nut-range-mark';
var verticalClassPrefix = 'nut-range-vertical-mark';
var lowerBound = min;
var upperBound = max;
if (range && Array.isArray(innerValue)) {
lowerBound = innerValue[0];
upperBound = innerValue[1];
} else {
upperBound = innerValue;
}
var isActive = mark <= upperBound && mark >= lowerBound;
var _$classNames = [
"".concat(classPrefix, "-text-wrapper"),
"".concat(isActive ? "".concat(classPrefix, "-text-wrapper-active") : '')
];
if (vertical) {
_$classNames.push("".concat(verticalClassPrefix, "-text-wrapper"));
isActive && _$classNames.push("".concat(verticalClassPrefix, "-text-wrapper-active"));
}
if (rtl) {
_$classNames.push("".concat(rtlClassPrefix, "-mark-text-wrapper"));
}
return _$classNames.join(' ');
}, [
min,
max,
range,
innerValue,
vertical,
rtl,
rtlClassPrefix
]);
var isRange = (0, _react.useCallback)(function(val) {
return !!range && Array.isArray(val);
}, [
range
]);
var calcMainAxis = (0, _react.useMemo)(function() {
var modelVal = innerValue;
return isRange(modelVal) ? "".concat((modelVal[1] - modelVal[0]) * 100 / scope, "%") : "".concat((modelVal - min) * 100 / scope, "%");
}, [
innerValue,
isRange,
min,
scope
]);
var calcOffset = (0, _react.useMemo)(function() {
var modelVal = innerValue;
return isRange(modelVal) ? "".concat((modelVal[0] - min) * 100 / scope, "%") : '0%';
}, [
innerValue,
isRange,
min,
scope
]);
var barStyle = (0, _react.useMemo)(function() {
if (vertical) {
return {
height: calcMainAxis,
top: calcOffset,
transition: dragStatusRef.current ? 'none' : undefined
};
}
var dir = rtl ? 'right' : 'left';
var _obj;
return _obj = {
width: calcMainAxis
}, (0, _define_property._)(_obj, dir, calcOffset), (0, _define_property._)(_obj, "transition", dragStatusRef.current ? 'none' : undefined), _obj;
}, [
calcMainAxis,
calcOffset,
rtl,
vertical
]);
var marksStyle = (0, _react.useCallback)(function(mark) {
var dir = rtl ? 'right' : 'left';
var style = (0, _define_property._)({}, dir, "".concat((mark - min) / scope * 100, "%"));
if (vertical) {
style = {
top: "".concat((mark - min) / scope * 100, "%")
};
}
return style;
}, [
min,
rtl,
scope,
vertical
]);
var tickClass = (0, _react.useCallback)(function(mark) {
if (range && Array.isArray(innerValue)) {
return mark <= innerValue[1] && mark >= innerValue[0];
}
return mark <= innerValue;
}, [
innerValue,
range
]);
var format = (0, _react.useCallback)(function(value) {
value = Math.max(+min, Math.min(value, +max));
return Math.round(value / +step) * +step;
}, [
max,
min,
step
]);
var updateValue = (0, _react.useCallback)(function(value, end) {
if (isRange(value)) {
value = handleOverlap(value).map(format);
} else {
value = format(value);
}
if (!isSameValue(value, innerValue)) {
setInnerValue(value);
}
end && onEnd && onEnd(value);
}, [
innerValue,
format,
isRange,
onEnd,
setInnerValue
]);
var handleClick = (0, _react.useCallback)(function(event) {
return (0, _async_to_generator._)(function() {
var _event_detail, rect, _event_detail_x, x, delta, total, _event_detail1, _event_detail_y, y, value, _innerValue, left, right, middle;
return (0, _ts_generator._)(this, function(_state) {
switch(_state.label){
case 0:
if (disabled || !root.current) return [
2
];
// TODO 鸿蒙获取clientX的数据有误，windowX 也变成了 undefined。暂不支持，待上游支持。
if (isHm) return [
2
];
dragStatusRef.current = '';
return [
4,
(0, _getrect.getRectInMultiPlatform)(root.current)
];
case 1:
rect = _state.sent();
x = (_event_detail_x = (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.x) !== null && _event_detail_x !== void 0 ? _event_detail_x : event.clientX;
if (isHm) x = parseFloat((0, _pxtransform.pxTransform)(event.windowX || x));
delta = x - rect.left;
total = rect.width;
if (vertical) {
;
;
y = (_event_detail_y = (_event_detail1 = event.detail) === null || _event_detail1 === void 0 ? void 0 : _event_detail1.y) !== null && _event_detail_y !== void 0 ? _event_detail_y : event.clientY;
if (isHm) y = parseFloat((0, _pxtransform.pxTransform)(event.windowY || y));
delta = y - rect.top;
total = rect.height;
}
value = min + delta / total * scope;
exactValueRef.current = innerValue;
if (isRange(innerValue)) {
_innerValue = (0, _sliced_to_array._)(innerValue, 2), left = _innerValue[0], right = _innerValue[1];
middle = (left + right) / 2;
if (value <= middle) {
updateValue([
value,
right
], true);
} else {
updateValue([
left,
value
], true);
}
} else {
updateValue(value, true);
}
return [
2
];
}
});
})();
}, [
innerValue,
disabled,
isRange,
min,
scope,
updateValue,
vertical
]);
(0, _taro.useReady)(function() {
var getRootRect = function getRootRect() {
return (0, _async_to_generator._)(function() {
var rect;
return (0, _ts_generator._)(this, function(_state) {
switch(_state.label){
case 0:
if (!root.current) return [
3,
2
];
return [
4,
(0, _getrect.getRectInMultiPlatform)(root.current)
];
case 1:
rect = _state.sent();
rootRect.current = rect;
_state.label = 2;
case 2:
return [
2
];
}
});
})();
};
(0, _taro.nextTick)(function() {
getRootRect();
});
});
var onTouchStart = (0, _react.useCallback)(function(event) {
if (disabled) return;
touch.start(event);
exactValueRef.current = innerValue;
if (isRange(innerValue)) {
setStartValue(innerValue.map(format));
} else {
setStartValue(format(innerValue));
}
dragStatusRef.current = 'start';
}, [
innerValue,
disabled,
format,
isRange,
touch
]);
var onTouchMove = (0, _react.useCallback)(function(event) {
return (0, _async_to_generator._)(function() {
var handleMove;
return (0, _ts_generator._)(this, function(_state) {
// @TODO RN、鸿蒙端垂直滑动时，页面会一同滑动，待解决
if (disabled || !root.current) return [
2
];
if (dragStatusRef.current === 'start') {
onStart && onStart();
dragStatusRef.current = 'draging';
}
touch.move(event);
handleMove = function handleMove() {
return (0, _async_to_generator._)(function() {
var delta, total, diff, newValue;
return (0, _ts_generator._)(this, function(_state) {
if (!rootRect.current) return [
2
];
delta = isHm ? parseFloat((0, _pxtransform.pxTransform)(touch.deltaX.current)) : touch.deltaX.current;
total = rootRect.current.width;
diff = delta / total * scope;
diff = rtl ? -diff : diff;
if (vertical) {
delta = isHm ? parseFloat((0, _pxtransform.pxTransform)(touch.deltaY.current)) : touch.deltaY.current;
total = rootRect.current.height;
diff = delta / total * scope;
}
newValue = startValue + diff;
if (isRange(startValue)) {
newValue = exactValueRef.current.slice();
newValue[buttonRef.current] = startValue[buttonRef.current] + diff;
}
exactValueRef.current = newValue;
updateValue(newValue);
return [
2
];
});
})();
};
requestAnimationFrame(handleMove);
return [
2
];
});
})();
}, [
disabled,
isRange,
onStart,
rtl,
scope,
startValue,
touch,
updateValue,
vertical
]);
var onTouchEnd = (0, _react.useCallback)(function() {
if (disabled) return;
if (dragStatusRef.current === 'draging') {
updateValue(innerValue, true);
}
dragStatusRef.current = '';
}, [
innerValue,
disabled,
updateValue
]);
var curValue = (0, _react.useCallback)(function(idx) {
var modelVal = innerValue;
var value = typeof idx === 'number' ? modelVal[idx] : modelVal;
return value;
}, [
innerValue
]);
var buttonNumberTransform = (0, _react.useMemo)(function() {
return vertical ? 'translate(100%, -50%)' : 'translate(-50%, -100%)';
}, [
vertical
]);
var renderButton = (0, _react.useCallback)(function(index) {
var _obj, _obj1;
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, button || /*#__PURE__*/ _react.default.createElement(_components.View, {
className: (0, _classnames.default)("".concat(classPrefix, "-button"), (_obj = {}, (0, _define_property._)(_obj, "".concat(verticalClassPrefix, "-button"), vertical), (0, _define_property._)(_obj, "".concat(rtlClassPrefix, "-button"), rtl), _obj)),
style: {
transform: 'translate(-50%, -50%)'
}
}, currentDescription !== null && /*#__PURE__*/ _react.default.createElement(_components.Text, {
className: (0, _classnames.default)("".concat(classPrefix, "-button-number"), (_obj1 = {}, (0, _define_property._)(_obj1, "".concat(verticalClassPrefix, "-button-number"), vertical), (0, _define_property._)(_obj1, "".concat(rtlClassPrefix, "-button-number"), rtl), _obj1)),
style: {
transform: buttonNumberTransform
}
}, currentDescription ? currentDescription(curValue(index)) : curValue(index))));
}, [
button,
buttonNumberTransform,
curValue,
currentDescription,
rtl,
rtlClassPrefix,
vertical
]);
var renderMarks = (0, _react.useCallback)(function() {
if (marksList.length <= 0) return null;
var _obj;
var markcls = (0, _classnames.default)("".concat(classPrefix, "-mark"), (_obj = {}, (0, _define_property._)(_obj, "".concat(verticalClassPrefix, "-mark"), vertical), (0, _define_property._)(_obj, "".concat(rtlClassPrefix, "-mark"), rtl), (0, _define_property._)(_obj, "".concat(vertical ? verticalClassPrefix : classPrefix, "-mark-hm"), isHm), _obj));
var textcls = (0, _classnames.default)("".concat(classPrefix, "-mark-text"), (0, _define_property._)({}, "".concat(verticalClassPrefix, "-mark-text"), vertical));
return /*#__PURE__*/ _react.default.createElement(_components.View, {
className: markcls
}, marksList.map(function(mark) {
var _obj;
return /*#__PURE__*/ _react.default.createElement(_components.View, {
key: mark,
className: markClassName(mark),
style: marksStyle(mark)
}, /*#__PURE__*/ _react.default.createElement(_components.Text, {
className: textcls
}, Array.isArray(marks) ? marksRef.current[mark] : marks[mark]), /*#__PURE__*/ _react.default.createElement(_components.View, {
className: (0, _classnames.default)("".concat(vertical ? verticalClassPrefix : classPrefix, "-tick"), (_obj = {}, (0, _define_property._)(_obj, "".concat(vertical ? verticalClassPrefix : classPrefix, "-tick-active"), tickClass(mark)), (0, _define_property._)(_obj, "".concat(rtlClassPrefix, "-tick"), rtl), _obj))
}));
}));
}, [
markClassName,
marks,
marksList,
marksStyle,
rtl,
rtlClassPrefix,
tickClass,
vertical
]);
var renderRangeButton = (0, _react.useCallback)(function() {
return [
0,
1
].map(function(_, index) {
var suffix = index === 0 ? 'left' : 'right';
var _obj;
var cls = (0, _classnames.default)("".concat(classPrefix, "-button-wrapper-").concat(suffix), (_obj = {}, (0, _define_property._)(_obj, "".concat(verticalClassPrefix, "-button-wrapper-").concat(suffix), vertical), (0, _define_property._)(_obj, "".concat(rtlClassPrefix, "-button-wrapper-").concat(suffix), rtl), _obj));
return /*#__PURE__*/ _react.default.createElement(_components.View, {
key: index,
className: cls,
style: {
transform: 'translate(-50%, -50%)'
},
onTouchStart: function onTouchStart1(e) {
buttonRef.current = index;
onTouchStart(e);
},
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd,
onTouchCancel: onTouchEnd,
onClick: function onClick(e) {
return e.stopPropagation();
}
}, renderButton(index));
});
}, [
onTouchEnd,
onTouchMove,
onTouchStart,
renderButton,
vertical,
rtl,
rtlClassPrefix
]);
var renderSingleButton = (0, _react.useCallback)(function() {
return /*#__PURE__*/ _react.default.createElement(_components.View, {
catchMove: true,
className: (0, _classnames.default)("".concat(classPrefix, "-button-wrapper"), (0, _define_property._)({}, "".concat(verticalClassPrefix, "-button-wrapper"), vertical)),
style: {
transform: 'translate(-50%, -50%)'
},
onTouchStart: onTouchStart,
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd,
onTouchCancel: onTouchEnd,
onClick: function onClick(e) {
return e.stopPropagation();
}
}, renderButton());
}, [
onTouchEnd,
onTouchMove,
onTouchStart,
renderButton,
vertical
]);
var renderButtonWrapper = (0, _react.useCallback)(function() {
return /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "".concat(classPrefix, "-bar ").concat(isHm ? '' : "".concat(classPrefix, "-bar-animate"), "}"),
style: barStyle
}, range ? renderRangeButton() : renderSingleButton());
}, [
renderRangeButton,
renderSingleButton,
range,
barStyle
]);
return /*#__PURE__*/ _react.default.createElement(_components.View, {
className: containerClasses,
style: style
}, minDescription !== null && /*#__PURE__*/ _react.default.createElement(_components.Text, {
className: "".concat(classPrefix, "-min")
}, minDescription || min), /*#__PURE__*/ _react.default.createElement(_components.View, {
ref: root,
className: classes,
onClick: handleClick
}, renderMarks(), renderButtonWrapper()), maxDescription !== null && /*#__PURE__*/ _react.default.createElement(_components.Text, {
className: "".concat(classPrefix, "-max")
}, maxDescription || max));
};
Range.displayName = 'NutRange';