dtable-ui-component 6.0.49 → 6.0.50

package/lib/Comment/footer/input/participant/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 class Participant extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -33,21 +34,25 @@ class Participant extends _react.default.Component {
       activeIndex
     } = this.props;
     const active = index === activeIndex;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "comment-participant-item ".concat(active ? 'active' : ''),
       ref: ref => this.participantItem = ref,
-      onClick: this.onSelect
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "comment-participant-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "comment-participant text-truncate"
-    }, /*#__PURE__*/_react.default.createElement("img", {
-      className: "comment-dtable-ui-participant-avatar ml-2",
-      alt: participant.name,
-      src: participant.avatar_url
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "comment-participant-name"
-    }, participant.name))));
+      onClick: this.onSelect,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "comment-participant-container",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "comment-participant text-truncate",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            className: "comment-dtable-ui-participant-avatar ml-2",
+            alt: participant.name,
+            src: participant.avatar_url
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "comment-participant-name",
+            children: participant.name
+          })]
+        })
+      })
+    });
   }
 }
 var _default = exports.default = Participant;

package/lib/Comment/footer/participants/index.js

@@ -11,6 +11,7 @@ var _participant = _interopRequireDefault(require("./participant"));
 var _participantSelect = _interopRequireDefault(require("./participant-select"));
 var _lang = require("../../../lang");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class Participants extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -34,35 +35,37 @@ class Participants extends _react.default.Component {
       participants,
       collaborators
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-comments-participants mb-2 position-relative",
-      ref: ref => this.ref = ref
-    }, participants.map(participant => {
-      return /*#__PURE__*/_react.default.createElement(_participant.default, {
-        participant: participant,
-        key: participant.email
-      });
-    }), canUpdate && /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-ui-participants-add",
-      onClick: this.toggleParticipantSelect,
-      ref: ref => this.addIcon = ref
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      "aria-hidden": "true",
-      className: "dtable-font dtable-icon-add"
-    })), this.addIcon && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
-      delay: {
-        show: 0,
-        hide: 0
-      },
-      target: this.addIcon,
-      placement: "bottom"
-    }, (0, _lang.getLocale)('Add_participants')), this.ref && this.state.showParticipantSelect && /*#__PURE__*/_react.default.createElement(_participantSelect.default, {
-      target: this.ref,
-      participants: participants,
-      collaborators: collaborators,
-      onChange: this.props.onChange,
-      onClose: this.closeParticipantSelect
-    }));
+      ref: ref => this.ref = ref,
+      children: [participants.map(participant => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_participant.default, {
+          participant: participant
+        }, participant.email);
+      }), canUpdate && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "dtable-ui-participants-add",
+        onClick: this.toggleParticipantSelect,
+        ref: ref => this.addIcon = ref,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          "aria-hidden": "true",
+          className: "dtable-font dtable-icon-add"
+        })
+      }), this.addIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
+        delay: {
+          show: 0,
+          hide: 0
+        },
+        target: this.addIcon,
+        placement: "bottom",
+        children: (0, _lang.getLocale)('Add_participants')
+      }), this.ref && this.state.showParticipantSelect && /*#__PURE__*/(0, _jsxRuntime.jsx)(_participantSelect.default, {
+        target: this.ref,
+        participants: participants,
+        collaborators: collaborators,
+        onChange: this.props.onChange,
+        onClose: this.closeParticipantSelect
+      })]
+    });
   }
 }
 var _default = exports.default = Participants;

package/lib/Comment/footer/participants/participant/index.js

@@ -8,25 +8,28 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const Participant = _ref => {
   let {
     participant
   } = _ref;
   const ref = (0, _react.useRef)(null);
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: "dtable-ui-participant-avatar"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: participant.avatar_url,
-    className: "avatar",
-    ref: ref,
-    alt: "avatar"
-  }), ref.current && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
-    delay: {
-      show: 0,
-      hide: 0
-    },
-    target: ref,
-    placement: "bottom"
-  }, participant.name));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: "dtable-ui-participant-avatar",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: participant.avatar_url,
+      className: "avatar",
+      ref: ref,
+      alt: "avatar"
+    }), ref.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
+      delay: {
+        show: 0,
+        hide: 0
+      },
+      target: ref,
+      placement: "bottom",
+      children: participant.name
+    })]
+  });
 };
 var _default = exports.default = Participant;

package/lib/Comment/footer/participants/participant-select/index.js

