dtable-ui-component 5.0.9-beta.4 → 5.0.11-beta

package/lib/DTableCustomizeCollaboratorSelect/index.js

@@ -24,7 +24,7 @@ class CollaboratorSelect extends _react.Component {
       if (this.state.isShowSelectOptions) event.nativeEvent.stopImmediatePropagation();
       let eventClassName = event.target.className;
       if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'option-group-search') return;
-      //Prevent closing by pressing the spacebar in the search input
+      // Prevent closing by pressing the spacebar in the search input
       if (event.target.value === '') return;
       this.selectedOptionWidth = this.selectedOptionRef.clientWidth;
       this.setState({

package/lib/DTableCustomizeSelect/index.js

@@ -23,7 +23,7 @@ class DTableCustomizeSelect extends _react.Component {
       if (this.state.isShowSelectOptions) event.stopPropagation();
       let eventClassName = event.target.className;
       if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'option-group-search') return;
-      //Prevent closing by pressing the spacebar in the search input
+      // Prevent closing by pressing the spacebar in the search input
       if (event.target.value === '') return;
       this.setState({
         isShowSelectOptions: !this.state.isShowSelectOptions

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

@@ -81,7 +81,7 @@ class FilterCalendar extends _react.Component {
       value: null
     };
     const DataFormat = (0, _utils.getDateColumnFormat)(props.filterColumn).trim();
-    //Minutes and seconds are not supported at present
+    // Minutes and seconds are not supported at present
     this.columnDataFormat = DataFormat.split(' ')[0];
     this.calendarContainerRef = /*#__PURE__*/_react.default.createRef();
     this.defaultCalendarValue = null;

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

@@ -274,7 +274,7 @@ class FilterItem extends _react.default.Component {
         filter_predicate
       } = filter;
       let isSupportMultipleSelect = false;
-      //The first two options are used for single selection, and the last four options are used for multiple selection
+      // The first two options are used for single selection, and the last four options are used for multiple selection
       const supportMultipleSelectOptions = [_dtableUtils.FILTER_PREDICATE_TYPE.IS_ANY_OF, _dtableUtils.FILTER_PREDICATE_TYPE.IS_NONE_OF, _dtableUtils.FILTER_PREDICATE_TYPE.HAS_ANY_OF, _dtableUtils.FILTER_PREDICATE_TYPE.HAS_ALL_OF, _dtableUtils.FILTER_PREDICATE_TYPE.HAS_NONE_OF, _dtableUtils.FILTER_PREDICATE_TYPE.IS_EXACTLY];
       if (supportMultipleSelectOptions.includes(filter_predicate)) {
         isSupportMultipleSelect = true;

package/lib/DTableRadioGroup/index.css

@@ -0,0 +1,69 @@
+.radio-group-wrapper {
+  display: block;
+  width: 100%;
+  height: 2.375rem;
+  color: #212529;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+  padding: 4px;
+}
+
+.radio-group-options {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.radio-group-options .radio-group-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  height: 100%;
+  padding: 0 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: 3px;
+  z-index: 2;
+}
+
+.radio-group-options .radio-group-button:hover {
+  cursor: pointer;
+}
+
+.radio-group-options .radio-group-button:not(.active):hover {
+  background-color: #f0f0f0;
+}
+
+.radio-group-options .radio-group-button.active {
+  color:#fff;
+}
+
+.radio-group-options .radio-group-slider {
+  display: inline-flex;
+  position: absolute;
+  height: 100%;
+  transition: 150ms cubic-bezier(.4, 0, .2, 1);
+  border-radius: 3px;
+  z-index: 1;
+}
+
+.radio-group-options .radio-group-button:nth-of-type(1).active ~ .radio-group-slider {
+  transform:translateX(0%);
+}
+
+.radio-group-options .radio-group-button:nth-of-type(2).active ~ .radio-group-slider {
+  transform:translateX(100%);
+}
+
+.radio-group-options .radio-group-button:nth-of-type(3).active ~ .radio-group-slider {
+  transform:translateX(200%);
+}
+
+.radio-group-options .radio-group-button:nth-of-type(4).active ~ .radio-group-slider {
+  transform:translateX(300%);
+}

package/lib/{RadioGroup → DTableRadioGroup}/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 require("./index.css");
-class RadioGroup extends _react.default.Component {
+class DTableRadioGroup extends _react.default.Component {
   constructor(props) {
     super(props);
     this.onSelectChanged = event => {
@@ -24,6 +24,13 @@ class RadioGroup extends _react.default.Component {
       activeOption: props.activeOption
     };
   }
+  componentDidMount() {
+    if (!this.btn) return;
+    const {
+      width
+    } = this.btn.getBoundingClientRect();
+    this.slider.style.width = "".concat(width, "px");
+  }
   componentDidUpdate(prevProps) {
     if (this.props.activeOption !== prevProps.activeOption) {
       this.setState({
@@ -48,11 +55,15 @@ class RadioGroup extends _react.default.Component {
       const displayOption = optionsDisplay && optionsDisplay[option] || '';
       return /*#__PURE__*/_react.default.createElement("div", {
         key: option,
-        className: "radio-group-button ".concat(isActive ? 'btn-primary' : ''),
+        ref: ref => this.btn = ref,
+        className: "radio-group-button ".concat(isActive ? 'active' : ''),
         "data-option": option,
         onClick: this.onSelectChanged
       }, displayOption);
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "radio-group-slider btn-primary",
+      ref: ref => this.slider = ref
     })));
   }
 }
-var _default = exports.default = RadioGroup;
+var _default = exports.default = DTableRadioGroup;

package/lib/DepartmentSelectFilter/index.js

@@ -26,5 +26,4 @@ function DepartmentSelectFilter(props) {
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isMultiple ? /*#__PURE__*/_react.default.createElement(_departmentMultipleSelectFilter.default, filterProps) : /*#__PURE__*/_react.default.createElement(_departmentSingleSelectFilter.default, filterProps));
 }
-;
 var _default = exports.default = DepartmentSelectFilter;

package/lib/DigitalSignFormatter/index.js

@@ -60,7 +60,8 @@ class DigitalSignFormatter extends _react.Component {
       containerClassName,
       readOnly,
       config,
-      isSample
+      isSample,
+      renderItem
     } = this.props;
     const className = (0, _classnames.default)('dtable-ui cell-formatter-container digital-sign-formatter', containerClassName);
     const signImages = this.getSignImages();
@@ -74,7 +75,8 @@ class DigitalSignFormatter extends _react.Component {
     }, /*#__PURE__*/_react.default.createElement(_imagesLazyLoad.default, {
       images: signImages,
       server: config.server,
-      onImageClick: this.onClickSignImage
+      onImageClick: this.onClickSignImage,
+      renderItem: renderItem
     })), isPreviewSignImage && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
       className: "digital-sign-formatter-image-previewer",
       readOnly: readOnly,

package/lib/FileFormatter/index.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _FileItemFormatter = _interopRequireDefault(require("../FileItemFormatter"));
 require("./index.css");
@@ -14,7 +15,8 @@ class FileFormatter extends _react.default.PureComponent {
     let {
       isSample,
       value,
-      containerClassName
+      containerClassName,
+      renderItem
     } = this.props;
     if (!Array.isArray(value) || value.length === 0) {
       return null;
@@ -33,10 +35,15 @@ class FileFormatter extends _react.default.PureComponent {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: className
     }, value.map((item, index) => {
-      return /*#__PURE__*/_react.default.createElement(_FileItemFormatter.default, {
-        file: item,
-        key: index
+      const dom = /*#__PURE__*/_react.default.createElement(_FileItemFormatter.default, {
+        file: item
       });
+      if (renderItem) return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: index
+      }, renderItem(dom));
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: index
+      }, dom);
     }));
   }
 }

package/lib/ImageFormatter/images-lazy-load.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Loading = _interopRequireDefault(require("../Loading"));
 var _utils = require("./utils");
 class ImagesLazyLoad extends _react.default.Component {
@@ -97,6 +98,9 @@ class ImagesLazyLoad extends _react.default.Component {
       loadedImages,
       loadedCount
     } = this.state;
+    const {
+      renderItem
+    } = this.props;
     if (!Array.isArray(images) || images.length === 0) {
       return '';
     }
@@ -110,14 +114,19 @@ class ImagesLazyLoad extends _react.default.Component {
       }, /*#__PURE__*/_react.default.createElement(_Loading.default, null));
     }
     return loadedImages.map((image, index) => {
-      return /*#__PURE__*/_react.default.createElement("img", {
-        key: index,
+      const imgDom = /*#__PURE__*/_react.default.createElement("img", {
         className: "image-item",
         src: image.src,
         onMouseDown: this.onMouseDown,
         onClick: event => this.onImageClick(event, index),
         alt: ""
       });
+      if (renderItem) return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: index
+      }, renderItem(imgDom));
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: index
+      }, imgDom);
     });
   }
 }

