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

A react based UI components for admin system

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useRef, useState } from 'react';
import { Button, ModalForm } from "../../..";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Basic = function Basic() {
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    open = _useState2[0],
    setOpen = _useState2[1];
  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() {
          return setOpen(true);
        },
        children: "open"
      })
    }), /*#__PURE__*/_jsx("div", {
      ref: container,
      "data-testid": "dialog"
    }), /*#__PURE__*/_jsx(ModalForm, {
      getContainer: function getContainer() {
        return container.current;
      },
      okButtonProps: _defineProperty({}, 'data-testid', 'ok'),
      title: '基本表单',
      open: open,
      onCancel: function onCancel() {
        return setOpen(false);
      },
      onFinish: onFinish,
      columns: [{
        title: '用户名',
        dataIndex: 'username',
        required: true
      }, {
        title: '电话',
        dataIndex: 'phone'
      }]
    })]
  });
};
export default Basic;