@schema-render/form-render-react
Version:
Out-of-the-box form rendering library based on Core and Antd.
85 lines (84 loc) • 3.65 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { QuestionCircleOutlined } from "@ant-design/icons";
import { utils } from "@schema-render/core-react";
import { Popover } from "antd";
import useFormRenderContext from "../../hooks/useFormRenderContext";
import * as styles from "./styles";
const { classNames } = utils;
const builtinLabelRender = ({ schema, required, prefixClassNames, labelColon })=>{
const hasColon = !!labelColon;
return /*#__PURE__*/ _jsxs(_Fragment, {
children: [
required && /*#__PURE__*/ _jsx("span", {
className: classNames(prefixClassNames('item-mark'), styles.mark),
children: "*"
}),
/*#__PURE__*/ _jsx("span", {
className: classNames(prefixClassNames('item-title'), styles.title),
children: schema.title
}),
!!schema.titleDescription && /*#__PURE__*/ _jsx(Popover, {
placement: "top",
trigger: "hover",
content: schema.titleDescription,
children: /*#__PURE__*/ _jsx(QuestionCircleOutlined, {
className: classNames(prefixClassNames('item-title-tooltip'), styles.titleTooltip),
style: {
marginRight: hasColon ? 4 : undefined
}
})
}),
hasColon && /*#__PURE__*/ _jsx("span", {
className: classNames(prefixClassNames('item-colon')),
children: labelColon
})
]
});
};
const Vertical = ({ body, schema, validator, required, disabled, readonly, userCtx, prefixClassNames })=>{
const { labelWidth, labelColon, labelGap, labelRender, locale } = useFormRenderContext();
const innerLabelRender = labelRender ? labelRender : builtinLabelRender;
const labelRenderParams = {
schema,
required,
disabled,
readonly,
userCtx,
prefixClassNames,
labelWidth,
labelColon,
labelGap,
locale
};
return /*#__PURE__*/ _jsxs("div", {
className: prefixClassNames('item-layout-vertical'),
children: [
/*#__PURE__*/ _jsx("div", {
className: classNames(prefixClassNames('item-header'), styles.header),
children: innerLabelRender(labelRenderParams)
}),
/*#__PURE__*/ _jsx("div", {
className: prefixClassNames('item-body'),
children: body
}),
/*#__PURE__*/ _jsxs("div", {
className: classNames(prefixClassNames('item-footer'), styles.footer),
children: [
validator.status === 'error' && !!validator.message && /*#__PURE__*/ _jsx("div", {
className: classNames(prefixClassNames('item-error-msg'), styles.errorMsg),
children: validator.message
}),
validator.status === 'warning' && !!validator.message && /*#__PURE__*/ _jsx("div", {
className: classNames(prefixClassNames('item-warning-msg'), styles.warningMsg),
children: validator.message
}),
!!schema.description && /*#__PURE__*/ _jsx("div", {
className: classNames(prefixClassNames('item-description'), styles.description),
children: schema.description
})
]
})
]
});
};
export default Vertical;