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

onPathSet改为异步调用

This commit is contained in:
Xu Chang 2022-12-29 11:54:05 +08:00
parent 1fd21b0cf1
commit ddf80eb568
7 changed files with 208 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/features/cache.d.ts vendored
View File

@ -14,7 +14,7 @@ export declare class Cache<ED extends EntityDict & BaseEntityDict, Cxt extends A
exec<K extends keyof AD>(name: K, params: Parameters<AD[K]>[0], callback?: (result: Awaited<ReturnType<AD[K]>>) => void): Promise<any>;
refresh<T extends keyof ED, OP extends SelectOption>(entity: T, selection: ED[T]['Selection'], option?: OP, getCount?: true, callback?: (result: Awaited<ReturnType<AD['select']>>) => void): Promise<any>;
operate<T extends keyof ED, OP extends OperateOption>(entity: T, operation: ED[T]['Operation'], option?: OP, callback?: (result: Awaited<ReturnType<AD['operate']>>) => void): Promise<any>;
count<T extends keyof ED, OP extends SelectOption>(entity: T, selection: ED[T]['Selection'], option?: OP, callback?: (result: Awaited<ReturnType<AD['count']>>) => void): Promise<any>;
count<T extends keyof ED, OP extends SelectOption>(entity: T, selection: Pick<ED[T]['Selection'], 'filter'>, option?: OP, callback?: (result: Awaited<ReturnType<AD['count']>>) => void): Promise<any>;
private sync;
/**
* 前端缓存做operation只可能是测试权限，必然回滚

2
lib/page.common.d.ts vendored
View File

@ -4,7 +4,7 @@ import { OakComponentOption, ComponentFullThisType } from './types/Page';
import { SyncContext } from 'oak-domain/lib/store/SyncRowStore';
import { AsyncContext } from 'oak-domain/lib/store/AsyncRowStore';
import { MessageProps } from './types/Message';
export declare function onPathSet<ED extends EntityDict & BaseEntityDict, T extends keyof ED, Cxt extends AsyncContext<ED>, FrontCxt extends SyncContext<ED>>(this: ComponentFullThisType<ED, T, any, Cxt, FrontCxt>, option: OakComponentOption<ED, T, Cxt, FrontCxt, any, any, any, any, {}, {}, {}>): void;
export declare function onPathSet<ED extends EntityDict & BaseEntityDict, T extends keyof ED, Cxt extends AsyncContext<ED>, FrontCxt extends SyncContext<ED>>(this: ComponentFullThisType<ED, T, any, Cxt, FrontCxt>, option: OakComponentOption<ED, T, Cxt, FrontCxt, any, any, any, any, {}, {}, {}>): Promise<void>;
export declare function reRender<ED extends EntityDict & BaseEntityDict, T extends keyof ED, Cxt extends AsyncContext<ED>, FrontCxt extends SyncContext<ED>>(this: ComponentFullThisType<ED, T, any, Cxt, FrontCxt>, option: OakComponentOption<ED, T, Cxt, FrontCxt, any, any, any, any, {}, {}, {}>, extra?: Record<string, any>): void;
export declare function refresh<ED extends EntityDict & BaseEntityDict, T extends keyof ED, Cxt extends AsyncContext<ED>, FrontCxt extends SyncContext<ED>>(this: ComponentFullThisType<ED, T, any, Cxt, FrontCxt>): Promise<void>;
export declare function loadMore<ED extends EntityDict & BaseEntityDict, T extends keyof ED, Cxt extends AsyncContext<ED>, FrontCxt extends SyncContext<ED>>(this: ComponentFullThisType<ED, T, any, Cxt, FrontCxt>): Promise<void>;

249
lib/page.common.js
View File

@ -5,131 +5,148 @@ var tslib_1 = require("tslib");
var assert_1 = require("oak-domain/lib/utils/assert");
var lodash_1 = require("oak-domain/lib/utils/lodash");
function onPathSet(option) {
var e_1, _a, e_2, _b;
var _this = this;
var _c = this, props = _c.props, state = _c.state;
var oakPath = props.oakPath, oakProjection = props.oakProjection, oakIsPicker = props.oakIsPicker, oakFilters = props.oakFilters, oakSorters = props.oakSorters, oakId = props.oakId;
var entity = option.entity, path = option.path, projection = option.projection, isList = option.isList, filters = option.filters, sorters = option.sorters, pagination = option.pagination;
var features = this.features;
var oakPath2 = oakPath || path;
if (entity) {
var entity2 = entity instanceof Function ? entity.call(this) : entity;
var filters2 = [];
if (oakFilters) {
// 这里在跳页面的时候用this.navigate应该可以限制传过来的filter的格式
var oakFilters2 = typeof oakFilters === 'string' ? JSON.parse(oakFilters) : oakFilters;
filters2.push.apply(filters2, tslib_1.__spreadArray([], tslib_1.__read(oakFilters2), false));
}
else if (filters) {
var _loop_1 = function (ele) {
var _d;
var filter = ele.filter, name_1 = ele["#name"];
filters2.push((_d = {
filter: typeof filter === 'function'
return tslib_1.__awaiter(this, void 0, void 0, function () {
var _a, props, state, oakPath, oakProjection, oakIsPicker, oakFilters, oakSorters, oakId, entity, path, projection, isList, filters, sorters, pagination, features, oakPath2, entity2_1, filters2, oakFilters2, _loop_1, filters_1, filters_1_1, ele, proj, sorters2, oakSorters2, _loop_2, sorters_1, sorters_1_1, ele;
var e_1, _b, e_2, _c;
var _this = this;
return tslib_1.__generator(this, function (_d) {
switch (_d.label) {
case 0:
_a = this, props = _a.props, state = _a.state;
oakPath = props.oakPath, oakProjection = props.oakProjection, oakIsPicker = props.oakIsPicker, oakFilters = props.oakFilters, oakSorters = props.oakSorters, oakId = props.oakId;
entity = option.entity, path = option.path, projection = option.projection, isList = option.isList, filters = option.filters, sorters = option.sorters, pagination = option.pagination;
features = this.features;
oakPath2 = oakPath || path;
if (!entity) return [3 /*break*/, 2];
entity2_1 = entity instanceof Function ? entity.call(this) : entity;
filters2 = [];
if (oakFilters) {
oakFilters2 = typeof oakFilters === 'string' ? JSON.parse(oakFilters) : oakFilters;
filters2.push.apply(filters2, tslib_1.__spreadArray([], tslib_1.__read(oakFilters2), false));
}
else if (filters) {
_loop_1 = function (ele) {
var _e;
var filter = ele.filter, name_1 = ele["#name"];
filters2.push((_e = {
filter: typeof filter === 'function'
? function () {
return filter.call(_this, {
features: features,
props: _this.props,
state: _this.state,
});
}
: filter
},
_e['#name'] = name_1,
_e));
};
try {
for (filters_1 = tslib_1.__values(filters), filters_1_1 = filters_1.next(); !filters_1_1.done; filters_1_1 = filters_1.next()) {
ele = filters_1_1.value;
_loop_1(ele);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (filters_1_1 && !filters_1_1.done && (_b = filters_1.return)) _b.call(filters_1);
}
finally { if (e_1) throw e_1.error; }
}
}
proj = oakProjection && (typeof oakProjection === 'string' ? JSON.parse(oakProjection) : oakProjection);
if (!proj && projection) {
proj = typeof projection === 'function'
? function () {
return filter.call(_this, {
return projection.call(_this, {
features: features,
props: _this.props,
state: _this.state,
});
}
: filter
},
_d['#name'] = name_1,
_d));
};
try {
for (var filters_1 = tslib_1.__values(filters), filters_1_1 = filters_1.next(); !filters_1_1.done; filters_1_1 = filters_1.next()) {
var ele = filters_1_1.value;
_loop_1(ele);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (filters_1_1 && !filters_1_1.done && (_a = filters_1.return)) _a.call(filters_1);
}
finally { if (e_1) throw e_1.error; }
}
}
var proj = oakProjection && (typeof oakProjection === 'string' ? JSON.parse(oakProjection) : oakProjection);
if (!proj && projection) {
proj = typeof projection === 'function'
? function () {
return projection.call(_this, {
features: features,
props: _this.props,
state: _this.state,
: projection;
}
sorters2 = [];
if (oakSorters) {
oakSorters2 = typeof oakSorters === 'string' ? JSON.parse(oakSorters) : oakSorters;
sorters2.push.apply(sorters2, tslib_1.__spreadArray([], tslib_1.__read(oakSorters2), false));
}
else if (sorters) {
_loop_2 = function (ele) {
var _f;
var sorter = ele.sorter, name_2 = ele["#name"];
sorters2.push((_f = {
sorter: typeof sorter === 'function'
? function () {
return sorter.call(_this, {
features: features,
props: _this.props,
state: _this.state,
});
}
: sorter
},
_f['#name'] = name_2,
_f));
};
try {
for (sorters_1 = tslib_1.__values(sorters), sorters_1_1 = sorters_1.next(); !sorters_1_1.done; sorters_1_1 = sorters_1.next()) {
ele = sorters_1_1.value;
_loop_2(ele);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (sorters_1_1 && !sorters_1_1.done && (_c = sorters_1.return)) _c.call(sorters_1);
}
finally { if (e_2) throw e_2.error; }
}
}
(0, assert_1.assert)(oakPath2, '没有正确的path信息，请检查是否配置正确');
features.runningTree.createNode({
path: oakPath2,
entity: entity2_1,
isList: isList,
isPicker: oakIsPicker,
projection: proj,
pagination: pagination,
filters: filters2,
sorters: sorters2,
id: oakId,
});
}
: projection;
}
var sorters2 = [];
if (oakSorters) {
// 这里在跳页面的时候用this.navigate应该可以限制传过来的sorter的格式
var oakSorters2 = typeof oakSorters === 'string' ? JSON.parse(oakSorters) : oakSorters;
sorters2.push.apply(sorters2, tslib_1.__spreadArray([], tslib_1.__read(oakSorters2), false));
}
else if (sorters) {
var _loop_2 = function (ele) {
var _e;
var sorter = ele.sorter, name_2 = ele["#name"];
sorters2.push((_e = {
sorter: typeof sorter === 'function'
? function () {
return sorter.call(_this, {
features: features,
props: _this.props,
state: _this.state,
});
}
: sorter
},
_e['#name'] = name_2,
_e));
};
try {
for (var sorters_1 = tslib_1.__values(sorters), sorters_1_1 = sorters_1.next(); !sorters_1_1.done; sorters_1_1 = sorters_1.next()) {
var ele = sorters_1_1.value;
_loop_2(ele);
}
// 确保SetState生效，这里改成异步
return [4 /*yield*/, new Promise(function (resolve) {
_this.setState({
oakEntity: entity2_1,
oakFullpath: oakPath2,
}, function () { return resolve(0); });
})];
case 1:
// 确保SetState生效，这里改成异步
_d.sent();
return [3 /*break*/, 4];
case 2: return [4 /*yield*/, new Promise(function (resolve) {
_this.setState({
oakFullpath: oakPath2,
}, function () { return resolve(0); });
})];
case 3:
_d.sent();
// 创建virtualNode
features.runningTree.createNode({
path: oakPath2,
});
_d.label = 4;
case 4:
this.subscribed.push(features.runningTree.subscribeNode(function () { return _this.reRender(); }, oakPath2));
this.refresh();
return [2 /*return*/];
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (sorters_1_1 && !sorters_1_1.done && (_b = sorters_1.return)) _b.call(sorters_1);
}
finally { if (e_2) throw e_2.error; }
}
}
(0, assert_1.assert)(oakPath2, '没有正确的path信息，请检查是否配置正确');
features.runningTree.createNode({
path: oakPath2,
entity: entity2,
isList: isList,
isPicker: oakIsPicker,
projection: proj,
pagination: pagination,
filters: filters2,
sorters: sorters2,
id: oakId,
});
this.setState({
oakEntity: entity2,
oakFullpath: oakPath2,
});
}
else {
this.setState({
oakFullpath: oakPath2,
});
// 创建virtualNode
features.runningTree.createNode({
path: oakPath2,
});
}
this.subscribed.push(features.runningTree.subscribeNode(function () { return _this.reRender(); }, oakPath2));
this.refresh();
});
}
exports.onPathSet = onPathSet;
function reRender(option, extra) {

81
lib/page.web.js
View File

@ -523,25 +523,36 @@ function createComponent(option, features) {
this.isReachBottom = isCurrentReachBottom;
};
OakComponentWrapper.prototype.componentDidMount = function () {
var _this = this;
this.registerPageScroll();
if (option.entity) {
this.subscribed.push(features.cache.subscribe(function () { return _this.reRender(); }));
}
(lifetimes === null || lifetimes === void 0 ? void 0 : lifetimes.attached) && lifetimes.attached.call(this);
var oakPath = this.props.oakPath;
if (oakPath || this.iAmThePage() && path) {
this.onPathSet();
(lifetimes === null || lifetimes === void 0 ? void 0 : lifetimes.ready) && lifetimes.ready.call(this);
(lifetimes === null || lifetimes === void 0 ? void 0 : lifetimes.show) && lifetimes.show.call(this);
}
else {
if (!option.entity) {
(lifetimes === null || lifetimes === void 0 ? void 0 : lifetimes.ready) && lifetimes.ready.call(this);
(lifetimes === null || lifetimes === void 0 ? void 0 : lifetimes.show) && lifetimes.show.call(this);
}
this.reRender();
}
return tslib_1.__awaiter(this, void 0, void 0, function () {
var oakPath;
var _this = this;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
this.registerPageScroll();
if (option.entity) {
this.subscribed.push(features.cache.subscribe(function () { return _this.reRender(); }));
}
(lifetimes === null || lifetimes === void 0 ? void 0 : lifetimes.attached) && lifetimes.attached.call(this);
oakPath = this.props.oakPath;
if (!(oakPath || this.iAmThePage() && path)) return [3 /*break*/, 2];
return [4 /*yield*/, this.onPathSet()];
case 1:
_a.sent();
(lifetimes === null || lifetimes === void 0 ? void 0 : lifetimes.ready) && lifetimes.ready.call(this);
(lifetimes === null || lifetimes === void 0 ? void 0 : lifetimes.show) && lifetimes.show.call(this);
return [3 /*break*/, 3];
case 2:
if (!option.entity) {
(lifetimes === null || lifetimes === void 0 ? void 0 : lifetimes.ready) && lifetimes.ready.call(this);
(lifetimes === null || lifetimes === void 0 ? void 0 : lifetimes.show) && lifetimes.show.call(this);
}
this.reRender();
_a.label = 3;
case 3: return [2 /*return*/];
}
});
});
};
OakComponentWrapper.prototype.componentWillUnmount = function () {
this.subscribed.forEach(function (ele) { return ele(); });
@ -550,17 +561,27 @@ function createComponent(option, features) {
(lifetimes === null || lifetimes === void 0 ? void 0 : lifetimes.detached) && lifetimes.detached.call(this);
};
OakComponentWrapper.prototype.componentDidUpdate = function (prevProps, prevState) {
if (prevProps.oakPath !== this.props.oakPath) {
(0, assert_1.default)(this.props.oakPath);
this.onPathSet();
(lifetimes === null || lifetimes === void 0 ? void 0 : lifetimes.ready) && lifetimes.ready.call(this);
// lifetimes?.show && lifetimes.show.call(this);
}
if (this.props.oakId !== prevProps.oakId) {
this.setId(this.props.oakId);
}
// todo 这里似乎还可能对oakProjection这些东西加以更新，等遇到再添加 by Xc
fn && fn.call(this, prevProps, prevState);
return tslib_1.__awaiter(this, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(prevProps.oakPath !== this.props.oakPath)) return [3 /*break*/, 2];
(0, assert_1.default)(this.props.oakPath);
return [4 /*yield*/, this.onPathSet()];
case 1:
_a.sent();
(lifetimes === null || lifetimes === void 0 ? void 0 : lifetimes.ready) && lifetimes.ready.call(this);
_a.label = 2;
case 2:
if (this.props.oakId !== prevProps.oakId) {
this.setId(this.props.oakId);
}
// todo 这里似乎还可能对oakProjection这些东西加以更新，等遇到再添加 by Xc
fn && fn.call(this, prevProps, prevState);
return [2 /*return*/];
}
});
});
};
OakComponentWrapper.prototype.render = function () {
var _this = this;

2
src/features/cache.ts
View File

@ -91,7 +91,7 @@ export class Cache<
async count<T extends keyof ED, OP extends SelectOption>(
entity: T,
selection: ED[T]['Selection'],
selection: Pick<ED[T]['Selection'], 'filter'>,
option?: OP,
callback?: (result: Awaited<ReturnType<AD['count']>>) => void,
) {

25
src/page.common.ts
View File

@ -16,7 +16,7 @@ import { SyncContext } from 'oak-domain/lib/store/SyncRowStore';
import { AsyncContext } from 'oak-domain/lib/store/AsyncRowStore';
import { MessageProps } from './types/Message';
export function onPathSet<
export async function onPathSet<
ED extends EntityDict & BaseEntityDict,
T extends keyof ED,
Cxt extends AsyncContext<ED>,
@ -103,16 +103,25 @@ export function onPathSet<
id: oakId,
});
this.setState({
oakEntity: entity2,
oakFullpath: oakPath2,
});
// 确保SetState生效，这里改成异步
await new Promise(
(resolve) => {
this.setState({
oakEntity: entity2,
oakFullpath: oakPath2,
}, () => resolve(0));
}
);
}
else {
this.setState({
oakFullpath: oakPath2,
});
await new Promise(
(resolve) => {
this.setState({
oakFullpath: oakPath2,
}, () => resolve(0));
}
);
// 创建virtualNode
features.runningTree.createNode({
path: oakPath2 as string,

8
src/page.web.tsx
View File

@ -799,7 +799,7 @@ export function createComponent<
this.isReachBottom = isCurrentReachBottom;
}
componentDidMount() {
async componentDidMount() {
this.registerPageScroll();
if (option.entity) {
this.subscribed.push(
@ -809,7 +809,7 @@ export function createComponent<
lifetimes?.attached && lifetimes.attached.call(this);
const { oakPath } = this.props;
if (oakPath || this.iAmThePage() && path) {
this.onPathSet();
await this.onPathSet();
lifetimes?.ready && lifetimes.ready.call(this);
lifetimes?.show && lifetimes.show.call(this);
}
@ -831,10 +831,10 @@ export function createComponent<
lifetimes?.detached && lifetimes.detached.call(this);
}
componentDidUpdate(prevProps: Record<string, any>, prevState: Record<string, any>) {
async componentDidUpdate(prevProps: Record<string, any>, prevState: Record<string, any>) {
if (prevProps.oakPath !== this.props.oakPath) {
assert(this.props.oakPath);
this.onPathSet();
await this.onPathSet();
lifetimes?.ready && lifetimes.ready.call(this);
// lifetimes?.show && lifetimes.show.call(this);
}