| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Col, Row } from 'antd' |
| | | import { Col, Row, Dropdown, Menu } from 'antd' |
| | | import { CheckOutlined } from '@ant-design/icons' |
| | | |
| | | import MKEmitter from '@/utils/events.js' |
| | |
| | | </div> |
| | | </Col> |
| | | }) |
| | | } else if (display !== 'picture') { |
| | | let _style = selectStyle === 'custom' ? {backgroundColor} : null |
| | | |
| | | return options.map(item => { |
| | | let _active = false |
| | | if (multiple === 'true') { |
| | | _active = selectKeys.includes(item.$value) |
| | | } else { |
| | | _active = selectKeys === item.$value |
| | | } |
| | | |
| | | return <Col span={width} key={item.key}> |
| | | <div className={'card-cell' + (_active ? ' active' : '') + selectClass} onClick={() => this.changeCard(item)}> |
| | | <div className="bg-mask" style={_style}></div> |
| | | {fields.map(col => { |
| | | return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span> |
| | | })} |
| | | </div> |
| | | </Col> |
| | | }) |
| | | } else { |
| | | } else if (display === 'picture') { |
| | | let paddingTop = '100%' |
| | | if (picratio === '4:3') { |
| | | paddingTop = '75%' |
| | |
| | | </div> |
| | | </Col> |
| | | }) |
| | | } else { |
| | | let _style = selectStyle === 'custom' ? {backgroundColor} : null |
| | | |
| | | if (multiple === 'dropdown') { |
| | | return options.map(item => { |
| | | if (item.children.length) { |
| | | return <Col span={width} key={item.key}> |
| | | <Dropdown |
| | | overlayClassName="mk-search-card" |
| | | overlay={ |
| | | <Menu> |
| | | {item.children.map((cell, index) => (<Menu.Item className={selectKeys === cell.$value ? ' active' : ''} key={index} onClick={() => this.changeCard(cell)}>{cell[fields[0].field]}</Menu.Item>))} |
| | | </Menu>} |
| | | placement="bottomCenter" |
| | | > |
| | | <div className={'card-cell' + (selectKeys && (selectKeys === item.$value || item.subIds.includes(selectKeys)) ? ' active' : '') + selectClass} onClick={() => this.changeCard(item)}> |
| | | <div className="bg-mask" style={_style}></div> |
| | | {fields.map(col => { |
| | | return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span> |
| | | })} |
| | | </div> |
| | | </Dropdown> |
| | | </Col> |
| | | |
| | | } else { |
| | | return <Col span={width} key={item.key}> |
| | | <div className={'card-cell' + (selectKeys === item.$value ? ' active' : '') + selectClass} onClick={() => this.changeCard(item)}> |
| | | <div className="bg-mask" style={_style}></div> |
| | | {fields.map(col => { |
| | | return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span> |
| | | })} |
| | | </div> |
| | | </Col> |
| | | } |
| | | }) |
| | | } else { |
| | | return options.map(item => { |
| | | let _active = false |
| | | if (multiple === 'true') { |
| | | _active = selectKeys.includes(item.$value) |
| | | } else { |
| | | _active = selectKeys === item.$value |
| | | } |
| | | |
| | | return <Col span={width} key={item.key}> |
| | | <div className={'card-cell' + (_active ? ' active' : '') + selectClass} onClick={() => this.changeCard(item)}> |
| | | <div className="bg-mask" style={_style}></div> |
| | | {fields.map(col => { |
| | | return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span> |
| | | })} |
| | | </div> |
| | | </Col> |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | |