demo-tabledata-redis/src/web/src/modules/components/parameter/parameter_input/parameter_input.ts

import { shortcut, store } from '../../../core/core';
import { HtapeXtype, EditorXtype, TextButtonXtype, TabXtype, IconComboXtype } from 'ui';
import { ParameterInputModel } from './parameter_input.model';
import { inputTypes } from '../parameter.typings';
import { getInput } from './input/input.service';
import './input/input';
import './parameter_input.less';

@shortcut()
@store(ParameterInputModel)
export class ParameterInput extends BI.BasicButton {
    static xtype = 'plugin.report.json.components.parameter_input'

    props = {
        inputName: '',
        inputValue: '',
        height: 22,
        id: '',
        baseCls: 'plugin-report-json-parameter-input',
    }

    store: ParameterInputModel['store']
    model: ParameterInputModel['model']

    tab: any;
    parameterName: any;
    parameterValue: any;
    iconCombo: any;

    render() {
        let { inputName, inputValue } = this.options;
        const { id } = this.options;
        
        return {
            type: HtapeXtype,
            cls: 'bi-border',
            items: [{
                el: {
                    type: EditorXtype,
                    height: 22,
                    allowBlank: true,
                    value: inputName,
                    ref: (_ref: any) => {
                        this.parameterName = _ref;
                    },
                    listeners: [{
                        eventName: BI.TextEditor.EVENT_CHANGE,
                        action: () => {
                            inputName = this.parameterName.getValue();
                            this.tab.setSelect(inputName ? 'string' : 'tip');
                            inputValue = inputName ? inputValue : '';
                            this.store.setParameterName(id, inputName);
                        },
                    }, {
                        eventName: BI.TextEditor.EVENT_FOCUS,
                        action: () => {
                            this.store.setSelectedId(id);
                        },
                    }],
                },
                width: 0.5,
            }, {
                el: {
                    type: HtapeXtype,
                    items: [{
                        type: TabXtype,
                        single: true,
                        showIndex: inputName ? 'string' : 'tip',
                        ref: (_ref: any) => {
                            this.tab = _ref;
                        },
                        cardCreator: (index: inputTypes | 'tip') => this.renderInputs(index),
                    }],
                },
                width: 0.5,
            }],
        };
    }

    private renderInputs(type: inputTypes | 'tip') {
        const { inputValue, id } = this.options;
        if (type === 'tip') {
            return {
                type: TextButtonXtype,
                cls: 'bi-error bi-border-left',
                text: BI.i18nText('Plugin-Redis_Parameter_Please_Set_Parameter_Name'),
                handler: () => {
                    this.parameterName.focus();
                },
            };
        }
        const xtype = getInput(type);
        
        return {
            type: HtapeXtype,
            items: [{
                el: {
                    type: IconComboXtype,
                    cls: 'bi-border-left bi-border-right',
                    height: 22,
                    width: 25,
                    value: type,
                    items: this.renderDownList(),
                    ref: (_ref: any) => {
                        this.iconCombo = _ref;
                    },
                    listeners: [{
                        eventName: 'EVENT_CHANGE',
                        action: () => {
                            this.tab.setSelect('tip');
                            const typeValue = this.iconCombo.getValue()[0];
                            if (typeValue) {
                                this.tab.setSelect(typeValue);
                            }
                        },
                    }],
                },
                width: 25,
            }, {
                type: xtype,
                value: inputValue,
                listeners: [{
                    eventName: 'EVENT_CHANGE',
                    action: (value: string) => {
                        const type = this.iconCombo.getValue()[0];
                        this.store.setParameterValue(id, value, type);
                    },
                }, {
                    eventName: 'EVENT_FOCUS',
                    action: () => {
                        this.store.setSelectedId(id);
                    },
                }],
            }],
        };
    }

    private renderDownList() {
        return [{
            text: BI.i18nText('Plugin-Redis_Parameter_Type_String'),
            value: 'string',
            iconCls: 'input-string-font',
        }, {
            text: BI.i18nText('Plugin-Redis_Parameter_Type_Int'),
            value: 'int',
            iconCls: 'input-int-font',
        }, {
            text: BI.i18nText('Plugin-Redis_Parameter_Type_Number'),
            value: 'number',
            iconCls: 'input-number-font',
        }, {
            text: BI.i18nText('Plugin-Redis_Parameter_Type_Date'),
            value: 'date',
            iconCls: 'input-date-font',
        }, {
            text: BI.i18nText('Plugin-Redis_Parameter_Type_Boolean'),
            value: 'boolean',
            iconCls: 'input-boolean-font',
        }, {
            text: BI.i18nText('Plugin-Redis_Parameter_Type_Formula'),
            value: 'formula',
            iconCls: 'input-formula-font',
        }];
    }
}