Oak-Team
/
oak-frontend-base
13
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases 37 Wiki Activity

下拉刷新 laoding

This commit is contained in:
Wang Kejun 2022-10-19 17:43:03 +08:00
parent 0d38589df6
commit be94c2c5f1
6 changed files with 64 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
lib/page.common.js
View File

@ -152,7 +152,7 @@ function onPathSet(option) {
exports.onPathSet = onPathSet;
function reRender(option, extra) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var features, formData, rows, oakDirty, oakLoading, oakLoadingMore, oakExecuting, data, _a, k, data, _b;
var features, formData, rows, oakDirty, oakLoading, oakPullDownRefreshLoading, oakLoadingMore, oakExecuting, data, _a, k, data, _b;
var _c;
return tslib_1.__generator(this, function (_d) {
switch (_d.label) {
@ -164,7 +164,8 @@ function reRender(option, extra) {
case 1:
rows = _d.sent();
oakDirty = this.features.runningTree.isDirty(this.state.oakFullpath);
oakLoading = this.features.runningTree.isLoading(this.state.oakFullpath);
oakLoading = !this.pullDownRefresh && this.features.runningTree.isLoading(this.state.oakFullpath);
oakPullDownRefreshLoading = this.pullDownRefresh && this.features.runningTree.isLoading(this.state.oakFullpath);
oakLoadingMore = this.features.runningTree.isLoadingMore(this.state.oakFullpath);
oakExecuting = this.features.runningTree.isExecuting(this.state.oakFullpath);
if (!formData) return [3 /*break*/, 3];
@ -188,7 +189,13 @@ function reRender(option, extra) {
_c));
}
}
Object.assign(data, { oakDirty: oakDirty, oakLoading: oakLoading, oakLoadingMore: oakLoadingMore, oakExecuting: oakExecuting });
Object.assign(data, {
oakDirty: oakDirty,
oakLoading: oakLoading,
oakLoadingMore: oakLoadingMore,
oakExecuting: oakExecuting,
oakPullDownRefreshLoading: oakPullDownRefreshLoading,
});
if (extra) {
Object.assign(data, extra);
}

47
lib/page.web.js
View File

@ -483,8 +483,9 @@ function createComponent(option, features, exceptionRouterDict) {
_this.state = Object.assign({}, data, {
oakLoading: false,
oakLoadingMore: false,
oakPullDownRefreshLoading: false,
oakIsReady: false,
oakExeucting: false,
oakExecuting: false,
oakDirty: false,
});
(lifetimes === null || lifetimes === void 0 ? void 0 : lifetimes.created) && lifetimes.created.call(_this);
@ -492,28 +493,16 @@ function createComponent(option, features, exceptionRouterDict) {
}
// todo 这里还需要根据path和location来判断自己是不是page
OakComponentWrapper.prototype.iAmThePage = function () {
return !!path;
return this.props.routeMatch;
};
OakComponentWrapper.prototype.supportPullDownRefresh = function () {
return this.props.width === 'xs' && this.iAmThePage();
};
OakComponentWrapper.prototype.registerPageScroll = function () {
var _a = this.props.useBodyScroll, useBodyScroll = _a === void 0 ? false : _a;
if (useBodyScroll) {
window.addEventListener('scroll', this.scrollEvent);
}
else {
this.lv && this.lv.addEventListener('scroll', this.scrollEvent);
}
window.addEventListener('scroll', this.scrollEvent);
};
OakComponentWrapper.prototype.unregisterPageScroll = function () {
var _a = this.props.useBodyScroll, useBodyScroll = _a === void 0 ? false : _a;
if (useBodyScroll) {
window.removeEventListener('scroll', this.scrollEvent);
}
else {
this.lv && this.lv.removeEventListener('scroll', this.scrollEvent);
}
window.removeEventListener('scroll', this.scrollEvent);
};
OakComponentWrapper.prototype.checkReachBottom = function () {
if (!this.supportPullDownRefresh()) {
@ -563,20 +552,30 @@ function createComponent(option, features, exceptionRouterDict) {
OakComponentWrapper.prototype.render = function () {
var _this = this;
var Render = render.call(this);
var oakLoading = this.state.oakLoading;
var _a = this.props.useBodyScroll, useBodyScroll = _a === void 0 ? false : _a;
if (this.supportPullDownRefresh()) {
var child = react_1.default.cloneElement((0, jsx_runtime_1.jsx)(web_1.PullToRefresh, { onRefresh: function () {
_this.refresh();
}, refreshing: oakLoading, distanceToRefresh: DEFAULT_REACH_BOTTOM_DISTANCE, indicator: {
var oakPullDownRefreshLoading = this.state.oakPullDownRefreshLoading;
var _a = this.props.enablePullDownRefresh, enablePullDownRefresh = _a === void 0 ? false : _a;
if (this.supportPullDownRefresh() && enablePullDownRefresh) {
var Child = react_1.default.cloneElement((0, jsx_runtime_1.jsx)(web_1.PullToRefresh, { onRefresh: function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
this.pullDownRefresh = true;
return [4 /*yield*/, this.refresh()];
case 1:
_a.sent();
this.pullDownRefresh = true;
return [2 /*return*/];
}
});
}); }, refreshing: oakPullDownRefreshLoading, distanceToRefresh: DEFAULT_REACH_BOTTOM_DISTANCE, indicator: {
activate: this.t('common:ptrActivate'),
deactivate: this.t('common:ptrDeactivate'),
release: this.t('common:ptrRelease'),
finish: this.t('common:ptrFinish'),
} }), {
getScrollContainer: function () { return useBodyScroll ? document.body : _this.lv; },
getScrollContainer: function () { return document.body; },
}, Render);
return useBodyScroll ? (child) : ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ ref: function (el) { return (_this.lv = el); }, style: { height: '100%', overflow: 'auto' } }, { children: child })));
return Child;
}
return Render;
};

1
lib/types/Page.d.ts vendored
View File

@ -187,6 +187,7 @@ export declare type OakComponentData<ED extends EntityDict & BaseEntityDict, T e
oakDirty: boolean;
oakLoading: boolean;
oakLoadingMore: boolean;
oakPullDownRefreshLoading: boolean;
oakEntity: T;
oakIsReady: boolean;
oakFullpath: string;

11
src/page.common.ts
View File

@ -145,7 +145,8 @@ export async function reRender<
);
const oakDirty = this.features.runningTree.isDirty(this.state.oakFullpath);
const oakLoading = this.features.runningTree.isLoading(this.state.oakFullpath);
const oakLoading = !(this as any).pullDownRefresh && this.features.runningTree.isLoading(this.state.oakFullpath);
const oakPullDownRefreshLoading = (this as any).pullDownRefresh && this.features.runningTree.isLoading(this.state.oakFullpath);
const oakLoadingMore = this.features.runningTree.isLoadingMore(this.state.oakFullpath);
const oakExecuting = this.features.runningTree.isExecuting(this.state.oakFullpath);
@ -163,7 +164,13 @@ export async function reRender<
});
}
}
Object.assign(data, { oakDirty, oakLoading, oakLoadingMore, oakExecuting });
Object.assign(data, {
oakDirty,
oakLoading,
oakLoadingMore,
oakExecuting,
oakPullDownRefreshLoading,
});
if (extra) {
Object.assign(data, extra);

50
src/page.web.tsx
View File

@ -546,8 +546,9 @@ export function createComponent<
this.state = Object.assign({}, data, {
oakLoading: false,
oakLoadingMore: false,
oakPullDownRefreshLoading: false,
oakIsReady: false,
oakExeucting: false,
oakExecuting: false,
oakDirty: false,
}) as any;
@ -556,7 +557,7 @@ export function createComponent<
// todo 这里还需要根据path和location来判断自己是不是page
private iAmThePage() {
return !!path;
return this.props.routeMatch;
}
@ -569,23 +570,11 @@ export function createComponent<
};
private registerPageScroll() {
const { useBodyScroll = false } = this.props;
if (useBodyScroll) {
window.addEventListener('scroll', this.scrollEvent);
}
else {
(this as any).lv && (this as any).lv.addEventListener('scroll', this.scrollEvent);
}
window.addEventListener('scroll', this.scrollEvent);
}
private unregisterPageScroll() {
const { useBodyScroll = false } = this.props;
if (useBodyScroll) {
window.removeEventListener('scroll', this.scrollEvent);
}
else {
(this as any).lv && (this as any).lv.removeEventListener('scroll', this.scrollEvent);
}
window.removeEventListener('scroll', this.scrollEvent);
}
private checkReachBottom() {
@ -644,16 +633,18 @@ export function createComponent<
render(): React.ReactNode {
const Render = render.call(this);
const { oakLoading } = this.state;
const { useBodyScroll = false } = this.props;
const { oakPullDownRefreshLoading } = this.state;
const { enablePullDownRefresh = false } = this.props;
if (this.supportPullDownRefresh()) {
const child = React.cloneElement(
if (this.supportPullDownRefresh() && enablePullDownRefresh) {
const Child = React.cloneElement(
<PullToRefresh
onRefresh={() => {
this.refresh();
onRefresh={async () => {
(this as any).pullDownRefresh = true;
await this.refresh();
(this as any).pullDownRefresh = true;
}}
refreshing={oakLoading}
refreshing={oakPullDownRefreshLoading}
distanceToRefresh={DEFAULT_REACH_BOTTOM_DISTANCE}
indicator={{
activate: this.t('common:ptrActivate'),
@ -663,20 +654,11 @@ export function createComponent<
}}
/>,
{
getScrollContainer: () => useBodyScroll ? document.body : (this as any).lv,
getScrollContainer: () => document.body,
},
Render
);
return useBodyScroll ? (
child
) : (
<div
ref={(el) => ((this as any).lv = el)}
style={{ height: '100%', overflow: 'auto' }}
>
{child}
</div>
);
return Child;
}
return Render;
}

6
src/types/Page.ts
View File

@ -296,12 +296,16 @@ export type OakComponentOnlyMethods = {
setOakActions: () => void;
};
export type OakComponentData<ED extends EntityDict & BaseEntityDict, T extends keyof ED> = {
export type OakComponentData<
ED extends EntityDict & BaseEntityDict,
T extends keyof ED
> = {
oakExecuting: boolean;
oakFocused: object;
oakDirty: boolean;
oakLoading: boolean;
oakLoadingMore: boolean;
oakPullDownRefreshLoading: boolean;
oakEntity: T;
oakIsReady: boolean;
oakFullpath: string;