dtable-ui-component 5.1.15-alpha1 → 5.2.0

package/lib/CollaboratorEditor/index.js

@@ -179,13 +179,13 @@ class CollaboratorEditor extends _react.default.Component {
       className: "dtable-ui-collaborator-editor"
     }, /*#__PURE__*/_react.default.createElement("div", {
       ref: this.setEditorRef,
-      className: `dtable-ui-collaborator-editor-container ${isShowEditButton ? '' : 'dtable-ui-collaborator-editor-container-no-btn'}`,
+      className: "dtable-ui-collaborator-editor-container ".concat(isShowEditButton ? '' : 'dtable-ui-collaborator-editor-container-no-btn'),
       onClick: this.onClickContainer
     }, isShowEditButton && /*#__PURE__*/_react.default.createElement(_EditEditorButton.default, {
       text: (0, _lang.getLocale)('Add_a_collaborator'),
       onClick: this.togglePopover
     }), selectedCollaborators.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: `collaborators-container ${isShowEditButton ? 'mt-2' : ''}`
+      className: "collaborators-container ".concat(isShowEditButton ? 'mt-2' : '')
     }, selectedCollaborators.map(collaborator => {
       return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
         key: collaborator.email,

package/lib/CollapsibleSettingLayout/index.js

@@ -24,7 +24,7 @@ const CollapsibleSettingLayout = props => {
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "collapsible-setting-layout-title"
   }, title), /*#__PURE__*/_react.default.createElement("i", {
-    className: `dtable-font dtable-icon-right${isShowSettings ? ' dtable-icon-spin' : ''}`
+    className: "dtable-font dtable-icon-right".concat(isShowSettings ? ' dtable-icon-spin' : '')
   })), isShowSettings && /*#__PURE__*/_react.default.createElement("div", {
     className: "collapsible-setting-layout-body mt-3 pl-2"
   }, children || ''));

package/lib/DTableColorPicker/index.js

@@ -237,15 +237,15 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     }, colors.map((color, index) => {
       const isLight = (0, _utils.isLightColor)(color);
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: `color-item mr-2 ${isLight ? '' : 'dark'}`,
+        className: "color-item mr-2 ".concat(isLight ? '' : 'dark'),
         onClick: () => onSelectDefaultColor(color),
-        key: `default-color-${index}`
+        key: "default-color-".concat(index)
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "colorinput-color d-flex align-items-center justify-content-center",
         style: {
           backgroundColor: color
         }
-      }, color === `${(0, _utils.rgbaToHex)(value)}` && alphaVal === 100 && /*#__PURE__*/_react.default.createElement("i", {
+      }, color === "".concat((0, _utils.rgbaToHex)(value)) && alphaVal === 100 && /*#__PURE__*/_react.default.createElement("i", {
         className: "dtable-icon-color-check dtable-font dtable-icon-check-mark"
       })));
     })));
