dtable-ui-component 6.0.49 → 6.0.50

package/lib/RowExpandFormatter/index.js

@@ -10,6 +10,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
 var _constants = require("./constants");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class RowExpandFormatter extends _react.default.Component {
   constructor(_props) {
     super(_props);
@@ -49,7 +50,7 @@ class RowExpandFormatter extends _react.default.Component {
       return collaborators || [];
     };
     this.renderEmpty = () => {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "d-flex align-items-center form-control disabled h-auto"
       });
     };
@@ -72,125 +73,135 @@ class RowExpandFormatter extends _react.default.Component {
       switch (columnType) {
         case _dtableUtils.CellType.TEXT:
           {
-            return /*#__PURE__*/_react.default.createElement("div", {
-              className: "form-control d-flex align-items-center w-100"
-            }, /*#__PURE__*/_react.default.createElement(Formatter, {
-              value: cellValue,
-              containerClassName: containerClassName
-            }));
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "form-control d-flex align-items-center w-100",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
+                value: cellValue,
+                containerClassName: containerClassName
+              })
+            });
           }
         case _dtableUtils.CellType.COLLABORATOR:
           {
-            return /*#__PURE__*/_react.default.createElement("div", {
-              className: "form-control d-flex align-items-center w-100 h-auto"
-            }, /*#__PURE__*/_react.default.createElement(Formatter, {
-              value: cellValue,
-              collaborators: collaborators,
-              containerClassName: containerClassName
-            }));
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "form-control d-flex align-items-center w-100 h-auto",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
+                value: cellValue,
+                collaborators: collaborators,
+                containerClassName: containerClassName
+              })
+            });
           }
         case _dtableUtils.CellType.LONG_TEXT:
           {
-            if (!cellValue) return /*#__PURE__*/_react.default.createElement("div", {
+            if (!cellValue) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "form-control d-flex align-items-center w-100"
             });
-            return /*#__PURE__*/_react.default.createElement("div", {
-              className: "longtext-formatter-container"
-            }, /*#__PURE__*/_react.default.createElement(Formatter, {
-              value: cellValue,
-              containerClassName: containerClassName,
-              isSample: false
-            }));
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "longtext-formatter-container",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
+                value: cellValue,
+                containerClassName: containerClassName,
+                isSample: false
+              })
+            });
           }
         case _dtableUtils.CellType.GEOLOCATION:
           {
             if (!cellValue) return null;
             if (typeof cellValue !== 'object') return null;
-            return /*#__PURE__*/_react.default.createElement("div", {
-              className: "dtable-ui-geolocation-formatter-container"
-            }, /*#__PURE__*/_react.default.createElement(Formatter, {
-              value: cellValue,
-              data: column.data,
-              containerClassName: containerClassName
-            }));
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "dtable-ui-geolocation-formatter-container",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
+                value: cellValue,
+                data: column.data,
+                containerClassName: containerClassName
+              })
+            });
           }
         case _dtableUtils.CellType.NUMBER:
           {
-            return /*#__PURE__*/_react.default.createElement("div", {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "form-control d-flex align-items-center",
               style: {
                 width: 320
-              }
-            }, /*#__PURE__*/_react.default.createElement(Formatter, {
-              value: cellValue,
-              data: column.data,
-              containerClassName: containerClassName
-            }));
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
+                value: cellValue,
+                data: column.data,
+                containerClassName: containerClassName
+              })
+            });
           }
         case _dtableUtils.CellType.DATE:
           {
-            return /*#__PURE__*/_react.default.createElement("div", {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "form-control d-flex align-items-center",
               style: {
                 width: 320
-              }
-            }, /*#__PURE__*/_react.default.createElement(Formatter, {
-              value: cellValue,
-              format: column.data.format,
-              containerClassName: containerClassName
-            }));
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
+                value: cellValue,
+                format: column.data.format,
+                containerClassName: containerClassName
+              })
+            });
           }
         case _dtableUtils.CellType.CTIME:
           {
-            return /*#__PURE__*/_react.default.createElement("div", {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "form-control d-flex align-items-center ctime-formatter-container",
               style: {
                 width: 320
-              }
-            }, /*#__PURE__*/_react.default.createElement(Formatter, {
-              value: cellValue,
-              containerClassName: containerClassName
-            }));
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
+                value: cellValue,
+                containerClassName: containerClassName
+              })
+            });
           }
         case _dtableUtils.CellType.MTIME:
           {
-            return /*#__PURE__*/_react.default.createElement("div", {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "form-control d-flex align-items-center mtime-formatter-container",
               style: {
                 width: 320
-              }
-            }, /*#__PURE__*/_react.default.createElement(Formatter, {
-              value: cellValue,
-              containerClassName: containerClassName
-            }));
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
+                value: cellValue,
+                containerClassName: containerClassName
+              })
+            });
           }
         case _dtableUtils.CellType.MULTIPLE_SELECT:
           {
             var _column, _column$data;
             const options = ((_column = column) === null || _column === void 0 ? void 0 : (_column$data = _column.data) === null || _column$data === void 0 ? void 0 : _column$data.options) || [];
-            return /*#__PURE__*/_react.default.createElement("div", {
-              className: "form-control d-flex align-items-center w-100 h-auto"
-            }, /*#__PURE__*/_react.default.createElement(Formatter, {
-              value: cellValue,
-              options: options,
-              containerClassName: containerClassName
-            }));
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "form-control d-flex align-items-center w-100 h-auto",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
+                value: cellValue,
+                options: options,
+                containerClassName: containerClassName
+              })
+            });
           }
         case _dtableUtils.CellType.SINGLE_SELECT:
           {
             var _column2, _column2$data;
             const options = ((_column2 = column) === null || _column2 === void 0 ? void 0 : (_column2$data = _column2.data) === null || _column2$data === void 0 ? void 0 : _column2$data.options) || [];
-            return /*#__PURE__*/_react.default.createElement("div", {
-              className: "form-control d-flex align-items-center w-100"
-            }, /*#__PURE__*/_react.default.createElement(Formatter, {
-              value: cellValue,
-              options: options,
-              containerClassName: containerClassName
-            }));
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "form-control d-flex align-items-center w-100",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
+                value: cellValue,
+                options: options,
+                containerClassName: containerClassName
+              })
+            });
           }
         case _dtableUtils.CellType.FILE:
           {
-            return /*#__PURE__*/_react.default.createElement(Formatter, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
               value: cellValue,
               column: column,
               downloadFile: this.props.downloadFile,
@@ -200,7 +211,7 @@ class RowExpandFormatter extends _react.default.Component {
           }
         case _dtableUtils.CellType.IMAGE:
           {
-            return /*#__PURE__*/_react.default.createElement(Formatter, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
               value: cellValue,
               column: column,
               downloadImage: this.props.downloadImage,
@@ -212,17 +223,18 @@ class RowExpandFormatter extends _react.default.Component {
         case _dtableUtils.CellType.CHECKBOX:
           {
             var _column$data2;
-            return /*#__PURE__*/_react.default.createElement("div", {
-              className: "checkbox-formatter-container"
-            }, /*#__PURE__*/_react.default.createElement(Formatter, {
-              value: cellValue,
-              checkboxStyle: ((_column$data2 = column.data) === null || _column$data2 === void 0 ? void 0 : _column$data2.checkbox_style) || {}
-            }));
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "checkbox-formatter-container",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
+                value: cellValue,
+                checkboxStyle: ((_column$data2 = column.data) === null || _column$data2 === void 0 ? void 0 : _column$data2.checkbox_style) || {}
+              })
+            });
           }
         case _dtableUtils.CellType.CREATOR:
         case _dtableUtils.CellType.LAST_MODIFIER:
           {
-            return /*#__PURE__*/_react.default.createElement(Formatter, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
               collaborators: collaborators,
               value: cellValue,
               containerClassName: containerClassName
@@ -231,7 +243,7 @@ class RowExpandFormatter extends _react.default.Component {
         case _dtableUtils.CellType.FORMULA:
         case _dtableUtils.CellType.LINK_FORMULA:
           {
-            return /*#__PURE__*/_react.default.createElement(Formatter, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
               value: cellValue,
               column: column,
               collaborators: collaborators,
@@ -263,7 +275,7 @@ class RowExpandFormatter extends _react.default.Component {
                 }
               };
             }
-            return /*#__PURE__*/_react.default.createElement(Formatter, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
               value: cellValue,
               column: column,
               collaborators: collaborators,
@@ -273,58 +285,62 @@ class RowExpandFormatter extends _react.default.Component {
           }
         case _dtableUtils.CellType.AUTO_NUMBER:
           {
-            return /*#__PURE__*/_react.default.createElement(Formatter, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
               value: cellValue,
               containerClassName: containerClassName
             });
           }
         case _dtableUtils.CellType.URL:
           {
-            return /*#__PURE__*/_react.default.createElement("div", {
-              className: "form-control d-flex align-items-center w-100"
-            }, /*#__PURE__*/_react.default.createElement(Formatter, {
-              value: cellValue,
-              containerClassName: containerClassName
-            }));
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "form-control d-flex align-items-center w-100",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
+                value: cellValue,
+                containerClassName: containerClassName
+              })
+            });
           }
         case _dtableUtils.CellType.EMAIL:
           {
-            return /*#__PURE__*/_react.default.createElement("div", {
-              className: "form-control d-flex align-items-center w-100"
-            }, /*#__PURE__*/_react.default.createElement(Formatter, {
-              value: cellValue,
-              containerClassName: containerClassName
-            }));
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "form-control d-flex align-items-center w-100",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
+                value: cellValue,
+                containerClassName: containerClassName
+              })
+            });
           }
         case _dtableUtils.CellType.DURATION:
           {
-            return /*#__PURE__*/_react.default.createElement("div", {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "form-control d-flex align-items-center",
               style: {
                 width: 320
-              }
-            }, /*#__PURE__*/_react.default.createElement(Formatter, {
-              value: cellValue,
-              format: column.data.duration_format,
-              containerClassName: containerClassName
-            }));
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
+                value: cellValue,
+                format: column.data.duration_format,
+                containerClassName: containerClassName
+              })
+            });
           }
         case _dtableUtils.CellType.RATE:
           {
-            return /*#__PURE__*/_react.default.createElement("div", {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "form-control d-flex align-items-center",
               style: {
                 width: 320
-              }
-            }, /*#__PURE__*/_react.default.createElement(Formatter, {
-              value: cellValue,
-              data: column.data,
-              containerClassName: containerClassName
-            }));
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
+                value: cellValue,
+                data: column.data,
+                containerClassName: containerClassName
+              })
+            });
           }
         case _dtableUtils.CellType.BUTTON:
           {
-            return /*#__PURE__*/_react.default.createElement(Formatter, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
               data: column.data,
               containerClassName: containerClassName,
               onClickButton: this.props.onClickButton
@@ -332,7 +348,7 @@ class RowExpandFormatter extends _react.default.Component {
           }
         case _dtableUtils.CellType.DIGITAL_SIGN:
           {
-            return /*#__PURE__*/_react.default.createElement(Formatter, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
               value: cellValue,
               containerClassName: containerClassName,
               config: this.props.config
@@ -340,14 +356,14 @@ class RowExpandFormatter extends _react.default.Component {
           }
         case _dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT:
           {
-            return /*#__PURE__*/_react.default.createElement(Formatter, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
               value: cellValue,
               departments: this.props.departments
             });
           }
         default:
           {
-            return /*#__PURE__*/_react.default.createElement(Formatter, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
               value: cellValue,
               containerClassName: containerClassName,
               config: this.props.config
@@ -382,9 +398,10 @@ class RowExpandFormatter extends _react.default.Component {
     const {
       className
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-formatter', className)
-    }, this.renderFormatter());
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-formatter', className),
+      children: this.renderFormatter()
+    });
   }
 }
 RowExpandFormatter.defaultProps = {

package/lib/RowExpandFormatter/link-formatter/collaborator-item-formatter.js

@@ -9,6 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _dtableUtils = require("dtable-utils");
 var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
+var _jsxRuntime = require("react/jsx-runtime");
 class CollaboratorItemFormatter extends _react.Component {
   constructor(_props) {
     super(_props);
@@ -115,7 +116,7 @@ class CollaboratorItemFormatter extends _react.Component {
     if (!isDataLoaded || !cellValue || !collaborator) {
       return this.props.renderEmpty();
     }
-    return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
       collaborator: collaborator,
       enableDeleteCollaborator: false
     });

package/lib/RowExpandFormatter/link-formatter/index.js

@@ -16,6 +16,7 @@ var _collaboratorItemFormatter = _interopRequireDefault(require("./collaborator-
 var _utils = require("../../utils/utils");
 var _valueDisplayUtils = require("./value-display-utils");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class RowExpandLinkFormatter extends _react.Component {
   render() {
     const props = this.props;
@@ -56,96 +57,98 @@ class RowExpandLinkFormatter extends _react.Component {
       case _dtableUtils.CellType.DURATION:
       case _dtableUtils.CellType.NUMBER:
         {
-          return /*#__PURE__*/_react.default.createElement("div", {
-            className: containerClassName
-          }, cellValue.map((value, index) => {
-            if (!value) return null;
-            return /*#__PURE__*/_react.default.createElement("div", {
-              key: "link-".concat(displayColumnType, "-").concat(index),
-              className: "row-expand-link-item"
-            }, value);
-          }));
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: containerClassName,
+            children: cellValue.map((value, index) => {
+              if (!value) return null;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "row-expand-link-item",
+                children: value
+              }, "link-".concat(displayColumnType, "-").concat(index));
+            })
+          });
         }
       case _dtableUtils.CellType.DATE:
         {
-          return /*#__PURE__*/_react.default.createElement("div", {
-            className: containerClassName
-          }, cellValue.map((value, index) => {
-            if (!value || typeof value !== 'string') return null;
-            const {
-              format
-            } = displayColumnData || {};
-            return /*#__PURE__*/_react.default.createElement(_DateFormatter.default, {
-              key: "link-".concat(displayColumnType, "-").concat(index),
-              value: value,
-              format: format,
-              containerClassName: "row-expand-link-item"
-            });
-          }));
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: containerClassName,
+            children: cellValue.map((value, index) => {
+              if (!value || typeof value !== 'string') return null;
+              const {
+                format
+              } = displayColumnData || {};
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateFormatter.default, {
+                value: value,
+                format: format,
+                containerClassName: "row-expand-link-item"
+              }, "link-".concat(displayColumnType, "-").concat(index));
+            })
+          });
         }
       case _dtableUtils.CellType.CTIME:
         {
-          return /*#__PURE__*/_react.default.createElement("div", {
-            className: containerClassName
-          }, cellValue.map((value, index) => {
-            if (!value) return null;
-            return /*#__PURE__*/_react.default.createElement(_CTimeFormatter.default, {
-              key: "link-".concat(displayColumnType, "-").concat(index),
-              value: value,
-              containerClassName: "row-expand-link-item"
-            });
-          }));
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: containerClassName,
+            children: cellValue.map((value, index) => {
+              if (!value) return null;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CTimeFormatter.default, {
+                value: value,
+                containerClassName: "row-expand-link-item"
+              }, "link-".concat(displayColumnType, "-").concat(index));
+            })
+          });
         }
       case _dtableUtils.CellType.MTIME:
         {
-          return /*#__PURE__*/_react.default.createElement("div", {
-            className: containerClassName
-          }, cellValue.map((value, index) => {
-            if (!value) return null;
-            return /*#__PURE__*/_react.default.createElement(_MTimeFormatter.default, {
-              key: "link-".concat(displayColumnType, "-").concat(index),
-              value: value,
-              containerClassName: "row-expand-link-item"
-            });
-          }));
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: containerClassName,
+            children: cellValue.map((value, index) => {
+              if (!value) return null;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MTimeFormatter.default, {
+                value: value,
+                containerClassName: "row-expand-link-item"
+              }, "link-".concat(displayColumnType, "-").concat(index));
+            })
+          });
         }
       case _dtableUtils.CellType.CREATOR:
       case _dtableUtils.CellType.LAST_MODIFIER:
         {
-          return /*#__PURE__*/_react.default.createElement("div", {
-            className: "dtable-ui cell-formatter-container collaborator-formatter sql-query-collaborator-formatter"
-          }, cellValue.map((value, index) => {
-            if (!value) return null;
-            return /*#__PURE__*/_react.default.createElement(_collaboratorItemFormatter.default, {
-              key: "link-".concat(displayColumnType, "-").concat(index),
-              cellValue: value,
-              collaborators: collaborators,
-              context: props.context,
-              renderEmpty: props.renderEmpty
-            });
-          }));
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui cell-formatter-container collaborator-formatter sql-query-collaborator-formatter",
+            children: cellValue.map((value, index) => {
+              if (!value) return null;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_collaboratorItemFormatter.default, {
+                cellValue: value,
+                collaborators: collaborators,
+                context: props.context,
+                renderEmpty: props.renderEmpty
+              }, "link-".concat(displayColumnType, "-").concat(index));
+            })
+          });
         }
       case _dtableUtils.CellType.SINGLE_SELECT:
         {
           const options = displayColumnData && Array.isArray(displayColumnData.options) ? displayColumnData.options : [];
-          return /*#__PURE__*/_react.default.createElement(_MultipleSelectFormatter.default, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MultipleSelectFormatter.default, {
             value: cellValue,
             options: options || []
           });
         }
       case _dtableUtils.CellType.FORMULA:
         {
-          return /*#__PURE__*/_react.default.createElement("div", {
-            className: containerClassName
-          }, cellValue.map((value, index) => {
-            if (!value) return null;
-            return /*#__PURE__*/_react.default.createElement("div", {
-              key: "link-".concat(displayColumnType, "-").concat(index),
-              className: "row-expand-link-item"
-            }, (0, _valueDisplayUtils.getCellDisplayValue)({
-              [displayColumn.key]: value
-            }, displayColumn, collaborators));
-          }));
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: containerClassName,
+            children: cellValue.map((value, index) => {
+              if (!value) return null;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "row-expand-link-item",
+                children: (0, _valueDisplayUtils.getCellDisplayValue)({
+                  [displayColumn.key]: value
+                }, displayColumn, collaborators)
+              }, "link-".concat(displayColumnType, "-").concat(index));
+            })
+          });
         }
       default:
         {

package/lib/RowExpandFormatter/rate-formatter/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class RateExpendRateFormatter extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -26,11 +27,10 @@ class RateExpendRateFormatter extends _react.default.Component {
         let style = {
           color: value >= i + 1 ? rate_style_color : '#e5e5e5'
         };
-        rateList.push( /*#__PURE__*/_react.default.createElement("i", {
-          key: "dtable-ui-component-rate-".concat(i),
+        rateList.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
           className: "dtable-font ".concat(rate_style_type),
           style: style
-        }));
+        }, "dtable-ui-component-rate-".concat(i)));
       }
       return rateList;
     };
@@ -41,9 +41,10 @@ class RateExpendRateFormatter extends _react.default.Component {
     } = this.props;
     const className = (0, _classnames.default)('dtable-ui cell-formatter-container rate-formatter', containerClassName);
     const rateList = this.getRateList();
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: className
-    }, rateList);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: className,
+      children: rateList
+    });
   }
 }
 RateExpendRateFormatter.defaultProps = {