@bchr/bchr-front-lib 0.5.9 → 0.5.10

package/src/base/layout/KendoGridCellRenders.js

@@ -0,0 +1,790 @@
+import React from 'react';
+import moment from "moment";
+import lodash from 'lodash';
+import {Select, TreeSelect, Input, InputNumber, Switch, DatePicker, RangePicker} from 'antd';
+import LangTypes from "../utils/LangTypes";
+import RefInput from "./RefInput";
+import {Values} from "../utils";
+
+const KendoGridHeaderRowMustCellRender = function (props) {
+    let {title} = props;
+    return <div className="k-grid-header-must-cell">
+        <span className="icon-must">*</span>
+        {title}
+    </div>
+}
+
+const KendoGridRowNumberCellRender = function(props) {
+    return <td colSpan="1"
+               className={`k-sequence-number-cell ${props.className}`}
+               role="gridcell"
+               aria-colindex="1"
+               aria-selected="false"
+               data-grid-col-index="0"
+               style={props.style}>{props.dataIndex + 1}</td>;
+}
+
+const KendoGridRowTimeUnitCellRender = function(props) {
+    return <td className={` ${props.className}`} style={props.style}>{props.dataItem[props.field] == 0 ? "小时" : "天"}</td>;
+}
+
+const KendoGridRowNumberTagCellRender = function(props) {
+    return <td colSpan="1"
+               className={`k-sequence-number-cell ${props.className}`}
+               role="gridcell"
+               aria-colindex="1"
+               aria-selected="false"
+               data-grid-col-index="0"
+               style={props.style}>
+        {props.dataIndex + 1}
+        {props.dataItem.b_enable_sn_track  && <span className="kendo-grid-row-number-tag">序</span>}
+        {!props.dataItem.b_enable_sn_track && <span className="kendo-grid-row-number-no-tag"></span>}
+    </td>;
+}
+
+const KendoGridFilterCellRender = function(props) {
+    return <span className="iconfont icon-personal-search"/>;
+}
+
+const KendoGridBooleanCellRender = function(props) {
+    return <td className={props.className} style={props.style}>{LangTypes.asBooleanValue(props.dataItem[props.field]) ? "是" : "否"}</td>;
+}
+
+const KendoGridVersionCellRender = function(props) {
+    return <td className={props.className} style={props.style}>v{props.dataItem[props.field]}</td>;
+}
+
+const KendoGridEmptyCellRender = function(props) {
+    return <td className={props.className} style={props.style}>{props.dataItem[props.field] || '--'}</td>;
+}
+
+const KendoGridPercentCellRender = function(props) {
+    return <td className={props.className} style={props.style}>{props.dataItem[props.field] + "%"}</td>;
+}
+
+const KendoGridTimeStampCellRender = function(props) {
+    if (props.dataItem[props.field]) {
+        return <td className={props.className} style={props.style}>{moment(props.dataItem[props.field]).format("yyyy-MM-DD HH:mm:ss")}</td>;
+    }
+    else {
+        return <td className={props.className} style={props.style}></td>;
+    }
+}
+
+const KendoGridDateCellRender = function(props) {
+    if (props.dataItem[props.field]) {
+        return <td className={props.className} style={props.style}>{moment(props.dataItem[props.field]).format("yyyy-MM-DD")}</td>;
+    }
+    else {
+        return <td className={props.className} style={props.style}></td>;
+    }
+}
+
+class KendoGridSelectCellRender extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    foreRefreshUI = () => {
+        this.setState({stateBarTS : new Date().getTime()});
+    }
+
+    onChange = (objectValue) => {
+        const { dataItem, field, selectProps } = this.props;
+        let {onChangeExtFunc} = selectProps;
+
+        if (objectValue.label) {
+            if (field.endsWith("_ext_name")) {
+                dataItem[field] = objectValue.label;
+                let pkFieldName = field.substring(0, field.length - "_ext_name".length) + "_pk";
+                dataItem[pkFieldName] = objectValue.value;
+            }
+            else if (field.endsWith("_pk")) {
+                dataItem[field] = objectValue.value;
+                let extNameFieldName = field.substring(0, field.length - "_pk".length) + "_ext_name";
+                dataItem[extNameFieldName] = objectValue.label;
+            }
+            else {
+                dataItem[field] = objectValue.value;
+                dataItem[field + "_ext_name"] = objectValue.label;
+            }
+        }
+        else {
+            dataItem[field] = objectValue;
+        }
+
+        this.foreRefreshUI();
+        if (lodash.isFunction(onChangeExtFunc)) {
+            onChangeExtFunc(dataItem)
+        }
+    }
+
+    buildSelectControlInTD = (dataItem) => {
+        const field = this.props.field || "";
+        let {selectProps} = this.props;
+        let newSelectProps = {...selectProps};
+        if (!(newSelectProps.onChangeWithObject === false)) {
+            newSelectProps.onChangeWithObject = true;
+        }
+
+        const value = dataItem[field] === null ? "" : dataItem[field];
+        let displayExtName = '';
+        if (selectProps && Values.isNotEmptyArray(selectProps.optionList)) {
+            displayExtName = selectProps.optionList.find(option => option.value == value)?.label;
+        }
+
+        let dataValue = "";
+        if (field.endsWith("_ext_name")) {
+            let pkFieldName = field.substring(0, field.length - "_ext_name".length) + "_pk";
+            dataValue = {
+                label : dataItem[field],
+                value : dataItem[pkFieldName]
+            };
+        }
+        else if (field.endsWith("_pk")) {
+            let extNameFieldName = field.substring(0, field.length - "_pk".length) + "_ext_name";
+            dataValue = {
+                label : dataItem[extNameFieldName],
+                value : dataItem[field]
+            };
+        }
+        else {
+            dataValue = {
+                label : dataItem[field + "_ext_name"] || displayExtName,
+                value : dataItem[field]
+            };
+        }
+
+        if (newSelectProps.onChangeExtFunc) {
+            delete newSelectProps.onChangeExtFunc;
+        }
+
+        return <td className={"k-grid-edit-cell"}>
+            <Select {...newSelectProps}
+                    value={dataValue}
+                    onChange={this.onChange}/>
+        </td>;
+    }
+
+    buildTextControlInTD = (dataItem) => {
+        let {field, className, style, selectProps} = this.props;
+        const dataValue = dataItem[field] === null ? "" : dataItem[field];
+        let displayExtName = '';
+        if (selectProps && Values.isNotEmptyArray(selectProps.optionList)) {
+            displayExtName = selectProps.optionList.find(option => option.value == dataValue)?.label;
+        }
+
+        return <td className={className} style={style}>
+            {selectProps.type === 'link' && <a onClick={() => {
+                if (lodash.isFunction(selectProps.onClick)) {
+                    selectProps.onClick(dataItem)
+                }
+            }}>{displayExtName}</a>}
+            {!selectProps.type && displayExtName}
+        </td>;
+    }
+
+    render() {
+        const { dataItem, selectProps } = this.props;
+        if (selectProps?.disabledField) {
+            let disabled = dataItem[selectProps?.disabledField];
+            if (selectProps?.disabledValue) {
+                disabled = dataItem[selectProps?.disabledField] !== selectProps?.disabledValue;
+            }
+            return dataItem.inEditState && disabled ? this.buildSelectControlInTD(dataItem) : this.buildTextControlInTD(dataItem);
+        }
+        return dataItem.inEditState ? this.buildSelectControlInTD(dataItem) : this.buildTextControlInTD(dataItem);
+    }
+}
+
+class KendoGridTreeSelectCellRender extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    foreRefreshUI = () => {
+        this.setState({stateBarTS : new Date().getTime()});
+    }
+
+    onChange = (objectValue) => {
+        const { dataItem, field, selectProps } = this.props;
+        let {onChangeExtFunc} = selectProps;
+
+        if (objectValue.label) {
+            if (field.endsWith("_ext_name")) {
+                dataItem[field] = objectValue.label;
+                let pkFieldName = field.substring(0, field.length - "_ext_name".length) + "_pk";
+                dataItem[pkFieldName] = objectValue.value;
+            }
+            else if (field.endsWith("_pk")) {
+                dataItem[field] = objectValue.value;
+                let extNameFieldName = field.substring(0, field.length - "_pk".length) + "_ext_name";
+                dataItem[extNameFieldName] = objectValue.label;
+            }
+            else {
+                dataItem[field] = objectValue.value;
+                dataItem[field + "_ext_name"] = objectValue.label;
+            }
+        }
+        else {
+            dataItem[field] = objectValue;
+        }
+
+        this.foreRefreshUI();
+        if (lodash.isFunction(onChangeExtFunc)) {
+            onChangeExtFunc(dataItem)
+        }
+    }
+
+    buildTreeSelectControlInTD = (dataItem) => {
+        const field = this.props.field || "";
+        let {selectProps} = this.props;
+        let newSelectProps = {...selectProps};
+        if (!(newSelectProps.onChangeWithObject === false)) {
+            newSelectProps.onChangeWithObject = true;
+        }
+
+        let dataValue = "";
+        if (newSelectProps.onChangeWithObject) {
+            if (field.endsWith("_ext_name")) {
+                let pkFieldName = field.substring(0, field.length - "_ext_name".length) + "_pk";
+                dataValue = {
+                    label : dataItem[field],
+                    value : dataItem[pkFieldName]
+                };
+            }
+            else if (field.endsWith("_pk")) {
+                let extNameFieldName = field.substring(0, field.length - "_pk".length) + "_ext_name";
+                dataValue = {
+                    label : dataItem[extNameFieldName],
+                    value : dataItem[field]
+                };
+            }
+            else {
+                dataValue = {
+                    label : dataItem[field + "_ext_name"],
+                    value : dataItem[field]
+                };
+            }
+        }
+        else {
+            dataValue = dataItem[field] === null ? "" : dataItem[field];
+        }
+
+        if (newSelectProps.onChangeExtFunc) {
+            delete newSelectProps.onChangeExtFunc;
+        }
+
+        return <td className={`${this.props.className} k-grid-edit-cell`} style={this.props.style}>
+            <TreeSelect {...newSelectProps}
+                    size={"large"}
+                    value={dataValue}
+                    onChange={this.onChange}
+                    style={{ width: '100%' }}>
+            </TreeSelect>
+        </td>;
+    }
+
+    buildTextControlInTD = (dataItem) => {
+        let {selectProps} = this.props;
+        const field = this.props.field || "";
+        const dataValue = dataItem[field] === null ? "" : dataItem[field];
+        return <td className={this.props.className} style={this.props.style}>
+            {selectProps.type === 'link' && <a onClick={() => {
+                if (lodash.isFunction(selectProps.onClick)) {
+                    selectProps.onClick(dataItem)
+                }
+            }}>{dataValue}</a>}
+            {!selectProps.type && dataValue}
+        </td>;
+    }
+
+    render() {
+        const { dataItem, selectProps } = this.props;
+        if (selectProps?.disabledField) {
+            let disabled = dataItem[selectProps?.disabledField];
+            if (selectProps?.disabledValue) {
+                disabled = dataItem[selectProps?.disabledField] !== selectProps?.disabledValue;
+            }
+            return dataItem.inEditState && disabled ? this.buildTreeSelectControlInTD(dataItem) : this.buildTextControlInTD(dataItem);
+        }
+        return dataItem.inEditState ? this.buildTreeSelectControlInTD(dataItem) : this.buildTextControlInTD(dataItem);
+    }
+}
+
+class KendoGridInputNumberCellRender extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    foreRefreshUI = () => {
+        this.setState({stateBarTS : new Date().getTime()});
+    }
+
+    onNumberChange = (value) => {
+        const { dataItem, field, inputNumberProps } = this.props;
+        let {onChangeExtFunc} = inputNumberProps;
+        dataItem[field] = value;
+        this.foreRefreshUI();
+        if (lodash.isFunction(onChangeExtFunc)) {
+            onChangeExtFunc(dataItem)
+        }
+    }
+
+    buildInputNumberControlInTD = (dataItem) => {
+        const field = this.props.field || "";
+        let {inputNumberProps} = this.props;
+        const dataValue = dataItem[field] === null ? "" : dataItem[field];
+
+        let props = {...inputNumberProps};
+        if (props.onChangeExtFunc) {
+            delete props.onChangeExtFunc;
+        }
+
+        if (props.disabledValue) {
+            delete props.disabledValue;
+        }
+
+        if (props.disabledField) {
+            delete props.disabledField;
+        }
+
+        return <td className={`${this.props.className} k-grid-edit-cell`} style={this.props.style}>
+            <InputNumber {...props}
+                         size={"large"}
+                         onChange={this.onNumberChange}
+                         value={dataValue}
+                         style={{ width: '100%' }}/>
+        </td>;
+    }
+
+    buildTextControlInTD = (dataItem) => {
+        const {inputNumberProps} = this.props;
+        const field = this.props.field || "";
+        const dataValue = dataItem[field] === null ? "" : dataItem[field];
+        return <td className={this.props.className} style={this.props.style}>
+            {inputNumberProps.type === 'link' && <a onClick={() => {
+                if (lodash.isFunction(inputNumberProps.onClick)) {
+                    inputNumberProps.onClick(dataItem)
+                }
+            }}>{dataValue}</a>}
+            {!inputNumberProps.type && dataValue}
+        </td>;
+    }
+
+    render() {
+        const { dataItem, inputNumberProps } = this.props;
+        if (inputNumberProps?.disabledField) {
+            let disabled = dataItem[inputNumberProps?.disabledField];
+            if (inputNumberProps?.disabledValue) {
+                disabled = dataItem[inputNumberProps?.disabledField] !== inputNumberProps?.disabledValue;
+            }
+            return dataItem.inEditState && disabled ? this.buildInputNumberControlInTD(dataItem) : this.buildTextControlInTD(dataItem);
+        }
+        return dataItem.inEditState ? this.buildInputNumberControlInTD(dataItem) : this.buildTextControlInTD(dataItem);
+    }
+}
+
+class KendoGridInputTextCellRender extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    foreRefreshUI = () => {
+        this.setState({stateBarTS : new Date().getTime()});
+    }
+
+    onChange = (value) => {
+        const { dataItem, field, inputProps } = this.props;
+        let {onChangeExtFunc} = inputProps;
+        dataItem[field] = value;
+        this.foreRefreshUI();
+        if (lodash.isFunction(onChangeExtFunc)) {
+            onChangeExtFunc(dataItem)
+        }
+    }
+
+    buildInputTextControlInTD = (dataItem) => {
+        const field = this.props.field || "";
+        let {inputProps} = this.props;
+        let dataValue = dataItem[field] === null ? "" : dataItem[field];
+
+        let props = {...inputProps};
+        if (props.onChangeExtFunc) {
+            delete props.onChangeExtFunc;
+        }
+
+        if (props.disabledValue) {
+            delete props.disabledValue;
+        }
+
+        if (props.disabledField) {
+            delete props.disabledField;
+        }
+
+        return <td className={`${this.props.className} k-grid-edit-cell`} style={this.props.style}>
+            <Input {...props}
+                   size={"large"}
+                   onChange={this.onChange}
+                   value={dataValue}/>
+        </td>;
+    }
+
+    buildTextControlInTD = (dataItem) => {
+        const {inputProps} = this.props;
+        const field = this.props.field || "";
+        const dataValue = dataItem[field] === null ? "" : dataItem[field];
+        return <td className={this.props.className} style={this.props.style}>
+            {inputProps.type === 'link' && <a onClick={() => {
+                if (lodash.isFunction(inputProps.onClick)) {
+                    inputProps.onClick(dataItem)
+                }
+            }}>{dataValue}</a>}
+            {!inputProps.type && dataValue}
+        </td>;
+    }
+
+    render() {
+        const { dataItem, inputProps } = this.props;
+        if (inputProps?.disabledField) {
+            let disabled = dataItem[inputProps?.disabledField];
+            if (inputProps?.disabledValue) {
+                disabled = dataItem[inputProps?.disabledField] !== inputProps?.disabledValue;
+            }
+            return dataItem.inEditState && disabled ? this.buildInputTextControlInTD(dataItem) : this.buildTextControlInTD(dataItem);
+        }
+        return dataItem.inEditState ? this.buildInputTextControlInTD(dataItem) : this.buildTextControlInTD(dataItem);
+    }
+}
+
+class KendoGridDatePickerCellRender extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    foreRefreshUI = () => {
+        this.setState({stateBarTS : new Date().getTime()});
+    }
+
+    onChange = (value) => {
+        const { dataItem, field, datePickerProps } = this.props;
+        dataItem[field] = value;
+        let {onChangeExtFunc} = datePickerProps;
+        if (lodash.isFunction(onChangeExtFunc)) {
+            onChangeExtFunc(dataItem)
+        }
+        this.foreRefreshUI();
+    }
+
+    buildDatePickerControlInTD = (dataItem) => {
+        let {field, className, style} = this.props;
+        let {datePickerProps} = this.props;
+        const dataValue = dataItem[field] === null ? "" : dataItem[field];
+
+        let props = {...datePickerProps};
+        let pickerType = props.type;
+
+        if (props.onChangeExtFunc) {
+            delete props.onChangeExtFunc;
+        }
+
+        if (props.disabledValue) {
+            delete props.disabledValue;
+        }
+
+        if (props.disabledField) {
+            delete props.disabledField;
+        }
+
+        if (props.type) {
+            pickerType = props.type;
+            delete props.type;
+        }
+
+        if (pickerType === buildKendoGridDatePickerCellRender.prototype.DateTypes.DATE || pickerType === buildKendoGridDatePickerCellRender.prototype.DateTypes.DATETIME || pickerType === buildKendoGridDatePickerCellRender.prototype.DateTypes.MONTH) {
+            return <td className={`${className} k-grid-edit-cell`} style={style}>
+                <DatePicker {...props}
+                            showTime={pickerType === buildKendoGridDatePickerCellRender.prototype.DateTypes.DATETIME}
+                            picker={props.type}
+                            onChange={this.onChange}
+                            value={dataValue}/>
+            </td>;
+        }
+        else if (pickerType === buildKendoGridDatePickerCellRender.prototype.DateTypes.DATE_RANGE || pickerType === buildKendoGridDatePickerCellRender.prototype.DateTypes.DATETIME_RANGE || pickerType === buildKendoGridDatePickerCellRender.prototype.DateTypes.MONTH_RANGE) {
+            return <td className={`${className} k-grid-edit-cell`} style={style}>
+                <RangePicker {...props}
+                             showTime={pickerType === buildKendoGridDatePickerCellRender.prototype.DateTypes.DATETIME_RANGE}
+                             picker={pickerType.split('Range')[0]}
+                             onChange={this.onChange}
+                             value={dataValue}/>
+            </td>;
+        }
+    }
+
+    buildTextControlInTD = (dataItem) => {
+        let {field, className, style, datePickerProps} = this.props;
+        let {type, format} = datePickerProps;
+        let dataValue = dataItem[field];
+
+        if (dataValue !== null) {
+            if (type === buildKendoGridDatePickerCellRender.prototype.DateTypes.DATE) {
+                format = 'YYYY-MM-DD';
+                dataValue = moment(dataItem[field]).format(format);
+            }
+            else if (type === buildKendoGridDatePickerCellRender.prototype.DateTypes.DATE_RANGE) {
+                format = 'YYYY-MM-DD';
+                dataValue = [moment(dataItem[field][0]).format(format), moment(dataItem[field][1]).format(format)];
+            }
+            else if (type === buildKendoGridDatePickerCellRender.prototype.DateTypes.DATETIME) {
+                format = 'YYYY-MM-DD HH:mm:ss';
+                dataValue = moment(dataItem[field]).format(format);
+            }
+            else if (type === buildKendoGridDatePickerCellRender.prototype.DateTypes.DATETIME_RANGE) {
+                format = 'YYYY-MM-DD HH:mm:ss';
+                dataValue = [moment(dataItem[field][0]).format(format), moment(dataItem[field][1]).format(format)];
+            }
+        } else {
+            dataValue = '';
+        }
+
+        return <td className={className} style={style}>
+            {datePickerProps.type === 'link' && <a onClick={() => {
+                if (lodash.isFunction(datePickerProps.onClick)) {
+                    datePickerProps.onClick(dataItem)
+                }
+            }}>{dataValue}</a>}
+            {dataValue}
+        </td>;
+    }
+
+    render() {
+        const { dataItem, datePickerProps } = this.props;
+        if (datePickerProps?.disabledField) {
+            let disabled = dataItem[datePickerProps?.disabledField];
+            if (datePickerProps?.disabledValue) {
+                disabled = dataItem[datePickerProps?.disabledField] !== datePickerProps?.disabledValue;
+            }
+            return dataItem.inEditState && disabled ? this.buildDatePickerControlInTD(dataItem) : this.buildTextControlInTD(dataItem);
+        }
+        return dataItem.inEditState ? this.buildDatePickerControlInTD(dataItem) : this.buildTextControlInTD(dataItem);
+    }
+}
+
+class KendoGridSwitchCellRender extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    foreRefreshUI = () => {
+        this.setState({stateBarTS : new Date().getTime()});
+    }
+
+    onChange = (objectChecked) => {
+        const { dataItem, field, switchProps } = this.props;
+        let {_this, onChangeExtFunc} = switchProps;
+        dataItem[field] = objectChecked;
+        this.foreRefreshUI();
+        _this.forceUpdate(() => {
+            if (lodash.isFunction(onChangeExtFunc)) {
+                onChangeExtFunc(dataItem, this.props, objectChecked)
+            }
+        })
+    }
+
+    buildSwitchControlInTD = (dataItem) => {
+        let {field, className, style, switchProps} = this.props;
+        let newSelectProps = {...switchProps};
+        if (!(newSelectProps.onChangeWithObject === false)) {
+            newSelectProps.onChangeWithObject = true;
+        }
+
+        let dataChecked = dataItem[field] === null ? "" : dataItem[field];
+
+        if (newSelectProps.onChangeExtFunc) {
+            delete newSelectProps.onChangeExtFunc;
+        }
+
+        return <td className={`${className} k-grid-edit-cell`} style={style}>
+            <Switch {...newSelectProps}
+                    checked={!!dataChecked}
+                    onChange={this.onChange}/>
+        </td>;
+    }
+
+    buildTextControlInTD = (dataItem) => {
+        let {field, className, style} = this.props;
+        const dataValue = dataItem[field] ? '是' : '否';
+        return <td className={className} style={style}>{dataValue}</td>;
+    }
+
+    render() {
+        const { dataItem, switchProps } = this.props;
+        if (switchProps?.disabledField) {
+            let disabled = dataItem[switchProps?.disabledField];
+            if (switchProps?.disabledValue) {
+                disabled = dataItem[switchProps?.disabledField] !== switchProps?.disabledValue;
+            }
+            return dataItem.inEditState && disabled ? this.buildSwitchControlInTD(dataItem) : this.buildTextControlInTD(dataItem)
+        }
+        return dataItem.inEditState ? this.buildSwitchControlInTD(dataItem) : this.buildTextControlInTD(dataItem)
+    }
+}
+
+class KendoGridRefInputCellRender extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    onChange = (data, dataItem) => {
+        let {inputProps} = this.props;
+        let {_this, onChangeExtFunc} = inputProps;
+
+        _this.forceUpdate(() => {
+            if (lodash.isFunction(onChangeExtFunc)) {
+                onChangeExtFunc(data, dataItem)
+            }
+        });
+    }
+
+    buildInputTextControlInTD = (dataItem) => {
+        let {field, className, style, inputProps} = this.props;
+        const dataValue = dataItem[field] === null ? "" : dataItem[field];
+
+        return <td className={`${className} k-grid-edit-cell`} style={style}>
+            <RefInput field={field}
+                      value={dataValue}
+                      showClear
+                      data={dataItem}
+                      readonly={inputProps.readonly}
+                      rules={inputProps.rules || false}
+                      refCode={inputProps.dictCode}
+                      refDialogWidth={inputProps.refDialogWidth || 600}
+                      refDialogHeight={inputProps.refDialogHeight || 300}
+                      isNotData={inputProps.isNotData}
+                      multiple={inputProps.multiple}
+                      customGridData={inputProps.customGridData}
+                      customRefUIConfig={inputProps.customRefUIConfig}
+                      onBeforeClick={inputProps.onBeforeClick}
+                      okCallback={inputProps.onChangeExtFunc || this.onChange}/>
+        </td>;
+    }
+
+    buildTextControlInTD = (dataItem) => {
+        let {field, className, style, inputProps} = this.props;
+        const dataValue = dataItem[field] === null ? "" : dataItem[field];
+        return <td className={className} style={style}>
+            {inputProps.type === 'link' && <a onClick={() => {
+                if (lodash.isFunction(inputProps.onClick)) {
+                    inputProps.onClick(dataItem)
+                }
+            }}>{dataValue}</a>}
+            {!inputProps.type && dataValue}
+        </td>;
+    }
+
+    render() {
+        const { dataItem, inputProps } = this.props;
+
+        if (inputProps?.disabledField) {
+            let disabled = dataItem[inputProps?.disabledField];
+            if (inputProps?.disabledValue) {
+                disabled = dataItem[inputProps?.disabledField] !== inputProps?.disabledValue;
+            }
+            return dataItem.inEditState && disabled ? this.buildInputTextControlInTD(dataItem) : this.buildTextControlInTD(dataItem)
+        }
+        return dataItem.inEditState ? this.buildInputTextControlInTD(dataItem) : this.buildTextControlInTD(dataItem)
+    }
+}
+
+const buildKendoGridSelectCellRender = function(_this, selectProps) {
+    return (props) => {
+        let mergedProps = {...props};
+        if (_this) mergedProps.selectProps = {_this};
+        if (selectProps) mergedProps.selectProps = {_this, ...selectProps};
+        return <KendoGridSelectCellRender {...mergedProps} />
+    };
+}
+
+const buildKendoGridTreeSelectCellRender = function(_this, selectProps) {
+    return (props) => {
+        let mergedProps = {...props};
+        if (_this) mergedProps.selectProps = {_this};
+        if (selectProps) mergedProps.selectProps = {_this, ...selectProps};
+        return <KendoGridTreeSelectCellRender {...mergedProps} />
+    };
+}
+
+const buildKendoGridInputNumberCellRender = function(_this, inputNumberProps) {
+    return (props) => {
+        let mergedProps = {...props};
+        if (_this) mergedProps.inputNumberProps = {_this};
+        if (inputNumberProps) mergedProps.inputNumberProps = {_this, ...inputNumberProps};
+        return <KendoGridInputNumberCellRender {...mergedProps} />
+    };
+}
+
+const buildKendoGridInputCellRender = function(_this, inputProps) {
+    return (props) => {
+        let mergedProps = {...props};
+        if (_this) mergedProps.inputProps = {_this};
+        if (inputProps) mergedProps.inputProps = {_this, ...inputProps};
+        return <KendoGridInputTextCellRender {...mergedProps} />
+    };
+}
+
+const buildKendoGridDatePickerCellRender = function (_this, datePickerProps) {
+    return (props) => {
+        let mergedProps = {...props};
+        if (_this) mergedProps.datePickerProps = {_this};
+        if (datePickerProps) mergedProps.datePickerProps = {_this, ...datePickerProps};
+        return <KendoGridDatePickerCellRender {...mergedProps}/>
+    }
+}
+
+buildKendoGridDatePickerCellRender.prototype.DateTypes = {
+    DATE: 'date',
+    MONTH: 'month',
+    DATETIME: 'dateTime',
+    DATE_RANGE: 'dateRange',
+    DATETIME_RANGE: 'dateTimeRange',
+    MONTH_RANGE: 'monthRange',
+}
+
+const buildKendoGridSwitchCellRender = function (_this, switchProps) {
+    return (props) => {
+        let mergedProps = {...props};
+        if (_this) mergedProps.switchProps = {_this};
+        if (switchProps) mergedProps.switchProps = {_this, ...switchProps};
+        return <KendoGridSwitchCellRender {...mergedProps}/>
+    }
+}
+
+const buildKendoGridRefInputCellRender = function (_this, inputProps) {
+    return (props) => {
+        let mergedProps = {...props};
+        if (_this) mergedProps.inputProps = {_this};
+        if (inputProps) mergedProps.inputProps = {_this, ...inputProps};
+        return <KendoGridRefInputCellRender {...mergedProps}/>
+    }
+}
+
+export {
+    KendoGridRowNumberCellRender,
+    KendoGridRowNumberTagCellRender,
+    KendoGridRowTimeUnitCellRender,
+    KendoGridHeaderRowMustCellRender,
+    KendoGridBooleanCellRender,
+    KendoGridVersionCellRender,
+    KendoGridEmptyCellRender,
+    KendoGridFilterCellRender,
+    KendoGridPercentCellRender,
+    KendoGridTimeStampCellRender,
+    KendoGridDateCellRender,
+    buildKendoGridSelectCellRender,
+    buildKendoGridTreeSelectCellRender,
+    buildKendoGridInputNumberCellRender,
+    buildKendoGridInputCellRender,
+    buildKendoGridDatePickerCellRender,
+    buildKendoGridSwitchCellRender,
+    buildKendoGridRefInputCellRender
+}