import React from 'react' import { fromJS } from 'immutable' import { Icon, Row, Col, Modal, InputNumber, Button, Radio, Select } from 'antd' const RadioGroup = Radio.Group const Option = Select.Option import ColorPicker from 'components/ColorPicker' import ConditionValuesControl from 'components/ConditionValuesControl' import { OperatorTypesLocale, TableCellConditionOperatorTypes } from 'utils/operatorTypes' import { ITableConditionStyle } from './types' import { TableConditionStyleTypes, AvailableTableConditionStyleTypes, TableConditionStyleTypesSetting } from './constants' import styles from './styles.less' import stylesConfig from '../styles.less' interface IConditionStyleConfigModalProps { visible: boolean visualType: string style: ITableConditionStyle onCancel: () => void onSave: (style: ITableConditionStyle) => void } interface IConditionStyleConfigModalStates { localStyle: ITableConditionStyle } class ConditionStyleConfigModal extends React.PureComponent { public constructor (props) { super(props) this.state = { localStyle: null } } public componentWillReceiveProps (props) { const { style } = props const localStyle: ITableConditionStyle = style && fromJS(style).toJS() this.setState({ localStyle }) } private propChange = (propName: string, propPath?: 'colors' | 'bar') => (e) => { const value = e.target ? e.target.value : e this.setState(({ localStyle }) => { if (!propPath) { return { localStyle: { ...localStyle, [propName]: value } } } else { const subProp = localStyle[propPath] return { localStyle: { ...localStyle, [propPath]: { ...subProp, [propName]: value } } } } }) } private getOperatorTypeOptions (visualType: string) { const options = Object.entries(TableCellConditionOperatorTypes) .filter(([_, values]) => ~values.indexOf(visualType)) .map(([type]) => ( )) return options } private renderConfigItems = () => { const { localStyle } = this.state const { type } = localStyle switch (type) { case TableConditionStyleTypes.BackgroundColor: return this.renderBackgroundColor() case TableConditionStyleTypes.TextColor: return this.renderTextColor() case TableConditionStyleTypes.NumericBar: return this.renderNumericBar() case TableConditionStyleTypes.Custom: return this.renderCustom() default: return null } } private renderBackgroundColor = () => { const { localStyle } = this.state const { colors } = localStyle const { background, fore } = colors return ( 颜色: ) } private renderTextColor = () => { const { localStyle } = this.state const { colors } = localStyle const { fore } = colors return ( 颜色: ) } private zeroPositionOptions = [{ label: '自动', value: 'auto' }, { label: '中部', value: 'center' }] private barModeOptions = [{ label: '自动', value: 'auto' }, { label: '指定值', value: 'fixed' }] private renderNumericBar = () => { const { localStyle } = this.state const { zeroPosition, colors, bar } = localStyle const { positive, negative, fore } = colors const { mode: barMode, max: barMax, min: barMin } = bar return ( <> 坐标轴位置: 颜色: 最大(小)值: {barMode === 'fixed' && ( <> 最小值: 最大值: )} ) } private renderCustom = () => { return ( 编辑文本: ) } private cancel = () => { this.props.onCancel() } private save = () => { this.props.onSave(this.state.localStyle) } private modalFooter = [( ), ( )] private getConditionTypeOptions (visualType: string) { const options = Object.entries(AvailableTableConditionStyleTypes) .filter(([type]) => ~TableConditionStyleTypesSetting[type].indexOf(visualType)) .map(([type, name]) => ( )) return options } private conditionValuesChange = (values) => { this.setState({ localStyle: { ...this.state.localStyle, conditionValues: values } }) } public render () { const { visible, visualType } = this.props const { localStyle } = this.state if (!localStyle) { return (
) } const { type, operatorType, conditionValues } = localStyle return (
样式类型: 关系: 值: {this.renderConfigItems()}
) } } export default ConditionStyleConfigModal