dtable-ui-component 6.0.108 → 6.0.110-aik.2

package/lib/IconButton/index.js

@@ -5,29 +5,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["disabled", "className", "icon", "children"];
 const IconButton = _ref => {
   let {
-      disabled,
-      className,
-      icon,
-      children
-    } = _ref,
-    otherProperties = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    disabled,
+    className,
+    icon,
+    children,
+    ...otherProperties
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)('seatable-icon-btn', className, {
       'disabled': disabled
-    })
-  }, otherProperties), {}, {
+    }),
+    ...otherProperties,
     children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-      className: (0, _classnames.default)('seatable-icon dtable-font', "dtable-icon-".concat(icon)),
+      className: (0, _classnames.default)('seatable-icon dtable-font', `dtable-icon-${icon}`),
       "aria-hidden": "true"
     }), children]
-  }));
+  });
 };
 var _default = exports.default = IconButton;

package/lib/ImageEditor/images-previewer/image-preview/index.js

@@ -94,7 +94,7 @@ class ImagePreviewer extends _react.default.Component {
     const {
       mediaUrl
     } = props.config || {};
-    this.imageLoadingFailedUrl = "".concat(mediaUrl, "img/image-loading-failed.png");
+    this.imageLoadingFailedUrl = `${mediaUrl}img/image-loading-failed.png`;
     this.ref = null;
   }
   componentDidMount() {

package/lib/ImageEditor/index.js

@@ -6,37 +6,38 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 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 _excluded = ["isMobile"];
 const ImageEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
-      isMobile
-    } = _ref,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    isMobile,
+    ...props
+  } = _ref;
+  if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, {
+    ...props,
     ref: ref
-  }));
-  if (isMobile === true) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+  });
+  if (isMobile === true) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+    ...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, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      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, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+        ...props,
         ref: ref
-      }))
+      })
     })]
   });
 });

package/lib/ImageEditor/pc-editor/addition-previewer/index.js

@@ -42,11 +42,11 @@ class AdditionPreviewer extends _react.default.Component {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "dtable-ui-image-addition-nav",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "dtable-ui-addition-item ".concat(activeTab === 'localPicture' ? 'dtable-ui-addition-item-selected' : ''),
+            className: `dtable-ui-addition-item ${activeTab === 'localPicture' ? 'dtable-ui-addition-item-selected' : ''}`,
             onClick: this.toggle.bind(this, 'localPicture'),
             children: (0, _lang.getLocale)('Local_Images')
           }), this.props.saveImageLink && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "dtable-ui-addition-item ".concat(activeTab === 'imageLink' ? 'dtable-ui-addition-item-selected' : ''),
+            className: `dtable-ui-addition-item ${activeTab === 'imageLink' ? 'dtable-ui-addition-item-selected' : ''}`,
             onClick: this.toggle.bind(this, 'imageLink'),
             children: (0, _lang.getLocale)('Image_Link')
           })]

package/lib/ImageEditor/pc-editor/addition-previewer/local-image-addition/index.js

@@ -133,7 +133,7 @@ class LocalImageAddition extends _react.default.Component {
                     src: fileThumbnailItem.fileIconUrl,
                     style: {
                       position: 'absolute',
-                      zIndex: "".concat(fileThumbnailItem.percent === 100 ? 3 : 1),
+                      zIndex: `${fileThumbnailItem.percent === 100 ? 3 : 1}`,
                       maxHeight: '100%'
                     },
                     alt: ""
@@ -162,7 +162,7 @@ class LocalImageAddition extends _react.default.Component {
                   })]
                 })
               })
-            }, "dtable-ui-image-wrapper-circle".concat(index));
+            }, `dtable-ui-image-wrapper-circle${index}`);
           });
           imageArr.push(...thumbnailList);
         }
@@ -206,11 +206,11 @@ class LocalImageAddition extends _react.default.Component {
         isImageTipShow
       } = this.state;
       let editorContent;
