| | |
| | | appType: sessionStorage.getItem('appType') |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('submitStyle', this.getStyle) |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props.config), fromJS(nextProps.config)) |
| | | } |
| | |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('submitStyle', this.getStyle) |
| | | } |
| | | |
| | | getStyle = (comIds, style) => { |
| | | const { config } = this.props |
| | | getStyle = (style) => { |
| | | if (!style.borderBottomWidth) { |
| | | style.borderBottomWidth = '0px' |
| | | } |
| | | |
| | | if (comIds[0] !== config.uuid || comIds[1] !== 'header') return |
| | | |
| | | let _config = {...config, headerStyle: style} |
| | | let _config = {...this.props.config, headerStyle: style} |
| | | |
| | | this.props.updateComponent(_config) |
| | | } |
| | |
| | | changeStyle = () => { |
| | | const { config } = this.props |
| | | |
| | | let options = ['font', 'border'] |
| | | if (config.type === 'menubar') { |
| | | options.push('padding') |
| | | } |
| | | let options = ['font', 'border', 'background', 'padding'] |
| | | |
| | | MKEmitter.emit('changeStyle', [config.uuid, 'header'], options, config.headerStyle) |
| | | MKEmitter.emit('changeStyle', options, config.headerStyle, this.getStyle) |
| | | } |
| | | |
| | | render() { |
| | | const { config, hideSearch } = this.props |
| | | const { appType } = this.state |
| | | |
| | | let title = config.plot ? config.plot.title : config.wrap.title |
| | | let title = '' |
| | | let show = true |
| | | |
| | | if (!title && appType === 'mob' && config.type === 'card' && config.subtype === 'datacard' && config.action && config.action.length) { |
| | | title = ' ' |
| | | if (config.plot) { |
| | | title = config.plot.title |
| | | } else if (config.type === 'group') { |
| | | title = config.setting.title || '' |
| | | } else if (config.wrap) { |
| | | title = config.wrap.title || '' |
| | | } |
| | | |
| | | if (!title && (!config.search || config.search.length === 0 || hideSearch === 'true')) { |
| | | show = false |
| | | } |
| | | let _style = resetStyle(config.headerStyle) |
| | | |
| | | let _s = {display: 'block', flex: 1} |
| | | if (show && ((config.wrap && config.wrap.searchable === 'true') || (hideSearch !== 'true' && config.search && config.search.length))) { |
| | | _s = null |
| | | } |
| | | |
| | | return ( |
| | | <div className={'normal-header' + (!show ? ' hidden' : '') + (config.wrap && config.wrap.searchable === 'true' ? ' tree-search' : '')} style={_style}> |
| | |
| | | <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/> |
| | | </div> |
| | | } trigger="hover"> |
| | | <span className="title">{title}</span> |
| | | <span className="title" style={_s}>{title}</span> |
| | | </Popover> |
| | | {config.wrap && config.wrap.searchable === 'true' ? <span className="ant-input-search ant-input-affix-wrapper"><span className="ant-input-suffix"><SearchOutlined /></span></span> : null} |
| | | {hideSearch !== 'true' && config.search ? <SearchComponent config={config} updatesearch={this.props.updateComponent}/> : null} |