@jay.kou/rak-ssr/es/ModalForm/cases/inner-ref-basic/index.js

A react based UI components for admin system

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { useRef } from 'react';
import { Button, ModalForm } from "../../..";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Demo = function Demo() {
  var innerRef = useRef();
  var container = useRef(null);
  var onFinish = function onFinish(values) {
    console.log({
      values: values
    });
  };
  return /*#__PURE__*/_jsxs("div", {
    children: [/*#__PURE__*/_jsx("div", {
      style: {
        textAlign: 'start'
      },
      children: /*#__PURE__*/_jsx(Button, {
        "data-testid": "open",
        type: "primary",
        onClick: function onClick() {
          var _innerRef$current;
          return (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.openModal();
        },
        children: "open"
      })
    }), /*#__PURE__*/_jsx("div", {
      ref: container,
      "data-testid": "dialog"
    }), /*#__PURE__*/_jsx(ModalForm, {
      innerRef: innerRef,
      getContainer: function getContainer() {
        return container.current;
      },
      okButtonProps: _defineProperty({}, 'data-testid', 'ok'),
      title: '基本表单',
      onFinish: onFinish,
      columns: [{
        title: '用户名',
        dataIndex: 'username',
        required: true
      }, {
        title: '电话',
        dataIndex: 'phone'
      }]
    })]
  });
};
export default Demo;