@kdcloudjs/table 1.1.5-canary.6 → 1.1.5-canary.8

package/es/table/pipeline/features/contextMenu.d.ts

@@ -1,14 +1,18 @@
 import { TablePipeline } from '../pipeline';
 interface ContextMenuItem {
+    key?: string;
     name: string;
-    action: () => {};
+    action: () => void;
     disabled?: boolean;
+    className?: string;
 }
 export interface ContextMenuFeatureOptions {
     /** 获得自定义菜单 */
     getContextMenuItems?: (params: any) => ContextMenuItem[];
     /** 弹出框的父容器 */
     popupParent?: HTMLElement;
+    /** 右键菜单className */
+    menuClassName?: string;
 }
 export declare function contextMenu(opts?: ContextMenuFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
 export {};

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

@@ -16,6 +16,7 @@ export function contextMenu() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function step(pipeline) {
     var popupParent = opts.popupParent || document.body;
+    var menuClassName = opts.menuClassName;
     var menuHelper = new MenuHelper();
 
     var addPopup = function addPopup(menu) {
@@ -124,7 +125,8 @@ export function contextMenu() {
         options: options,
         hideContextMenu: hideContextMenu,
         position: position,
-        getPopupParent: getPopupParent
+        getPopupParent: getPopupParent,
+        className: menuClassName
       });
 
       var _hidePopup = addPopup(menu);
@@ -157,7 +159,8 @@ function getMenuItemKey(_ref) {
 }
 
 function Menu(props) {
-  var _props$options = props.options,
+  var className = props.className,
+      _props$options = props.options,
       options = _props$options === void 0 ? [] : _props$options,
       hideContextMenu = props.hideContextMenu,
       position = props.position,
@@ -178,7 +181,7 @@ function Menu(props) {
     }
   }, [position]);
   return /*#__PURE__*/React.createElement(ContextMenuStyleWrap, {
-    className: MenuClasses.menu,
+    className: cx(MenuClasses.menu, className),
     ref: menuRef,
     style: {
       left: position.x,
@@ -194,6 +197,7 @@ function Menu(props) {
       }),
       name: item.name,
       action: item.action,
+      className: item.className,
       disabled: item.disabled,
       hideContextMenu: hideContextMenu
     });
@@ -203,6 +207,7 @@ function Menu(props) {
 function MenuItem(props) {
   var name = props.name,
       action = props.action,
+      className = props.className,
       disabled = props.disabled,
       hideContextMenu = props.hideContextMenu;
   var itemRef = useRef();
@@ -243,7 +248,7 @@ function MenuItem(props) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: cx(MenuClasses.menuOption, _defineProperty({}, MenuClasses.menuOptionDisable, disabled)),
+    className: cx(MenuClasses.menuOption, className, _defineProperty({}, MenuClasses.menuOptionDisable, disabled)),
     ref: itemRef,
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,

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

@@ -26,7 +26,7 @@ function DefaultFilterContent(_ref) {
       selectedValue = _React$useState2[0],
       setSelectedValue = _React$useState2[1];
 
-  var _React$useState3 = React.useState((filterModel === null || filterModel === void 0 ? void 0 : _filterInstanceProperty(filterModel)) || ''),
+  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];
@@ -44,7 +44,7 @@ function DefaultFilterContent(_ref) {
   var confirm = function confirm() {
     hidePanel();
     setFilterModel({
-      filter: [innerValue],
+      filter: innerValue,
       filterCondition: selectedValue
     });
   };
@@ -57,7 +57,7 @@ function DefaultFilterContent(_ref) {
 
   useEffect(function () {
     setSelectedValue((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain');
-    setInnerValue((filterModel === null || filterModel === void 0 ? void 0 : _filterInstanceProperty(filterModel)) || '');
+    setInnerValue((filterModel === null || filterModel === void 0 ? void 0 : _filterInstanceProperty(filterModel)) || []);
   }, [filterModel]);
   useEffect(function () {
     // 兼容设置焦点后发生滚动
@@ -87,9 +87,9 @@ function DefaultFilterContent(_ref) {
     className: 'filter-search'
   }, /*#__PURE__*/React.createElement("input", {
     className: 'filter-search-inner',
-    value: innerValue,
+    value: innerValue[0],
     onChange: function onChange(e) {
-      setInnerValue(e.target.value);
+      setInnerValue([e.target.value]);
     },
     onKeyDown: handleKeyDown,
     ref: inputRef

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

@@ -17,6 +17,7 @@ export function rangeSelection(opts) {
     var SCROLL_SIZE = 30;
     var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
     var tableFooter = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableFooter;
+    var artTable = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.artTable;
 
     if (!tableBody) {
       return pipeline;
@@ -48,6 +49,13 @@ export function rangeSelection(opts) {
         startColumn: startDragCell.column,
         footerRowRange: footerRowRange
       };
+
+      if (isCellRangeSingleCell(rangeSelection)) {
+        artTable.classList.remove(cx(Classes.rangeSelection));
+      } else {
+        artTable.classList.add(cx(Classes.rangeSelection));
+      }
+
       rangeSelectedChange(rangeSelection);
     };
 
@@ -77,6 +85,7 @@ export function rangeSelection(opts) {
       // shift + 点击选中
 
       shiftKeySelect(mouseDownEvent);
+      if (mouseDownEvent.shiftKey) return;
       var target = mouseDownEvent.target;
       var startDragCell = getTargetCell(target, columns);
       var mousemove$ = fromEvent(window, 'mousemove');
@@ -137,6 +146,7 @@ export function rangeSelection(opts) {
 
         if (columns.length && rowLen && !getElementEditable(e.target)) {
           opts.preventkDefaultOfKeyDownEvent !== false && e.preventDefault();
+          artTable.classList.add(cx(Classes.rangeSelection));
           rangeSelectedChange({
             startRow: 0,
             endRow: rowLen - 1,

package/lib/table/pipeline/features/contextMenu.d.ts

@@ -1,14 +1,18 @@
 import { TablePipeline } from '../pipeline';
 interface ContextMenuItem {
+    key?: string;
     name: string;
-    action: () => {};
+    action: () => void;
     disabled?: boolean;
+    className?: string;
 }
 export interface ContextMenuFeatureOptions {
     /** 获得自定义菜单 */
     getContextMenuItems?: (params: any) => ContextMenuItem[];
     /** 弹出框的父容器 */
     popupParent?: HTMLElement;
+    /** 右键菜单className */
+    menuClassName?: string;
 }
 export declare function contextMenu(opts?: ContextMenuFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
 export {};

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

@@ -49,6 +49,7 @@ function contextMenu() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function step(pipeline) {
     var popupParent = opts.popupParent || document.body;
+    var menuClassName = opts.menuClassName;
     var menuHelper = new MenuHelper();
 
     var addPopup = function addPopup(menu) {
@@ -162,7 +163,8 @@ function contextMenu() {
         options: options,
         hideContextMenu: hideContextMenu,
         position: position,
-        getPopupParent: getPopupParent
+        getPopupParent: getPopupParent,
+        className: menuClassName
       });
 
       var _hidePopup = addPopup(menu);
@@ -195,7 +197,8 @@ function getMenuItemKey(_ref) {
 }
 
 function Menu(props) {
-  var _props$options = props.options,
+  var className = props.className,
+      _props$options = props.options,
       options = _props$options === void 0 ? [] : _props$options,
       hideContextMenu = props.hideContextMenu,
       position = props.position,
@@ -216,7 +219,7 @@ function Menu(props) {
     }
   }, [position]);
   return /*#__PURE__*/_react.default.createElement(_commonViews.ContextMenuStyleWrap, {
-    className: _styles.MenuClasses.menu,
+    className: (0, _classnames.default)(_styles.MenuClasses.menu, className),
     ref: menuRef,
     style: {
       left: position.x,
@@ -232,6 +235,7 @@ function Menu(props) {
       }),
       name: item.name,
       action: item.action,
+      className: item.className,
       disabled: item.disabled,
       hideContextMenu: hideContextMenu
     });
@@ -241,6 +245,7 @@ function Menu(props) {
 function MenuItem(props) {
   var name = props.name,
       action = props.action,
+      className = props.className,
       disabled = props.disabled,
       hideContextMenu = props.hideContextMenu;
   var itemRef = (0, _react.useRef)();
@@ -281,7 +286,7 @@ function MenuItem(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_styles.MenuClasses.menuOption, (0, _defineProperty2.default)({}, _styles.MenuClasses.menuOptionDisable, disabled)),
+    className: (0, _classnames.default)(_styles.MenuClasses.menuOption, className, (0, _defineProperty2.default)({}, _styles.MenuClasses.menuOptionDisable, disabled)),
     ref: itemRef,
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,

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

@@ -55,7 +55,7 @@ function DefaultFilterContent(_ref) {
       selectedValue = _React$useState2[0],
       setSelectedValue = _React$useState2[1];
 
-  var _React$useState3 = _react.default.useState((filterModel === null || filterModel === void 0 ? void 0 : (0, _filter.default)(filterModel)) || ''),
+  var _React$useState3 = _react.default.useState((filterModel === null || filterModel === void 0 ? void 0 : (0, _filter.default)(filterModel)) || []),
       _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
       innerValue = _React$useState4[0],
       setInnerValue = _React$useState4[1];
@@ -74,7 +74,7 @@ function DefaultFilterContent(_ref) {
   var confirm = function confirm() {
     hidePanel();
     setFilterModel({
-      filter: [innerValue],
+      filter: innerValue,
       filterCondition: selectedValue
     });
   };
@@ -87,7 +87,7 @@ function DefaultFilterContent(_ref) {
 
   (0, _react.useEffect)(function () {
     setSelectedValue((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain');
-    setInnerValue((filterModel === null || filterModel === void 0 ? void 0 : (0, _filter.default)(filterModel)) || '');
+    setInnerValue((filterModel === null || filterModel === void 0 ? void 0 : (0, _filter.default)(filterModel)) || []);
   }, [filterModel]);
   (0, _react.useEffect)(function () {
     // 兼容设置焦点后发生滚动
@@ -117,9 +117,9 @@ function DefaultFilterContent(_ref) {
     className: 'filter-search'
   }, /*#__PURE__*/_react.default.createElement("input", {
     className: 'filter-search-inner',
-    value: innerValue,
+    value: innerValue[0],
     onChange: function onChange(e) {
-      setInnerValue(e.target.value);
+      setInnerValue([e.target.value]);
     },
     onKeyDown: handleKeyDown,
     ref: inputRef

package/lib/table/pipeline/features/rangeSelection.js

@@ -45,6 +45,7 @@ function rangeSelection(opts) {
     var SCROLL_SIZE = 30;
     var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
     var tableFooter = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableFooter;
+    var artTable = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.artTable;
 
     if (!tableBody) {
       return pipeline;
@@ -76,6 +77,13 @@ function rangeSelection(opts) {
         startColumn: startDragCell.column,
         footerRowRange: footerRowRange
       };
+
+      if (isCellRangeSingleCell(rangeSelection)) {
+        artTable.classList.remove((0, _classnames.default)(_styles.Classes.rangeSelection));
+      } else {
+        artTable.classList.add((0, _classnames.default)(_styles.Classes.rangeSelection));
+      }
+
       rangeSelectedChange(rangeSelection);
     };
 
@@ -105,6 +113,7 @@ function rangeSelection(opts) {
       // shift + 点击选中
 
       shiftKeySelect(mouseDownEvent);
+      if (mouseDownEvent.shiftKey) return;
       var target = mouseDownEvent.target;
       var startDragCell = getTargetCell(target, columns);
       var mousemove$ = (0, _rxjs.fromEvent)(window, 'mousemove');
@@ -165,6 +174,7 @@ function rangeSelection(opts) {
 
         if (columns.length && rowLen && !getElementEditable(e.target)) {
           opts.preventkDefaultOfKeyDownEvent !== false && e.preventDefault();
+          artTable.classList.add((0, _classnames.default)(_styles.Classes.rangeSelection));
           rangeSelectedChange({
             startRow: 0,
             endRow: rowLen - 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/table",
-  "version": "1.1.5-canary.6",
+  "version": "1.1.5-canary.8",
   "description": "金蝶 react table 组件",
   "title": "table",
   "keywords": [