antd#DatePicker JavaScript Examples

BasicReport = ({report,editReport}) => {

    function onChange(date, dateString) {
        report.reportData = {date:date};
        editReport(report);
      }
      
    return (
        
       <div>
           Selecciona fecha para el Informe : &nbsp;&nbsp;
           <DatePicker onChange={onChange} defaultValue={moment()}/>
            <br />
           </div>
           );
    }

components = {
  Container: ({ children, ...other}) => (
    <div style={{ border: "1px solid #f5f5f5" }} {...other}>
      {children}
    </div>
  ),
  Input,
  Button: ({ label, title, ...other }) => <AButton {...other}>{label || title}</AButton>,
  Row,
  Col,
  Select,
  DatePicker
}

render() {
    return (
      <div>
        <div className="row">
          <div className="col-lg-6">
            <h5 className="mb-3">
              <strong>DatePicker</strong>
            </h5>
            <div className="mb-5">
              <DatePicker onChange={onChange} className="mb-2" />
            </div>
            <h5 className="mb-3">
              <strong>Month Picker</strong>
            </h5>
            <div className="mb-5">
              <MonthPicker onChange={onChange} className="mb-2" placeholder="Select month" />
            </div>
          </div>
          <div className="col-lg-6">
            <h5 className="mb-3">
              <strong>Range Picker</strong>
            </h5>
            <div className="mb-5">
              <RangePicker onChange={onChange} className="mb-2" />
            </div>
            <h5 className="mb-3">
              <strong>Week Picker</strong>
            </h5>
            <div className="mb-5">
              <WeekPicker onChange={onChange} className="mb-2" placeholder="Select week" />
            </div>
          </div>
        </div>
      </div>
    )
  }

TimeSelect = memo(function TimeSelect({ onChange, placeholder, size, value, ...props }) {

  const tools = new Tools();

  const { RangePicker } = DatePicker;

  const monthTime = () => { // 上个月的处理
    let startTime = [],endTime=[];
    if(!moment().month()){ // 等于0，刚好1月的时候
      startTime=[moment().year()-1 ,11,1,'00','00','00'] ;
      endTime=[moment().year()-1 , 11,tools.getMonthDay(moment().year()-1,11),'23','59','59'] ;
    }else{
      startTime=[moment().year()-1 ,moment().month()-1,1,'00','00','00'] ;
      endTime=[ moment().year()-1 ,moment().month()-1,tools.getMonthDay(moment().year()-1,moment().month()-1),'23','59','59'] ;
    }
    return {startTime,endTime}
  }

  const handleCurrencyChange = (currency) => {
    onChange && onChange(currency);
  };

  return (
    <>
      <RangePicker {...props} onChange={handleCurrencyChange} ranges={{
          '今天': [moment().startOf('day'), moment().endOf('day')],
          '昨天': [moment([moment().year(),moment().month() ,moment().date()-1,'00','00','00']), moment([moment().year(),moment().month(),moment().date()-1,'23','59','59'])],
          '最近7天':[moment(new Date().getTime() - 3600 * 1000 * 24 * 6),moment(new Date())],
          '最近30天':[moment(new Date().getTime() - 3600 * 1000 * 24 * 29),moment(new Date())],
          '本月':[moment().startOf('month'), moment().endOf('month')],
          '上月':[moment(monthTime().startTime), moment(monthTime().endTime)]
      }}/>
    </>
  )
})

storiesOf('antd/date-picker', module).add('basic', () => 
  <Space direction="vertical">
    <DatePicker onChange={onChange} />
    <DatePicker onChange={onChange} picker="week" />
    <DatePicker onChange={onChange} picker="month" />
    <DatePicker onChange={onChange} picker="quarter" />
    <DatePicker onChange={onChange} picker="year" />
  </Space>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Basic use case. Users can select or input a date in panel.</p></>) } });

{ RangePicker } = DatePicker

