@jay.kou/rak-ssr
Version:
A react based UI components for admin system
122 lines (121 loc) • 5.24 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");
/**
* 表单值获取演示组件
* 展示不同方式获取表单值的结果:
* 1. onFinish - 提交时获取
* 2. getFieldsValue - 获取原始值
* 3. validateFields - 校验并获取原始值
* 4. getFieldsFormatValue - 获取格式化值
* 5. validateFieldsReturnFormatValue - 校验并获取格式化值
*/var FormValueDemo = function FormValueDemo() {
var formRef = (0, _react.useRef)();
var setHtml = function setHtml(query, vals) {
var ele = document.querySelector(query);
if (ele) {
ele.innerHTML = (0, _typeof2.default)(vals) === 'object' ? JSON.stringify(vals) : vals;
}
};
var onFinish = function onFinish(values) {
setHtml('#onFinish', values);
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "result-display",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
id: "onFinish",
"data-testid": "onFinish"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
id: "getFieldsValue",
"data-testid": "getFieldsValue"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
id: "validateFields",
"data-testid": "validateFields"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
id: "getFieldsFormatValue",
"data-testid": "getFieldsFormatValue"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
id: "validateFieldsReturnFormatValue",
"data-testid": "validateFieldsReturnFormatValue"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SchemaForm, {
grid: true,
colProps: {
span: 12
},
onFinish: onFinish,
formRef: formRef,
columns: [{
title: '用户',
dataIndex: 'userId,userName',
renderFormItem: function renderFormItem() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DisplayComponent.default, {});
}
}],
autoFocusFirstInput: false,
initialValues: {
userId: '1',
userName: 'jack'
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: {
textAlign: 'end'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
wrap: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.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: "onFinish"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
"data-testid": "get-fields-btn",
onClick: function onClick() {
var _formRef$current2;
var vals = (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.getFieldsValue();
setHtml('#getFieldsValue', vals);
},
children: "getFieldsValue"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
"data-testid": "validate-btn",
onClick: function onClick() {
var _formRef$current3;
return (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 ? void 0 : _formRef$current3.validateFields().then(function (vals) {
setHtml('#validateFields', vals);
});
},
children: "validateFields"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
"data-testid": "get-format-btn",
onClick: function onClick() {
var _formRef$current4, _formRef$current4$get;
return setHtml('#getFieldsFormatValue', (_formRef$current4 = formRef.current) === null || _formRef$current4 === void 0 || (_formRef$current4$get = _formRef$current4.getFieldsFormatValue) === null || _formRef$current4$get === void 0 ? void 0 : _formRef$current4$get.call(_formRef$current4));
},
children: "getFieldsFormatValue"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
"data-testid": "validate-format-btn",
onClick: function onClick() {
var _formRef$current5, _formRef$current5$val;
(_formRef$current5 = formRef.current) === null || _formRef$current5 === void 0 || (_formRef$current5$val = _formRef$current5.validateFieldsReturnFormatValue) === null || _formRef$current5$val === void 0 || _formRef$current5$val.call(_formRef$current5).then(function (vals) {
setHtml('#validateFieldsReturnFormatValue', vals);
});
},
children: "validateFieldsReturnFormatValue"
})]
})
})]
});
};
var _default = exports.default = FormValueDemo;