package/lib/ImageFormatter/index.js

@@ -95,7 +95,8 @@ class ImageFormatter extends _react.default.Component {
     }, /*#__PURE__*/_react.default.createElement(_imagesLazyLoad.default, {
       images: value,
       server: server,
-      onImageClick: this.onImageClick
+      onImageClick: this.onImageClick,
+      renderItem: this.props.renderItem
     })), isPreviewImage && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
       imageItems: value,
       imageIndex: previewImageIndex,

package/lib/NumberEditor/index.js

@@ -49,7 +49,7 @@ class NumberEditor extends _react.default.Component {
         currency_symbol = data['currency_symbol'];
       }
 
-      //Prevent the repetition of periods bug in the Chinese input method of the Windows system
+      // Prevent the repetition of periods bug in the Chinese input method of the Windows system
       if (!(0, _utils.isMac)() && value.indexOf('.。') > -1) return;
       value = (0, _dtableUtils.replaceNumberNotAllowInput)(value, this.dataFormat, currency_symbol);
       if (value === this.state.inputValue) return;

package/lib/SelectOptionGroup/KeyCodes.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = {
+const KeyCodes = {
   LeftArrow: 37,
   UpArrow: 38,
   RightArrow: 39,
@@ -13,4 +13,5 @@ var _default = exports.default = {
   Tab: 9,
   Escape: 27,
   Esc: 27
-};
+};
+var _default = exports.default = KeyCodes;

package/lib/index.js

@@ -106,6 +106,12 @@ Object.defineProperty(exports, "DTableRadio", {
     return _DTableRadio.default;
   }
 });
