dtable-ui-component 6.0.89 → 6.0.92

package/lib/AsyncUserSelect/index.js

@@ -0,0 +1,260 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactstrap = require("reactstrap");
+var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
+var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
+var _userItem = _interopRequireDefault(require("./user-item"));
+var _lang = require("../lang");
+var _keyCodes = _interopRequireDefault(require("../constants/key-codes"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const AsyncUserSelect = _ref => {
+  let {
+    className,
+    emptyPlaceholder = '',
+    searchPlaceholder = '',
+    isMulti = true,
+    enableShowIDInOrgWhenSearchUser = false,
+    selectedUsers = [],
+    loadOptions,
+    modifySelectedUsers
+  } = _ref;
+  const [isPopoverOpen, setIsPopoverOpen] = (0, _react.useState)(false);
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+  const [searchedUsers, setSearchedUsers] = (0, _react.useState)([]);
+  const [highlightIndex, setHighlightIndex] = (0, _react.useState)(-1);
+  const [maxItemNum, setMaxItemNum] = (0, _react.useState)(0);
+  const [itemHeight, setItemHeight] = (0, _react.useState)(0);
+  const selectorRef = (0, _react.useRef)(null);
+  const userSelectContainerRef = (0, _react.useRef)(null);
+  const userListContainerRef = (0, _react.useRef)(null);
+  const userItemContainerRef = (0, _react.useRef)(null);
+  const clearStatus = (0, _react.useCallback)(() => {
+    setSearchedUsers([]);
+    setSearchValue('');
+    setHighlightIndex(-1);
+  }, []);
+  const onClickOutside = (0, _react.useCallback)(e => {
+    if (isPopoverOpen && (!selectorRef.current || !selectorRef.current.contains(e.target))) {
+      setIsPopoverOpen(false);
+      clearStatus();
+    }
+  }, [isPopoverOpen, clearStatus]);
+  const searchUsers = (0, _react.useCallback)(function () {
+    let searchValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    const trimmedSearchValue = (searchValue === null || searchValue === void 0 ? void 0 : searchValue.trim()) || '';
+    if (!trimmedSearchValue) {
+      setSearchedUsers([]);
+      setHighlightIndex(-1);
+      return;
+    }
+    loadOptions && loadOptions(searchValue, function () {
+      let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      // [{ email, name, avatar_url }, ...]
+      setSearchedUsers(options);
+      setHighlightIndex(options.length > 0 ? 0 : -1);
+    });
+  }, [loadOptions]);
+  const onSearchValueChanged = (0, _react.useCallback)(newSearchValue => {
+    setSearchValue(newSearchValue);
+    searchUsers(newSearchValue);
+  }, [searchUsers]);
+  const onTogglePopover = (0, _react.useCallback)(() => {
+    const isOpen = !isPopoverOpen;
+    setIsPopoverOpen(isOpen);
+    if (!isOpen) {
+      clearStatus();
+    } else {
+      searchUsers('');
+    }
+  }, [isPopoverOpen, clearStatus, searchUsers]);
+  const deselectUser = (0, _react.useCallback)(user => {
+    const newSelectedUsers = selectedUsers.filter(item => item.email !== user.email);
+    modifySelectedUsers(newSelectedUsers);
+  }, [selectedUsers, modifySelectedUsers]);
+  const onKeyDown = (0, _react.useCallback)(e => {
+    if (e.keyCode === _keyCodes.default.LeftArrow || e.keyCode === _keyCodes.default.RightArrow) {
+      e.stopPropagation();
+    }
+  }, []);
+  const selectUser = (0, _react.useCallback)(user => {
+    const index = selectedUsers.findIndex(item => item.email === user.email);
+    let newSelectedUsers = selectedUsers.slice(0);
+    if (isMulti) {
+      if (index > -1) {
+        newSelectedUsers.splice(index, 1);
+      } else {
+        newSelectedUsers.push(user);
+      }
+    } else {
+      if (index > -1) {
+        newSelectedUsers = [];
+      } else {
+        newSelectedUsers = [user];
+      }
+    }
+    modifySelectedUsers(newSelectedUsers);
+  }, [selectedUsers, isMulti, modifySelectedUsers]);
+  const onUserClick = (0, _react.useCallback)(user => {
+    selectUser(user);
+  }, [selectUser]);
+  const onEnter = (0, _react.useCallback)(e => {
+    e.preventDefault();
+    let user;
+    if (searchedUsers.length === 1) {
+      user = searchedUsers[0];
+    } else if (highlightIndex > -1) {
+      user = searchedUsers[highlightIndex];
+    }
+    if (user) {
+      selectUser(user);
+    }
+  }, [highlightIndex, searchedUsers, selectUser]);
+  const onUpArrow = (0, _react.useCallback)(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (highlightIndex > 0) {
+      const newHighlightIndex = highlightIndex - 1;
+      setHighlightIndex(newHighlightIndex);
+      if (newHighlightIndex < searchedUsers.length - maxItemNum) {
+        userListContainerRef.current.scrollTop -= itemHeight;
+      }
+    } else {
+      const newHighlightIndex = searchedUsers.length - 1;
+      setHighlightIndex(newHighlightIndex);
+      userListContainerRef.current.scrollTop = userListContainerRef.current.scrollHeight;
+    }
+  }, [highlightIndex, maxItemNum, itemHeight, searchedUsers]);
+  const onDownArrow = (0, _react.useCallback)(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (highlightIndex < searchedUsers.length - 1) {
+      const newHighlightIndex = highlightIndex + 1;
+      setHighlightIndex(newHighlightIndex);
+      if (newHighlightIndex >= maxItemNum) {
+        userListContainerRef.current.scrollTop += itemHeight;
+      }
+    } else {
+      setHighlightIndex(0);
+      userListContainerRef.current.scrollTop = 0;
+    }
+  }, [highlightIndex, maxItemNum, itemHeight, searchedUsers]);
+  const onEsc = (0, _react.useCallback)(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsPopoverOpen(false);
+    clearStatus();
+  }, [clearStatus]);
+  const onHotKey = (0, _react.useCallback)(e => {
+    if (e.keyCode === _keyCodes.default.Enter) {
+      onEnter(e);
+    } else if (e.keyCode === _keyCodes.default.UpArrow) {
+      onUpArrow(e);
+    } else if (e.keyCode === _keyCodes.default.DownArrow) {
+      onDownArrow(e);
+    } else if (e.keyCode === _keyCodes.default.Escape) {
+      onEsc(e);
+    }
+  }, [onEnter, onUpArrow, onDownArrow, onEsc]);
+  (0, _react.useEffect)(() => {
+    if (userSelectContainerRef.current) {
+      const {
+        bottom
+      } = userSelectContainerRef.current.getBoundingClientRect();
+      if (bottom > window.innerHeight) {
+        userSelectContainerRef.current.style.top = `${window.innerHeight - bottom}px`;
+      }
+    }
+    if (userListContainerRef.current && userItemContainerRef.current) {
+      const userContainerStyle = getComputedStyle(userListContainerRef.current, null);
+      const userItemStyle = getComputedStyle(userItemContainerRef.current, null);
+      const userItemHeight = parseInt(userItemStyle.height);
+      const maxContainerItemNum = Math.floor(parseInt(userContainerStyle.maxHeight) / userItemHeight);
+      setMaxItemNum(maxContainerItemNum);
+      setItemHeight(userItemHeight);
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keydown', onHotKey, true);
+    return () => {
+      document.removeEventListener('keydown', onHotKey, true);
+    };
+  }, [onHotKey]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
+    onClickOutside: onClickOutside,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)('dtable-ui-selected-users-container form-control d-flex align-items-center', className, {
+          'focus': isPopoverOpen
+        }),
+        onClick: onTogglePopover,
+        ref: selectorRef,
+        children: [selectedUsers.map((user, index) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_userItem.default, {
+            user: user,
+            deleteUser: deselectUser
+          }, `dtable-ui-user-selector-selected-user-${index}`);
+        }), selectedUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "dtable-ui-user-select-placeholder",
+          children: emptyPlaceholder || (0, _lang.getLocale)('Search_users')
+        })]
+      }), selectorRef.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
+        placement: "bottom-start",
+        isOpen: isPopoverOpen,
+        target: selectorRef.current,
+        hideArrow: true,
+        fade: false,
+        className: "dtable-ui-user-select-popover",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "dtable-ui-user-select-container",
+          ref: userSelectContainerRef,
+          onMouseDown: e => e.stopPropagation(),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-user-search-container",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
+              autoFocus: true,
+              placeholder: searchPlaceholder || (0, _lang.getLocale)('Search_users'),
+              value: searchValue,
+              wait: 200,
+              onChange: onSearchValueChanged,
+              onKeyDown: onKeyDown
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "dtable-ui-user-list-container",
+            ref: userListContainerRef,
+            children: [searchedUsers.length > 0 && searchedUsers.map((user, index) => {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: (0, _classnames.default)('dtable-ui-user-item-container', {
+                  'dtable-ui-user-item-container-highlight': index === highlightIndex
+                }),
+                ref: userItemContainerRef,
+                onClick: () => onUserClick(user),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_userItem.default, {
+                  user: user,
+                  enableShowIDInOrgWhenSearchUser: enableShowIDInOrgWhenSearchUser
+                }, `dtable-ui-user-selector-searched-user-${index}`), selectedUsers.find(u => u.email === user.email) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "dtable-ui-collaborator-check-icon",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                    className: "dtable-font dtable-icon-check-mark",
+                    "aria-hidden": "true"
+                  })
+                })]
+              }, user.email);
+            }), searchedUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "no-user-search-result",
+              children: searchValue ? (0, _lang.getLocale)('User_not_found') : (0, _lang.getLocale)('Enter_characters_to_start_searching')
+            })]
+          })]
+        })
+      })]
+    })
+  });
+};
+var _default = exports.default = AsyncUserSelect;

