@kdcloudjs/table 1.2.0-canary.15 → 1.2.0-canary.16-hotfix

package/es/table/pipeline/features/contextMenu.js

@@ -17,26 +17,22 @@ export function contextMenu() {
     var popupParent = opts.popupParent || document.body;
     var menuClassName = opts.menuClassName;
     var menuHelper = new MenuHelper();
-
     var addPopup = function addPopup(menu) {
       var ePopupDiv = document.createElement('div');
       ePopupDiv.setAttribute('class', 'kd-table-popup');
       popupParent.appendChild(ePopupDiv);
       var popupHidden = false;
       var eventList = ['mousedown', 'contextmenu'];
-
       var hidePopup = function hidePopup(event) {
         if (isEventFromCurrentPopup(event, ePopupDiv) || popupHidden) {
           return;
         }
-
         popupHidden = true;
         popupParent.removeChild(ePopupDiv);
         eventList.forEach(function (eventType) {
           window.removeEventListener(eventType, hidePopup, true);
         });
       };
-
       ReactDOM.render(menu, ePopupDiv, function () {
         setTimeout(function () {
           eventList.forEach(function (eventType) {
@@ -46,7 +42,6 @@ export function contextMenu() {
       });
       return hidePopup;
     };
-
     var onContextMenu = function onContextMenu(e) {
       if (canShowContextMenu(e, pipeline)) {
         e.preventDefault();
@@ -54,18 +49,14 @@ export function contextMenu() {
         showContextMenu(e);
       }
     };
-
     pipeline.addTableProps({
       onContextMenu: onContextMenu
     });
-
     var getContextMenuOptions = function getContextMenuOptions(record, column, value, event) {
       var defaultMenuOptions = [];
-
       if (column) {
         defaultMenuOptions.push(getCopyItem(value));
       }
-
       if (opts.getContextMenuItems) {
         var params = {
           record: record,
@@ -75,25 +66,20 @@ export function contextMenu() {
         };
         return opts.getContextMenuItems(params);
       }
-
       return defaultMenuOptions;
     };
-
     var hideContextMenu = function hideContextMenu() {
       menuHelper.destroy();
     };
-
     var getPopupParent = function getPopupParent() {
       return popupParent;
     };
-
     var showContextMenu = function showContextMenu(e) {
       var path = getEventPath(e);
       var cellEle = getCellEleInEventPath(path);
       var code;
       var rowIndex;
       var isInFooter;
-
       if (cellEle) {
         code = cellEle.getAttribute('data-code');
         rowIndex = cellEle.getAttribute('data-rowindex');
@@ -103,7 +89,6 @@ export function contextMenu() {
         rowIndex = rowEle === null || rowEle === void 0 ? void 0 : rowEle.getAttribute('data-rowindex');
         isInFooter = isElementInsideTheFooter(rowEle);
       }
-
       var dataSource = isInFooter ? pipeline.getFooterDataSource() || [] : pipeline.getDataSource();
       var record = dataSource[rowIndex];
       var column = code !== undefined && findByTree(pipeline.getColumns(), function (item) {
@@ -111,12 +96,10 @@ export function contextMenu() {
       });
       var value = column && record && internals.safeGetValue(column, record, rowIndex);
       var options = getContextMenuOptions(record, column, value, e);
-
       if (options.length === 0) {
         console.warn('context menu options is empty');
         return;
       }
-
       var position = positionForMenu(e, popupParent);
       var menu = /*#__PURE__*/React.createElement(Menu, {
         options: options,
@@ -125,54 +108,42 @@ export function contextMenu() {
         getPopupParent: getPopupParent,
         className: menuClassName
       });
-
       var _hidePopup = addPopup(menu);
-
       menuHelper.init(_hidePopup);
     };
-
     return pipeline;
   };
 }
-
 function getMenuItemKey(_ref) {
   var name = _ref.name,
-      index = _ref.index;
-
+    index = _ref.index;
   if (name) {
     var _context;
-
     var _key = 0;
     name = name + '';
-
     for (var i = 0; i < name.length; i++) {
       _key += name.charCodeAt(name[i]);
     }
-
     return _concatInstanceProperty(_context = "".concat(_key, "_")).call(_context, index);
   }
-
   return index;
 }
-
 function Menu(props) {
   var className = props.className,
-      _props$options = props.options,
-      options = _props$options === void 0 ? [] : _props$options,
-      hideContextMenu = props.hideContextMenu,
-      position = props.position,
-      getPopupParent = props.getPopupParent;
+    _props$options = props.options,
+    options = _props$options === void 0 ? [] : _props$options,
+    hideContextMenu = props.hideContextMenu,
+    position = props.position,
+    getPopupParent = props.getPopupParent;
   var menuRef = useRef();
   useEffect(function () {
     if (menuRef.current) {
       var popupParent = getPopupParent();
       var x = position.x,
-          y = position.y;
-
+        y = position.y;
       var _keepWithinBounds = keepWithinBounds(popupParent, menuRef.current, x, y),
-          _x = _keepWithinBounds.x,
-          _y = _keepWithinBounds.y;
-
+        _x = _keepWithinBounds.x,
+        _y = _keepWithinBounds.y;
       menuRef.current.style.left = _x + 'px';
       menuRef.current.style.top = _y + 'px';
     }
@@ -200,50 +171,40 @@ function Menu(props) {
     });
   })));
 }
-
 function MenuItem(props) {
   var name = props.name,
-      action = props.action,
-      className = props.className,
-      disabled = props.disabled,
-      hideContextMenu = props.hideContextMenu;
+    action = props.action,
+    className = props.className,
+    disabled = props.disabled,
+    hideContextMenu = props.hideContextMenu;
   var itemRef = useRef();
-
   var handleClick = function handleClick() {
     if (disabled) {
       return;
     }
-
     hideContextMenu();
     typeof action === 'function' && action();
   };
-
   var handleMouseEnter = function handleMouseEnter(e) {
     if (disabled) {
       return;
     }
-
     var itemDom = itemRef.current;
-
     if (itemDom) {
       itemDom.classList.add(MenuClasses.menuOptionActive);
     }
   };
-
   var handleMouseLeave = function handleMouseLeave(e) {
     if (disabled) {
       return;
     }
-
     var itemDom = itemRef.current;
-
     if (itemDom) {
       setTimeout(function () {
         itemDom.classList.remove(MenuClasses.menuOptionActive);
       }, 10);
     }
   };
-
   return /*#__PURE__*/React.createElement("div", {
     className: cx(MenuClasses.menuOption, className, _defineProperty({}, MenuClasses.menuOptionDisable, disabled)),
     ref: itemRef,
@@ -254,40 +215,29 @@ function MenuItem(props) {
     className: MenuClasses.menuOptionText
   }, name));
 }
-
 var MenuHelper = /*#__PURE__*/_createClass(function MenuHelper() {
   var _this = this;
-
   _classCallCheck(this, MenuHelper);
-
   this.init = function (hidePopup) {
     _this.hidePopup = hidePopup;
   };
-
   this.destroy = function () {
     _this.hidePopup && _this.hidePopup();
     _this.hidePopup = null;
   };
 });
 /** 是否点击是外部 start */
-
-
 function isEventFromCurrentPopup(event, ele) {
   if (!event || !ele) {
     return false;
   }
-
   if (isElementInEventPath(ele, event)) {
     return true;
   }
-
   return false;
 }
 /** 是否点击是外部 end */
-
 /** 计算位置 start */
-
-
 function calculatePointerRelative(event, popupParent) {
   var parentRect = popupParent.getBoundingClientRect();
   var documentRect = document.documentElement.getBoundingClientRect();
@@ -296,31 +246,25 @@ function calculatePointerRelative(event, popupParent) {
     y: event.clientY - (popupParent === document.body ? documentRect.top : parentRect.top)
   };
 }
-
 function positionForMenu(event, popupParent, params) {
   var _calculatePointerRela = calculatePointerRelative(event, popupParent),
-      x = _calculatePointerRela.x,
-      y = _calculatePointerRela.y;
-
+    x = _calculatePointerRela.x,
+    y = _calculatePointerRela.y;
   if (params) {
     var offsetX = params.offsetX,
-        offsetY = params.offsetY;
-
+      offsetY = params.offsetY;
     if (offsetX) {
       x -= offsetX;
     }
-
     if (offsetY) {
       y -= offsetY;
     }
   }
-
   return {
     x: x,
     y: y
   };
 }
-
 function keepWithinBounds(popupParent, ePopup, x, y) {
   var parentRect = popupParent.getBoundingClientRect();
   var docElement = document.documentElement;
@@ -328,14 +272,12 @@ function keepWithinBounds(popupParent, ePopup, x, y) {
   var ePopupRect = ePopup.getBoundingClientRect();
   var parentWidth = parentRect.width;
   var parentHeight = parentRect.height;
-
   if (popupParent === document.body) {
     parentWidth = documentRect.width;
     parentWidth -= Math.abs(documentRect.left - parentRect.left);
     parentHeight = documentRect.height + docElement.scrollTop;
     parentHeight -= Math.abs(documentRect.top - parentRect.top);
   }
-
   if (x) {
     var minWidth = Math.min(ePopupRect.width, 120);
     ePopup.style.minWidth = minWidth + 'px';
@@ -355,49 +297,36 @@ function keepWithinBounds(popupParent, ePopup, x, y) {
   };
 }
 /** 计算位置 end */
-
 /** 获得点击的元素 start */
-
-
 function getCellEleInEventPath(path) {
   return getTargetEleInEventPath(path, function (ele) {
     return ele && ele.getAttribute('data-role') === 'table-cell';
   });
 }
-
 function getRowEleInEventPath(path) {
   return getTargetEleInEventPath(path, function (ele) {
     return ele && ele.getAttribute('data-role') === 'table-row';
   });
 }
 /** 获得点击的元素 end */
-
-
 function isElementInsideTheFooter(ele) {
   var pointer = ele;
-
   while (pointer) {
     if (pointer.tagName === 'TFOOT') {
       return true;
     }
-
     if (pointer.tagName === 'TABLE' || pointer.tagName === 'TBODY') {
       return false;
     }
-
     pointer = pointer.parentElement;
   }
-
   return false;
 }
-
 function canShowContextMenu(e, pipeline) {
   var _a, _b;
-
   return ((_a = pipeline.ref.current.domHelper) === null || _a === void 0 ? void 0 : _a.tableBody.contains(e.target)) || ((_b = pipeline.ref.current.domHelper) === null || _b === void 0 ? void 0 : _b.tableFooter.contains(e.target));
-} // 默认选项
-
-
+}
+// 默认选项
 function getCopyItem(v) {
   return {
     name: '复制',

package/es/table/pipeline/features/filter/DefaultFilterContent.js

@@ -1,9 +1,7 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useEffect, useRef } from 'react';
@@ -13,38 +11,30 @@ import { DEFAULT_FILTER_OPTIONS } from './util';
 import { Classes, ButtonCSS } from '../../../base/styles';
 import KeyCode from '../../../utils/keyCode';
 var DefaultFilterContentStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n  border-radius: 2px;\n  width: 100%;\n\n  ", "\n  .filter-option-list {\n    display: flex;\n    flex-direction: column;\n    margin-top: 8px;\n    ul {\n      margin: 0;\n      padding: 0;\n      li {\n        display: flex;\n        position: relative;\n        flex-shrink: 0;\n        height: 32px;\n        align-items: center;\n        border-radius: 2px;\n        font-size: 12px;\n        color: var(--color);\n        padding: 0 12px;\n        overflow: hidden;\n        cursor: pointer;\n        &:hover{\n          background-color: var(--primary-color-level1);\n        }\n      }\n      li.active{\n        background-color: var(--primary-color-level1);\n      }\n    }\n  }\n\n  .filter-search {\n    display: flex;\n    padding: 6px 12px;\n\n    .filter-search-inner {\n      width: 100%;\n      font-size: 12px;\n      color: #333333;\n      height: 28px;\n      line-height: 28px;\n      padding: 0 8px;\n      outline: none;\n      background-color: #FAFAFA;\n      border-radius: 2px;\n      border: 1px solid var(--strong-border-color);\n      &:hover{\n        border-color: var(--primary-color)\n      } \n      &:focus{\n        border-color: var(--primary-color)\n      }  \n    }\n  }\n\n  .filter-footer {\n    display: flex;\n    flex-direction: row;\n    padding: 8px 12px;\n    justify-content: space-between;\n\n    .filter-btn {\n      text-align: center;\n      font-size: 12px;\n      width: 60px;\n      height: 24px;\n      line-height: 24px;\n    }\n    \n  }\n"])), ButtonCSS);
-
 function DefaultFilterContent(_ref) {
   var _cx2;
-
   var setFilterModel = _ref.setFilterModel,
-      filterModel = _ref.filterModel,
-      hidePanel = _ref.hidePanel,
-      _ref$localeText = _ref.localeText,
-      localeText = _ref$localeText === void 0 ? {} : _ref$localeText;
-
+    filterModel = _ref.filterModel,
+    hidePanel = _ref.hidePanel,
+    _ref$localeText = _ref.localeText,
+    localeText = _ref$localeText === void 0 ? {} : _ref$localeText;
   var _a, _b;
-
   var _React$useState = React.useState((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain'),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      selectedValue = _React$useState2[0],
-      setSelectedValue = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedValue = _React$useState2[0],
+    setSelectedValue = _React$useState2[1];
   var _React$useState3 = React.useState((filterModel === null || filterModel === void 0 ? void 0 : _filterInstanceProperty(filterModel)) || []),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      innerValue = _React$useState4[0],
-      setInnerValue = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    innerValue = _React$useState4[0],
+    setInnerValue = _React$useState4[1];
   var inputRef = useRef();
   var handleClick = React.useCallback(function (option) {
     setSelectedValue(option.key);
   }, []);
-
   var reset = function reset() {
     hidePanel();
     setFilterModel();
   };
-
   var confirm = function confirm() {
     hidePanel();
     setFilterModel({
@@ -52,13 +42,11 @@ function DefaultFilterContent(_ref) {
       filterCondition: selectedValue
     });
   };
-
   var handleKeyDown = function handleKeyDown(e) {
     if (e.keyCode === KeyCode.ENTER) {
       confirm();
     }
   };
-
   useEffect(function () {
     setSelectedValue((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain');
     setInnerValue((filterModel === null || filterModel === void 0 ? void 0 : _filterInstanceProperty(filterModel)) || []);
@@ -67,7 +55,6 @@ function DefaultFilterContent(_ref) {
     // 兼容设置焦点后发生滚动
     setTimeout(function () {
       var _a;
-
       (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({
         preventScroll: true
       });
@@ -77,7 +64,6 @@ function DefaultFilterContent(_ref) {
     className: 'filter-option-list'
   }, /*#__PURE__*/React.createElement("ul", null, _mapInstanceProperty(DEFAULT_FILTER_OPTIONS).call(DEFAULT_FILTER_OPTIONS, function (option, index) {
     var _a;
-
     return (
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
@@ -113,5 +99,4 @@ function DefaultFilterContent(_ref) {
     onClick: confirm
   }, (_b = localeText.confirmFilter) !== null && _b !== void 0 ? _b : '确定')));
 }
-
 export default DefaultFilterContent;

package/es/table/pipeline/features/filter/DefaultFilterIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 export default function DefaultFilterIcon(_ref) {
   var width = _ref.width,
-      height = _ref.height;
+    height = _ref.height;
   return /*#__PURE__*/React.createElement("svg", {
     width: width,
     height: height,

package/es/table/pipeline/features/filter/Filter.js

@@ -1,9 +1,7 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 import React, { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import styled from 'styled-components';
@@ -16,34 +14,27 @@ import { calculatePopupRelative } from '../../../utils';
 import { addResizeObserver } from '../../../base/utils';
 import KeyCode from '../../../utils/keyCode';
 var HEADER_ICON_OFFSET_Y = 8 + 1; // padding-top + border
-
 var HEADER_ICON_OFFSET_X = 16 + 1; // padding-left+ border
-
 var FilterIconSpanStyle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // position: absolute;\n  // right: 4px;\n  // cursor: pointer;\n  // transform: translateY(-50%);\n  // top: 50%;\n  // height: 12px; \n  > .", " {\n    display: flex\n  }\n"])), Classes.filterIcon);
-
 function Panel(_ref) {
   var ele = _ref.ele,
-      filterIcon = _ref.filterIcon,
-      hidePanel = _ref.hidePanel,
-      renderPanelContent = _ref.renderPanelContent,
-      hideFilterPopupHeader = _ref.hideFilterPopupHeader,
-      popupParent = _ref.popupParent;
+    filterIcon = _ref.filterIcon,
+    hidePanel = _ref.hidePanel,
+    renderPanelContent = _ref.renderPanelContent,
+    hideFilterPopupHeader = _ref.hideFilterPopupHeader,
+    popupParent = _ref.popupParent;
   var filterPanelRef = React.useRef(null);
-
   var _React$useState = React.useState(calculatePopupRelative(ele, popupParent, _getPanelOffset(ele, hideFilterPopupHeader))),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      position = _React$useState2[0],
-      setPosition = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    position = _React$useState2[0],
+    setPosition = _React$useState2[1];
   var style = {
     position: 'absolute',
     zIndex: 1050
   };
-
   var handleFilterPanelResize = function handleFilterPanelResize(resize) {
     setPosition(calculatePopupRelative(ele, popupParent, _getPanelOffset(ele, hideFilterPopupHeader)));
   };
-
   useEffect(function () {
     var resizeObserver = addResizeObserver(filterPanelRef.current.children[0], handleFilterPanelResize);
     return function () {
@@ -60,38 +51,32 @@ function Panel(_ref) {
     hideFilterPopupHeader: hideFilterPopupHeader
   }, renderPanelContent()));
 }
-
 function Filter(_ref2) {
   var _cx;
-
   var _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? 12 : _ref2$size,
-      style = _ref2.style,
-      className = _ref2.className,
-      FilterPanelContent = _ref2.FilterPanelContent,
-      filterIcon = _ref2.filterIcon,
-      setFilter = _ref2.setFilter,
-      setFilterModel = _ref2.setFilterModel,
-      filterModel = _ref2.filterModel,
-      isFilterActive = _ref2.isFilterActive,
-      stopClickEventPropagation = _ref2.stopClickEventPropagation,
-      stopESCKeyDownEventPropagation = _ref2.stopESCKeyDownEventPropagation,
-      hideFilterPopupHeader = _ref2.hideFilterPopupHeader,
-      getPopupParent = _ref2.getPopupParent,
-      localeText = _ref2.localeText;
-
+    size = _ref2$size === void 0 ? 12 : _ref2$size,
+    style = _ref2.style,
+    className = _ref2.className,
+    FilterPanelContent = _ref2.FilterPanelContent,
+    filterIcon = _ref2.filterIcon,
+    setFilter = _ref2.setFilter,
+    setFilterModel = _ref2.setFilterModel,
+    filterModel = _ref2.filterModel,
+    isFilterActive = _ref2.isFilterActive,
+    stopClickEventPropagation = _ref2.stopClickEventPropagation,
+    stopESCKeyDownEventPropagation = _ref2.stopESCKeyDownEventPropagation,
+    hideFilterPopupHeader = _ref2.hideFilterPopupHeader,
+    getPopupParent = _ref2.getPopupParent,
+    localeText = _ref2.localeText;
   var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      showPanel = _React$useState4[0],
-      setShowPanel = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    showPanel = _React$useState4[0],
+    setShowPanel = _React$useState4[1];
   var iconRef = React.useRef(null);
   var iconWrapRef = React.useRef();
-
   var hidePanel = function hidePanel() {
     return setShowPanel(false);
   };
-
   var renderPanelContent = function renderPanelContent() {
     if (FilterPanelContent) {
       return /*#__PURE__*/React.createElement(FilterPanelContent, {
@@ -110,31 +95,26 @@ function Filter(_ref2) {
       });
     }
   };
-
   var handleIconClick = function handleIconClick(e) {
     // 只有当icon区域点击会触发面板展开
     // 防止 createPortal 区域的点击触发该事件
     if (e.currentTarget.contains(e.target)) {
       setShowPanel(true);
     }
-
     if (stopClickEventPropagation) {
       e.stopPropagation();
     }
   };
-
   var handleKeyDown = function handleKeyDown(e) {
     if (e.keyCode === KeyCode.ESC) {
       if (e.currentTarget.contains(e.target)) {
         setShowPanel(false);
       }
-
       if (stopESCKeyDownEventPropagation) {
         e.stopPropagation();
       }
     }
   };
-
   var iconClassName = cx((_cx = {}, _defineProperty(_cx, className, true), _defineProperty(_cx, 'filter-panel-open', showPanel), _cx));
   var displayFilterIcon = typeof filterIcon === 'function' ? filterIcon(isFilterActive) : filterIcon;
   var popupParent = (getPopupParent === null || getPopupParent === void 0 ? void 0 : getPopupParent(iconWrapRef.current)) || document.body;
@@ -160,7 +140,6 @@ function Filter(_ref2) {
     popupParent: popupParent
   }), popupParent));
 }
-
 function _getPanelOffset(ele, hideFilterPopupHeader) {
   if (hideFilterPopupHeader) {
     return {
@@ -168,11 +147,9 @@ function _getPanelOffset(ele, hideFilterPopupHeader) {
       y: 0 - ele.offsetHeight
     };
   }
-
   return {
     x: HEADER_ICON_OFFSET_X,
     y: HEADER_ICON_OFFSET_Y
   };
 }
-
 export default Filter;