React ant design drawer outside click error message notification option

Question

I used the React ant design drawer , When the user did not complete the form, I clicked on the outer side of the drawer and tried to display the notification message. but its not working, anyone know how to do that correctly stack blitz here Code here

    import React, { Component } from 'react';
    import { render } from 'react-dom';
    import 'antd/dist/antd.css';
    import './style.css';
    import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker, Icon } from 'antd';


    const { Option } = Select;

    class App extends Component {
    state = { visible: false };

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  render() {

    return (
       <div>
        <Button type="primary" onClick={this.showDrawer}>
          <Icon type="plus" /> New account
        </Button>
        <Drawer
          title="Create a new account"
          width={720}
          onClose={this.onClose}
          visible={this.state.visible}
          bodyStyle={{ paddingBottom: 80 }}
        >

            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="Name">
                 <Input placeholder="Please enter user name" />)}
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="Url">

                    <Input
                      style={{ width: '100%' }}
                      addonBefore="http://"
                      addonAfter=".com"
                      placeholder="Please enter url"
                    />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="Owner">

                    <Select placeholder="Please select an owner">
                      <Option value="xiao">Xiaoxiao Fu</Option>
                      <Option value="mao">Maomao Zhou</Option>
                    </Select>

                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="Type">

                    <Select placeholder="Please choose the type">
                      <Option value="private">Private</Option>
                      <Option value="public">Public</Option>
                    </Select>

                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="Approver">

                    <Select placeholder="Please choose the approver">
                      <Option value="jack">Jack Ma</Option>
                      <Option value="tom">Tom Liu</Option>
                    </Select>

                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="DateTime">

                    <DatePicker.RangePicker
                      style={{ width: '100%' }}
                      getPopupContainer={trigger => trigger.parentNode}
                    />

                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={24}>
                <Form.Item label="Description">

                 <Input.TextArea rows={4} placeholder="please enter url description" />)}
                </Form.Item>
              </Col>
            </Row>

          <div
            style={{
              position: 'absolute',
              right: 0,
              bottom: 0,
              width: '100%',
              borderTop: '1px solid #e9e9e9',
              padding: '10px 16px',
              background: '#fff',
              textAlign: 'right',
            }}
          >
            <Button onClick={this.onClose} style={{ marginRight: 8 }}>
              Cancel
            </Button>
            <Button onClick={this.onClose} type="primary">
              Submit
            </Button>
          </div>
        </Drawer>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 1

You need to add the logic about displaying notification on the onClose method of the <Drawer/> . Note that this method takes as input the elements that can trigger 'close' of drawer which are a div (background mask), an svg (X icon) and a button (Cancel).

At the following example the error notification is displayed if any input is empty when the drawer mask is clicked.

You can find also the example here: https://stackblitz.com/edit/react-28u4zw

import React, { Component } from "react";
import { render } from "react-dom";
import "antd/dist/antd.css";
import "./style.css";
import {
  message,
  Drawer,
  Form,
  Button,
  Col,
  Row,
  Input,
  Select,
  DatePicker,
  Icon
} from "antd";

const { Option } = Select;

const FIELD_NAMES = ["name", "url", "owner", "type", "approver", "dates"];

const initialValues = FIELD_NAMES.reduce(
  (fieldList, fieldName) => ({ ...fieldList, [fieldName]: null }),
  {}
);

class App extends Component {
  state = {
    visible: false,
    ...initialValues
  };

  showDrawer = () => {
    this.setState({
      visible: true
    });
  };

  onClose = e => {
    this.setState({
      visible: false
    });

    const emptyFieldNames = FIELD_NAMES.filter(
      fieldName => !this.state[fieldName]
    );

    if (emptyFieldNames.length > 0 && e.target.tagName === "DIV") {
      return message.error(
        `Please fill ${emptyFieldNames.join(", ")} field(s)`
      );
    }
  };

  setInput = fieldName => e => {
    this.setState({ [fieldName]: e.target.value });
  };

  setSelect = fieldName => val => {
    this.setState({ [fieldName]: val });
  };

  setDate = fieldName => dateList => {
    this.setState({ [fieldName]: dateList.length > 0 ? dateList : null });
  };

  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showDrawer}>
          <Icon type="plus" /> New account
        </Button>
        <Drawer
          title="Create a new account"
          width={720}
          onClose={this.onClose}
          visible={this.state.visible}
          bodyStyle={{ paddingBottom: 80 }}
        >
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="Name">
                <Input
                  placeholder="Please enter user name"
                  onChange={this.setInput("name")}
                />
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="Url">
                <Input
                  style={{ width: "100%" }}
                  addonBefore="http://"
                  addonAfter=".com"
                  placeholder="Please enter url"
                  onChange={this.setInput("url")}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="Owner">
                <Select
                  placeholder="Please select an owner"
                  onChange={this.setSelect("owner")}
                >
                  <Option value="xiao">Xiaoxiao Fu</Option>
                  <Option value="mao">Maomao Zhou</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="Type">
                <Select
                  placeholder="Please choose the type"
                  onChange={this.setSelect("type")}
                >
                  <Option value="private">Private</Option>
                  <Option value="public">Public</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="Approver">
                <Select
                  placeholder="Please choose the approver"
                  onChange={this.setSelect("approver")}
                >
                  <Option value="jack">Jack Ma</Option>
                  <Option value="tom">Tom Liu</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="DateTime">
                <DatePicker.RangePicker
                  style={{ width: "100%" }}
                  getPopupContainer={trigger => trigger.parentNode}
                  onChange={this.setDate("dates")}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item label="Description">
                <Input.TextArea
                  rows={4}
                  placeholder="please enter url description"
                />
                )}
              </Form.Item>
            </Col>
          </Row>

          <div
            style={{
              position: "absolute",
              right: 0,
              bottom: 0,
              width: "100%",
              borderTop: "1px solid #e9e9e9",
              padding: "10px 16px",
              background: "#fff",
              textAlign: "right"
            }}
          >
            <Button onClick={this.onClose} style={{ marginRight: 8 }}>
              Cancel
            </Button>
            <Button onClick={this.onClose} type="primary">
              Submit
            </Button>
          </div>
        </Drawer>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));