render() {
    const {
      visible,
      onCancel,
      onOk,
      form,
      confirmLoading,
      currentRowData,
    } = this.props;
    const { getFieldDecorator } = form;
    const { id, author, date, readings, star, status, title } = currentRowData;
    const formItemLayout = {
      labelCol: {
        sm: { span: 4 },
      },
      wrapperCol: {
        sm: { span: 16 },
      },
    };
    return (
      <Modal
        title="编辑"
        visible={visible}
        onCancel={onCancel}
        onOk={onOk}
        confirmLoading={confirmLoading}
      >
        <Form {...formItemLayout}>
          <Form.Item label="序号:">
            {getFieldDecorator("id", {
              initialValue: id,
            })(<Input disabled />)}
          </Form.Item>
          <Form.Item label="标题:">
            {getFieldDecorator("title", {
              rules: [{ required: true, message: "请输入标题!" }],
              initialValue: title,
            })(<Input placeholder="标题" />)}
          </Form.Item>
          <Form.Item label="作者:">
            {getFieldDecorator("author", {
              initialValue: author,
            })(<Input disabled />)}
          </Form.Item>
          <Form.Item label="阅读量:">
            {getFieldDecorator("readings", {
              initialValue: readings,
            })(<Input disabled />)}
          </Form.Item>
          <Form.Item label="推荐指数:">
            {getFieldDecorator("star", {
              initialValue: star.length,
            })(<Rate count={3} />)}
          </Form.Item>
          <Form.Item label="状态:">
            {getFieldDecorator("status", {
              initialValue: status,
            })(
              <Select style={{ width: 120 }}>
                <Select.Option value="published">published</Select.Option>
                <Select.Option value="draft">draft</Select.Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item label="时间:">
            {getFieldDecorator("date", {
              rules: [{ type: 'object', required: true, message: '请选择时间!' }],
              initialValue: moment(date || "YYYY-MM-DD HH:mm:ss"),
            })(<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />)}
          </Form.Item>
        </Form>
      </Modal>
    );
  }

render() {
    const { dataSource, page, labalWidth } = this.state
    const { getFieldDecorator } = this.props.form
    const columns = [
      { title: 'id', align: 'center', dataIndex: 'id', sorter: (a, b) => a.id - b.id },
      {
        title: 'Rule ID',
        align: 'center',
        dataIndex: 'rule_id',
        render: ruleId => (<Link to={`/rules?id=${ruleId}`}>{ruleId}</Link>),
      },
      { title: '报警值', align: 'center', dataIndex: 'value' },
      {
        title: '当前状态',
        align: 'center',
        dataIndex: 'status',
        render: status => (
          <span>{status === 2 ? '报警' : status === 0 ? '恢复' : '已确认'}</span>
        ),
      },
      {
        title: '异常分钟数',
        align: 'center',
        dataIndex: 'count',
        render: count => (
          <span>{count+1}</span>
        ),
      },
      { title: '标题', align: 'center', dataIndex: 'summary', width: 100 },
      {
        title: 'label',
        align: 'center',
        dataIndex: 'labels',
        width: labalWidth,
        render: (labels) => {
          if (labels && Object.prototype.toString.call(labels) === '[object Object]') {
            return Object.keys(labels).map(key => <Tag color="cyan" style={{ marginTop: '5px' }}>{key}: {labels[key]}</Tag>)
          }
          return '-'
        },
      },
      { title: '描述', align: 'center', dataIndex: 'description' },
      { title: '确认人', align: 'center', dataIndex: 'confirmed_by' },
      {
        title: '触发时间',
        align: 'center',
        dataIndex: 'fired_at',
        width: tableTimeWidth,
        render: firedAt => (
          <span>{firedAt === '0001-01-01T00:00:00Z' ? '--' : moment(firedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
      {
        title: '确认时间',
        align: 'center',
        dataIndex: 'confirmed_at',
        width: tableTimeWidth,
        render: confirmedAt => (
          <span>{confirmedAt === '0001-01-01T00:00:00Z' ? '--' : moment(confirmedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
      {
        title: '确认截止时间',
        align: 'center',
        dataIndex: 'confirmed_before',
        width: tableTimeWidth,
        render: confirmedBefore => (
          <span>{confirmedBefore === '0001-01-01T00:00:00Z' ? '--' : moment(confirmedBefore).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
      {
        title: '恢复时间',
        align: 'center',
        dataIndex: 'resolved_at',
        width: tableTimeWidth,
        render: resolvedAt => (
          <span>{resolvedAt === '0001-01-01T00:00:00Z' ? '--' : moment(resolvedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
    ]
    return (
      <div>
        <Form layout="inline" onSubmit={this.handleSearch}>
          <Form.Item label="标题">
            {getFieldDecorator('summary', {})(<Input placeholder="请输入标题" />)}
          </Form.Item>
          <Form.Item label="状态">
            {getFieldDecorator('status', {
              initialValue: -1,
            })(<Select>
              <Option value={-1}>所有</Option>
              <Option value={0}>恢复</Option>
              <Option value={1}>已确认</Option>
              <Option value={2}>报警</Option>
            </Select>)}
          </Form.Item>
          <Form.Item label="报警时间" style={{ marginBottom: 0 }}>
            <Form.Item style={{ marginRight: 0 }}>
              {getFieldDecorator('timestart', {})(<DatePicker
                format="YYYY-MM-DD HH:mm:ss"
                showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                placeholder="报警开始时间"
              />)}
            </Form.Item>
            <span style={{ width: '24px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>~</span>
            <Form.Item style={{ marginBottom: 0 }}>
              {getFieldDecorator('timeend', {})(<DatePicker
                format="YYYY-MM-DD HH:mm:ss"
                showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                placeholder="报警结束时间"
              />)}
            </Form.Item>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">查询</Button>
          </Form.Item>
        </Form>
        <Table dataSource={dataSource} columns={columns} pagination={false} scroll={{ x: 1300 }} rowKey="id" />
        <div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: '15px' }}>
          <Pagination onChange={this.pageChange} current={page.current} pageSize={page.size} total={page.total} />
        </div>
      </div>
    )
  }

{MonthPicker} = DatePicker

{ RangePicker } = DatePicker

{ RangePicker } = DatePicker

{ MonthPicker, RangePicker, WeekPicker } = DatePicker

{ RangePicker } = DatePicker

function getElement(item) {
    const {type = 'input', component, ...props} = item;

    const commonProps = {
        size: 'default',
    };
    // 样式
    // const width = props.width || '100%';
    // const elementCommonStyle = {width};
    // props.style = props.style ? {...elementCommonStyle, ...props.style} : elementCommonStyle;

    // 如果 component 存在，说明是自定义组件
    if (component) {
        return typeof component === 'function' ? component() : component;
    }

    if (isInputLikeElement(type)) {
        if (type === 'number') return <InputNumber {...commonProps} {...props}/>;
        if (type === 'textarea') return <TextArea {...commonProps} {...props}/>;
        if (type === 'password') return <Password {...commonProps} {...props}/>;

        return <Input {...commonProps} type={type} {...props}/>;
    }

    if (type === 'select') {
        const {options = [], ...others} = props;

        return (
            <Select {...commonProps} {...others}>
                {
                    options.map(opt => <Select.Option key={opt.value} {...opt}>{opt.label}</Select.Option>)
                }
            </Select>
        );
    }

    if (type === 'select-tree') return <TreeSelect {...commonProps} {...props} treeData={props.options}/>;

    if (type === 'checkbox') return <Checkbox {...commonProps} {...props}>{props.label}</Checkbox>;
    if (type === 'checkbox-group') return <Checkbox.Group {...commonProps} {...props}/>;

    if (type === 'radio') return <Radio {...commonProps} {...props}>{props.label}</Radio>;
    if (type === 'radio-group') return <Radio.Group {...commonProps} {...props}/>;
    if (type === 'radio-button') {
        const {options = [], ...others} = props;
        return (
            <Radio.Group buttonStyle="solid" {...commonProps} {...others}>
                {options.map(opt => <Radio.Button key={opt.value} {...opt}>{opt.label}</Radio.Button>)}
            </Radio.Group>
        );
    }

    if (type === 'cascader') return <Cascader {...commonProps} {...props}/>;

    if (type === 'switch') return <Switch {...commonProps} {...props} style={{...props.style, width: 'auto'}}/>;

    if (type === 'date') return <DatePicker {...commonProps} {...props}/>;

    if (type === 'date-time') return <DatePicker {...commonProps} showTime {...props}/>;

    if (type === 'date-range') return <DatePicker.RangePicker {...commonProps} {...props}/>;

    if (type === 'month') return <DatePicker.MonthPicker {...commonProps} {...props}/>;

    if (type === 'time') return <TimePicker {...commonProps} {...props}/>;

    if (type === 'transfer') return <Transfer {...commonProps} {...props}/>;

    if (type === 'icon-picker') return <IconPicker {...commonProps} {...props}/>;

    throw new Error(`no such type: ${type}`);
}

{ RangePicker } = DatePicker

{ RangePicker } = DatePicker

{ RangePicker } = DatePicker

{ MonthPicker, RangePicker } = DatePicker

render() {
        return (
            <div>
                <DatePicker style={{width: "80%", paddingRight: "10%"}} placeholder={this.state.placeholder} format={"YYYY-MM-DD"} value={this.state.date} onChange={this.date_on_change}/>
            </div>
        )
    }

render() {
    const { RangePicker } = DatePicker;
    const { Option } = Select;
    const { isShowTime, isMonitor, isError } = this.props;

    let SelectTime = '';
    if (isShowTime) {
      SelectTime = (
        <Radio.Group defaultValue="1" buttonStyle="solid" onChange={this.changeTime} className="ui-mr20">
          {
                Object.keys(FILTER_TIME).map((value) => <Radio.Button value={value} key={value}>{FILTER_TIME[value]}</Radio.Button>)
            }
        </Radio.Group>
        );
    }

    let SelectField = '';
    if (isMonitor) {
        SelectField = (
          <Select defaultValue="选择性能字段" style={{ width: 160 }} onChange={this.changeField} className="ui-mr20">
            {
            Object.keys(PERFORMANCE).map((value) => <Option value={value} key={value}>{PERFORMANCE[value]}</Option>)
            }
          </Select>
        );
    }

    let SelectType = '';
    if (isError) {
        SelectType = (
          <Select defaultValue="选择错误类别" style={{ width: 160 }} onChange={this.changeType} className="ui-mr20">
            {
            Object.keys(ERROR_TYPE).map((value) => <Option value={value} key={value}>{ERROR_TYPE[value]}</Option>)
            }
          </Select>
        );
    }

    return (
      <>
        <div className="ui-mb20">
          <SelectProjects change={this.changeProject} />
          {SelectField}
          {SelectType}
        </div>
        <div className="ui-mb20">
          <RangePicker onChange={this.changeDate} className="ui-mr20" showTime={{ format: 'HH:mm' }} format="YYYY-MM-DD HH:mm" />
          {SelectTime}
          <Button onClick={this.onSubmit} type="primary">查询</Button>
        </div>
      </>
    );
  }

render() {
        const disabledDate = startValue => {
            return moment(new Date(startValue), "YYYY-MM-DD").isBefore(
                moment(new Date(), "YYYY-MM-DD")
            );
        };

        const columns = [
            {
                title: "Batch",
                dataIndex: 'batch',
                key: "batch",
                align: 'center',
                render : (text) =>
                    commonConstants.yearToTextMap[text]
            },
            {
                title: "Registration Deadline",
                dataIndex: 'deadline',
                key: 'deadline',
                align: 'center',
                render : (date, row) =>
                    <DatePicker
                        initialValue={new Date(date)}
                        disabled={!row.open}
                        disabledDate={disabledDate}
                        onChange={() => this.onDateChange(row.branch)}
                    />
            },
        ];

        const rowSelection = {
            columnTitle: "Open Registration",
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: this.handleOnChange
        };

        const tableProps = {
            columns,
            loading: false,
            rowSelection,
            dataSource: this.props.data,
            bordered: true,
        };

        return (
            <Table {...tableProps} />
        );
    }

render() {
        const { firstName,middleName,lastName,gender, loading, imageUrl } = this.state;
        const uploadButton = (
            <div>
                {loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div style={{ marginTop: 8 }}>Upload</div>
            </div>
        );

        const onPreview = async file => {
            let src = file.url;
            if (!src) {
                src = await new Promise(resolve => {
                    const reader = new FileReader();
                    reader.readAsDataURL(file.originFileObj);
                    reader.onload = () => resolve(reader.result);
                });
            }
            const image = new Image();
            image.src = src;
            const imgWindow = window.open(src);
            imgWindow.document.write(image.outerHTML);
        };

        return (
            <div>
                <Row justify="space-around" >
                    <Row justify="start" gutter={[16, 16]}>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <ImgCrop rotate>
                                <Upload
                                    name="avatar"
                                    listType="picture-card"
                                    multiple={false}
                                    className="avatar-uploader"
                                    showUploadList={false}
                                    onPreview={onPreview}
                                    customRequest={this.customUpload}
                                    beforeUpload={beforeUpload}
                                    onChange={this.handleUpload}
                                >
                                    {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                                </Upload>
                            </ImgCrop>

                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <Input type="text" id="firstName" value={firstName} placeholder="First Name" onChange={this.handleFirstName} />
                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <Input type="text" id="middleName" value={middleName} placeholder="Middle Name" onChange={this.handleMiddleName} />
                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <Select id="gender"  style={{width:'100%'}} placeholder="Gender" value={gender} onChange={this.handleChangeGender}>
                                <Option value="Male">Male</Option>
                                <Option value="Female">Female</Option>
                                <Option value="Other">Other</Option>
                            </Select>
                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <Input type="text" id="lastName" value={lastName} placeholder="Last Name" onChange={this.handleLastName} />
                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <DatePicker type="text" id="dob" ref="datePicker" style={{width:'100%'}} value={this.state.dateValue}  selected={this.state.dob}  placeholder="Date of Birth" onChange={this.handleChangeDate} />
                        </Col>
                    </Row>

                </Row>
                <br/>
                <Button type="primary" onClick={this.handleSubmit}>Add Item</Button>
            </div>
        )
    }

{ RangePicker } = DatePicker

{ RangePicker } = DatePicker

render() {
    const info = () => {
      Modal.info({
        title: 'some info',
        content: 'some info',
      });
    };
    const confirm = () => {
      Modal.confirm({
        title: 'some info',
        content: 'some info',
      });
    };
    return (
      <div className="locale-components">
        <div className="example">
          <Pagination defaultCurrent={1} total={50} showSizeChanger />
        </div>
        <div className="example">
          <Select showSearch style={{ width: 200 }}>
            <Option value="jack">jack</Option>
            <Option value="lucy">lucy</Option>
          </Select>
          <DatePicker />
          <TimePicker />
          <RangePicker style={{ width: 200 }} />
        </div>
        <div className="example">
          <Button type="primary" onClick={this.showModal}>
            Show Modal
          </Button>
          <Button onClick={info}>Show info</Button>
          <Button onClick={confirm}>Show confirm</Button>
          <Popconfirm title="Question?">
            <a href="#">Click to confirm</a>
          </Popconfirm>
        </div>
        <div className="example">
          <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
        </div>
        <div className="site-config-provider-calendar-wrapper">
          <Calendar fullscreen={false} value={moment()} />
        </div>
        <div className="example">
          <Table dataSource={[]} columns={columns} />
        </div>
        <Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
          <p>Locale Modal</p>
        </Modal>
      </div>
    );
  }

Calendar = ({setDate}) => (
  <Col>
    <Form.Item className="CalendarLabel" label="Select a date" name="Select a date" >
      <DatePicker onChange={(_, dateString) => setDate(dateString)} />
    </Form.Item>
  </Col>
)

{ RangePicker } = DatePicker

UpdateForm = props => {
  const [formVals, setFormVals] = useState({
    name: props.values.name,
    desc: props.values.desc,
    key: props.values.key,
    target: '0',
    template: '0',
    type: '1',
    time: '',
    frequency: 'month',
  });
  const [currentStep, setCurrentStep] = useState(0);
  const [form] = Form.useForm();
  const {
    onSubmit: handleUpdate,
    onCancel: handleUpdateModalVisible,
    updateModalVisible,
    values,
  } = props;

  const forward = () => setCurrentStep(currentStep + 1);

  const backward = () => setCurrentStep(currentStep - 1);

  const handleNext = async () => {
    const fieldsValue = await form.validateFields();
    setFormVals({ ...formVals, ...fieldsValue });

    if (currentStep < 2) {
      forward();
    } else {
      handleUpdate({ ...formVals, ...fieldsValue });
    }
  };

  const renderContent = () => {
    if (currentStep === 1) {
      return (
        <>
          <FormItem name="target" label="监控对象">
            <Select
              style={{
                width: '100%',
              }}
            >
              <Option value="0">表一</Option>
              <Option value="1">表二</Option>
            </Select>
          </FormItem>
          <FormItem name="template" label="规则模板">
            <Select
              style={{
                width: '100%',
              }}
            >
              <Option value="0">规则模板一</Option>
              <Option value="1">规则模板二</Option>
            </Select>
          </FormItem>
          <FormItem name="type" label="规则类型">
            <RadioGroup>
              <Radio value="0">强</Radio>
              <Radio value="1">弱</Radio>
            </RadioGroup>
          </FormItem>
        </>
      );
    }

    if (currentStep === 2) {
      return (
        <>
          <FormItem
            name="time"
            label="开始时间"
            rules={[
              {
                required: true,
                message: '请选择开始时间！',
              },
            ]}
          >
            <DatePicker
              style={{
                width: '100%',
              }}
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              placeholder="选择开始时间"
            />
          </FormItem>
          <FormItem name="frequency" label="调度周期">
            <Select
              style={{
                width: '100%',
              }}
            >
              <Option value="month">月</Option>
              <Option value="week">周</Option>
            </Select>
          </FormItem>
        </>
      );
    }

    return (
      <>
        <FormItem
          name="name"
          label="规则名称"
          rules={[
            {
              required: true,
              message: '请输入规则名称！',
            },
          ]}
        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem
          name="desc"
          label="规则描述"
          rules={[
            {
              required: true,
              message: '请输入至少五个字符的规则描述！',
              min: 5,
            },
          ]}
        >
          <TextArea rows={4} placeholder="请输入至少五个字符" />
        </FormItem>
      </>
    );
  };

  const renderFooter = () => {
    if (currentStep === 1) {
      return (
        <>
          <Button
            style={{
              float: 'left',
            }}
            onClick={backward}
          >
            上一步
          </Button>
          <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
          <Button type="primary" onClick={() => handleNext()}>
            下一步
          </Button>
        </>
      );
    }

    if (currentStep === 2) {
      return (
        <>
          <Button
            style={{
              float: 'left',
            }}
            onClick={backward}
          >
            上一步
          </Button>
          <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
          <Button type="primary" onClick={() => handleNext()}>
            完成
          </Button>
        </>
      );
    }

    return (
      <>
        <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
        <Button type="primary" onClick={() => handleNext()}>
          下一步
        </Button>
      </>
    );
  };

  return (
    <Modal
      width={640}
      bodyStyle={{
        padding: '32px 40px 48px',
      }}
      destroyOnClose
      title="规则配置"
      visible={updateModalVisible}
      footer={renderFooter()}
      onCancel={() => handleUpdateModalVisible()}
    >
      <Steps
        style={{
          marginBottom: 28,
        }}
        size="small"
        current={currentStep}
      >
        <Step title="基本信息" />
        <Step title="配置规则属性" />
        <Step title="设定调度周期" />
      </Steps>
      <Form
        {...formLayout}
        form={form}
        initialValues={{
          target: formVals.target,
          template: formVals.template,
          type: formVals.type,
          frequency: formVals.frequency,
          name: formVals.name,
          desc: formVals.desc,
        }}
      >
        {renderContent()}
      </Form>
    </Modal>
  );
}

SaveCart = (props) => {
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(actionCreators.getCurrentUser())
  }, [dispatch, props])

  const [delivery, setDelivery] = useState(true);
  const cartContents = useSelector((state) => state.cart);
  const sellerId = useSelector((state) => state.user.user._id);
  const storeDetails = useSelector((state) => state.user.user);
  const sign = useCurrency(storeDetails.currency);
  const checkoutCart = cartContents.filter((item) => {
    return item.quantity > 0;
  });
  const contents = cartContents.map((cart) => {
    return { product: cart.productId, quantity: cart.quantity };
  });
  const toggleAddyFalse = () => {
    setDelivery(false);
  };
  const toggleAddyTrue = () => {
    setDelivery(true);
  };
  const totalPrice = (arr) => {
    return arr.reduce((sum, item) => {
      return sum + item.price * item.quantity;
    }, 0);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    props.form.validateFieldsAndScroll({ force: true }, (err, values) => {
      if (!err) {
        info(values);
      } 
    });
  };
  const info = (values) => {
    Modal.info({
      title: 'Forwarding to WhatsApp',
      content:
        "When you click OK you'll be redirected to WhatsApp to contact the seller with your sales enquiry so they can confirm stock availability and delivery / collection details.",
      onOk() {
        const payload = {
          contents,
          deliveryOrCollection: values.delivery,
          checkoutDate: values.date,
          paymentPreference: values.payment,
          address: values.address ? values.address : 'no address',
          total: totalPrice(checkoutCart),
          agreedPrice: totalPrice(checkoutCart),
          email: '[email protected]',
          storeId: sellerId,
        };
        axios
          .post(
            `https://shopping-cart-be.herokuapp.com/api/store/${sellerId}/cart/submit`,
            payload
          )
          .then((res) => {
            const { text, sellerPhone } = res.data;
            window.location = `https://api.whatsapp.com/send?phone=${sellerPhone}&text=${text}`;
          })
          .catch((e) => {
            console.log(e.response.data);
          });
      },
    });
  };

  const disabledDate = (current) =>
    // Can not select days before today
    current && current < moment().endOf('day').subtract(1, 'day');

  const { getFieldDecorator } = props.form;

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };
  const tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 16,
        offset: 8,
      },
    },
  };
  const config = {
    rules: [
      { type: 'object', required: false, message: 'Please select time!' },
    ],
  };
  return (
    <div data-testid="saveCartWrapper" className='savecart-cover'>
      <div data-testid="saveCartInner" id='inner'>
        <div data-testid="saveCartCheckout" className='checkout'>
          <div data-testid="saveCartOrder" className='order'>
            <p>Order Summary</p>
            <div data-testid="saveCartSummary" className='summary'>
              {checkoutCart.map((item) => (
                <div className='units' key={item.productId}>
                  {item.name} ({item.quantity} unit
                  {item.quantity > 1 ? 's' : ''}) - {sign}
                  {item.price}
                </div>
              ))}
            </div>
          </div>
        </div>
        <div data-testid="saveCartLower" className='lower'>
          <Form data-testid="mainForm" {...formItemLayout} onSubmit={handleSubmit}>
            <div data-testid="LowerHeader" id='header'>
              <p>
                Take a second to tell us your collection/delivery and payments
                preferences.
              </p>
            </div>
            <Form.Item data-testid="Form.Item-Delivery.Option" label='Delivery option'>
              {getFieldDecorator('delivery')(
                <Radio.Group>
                  <Radio onClick={toggleAddyTrue} value='Delivery'>
                    Delivery
                  </Radio>
                  <Radio onClick={toggleAddyFalse} value='Collection'>
                    Collection
                  </Radio>
                </Radio.Group>
              )}
            </Form.Item>
            <span className={delivery ? 'addy' : 'info'}>
              Please wait for confirmation from the seller that your order is
              available and then collect it from: {storeDetails.address}
            </span>
            <span className={delivery ? 'info' : 'addy'}>
              Enter your delivery address in the field below if you opt for
              delivery. If you would rather collect the item in person, the
              seller will contact you with the Whatsapp number you provided
              above
            </span>
            <Form.Item 
              data-testid="FormItem-Address"
              className={delivery ? 'ant-row ant-form-item' : 'addy'}
              label='Delivery Address'>
              {getFieldDecorator('address', {
                rules: [
                  { required: false, message: 'Please input your address!' },
                ],
              })(<Input />)}
            </Form.Item>
            <Form.Item data-testid="FormItem-Collection" label='Collection/Delivery date'>
              {getFieldDecorator(
                'date',
                config
              )(<DatePicker disabledDate={disabledDate} />)}
            </Form.Item>
            <Form.Item data-testid="FormItem-RadioGroup" label='Payment preference'>
              {getFieldDecorator('payment')(
                <Radio.Group data-testid="RadioGroup">
                  <Radio value='Cash'>Pay with Cash</Radio>
                  <Radio value='Card'>Pay with Card</Radio>
                  <Radio value='USSD'>Pay with USSD</Radio>
                </Radio.Group>
              )}
            </Form.Item>
            <Form.Item data-testid="FormItemButton" className='primary' {...tailFormItemLayout}>
              <button htmltype = 'submit'>
                Submit
              </button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
}