@schema-render/core-react
Version:
Through a set of simple JSON Schema, efficiently build a set of forms.
107 lines (106 loc) • 3.75 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment } from "react";
import { ELayout } from "../constants";
import useRootContext from "../hooks/useRootContext";
import { isNumber } from "../utils/checking";
import { stringifyPath } from "../utils/misc";
import { performStatement } from "../utils/statement";
import { get } from "../utils/tinyLodash";
import RendererDistributor from "./RendererDistributor";
// export interface IBeforeEachResult {
// // 子节点状态
// childState?: IObjectAny
// // 自定义渲染节点
// node?: ReactNode
// }
// export interface IBeforeEachParams {
// schema: ISchema
// path: IPath
// }
// export interface IProps extends ICommonProps<IObjectSchema> {
// onBeforeEach?: (p: IBeforeEachParams) => IBeforeEachResult
// onAfterEach?: (p: IBeforeEachParams) => IBeforeEachResult
// onBeforeItemRender?: () => {}
// }
const RendererIterator = ({ schema, path })=>{
const rootCtx = useRootContext();
const { rootValue, userCtx } = rootCtx;
// path 为 [] 表示根节点
const value = path.length ? get(rootValue, path) : rootValue;
// 上一个 column 起始值
let prevColumnStart = 1;
// onBeforeEach?.()
const items = Object.keys(schema.properties).map((field)=>{
const subSchema = schema.properties[field];
// 执行 hidden 语法
const shouldHidden = performStatement({
statement: subSchema.hidden,
parentValue: value,
rootValue,
userCtx
});
if (shouldHidden) {
return null;
}
const subPath = [
...path,
field
];
const uniqueKey = stringifyPath(subPath);
// const res = onBeforeItemRender?.({ schema: subSchema, path: subPath })
// // 自定义内容
// if (res?.node !== undefined && React.isValidElement(res.node)) {
// return res.node
// }
// const rendererProps = {
// ...res?.state,
// schema: subSchema,
// path: subPath,
// }
/**
* 计算 gridColumn 值
* span 值如果是: 8 8 8
* 计算结果应该是: 1/9 9/17 17/25
*/ let gridColumn;
// 常规模式支持 span 和 spanStart
if (rootCtx.layout === ELayout.normal) {
let start = prevColumnStart;
let end = 25;
// 没有 span 和 spanStart 属性时，恢复常规模式
if (!isNumber(subSchema.span) && !isNumber(subSchema.spanStart)) {
start = prevColumnStart = 1;
} else {
// 不允许 spanStart 和 span 为 0
// 优先处理 spanStart
if (subSchema.spanStart) {
start = subSchema.spanStart;
prevColumnStart = start;
}
// span 最后决定下一个 column 的起始位置 start
if (subSchema.span) {
end = start + subSchema.span;
prevColumnStart = end;
}
}
gridColumn = `${start}/${end}`;
} else {
// autoFill 与 autoFit 模式只支持 spanStart
if (isNumber(subSchema.spanStart)) {
gridColumn = `${subSchema.spanStart}/auto`;
}
}
const rendererProps = {
schema: subSchema,
path: subPath,
gridColumn
};
return /*#__PURE__*/ _jsx(RendererDistributor, {
...rendererProps
}, uniqueKey);
});
// onAfterEach?.()
return /*#__PURE__*/ _jsx(Fragment, {
children: items
});
};
export default RendererIterator;