package/lib/AsyncUserSelect/user-item.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lang = require("../lang");
+var _jsxRuntime = require("react/jsx-runtime");
+const UserItem = _ref => {
+  let {
+    className,
+    user,
+    deleteUser,
+    enableShowIDInOrgWhenSearchUser = false
+  } = _ref;
+  const name = (0, _react.useMemo)(() => (user === null || user === void 0 ? void 0 : user.name) || '', [user]);
+  const avatarUrl = (0, _react.useMemo)(() => (user === null || user === void 0 ? void 0 : user.avatar_url) || '', [user]);
+  const idInOrg = (0, _react.useMemo)(() => (user === null || user === void 0 ? void 0 : user.id_in_org) || '', [user]);
+  const onDeleteUser = event => {
+    event.stopPropagation();
+    event && event.nativeEvent.stopImmediatePropagation();
+    deleteUser(user);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('dtable-ui-user-item', className),
+    title: name,
+    "aria-label": name,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "user-avatar",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        className: "user-avatar-icon",
+        alt: name,
+        src: avatarUrl
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "user-name text-truncate",
+      children: name
+    }), enableShowIDInOrgWhenSearchUser && !deleteUser && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: "user-id-in-org text-truncate",
+      children: ["(", idInOrg, ")"]
+    }), deleteUser && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "user-remove ml-2",
+      onClick: onDeleteUser,
+      title: (0, _lang.getLocale)('Remove'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "dtable-font dtable-icon-x",
+        "aria-hidden": "true"
+      })
+    })]
+  });
+};
+var _default = exports.default = UserItem;