@@ -256,7 +256,7 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
       color: value,
       onChange: onChangeChromePicker
     }), /*#__PURE__*/_react.default.createElement("div", {
-      className: `color-setting d-flex align-items-center ${colorMode}`
+      className: "color-setting d-flex align-items-center ".concat(colorMode)
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "mode-btn d-flex",
       onClick: onChangeMode
@@ -314,9 +314,9 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     }, currentUsedColors.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentUsedColors.map((color, index) => {
       const isLight = (0, _utils.isLightColor)(color);
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: `color-item mr-2 ${isLight ? '' : 'dark'}`,
+        className: "color-item mr-2 ".concat(isLight ? '' : 'dark'),
         onClick: () => onSelectDefaultColor(color),
-        key: `default-color-${index}`
+        key: "default-color-".concat(index)
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "colorinput-color d-flex align-items-center justify-content-center",
         style: {

package/lib/DTableColorPicker/utils.js

@@ -54,7 +54,7 @@ const rgbaToHex = function (color) {
     return hex.length === 1 ? '0' + hex : hex;
   };
   const alpha = a !== undefined && a !== 1 ? toHex(Math.round(a * 255)) : '';
-  return `${isNeedPrefix ? '#' : ''}${toHex(r)}${toHex(g)}${toHex(b)}${isNeedAlpha ? alpha : ''}`;
+  return "".concat(isNeedPrefix ? '#' : '').concat(toHex(r)).concat(toHex(g)).concat(toHex(b)).concat(isNeedAlpha ? alpha : '');
 };
 exports.rgbaToHex = rgbaToHex;
 const isLightColor = color => {

package/lib/DTableCommonAddTool/index.js

@@ -17,13 +17,13 @@ function DTableCommonAddTool(_ref) {
     style
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `dtable-ui add-item-btn ${className ? className : ''}`,
+    className: "dtable-ui add-item-btn ".concat(className ? className : ''),
     style: style,
     onClick: e => {
       callBack(e);
     }
   }, !hideIcon && /*#__PURE__*/_react.default.createElement("span", {
-    className: `dtable-font dtable-icon-add-table ${addIconClassName || ''}`
+    className: "dtable-font dtable-icon-add-table ".concat(addIconClassName || '')
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "text-truncate"
   }, footerName));

package/lib/DTableFiltersPopover/index.js

@@ -197,7 +197,7 @@ class DTableFiltersPopover extends _react.Component {
         deleteFilter: this.deleteFilter,
         updateFilterConjunction: this.updateFilterConjunction
       }), /*#__PURE__*/_react.default.createElement(_DTableCommonAddTool.default, {
-        className: `popover-add-tool ${canAddFilter ? '' : 'disabled'}`,
+        className: "popover-add-tool ".concat(canAddFilter ? '' : 'disabled'),
         callBack: canAddFilter ? () => this.addFilter(scheduleUpdate) : () => {},
         footerName: (0, _lang.getLocale)('Add_filter'),
         addIconClassName: "popover-add-icon"

package/lib/DTableFiltersPopover/utils/index.js

@@ -471,7 +471,7 @@ const getMediaUrl = () => {
 };
 const generateDefaultUser = name => {
   const mediaUrl = getMediaUrl();
-  const defaultAvatarUrl = `${mediaUrl}avatars/default.png`;
+  const defaultAvatarUrl = "".concat(mediaUrl, "avatars/default.png");
   return {
     name,
     email: name,

package/lib/DTableFiltersPopover/widgets/filter-item.js

@@ -290,7 +290,7 @@ class FilterItem extends _react.default.Component {
               background: inOption.color,
               color: inOption.textColor || null
             };
-            labelArray.push(/*#__PURE__*/_react.default.createElement("span", {
+            labelArray.push( /*#__PURE__*/_react.default.createElement("span", {
               className: className,
               style: optionStyle,
               key: 'option_' + item,
@@ -669,7 +669,7 @@ class FilterItem extends _react.default.Component {
       searchPlaceholder: (0, _lang.getLocale)('Search_column'),
       noOptionsPlaceholder: (0, _lang.getLocale)('No_results')
     })), /*#__PURE__*/_react.default.createElement("div", {
-      className: `filter-predicate ml-2 ${_isCheckboxColumn ? 'filter-checkbox-predicate' : ''}`
+      className: "filter-predicate ml-2 ".concat(_isCheckboxColumn ? 'filter-checkbox-predicate' : '')
     }, /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
       value: activePredicate,
       options: filterPredicateOptions,

package/lib/DTableFiltersPopover/widgets/rate-item.js

@@ -66,9 +66,9 @@ class RateItem extends _react.default.Component {
       onMouseLeave: this.onMouseLeaveRateItem,
       style: style,
       onClick: this.onChangeRateNumber,
-      className: `rate-item ${value >= rateItemIndex ? 'rate-item-active' : ''}`
+      className: "rate-item ".concat(value >= rateItemIndex ? 'rate-item-active' : '')
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: `dtable-font ${rateShowType}`,
+      className: "dtable-font ".concat(rateShowType),
       ref: this.tooltipRef
     }), editable && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
       placement: "bottom",

package/lib/DTableRadioGroup/index.js

@@ -48,7 +48,7 @@ class DTableRadioGroup extends _react.default.Component {
       options
     } = this.props;
     if (!this.btn || !this.slider || !Array.isArray(options)) return;
-    this.slider.style.width = `${100 / options.length}%`;
+    this.slider.style.width = "".concat(100 / options.length, "%");
     this.setSliderTransition();
   }
   componentDidUpdate(prevProps) {
@@ -76,14 +76,14 @@ class DTableRadioGroup extends _react.default.Component {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "radio-group-wrapper"
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: `radio-group-options ${readOnly ? 'read-only' : ''}`
+      className: "radio-group-options ".concat(readOnly ? 'read-only' : '')
     }, options.map(option => {
       const isActive = activeOption === option ? true : false;
       const displayOption = optionsDisplay && optionsDisplay[option] || '';
       return /*#__PURE__*/_react.default.createElement("div", {
         key: option,
         ref: ref => this.btn = ref,
-        className: `radio-group-button ${isActive ? 'active' : ''}`,
+        className: "radio-group-button ".concat(isActive ? 'active' : ''),
         "data-option": option,
         onClick: this.onSelectChanged
       }, displayOption);

package/lib/DTableSearchInput/index.js

@@ -66,7 +66,7 @@ class DtableSearchInput extends _react.Component {
       const {
         ClearIndicator
       } = components;
-      if (/*#__PURE__*/_react.default.isValidElement(ClearIndicator)) {
+      if ( /*#__PURE__*/_react.default.isValidElement(ClearIndicator)) {
         return /*#__PURE__*/_react.default.cloneElement(ClearIndicator, {
           clearValue: this.clearSearch
         });

package/lib/DTableSelect/dtable-select-label.js

@@ -14,7 +14,7 @@ function DTableSelectLabel(_ref) {
     isSelect
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${classname} w-100 d-flex justify-content-between`
+    className: "".concat(classname, " w-100 d-flex justify-content-between")
   }, /*#__PURE__*/_react.default.createElement("span", null, name), isSelect && /*#__PURE__*/_react.default.createElement("div", {
     className: "dtable-select-check-icon"
   }, /*#__PURE__*/_react.default.createElement("i", {

package/lib/DTableSwitch/index.css

@@ -0,0 +1,56 @@
+.dtable-switch {
+  display: flex;
+}
+
+.dtable-switch.sm {
+  flex: 1;
+}
+
+.dtable-switch .custom-switch {
+  cursor: pointer;
+  justify-content: space-between;
+}
+
+.dtable-switch.disabled .custom-switch {
+  cursor: default;
+}
+
+.dtable-switch.sm .custom-switch {
+  width: 100%;
+}
+
+.dtable-switch.sm .custom-switch .custom-switch-description {
+  width: 192px;
+  margin: 0;
+  padding-right: 5px;
+  color: #212529;
+}
+
+.dtable-switch.sm .custom-switch .dtable-font {
+  -webkit-transform: scale(.8);
+  transform: scale(.8);
+  display: inline-block;
+  line-height: 24px;
+  margin-right: 8px;
+  color: #666;
+}
+
+.dtable-switch.sm .custom-switch .dtable-font.dtable-icon-use-help {
+  transform: none;
+}
+
+.dtable-switch.sm .custom-switch-indicator {
+  width: 22px;
+  height: 12px;
+  border-radius: 6px;
+  margin-right: 10px;
+}
+
+.dtable-switch.sm .custom-switch-input:checked~.custom-switch-indicator:before {
+  left: 12px;
+}
+
+.dtable-switch.sm .custom-switch-indicator:before {
+  height: 8px;
+  width: 8px;
+}

package/lib/DTableSwitch/index.js

@@ -6,16 +6,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-function DtableSwitch(props) {
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dtableUtils = require("dtable-utils");
+require("./index.css");
+function DTableSwitch(props) {
   const {
     onChange,
     checked,
     placeholder,
     disabled,
+    size,
+    switchPosition,
     switchClassName
   } = props;
+  const switchNode = /*#__PURE__*/_react.default.createElement("span", {
+    className: "custom-switch-indicator"
+  });
+  const textNode = /*#__PURE__*/_react.default.createElement("span", {
+    className: "custom-switch-description text-truncate"
+  }, placeholder);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `dtable-switch position-relative ${switchClassName || ''}`
+    className: (0, _classnames.default)('dtable-switch position-relative', {
+      'disabled': disabled
+    }, {
+      [size]: size
+    }, {
+      [switchClassName]: switchClassName
+    })
   }, /*#__PURE__*/_react.default.createElement("label", {
     className: "custom-switch"
   }, /*#__PURE__*/_react.default.createElement("input", {
@@ -24,11 +41,14 @@ function DtableSwitch(props) {
     checked: checked,
     onChange: onChange,
     name: "custom-switch-checkbox",
-    disabled: disabled
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "custom-switch-description text-truncate"
-  }, placeholder), /*#__PURE__*/_react.default.createElement("span", {
-    className: "custom-switch-indicator"
-  })));
+    disabled: disabled,
+    "aria-label": placeholder,
+    id: 'dtable-switch-' + (0, _dtableUtils.generatorBase64Code)(12)
+  }), switchPosition === 'left' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, switchNode, textNode), switchPosition === 'right' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, textNode, switchNode)));
 }
-var _default = exports.default = DtableSwitch;
+DTableSwitch.defaultProps = {
+  checked: false,
+  size: 'sm',
+  switchPosition: 'right'
+};
+var _default = exports.default = DTableSwitch;

package/lib/Department-editor/department-multiple-select/index.js

@@ -83,7 +83,7 @@ function DepartmentMultipleSelect(props) {
     } = department;
     const newLevel = level + 1;
     const inputStyle = {
-      marginRight: `${newLevel * 15 + 5}px`
+      marginRight: "".concat(newLevel * 15 + 5, "px")
     };
     const nameStyle = {
       paddingLeft: hasChild ? '' : '16px'
@@ -101,7 +101,7 @@ function DepartmentMultipleSelect(props) {
       style: inputStyle,
       onChange: () => {}
     }), hasChild && !searchVal && /*#__PURE__*/_react.default.createElement("span", {
-      className: `dtable-font expand dtable-icon-${isExpanded ? 'drop-down' : 'right-slide'} pr-1`,
+      className: "dtable-font expand dtable-icon-".concat(isExpanded ? 'drop-down' : 'right-slide', " pr-1"),
       onClick: event => onExpand(event, id, isExpanded)
     }), /*#__PURE__*/_react.default.createElement("span", {
       style: searchVal ? {} : nameStyle,
@@ -123,7 +123,7 @@ function DepartmentMultipleSelect(props) {
       ref: departmentContainerRef,
       onClick: onStopPropagation,
       onMouseDown: onStopPropagation,
-      className: `dropdown-menu show departments-container dtable-ui ${classNamePrefix}`
+      className: "dropdown-menu show departments-container dtable-ui ".concat(classNamePrefix)
     }, isShowSelectedDepartments && /*#__PURE__*/_react.default.createElement("div", {
       className: "selected-departments dtable-ui",
       onClick: onClick

package/lib/Department-editor/department-single-select.js

@@ -140,7 +140,7 @@ class DepartmentSingleSelect extends _react.Component {
         paddingLeft: hasChild ? '' : noChildStyle
       };
       const itemStyle = {
-        paddingLeft: `${newLevel * 15 + 10}px`
+        paddingLeft: "".concat(newLevel * 15 + 10, "px")
       };
       const isChecked = value === id;
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
@@ -152,7 +152,7 @@ class DepartmentSingleSelect extends _react.Component {
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "department-item-left-content d-flex align-items-center"
       }, hasChild && /*#__PURE__*/_react.default.createElement("span", {
-        className: `dtable-font expand dtable-icon-${isExpanded ? 'drop-down' : 'right-slide'} pr-1`,
+        className: "dtable-font expand dtable-icon-".concat(isExpanded ? 'drop-down' : 'right-slide', " pr-1"),
         onClick: event => this.onExpand(event, id, isExpanded)
       }), /*#__PURE__*/_react.default.createElement("span", {
         style: nameStyle,

package/lib/Department-editor/selected-departments/index.js

@@ -28,7 +28,7 @@ function SelectedDepartments(props) {
     if ([_dtableUtils.DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT, _dtableUtils.DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT_AND_SUB].includes(content)) {
       const name = (0, _lang.getLocale)(_constants.DEPARTMENT_SELECT_RANGE_OPTIONS.find(option => option.type === content).name);
       return /*#__PURE__*/_react.default.createElement("div", {
-        key: `department-${index}`,
+        key: "department-".concat(index),
         className: "department mr-1"
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "department-name text-truncate",
@@ -42,7 +42,7 @@ function SelectedDepartments(props) {
         name
       } = department;
       return /*#__PURE__*/_react.default.createElement("div", {
-        key: `department-${index}`,
+        key: "department-".concat(index),
         className: "department mr-1"
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "department-avatar-container d-flex align-items-center justify-content-center"
@@ -62,7 +62,7 @@ function SelectedDepartments(props) {
       }))));
     }
     return /*#__PURE__*/_react.default.createElement("div", {
-      key: `department-${index}`,
+      key: "department-".concat(index),
       className: "department empty-department mr-1"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "department-avatar-container d-flex align-items-center justify-content-center"

package/lib/DigitalSignFormatter/index.js

@@ -85,7 +85,6 @@ class DigitalSignFormatter extends _react.Component {
       imageIndex: largeSignImageIndex,
       closeImagePopup: this.hideLargeSignImage,
       downloadImage: this.downloadImage,
-      onViewOriginal: this.props.onViewOriginal,
       moveToPrevImage: () => {},
       moveToNextImage: () => {}
     }));

package/lib/DigitalSignFormatter/utils.js

@@ -15,7 +15,7 @@ const getDigitalSignImageUrl = (cellValue, config) => {
     dtableUuid
   } = config || {};
   if (server && (workspaceID || workspaceID === 0) && dtableUuid) {
-    return `${server}/workspace/${workspaceID}/asset/${dtableUuid}${url}`;
+    return "".concat(server, "/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(url);
   }
   return url;
 };

package/lib/FieldDisplaySetting/field-item.js

@@ -65,12 +65,12 @@ function FieldItem(_ref) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "field-switch"
     }, /*#__PURE__*/_react.default.createElement("i", {
-      className: `dtable-font ${_dtableUtils.COLUMNS_ICON_CONFIG[field.type]}`
+      className: "dtable-font ".concat(_dtableUtils.COLUMNS_ICON_CONFIG[field.type])
     }), /*#__PURE__*/_react.default.createElement("span", null, field.name));
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: fieldItemRef,
-    className: `field-item-container ${isCollapsed ? 'd-none' : ''}`,
+    className: "field-item-container ".concat(isCollapsed ? 'd-none' : ''),
     onDrop: onDrop,
     onDragEnter: onTableDragEnter,
     onDragOver: onDragOver,

package/lib/FieldDisplaySetting/index.css

@@ -38,37 +38,6 @@
   cursor: grab;
 }
 
-.field-item-container .dtable-switch .custom-switch {
-  width: 100%;
-  justify-content: space-between;
+.field-setting .field-item-container .dtable-switch .custom-switch .custom-switch-description {
+  white-space: nowrap;
 }
-
-.field-item-container .dtable-switch .custom-switch .dtable-font {
-  -webkit-transform: scale(.8);
-  transform: scale(.8);
-  display: inline-block;
-  line-height: 24px;
-  margin-right: 8px;
-  color: #666;
-}
-
-.field-item-container .dtable-switch .custom-switch .custom-switch-description {
-  width: 192px;
-}
-
-.field-item-container .dtable-switch .custom-switch .custom-switch-indicator {
-  width: 22px;
-  height: 12px;
-  border-radius: 6px;
-  margin-right: .25rem;
-}
-
-.field-item-container .dtable-switch .custom-switch .custom-switch-indicator::before {
-  height: 8px;
-  width: 8px;
-}
-
-.field-item-container .dtable-switch .custom-switch-input:checked~.custom-switch-indicator:before {
-  left: 12px;
-}
-

package/lib/FieldDisplaySetting/index.js

@@ -29,17 +29,17 @@ function FieldDisplaySetting(_ref) {
     setCollapsed(!isCollapsed);
   };
   const defaultStyle = {
-    transition: `all ${DURATION}ms cubic-bezier(.645,.045,.355,1)`,
+    transition: "all ".concat(DURATION, "ms cubic-bezier(.645,.045,.355,1)"),
     opacity: 0
   };
   const transitionStyles = {
     entering: {
       opacity: 1,
-      height: `${fields.length * FIELD_ITEM_HEIGHT + BANNER_HEIGHT}px`
+      height: "".concat(fields.length * FIELD_ITEM_HEIGHT + BANNER_HEIGHT, "px")
     },
     entered: {
       opacity: 1,
-      height: `${fields.length * FIELD_ITEM_HEIGHT + BANNER_HEIGHT}px`
+      height: "".concat(fields.length * FIELD_ITEM_HEIGHT + BANNER_HEIGHT, "px")
     },
     exiting: {
       opacity: 0,
@@ -58,7 +58,7 @@ function FieldDisplaySetting(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
     className: "mb-0"
   }, textProperties.titleValue), /*#__PURE__*/_react.default.createElement("span", {
-    className: `dtable-font dtable-icon-right expand-button ${isCollapsed ? '' : 'revolving'}`
+    className: "dtable-font dtable-icon-right expand-button ".concat(isCollapsed ? '' : 'revolving')
   })), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
     nodeRef: nodeRef,
     in: !isCollapsed,
@@ -71,7 +71,7 @@ function FieldDisplaySetting(_ref) {
       ...transitionStyles[state]
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `field-setting-banner ${isCollapsed ? 'd-none' : 'd-flex'} align-items-center justify-content-between h-5 mt-2 mb-2`
+    className: "field-setting-banner ".concat(isCollapsed ? 'd-none' : 'd-flex', " align-items-center justify-content-between h-5 mt-2 mb-2")
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
     className: "mb-0"
   }, textProperties.bannerValue), /*#__PURE__*/_react.default.createElement("span", {
@@ -81,7 +81,7 @@ function FieldDisplaySetting(_ref) {
     className: "field-setting-body"
   }, fields.map((field, index) => {
     return /*#__PURE__*/_react.default.createElement(_fieldItem.default, {
-      key: `${field.key}-${index}`,
+      key: "".concat(field.key, "-").concat(index),
       field: field,
       isCollapsed: isCollapsed,
       onClickField: onClickField,

package/lib/FileFormatter/index.js

@@ -30,7 +30,7 @@ class FileFormatter extends _react.default.PureComponent {
         file: item
       }), value.length !== 1 && /*#__PURE__*/_react.default.createElement("span", {
         className: "file-item-count"
-      }, `+${value.length}`));
+      }, "+".concat(value.length)));
     }
     return /*#__PURE__*/_react.default.createElement("div", {
       className: className

package/lib/FileItemFormatter/index.js

@@ -17,7 +17,7 @@ class FileItemFormatter extends _react.Component {
       isImage
     } = (0, _utils.getFileThumbnailInfo)(file);
     return /*#__PURE__*/_react.default.createElement("img", {
-      className: `file-item-icon ${isImage ? 'img' : ''}`,
+      className: "file-item-icon ".concat(isImage ? 'img' : ''),
       src: fileIconUrl,
       alt: (file === null || file === void 0 ? void 0 : file.name) || ''
     });

package/lib/FormulaFormatter/index.js

@@ -34,7 +34,7 @@ class FormulaFormatter extends _react.default.Component {
       } = this.props;
       const gridCellClassName = this.getGridCellClassName(resultType);
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: `dtable-ui cell-formatter-container formula-formatter ${containerClassName} ${gridCellClassName}`,
+        className: "dtable-ui cell-formatter-container formula-formatter ".concat(containerClassName, " ").concat(gridCellClassName),
         title: cellValue,
         "aria-label": cellValue
       }, cellValue);
@@ -69,14 +69,14 @@ class FormulaFormatter extends _react.default.Component {
       if (!Array.isArray(value)) {
         cellValue = (0, _cellValueValidator.default)(value, array_type) ? [value] : [];
       }
-      const contentItemClassName = `formula-formatter-content-item ${_isSimpleCellFormatterColumn ? 'simple-cell-formatter' : ''}`;
+      const contentItemClassName = "formula-formatter-content-item ".concat(_isSimpleCellFormatterColumn ? 'simple-cell-formatter' : '');
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "dtable-ui formula-formatter multiple"
       }, cellValue.map((v, index) => {
         formatterProps.value = v;
         return /*#__PURE__*/_react.default.createElement("div", {
           className: contentItemClassName,
-          key: `formula-formatter-content-item-${index}`
+          key: "formula-formatter-content-item-".concat(index)
         }, this.createColumnFormatter(Formatter, formatterProps));
       }));
     };
@@ -110,7 +110,7 @@ class FormulaFormatter extends _react.default.Component {
     };
   }
   createColumnFormatter(Formatter, formatterProps) {
-    if (/*#__PURE__*/_react.default.isValidElement(Formatter)) {
+    if ( /*#__PURE__*/_react.default.isValidElement(Formatter)) {
       return /*#__PURE__*/_react.default.cloneElement(Formatter, {
         ...formatterProps
       });

package/lib/HtmlLongTextFormatter/index.js

@@ -67,7 +67,7 @@ class HtmlLongTextFormatter extends _react.Component {
     const className = (0, _classnames.default)('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
     if (!innerHtml) return null;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: `${className} article`,
+      className: "".concat(className, " article"),
       dangerouslySetInnerHTML: {
         __html: innerHtml
       }

package/lib/ImageFormatter/index.js

@@ -88,7 +88,7 @@ class ImageFormatter extends _react.default.Component {
         alt: ""
       }), value.length !== 1 && /*#__PURE__*/_react.default.createElement("span", {
         className: "image-item-count"
-      }, `+${value.length}`));
+      }, "+".concat(value.length)));
     }
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: className
@@ -109,8 +109,7 @@ class ImageFormatter extends _react.default.Component {
       readOnly: readOnly,
       server: server,
       moveToPrevRowImage: this.props.moveToPrevRowImage,
-      moveToNextRowImage: this.props.moveToNextRowImage,
-      onViewOriginal: this.props.onViewOriginal
+      moveToNextRowImage: this.props.moveToNextRowImage
     }));
   }
 }

package/lib/ImagePreviewerLightbox/index.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactImageLightbox = _interopRequireDefault(require("@seafile/react-image-lightbox"));
 var _utils = require("./utils");
-var _lang = require("../lang");
 require("@seafile/react-image-lightbox/style.css");
 function ImagePreviewerLightbox(props) {
   const {
@@ -55,11 +54,7 @@ function ImagePreviewerLightbox(props) {
     } : null,
     onClickDownload: downloadImage ? () => {
       downloadImage(URL);
-    } : null,
-    imagePadding: 70,
-    onViewOriginal: props.onViewOriginal,
-    viewOriginalImageLabel: (0, _lang.getLocale)('View_original_image'),
-    enableRotate: true
+    } : null
   });
 }
 var _default = exports.default = ImagePreviewerLightbox;

package/lib/MBEditorHeader/index.js

@@ -17,7 +17,7 @@ class MBEditorHeader extends _react.default.Component {
       onRightClick
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: `dtable-ui-mb-editor-header ${titleClass ? titleClass : ''}`
+      className: "dtable-ui-mb-editor-header ".concat(titleClass ? titleClass : '')
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "editor-header-left-content",
       onClick: onLeftClick

package/lib/MultipleSelectFormatter/index.js

@@ -22,7 +22,7 @@ class MultipleSelectFormatter extends _react.default.PureComponent {
       if (selectedOptions.length === 0) return [];
       return selectedOptions.map(option => {
         return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
-          key: `multiple-${option.id}`,
+          key: "multiple-".concat(option.id),
           option: option
         });
       });

package/lib/RateFormatter/index.js

@@ -24,9 +24,9 @@ class RateFormatter extends _react.default.Component {
       const validValue = Math.min(rate_max_number, value);
       let rateList = [];
       for (let i = 0; i < validValue; i++) {
-        rateList.push(/*#__PURE__*/_react.default.createElement("i", {
-          key: `dtable-ui-component-rate-${i}`,
-          className: `dtable-font ${rate_style_type}`,
+        rateList.push( /*#__PURE__*/_react.default.createElement("i", {
+          key: "dtable-ui-component-rate-".concat(i),
+          className: "dtable-font ".concat(rate_style_type),
           style: {
             color: rate_style_color || '#e5e5e5'
           }

package/lib/RoleStatusEditor/index.js

@@ -53,7 +53,7 @@ const RoleStatusEditor = _ref => {
       label
     } = option;
     return /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
-      key: `item-${value}`,
+      key: "item-".concat(value),
       onClick: () => handleClickMenuOption(option)
     }, label, value === currentOption.value && /*#__PURE__*/_react.default.createElement("i", {
       className: "dtable-font dtable-icon-check-mark ml-2"

package/lib/RowExpandEmailFormatter/index.js

@@ -17,7 +17,7 @@ class RowExpandEmailFormatter extends _react.default.Component {
         value
       } = this.props;
       let newValue = value.trim();
-      window.location.href = `mailto:${newValue}`;
+      window.location.href = "mailto:".concat(newValue);
     };
   }
   render() {

package/lib/RowExpandFileFormatter/row-expand-file-item-formatter.js

@@ -60,12 +60,12 @@ class RowExpandFileItemFormatter extends _react.Component {
     const id = 'file-list-preview-item' + column.key + index;
     const url = this.getFileIconData(file);
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      key: `file-${index}`,
+      key: "file-".concat(index),
       className: "row-expand-item-file",
       id: id
     }, /*#__PURE__*/_react.default.createElement("img", {
       src: url,
-      id: `item-file-${index}`,
+      id: "item-file-".concat(index),
       alt: file.name
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: "dtable-file-icons-choice"

package/lib/RowExpandFormatter/index.js

@@ -94,7 +94,7 @@ class EditorFormatter extends _react.default.Component {
       const {
         collaborators
       } = this.state;
-      const containerClassName = `dtable-${columnType}-formatter ${className || ''}`;
+      const containerClassName = "dtable-".concat(columnType, "-formatter ").concat(className || '');
       let cellValue = row[column.key] !== null && row[column.key] !== undefined ? row[column.key] : row[column.name];
       switch (columnType) {
         case _constants.CellType.TEXT:

package/lib/RowExpandFormulaFormatter/index.js

@@ -33,7 +33,7 @@ class RowExpandFormulaFormatter extends _react.default.Component {
     };
     this.onOpenUrlLink = url => {
       if (!(0, _utils.isValidUrl)(url)) {
-        url = `http://${url}`;
+        url = "http://".concat(url);
       }
       try {
         (0, _utils.openUrlLink)(url);
@@ -42,7 +42,7 @@ class RowExpandFormulaFormatter extends _react.default.Component {
       }
     };
     this.onOpenEmailLink = email => {
-      window.location.href = `mailto:${email.trim()}`;
+      window.location.href = "mailto:".concat(email.trim());
     };
     this.renderBorder = dom => {
       const {
@@ -76,8 +76,8 @@ class RowExpandFormulaFormatter extends _react.default.Component {
         containerClassName
       } = this.props;
       const customClassName = this.getGridCellClassName(resultType);
-      const className = `dtable-ui cell-formatter-container formula-formatter ${containerClassName} ${customClassName}`;
-      return this.renderBorder(/*#__PURE__*/_react.default.createElement("div", {
+      const className = "dtable-ui cell-formatter-container formula-formatter ".concat(containerClassName, " ").concat(customClassName);
+      return this.renderBorder( /*#__PURE__*/_react.default.createElement("div", {
         className: className,
         title: cellValue,
         "aria-label": cellValue
@@ -120,7 +120,7 @@ class RowExpandFormulaFormatter extends _react.default.Component {
         formulaEmail = cellValue[0];
         formulaEmail = formulaEmail ? formulaEmail.trim() : '';
       }
-      return this.renderBorder(/*#__PURE__*/_react.default.createElement("div", {
+      return this.renderBorder( /*#__PURE__*/_react.default.createElement("div", {
         className: "dtable-ui formula-formatter multiple"
       }, cellValue.map((v, index) => {
         formatterProps.value = v;
@@ -130,7 +130,7 @@ class RowExpandFormulaFormatter extends _react.default.Component {
           }, {
             'formula-url-formatter-column': formulaUrl || formulaEmail
           }),
-          key: `formula-formatter-content-item-${index}`
+          key: "formula-formatter-content-item-".concat(index)
         }, formulaUrl && /*#__PURE__*/_react.default.createElement("span", {
           "aria-hidden": "true",
           className: "dtable-font dtable-icon-url formula-url-link",
@@ -172,7 +172,7 @@ class RowExpandFormulaFormatter extends _react.default.Component {
     };
   }
   createColumnFormatter(Formatter, formatterProps) {
-    if (/*#__PURE__*/_react.default.isValidElement(Formatter)) {
+    if ( /*#__PURE__*/_react.default.isValidElement(Formatter)) {
       return /*#__PURE__*/_react.default.cloneElement(Formatter, {
         ...formatterProps
       });

package/lib/RowExpandImageFormatter/index.js

@@ -52,7 +52,8 @@ class RowExpandImageFormatter extends _react.default.Component {
       server,
       containerClassName,
       readOnly,
-      column
+      column,
+      downloadImage
     } = this.props;
     const {
       isPreviewImage,
@@ -69,7 +70,7 @@ class RowExpandImageFormatter extends _react.default.Component {
         key: index,
         index: index,
         column: column,
-        downloadFile: this.props.downloadImage,
+        downloadFile: downloadImage,
         deleteFile: this.props.deleteFile,
         readOnly: readOnly,
         onImageClick: this.onImageClick
@@ -81,9 +82,8 @@ class RowExpandImageFormatter extends _react.default.Component {
       moveToPrevImage: this.movePrev,
       moveToNextImage: this.moveNext,
       deleteImage: this.props.deleteFile,
-      downloadImage: this.props.downloadImage,
+      downloadImage: downloadImage,
       onRotateImage: this.props.rotateImage,
-      onViewOriginal: this.props.onViewOriginal,
       readOnly: readOnly,
       server: server,
       moveToPrevRowImage: this.props.moveToPrevRowImage,

package/lib/RowExpandImageFormatter/row-expand-image-item-formatter.js

@@ -65,13 +65,13 @@ class RowExpandImageItemFormatter extends _react.Component {
     const id = 'image-list-preview-item' + column.key + index;
     const name = decodeURI(url.slice(url.lastIndexOf('/') + 1));
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      key: `image-${index}`,
+      key: "image-".concat(index),
       className: "row-expand-item-image",
       id: id,
       onClick: this.onClickImage
     }, /*#__PURE__*/_react.default.createElement("img", {
       src: url,
-      id: `item-image-${index}`,
+      id: "item-image-".concat(index),
       alt: name
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: "dtable-image-icons-choice"

package/lib/RowExpandLinkFormatter/collaborator-item-formatter.js

@@ -41,7 +41,7 @@ class CollaboratorItemFormatter extends _react.Component {
       }
       if (!context) return;
       const mediaUrl = context.getSetting('mediaUrl');
-      const defaultAvatarUrl = `${mediaUrl}/avatars/default.png`;
+      const defaultAvatarUrl = "".concat(mediaUrl, "/avatars/default.png");
       if (cellValue === 'anonymous') {
         collaborator = {
           name: 'anonymous',

package/lib/RowExpandLinkFormatter/index.js

@@ -58,7 +58,7 @@ class RowExpandLinkFormatter extends _react.Component {
           }, cellValue.map((value, index) => {
             if (!value) return null;
             return /*#__PURE__*/_react.default.createElement("div", {
-              key: `link-${displayColumnType}-${index}`,
+              key: "link-".concat(displayColumnType, "-").concat(index),
               className: "row-expand-link-item"
             }, value);
           }));
@@ -73,7 +73,7 @@ class RowExpandLinkFormatter extends _react.Component {
               format
             } = displayColumnData || {};
             return /*#__PURE__*/_react.default.createElement(_DateFormatter.default, {
-              key: `link-${displayColumnType}-${index}`,
+              key: "link-".concat(displayColumnType, "-").concat(index),
               value: value,
               format: format,
               containerClassName: "row-expand-link-item"
@@ -87,7 +87,7 @@ class RowExpandLinkFormatter extends _react.Component {
           }, cellValue.map((value, index) => {
             if (!value) return null;
             return /*#__PURE__*/_react.default.createElement(_CTimeFormatter.default, {
-              key: `link-${displayColumnType}-${index}`,
+              key: "link-".concat(displayColumnType, "-").concat(index),
               value: value,
               containerClassName: "row-expand-link-item"
             });
@@ -100,7 +100,7 @@ class RowExpandLinkFormatter extends _react.Component {
           }, cellValue.map((value, index) => {
             if (!value) return null;
             return /*#__PURE__*/_react.default.createElement(_MTimeFormatter.default, {
-              key: `link-${displayColumnType}-${index}`,
+              key: "link-".concat(displayColumnType, "-").concat(index),
               value: value,
               containerClassName: "row-expand-link-item"
             });
@@ -114,7 +114,7 @@ class RowExpandLinkFormatter extends _react.Component {
           }, cellValue.map((value, index) => {
             if (!value) return null;
             return /*#__PURE__*/_react.default.createElement(_collaboratorItemFormatter.default, {
-              key: `link-${displayColumnType}-${index}`,
+              key: "link-".concat(displayColumnType, "-").concat(index),
               cellValue: value,
               collaborators: collaborators,
               context: props.context,
@@ -137,7 +137,7 @@ class RowExpandLinkFormatter extends _react.Component {
           }, cellValue.map((value, index) => {
             if (!value) return null;
             return /*#__PURE__*/_react.default.createElement("div", {
-              key: `link-${displayColumnType}-${index}`,
+              key: "link-".concat(displayColumnType, "-").concat(index),
               className: "row-expand-link-item"
             }, (0, _valueDisplayUtils.getCellDisplayValue)({
               [displayColumn.key]: value

package/lib/RowExpandRateFormatter/index.js

@@ -26,9 +26,9 @@ 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-${i}`,
-          className: `dtable-font ${rate_style_type}`,
+        rateList.push( /*#__PURE__*/_react.default.createElement("i", {
+          key: "dtable-ui-component-rate-".concat(i),
+          className: "dtable-font ".concat(rate_style_type),
           style: style
         }));
       }

package/lib/RowExpandUrlFormatter/index.js

@@ -18,7 +18,7 @@ class UrlFormatter extends _react.default.Component {
         value
       } = this.props;
       const url = (0, _editorUtils.getTrimmedString)(value);
-      const validUrl = (0, _editorUtils.isValidUrl)(url) ? url : `http://${url}`;
+      const validUrl = (0, _editorUtils.isValidUrl)(url) ? url : "http://".concat(url);
       try {
         let a = document.createElement('a');
         document.body.appendChild(a);

package/lib/SelectItem/index.js

@@ -19,7 +19,7 @@ class SelectItem extends _react.default.PureComponent {
         textAlign: 'center',
         borderRadius: '10px',
         maxWidth: '250px',
-        fontSize: fontSize ? `${fontSize}px` : '13px',
+        fontSize: fontSize ? "".concat(fontSize, "px") : '13px',
         backgroundColor: option.color,
         color: option.textColor || null
       };

package/lib/SelectOptionGroup/index.js

@@ -137,7 +137,7 @@ class SelectOptionGroup extends _react.Component {
         let key = opt.value.column ? opt.value.column.key : i;
         let isActive = this.state.activeIndex === i;
         return /*#__PURE__*/_react.default.createElement(_option.default, {
-          key: `${key}-${i}`,
+          key: "".concat(key, "-").concat(i),
           index: i,
           isActive: isActive,
           value: opt.value,

package/lib/SimpleLongTextFormatter/index.js

@@ -29,8 +29,8 @@ class SimpleLongTextFormatter extends _react.default.Component {
       return /*#__PURE__*/_react.default.createElement("span", {
         className: "long-text-check-list"
       }, /*#__PURE__*/_react.default.createElement("i", {
-        className: `dtable-font dtable-icon-check-square-solid ${checkList.completed === checkList.total ? 'long-text-check-list-completed' : ''}`
-      }), `${checkList.completed}/${checkList.total}`);
+        className: "dtable-font dtable-icon-check-square-solid ".concat(checkList.completed === checkList.total ? 'long-text-check-list-completed' : '')
+      }), "".concat(checkList.completed, "/").concat(checkList.total));
     };
     this.renderImages = value => {
       const images = value.images;

package/lib/locals/en.js

@@ -30,7 +30,6 @@ const en = {
   "Current_user_department_and_sub": "Current user\"s department and sub-departments",
   "Specific_departments": "Specific departments",
   "Deleted_department": "Deleted department",
-  "View_original_image": "View original image",
   "Add_filter": "Add filter",
   "Submit": "Submit",
   "No_filters": "No filters",

package/lib/locals/zh-CN.js

@@ -30,7 +30,6 @@ const zh_CN = {
   "Current_user_department_and_sub": "当前用户的部门和子部门",
   "Specific_departments": "具体部门",
   "Deleted_department": "已经删除的部门",
-  "View_original_image": "查看原图",
   "Add_filter": "添加过滤",
   "Submit": "提交",
   "No_filters": "没有过滤条件",

package/lib/select-editor/mb-select-editor-popover/index.js

@@ -185,7 +185,7 @@ class MBSelectEditorPopover extends _react.default.Component {
       className: "dtable-font dtable-icon-add-table"
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: "dtable-ui-add-new-option"
-    }, `${(0, _lang.getLocale)('Add_an_option')} ${searchVal}`))));
+    }, "".concat((0, _lang.getLocale)('Add_an_option'), " ").concat(searchVal)))));
   }
 }
 MBSelectEditorPopover.defaultProps = {

package/lib/toaster/alert.js

@@ -31,7 +31,7 @@ class Alert extends _react.default.PureComponent {
     } = this.props;
     const iconClass = this.getIconClass(intent);
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: `dtable-toast-alert-container ${intent || 'success'}`
+      className: "dtable-toast-alert-container ".concat(intent || 'success')
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "toast-alert-icon"
     }, /*#__PURE__*/_react.default.createElement("i", {

package/lib/toaster/toast.js

@@ -78,7 +78,7 @@ class Toast extends _react.default.PureComponent {
       onExited: this.props.onRemove
     }, state => /*#__PURE__*/_react.default.createElement("div", {
       "data-state": state,
-      className: `dtable-toast-container ${state}`,
+      className: "dtable-toast-container ".concat(state),
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
       style: {

package/lib/toaster/toastManager.js

@@ -37,7 +37,7 @@ class ToastManager extends _react.default.PureComponent {
     };
     this.createToastInstance = (title, settings) => {
       const uniqueId = ++ToastManager.idCounter;
-      const id = hasCustomId(settings) ? `${settings.id}-${uniqueId}` : uniqueId;
+      const id = hasCustomId(settings) ? "".concat(settings.id, "-").concat(uniqueId) : uniqueId;
       let hasCloseButton = settings.hasCloseButton || true;
       let duration = settings.duration || 2;
       if (settings.hasCloseButton !== undefined) {

package/lib/toaster/toaster.js

@@ -65,7 +65,7 @@ class Toaster {
     const container = document.createElement('div');
     container.setAttribute('data-evergreen-toaster-container', '');
     document.body.appendChild(container);
-    _reactDom.default.render(/*#__PURE__*/_react.default.createElement(_toastManager.default, {
+    _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_toastManager.default, {
       bindNotify: this._bindNotify,
       bindGetToasts: this._bindGetToasts,
       bindCloseAll: this._bindCloseAll

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.1.15-alpha1",
+  "version": "5.2.0",
   "main": "./lib/index.js",
   "dependencies": {
-    "@seafile/react-image-lightbox": "3.0.1",
+    "@seafile/react-image-lightbox": "2.0.5",
     "@seafile/seafile-calendar": "0.0.24",
-    "@seafile/seafile-editor": "~1.0.123",
+    "@seafile/seafile-editor": "~1.0.122",
     "antd-mobile": "2.3.1",
     "classnames": "2.3.2",
     "dayjs": "1.10.7",