@meethive/components 0.0.2 → 0.0.4

package/lib/VirtualTable/VirtualTable.js

@@ -1,271 +1,235 @@
- function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-import { defineComponent, computed, ref, watch, onMounted, nextTick, h } from 'vue'
-import { Table, Checkbox } from 'ant-design-vue'
-import { isNumber, map, omit } from 'lodash-es'
-import AIcon from '../Icon'
-import useVirtualTableStyle from './style'
-import { useLocaleReceiver } from '../LocaleReciver'
-import { findAllChildren, flattenTree } from './data'
-
-const buffer = 5
-
-export default defineComponent({
-  name: 'JVirtualTable',
-  components: {
-    Table,
-    Checkbox,
-    AIcon
-  },
-  props: {
-    dataSource: {
-      type: Array,
-      default: () => []
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    expandedRowKeys: {
-      type: Array,
-      default: () => []
-    },
-    rowSelection: {
-      type: Object
-    },
-    rowKey: {
-      type: [String, Function],
-      default: 'id'
-    },
-    height: {
-      type: Number,
-      default: 500
-    }
-  } ,
-  emits: ['update:expandedRowKeys'],
-  setup(props, { emit }) {
-    const prefixCls = computed(() => 'virtual-table')
-    const [wrapSSR, hashId] = useVirtualTableStyle(prefixCls)
-    const [contextLocale] = useLocaleReceiver('ProTable')
-
-    const container = ref(null)
-    const rowHeights = ref([])
-    const prefixSum = ref([])
-    const start = ref(0)
-    const end = ref(15)
-    const offsetY = ref(0)
-
-    const selectedAll = ref(false)
-    // 被展开的所有数据
-    const visibleNodes = ref([])
-    const flattenData = ref([])
-
-    const firstColumn = computed(() => props.columns[0])
-    const totalHeight = computed(() =>
-      prefixSum.value.length ? prefixSum.value[prefixSum.value.length - 1] : 0
-    )
-    const visibleRows = computed(() => visibleNodes.value.slice(start.value, end.value))
-    const _indeterminate = computed(
-      () => !selectedAll.value && (_nullishCoalesce(_optionalChain([props, 'access', _ => _.rowSelection, 'optionalAccess', _2 => _2.selectedRowKeys, 'optionalAccess', _3 => _3.length]), () => ( 0))) > 0
-    )
-    const viewportHeight = computed(() => props.height || 500)
-
-    const _columns = computed(() => {
-      const arr = []
-      if (props.rowSelection) {
-        const _width = props.rowSelection.columnWidth || 32
-        arr.push({
-          key: '__selection__',
-          title: contextLocale.value.select.all,
-          dataIndex: '__selection__',
-          width: isNumber(_width) ? `${_width}px` : _width,
-          customHeaderCell: (props) => {
-            return {
-              class: 'ant-table-selection-column'
-            }
-          }
-        })
-      }
-      arr.push(...props.columns)
-      return arr
-    })
-
-    const _rowSelection = computed(() => {
-      return props.rowSelection
-        ? {
-            ...props.rowSelection,
-            onSelect: (record, selected, selectedRows, nativeEvent) => {
-              const _selectedRowKeys = props.rowSelection.selectedRowKeys || []
-              const _set = new Set([..._selectedRowKeys])
-              if (props.rowSelection.type === 'radio') {
-                _set.clear()
-                _set.add(record[props.rowKey ])
-              } else {
-                const _checkStrictly =
-                  props.rowSelection.checkStrictly !== undefined
-                    ? props.rowSelection.checkStrictly
-                    : true
-                let __arr = []
-                if (_checkStrictly) {
-                  // 需要获取子
-                  __arr = [record[props.rowKey ]]
-                } else {
-                  __arr = map(
-                    findAllChildren(flattenData.value, record[props.rowKey ]),
-                    props.rowKey 
-                  )
-                  __arr.push(record[props.rowKey ])
-                }
-                if (selected) {
-                  __arr.forEach((i) => _set.add(i))
-                } else {
-                  __arr.forEach((i) => _set.delete(i))
-                }
-              }
-              const _selectedRows = flattenData.value
-                .filter((i) => _set.has(i[props.rowKey ]))
-                .map((item) => omit(item, ['expanded', 'hasChildren', 'visible']))
-              if (props.rowSelection.onSelect) {
-                props.rowSelection.onSelect(record, selected, _selectedRows, nativeEvent)
-              }
-              if (props.rowSelection.onChange) {
-                props.rowSelection.onChange([..._set], _selectedRows)
-              }
-            },
-            onChange: () => {},
-            onSelectAll: () => {},
-            onSelectNone: () => {
-              if (props.rowSelection.onSelectNone) {
-                props.rowSelection.onSelectNone()
-              }
-            }
-          }
-        : undefined
-    })
-
-    const onSelectedAllChange = (e) => {
-      const selected = e.target.checked
-      const arr = flattenData.value.map((i) => omit(i, ['expanded', 'hasChildren', 'visible']))
-      const _checked = selected
-      const _selectedRowKeys = _checked ? map(arr, props.rowKey ) : []
-      if (props.rowSelection.onSelectAll) {
-        props.rowSelection.onSelectAll(_checked, _checked ? arr : [])
-      }
-      if (props.rowSelection.onChange) {
-        props.rowSelection.onChange(_selectedRowKeys, _checked ? arr : [])
-      }
-    }
-
-    const onScroll = (e) => {
-      const scrollTop = e.target.scrollTop
-      const vh = viewportHeight.value || 500
-      const total = totalHeight.value
-      // 防止 scrollTop 超出范围
-      const clampedScrollTop = Math.min(scrollTop, total - vh)
-      // 二分查找
-      let low = 0,
-        high = prefixSum.value.length - 1
-      while (low < high) {
-        const mid = Math.floor((low + high) / 2)
-        if (prefixSum.value[mid] <= clampedScrollTop) low = mid + 1
-        else high = mid
-      }
-      const newStart = Math.max(0, low - 1)
-      // 如果 start 没变化，直接跳过，避免重复计算导致闪动
-      if (newStart === start.value) return
-      start.value = newStart
-      // 计算 end
-      let y = prefixSum.value[start.value] || 0
-      let i = start.value
-      while (i < visibleNodes.value.length && y < clampedScrollTop + vh) {
-        y += rowHeights.value[i] || 40
-        i++
-      }
-      end.value = Math.min(i + buffer, visibleNodes.value.length)
-      // 防止 offsetY 波动
-      offsetY.value = prefixSum.value[start.value - 1] || 0
-    }
-
-    const toggleExpand = (row) => {
-      row.expanded = !row.expanded
-      const stack = [...flattenData.value.filter((n) => n.parentId === row[props.rowKey ])]
-      while (stack.length) {
-        const child = stack.pop()
-        child.visible = row.expanded
-        if (!child.visible) {
-          child.expanded = false
-        }
-        if (!row.expanded && child.hasChildren) {
-          stack.push(...flattenData.value.filter((n) => n.parentId === child[props.rowKey ]))
-        }
-      }
-      updateVisibleNodes()
-    }
-
-    const updatePrefixSum = () => {
-      rowHeights.value = visibleNodes.value.map(() => 40) // 默认行高
-      prefixSum.value = []
-      let sum = 0
-      for (let h of rowHeights.value) {
-        sum += h
-        prefixSum.value.push(sum)
-      }
-    }
-
-    const updateVisibleNodes = () => {
-      visibleNodes.value = flattenData.value.filter((i) => i.visible)
-      updatePrefixSum()
-      console.log('123')
-      nextTick(() => onScroll({ target: container.value }))
-    }
-
-    watch(
-      () => [JSON.stringify(props.dataSource), JSON.stringify(props.expandedRowKeys)],
-      () => {
-        flattenData.value = flattenTree(props.dataSource , 0, null)
-        flattenData.value.forEach((i) => {
-          if ((props.expandedRowKeys ).includes(i[props.rowKey ])) {
-            toggleExpand(i)
-          }
-        })
-        updateVisibleNodes()
-      },
-      {
-        immediate: true
-      }
-    )
-
-    watch(
-      () => _optionalChain([props, 'access', _4 => _4.rowSelection, 'optionalAccess', _5 => _5.selectedRowKeys]),
-      (val) => {
-        if (val) {
-          selectedAll.value = val.length > 0 && flattenData.value.length === val.length
-        }
-      },
-      {
-        immediate: true
-      }
-    )
-
-    onMounted(() => {
-      updateVisibleNodes()
-    })
-
-    return {
-      h,
-      hashId,
-      container,
-      selectedAll,
-      visibleRows,
-      _indeterminate,
-      viewportHeight,
-      _columns,
-      _rowSelection,
-      totalHeight,
-      offsetY,
-      firstColumn,
-      onSelectedAllChange,
-      onScroll,
-      toggleExpand
-    }
-  }
-})
+import { defineComponent, computed, ref, watch, onMounted, nextTick, h } from 'vue';
+import { Table, Checkbox } from 'ant-design-vue';
+import { isNumber, map, omit } from 'lodash-es';
+import AIcon from '../Icon';
+import useVirtualTableStyle from './style';
+import { useLocaleReceiver } from '../LocaleReciver';
+import { findAllChildren, flattenTree } from './data';
+const buffer = 5;
+export default defineComponent({
+  name: 'JVirtualTable',
+  components: {
+    Table,
+    Checkbox,
+    AIcon
+  },
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    expandedRowKeys: {
+      type: Array,
+      default: () => []
+    },
+    rowSelection: {
+      type: Object
+    },
+    rowKey: {
+      type: [String, Function],
+      default: 'id'
+    },
+    height: {
+      type: Number,
+      default: 500
+    }
+  },
+  emits: ['update:expandedRowKeys'],
+  setup(props, {
+    emit
+  }) {
+    const prefixCls = computed(() => 'virtual-table');
+    const [wrapSSR, hashId] = useVirtualTableStyle(prefixCls);
+    const [contextLocale] = useLocaleReceiver('ProTable');
+    const container = ref(null);
+    const rowHeights = ref([]);
+    const prefixSum = ref([]);
+    const start = ref(0);
+    const end = ref(15);
+    const offsetY = ref(0);
+    const selectedAll = ref(false);
+    // 被展开的所有数据
+    const visibleNodes = ref([]);
+    const flattenData = ref([]);
+    const firstColumn = computed(() => props.columns[0]);
+    const totalHeight = computed(() => prefixSum.value.length ? prefixSum.value[prefixSum.value.length - 1] : 0);
+    const visibleRows = computed(() => visibleNodes.value.slice(start.value, end.value));
+    const _indeterminate = computed(() => !selectedAll.value && (props.rowSelection?.selectedRowKeys?.length ?? 0) > 0);
+    const viewportHeight = computed(() => props.height || 500);
+    const _columns = computed(() => {
+      const arr = [];
+      if (props.rowSelection) {
+        const _width = props.rowSelection.columnWidth || 32;
+        arr.push({
+          key: '__selection__',
+          title: contextLocale.value.select.all,
+          dataIndex: '__selection__',
+          width: isNumber(_width) ? `${_width}px` : _width,
+          customHeaderCell: props => {
+            return {
+              class: 'ant-table-selection-column'
+            };
+          }
+        });
+      }
+      arr.push(...props.columns);
+      return arr;
+    });
+    const _rowSelection = computed(() => {
+      return props.rowSelection ? {
+        ...props.rowSelection,
+        onSelect: (record, selected, selectedRows, nativeEvent) => {
+          const _selectedRowKeys = props.rowSelection.selectedRowKeys || [];
+          const _set = new Set([..._selectedRowKeys]);
+          if (props.rowSelection.type === 'radio') {
+            _set.clear();
+            _set.add(record[props.rowKey]);
+          } else {
+            const _checkStrictly = props.rowSelection.checkStrictly !== undefined ? props.rowSelection.checkStrictly : true;
+            let __arr = [];
+            if (_checkStrictly) {
+              // 需要获取子
+              __arr = [record[props.rowKey]];
+            } else {
+              __arr = map(findAllChildren(flattenData.value, record[props.rowKey]), props.rowKey);
+              __arr.push(record[props.rowKey]);
+            }
+            if (selected) {
+              __arr.forEach(i => _set.add(i));
+            } else {
+              __arr.forEach(i => _set.delete(i));
+            }
+          }
+          const _selectedRows = flattenData.value.filter(i => _set.has(i[props.rowKey])).map(item => omit(item, ['expanded', 'hasChildren', 'visible']));
+          if (props.rowSelection.onSelect) {
+            props.rowSelection.onSelect(record, selected, _selectedRows, nativeEvent);
+          }
+          if (props.rowSelection.onChange) {
+            props.rowSelection.onChange([..._set], _selectedRows);
+          }
+        },
+        onChange: () => {},
+        onSelectAll: () => {},
+        onSelectNone: () => {
+          if (props.rowSelection.onSelectNone) {
+            props.rowSelection.onSelectNone();
+          }
+        }
+      } : undefined;
+    });
+    const onSelectedAllChange = e => {
+      const selected = e.target.checked;
+      const arr = flattenData.value.map(i => omit(i, ['expanded', 'hasChildren', 'visible']));
+      const _checked = selected;
+      const _selectedRowKeys = _checked ? map(arr, props.rowKey) : [];
+      if (props.rowSelection.onSelectAll) {
+        props.rowSelection.onSelectAll(_checked, _checked ? arr : []);
+      }
+      if (props.rowSelection.onChange) {
+        props.rowSelection.onChange(_selectedRowKeys, _checked ? arr : []);
+      }
+    };
+    const onScroll = e => {
+      const scrollTop = e.target.scrollTop;
+      const vh = viewportHeight.value || 500;
+      const total = totalHeight.value;
+      // 防止 scrollTop 超出范围
+      const clampedScrollTop = Math.min(scrollTop, total - vh);
+      // 二分查找
+      let low = 0,
+        high = prefixSum.value.length - 1;
+      while (low < high) {
+        const mid = Math.floor((low + high) / 2);
+        if (prefixSum.value[mid] <= clampedScrollTop) low = mid + 1;else high = mid;
+      }
+      const newStart = Math.max(0, low - 1);
+      // 如果 start 没变化，直接跳过，避免重复计算导致闪动
+      if (newStart === start.value) return;
+      start.value = newStart;
+      // 计算 end
+      let y = prefixSum.value[start.value] || 0;
+      let i = start.value;
+      while (i < visibleNodes.value.length && y < clampedScrollTop + vh) {
+        y += rowHeights.value[i] || 40;
+        i++;
+      }
+      end.value = Math.min(i + buffer, visibleNodes.value.length);
+      // 防止 offsetY 波动
+      offsetY.value = prefixSum.value[start.value - 1] || 0;
+    };
+    const toggleExpand = row => {
+      row.expanded = !row.expanded;
+      const stack = [...flattenData.value.filter(n => n.parentId === row[props.rowKey])];
+      while (stack.length) {
+        const child = stack.pop();
+        child.visible = row.expanded;
+        if (!child.visible) {
+          child.expanded = false;
+        }
+        if (!row.expanded && child.hasChildren) {
+          stack.push(...flattenData.value.filter(n => n.parentId === child[props.rowKey]));
+        }
+      }
+      updateVisibleNodes();
+    };
+    const updatePrefixSum = () => {
+      rowHeights.value = visibleNodes.value.map(() => 40); // 默认行高
+      prefixSum.value = [];
+      let sum = 0;
+      for (let h of rowHeights.value) {
+        sum += h;
+        prefixSum.value.push(sum);
+      }
+    };
+    const updateVisibleNodes = () => {
+      visibleNodes.value = flattenData.value.filter(i => i.visible);
+      updatePrefixSum();
+      console.log('123');
+      nextTick(() => onScroll({
+        target: container.value
+      }));
+    };
+    watch(() => [JSON.stringify(props.dataSource), JSON.stringify(props.expandedRowKeys)], () => {
+      flattenData.value = flattenTree(props.dataSource, 0, null);
+      flattenData.value.forEach(i => {
+        if (props.expandedRowKeys.includes(i[props.rowKey])) {
+          toggleExpand(i);
+        }
+      });
+      updateVisibleNodes();
+    }, {
+      immediate: true
+    });
+    watch(() => props.rowSelection?.selectedRowKeys, val => {
+      if (val) {
+        selectedAll.value = val.length > 0 && flattenData.value.length === val.length;
+      }
+    }, {
+      immediate: true
+    });
+    onMounted(() => {
+      updateVisibleNodes();
+    });
+    return {
+      h,
+      hashId,
+      container,
+      selectedAll,
+      visibleRows,
+      _indeterminate,
+      viewportHeight,
+      _columns,
+      _rowSelection,
+      totalHeight,
+      offsetY,
+      firstColumn,
+      onSelectedAllChange,
+      onScroll,
+      toggleExpand
+    };
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meethive/components",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",