@@ -12,6 +12,7 @@ var _dtableUtils = require("dtable-utils");
 var _lang = require("../../../../lang");
 var _CollaboratorItem = _interopRequireDefault(require("../../../../CollaboratorItem"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class ParticipantSelect extends _react.Component {
   constructor(props) {
     super(props);
@@ -87,31 +88,36 @@ class ParticipantSelect extends _react.Component {
       if (filteredParticipants.length > 0) {
         return filteredParticipants.map(participant => {
           let selectedIndex = participants.findIndex(item => item.email === participant.email);
-          return /*#__PURE__*/_react.default.createElement("div", {
-            key: participant.email,
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "dropdown-item dtable-ui-participant-item",
-            onClick: this.onSelectParticipant.bind(this, participant)
-          }, /*#__PURE__*/_react.default.createElement("div", {
-            className: "dtable-ui-participant-container"
-          }, /*#__PURE__*/_react.default.createElement("div", {
-            className: "dtable-ui-participant"
-          }, /*#__PURE__*/_react.default.createElement("img", {
-            className: "dtable-ui-participant-avatar",
-            alt: participant.name,
-            src: participant.avatar_url
-          }), /*#__PURE__*/_react.default.createElement("span", {
-            className: "dtable-ui-participant-name text-truncate"
-          }, participant.name)), /*#__PURE__*/_react.default.createElement("div", {
-            className: "dtable-ui-participant-check-icon"
-          }, selectedIndex > -1 && /*#__PURE__*/_react.default.createElement("i", {
-            "aria-hidden": "true",
-            className: "dtable-font dtable-icon-check-mark"
-          }))));
+            onClick: this.onSelectParticipant.bind(this, participant),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "dtable-ui-participant-container",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "dtable-ui-participant",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  className: "dtable-ui-participant-avatar",
+                  alt: participant.name,
+                  src: participant.avatar_url
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: "dtable-ui-participant-name text-truncate",
+                  children: participant.name
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "dtable-ui-participant-check-icon",
+                children: selectedIndex > -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                  "aria-hidden": "true",
+                  className: "dtable-font dtable-icon-check-mark"
+                })
+              })]
+            })
+          }, participant.email);
         });
       } else {
-        return /*#__PURE__*/_react.default.createElement("span", {
-          className: "none-search-result"
-        }, (0, _lang.getLocale)('No_collaborators_available'));
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "none-search-result",
+          children: (0, _lang.getLocale)('No_collaborators_available')
+        });
       }
     };
     this.state = {
@@ -139,44 +145,49 @@ class ParticipantSelect extends _react.Component {
       return this.state.participants.find(participant => participant.email === item.email);
     });
     if (selectedParticipants.length === 0) return null;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-participants-editor-header"
-    }, selectedParticipants.map(participant => {
-      return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-        key: participant.email,
-        collaborator: participant,
-        className: "dtable-ui-participant",
-        enableDeleteCollaborator: true,
-        onDeleteCollaborator: this.removeParticipant
-      });
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "dtable-ui-participants-editor-header",
+      children: selectedParticipants.map(participant => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
+          collaborator: participant,
+          className: "dtable-ui-participant",
+          enableDeleteCollaborator: true,
+          onDeleteCollaborator: this.removeParticipant
+        }, participant.email);
+      })
+    });
   }
   render() {
     const {
       target
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref => this.outerRef = ref
-    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Popover, {
-      placement: "top",
-      isOpen: true,
-      target: target,
-      fade: false,
-      hideArrow: true
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dropdown-menu dtable-ui-participants-editor show m-0 p-0",
-      ref: ref => this.participantsRef = ref
-    }, this.renderParticipantList(), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-participants-editor-search"
-    }, /*#__PURE__*/_react.default.createElement("input", {
-      className: "form-control",
-      type: "text",
-      placeholder: (0, _lang.getLocale)('Search_collaborator'),
-      value: this.state.searchVal,
-      onChange: this.onChangeSearch
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-participants-editor-participants-container"
-    }, this.renderMenuContent()))));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: ref => this.outerRef = ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
+        placement: "top",
+        isOpen: true,
+        target: target,
+        fade: false,
+        hideArrow: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "dropdown-menu dtable-ui-participants-editor show m-0 p-0",
+          ref: ref => this.participantsRef = ref,
+          children: [this.renderParticipantList(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-participants-editor-search",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+              className: "form-control",
+              type: "text",
+              placeholder: (0, _lang.getLocale)('Search_collaborator'),
+              value: this.state.searchVal,
+              onChange: this.onChangeSearch
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-participants-editor-participants-container",
+            children: this.renderMenuContent()
+          })]
+        })
+      })
+    });
   }
 }
 var _default = exports.default = ParticipantSelect;

