@doreamonjs/page-creator
Version:
page-creator for doreamonjs
238 lines (237 loc) • 9.25 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.create = exports.createWithConnect = void 0;
const React = require("react");
const dva_1 = require("dva");
const doreamon_1 = require("@zodash/doreamon");
const page_list_1 = require("@doreamonjs/page-list");
const page_detail_1 = require("@doreamonjs/page-detail");
function createWithConnect(namespace, options) {
var _a;
const setComponentProps = doreamon_1.default.func.debounce((_a = options === null || options === void 0 ? void 0 : options.utils) === null || _a === void 0 ? void 0 : _a.setComponentProps, 100);
function mapState(state, props) {
const loading = state.loading.models[namespace];
const model = state[namespace];
setComponentProps(props);
return {
style: options === null || options === void 0 ? void 0 : options.style,
headerStyle: options === null || options === void 0 ? void 0 : options.headerStyle,
bodyStyle: options === null || options === void 0 ? void 0 : options.bodyStyle,
className: options === null || options === void 0 ? void 0 : options.className,
loading,
...model,
};
}
function mapActions(dispatch) {
const onActionTrigger = doreamon_1.default.func.debounce((action, data) => {
// console.log('action change: ', action, data);
dispatch({
type: `${namespace}/dispatcher`,
payload: { meta: action, data },
});
}, 250);
const onTableChange = doreamon_1.default.func.debounce((pagination, filters, sorter) => {
let isNeedChange = false;
const payload = {};
// console.log('table change: ', pagination, filters, sorter);
// @2 filters change
// ignore
// @3 sorter change
if (sorter === null || sorter === void 0 ? void 0 : sorter.order) {
payload.orderBy = [
`${sorter.field}:${{ ascend: 'ASC', descend: 'DESC' }[sorter.order]}`,
];
isNeedChange = true;
}
// @1 pagination change
const page = pagination.current;
const pageSize = pagination.pageSize;
if (page) {
payload.page = page;
isNeedChange = true;
}
if (pageSize) {
payload.pageSize = pageSize;
isNeedChange = true;
}
if (isNeedChange) {
dispatch({
type: `${namespace}/service/query`,
payload,
});
}
}, 250);
const onFilterChange = doreamon_1.default.func.debounce((key, value, values) => {
// console.log('filter change', args);
dispatch({
type: `${namespace}/service/query`,
payload: {
page: 1,
where: values,
},
});
}, 250);
const onCategoryChange = doreamon_1.default.func.debounce((currentValue) => {
dispatch({
type: `${namespace}/category/switch`,
payload: currentValue,
});
}, 250);
const onReset = doreamon_1.default.func.debounce(() => dispatch({ type: `${namespace}/reset` }), 250);
const onRefresh = doreamon_1.default.func.debounce(() => dispatch({ type: `${namespace}/refresh` }), 250);
return {
onActionTrigger,
onTableChange,
onFilterChange,
onCategoryChange,
//
onReset,
onRefresh,
};
}
// const Page = options?.component ?? PageDefault;
// if (!options?.displayName) {
// (Page as any).displayName = `PageCreator(${namespace ?? 'unknown'})`;
// } else {
// (Page as any).displayName = options.displayName;
// }
// return connect(mapState, mapActions)(Page) as any;
return dva_1.connect(mapState, mapActions)((props) => {
var _a, _b, _c, _d, _e, _f, _g;
if (!props.attributes) {
throw new Error('Page attributes missing, maybe you forgot to create page creator model ?');
}
const pageMode = (_e = (_d = (_c = (_b = (_a = props.attributes) === null || _a === void 0 ? void 0 : _a.manifest) === null || _b === void 0 ? void 0 : _b.configs) === null || _c === void 0 ? void 0 : _c.page) === null || _d === void 0 ? void 0 : _d.mode) !== null && _e !== void 0 ? _e : 'list';
let Page = options === null || options === void 0 ? void 0 : options.component;
if (!Page) {
switch (pageMode) {
case 'list':
Page = page_list_1.ListPage;
break;
case 'detail':
Page = page_detail_1.DetailPage;
break;
default:
throw new Error(`Page mode ${pageMode} not support.`);
}
}
if (!(options === null || options === void 0 ? void 0 : options.displayName)) {
Page.displayName = `PageCreator(${namespace !== null && namespace !== void 0 ? namespace : 'unknown'})`;
}
else {
Page.displayName = options.displayName;
}
return (React.createElement(React.Fragment, null, (_f = options === null || options === void 0 ? void 0 : options.renderHeader) === null || _f === void 0 ? void 0 :
_f.call(options, props),
React.createElement(Page, { ...props }), (_g = options === null || options === void 0 ? void 0 : options.renderFooter) === null || _g === void 0 ? void 0 :
_g.call(options, props)));
});
}
exports.createWithConnect = createWithConnect;
// export function createWithHooks(
// namespace: string,
// options?: CreateOptions,
// ): FC<any> {
// const Page = options?.component ?? PageDefault;
// (Page as any).displayName = `PageCreator(${namespace ?? 'unknown'})`;
// return function (props: any) {
// const loading = useSelector(
// (state: any) => state.loading.models[namespace],
// );
// const state = useSelector((state) => state[namespace]);
// const dispatch = useDispatch();
// const onActionTrigger = useMemo(
// () =>
// doreamon.func.debounce((action, data) => {
// dispatch({
// type: `${namespace}/dispatcher`,
// payload: { meta: action, data },
// });
// }, 250),
// [],
// );
// const onTableChange = useMemo(
// () =>
// doreamon.func.debounce((pagination, filters, sorter) => {
// // console.log('table change: ', pagination, filters, sorter);
// // @2 filters change
// // ignore
// // @3 sorter change
// let orderBy: string[] = [];
// if (sorter.order) {
// orderBy = [
// `${sorter.field}:${{ ascend: 'ASC', descend: 'DESC' }[sorter.order]
// }`,
// ];
// }
// // @1 pagination change
// const page = pagination.current;
// const pageSize = pagination.pageSize;
// dispatch({
// type: `${namespace}/service/query`,
// payload: {
// page,
// pageSize,
// orderBy,
// },
// });
// }, 250),
// [],
// );
// const onFilterChange = useMemo(
// () =>
// doreamon.func.debounce((key: string, value: any, values: object) => {
// // console.log('filter change', args);
// dispatch({
// type: `${namespace}/service/query`,
// payload: {
// page: 1, // filter change, reset page to 1
// where: values,
// },
// });
// }, 250),
// [],
// );
// const onCategoryChange = useMemo(
// () => (currentValue: string) => {
// dispatch({
// type: `${namespace}/category/switch`,
// payload: currentValue,
// });
// },
// [],
// );
// const onReset = useMemo(
// () => () => dispatch({ type: `${namespace}/reset`, payload: undefined }),
// [],
// );
// const onRefresh = useMemo(
// () => () => dispatch({ type: `${namespace}/refresh`, payload: undefined }),
// [],
// );
// return (
// <Page
// {...props}
// {...state}
// loading={loading}
// style={options?.style}
// headerStyle={options?.headerStyle}
// bodyStyle={options?.bodyStyle}
// className={options?.className}
// onActionTrigger={onActionTrigger}
// onTableChange={onTableChange}
// onFilterChange={onFilterChange}
// onCategoryChange={onCategoryChange}
// onReset={onReset}
// onRefresh={onRefresh}
// />
// );
// };
// }
// @TODO
// Cannot use useSelect with React-Redux, caused by dva
//
function create(namespace, options) {
return createWithConnect(namespace, options);
}
exports.create = create;