package/lib/AutoNumberFormatter/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 AutoNumberFormatter extends _react.default.Component {
   render() {
     const {
@@ -15,10 +16,11 @@ class AutoNumberFormatter extends _react.default.Component {
       value
     } = this.props;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container auto-number-formatter', containerClassName);
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       title: value,
-      className: classname
-    }, value);
+      className: classname,
+      children: value
+    });
   }
 }
 AutoNumberFormatter.defaultProps = {

package/lib/Badge/index.js

@@ -9,6 +9,7 @@ exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var React = _interopRequireWildcard(require("react"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class Badge extends React.Component {
   render() {
     // tslint:disable:prefer-const
@@ -26,33 +27,36 @@ class Badge extends React.Component {
     } = this.props;
     // eslint-disable-next-line no-self-assign
     overflowCount = overflowCount;
-    text = typeof text === 'number' && text > overflowCount ? "".concat(overflowCount, "+") : text;
+    text = typeof text === 'number' && text > overflowCount ? `${overflowCount}+` : text;
 
     // dot mode don't need text
     if (dot) {
       text = '';
     }
     const scrollNumberCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-dot")]: dot,
-      ["".concat(prefixCls, "-dot-large")]: dot && size === 'large',
-      ["".concat(prefixCls, "-text")]: !dot && !corner,
-      ["".concat(prefixCls, "-corner")]: corner,
-      ["".concat(prefixCls, "-corner-large")]: corner && size === 'large'
+      [`${prefixCls}-dot`]: dot,
+      [`${prefixCls}-dot-large`]: dot && size === 'large',
+      [`${prefixCls}-text`]: !dot && !corner,
+      [`${prefixCls}-corner`]: corner,
+      [`${prefixCls}-corner-large`]: corner && size === 'large'
     });
     const badgeCls = (0, _classnames.default)(prefixCls, className, {
-      ["".concat(prefixCls, "-not-a-wrapper")]: !children,
-      ["".concat(prefixCls, "-corner-wrapper")]: corner,
-      ["".concat(prefixCls, "-hot")]: !!hot,
-      ["".concat(prefixCls, "-corner-wrapper-large")]: corner && size === 'large'
+      [`${prefixCls}-not-a-wrapper`]: !children,
+      [`${prefixCls}-corner-wrapper`]: corner,
+      [`${prefixCls}-hot`]: !!hot,
+      [`${prefixCls}-corner-wrapper-large`]: corner && size === 'large'
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: badgeCls,
+      children: [children, (text || dot) &&
+      /*#__PURE__*/
+      // tslint:disable-next-line:jsx-no-multiline-js
+      (0, _jsxRuntime.jsx)("sup", {
+        className: scrollNumberCls,
+        ...restProps,
+        children: text
+      })]
     });
-    return /*#__PURE__*/React.createElement("span", {
-      className: badgeCls
-    }, children, (text || dot) &&
-    /*#__PURE__*/
-    // tslint:disable-next-line:jsx-no-multiline-js
-    React.createElement("sup", Object.assign({
-      className: scrollNumberCls
-    }, restProps), text));
   }
 }
 exports.default = Badge;

package/lib/ButtonFormatter/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const WHITE = '#FFFFFF';
 class ButtonFormatter extends _react.default.Component {
   constructor() {
@@ -35,16 +36,20 @@ class ButtonFormatter extends _react.default.Component {
       borderColor: colorObj.BORDER_COLOR,
       color
     };
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
-      className: (0, _classnames.default)('dtable-ui cell-formatter-container button-formatter', containerClassName),
-      style: btnStyle,
-      onClick: this.handleClick
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "text-truncate",
-      style: {
-        color
-      }
-    }, button_name)));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: (0, _classnames.default)('dtable-ui cell-formatter-container button-formatter', containerClassName),
+        style: btnStyle,
+        onClick: this.handleClick,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "text-truncate",
+          style: {
+            color
+          },
+          children: button_name
+        })
+      })
+    });
   }
 }
 var _default = exports.default = ButtonFormatter;

