feat(data-table): support shiftKey check (#1026)

* feat:n-input Support hidden password * feat(form): support require-mark-placement(#171) * Revert "feat(form): support require-mark-placement(#171)" This reverts commit 0627777. * Revert "feat:n-input Support hidden password" This reverts commit ea64917. * feat(data-table): wip * feat: fix code * feat: fix code * feat: update changelog * feat: update changelog * feat: fix code * feat: fix code
tusen-ai · Sep 2, 2021 · a715dfd · a715dfd
1 parent bbddd13
commit a715dfd
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 16 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -16,6 +16,7 @@
 - `n-tree` & `n-tree-select` add `label-field` prop.
 - `n-tree` & `n-tree-select` add `children-field` prop.
 - `n-dropdown` option add `props` prop, closes [#813](https://github.com/TuSimple/naive-ui/issues/813).
+- `n-data-table` supports multi-selection by holding down `shift`, closes [#554](https://github.com/TuSimple/naive-ui/issues/554).
 
 ### Fixes
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -16,6 +16,7 @@
 - `n-tree` 和 `n-tree-select` 新增 `label-field` 属性
 - `n-tree` 和 `n-tree-select` 新增 `children-field` 属性
 - `n-dropdown` 选项新增 `props` 属性，关闭 [#813](https://github.com/TuSimple/naive-ui/issues/813)
+- `n-data-table` 支持按住 `shift` 进行多选操作，关闭 [#554](https://github.com/TuSimple/naive-ui/issues/554)
 
 ### Fixes
 

diff --git a/src/checkbox/src/Checkbox.tsx b/src/checkbox/src/Checkbox.tsx
@@ -48,10 +48,10 @@ const checkboxProps = {
   },
   // eslint-disable-next-line vue/prop-name-casing
   'onUpdate:checked': [Function, Array] as PropType<
-  MaybeArray<(value: boolean) => void>
+  MaybeArray<(value: boolean, e: MouseEvent | KeyboardEvent) => void>
   >,
   onUpdateChecked: [Function, Array] as PropType<
-  MaybeArray<(value: boolean) => void>
+  MaybeArray<(value: boolean, e: MouseEvent | KeyboardEvent) => void>
   >,
   // private
   privateTableHeader: Boolean,
@@ -154,7 +154,7 @@ export default defineComponent({
       props,
       mergedClsPrefixRef
     )
-    function toggle (): void {
+    function toggle (e: MouseEvent | KeyboardEvent): void {
       if (NCheckboxGroup && props.value !== undefined) {
         NCheckboxGroup.toggleCheckbox(!renderedCheckedRef.value, props.value)
       } else {
@@ -165,17 +165,17 @@ export default defineComponent({
         } = props
         const { nTriggerFormInput, nTriggerFormChange } = formItem
         const nextChecked = !renderedCheckedRef.value
-        if (_onUpdateCheck) call(_onUpdateCheck, nextChecked)
-        if (onUpdateChecked) call(onUpdateChecked, nextChecked)
+        if (_onUpdateCheck) call(_onUpdateCheck, nextChecked, e)
+        if (onUpdateChecked) call(onUpdateChecked, nextChecked, e)
         if (onChange) call(onChange, nextChecked) // deprecated
         nTriggerFormInput()
         nTriggerFormChange()
         uncontrolledCheckedRef.value = nextChecked
       }
     }
-    function handleClick (): void {
+    function handleClick (e: MouseEvent): void {
       if (!mergedDisabledRef.value) {
-        toggle()
+        toggle(e)
       }
     }
     function handleKeyUp (e: KeyboardEvent): void {
@@ -184,7 +184,7 @@ export default defineComponent({
         case 'Space':
         case 'Enter':
         case 'NumpadEnter':
-          toggle()
+          toggle(e)
       }
     }
     function handleKeyDown (e: KeyboardEvent): void {
@@ -289,6 +289,13 @@ export default defineComponent({
         onKeyup={handleKeyUp}
         onKeydown={handleKeyDown}
         onClick={handleClick}
+        onMousedown={() => {
+          const userCallBack = window.onselectstart
+          window.onselectstart = () => false
+          setTimeout(() => {
+            window.onselectstart = userCallBack
+          }, 0)
+        }}
       >
         <div class={`${mergedClsPrefix}-checkbox-box`}>
           <NIconSwitchTransition>

diff --git a/src/data-table/src/TableParts/Body.tsx b/src/data-table/src/TableParts/Body.tsx
@@ -137,10 +137,39 @@ export default defineComponent({
     } = inject(dataTableInjectionKey)!
     const scrollbarInstRef = ref<ScrollbarInst | null>(null)
     const virtualListRef = ref<VirtualListInst | null>(null)
+    let lastSelectedKey: string | number = ''
     function handleCheckboxUpdateChecked (
       tmNode: { key: RowKey },
-      checked: boolean
+      checked: boolean,
+      shiftKey: boolean
     ): void {
+      const lastKey = lastSelectedKey
+      lastSelectedKey = tmNode.key
+
+      if (shiftKey) {
+        const lastIndex = paginatedDataRef.value.findIndex(
+          (item) => item.key === lastKey
+        )
+        if (lastIndex !== -1) {
+          const currentIndex = paginatedDataRef.value.findIndex(
+            (item) => item.key === tmNode.key
+          )
+          const start = Math.min(lastIndex, currentIndex)
+          const end = Math.max(lastIndex, currentIndex)
+          const rowKeysToCheck: RowKey[] = []
+          paginatedDataRef.value.slice(start, end + 1).forEach((r) => {
+            if (!r.disabled) {
+              rowKeysToCheck.push(r.key)
+            }
+          })
+          if (checked) {
+            doCheck(rowKeysToCheck)
+          } else {
+            doUncheck(rowKeysToCheck)
+          }
+        }
+      }
+
       if (checked) {
         doCheck(tmNode.key)
       } else {
@@ -527,8 +556,12 @@ export default defineComponent({
                           key={currentPage}
                           rowKey={rowKey}
                           disabled={rowInfo.disabled}
-                          onUpdateChecked={(checked) =>
-                            handleCheckboxUpdateChecked(rowInfo, checked)
+                          onUpdateChecked={(checked: boolean, e) =>
+                            handleCheckboxUpdateChecked(
+                              rowInfo,
+                              checked,
+                              e.shiftKey
+                            )
                           }
                         />
                       ) : null

diff --git a/src/data-table/src/TableParts/BodyCheckbox.tsx b/src/data-table/src/TableParts/BodyCheckbox.tsx
@@ -15,7 +15,9 @@ export default defineComponent({
       required: true
     },
     onUpdateChecked: {
-      type: Function as PropType<(checked: boolean) => void>,
+      type: Function as PropType<
+      (checked: boolean, e: MouseEvent | KeyboardEvent) => void
+      >,
       required: true
     }
   },

diff --git a/src/data-table/src/interface.ts b/src/data-table/src/interface.ts
@@ -204,8 +204,8 @@ export interface DataTableInjection {
   doUpdateSorter: (sorter: SortState | null) => void
   doUncheckAll: (checkWholeTable?: boolean) => void
   doCheckAll: (checkWholeTable?: boolean) => void
-  doCheck: (rowKey: RowKey) => void
-  doUncheck: (rowKey: RowKey) => void
+  doCheck: (rowKey: RowKey | RowKey[]) => void
+  doUncheck: (rowKey: RowKey | RowKey[]) => void
   handleTableHeaderScroll: (e: Event) => void
   handleTableBodyScroll: (e: Event) => void
   syncScrollState: (deltaX?: number, deltaY?: number) => void

diff --git a/src/data-table/src/use-check.ts b/src/data-table/src/use-check.ts
@@ -88,14 +88,14 @@ export function useCheck (
     if (onCheckedRowKeysChange) call(onCheckedRowKeysChange, keys)
     uncontrolledCheckedRowKeysRef.value = keys
   }
-  function doCheck (rowKey: RowKey): void {
+  function doCheck (rowKey: RowKey | RowKey[]): void {
     doUpdateCheckedRowKeys(
       treeMateRef.value.check(rowKey, mergedCheckedRowKeysRef.value, {
         cascade: props.cascade
       }).checkedKeys
     )
   }
-  function doUncheck (rowKey: RowKey): void {
+  function doUncheck (rowKey: RowKey | RowKey[]): void {
     doUpdateCheckedRowKeys(
       treeMateRef.value.uncheck(rowKey, mergedCheckedRowKeysRef.value, {
         cascade: props.cascade