dtable-ui-component 6.0.126-beta.s1 → 6.0.126

package/lib/Comment/index.js

@@ -42,9 +42,7 @@ class Comment extends _react.default.Component {
       let isGetCount = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
       _this.initComments(row, 1, pageNum);
       if (!isGetCount) return;
-      const {
-        api
-      } = _this.props;
+      const api = _this.props.api;
       api.getCount(row).then(res => {
         const count = res.data.count;
         _this.updateCount(row, count);
@@ -55,9 +53,7 @@ class Comment extends _react.default.Component {
     this.initComments = function (row) {
       let page = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
       let perPage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
-      const {
-        api
-      } = _this.props;
+      const api = _this.props.api;
       api.get(row, page, perPage).then(res => {
         let comments = res.data.comment_list || [];
         let newComments = [];
@@ -74,14 +70,11 @@ class Comment extends _react.default.Component {
       });
     };
     this.addComment = (newComment, _ref) => {
-      let {
-        successCallback,
-        failCallback
-      } = _ref;
-      const {
-        row,
-        api
-      } = this.props;
+      let successCallback = _ref.successCallback,
+        failCallback = _ref.failCallback;
+      const _this$props = this.props,
+        row = _this$props.row,
+        api = _this$props.api;
       api.add(row, newComment).then(res => api.getCount(row)).then(res => {
         const count = res.data.count;
         this.updateCount(row, count);
@@ -96,10 +89,9 @@ class Comment extends _react.default.Component {
     };
     this.resolveComment = (event, commentID) => {
       event.persist();
-      const {
-        row,
-        api
-      } = this.props;
+      const _this$props2 = this.props,
+        row = _this$props2.row,
+        api = _this$props2.api;
       api.update(row, commentID, null, 1).then(() => {
         this.reCalculateComments(row);
       }).catch(error => {
@@ -107,10 +99,9 @@ class Comment extends _react.default.Component {
       });
     };
     this.deleteComment = (event, commentID) => {
-      const {
-        api,
-        row
-      } = this.props;
+      const _this$props3 = this.props,
+        api = _this$props3.api,
+        row = _this$props3.row;
       api.delete(row, commentID).then(() => {
         this.reCalculateComments(row);
       }).catch(e => {
@@ -119,17 +110,14 @@ class Comment extends _react.default.Component {
     };
     // notification
     this.onNewNotification = notification => {
-      const {
-        msg_type
-      } = notification;
+      const msg_type = notification.msg_type;
       if (msg_type !== ROW_COMMENT) return;
       this.setState({
         isFirstLoading: true
       });
-      const {
-        row,
-        api
-      } = this.props;
+      const _this$props4 = this.props,
+        row = _this$props4.row,
+        api = _this$props4.api;
       api.getCount(row).then(res => {
         const count = res.data.count;
         this.updateCount(row, count);
@@ -140,11 +128,9 @@ class Comment extends _react.default.Component {
     };
     // collaborators
     this.initCollaborators = props => {
-      const {
-        columns,
-        row,
-        collaborators
-      } = props;
+      const columns = props.columns,
+        row = props.row,
+        collaborators = props.collaborators;
       let collaboratorColumnKeyList = [];
       columns.forEach(column => {
         if (column.type === _dtableUtils.CellType.COLLABORATOR) {
@@ -193,14 +179,12 @@ class Comment extends _react.default.Component {
     };
     this.onScroll = () => {
       if (this.body.offsetHeight + this.body.scrollTop + 1 < this.bodyContent.offsetHeight + 32) return; // 16 is padding height
-      const {
-        api,
-        row
-      } = this.props;
-      const {
-        comments,
-        count
-      } = this.state;
+      const _this$props5 = this.props,
+        api = _this$props5.api,
+        row = _this$props5.row;
+      const _this$state = this.state,
+        comments = _this$state.comments,
+        count = _this$state.count;
       let currentCommentsLength = comments.length;
       if (currentCommentsLength < count) {
         // Have pagination
@@ -257,21 +241,19 @@ class Comment extends _react.default.Component {
     this.unsubscribeNotification();
   }
   render() {
-    const {
-      collaborators,
-      comments,
-      isLoading,
-      isFirstLoading
-    } = this.state;
-    const {
-      autoFocusInput,
-      row,
-      columns,
-      onInputFocus,
-      onInputBlur,
-      api,
-      uploadFile
-    } = this.props;
+    const _this$state2 = this.state,
+      collaborators = _this$state2.collaborators,
+      comments = _this$state2.comments,
+      isLoading = _this$state2.isLoading,
+      isFirstLoading = _this$state2.isFirstLoading;
+    const _this$props6 = this.props,
+      autoFocusInput = _this$props6.autoFocusInput,
+      row = _this$props6.row,
+      columns = _this$props6.columns,
+      onInputFocus = _this$props6.onInputFocus,
+      onInputBlur = _this$props6.onInputBlur,
+      api = _this$props6.api,
+      uploadFile = _this$props6.uploadFile;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-comments h-100 w-100",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/Comment/utils/utilities.js

@@ -9,13 +9,11 @@ var _getEventTransfer = _interopRequireDefault(require("../../utils/get-event-tr
 class Utilities {
   constructor() {
     this.onInsertElement = _ref => {
-      let {
-        commentRef,
-        selection,
-        range,
-        content,
-        nodeType
-      } = _ref;
+      let commentRef = _ref.commentRef,
+        selection = _ref.selection,
+        range = _ref.range,
+        content = _ref.content,
+        nodeType = _ref.nodeType;
       if (range) {
         selection.removeAllRanges();
         selection.addRange(range);
@@ -48,13 +46,11 @@ class Utilities {
       }
     };
     this.createHtmlElement = _ref2 => {
-      let {
-        commentRef,
-        selection,
-        range,
-        content,
-        nodeType
-      } = _ref2;
+      let commentRef = _ref2.commentRef,
+        selection = _ref2.selection,
+        range = _ref2.range,
+        content = _ref2.content,
+        nodeType = _ref2.nodeType;
       let spanNode1;
       let spanNode2;
       let imageContainer;
@@ -97,13 +93,11 @@ class Utilities {
       return range;
     };
     this.onSelectParticipant = _ref3 => {
-      let {
-        selection,
-        range,
-        participant,
-        callBack,
-        commentRef
-      } = _ref3;
+      let selection = _ref3.selection,
+        range = _ref3.range,
+        participant = _ref3.participant,
+        callBack = _ref3.callBack,
+        commentRef = _ref3.commentRef;
       if (range) {
         // delete '@xxx';
         selection.removeAllRanges();

package/lib/CreatorFormatter/index.js

@@ -20,10 +20,9 @@ class CreatorFormatter extends _react.default.PureComponent {
   constructor() {
     super(...arguments);
     this.getCollaborators = () => {
-      let {
-        value,
-        collaborators
-      } = this.props;
+      let _this$props = this.props,
+        value = _this$props.value,
+        collaborators = _this$props.collaborators;
       if (!Array.isArray(value)) {
         value = [value];
       }
@@ -43,10 +42,9 @@ class CreatorFormatter extends _react.default.PureComponent {
     };
   }
   render() {
-    const {
-      containerClassName,
-      value
-    } = this.props;
+    const _this$props2 = this.props,
+      containerClassName = _this$props2.containerClassName,
+      value = _this$props2.value;
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container creator-formatter', containerClassName);
     if (!value || Array.isArray(value) && value.length === 0) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/DTableColorPicker/ColorPickerPortal/index.js

@@ -7,33 +7,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ColorPickerPortal;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 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,
-    scrollContainerId,
-    throttleDelay = 16,
-    children
-  } = _ref;
+  let target = _ref.target,
+    scrollContainerId = _ref.scrollContainerId,
+    _ref$throttleDelay = _ref.throttleDelay,
+    throttleDelay = _ref$throttleDelay === void 0 ? 16 : _ref$throttleDelay,
+    children = _ref.children;
   const containerRef = (0, _react.useRef)(null);
-  const [isPositioned, setIsPositioned] = (0, _react.useState)(false);
-  const [position, setPosition] = (0, _react.useState)(() => {
-    return {
-      top: '-9999px',
-      left: '-9999px',
-      visibility: 'hidden'
-    };
-  });
+  const _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isPositioned = _useState2[0],
+    setIsPositioned = _useState2[1];
+  const _useState3 = (0, _react.useState)(() => {
+      return {
+        top: '-9999px',
+        left: '-9999px',
+        visibility: 'hidden'
+      };
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    position = _useState4[0],
+    setPosition = _useState4[1];
   const updatePosition = (0, _react.useCallback)(() => {
     if (!target || !containerRef.current) return;
     const targetRect = target.getBoundingClientRect();
-    const {
-      top: spaceAbove,
-      left
-    } = targetRect;
+    const spaceAbove = targetRect.top,
+      left = targetRect.left;
     const portalRectHeight = containerRef.current.clientHeight;
     const newPosition = {
       left: "".concat(left + 1, "px"),
@@ -72,7 +76,7 @@ function ColorPickerPortal(_ref) {
   }, [target, scrollContainerId, throttleDelay, updatePosition]);
   if (!target) return null;
   return /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "dtable-color-picker-portal",
+    className: "dtable-color-picker-portal dtable-popover-container",
     style: {
       position: 'fixed',
       zIndex: '1049',

package/lib/DTableColorPicker/index.css

@@ -2,12 +2,10 @@
   width: 240px;
   height: 370px;
   background-color: #fff;
-  border-radius: 3px;
   z-index: 100;
   padding: 0.75rem;
   line-height: 16px;
   position: absolute;
-  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 4px;
 }
 
 .dtable-color-picker .chrome-picker {

package/lib/DTableColorPicker/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _reactColor = require("react-color");
@@ -29,25 +30,46 @@ const RGB_COLORS_MAP = {
 };
 const LOCAL_STORAGE_KEY = 'dtable-color-picker';
 const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    onToggle,
-    popoverStyle,
-    color = '#ffffff',
-    defaultColors,
-    useProtal,
-    target,
-    scrollContainerId,
-    throttleDelay = 20,
-    onSubmit
-  } = _ref;
+  let onToggle = _ref.onToggle,
+    popoverStyle = _ref.popoverStyle,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#ffffff' : _ref$color,
+    defaultColors = _ref.defaultColors,
+    useProtal = _ref.useProtal,
+    target = _ref.target,
+    scrollContainerId = _ref.scrollContainerId,
+    _ref$throttleDelay = _ref.throttleDelay,
+    throttleDelay = _ref$throttleDelay === void 0 ? 20 : _ref$throttleDelay,
+    onSubmit = _ref.onSubmit;
   const initialRgbaColor = (0, _utils.hexToRgba)(color);
-  const [value, setValue] = (0, _react.useState)(initialRgbaColor);
-  const [hexVal, setHexVal] = (0, _react.useState)((0, _utils.getInitialHexVal)(color));
-  const [alphaVal, setAlphaVal] = (0, _react.useState)((0, _utils.toPercentage)(initialRgbaColor.a));
-  const [redVal, setRedVal] = (0, _react.useState)(initialRgbaColor.r);
-  const [greenVal, setGreenVal] = (0, _react.useState)(initialRgbaColor.g);
-  const [blueVal, setBlueVal] = (0, _react.useState)(initialRgbaColor.b);
-  const [colorMode, setColorMode] = (0, _react.useState)(COLOR_PICKER_MODE.HEX); // hex or rgb
+  const _useState = (0, _react.useState)(initialRgbaColor),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  const _useState3 = (0, _react.useState)((0, _utils.getInitialHexVal)(color)),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    hexVal = _useState4[0],
+    setHexVal = _useState4[1];
+  const _useState5 = (0, _react.useState)((0, _utils.toPercentage)(initialRgbaColor.a)),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    alphaVal = _useState6[0],
+    setAlphaVal = _useState6[1];
+  const _useState7 = (0, _react.useState)(initialRgbaColor.r),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    redVal = _useState8[0],
+    setRedVal = _useState8[1];
+  const _useState9 = (0, _react.useState)(initialRgbaColor.g),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    greenVal = _useState0[0],
+    setGreenVal = _useState0[1];
+  const _useState1 = (0, _react.useState)(initialRgbaColor.b),
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
+    blueVal = _useState10[0],
+    setBlueVal = _useState10[1];
+  const _useState11 = (0, _react.useState)(COLOR_PICKER_MODE.HEX),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    colorMode = _useState12[0],
+    setColorMode = _useState12[1]; // hex or rgb
   const colorPickerRef = (0, _react.useRef)(null);
   let currentUsedColors = [];
   const currentUsedColorsStr = window.localStorage.getItem(LOCAL_STORAGE_KEY);
@@ -70,12 +92,10 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     rgba.a = Math.round(rgba.a * 100) / 100;
     const transferedHex = (0, _utils.rgbaToHex)(rgba);
     const hexVal = transferedHex.substring(1, 7);
-    const {
-      r,
-      g,
-      b,
-      a
-    } = rgba;
+    const r = rgba.r,
+      g = rgba.g,
+      b = rgba.b,
+      a = rgba.a;
     setAlphaVal((0, _utils.toPercentage)(a));
     updateValue(rgba);
     if (colorMode === COLOR_PICKER_MODE.HEX) {
@@ -91,11 +111,9 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     if (colorMode === COLOR_PICKER_MODE.HEX) {
       newMode = COLOR_PICKER_MODE.RGBA;
       const rgba = (0, _utils.hexToRgba)(color);
-      const {
-        r,
-        g,
-        b
-      } = rgba;
+      const r = rgba.r,
+        g = rgba.g,
+        b = rgba.b;
       setRedVal(r);
       setGreenVal(g);
       setBlueVal(b);
@@ -122,11 +140,10 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       newHexVal = newHexVal.split('').map(char => char + char).join('');
     }
     setHexVal(newHexVal);
-    const {
-      r,
-      g,
-      b
-    } = (0, _utils.hexToRgba)(newHexVal);
+    const _hexToRgba = (0, _utils.hexToRgba)(newHexVal),
+      r = _hexToRgba.r,
+      g = _hexToRgba.g,
+      b = _hexToRgba.b;
     const newValue = {
       r,
       g,
@@ -209,12 +226,10 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
   const onSelectDefaultColor = color => {
     const rgba = (0, _utils.hexToRgba)(color);
-    const {
-      r,
-      g,
-      b,
-      a
-    } = rgba;
+    const r = rgba.r,
+      g = rgba.g,
+      b = rgba.b,
+      a = rgba.a;
     const alphaVal = (0, _utils.toPercentage)(a);
     if (colorMode === COLOR_PICKER_MODE.RGBA) {
       setRedVal(r);
@@ -368,7 +383,7 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: popoverStyle,
       ref: colorPickerRef,
-      className: "dtable-color-picker",
+      className: "dtable-color-picker dtable-popover-container",
       children: [renderDefaultContainer(), renderCustomContainer(), renderUsedContainer()]
     })
   });

package/lib/DTableColorPicker/utils.js

@@ -43,12 +43,10 @@ const rgbaToHex = function (color) {
   let isNeedPrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   let isNeedAlpha = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   if (hexRegex.test(color)) return color;
-  const {
-    r,
-    g,
-    b,
-    a
-  } = color;
+  const r = color.r,
+    g = color.g,
+    b = color.b,
+    a = color.a;
   const toHex = value => {
     const hex = value.toString(16);
     return hex.length === 1 ? '0' + hex : hex;

package/lib/DTableColumnIcon/index.js

@@ -45,13 +45,12 @@ const COLUMN_DISPLAY_TYPE_ICON_CONFIG = {
   }
 };
 const DTableColumnIcon = _ref => {
-  let {
-    column,
-    color,
-    className,
-    ariaHidden = false,
-    getSvg
-  } = _ref;
+  let column = _ref.column,
+    color = _ref.color,
+    className = _ref.className,
+    _ref$ariaHidden = _ref.ariaHidden,
+    ariaHidden = _ref$ariaHidden === void 0 ? false : _ref$ariaHidden,
+    getSvg = _ref.getSvg;
   const columnType = column === null || column === void 0 ? void 0 : column.type;
   if (!columnType) return null;
   const columnDisplayType = (0, _dtableUtils.getColumnDisplayType)(column);

package/lib/DTableCommonAddTool/index.css

@@ -4,11 +4,9 @@
   height: 40px;
   font-size: 14px;
   font-weight: 500;
-  border-top: 1px solid #dedede;
+  border-top: 1px solid var(--bs-border-secondary-color);
   background: #fff;
   padding: 0 1rem;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
   position: relative;
 }
 

package/lib/DTableCommonAddTool/index.js

@@ -9,14 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 function DTableCommonAddTool(_ref) {
-  let {
-    callBack,
-    footerName,
-    className,
-    addIconClassName,
-    hideIcon,
-    style
-  } = _ref;
+  let callBack = _ref.callBack,
+    footerName = _ref.footerName,
+    className = _ref.className,
+    addIconClassName = _ref.addIconClassName,
+    hideIcon = _ref.hideIcon,
+    style = _ref.style;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "dtable-ui add-item-btn ".concat(className ? className : ''),
     style: style,

package/lib/DTableCustomFooter/index.css

@@ -4,9 +4,7 @@
   align-items: center;
   justify-content: flex-end;
   padding: 0.75rem;
-  border-top: 1px solid rgba(0, 40, 100, 0.12);
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 2px;
+  border-top: 1px solid var(--bs-border-secondary-color) !important;
 }
 
 .dtable-custom-footer>* {

package/lib/DTableCustomFooter/index.js

@@ -10,9 +10,7 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 // DTableCustomFooter is used in geolocation editor and digital sign editor
 const DTableCustomFooter = _ref => {
-  let {
-    children
-  } = _ref;
+  let children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "dtable-custom-footer",
     children: children

package/lib/DTableCustomizeCollaboratorSelect/index.js

@@ -47,24 +47,22 @@ class CollaboratorSelect extends _react.Component {
       });
     };
     this.getFilterOptions = searchValue => {
-      const {
-        options,
-        searchable
-      } = this.props;
+      const _this$props = this.props,
+        options = _this$props.options,
+        searchable = _this$props.searchable;
       if (!searchable) return options || [];
       return (0, _dtableUtils.searchCollaborators)(options, searchValue);
     };
     this.renderOptionGroup = () => {
-      const {
-        value,
-        options,
-        searchable,
-        searchPlaceholder,
-        noOptionsPlaceholder,
-        top,
-        left,
-        isUsePopover
-      } = this.props;
+      const _this$props2 = this.props,
+        value = _this$props2.value,
+        options = _this$props2.options,
+        searchable = _this$props2.searchable,
+        searchPlaceholder = _this$props2.searchPlaceholder,
+        noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
+        top = _this$props2.top,
+        left = _this$props2.left,
+        isUsePopover = _this$props2.isUsePopover;
       if (!isUsePopover) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOptionGroup.default, {
           value: value,
@@ -123,12 +121,11 @@ class CollaboratorSelect extends _react.Component {
     document.removeEventListener('mousedown', this.onMousedown);
   }
   render() {
-    let {
-      className,
-      value,
-      placeholder,
-      isLocked
-    } = this.props;
+    let _this$props3 = this.props,
+      className = _this$props3.className,
+      value = _this$props3.value,
+      placeholder = _this$props3.placeholder,
+      isLocked = _this$props3.isLocked;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
       ref: node => this.selector = node,
       className: (0, _classnames.default)('dtable-select custom-select collaborator-select', {