| | |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Popover, Col } from 'antd' |
| | | import { PlusOutlined, PlusSquareOutlined, EditOutlined, ToolOutlined, FontColorsOutlined } from '@ant-design/icons' |
| | | import { UpOutlined, PlusOutlined, PlusSquareOutlined, EditOutlined, ToolOutlined, FontColorsOutlined } from '@ant-design/icons' |
| | | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import asyncIconComponent from '@/utils/asyncIconComponent' |
| | |
| | | } |
| | | |
| | | getSettingForms = () => { |
| | | const { cards } = this.props |
| | | const { card } = this.state |
| | | |
| | | let buttons = [] |
| | |
| | | } |
| | | }) |
| | | |
| | | return getSettingForm(card.setting, buttons) |
| | | return getSettingForm(card.setting, buttons, cards.columns, 'main') |
| | | } |
| | | |
| | | getBackSettingForms = () => { |
| | | const { cards } = this.props |
| | | const { card } = this.state |
| | | |
| | | let buttons = [] |
| | |
| | | } |
| | | }) |
| | | |
| | | return getSettingForm(card.backSetting, buttons) |
| | | return getSettingForm(card.backSetting, buttons, cards.subColumns) |
| | | } |
| | | |
| | | updateSetting = (res, type) => { |
| | |
| | | |
| | | let _style = {...card.style} |
| | | let _backStyle = {...card.backStyle} |
| | | |
| | | _backStyle.marginLeft = _style.marginLeft |
| | | _backStyle.marginRight = _style.marginRight |
| | | _backStyle.marginBottom = _style.marginBottom |
| | | |
| | | delete _style.marginBottom |
| | | let _wrapStyle = {} |
| | | |
| | | _style = resetStyle(_style) |
| | | _backStyle = resetStyle(_backStyle) |
| | | |
| | | if (card.setting.position === 'inner') { |
| | | Object.keys(_style).forEach(key => { |
| | | if (!/^(margin|border|box)/.test(key)) return |
| | | _wrapStyle[key] = _style[key] |
| | | delete _style[key] |
| | | }) |
| | | } |
| | | |
| | | let checkAll = '' |
| | | if (cards.wrap.selStyle === 'check') { |
| | | checkAll = 'mk-checkable' |
| | | } else if (cards.wrap.selStyle === 'check square') { |
| | | checkAll = 'mk-checkable square' |
| | | } |
| | | |
| | | return ( |
| | | <Col span={card.setting.width || 24}> |
| | | <div className="card-item-wrap"> |
| | | <div className={'card-item ' + (card.setting.btnControl || '')} style={_style} onDoubleClick={(e) => {e.stopPropagation(); this.doubleClickCard()}} id={card.uuid}> |
| | | <div className="card-item-wrap" style={_wrapStyle}> |
| | | <div className={`card-item ${card.setting.btnControl || ''} ${checkAll} mk-${card.setting.display}`} style={_style} onDoubleClick={(e) => {e.stopPropagation(); this.doubleClickCard()}} id={card.uuid}> |
| | | <span className="circle-select"></span> |
| | | {card.setting.controlIcon === 'left' ? <PlusSquareOutlined /> : <UpOutlined />} |
| | | <div className="card-control" onDoubleClick={(e) => e.stopPropagation()}> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | |
| | | </div> |
| | | <CardCellComponent cards={cards} cardCell={card} side="main" elements={card.elements} updateElement={(elements, btn) => this.updateCard(elements, btn)}/> |
| | | </div> |
| | | <Col span={card.backSetting.width || 24}> |
| | | <div className={'card-item ' + (card.backSetting.btnControl || '')} style={_backStyle} onDoubleClick={(e) => {e.stopPropagation(); this.doubleClickCard('sub')}} id={card.uuid}> |
| | | <div className="card-control" onDoubleClick={(e) => e.stopPropagation()}> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | |
| | | </div> |
| | | <CardCellComponent cards={cards} cardCell={card} side="sub" elements={card.backElements} updateElement={(elements, btn) => this.updateCard(elements, btn, 'sub')}/> |
| | | </div> |
| | | </Col> |
| | | </div> |
| | | </Col> |
| | | ) |