@jay.kou/rak-ssr
Version:
A react based UI components for admin system
154 lines (151 loc) • 6.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _react = require("react");
var _ = require("../../..");
var _antd = require("antd");
var _DisplayComponent = _interopRequireDefault(require("../components/DisplayComponent"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* ProForm 内嵌模式下取值演示组件
* 主要测试:
* 1. 内嵌表单初始值显示
* 2. 使用 getFieldsValue 获取原始值
* 3. 使用 getFieldsFormatValue 获取格式化(约定式)值
* 4. 使用 validateFields 获取经过校验的原始值
* 5. 提交时 onFinish 返回原始值
*/var ProFormGetValueDemo = function ProFormGetValueDemo() {
var formRef = (0, _react.useRef)();
/**
* 更新结果显示，将传入的值转换为 JSON 格式显示在指定 DOM 节点内
* @param selector 目标选择器
* @param value 要显示的值
*/
var updateResult = function updateResult(selector, value) {
var element = document.querySelector(selector);
if (element) {
element.textContent = (0, _typeof2.default)(value) === 'object' ? JSON.stringify(value, null, 2) : String(value);
}
};
// 提交时回调，将表单原始值显示在 #submit-result 节点
var onFinish = function onFinish(values) {
updateResult('#submit-result', values);
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
style: {
marginBottom: 16
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
"data-testid": "submit-btn",
onClick: function onClick() {
var _formRef$current;
return (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.submit();
},
children: "Submit"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
"data-testid": "get-raw-btn",
onClick: function onClick() {
var _formRef$current2;
var vals = (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.getFieldsValue();
updateResult('#raw-result', vals);
},
children: "Get Raw Values"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
"data-testid": "get-format-btn",
onClick: function onClick() {
var _formRef$current3, _formRef$current3$get;
var vals = (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 || (_formRef$current3$get = _formRef$current3.getFieldsFormatValue) === null || _formRef$current3$get === void 0 ? void 0 : _formRef$current3$get.call(_formRef$current3);
updateResult('#format-result', vals);
},
children: "Get Format Values"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
"data-testid": "validate-btn",
onClick: function onClick() {
var _formRef$current4;
return (_formRef$current4 = formRef.current) === null || _formRef$current4 === void 0 ? void 0 : _formRef$current4.validateFields().then(function (vals) {
updateResult('#validate-result', vals);
});
},
children: "Validate Fields"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
"data-testid": "validate-format-btn",
onClick: function onClick() {
var _formRef$current5, _formRef$current5$val;
return (_formRef$current5 = formRef.current) === null || _formRef$current5 === void 0 || (_formRef$current5$val = _formRef$current5.validateFieldsReturnFormatValue) === null || _formRef$current5$val === void 0 ? void 0 : _formRef$current5$val.call(_formRef$current5).then(function (vals) {
updateResult('#validate-format-result', vals);
});
},
children: "Validate Fields"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "result-display",
style: {
marginBottom: 16
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
id: "submit-result",
"data-testid": "submit-result"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
id: "raw-result",
"data-testid": "raw-result"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
id: "format-result",
"data-testid": "format-result"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
id: "validate-result",
"data-testid": "validate-result"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
id: "validate-format-result",
"data-testid": "validate-format-result"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.ProForm, {
formRef: formRef,
onFinish: onFinish,
initialValues: {
baseInfo: {
userId: '1',
userName: 'Alice'
},
business: {
deptId: '10',
deptName: 'HR'
}
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Card, {
title: "\u57FA\u672C\u4FE1\u606F",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SchemaForm, {
embed: true,
valueBaseName: "baseInfo",
columns: [{
title: '用户',
dataIndex: 'userId,userName',
renderFormItem: function renderFormItem() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DisplayComponent.default, {});
}
}]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Card, {
title: "\u4E1A\u52A1\u4FE1\u606F",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SchemaForm, {
embed: true,
valueBaseName: "business",
columns: [{
title: '部门',
dataIndex: 'deptId,deptName',
renderFormItem: function renderFormItem() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DisplayComponent.default, {
num: 2
});
}
}]
})
})]
})]
});
};
var _default = exports.default = ProFormGetValueDemo;