@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
68 lines (67 loc) • 3.18 kB
JavaScript
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useEffect } from "react";
import { animated } from "@react-spring/web";
import { getRefValue, useRefState } from "../../../hooks/use-ref-state";
import { useRtl } from "../../configprovider";
var getPerSlidePosition = function(index, position, loop, count) {
var currentPosition = index * 100 + position;
if (loop) {
var cycle = count * 100;
var shift = cycle / 2;
var nextPosition = (currentPosition + shift) % cycle;
var shiftedPosition = (nextPosition < 0 ? nextPosition + cycle : nextPosition) - shift;
return "".concat(shiftedPosition, "%");
}
return "".concat(currentPosition, "%");
};
export var focusEffect = function(args) {
return React.Children.map(args.children, function(child, index) {
var rtl = useRtl();
var position = rtl ? 'right' : 'left';
var isVertical = args.isVertical, springs = args.springs, transforms = args.transforms, loop = args.loop, count = args.count, swiperDirection = args.swiperDirection, dragging = args.dragging, current = args.current, effect = args.effect;
var _obj;
return /*#__PURE__*/ React.createElement(animated.div, {
className: "nut-swiper-slide",
style: (_obj = {}, _define_property(_obj, isVertical ? 'y' : 'x', springs[isVertical ? 'y' : 'x'].to(function(position) {
return getPerSlidePosition(index, position, loop, count);
})), _define_property(_obj, isVertical ? 'top' : position, "-".concat(index * 100, "%")), _define_property(_obj, "scale", springs.s.to(function(ss) {
var scales = getRefValue(transforms);
if (!scales) return 1;
var scale = scales[index];
var currentRefValue = getRefValue(current);
if (dragging === false) ss = 0;
var ps = ss * scale;
if (index === currentRefValue) {
return Math.max(scale - ps, effect.scale);
}
if (index === currentRefValue + swiperDirection.current) {
return Math.min(scale + ps, 1);
}
return scale;
})), _obj)
}, child);
});
};
export var useList = function(effect, count, current) {
var _useRefState = _sliced_to_array(useRefState([]), 2), transforms = _useRefState[0], setTransforms = _useRefState[1];
useEffect(function() {
setTransforms(Array.from({
length: count
}).fill(1).map(function(scale, index) {
return index !== getRefValue(current) ? scale * (effect ? effect.scale : 1) : scale;
}));
}, [
count
]);
return [
transforms,
setTransforms
];
};
export var updateTransform = function(transforms, setTransforms, effect, page) {
setTransforms(getRefValue(transforms).map(function(s, index) {
return(// eslint-disable-next-line no-nested-ternary
page === index ? 1 : effect ? effect.scale : 1);
}));
};