+Object.defineProperty(exports, "DTableRadioGroup", {
+  enumerable: true,
+  get: function () {
+    return _DTableRadioGroup.default;
+  }
+});
 Object.defineProperty(exports, "DTableSearchInput", {
   enumerable: true,
   get: function () {
@@ -286,12 +292,6 @@ Object.defineProperty(exports, "NumberFormatter", {
     return _NumberFormatter.default;
   }
 });
-Object.defineProperty(exports, "RadioGroup", {
-  enumerable: true,
-  get: function () {
-    return _RadioGroup.default;
-  }
-});
 Object.defineProperty(exports, "RateFormatter", {
   enumerable: true,
   get: function () {
@@ -472,4 +472,4 @@ var _FieldDisplaySetting = _interopRequireDefault(require("./FieldDisplaySetting
 var _DTableFiltersPopover = _interopRequireDefault(require("./DTableFiltersPopover"));
 var _ClickOutside = _interopRequireDefault(require("./ClickOutside"));
 var _CollapsibleSettingLayout = _interopRequireDefault(require("./CollapsibleSettingLayout"));
-var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
+var _DTableRadioGroup = _interopRequireDefault(require("./DTableRadioGroup"));

package/lib/utils/event-bus.js

@@ -31,4 +31,5 @@ class EventBus {
     }
   }
 }
-var _default = exports.default = new EventBus();
+const eventBus = new EventBus();
+var _default = exports.default = eventBus;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.0.9-beta.4",
+  "version": "5.0.11beta",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",

package/lib/RadioGroup/index.css

@@ -1,48 +0,0 @@
-.radio-group-wrapper {
-  display: block;
-  width: 100%;
-  height: 2.375rem;
-  color: #212529;
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 40, 100, 0.12);
-  border-radius: 3px;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
-
-.radio-group-options {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-}
-
-.radio-group-options .radio-group-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  height: 100%;
-  padding: 0 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  border-radius: 3px;
-}
-
-.radio-group-options .radio-group-button:hover {
-  cursor: pointer;
-  background-color: #f0f0f0;
-}
-
-.radio-group-options .radio-group-button.readOnly {
-  cursor: default;
-  opacity: 0.6;
-}
-
-.radio-group-options .radio-group-button.btn-primary:hover {
-  color: #fff;
-  background-color: #ED7109;
-  border-color: #ED7109;
-}