package/lib/CTimeFormatter/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class CTimeFormatter extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -25,10 +26,11 @@ class CTimeFormatter extends _react.default.Component {
     if (date) {
       date = this.formatDate(date);
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       title: date,
-      className: classname
-    }, date);
+      className: classname,
+      children: date
+    });
   }
 }
 CTimeFormatter.defaultProps = {

package/lib/CheckboxEditor/index.js

@@ -11,25 +11,34 @@ var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _pcEditor = _interopRequireDefault(require("./pc-editor"));
 var _mbEditor = _interopRequireDefault(require("./mb-editor"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const CheckboxEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     isMobile,
     ...props
   } = _ref;
-  if (isMobile === false) return /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
+  if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, {
+    ...props,
     ref: ref
-  }));
-  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
+  });
+  if (isMobile === true) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+    ...props,
     ref: ref
-  }));
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(min-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
-    ref: ref
-  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(max-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    ref: ref
-  }))));
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: "(min-width: 768px)",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, {
+        ...props,
+        ref: ref
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: "(max-width: 768px)",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+        ...props,
+        ref: ref
+      })
+    })]
+  });
 });
 var _default = exports.default = CheckboxEditor;

package/lib/CheckboxEditor/mb-editor.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
 var _constants = require("../constants");
+var _jsxRuntime = require("react/jsx-runtime");
 class MBCheckboxEditor extends _react.Component {
   constructor(props) {
     super(props);
@@ -52,14 +53,14 @@ class MBCheckboxEditor extends _react.Component {
         'dtable-ui-checkbox-check-svg': !(symbol !== null && symbol !== void 0 && symbol.startsWith('dtable-icon'))
       });
       if (symbol.startsWith('dtable-icon')) {
-        return /*#__PURE__*/_react.default.createElement("span", {
-          className: "dtable-font ".concat(symbol, " ").concat(className || ''),
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: `dtable-font ${symbol} ${className || ''}`,
           style: {
             color
           }
         });
       }
-      return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
         className: className,
         symbol: symbol,
         color: color
@@ -93,11 +94,12 @@ class MBCheckboxEditor extends _react.Component {
     if (!checkboxStyle || Object.keys(checkboxStyle).length < 2) {
       checkboxStyle = _constants.DEFAULT_CHECKBOX_MARK_STYLE;
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames.default)('dtable-ui-checkbox-editor', className),
       style: style || {},
-      onClick: this.onChangeCheckboxValue
-    }, value && this.renderIcon(checkboxStyle.type, checkboxStyle.color));
+      onClick: this.onChangeCheckboxValue,
+      children: value && this.renderIcon(checkboxStyle.type, checkboxStyle.color)
+    });
   }
 }
 var _default = exports.default = MBCheckboxEditor;

