Drawer3.x

antd3.x Drawer文档 https://3x.ant.design/components/drawer-cn

DrawerForm

DrawerForm.js

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import {
  Drawer, Form, Button, Col, Row, Input, Select, DatePicker
} from 'antd';
const { Item } = Form;
const { Option } = Select;
DrawerpropTypes = {
  title: PropTypes.string,
  value: PropTypes.object,
  onChange: PropTypes.func.isRequired,
};
DrawerdefualtProps = {
  title: '新增账户',
  value: {},
};
function DrawerForm({ title, value, onChange, form }) {
  const [visible, setVisible] = useState(false);
  const { getFieldDecorator } = form;
  const onShow = () => setVisible(true);
  const onClose = () => {
    setVisible(false);
    form.resetFields();
  };
  function onSubmit() {
    form.validateFieldsAndScroll((err, values) => {
      if (err) return
      onChange(values)
      onClose()
    })
  }
  const attr = {
    title,
    visible,
    width: 720,
    closable: false,
    onClose,
  }
  return (
    <>
      <Button onClick={onShow}>新建</Button>
      <Drawer {...attr}>
        <Form onSubmit={onSubmit}>
          <Row gutter={16}>
            <Col span={12}>
              <Item label="用户名">
                {getFieldDecorator('name', {
                  rules: [{ required: true, message: 'Please' }],
                  initialValue: value.name,
                })(<Input placeholder="Please" />)}
              </Item>
            </Col>
            <Col span={12}>
              <Item label="网站">
                {getFieldDecorator('url', {
                  rules: [{ required: true, message: 'Please' }],
                  initialValue: value.url,
                })(
                  <Input
                    className='full'
                    addonBefore="http://"
                    addonAfter=".com"
                    placeholder="Please"
                  />,
                )}
              </Item>
            </Col>
            <Col span={12}>
              <Item label="建议">
                {getFieldDecorator('approver', {
                  rules: [{ required: true, message: 'Please choose the approver' }],
                  initialValue: value.approver,
                })(
                  <Select placeholder="Please choose the approver">
                    <Option value="jack">Jack Ma</Option>
                    <Option value="tom">Tom Liu</Option>
                  </Select>,
                )}
              </Item>
            </Col>
            <Col span={12}>
              <Item label="日期">
                {getFieldDecorator('time', {
                  rules: [{ required: true, message: 'Please choose the dateTime' }],
                  initialValue: value.time,
                })(
                  <DatePicker.RangePicker
                    className='full'
                    getPopupContainer={trigger => trigger.parentNode}
                  />,
                )}
              </Item>
            </Col>
            <Col span={24}>
              <Item label="描述">
                {getFieldDecorator('description', {
                  rules: [
                    { required: true, message: 'please' },
                  ],
                  initialValue: value.description,
                })(<Input.TextArea rows={4} placeholder="please" />)}
              </Item>
            </Col>
          </Row>
        </Form>
        <div className="drawer-action">
          <Button onClick={onClose} className="mr16" block>
            取消
          </Button>
          <Button htmlType='submit' type="primary" block>
            确定
          </Button>
        </div>
      </Drawer>
    </>
  )
}
export default Form.create()(DrawerForm);

DrawerCard

DrawerCard.js

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Card, Drawer, Button, Icon, Row, Col } from 'antd';
const options = [
  { label: '股票', value: 1, icon: 'stock' },
  { label: '债券', value: 2, icon: 'bar-chart' },
  { label: '期货', value: 3, icon: 'ordered-list' },
  { label: '大宗商品', value: 4, icon: 'control' },
  { label: '固定收益', value: 5, icon: 'sliders' },
];
DrawerCard.propTypes = {
  title: PropTypes.string,
  onChange: PropTypes.func.isRequired,
};
DrawerCard.defualtProps = {
  title: '请选择理财产品',
};
function DrawerCard({ title, onChange }) {
  const [visible, setVisible] = useState(false);
  const [selected, setSelected] = useState(1);
  const onShow = () => setVisible(true);
  const onClose = () => setVisible(false);
  const onClick = value => setSelected(value);
  const onSubmit = () => {
    onChange(selected);
    onClose();
  };
  const attr = {
    width: 400,
    title,
    visible,
    onClose,
    closable: false, // 不显示标题右侧的X
    maskClosable: false, // 点击遮罩不关闭抽递
  };
  return (
    <>
      <Button onClick={onShow}>新建</Button>
      <Drawer {...attr}>
        <Row gutter={16}>
          {options.map(({ label, value, icon }) => {
            return (
              <Col key={value} span={12} className="mb16 text-center">
                <Card
                  hoverable
                  size="small"
                  className={selected === value ? 'card-selected' : ''}
                  onClick={() => onClick(value)}
                >
                  <Icon type={icon} className='fontSize32 mb16' />
                  <footer>{label}</footer>
                </Card>
              </Col>
            );
          })}
        </Row>
        <div className="drawer-action">
          <Button onClick={onClose} className="mr16" block>
            取消
          </Button>
          <Button onClick={onSubmit} type="primary" block>
            确定
          </Button>
        </div>
      </Drawer>
    </>
  );
}
export default DrawerCard;

index.less

放到 src/index.less里面作为一个全局的样式

// Drawer 确定取消样式
.drawer-action {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 8px 16px;
  background-color: #fff;
  border-top: 1px solid #dedede;
  text-align: right;
}
// Card 选中样式
.card-selected {
  background-color: #0070cc;
  border-color: #0070cc;
  color: #fff;
}