| | |
| | | import React from 'react' |
| | | import { useDrag, useDrop } from 'react-dnd' |
| | | import { Icon, Select, DatePicker, Input, Popover } from 'antd' |
| | | import { Icon, Select, DatePicker, Input, Popover, Form } from 'antd' |
| | | import moment from 'moment' |
| | | |
| | | import DateGroup from '../dategroup' |
| | |
| | | <Icon className="close" title="delete" type="close" onClick={() => delCard(id)} /> |
| | | </div> |
| | | } trigger="hover"> |
| | | <div className="page-card" style={{ opacity: opacity}}> |
| | | <div className={'page-card ' + (card.labelShow || '')} style={{ opacity: opacity}}> |
| | | <div ref={node => drag(drop(node))}> |
| | | <div className="ant-row ant-form-item"> |
| | | <div className="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"> |
| | | <label className={card.required === 'true' ? 'ant-form-item-required' : ''} title={card.label}>{card.label}</label> |
| | | </div> |
| | | <div className="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"> |
| | | {card.type === 'text' ? |
| | | <Input style={{marginTop: '4px'}} value={card.initval} /> : null |
| | | } |
| | | {(card.type === 'multiselect' || card.type === 'select' || card.type === 'link') ? |
| | | <Select value={_defaultValue}></Select> : null |
| | | } |
| | | {card.type === 'date' ? |
| | | <DatePicker value={card.initval ? moment().subtract(card.initval, 'days') : null} /> : null |
| | | } |
| | | {card.type === 'dateweek' ? |
| | | <WeekPicker value={card.initval ? moment().subtract(card.initval * 7, 'days') : null} /> : null |
| | | } |
| | | {card.type === 'datemonth' ? |
| | | <MonthPicker value={card.initval ? moment().subtract(card.initval, 'month') : null} /> : null |
| | | } |
| | | {card.type === 'daterange' ? |
| | | <RangePicker |
| | | className="data-range" |
| | | placeholder={['BeginTime', 'EndTime']} |
| | | renderExtraFooter={() => 'extra footer'} |
| | | value={_defaultValue} |
| | | /> : null |
| | | } |
| | | {card.type === 'group' ? <DateGroup card={card} /> : null } |
| | | </div> |
| | | </div> |
| | | <Form.Item |
| | | labelCol={{xs: { span: 24 }, sm: { span: 8 }}} |
| | | wrapperCol = {{xs: { span: 24 }, sm: { span: 16 }}} |
| | | label={card.labelShow !== 'false' ? card.label : ''} |
| | | required={card.required === 'true'} |
| | | > |
| | | {card.type === 'text' ? |
| | | <Input style={{marginTop: '4px'}} value={card.initval} /> : null |
| | | } |
| | | {(card.type === 'multiselect' || card.type === 'select' || card.type === 'link') ? |
| | | <Select value={_defaultValue}></Select> : null |
| | | } |
| | | {card.type === 'date' ? |
| | | <DatePicker value={card.initval ? moment().subtract(card.initval, 'days') : null} /> : null |
| | | } |
| | | {card.type === 'dateweek' ? |
| | | <WeekPicker value={card.initval ? moment().subtract(card.initval * 7, 'days') : null} /> : null |
| | | } |
| | | {card.type === 'datemonth' ? |
| | | <MonthPicker value={card.initval ? moment().subtract(card.initval, 'month') : null} /> : null |
| | | } |
| | | {card.type === 'daterange' ? |
| | | <RangePicker |
| | | className="data-range" |
| | | placeholder={['BeginTime', 'EndTime']} |
| | | renderExtraFooter={() => 'extra footer'} |
| | | value={_defaultValue} |
| | | /> : null |
| | | } |
| | | {card.type === 'group' ? <DateGroup card={card} /> : null } |
| | | </Form.Item> |
| | | </div> |
| | | </div> |
| | | </Popover> |