gui-one-nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
470 lines (469 loc) • 16.9 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _regeneratorRuntime from "@babel/runtime/regenerator";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React__default, { useState, useRef, useEffect, useCallback } from 'react';
import { u as useTouch } from './useTouch-a2ea68c6.js';
import { g as getRectByTaro } from './useClientRect-bf69d7b3.js';
import { T as Toast } from './toast.taro-86862dff.js';
import { u as useConfig } from './configprovider.taro-6c7b3056.js';
var defaultProps = {
range: false,
hiddenRange: false,
hiddenTag: false,
min: 0,
max: 100,
step: 1,
modelValue: 0,
vertical: false,
marks: {}
};
var startValue;
var currentValue;
var Range = function Range(props) {
var _useConfig = useConfig(),
locale = _useConfig.locale;
var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
className = _defaultProps$props.className,
range = _defaultProps$props.range,
disabled = _defaultProps$props.disabled,
activeColor = _defaultProps$props.activeColor,
inactiveColor = _defaultProps$props.inactiveColor,
buttonColor = _defaultProps$props.buttonColor,
hiddenRange = _defaultProps$props.hiddenRange,
hiddenTag = _defaultProps$props.hiddenTag,
modelValue = _defaultProps$props.modelValue,
button = _defaultProps$props.button,
vertical = _defaultProps$props.vertical,
marks = _defaultProps$props.marks,
change = _defaultProps$props.change,
dragStart = _defaultProps$props.dragStart,
dragEnd = _defaultProps$props.dragEnd,
onChange = _defaultProps$props.onChange,
onDragStart = _defaultProps$props.onDragStart,
onDragEnd = _defaultProps$props.onDragEnd;
var _defaultProps$props2 = _objectSpread(_objectSpread({}, defaultProps), props),
min = _defaultProps$props2.min,
max = _defaultProps$props2.max,
step = _defaultProps$props2.step;
min = Number(min);
max = Number(max);
step = Number(step);
var _useState = useState(0),
_useState2 = _slicedToArray(_useState, 2),
buttonIndex = _useState2[0],
SetButtonIndex = _useState2[1];
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
initValue = _useState4[0],
SetInitValue = _useState4[1];
var _useState5 = useState('start'),
_useState6 = _slicedToArray(_useState5, 2),
dragStatus = _useState6[0],
SetDragStatus = _useState6[1];
var touch = useTouch();
var root = useRef(null);
var _useState7 = useState([]),
_useState8 = _slicedToArray(_useState7, 2),
marksList = _useState8[0],
SetMarksList = _useState8[1];
var _useState9 = useState(false),
_useState10 = _slicedToArray(_useState9, 2),
show = _useState10[0],
SetShow = _useState10[1];
var _useState11 = useState(''),
_useState12 = _slicedToArray(_useState11, 2),
toastMsg = _useState12[0],
SetToastMsg = _useState12[1];
var toastShow = function toastShow(msg) {
SetToastMsg(msg);
SetShow(true);
};
useEffect(function () {
if (modelValue) {
if (!range && (modelValue < min || modelValue > max)) {
SetInitValue(0);
// Toast.text(`${modelValue} ${locale.range.rangeText}`)
toastShow("".concat(modelValue, " ").concat(locale.range.rangeText));
return;
}
SetInitValue(modelValue);
}
}, [modelValue]);
useEffect(function () {
if (marks) {
var marksKeys = Object.keys(marks);
var list = marksKeys.map(parseFloat).sort(function (a, b) {
return a - b;
}).filter(function (point) {
return point >= min && point <= max;
});
SetMarksList(list);
}
}, [marks]);
var scope = function scope() {
return Number(max) - Number(min);
};
var classes = useCallback(function () {
var prefixCls = 'nut-range';
return [prefixCls, "".concat(disabled ? "".concat(prefixCls, "-disabled") : ''), "".concat(vertical ? "".concat(prefixCls, "-vertical") : ''), "".concat(!hiddenRange ? "".concat(prefixCls, "-show-number") : '')].filter(Boolean).join(' ');
}, [disabled, vertical, hiddenRange]);
var containerClasses = useCallback(function () {
var prefixCls = 'nut-range-container';
return [prefixCls, "".concat(vertical ? "".concat(prefixCls, "-vertical") : ''), className].filter(Boolean).join(' ');
}, [vertical, className]);
var markClassName = useCallback(function (mark) {
var classPrefix = 'nut-range-mark';
var lowerBound = Number(min);
var upperBound = Number(max);
if (range) {
var _modelValue = _slicedToArray(modelValue, 2),
left = _modelValue[0],
right = _modelValue[1];
lowerBound = left;
upperBound = right;
} else {
upperBound = modelValue;
}
var isActive = mark <= upperBound && mark >= lowerBound;
return ["".concat(classPrefix, "-text"), "".concat(isActive ? "".concat(classPrefix, "-text-active") : '')].filter(Boolean).join(' ');
}, [range, modelValue, min, max]);
var _useState13 = useState(classes()),
_useState14 = _slicedToArray(_useState13, 2),
rangeName = _useState14[0],
setRangeName = _useState14[1];
var _useState15 = useState(containerClasses()),
_useState16 = _slicedToArray(_useState15, 2),
containerName = _useState16[0],
setContainerName = _useState16[1];
useEffect(function () {
setRangeName(classes());
setContainerName(containerClasses());
}, [classes, containerClasses]);
var wrapperStyle = function wrapperStyle() {
return {
background: inactiveColor
};
};
var buttonStyle = function buttonStyle() {
return {
borderColor: buttonColor
};
};
var isRange = function isRange(val) {
return !!range && Array.isArray(val);
};
var calcMainAxis = function calcMainAxis() {
var modelVal = initValue || initValue === 0 ? initValue : modelValue;
if (isRange(modelVal)) {
return "".concat((modelVal[1] - modelVal[0]) * 100 / scope(), "%");
}
return "".concat((modelVal - Number(min)) * 100 / scope(), "%");
};
var calcOffset = function calcOffset() {
var modelVal = initValue || initValue === 0 ? initValue : modelValue;
if (isRange(modelVal)) {
return "".concat((modelVal[0] - Number(min)) * 100 / scope(), "%");
}
return "0%";
};
var barStyle = function barStyle() {
if (vertical) {
return {
height: calcMainAxis(),
top: calcOffset(),
background: activeColor,
transition: dragStatus ? 'none' : undefined
};
}
return {
width: calcMainAxis(),
left: calcOffset(),
background: activeColor,
transition: dragStatus ? 'none' : undefined
};
};
var marksStyle = function marksStyle(mark) {
var style = {
left: "".concat((mark - Number(min)) / scope() * 100, "%")
};
if (vertical) {
style = {
top: "".concat((mark - Number(min)) / scope() * 100, "%")
};
}
return style;
};
var tickStyle = function tickStyle(mark) {
var lowerBound = Number(min);
var upperBound = Number(max);
if (range) {
var _modelValue2 = _slicedToArray(modelValue, 2),
left = _modelValue2[0],
right = _modelValue2[1];
lowerBound = left;
upperBound = right;
}
var isActive = mark <= upperBound && mark >= lowerBound;
var style = {
background: !isActive ? inactiveColor : activeColor
};
return style;
};
var format = function format(value) {
value = Math.max(+min, Math.min(value, +max));
return Math.round(value / +step) * +step;
};
var isSameValue = function isSameValue(newValue, oldValue) {
return JSON.stringify(newValue) === JSON.stringify(oldValue);
};
var handleOverlap = function handleOverlap(value) {
if (value[0] > value[1]) {
return value.slice(0).reverse();
}
return value;
};
var updateValue = function updateValue(value, end) {
if (isRange(value)) {
value = handleOverlap(value).map(format);
} else {
value = format(value);
}
var modelVal = initValue || initValue === 0 ? initValue : modelValue;
if (!isSameValue(value, modelVal)) {
SetInitValue(value);
}
if ((marks || end) && !isSameValue(value, startValue)) {
change && change(value);
onChange && onChange(value);
}
};
var click = /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
var rect, delta, total, value, _currentValue, _currentValue2, left, right, middle;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
if (!(disabled || !root.current)) {
_context.next = 2;
break;
}
return _context.abrupt("return");
case 2:
SetDragStatus('');
_context.next = 5;
return getRectByTaro(root.current);
case 5:
rect = _context.sent;
delta = event.detail.x - rect.left;
total = rect.width;
if (vertical) {
delta = event.detail.y - rect.top;
total = rect.height;
}
value = Number(min) + delta / total * scope();
currentValue = initValue || initValue === 0 ? initValue : modelValue;
if (isRange(currentValue)) {
_currentValue = currentValue, _currentValue2 = _slicedToArray(_currentValue, 2), left = _currentValue2[0], right = _currentValue2[1];
middle = (left + right) / 2;
if (value <= middle) {
updateValue([value, right], true);
} else {
updateValue([left, value], true);
}
} else {
updateValue(value, true);
}
case 12:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return function click(_x) {
return _ref.apply(this, arguments);
};
}();
var _onTouchStart = function onTouchStart(event) {
if (disabled) {
return;
}
touch.start(event);
currentValue = initValue || initValue === 0 ? initValue : modelValue;
if (isRange(currentValue)) {
startValue = currentValue.map(format);
} else {
startValue = format(currentValue);
}
SetDragStatus('start');
};
var _onTouchMove = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(event) {
var rect, delta, total, diff;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
if (!(disabled || !root.current)) {
_context2.next = 2;
break;
}
return _context2.abrupt("return");
case 2:
if (dragStatus === 'start') {
dragStart && dragStart();
onDragStart && onDragStart();
}
touch.move(event);
SetDragStatus('draging');
_context2.next = 7;
return getRectByTaro(root.current);
case 7:
rect = _context2.sent;
delta = touch.deltaX;
total = rect.width;
diff = delta / total * scope();
if (vertical) {
delta = touch.deltaY;
total = rect.height;
diff = delta / total * scope();
}
if (isRange(startValue)) {
currentValue[buttonIndex] = startValue[buttonIndex] + diff;
} else {
currentValue = startValue + diff;
}
updateValue(currentValue);
case 14:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
return function onTouchMove(_x2) {
return _ref2.apply(this, arguments);
};
}();
var _onTouchEnd = function onTouchEnd(event) {
if (disabled) {
return;
}
if (dragStatus === 'draging') {
updateValue(currentValue, true);
dragEnd && dragEnd();
onDragEnd && onDragEnd();
}
SetDragStatus('');
};
var curValue = function curValue(idx) {
var modelVal = initValue || initValue === 0 ? initValue : modelValue;
var value = typeof idx === 'number' ? modelVal[idx] : modelVal;
return value;
};
return React__default.createElement("div", {
className: "".concat(containerName)
}, !hiddenRange ? React__default.createElement("div", {
className: "min"
}, +min) : null, React__default.createElement("div", {
ref: root,
style: wrapperStyle(),
className: "".concat(rangeName),
onClick: function onClick(e) {
click(e);
}
}, marksList.length > 0 ? React__default.createElement("div", {
className: "nut-range-mark"
}, marksList.map(function (marks) {
return React__default.createElement("span", {
key: marks,
className: markClassName(marks),
style: marksStyle(marks)
}, marks, React__default.createElement("span", {
className: "nut-range-tick",
style: tickStyle(marks)
}));
})) : null, React__default.createElement("div", {
className: "nut-range-bar",
style: barStyle()
}, range ? [0, 1].map(function (item, index) {
return React__default.createElement("div", {
role: "slider",
key: index,
className: "".concat(index === 0 ? 'nut-range-button-wrapper-left' : '', "\n ").concat(index === 1 ? 'nut-range-button-wrapper-right' : ''),
tabIndex: disabled ? -1 : 0,
"aria-valuemin": +min,
"aria-valuenow": curValue(index),
"aria-valuemax": +max,
"aria-orientation": "horizontal",
onTouchStart: function onTouchStart(e) {
if (typeof index === 'number') {
// 实时更新当前拖动的按钮索引
SetButtonIndex(index);
}
_onTouchStart(e);
},
onTouchMove: function onTouchMove(e) {
_onTouchMove(e);
},
onTouchEnd: function onTouchEnd(e) {
_onTouchEnd();
},
onTouchCancel: function onTouchCancel(e) {
_onTouchEnd();
},
onClick: function onClick(e) {
e.stopPropagation();
}
}, button || React__default.createElement("div", {
className: "nut-range-button",
style: buttonStyle()
}, !hiddenTag ? React__default.createElement("div", {
className: "number"
}, curValue(index)) : null));
}) : React__default.createElement("div", {
role: "slider",
className: "nut-range-button-wrapper",
tabIndex: disabled ? -1 : 0,
"aria-valuemin": +min,
"aria-valuenow": curValue(),
"aria-valuemax": +max,
"aria-orientation": "horizontal",
onTouchStart: function onTouchStart(e) {
_onTouchStart(e);
},
onTouchMove: function onTouchMove(e) {
_onTouchMove(e);
},
onTouchEnd: function onTouchEnd(e) {
_onTouchEnd();
},
onTouchCancel: function onTouchCancel(e) {
_onTouchEnd();
},
onClick: function onClick(e) {
e.stopPropagation();
}
}, button || React__default.createElement("div", {
className: "nut-range-button",
style: buttonStyle()
}, !hiddenTag ? React__default.createElement("div", {
className: "number"
}, curValue()) : null)))), !hiddenRange ? React__default.createElement("div", {
className: "max"
}, +max) : null, React__default.createElement(Toast, {
type: "text",
visible: show,
msg: toastMsg,
onClose: function onClose() {
SetShow(false);
}
}));
};
Range.defaultProps = defaultProps;
Range.displayName = 'NutRange';
export { Range as R };