-      let className = imageArr.length === 0 ? "dtable-ui-image-upload-container ".concat(isImageTipShow ? 'dtable-ui-image-upload-container-active' : '') : 'dtable-ui-image-wrapper';
+      let className = imageArr.length === 0 ? `dtable-ui-image-upload-container ${isImageTipShow ? 'dtable-ui-image-upload-container-active' : ''}` : 'dtable-ui-image-wrapper';
       if (imageArr.length === 0) {
         editorContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "dtable-ui-image-tip-addition ".concat(isImageTipShow ? 'dtable-ui-image-drop-active' : ''),
+            className: `dtable-ui-image-tip-addition ${isImageTipShow ? 'dtable-ui-image-drop-active' : ''}`,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "dtable-ui-dtable-ui-image-add-icon",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
@@ -233,7 +233,7 @@ class LocalImageAddition extends _react.default.Component {
         editorContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "dtable-ui-image-add-box",
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "dtable-ui-image-add-button ".concat(isImageTipShow ? 'dtable-ui-image-wrapper-drop-active' : ''),
+            className: `dtable-ui-image-add-button ${isImageTipShow ? 'dtable-ui-image-wrapper-drop-active' : ''}`,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
               "aria-hidden": "true",
               className: "dtable-font dtable-icon-add-table"

package/lib/ImageEditor/pc-editor/images-previewer/index.js

@@ -108,7 +108,7 @@ class ImagesPreviewer extends _react.default.Component {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-image-previewer-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "dtable-ui-image-previewer-wrapper ".concat(value.length === 0 && _constants.isMobile ? 'd-none' : ''),
+        className: `dtable-ui-image-previewer-wrapper ${value.length === 0 && _constants.isMobile ? 'd-none' : ''}`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "dtable-ui-image-previewer-content",
           children: value.length > 0 && value.map((imageItemUrl, index) => {

package/lib/ImageFormatter/index.js

@@ -91,7 +91,7 @@ class ImageFormatter extends _react.default.Component {
           alt: ""
         }), value.length !== 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "image-item-count",
-          children: "+".concat(value.length)
+          children: `+${value.length}`
         })]
       });
     }

package/lib/ImagePreviewerLightbox/index.js