package/lib/Comment/index.js

@@ -15,6 +15,7 @@ var _model = _interopRequireDefault(require("./model"));
 var _utils = require("../utils/utils");
 var _lang = require("../lang");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const ROW_COMMENT = 'row_comment';
 class Comment extends _react.default.Component {
   constructor(_props) {
@@ -271,34 +272,38 @@ class Comment extends _react.default.Component {
       api,
       uploadFile
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-comments h-100 w-100"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-comments-body",
-      onScroll: this.onScroll,
-      ref: ref => this.body = ref
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref => this.bodyContent = ref
-    }, isLoading ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "w-100 h-100 d-flex align-items-center justify-content-center"
-    }, /*#__PURE__*/_react.default.createElement(_Loading.default, null)) : /*#__PURE__*/_react.default.createElement(_body.default, {
-      isFirstLoading: isFirstLoading,
-      comments: comments,
-      collaborators: collaborators,
-      onDelete: this.deleteComment,
-      onResolve: this.resolveComment,
-      onScrollBottom: this.onScrollBottom
-    }))), /*#__PURE__*/_react.default.createElement(_footer.default, {
-      autoFocusInput: autoFocusInput,
-      collaborators: collaborators,
-      row: row,
-      columns: columns,
-      addComment: this.addComment,
-      onChangeParticipants: api.modifyParticipants,
-      uploadFile: uploadFile,
-      onInputFocus: onInputFocus,
-      onInputBlur: onInputBlur
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "dtable-ui-comments h-100 w-100",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "dtable-ui-comments-body",
+        onScroll: this.onScroll,
+        ref: ref => this.body = ref,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: ref => this.bodyContent = ref,
+          children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "w-100 h-100 d-flex align-items-center justify-content-center",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {})
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.default, {
+            isFirstLoading: isFirstLoading,
+            comments: comments,
+            collaborators: collaborators,
+            onDelete: this.deleteComment,
+            onResolve: this.resolveComment,
+            onScrollBottom: this.onScrollBottom
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer.default, {
+        autoFocusInput: autoFocusInput,
+        collaborators: collaborators,
+        row: row,
+        columns: columns,
+        addComment: this.addComment,
+        onChangeParticipants: api.modifyParticipants,
+        uploadFile: uploadFile,
+        onInputFocus: onInputFocus,
+        onInputBlur: onInputBlur
+      })]
+    });
   }
 }
 var _default = exports.default = Comment;

package/lib/CreatorFormatter/index.js

@@ -10,6 +10,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _CollaboratorItem = _interopRequireDefault(require("../CollaboratorItem"));
 var _default_avatar = _interopRequireDefault(require("../assets/images/avatar/default_avatar.png"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 // there will be there conditions
 // 1 value is not exist, typeof value is array, but it's length is 0
 // 2 value is exist, but can't find in collaborators
@@ -35,10 +36,9 @@ class CreatorFormatter extends _react.default.PureComponent {
             avatar_url: _default_avatar.default
           };
         }
-        return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-          key: index,
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
           collaborator: collaborator
-        });
+        }, index);
       });
     };
   }
@@ -49,14 +49,15 @@ class CreatorFormatter extends _react.default.PureComponent {
     } = this.props;
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container creator-formatter', containerClassName);
     if (!value || Array.isArray(value) && value.length === 0) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: classname
       });
     }
     const collaborators = this.getCollaborators();
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classname
-    }, collaborators);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classname,
+      children: collaborators
+    });
   }
 }
 CreatorFormatter.defaultProps = {

package/lib/DTableColorPicker/ColorPickerPortal/index.js

@@ -9,6 +9,7 @@ exports.default = ColorPickerPortal;
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _utils = require("../../utils/utils");
+var _jsxRuntime = require("react/jsx-runtime");
 function ColorPickerPortal(_ref) {
   let {
     target,
@@ -52,7 +53,7 @@ function ColorPickerPortal(_ref) {
       scrollContainer && scrollContainer.removeEventListener('scroll', throttledUpdatePosition);
     };
   }, [target, containerRef, scrollContainerId, throttleDelay]);
-  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "dtable-color-picker-portal",
     style: {
       position: 'absolute',
@@ -62,6 +63,7 @@ function ColorPickerPortal(_ref) {
       width: '240px',
       height: '370px'
     },
-    ref: containerRef
-  }, children), document.body);
+    ref: containerRef,
+    children: children
+  }), document.body);
 }