package/lib/CheckboxEditor/pc-editor.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
 var _constants = require("../constants");
+var _jsxRuntime = require("react/jsx-runtime");
 class PCCheckboxEditor extends _react.Component {
   constructor(props) {
     super(props);
@@ -65,14 +66,14 @@ class PCCheckboxEditor extends _react.Component {
         'dtable-ui-checkbox-check-svg': !(symbol !== null && symbol !== void 0 && symbol.startsWith('dtable-icon'))
       });
       if (symbol.startsWith('dtable-icon')) {
-        return /*#__PURE__*/_react.default.createElement("span", {
-          className: "dtable-font ".concat(symbol, " ").concat(className || ''),
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: `dtable-font ${symbol} ${className || ''}`,
           style: {
             color
           }
         });
       }
-      return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
         className: className,
         symbol: symbol,
         color: color
@@ -112,11 +113,12 @@ class PCCheckboxEditor extends _react.Component {
     if (!checkboxStyle || Object.keys(checkboxStyle).length < 2) {
       checkboxStyle = _constants.DEFAULT_CHECKBOX_MARK_STYLE;
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames.default)('dtable-ui-checkbox-editor', className),
       style: style || {},
-      onClick: this.onChangeCheckboxValue
-    }, value && this.renderIcon(checkboxStyle.type, checkboxStyle.color));
+      onClick: this.onChangeCheckboxValue,
+      children: value && this.renderIcon(checkboxStyle.type, checkboxStyle.color)
+    });
   }
 }
 var _default = exports.default = PCCheckboxEditor;

package/lib/CheckboxFormatter/index.js

@@ -10,14 +10,15 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
 var _constants = require("../constants");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class CheckboxFormatter extends _react.default.PureComponent {
   constructor() {
     super(...arguments);
     this.renderIcon = (symbol, color) => {
       let className = 'dtable-ui-checkbox-check-mark';
       if (symbol.startsWith('dtable-icon')) {
-        return /*#__PURE__*/_react.default.createElement("span", {
-          className: "dtable-font ".concat(symbol, " ").concat(className || ''),
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: `dtable-font ${symbol} ${className || ''}`,
           style: {
             color
           }
@@ -27,7 +28,7 @@ class CheckboxFormatter extends _react.default.PureComponent {
         'dtable-ui-checkbox-check-svg': !(symbol !== null && symbol !== void 0 && symbol.startsWith('dtable-icon')),
         'scale-icon': _constants.isMobile
       });
-      return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
         className: className,
         symbol: symbol,
         color: color
@@ -46,9 +47,10 @@ class CheckboxFormatter extends _react.default.PureComponent {
     const currentValue = !!value;
     if (!currentValue) return null;
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container checkbox-formatter d-flex align-items-center justify-content-center', containerClassName);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classname
-    }, this.renderIcon(checkboxStyle.type, checkboxStyle.color));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classname,
+      children: this.renderIcon(checkboxStyle.type, checkboxStyle.color)
+    });
   }
 }
 CheckboxFormatter.defaultProps = {