@@ -27,35 +27,44 @@ function ImagePreviewerLightbox(props) {
     onRotateImage
   } = props;
   const imageSrcList = imageItems.map(src => {
+    let name = '';
+    try {
+      name = src ? decodeURIComponent(src.slice(src.lastIndexOf('/') + 1)) : '';
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
     if (server && dtableUuid && (0, _url.isCustomAssetUrl)(src)) {
       const assetUuid = src.slice(src.lastIndexOf('/') + 1, src.lastIndexOf('.'));
-      return server + '/dtable/' + dtableUuid + '/custom-asset/' + assetUuid;
+      return {
+        name,
+        thumbnail: server + '/dtable/' + dtableUuid + '/custom-asset/' + assetUuid
+      };
     }
     if (server && dtableUuid && workspaceID && (0, _url.isDigitalSignsUrl)(src)) {
-      return (0, _url.generateCurrentBaseImageUrl)({
-        server,
-        workspaceID,
-        dtableUuid,
-        partUrl: src
-      });
+      return {
+        name,
+        thumbnail: (0, _url.generateCurrentBaseImageUrl)({
+          server,
+          workspaceID,
+          dtableUuid,
+          partUrl: src
+        })
+      };
     }
-    return src;
+    return {
+      name: name || '',
+      thumbnail: src
+    };
   });
   const imagesLength = imageSrcList.length;
   const [currentImageIndex, setCurrentImageIndex] = _react.default.useState(imageIndex || 0);
-  const URL = imageSrcList[currentImageIndex];
+  const imageItem = imageSrcList[currentImageIndex];
+  const URL = imageItem ? imageItem.thumbnail : '';
+  const imageName = imageItem ? imageItem.name : '';
   _react.default.useEffect(() => {
     setCurrentImageIndex(imageIndex);
   }, [imageIndex]);
-
-  // Handle URL has special symbol %$
-  let imageName = '';
-  try {
-    imageName = URL ? decodeURI(URL.slice(URL.lastIndexOf('/') + 1)) : '';
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.log(error);
-  }
   const canRotateImage = onRotateImage && !readOnly && !['gif', 'heic', 'heif'].includes((0, _url.getFileSuffix)(URL)) && (0, _url.isInternalImg)(URL, server);
   let mainSrc = URL;
   if ((0, _url.needUseThumbnailImage)(URL)) {
@@ -70,7 +79,7 @@ function ImagePreviewerLightbox(props) {
     className: "d-flex",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "text-truncate",
-      children: imageName
+      children: imageName || ''
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
       className: "flex-shrink-0 pl-1",
       children: ["(", currentImageIndex + 1, "/", imagesLength, ")"]
@@ -83,8 +92,8 @@ function ImagePreviewerLightbox(props) {
     wrapperClassName: (0, _classnames.default)('dtable-ui-component', className),
     imageTitle: imageTitleDOM,
     mainSrc: mainSrc,
-    nextSrc: imageSrcList[(currentImageIndex + 1) % imagesLength],
-    prevSrc: imageSrcList[(currentImageIndex + imagesLength - 1) % imagesLength],
+    nextSrc: imageSrcList[(currentImageIndex + 1) % imagesLength] ? imageSrcList[(currentImageIndex + 1) % imagesLength].thumbnail : '',
+    prevSrc: imageSrcList[(currentImageIndex + imagesLength - 1) % imagesLength] ? imageSrcList[(currentImageIndex + imagesLength - 1) % imagesLength].thumbnail : '',
     imagePadding: 70,
     viewOriginalImageLabel: (0, _lang.getLocale)('View_original_image'),
     enableRotate: canRotateImage,

package/lib/ImageThumbnail/index.js

@@ -75,7 +75,7 @@ class ImageThumbnail extends _react.default.Component {
     const {
       mediaUrl = ''
     } = props.config || {};
-    this.imageLoadingFailedUrl = "".concat(mediaUrl, "img/image-loading-failed.png");
+    this.imageLoadingFailedUrl = `${mediaUrl}img/image-loading-failed.png`;
   }
   componentDidMount() {
     this.getUrl(this.props.src);
@@ -103,7 +103,7 @@ class ImageThumbnail extends _react.default.Component {
         ref: ref => this.ref = ref,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
           src: imageThumbnailUrl,
-          id: "item-image-".concat(index),
+          id: `item-image-${index}`,
           alt: ""
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "dtable-ui-image-icons-choice",

package/lib/InputItem/custom-input.js

@@ -63,7 +63,7 @@ class NumberInput extends React.Component {
         if (this.props.autoAdjustHeight) {
           this.getContainer().style.height = '0';
         }
-        (0, _class.addClass)(customNumberKeyboard.antmKeyboard, "".concat(this.props.keyboardPrefixCls, "-wrapper-hide"));
+        (0, _class.addClass)(customNumberKeyboard.antmKeyboard, `${this.props.keyboardPrefixCls}-wrapper-hide`);
       }
       // for unmount
       this.removeBlurListener();
@@ -98,7 +98,7 @@ class NumberInput extends React.Component {
           if (customNumberKeyboard.antmKeyboard) {
             if (this.props.autoAdjustHeight) {
               const keyBoardHeight = customNumberKeyboard.antmKeyboard.offsetHeight;
-              this.getContainer().style.height = "".concat(keyBoardHeight, "px");
+              this.getContainer().style.height = `${keyBoardHeight}px`;
               if (this.inputRef) {
                 const {
                   bottom
@@ -111,14 +111,14 @@ class NumberInput extends React.Component {
                 }
               }
             }
-            (0, _class.removeClass)(customNumberKeyboard.antmKeyboard, "".concat(this.props.keyboardPrefixCls, "-wrapper-hide"));
+            (0, _class.removeClass)(customNumberKeyboard.antmKeyboard, `${this.props.keyboardPrefixCls}-wrapper-hide`);
           }
           customNumberKeyboard.confirmDisabled = value === '';
           if (customNumberKeyboard.confirmKeyboardItem) {
             if (value === '') {
-              (0, _class.addClass)(customNumberKeyboard.confirmKeyboardItem, "".concat(this.props.keyboardPrefixCls, "-item-disabled"));
+              (0, _class.addClass)(customNumberKeyboard.confirmKeyboardItem, `${this.props.keyboardPrefixCls}-item-disabled`);
             } else {
-              (0, _class.removeClass)(customNumberKeyboard.confirmKeyboardItem, "".concat(this.props.keyboardPrefixCls, "-item-disabled"));
+              (0, _class.removeClass)(customNumberKeyboard.confirmKeyboardItem, `${this.props.keyboardPrefixCls}-item-disabled`);
             }
           }
         }
@@ -179,9 +179,9 @@ class NumberInput extends React.Component {
         customNumberKeyboard.confirmDisabled = valueAfterChange === '';
         if (customNumberKeyboard.confirmKeyboardItem) {
           if (valueAfterChange === '') {
-            (0, _class.addClass)(customNumberKeyboard.confirmKeyboardItem, "".concat(this.props.keyboardPrefixCls, "-item-disabled"));
+            (0, _class.addClass)(customNumberKeyboard.confirmKeyboardItem, `${this.props.keyboardPrefixCls}-item-disabled`);
           } else {
-            (0, _class.removeClass)(customNumberKeyboard.confirmKeyboardItem, "".concat(this.props.keyboardPrefixCls, "-item-disabled"));
+            (0, _class.removeClass)(customNumberKeyboard.confirmKeyboardItem, `${this.props.keyboardPrefixCls}-item-disabled`);
           }
         }
       }
@@ -248,10 +248,10 @@ class NumberInput extends React.Component {
     const {
       keyboardPrefixCls
     } = this.props;
-    let container = document.querySelector("#".concat(keyboardPrefixCls, "-container"));
+    let container = document.querySelector(`#${keyboardPrefixCls}-container`);
     if (!container) {
       container = document.createElement('div');
-      container.setAttribute('id', "".concat(keyboardPrefixCls, "-container"));
+      container.setAttribute('id', `${keyboardPrefixCls}-container`);
       document.body.appendChild(container);
     }
     this.container = container;

package/lib/InputItem/custom-keyboard.js

@@ -1,25 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.KeyboardItem = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var React = _interopRequireWildcard(require("react"));
 var _rmcFeedback = _interopRequireDefault(require("rmc-feedback"));
 var _exenv = require("../utils/exenv");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["prefixCls", "onClick", "className", "disabled", "children", "tdRef", "label", "iconOnly"];
 /**
  * determines whether an array includes a certain value among its entries, returning true or false as appropriate.
  * @param {array} arr The array to search in
  * @param {any} item  The value to search for
- */
-function includes(arr, item) {
+ */function includes(arr, item) {
   if (!arr || !arr.length || !item) {
     return false;
   }
@@ -32,18 +28,17 @@ function includes(arr, item) {
 }
 class KeyboardItem extends React.Component {
   render() {
-    const _this$props = this.props,
-      {
-        prefixCls,
-        onClick,
-        className,
-        disabled,
-        children,
-        tdRef,
-        label,
-        iconOnly
-      } = _this$props,
-      restProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const {
+      prefixCls,
+      onClick,
+      className,
+      disabled,
+      children,
+      tdRef,
+      label,
+      iconOnly,
+      ...restProps
+    } = this.props;
     let value = children;
     if (className === 'keyboard-delete') {
       value = 'delete';
@@ -53,26 +48,26 @@ class KeyboardItem extends React.Component {
       value = 'confirm';
     }
     const extraCls = {
-      ["".concat(prefixCls, "-item-disabled")]: disabled
+      [`${prefixCls}-item-disabled`]: disabled
     };
-    const wrapCls = (0, _classnames.default)("".concat(prefixCls, "-item"), className, extraCls);
+    const wrapCls = (0, _classnames.default)(`${prefixCls}-item`, className, extraCls);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_rmcFeedback.default, {
       disabled: disabled,
-      activeClassName: "".concat(prefixCls, "-item-active"),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("td", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      activeClassName: `${prefixCls}-item-active`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("td", {
         ref: tdRef
         // tslint:disable-next-line:jsx-no-multiline-js
         ,
         onTouchEnd: e => {
           onClick(e, value);
         },
-        className: wrapCls
-      }, restProps), {}, {
+        className: wrapCls,
+        ...restProps,
         children: [children, iconOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
           className: "sr-only",
           children: label
         })]
-      }))
+      })
     });
   }
 }
@@ -110,7 +105,7 @@ class CustomKeyboard extends React.Component {
         onClick: this.onKeyboardClick,
         disabled: disabled,
         children: item
-      }, "item-".concat(item, "-").concat(index));
+      }, `item-${item}-${index}`);
     };
   }
   render() {
@@ -122,11 +117,11 @@ class CustomKeyboard extends React.Component {
       wrapProps,
       header
     } = this.props;
-    const wrapperCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper"), "".concat(prefixCls, "-wrapper-hide"));
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    const wrapperCls = (0, _classnames.default)(`${prefixCls}-wrapper`, `${prefixCls}-wrapper-hide`);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: wrapperCls,
-      ref: el => this.antmKeyboard = el
-    }, wrapProps), {}, {
+      ref: el => this.antmKeyboard = el,
+      ...wrapProps,
       children: [header && /*#__PURE__*/React.cloneElement(header, {
         onClick: this.onKeyboardClick
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
@@ -134,11 +129,12 @@ class CustomKeyboard extends React.Component {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
             children: [['1', '2', '3'].map((item, index) =>
             // tslint:disable-next-line:jsx-no-multiline-js
-            this.renderKeyboardItem(item, index)), /*#__PURE__*/(0, _jsxRuntime.jsx)(KeyboardItem, (0, _objectSpread2.default)({
+            this.renderKeyboardItem(item, index)), /*#__PURE__*/(0, _jsxRuntime.jsx)(KeyboardItem, {
               className: "keyboard-delete",
               rowSpan: 2,
-              onClick: this.onKeyboardClick
-            }, this.getAriaAttr(backspaceLabel)))]
+              onClick: this.onKeyboardClick,
+              ...this.getAriaAttr(backspaceLabel)
+            })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
             children: ['4', '5', '6'].map((item, index) =>
             // tslint:disable-next-line:jsx-no-multiline-js
@@ -156,14 +152,15 @@ class CustomKeyboard extends React.Component {
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
             children: [['.', '0'].map((item, index) =>
             // tslint:disable-next-line:jsx-no-multiline-js
-            this.renderKeyboardItem(item, index)), /*#__PURE__*/(0, _jsxRuntime.jsx)(KeyboardItem, (0, _objectSpread2.default)({
+            this.renderKeyboardItem(item, index)), /*#__PURE__*/(0, _jsxRuntime.jsx)(KeyboardItem, {
               className: "keyboard-hide",
-              onClick: this.onKeyboardClick
-            }, this.getAriaAttr(cancelKeyboardLabel)))]
+              onClick: this.onKeyboardClick,
+              ...this.getAriaAttr(cancelKeyboardLabel)
+            })]
           })]
         })
       })]
-    }));
+    });
   }
   getAriaAttr(label) {
     if (_exenv.IS_IOS) {