@aliretail/react-materials-components/es/InputDialog/index.js

B 端物料组件库

import _Dialog from "@alifd/next/es/dialog";
import _Message from "@alifd/next/es/message";
import _Form from "@alifd/next/es/form";
import _extends from "@babel/runtime/helpers/extends";
import _Input from "@alifd/next/es/input";
import _Field from "@alifd/next/es/field";

/* eslint-disable react/prop-types */
import * as React from 'react';

var InputDialog = function InputDialog(props) {
  var title = props.title,
      content = props.content,
      formProps = props.formProps,
      formItemProps = props.formItemProps,
      children = props.children,
      onOk = props.onOk;

  var field = _Field.useField();

  var _React$useState = React.useState(false),
      visible = _React$useState[0],
      setVisible = _React$useState[1];

  var _React$useState2 = React.useState(false),
      loading = _React$useState2[0],
      setLoading = _React$useState2[1];

  var trigger = React.Children.only(children);

  var handleClick = function handleClick() {
    setVisible(true);
  };

  var handleOk = function handleOk() {
    field.validatePromise().then(function (_ref) {
      var values = _ref.values,
          errors = _ref.errors;

      if (!errors) {
        setLoading(true);
        return onOk === null || onOk === void 0 ? void 0 : onOk(values.value);
      }

      return Promise.reject();
    }).then(function () {
      setVisible(false);
    })["finally"](function () {
      setLoading(false);
    });
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(trigger, {
    onClick: handleClick
  }), /*#__PURE__*/React.createElement(_Dialog, {
    className: "aliretail-input-dialog",
    style: {
      width: 400
    },
    visible: visible,
    onOk: handleOk,
    okProps: {
      loading: loading
    },
    onCancel: function onCancel() {
      return setVisible(false);
    }
  }, /*#__PURE__*/React.createElement(_Message, {
    className: "aliretail-input-dialog-message",
    title: title,
    type: "warning",
    size: "large",
    shape: "addon"
  }, content, /*#__PURE__*/React.createElement(_Form, _extends({
    style: {
      marginTop: 16
    },
    field: field,
    labelCol: {
      span: 5
    },
    wrapperCol: {
      span: 19
    }
  }, formProps), /*#__PURE__*/React.createElement(_Form.Item, _extends({
    required: true
  }, formItemProps), /*#__PURE__*/React.createElement(_Input.TextArea, {
    name: "value",
    placeholder: "\u8BF7\u8F93\u5165"
  }))))));
};

export default InputDialog;