@alifd/meet-react
Version:
Fusion Mobile React UI System Component
265 lines (264 loc) • 10.1 kB
JavaScript
;
exports.__esModule = true;
exports.default = void 0;
var _tslib = require("tslib");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _utils = require("../utils");
var _hooks = require("../utils/hooks");
var _view = _interopRequireDefault(require("../view"));
var _thumb = _interopRequireDefault(require("./thumb"));
var _track = _interopRequireDefault(require("./track"));
var _utils2 = require("./utils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var Mode;
(function (Mode) {
Mode["Single"] = "single";
Mode["Double"] = "double";
})(Mode || (Mode = {}));
function getInitialRatio(max, min, value, defaultValue) {
var ratio = min;
if (!(0, _utils.isUndef)(value)) {
ratio = value;
} else if (!(0, _utils.isUndef)(defaultValue)) {
ratio = defaultValue;
}
if (!Array.isArray(ratio)) {
ratio = [ratio];
}
return ratio.map(function (item) {
if (item > max) {
return max;
}
if (item < min) {
return min;
}
return item;
}).reduce(function (prev, curr, index) {
var _Object$assign;
return Object.assign(Object.assign({}, prev), (_Object$assign = {}, _Object$assign[index] = (curr - min) / (max - min), _Object$assign));
}, {});
}
var Range = function (props) {
var _props$size = props.size,
size = _props$size === void 0 ? 'medium' : _props$size,
_props$min = props.min,
min = _props$min === void 0 ? 0 : _props$min,
_props$prefix = props.prefix,
prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
_props$max = props.max,
max = _props$max === void 0 ? 100 : _props$max,
_props$mode = props.mode,
mode = _props$mode === void 0 ? 'single' : _props$mode,
value = props.value,
defaultValue = props.defaultValue,
_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$marks = props.marks,
marks = _props$marks === void 0 ? false : _props$marks,
_props$marksPosition = props.marksPosition,
marksPosition = _props$marksPosition === void 0 ? 'below' : _props$marksPosition,
_props$previewed = props.previewed,
previewed = _props$previewed === void 0 ? false : _props$previewed,
className = props.className,
tooltipVisible = props.tooltipVisible,
_props$onChange = props.onChange,
onChange = _props$onChange === void 0 ? _utils2.noop : _props$onChange,
_props$onProcess = props.onProcess,
onProcess = _props$onProcess === void 0 ? _utils2.noop : _props$onProcess,
others = (0, _tslib.__rest)(props, ["size", "min", "prefix", "max", "mode", "value", "defaultValue", "step", "disabled", "marks", "marksPosition", "previewed", "className", "tooltipVisible", "onChange", "onProcess"]);
var _useState = (0, _react.useState)(getInitialRatio(max, min, value, defaultValue)),
ratio = _useState[0],
setRatio = _useState[1];
var _useState2 = (0, _react.useState)(null),
active = _useState2[0],
setActive = _useState2[1];
var _useState3 = (0, _react.useState)(false),
dragging = _useState3[0],
setDragging = _useState3[1];
var _useState4 = (0, _react.useState)(0),
rangeWidth = _useState4[0],
setRangeWidth = _useState4[1];
var id = (0, _hooks.useGuid)('range-');
var thumbId1 = (0, _hooks.useGuid)('range-thumb-');
var thumbId2 = (0, _hooks.useGuid)('range-thumb-');
var isControlled = ('value' in props);
var handles = mode === Mode.Double ? {
0: thumbId1,
1: thumbId2
} : {
0: thumbId1
};
function getRatioValue(val) {
return parseFloat((val * (max - min) + min).toFixed((0, _utils2.getPrecision)(step)));
}
var points = (0, _react.useMemo)(function () {
var data = {};
var dealPoints = function dealPoints() {
if (step) {
for (var point = min; point <= max; point += step) {
var current = Number(point.toFixed(1));
data[current] = current;
}
}
};
if (marks instanceof Array) {
marks.reduce(function (prev, current) {
prev[current] = current;
return prev;
}, data);
} else if (marks instanceof Object) {
data = Object.assign({}, marks);
}
dealPoints();
return Object.keys(data).map(parseFloat).sort(function (a, b) {
return a - b;
});
}, [marks, step, min, max]);
function getClosestStep(val) {
var diffs = points.map(function (point) {
return Math.abs(point - val - min);
});
return points[diffs.indexOf(Math.min.apply(Math, diffs))];
}
function getValue(newRatio) {
var result = Object.keys(newRatio).map(function (key) {
return getRatioValue(newRatio[key]);
}).sort(function (a, b) {
return a - b;
});
if (result.length === 1) {
return result[0];
}
return result;
}
function updatePositionByTouch(e, activeIndex) {
var position = (0, _utils2.getTouchPosition)(e);
return (0, _utils2.getNodeRect)(id).then(function (rect) {
var diff = position - rect.left;
var offset = Math.max(Math.min(diff, rect.width), 0);
var closestValue = getClosestStep(offset / rect.width * (max - min));
var newRatio = Object.assign({}, ratio);
if (!(0, _utils.isUndef)(activeIndex)) {
newRatio[activeIndex] = (closestValue - min) / (max - min);
}
if (!isControlled) {
setRatio(newRatio);
}
return newRatio;
});
}
function handleTouchStart(e) {
var _a;
if (disabled || previewed || dragging) {
return;
}
(_a = e.persist) === null || _a === void 0 ? void 0 : _a.call(e);
var position = (0, _utils2.getTouchPosition)(e);
(0, _utils2.getClosestThumbIndex)(position, handles).then(function (activeIndex) {
setDragging(true);
setActive(activeIndex);
updatePositionByTouch(e, activeIndex).then(function (newRatio) {
if ((0, _utils.isFunction)(onChange)) {
onChange(getValue(newRatio), e);
}
});
(0, _utils2.pauseEvent)(e);
});
}
function handleTouchMove(e) {
var _a;
if (!dragging) {
return;
}
(_a = e.persist) === null || _a === void 0 ? void 0 : _a.call(e);
updatePositionByTouch(e, active).then(function (newRatio) {
if ((0, _utils.isFunction)(onProcess)) {
onProcess(getValue(newRatio), e);
}
if ((0, _utils.isFunction)(onChange)) {
onChange(getValue(newRatio), e);
}
});
(0, _utils2.pauseEvent)(e);
}
function handleTouchEnd(e) {
var _a;
if (!dragging) {
return;
}
(_a = e.persist) === null || _a === void 0 ? void 0 : _a.call(e);
setDragging(false);
setActive(null);
updatePositionByTouch(e, active).then(function (newRatio) {
if ((0, _utils.isFunction)(onChange)) {
onChange(getValue(newRatio), e);
}
});
(0, _utils2.pauseEvent)(e);
}
function adjustRatio() {
var data = {};
Object.keys(ratio).forEach(function (key) {
return data[key] = (getClosestStep(ratio[key] * (max - min)) - min) / (max - min);
});
setRatio(data);
}
(0, _react.useEffect)(function () {
adjustRatio();
setTimeout(function () {
(0, _utils2.getNodeRect)(id).then(function (rect) {
setRangeWidth(rect.width);
});
}, 100);
}, []);
(0, _react.useEffect)(function () {
if (isControlled) {
setRatio(getInitialRatio(max, min, value, defaultValue));
}
}, [value, defaultValue, max, min]);
var ratioValue = Object.values(ratio).sort(function (a, b) {
return a - b;
});
return /*#__PURE__*/(0, _react.createElement)(_view.default, _extends({}, others, {
id: id,
withoutTouch: false,
className: (0, _classnames.default)(prefix + "range", className),
onMouseDown: handleTouchStart,
onMouseMove: handleTouchMove,
onMouseUp: handleTouchEnd,
onTouchStart: handleTouchStart,
onTouchMove: handleTouchMove,
onTouchEnd: handleTouchEnd
}), /*#__PURE__*/(0, _react.createElement)(_track.default, {
prefix: prefix,
size: size,
min: min,
max: max,
marks: marks,
marksPosition: marksPosition,
disabled: disabled,
ratio: ratioValue,
rangeWidth: rangeWidth
}), Object.keys(handles).map(function (key) {
var isActive = "" + active === "" + key;
return /*#__PURE__*/(0, _react.createElement)(_thumb.default, {
prefix: prefix,
key: key,
size: size,
id: handles[key],
disabled: disabled,
isActive: isActive,
tooltipVisible: tooltipVisible,
offset: ratio[key] * rangeWidth,
value: getRatioValue(ratio[key])
});
}));
};
Range.displayName = 'Range';
var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(Range);