fastlion-amis
Version:
一种MIS页面生成工具
175 lines (174 loc) • 11.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Loading = exports.Success = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var core_1 = tslib_1.__importDefault(require("@better-scroll/core"));
var pull_down_1 = tslib_1.__importDefault(require("@better-scroll/pull-down"));
var pull_up_1 = tslib_1.__importDefault(require("@better-scroll/pull-up"));
var scroll_bar_1 = tslib_1.__importDefault(require("@better-scroll/scroll-bar"));
var nested_scroll_1 = tslib_1.__importDefault(require("@better-scroll/nested-scroll"));
var observe_dom_1 = tslib_1.__importDefault(require("@better-scroll/observe-dom"));
var Bubble_1 = tslib_1.__importDefault(require("./Bubble"));
// import './index.scss';
var rc_resize_observer_1 = tslib_1.__importDefault(require("rc-resize-observer"));
core_1.default.use(nested_scroll_1.default);
var defaultState = {
beforePullDown: true,
isPullingDown: false,
beforePullUp: true,
isPullingUp: false,
hasPullup: false,
isEnd: false,
};
var defaultProps = {
scrollConfig: {
scrollbar: {
fade: true
},
click: true,
preventDefault: false,
tap: 'tap',
bounceTime: 800,
pullDownRefresh: undefined,
pullUpLoad: undefined,
// 实时派发
// 关闭自动失焦，否则移动端对同一输入框点击会触发失焦再Focus
// autoBlur: false
}
};
var ScrollMb = react_1.default.forwardRef(function (props, ref) {
var scrollRef = props.scrollRef, nestedScroll = props.nestedScroll, _a = props.scrollConfig, scrollConfig = _a === void 0 ? {} : _a, _b = props.children, children = _b === void 0 ? null : _b, className = props.className, loadingNode = props.loadingNode, successNode = props.successNode, onPullingDown = props.onPullingDown, onPullingUp = props.onPullingUp, onScroll = props.onScroll;
var _c = (0, react_1.useState)(), bScroll = _c[0], setBScroll = _c[1];
var _d = (0, react_1.useState)(0), bubbleY = _d[0], setBubbleY = _d[1];
var _e = (0, react_1.useState)(defaultState), state = _e[0], setState = _e[1];
var beforePullDown = state.beforePullDown, isPullingDown = state.isPullingDown, beforePullUp = state.beforePullUp, isPullingUp = state.isPullingUp, hasPullup = state.hasPullup, isEnd = state.isEnd;
var config = Object.assign(defaultProps.scrollConfig, scrollConfig);
nestedScroll && (config.nestedScroll = nestedScroll);
var wrapperEle = (0, react_1.useRef)(null);
var childrenEle = (0, react_1.useRef)(null);
react_1.default.useImperativeHandle(ref, function () {
bScroll;
});
(0, react_1.useEffect)(function () {
bScroll && bScroll.destroy();
init();
}, [config.pullUpLoad]);
var init = function () {
// 根据配置选择性加载必要插件
config.scrollbar && core_1.default.use(scroll_bar_1.default);
config.pullDownRefresh && core_1.default.use(pull_down_1.default);
config.pullUpLoad && core_1.default.use(pull_up_1.default);
config.observeDOM && core_1.default.use(observe_dom_1.default);
var bScroll = new core_1.default(wrapperEle.current, config);
typeof scrollRef === 'function' && scrollRef(bScroll);
setBScroll(bScroll);
/**
* 下拉刷新
*/
config.pullDownRefresh && bScroll.on('pullingDown', function () {
if (!beforePullDown)
return;
setState(function (state) {
return tslib_1.__assign(tslib_1.__assign({}, state), { beforePullDown: false });
});
config.pullDownRefresh && onPullingDown && onPullingDown()
.then(function (response) {
setState(function (state) {
return tslib_1.__assign(tslib_1.__assign({}, state), { isEnd: false });
});
})
.finally(function () {
setState(function (state) {
return tslib_1.__assign(tslib_1.__assign({}, state), { isPullingDown: true });
});
setTimeout(function () {
bScroll.finishPullDown();
}, 400);
setTimeout(function () {
setState(function (state) {
return tslib_1.__assign(tslib_1.__assign({}, state), { beforePullDown: true, isPullingDown: false });
});
}, (config.bounceTime || 800) + 400);
});
});
/**
* 上拉加载更多
*/
config.pullUpLoad && bScroll.on('pullingUp', function () {
if (!beforePullUp) {
return;
}
setState(function (state) {
return tslib_1.__assign(tslib_1.__assign({}, state), { beforePullUp: false });
});
config.pullUpLoad && onPullingUp && onPullingUp()
.then(function (response) {
var _a = (response || {}).isEnd, isEnd = _a === void 0 ? false : _a;
setTimeout(function () {
bScroll.finishPullUp();
setState(function (state) {
return tslib_1.__assign(tslib_1.__assign({}, state), { isPullingUp: false, isEnd: isEnd });
});
}, 400);
setState(function (state) {
return tslib_1.__assign(tslib_1.__assign({}, state), { beforePullUp: true, isPullingUp: true });
});
});
});
bScroll.on('scroll', function (pos) {
onScroll && onScroll(pos);
if (pos.y < 0)
return;
config.pullDownRefresh && setBubbleY(Math.max(0, !isPullingDown ? pos.y - 40 : 0));
});
};
return react_1.default.createElement(rc_resize_observer_1.default, { onResize: function () {
bScroll === null || bScroll === void 0 ? void 0 : bScroll.refresh();
setState(function (data) {
var _a, _b;
return tslib_1.__assign(tslib_1.__assign({}, data), { hasPullup: ((_a = childrenEle === null || childrenEle === void 0 ? void 0 : childrenEle.current) === null || _a === void 0 ? void 0 : _a.clientHeight) > ((_b = wrapperEle === null || wrapperEle === void 0 ? void 0 : wrapperEle.current) === null || _b === void 0 ? void 0 : _b.clientHeight) });
});
} },
react_1.default.createElement("div", { ref: wrapperEle, className: !className ? 'scroll-wrapper' : "scroll-wrapper ".concat(className) },
react_1.default.createElement("div", { className: "scroll-content" },
config.pullDownRefresh !== false &&
react_1.default.createElement("div", { style: typeof config.pullDownRefresh === 'object' ? { height: config.pullDownRefresh.stop } : {}, className: "pulldown-wrapper" },
beforePullDown && !isPullingDown && react_1.default.createElement(Bubble_1.default, { y: bubbleY }),
!beforePullDown && !isPullingDown && (loadingNode || react_1.default.createElement(exports.Loading, null)),
isPullingDown && (successNode || react_1.default.createElement(exports.Success, null))),
react_1.default.createElement(rc_resize_observer_1.default, { onResize: function () {
bScroll === null || bScroll === void 0 ? void 0 : bScroll.refresh();
setState(function (data) {
var _a, _b;
return tslib_1.__assign(tslib_1.__assign({}, data), { hasPullup: ((_a = childrenEle === null || childrenEle === void 0 ? void 0 : childrenEle.current) === null || _a === void 0 ? void 0 : _a.clientHeight) > ((_b = wrapperEle === null || wrapperEle === void 0 ? void 0 : wrapperEle.current) === null || _b === void 0 ? void 0 : _b.clientHeight) });
});
} },
react_1.default.createElement("div", { ref: childrenEle, className: "scroll-content-children" }, children)),
// 当开启上拉加载更多 且当前滚动区域大于父容器时才展示 加载组件
(scrollConfig === null || scrollConfig === void 0 ? void 0 : scrollConfig.pullUpLoad) === true &&
react_1.default.createElement("div", { className: "pullup-wrapper" }, hasPullup &&
(!isEnd ?
(!isPullingUp ? react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(exports.Loading, null),
react_1.default.createElement("span", null, "\u52A0\u8F7D\u4E2D..."))
:
react_1.default.createElement(exports.Success, { label: "\u52A0\u8F7D\u6210\u529F\uFF01" }))
:
react_1.default.createElement("span", null, "\u5DF2\u7ECF\u5230\u5E95\u5566\uFF01\u4E0D\u8981\u518D\u62C9\u4E86"))))));
});
exports.default = ScrollMb;
var Success = function (_a) {
var _b = _a.label, label = _b === void 0 ? '刷新成功' : _b;
return react_1.default.createElement("div", { className: "pulldown-success" },
react_1.default.createElement("svg", { viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "p-id": "3538", width: "1em", height: "1em" },
react_1.default.createElement("path", { d: "M878.08 731.275a32 32 0 0 1-54.88-32.939A360.79 360.79 0 0 0 874.667 512c0-200.299-162.368-362.667-362.667-362.667S149.333 311.701 149.333 512 311.701 874.667 512 874.667a360.79 360.79 0 0 0 186.315-51.446 32 32 0 0 1 32.928 54.88A424.779 424.779 0 0 1 512 938.667c-235.637 0-426.667-191.03-426.667-426.667S276.363 85.333 512 85.333 938.667 276.363 938.667 512c0 78.293-21.152 153.568-60.587 219.275zM374.581 489.45l84.342 83.989 190.432-190.72a32 32 0 0 1 45.29 45.227L481.632 641.28a32 32 0 0 1-45.227 0.064L329.42 534.794a32 32 0 1 1 45.162-45.343z", "p-id": "3539", fill: "#999999" })),
react_1.default.createElement("span", null, label));
};
exports.Success = Success;
var Loading = function () {
return react_1.default.createElement("svg", { className: "pull-loading", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "p-id": "2742", width: "1em", height: "1em" },
react_1.default.createElement("path", { d: "M512 907c-24.852 0-45-20.148-45-45s20.148-45 45-45c168.446 0 305-136.554 305-305S680.446 207 512 207 207 343.554 207 512c0 24.852-20.148 45-45 45S117 536.852 117 512c0-218.152 176.848-395 395-395S907 293.848 907 512 730.152 907 512 907z", "p-id": "2743", fill: "#999999" }));
};
exports.Loading = Loading;
//# sourceMappingURL=./components/ScrollMB/index.js.map