mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-11-29 18:48:32 +08:00
perf: table #3531
This commit is contained in:
tangjinzhou
parent
f589c8f723
commit
e6b7aa47ae
@ -28,4 +28,5 @@ components/style/color/*.less
|
||||
.huskyrc
|
||||
.gitmodules
|
||||
*.png
|
||||
v2-doc/
|
||||
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
import PropTypes from '../vue-types';
|
||||
|
||||
export const storeShape = PropTypes.shape({
|
||||
subscribe: PropTypes.func.isRequired,
|
||||
setState: PropTypes.func.isRequired,
|
||||
getState: PropTypes.func.isRequired,
|
||||
});
|
||||
@ -1,15 +0,0 @@
|
||||
import { provide } from 'vue';
|
||||
import { storeShape } from './PropTypes';
|
||||
import { getSlot } from '../props-util';
|
||||
export default {
|
||||
name: 'StoreProvider',
|
||||
props: {
|
||||
store: storeShape.isRequired,
|
||||
},
|
||||
created() {
|
||||
provide('storeContext', this.$props);
|
||||
},
|
||||
render() {
|
||||
return getSlot(this);
|
||||
},
|
||||
};
|
||||
@ -1,108 +0,0 @@
|
||||
import shallowEqual from '../shallowequal';
|
||||
import { inject, createVNode, watchEffect, defineComponent, provide } from 'vue';
|
||||
import omit from 'omit.js';
|
||||
import { getOptionProps } from '../props-util';
|
||||
|
||||
function getDisplayName(WrappedComponent) {
|
||||
return WrappedComponent.name || 'Component';
|
||||
}
|
||||
|
||||
const defaultMapStateToProps = () => ({});
|
||||
export default function connect(mapStateToProps, injectExtraPropsKey) {
|
||||
const shouldSubscribe = !!mapStateToProps;
|
||||
const finalMapStateToProps = mapStateToProps || defaultMapStateToProps;
|
||||
return function wrapWithConnect(WrappedComponent) {
|
||||
const tempProps = omit(WrappedComponent.props || {}, ['store']);
|
||||
const props = {};
|
||||
Object.keys(tempProps).forEach(k => {
|
||||
props[k] = { ...tempProps[k], required: false };
|
||||
});
|
||||
const Connect = {
|
||||
name: `Connect_${getDisplayName(WrappedComponent)}`,
|
||||
inheritAttrs: false,
|
||||
props,
|
||||
setup() {
|
||||
provide(injectExtraPropsKey, undefined); // 断掉 injectExtraPropsKey 的依赖
|
||||
return {
|
||||
storeContext: inject('storeContext', {}),
|
||||
injectExtraProps: injectExtraPropsKey ? inject(injectExtraPropsKey, () => ({})) : {},
|
||||
};
|
||||
},
|
||||
data() {
|
||||
this.store = this.storeContext.store;
|
||||
this.preProps = { ...getOptionProps(this), ...this.injectExtraProps };
|
||||
watchEffect(() => {
|
||||
if (mapStateToProps && mapStateToProps.length === 2) {
|
||||
this.subscribed = finalMapStateToProps(this.store.getState(), {
|
||||
...this.$props,
|
||||
...this.injectExtraProps,
|
||||
});
|
||||
}
|
||||
});
|
||||
return {
|
||||
subscribed: finalMapStateToProps(this.store.getState(), {
|
||||
...this.$props,
|
||||
...this.injectExtraProps,
|
||||
}),
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.trySubscribe();
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.tryUnsubscribe();
|
||||
},
|
||||
methods: {
|
||||
handleChange() {
|
||||
if (!this.unsubscribe) {
|
||||
return;
|
||||
}
|
||||
const props = { ...getOptionProps(this), ...this.injectExtraProps };
|
||||
const nextSubscribed = finalMapStateToProps(this.store.getState(), props);
|
||||
if (
|
||||
!shallowEqual(this.preProps, props) ||
|
||||
!shallowEqual(this.subscribed, nextSubscribed)
|
||||
) {
|
||||
this.subscribed = nextSubscribed;
|
||||
}
|
||||
},
|
||||
|
||||
trySubscribe() {
|
||||
if (shouldSubscribe) {
|
||||
this.unsubscribe = this.store.subscribe(this.handleChange);
|
||||
this.handleChange();
|
||||
}
|
||||
},
|
||||
|
||||
tryUnsubscribe() {
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe();
|
||||
this.unsubscribe = null;
|
||||
}
|
||||
},
|
||||
getWrappedInstance() {
|
||||
return this.$refs.wrappedInstance;
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const { $slots = {}, subscribed, store, $attrs } = this;
|
||||
const props = { ...getOptionProps(this), ...this.injectExtraProps };
|
||||
this.preProps = { ...props };
|
||||
const wrapProps = {
|
||||
...$attrs,
|
||||
...props,
|
||||
...subscribed,
|
||||
store,
|
||||
ref: 'wrappedInstance',
|
||||
};
|
||||
// const slots = {};
|
||||
// for (let [key, value] of Object.entries($slots)) {
|
||||
// slots[key] = () => value();
|
||||
// }
|
||||
return createVNode(WrappedComponent, wrapProps, $slots);
|
||||
},
|
||||
};
|
||||
return defineComponent(Connect);
|
||||
};
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
export default function create(initialState) {
|
||||
let state = initialState;
|
||||
const listeners = [];
|
||||
|
||||
function setState(partial) {
|
||||
state = { ...state, ...partial };
|
||||
for (let i = 0; i < listeners.length; i++) {
|
||||
listeners[i]();
|
||||
}
|
||||
}
|
||||
|
||||
function getState() {
|
||||
return state;
|
||||
}
|
||||
|
||||
function subscribe(listener) {
|
||||
listeners.push(listener);
|
||||
|
||||
return function unsubscribe() {
|
||||
const index = listeners.indexOf(listener);
|
||||
listeners.splice(index, 1);
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
setState,
|
||||
getState,
|
||||
subscribe,
|
||||
};
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
export { default as Provider } from './Provider';
|
||||
|
||||
export { default as connect } from './connect';
|
||||
|
||||
export { default as create } from './create';
|
||||
@ -1,4 +1,4 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import Checkbox from '../checkbox';
|
||||
import Radio from '../radio';
|
||||
import { SelectionBoxProps } from './interface';
|
||||
@ -11,52 +11,21 @@ export default defineComponent({
|
||||
inheritAttrs: false,
|
||||
props: SelectionBoxProps,
|
||||
|
||||
setup() {
|
||||
setup(props) {
|
||||
return {
|
||||
unsubscribe: null,
|
||||
checked: computed(() => {
|
||||
const { store, defaultSelection, rowIndex } = props;
|
||||
let checked = false;
|
||||
if (store.selectionDirty) {
|
||||
checked = store.selectedRowKeys.indexOf(rowIndex) >= 0;
|
||||
} else {
|
||||
checked =
|
||||
store.selectedRowKeys.indexOf(rowIndex) >= 0 || defaultSelection.indexOf(rowIndex) >= 0;
|
||||
}
|
||||
return checked;
|
||||
}),
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.checked = this.getCheckState(this.$props);
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.subscribe();
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCheckState(props): boolean {
|
||||
const { store, defaultSelection, rowIndex } = props;
|
||||
let checked = false;
|
||||
if (store.getState().selectionDirty) {
|
||||
checked = store.getState().selectedRowKeys.indexOf(rowIndex) >= 0;
|
||||
} else {
|
||||
checked =
|
||||
store.getState().selectedRowKeys.indexOf(rowIndex) >= 0 ||
|
||||
defaultSelection.indexOf(rowIndex) >= 0;
|
||||
}
|
||||
return checked;
|
||||
},
|
||||
subscribe() {
|
||||
const { store } = this;
|
||||
this.unsubscribe = store.subscribe(() => {
|
||||
const checked = this.getCheckState(this.$props);
|
||||
this.setState({ checked });
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const { type, rowIndex, ...rest } = { ...getOptionProps(this), ...this.$attrs } as any;
|
||||
const { checked } = this;
|
||||
|
||||
@ -5,7 +5,7 @@ import Menu from '../menu';
|
||||
import classNames from '../_util/classNames';
|
||||
import { SelectionCheckboxAllProps } from './interface';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { defineComponent } from 'vue';
|
||||
import { computed, defineComponent } from 'vue';
|
||||
|
||||
function checkSelection({
|
||||
store,
|
||||
@ -17,7 +17,7 @@ function checkSelection({
|
||||
}) {
|
||||
return byDefaultChecked
|
||||
? data[type]((item, i) => getCheckboxPropsByItem(item, i).defaultChecked)
|
||||
: data[type]((item, i) => store.getState().selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0);
|
||||
: data[type]((item, i) => store.selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0);
|
||||
}
|
||||
|
||||
function getIndeterminateState(props) {
|
||||
@ -53,7 +53,7 @@ function getIndeterminateState(props) {
|
||||
byDefaultChecked: true,
|
||||
});
|
||||
|
||||
if (store.getState().selectionDirty) {
|
||||
if (store.selectionDirty) {
|
||||
return someCheckedNotByDefaultChecked;
|
||||
}
|
||||
return someCheckedNotByDefaultChecked || someCheckedByDefaultChecked;
|
||||
@ -64,7 +64,7 @@ function getCheckState(props) {
|
||||
if (!data.length) {
|
||||
return false;
|
||||
}
|
||||
if (store.getState().selectionDirty) {
|
||||
if (store.selectionDirty) {
|
||||
return checkSelection({
|
||||
...props,
|
||||
data,
|
||||
@ -94,28 +94,17 @@ export default defineComponent({
|
||||
inheritAttrs: false,
|
||||
props: SelectionCheckboxAllProps,
|
||||
|
||||
setup() {
|
||||
setup(props) {
|
||||
return {
|
||||
defaultSelections: [],
|
||||
unsubscribe: null,
|
||||
checked: computed(() => {
|
||||
return getCheckState(props);
|
||||
}),
|
||||
indeterminate: computed(() => {
|
||||
return getIndeterminateState(props);
|
||||
}),
|
||||
};
|
||||
},
|
||||
data() {
|
||||
const { $props: props } = this;
|
||||
|
||||
return {
|
||||
checked: getCheckState(props),
|
||||
indeterminate: getIndeterminateState(props),
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
propsSymbol: {
|
||||
handler() {
|
||||
this.setCheckState(this.$props);
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
const { $props: props } = this;
|
||||
@ -132,55 +121,11 @@ export default defineComponent({
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.subscribe();
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkSelection(props, data, type, byDefaultChecked) {
|
||||
const { store, getCheckboxPropsByItem, getRecordKey } = props || this.$props;
|
||||
// type should be 'every' | 'some'
|
||||
if (type === 'every' || type === 'some') {
|
||||
return byDefaultChecked
|
||||
? data[type]((item, i) => getCheckboxPropsByItem(item, i).defaultChecked)
|
||||
: data[type](
|
||||
(item, i) => store.getState().selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0,
|
||||
);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
setCheckState(props) {
|
||||
const checked = getCheckState(props);
|
||||
const indeterminate = getIndeterminateState(props);
|
||||
this.setState(prevState => {
|
||||
const newState: any = {};
|
||||
if (indeterminate !== prevState.indeterminate) {
|
||||
newState.indeterminate = indeterminate;
|
||||
}
|
||||
if (checked !== prevState.checked) {
|
||||
newState.checked = checked;
|
||||
}
|
||||
return newState;
|
||||
});
|
||||
},
|
||||
|
||||
handleSelectAllChange(e) {
|
||||
const { checked } = e.target;
|
||||
this.$emit('select', checked ? 'all' : 'removeAll', 0, null);
|
||||
},
|
||||
subscribe() {
|
||||
const { store } = this;
|
||||
this.unsubscribe = store.subscribe(() => {
|
||||
this.setCheckState(this.$props);
|
||||
});
|
||||
},
|
||||
|
||||
renderMenus(selections) {
|
||||
return selections.map((selection, index) => {
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import { defineComponent, inject, markRaw } from 'vue';
|
||||
import { defineComponent, inject, markRaw, reactive } from 'vue';
|
||||
import CaretUpFilled from '@ant-design/icons-vue/CaretUpFilled';
|
||||
import CaretDownFilled from '@ant-design/icons-vue/CaretDownFilled';
|
||||
import VcTable, { INTERNAL_COL_DEFINE } from '../vc-table';
|
||||
import classNames from '../_util/classNames';
|
||||
import shallowEqual from '../_util/shallowequal';
|
||||
import FilterDropdown from './filterDropdown';
|
||||
import createStore from './createStore';
|
||||
import SelectionBox from './SelectionBox';
|
||||
import SelectionCheckboxAll from './SelectionCheckboxAll';
|
||||
import Column from './Column';
|
||||
@ -140,11 +139,15 @@ export default defineComponent({
|
||||
ColumnGroup,
|
||||
props: defaultTableProps,
|
||||
|
||||
setup() {
|
||||
setup(props) {
|
||||
const store = reactive({
|
||||
selectedRowKeys: getRowSelection(props).selectedRowKeys || [],
|
||||
selectionDirty: false,
|
||||
});
|
||||
return {
|
||||
vcTable: null,
|
||||
checkboxPropsCache: {},
|
||||
store: null,
|
||||
store,
|
||||
configProvider: inject('configProvider', defaultConfigProvider),
|
||||
};
|
||||
},
|
||||
@ -189,26 +192,20 @@ export default defineComponent({
|
||||
rowSelection: {
|
||||
handler(val, oldVal) {
|
||||
if (val && 'selectedRowKeys' in val) {
|
||||
this.store.setState({
|
||||
selectedRowKeys: val.selectedRowKeys || [],
|
||||
});
|
||||
this.store.selectedRowKeys = val.selectedRowKeys || [];
|
||||
const { rowSelection } = this;
|
||||
if (rowSelection && val.getCheckboxProps !== rowSelection.getCheckboxProps) {
|
||||
this.checkboxPropsCache = {};
|
||||
}
|
||||
} else if (oldVal && !val) {
|
||||
this.store.setState({
|
||||
selectedRowKeys: [],
|
||||
});
|
||||
this.store.selectedRowKeys = [];
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
|
||||
dataSource() {
|
||||
this.store.setState({
|
||||
selectionDirty: false,
|
||||
});
|
||||
this.store.selectionDirty = false;
|
||||
this.checkboxPropsCache = {};
|
||||
},
|
||||
|
||||
@ -235,13 +232,6 @@ export default defineComponent({
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const props = getOptionProps(this);
|
||||
this.store = createStore({
|
||||
selectedRowKeys: getRowSelection(props).selectedRowKeys || [],
|
||||
selectionDirty: false,
|
||||
});
|
||||
},
|
||||
updated() {
|
||||
const { columns, sSortColumn: sortColumn, sSortOrder: sortOrder } = this;
|
||||
if (this.getSortOrderColumns(columns).length > 0) {
|
||||
@ -470,7 +460,7 @@ export default defineComponent({
|
||||
const { selectWay, record, checked, changeRowKeys, nativeEvent } = selectionInfo;
|
||||
const rowSelection = getRowSelection(this.$props);
|
||||
if (rowSelection && !('selectedRowKeys' in rowSelection)) {
|
||||
this.store.setState({ selectedRowKeys });
|
||||
this.store.selectedRowKeys = selectedRowKeys;
|
||||
}
|
||||
const data = this.getFlatData();
|
||||
if (!rowSelection.onChange && !rowSelection[selectWay]) {
|
||||
@ -583,9 +573,7 @@ export default defineComponent({
|
||||
|
||||
this.setState(newState, () => {
|
||||
this.scrollToFirstRow();
|
||||
this.store.setState({
|
||||
selectionDirty: false,
|
||||
});
|
||||
this.store.selectionDirty = false;
|
||||
this.$emit(
|
||||
'change',
|
||||
...this.prepareParamsArguments({
|
||||
@ -601,10 +589,8 @@ export default defineComponent({
|
||||
handleSelect(record, rowIndex, e) {
|
||||
const checked = e.target.checked;
|
||||
const nativeEvent = e.nativeEvent;
|
||||
const defaultSelection = this.store.getState().selectionDirty
|
||||
? []
|
||||
: this.getDefaultSelection();
|
||||
let selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection);
|
||||
const defaultSelection = this.store.selectionDirty ? [] : this.getDefaultSelection();
|
||||
let selectedRowKeys = this.store.selectedRowKeys.concat(defaultSelection);
|
||||
const key = this.getRecordKey(record, rowIndex);
|
||||
const { pivot } = this.$data;
|
||||
const rows = this.getFlatCurrentPageData();
|
||||
@ -637,9 +623,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
this.setState({ pivot: realIndex });
|
||||
this.store.setState({
|
||||
selectionDirty: true,
|
||||
});
|
||||
this.store.selectionDirty = true;
|
||||
this.setSelectedRowKeys(selectedRowKeys, {
|
||||
selectWay: 'onSelectMultiple',
|
||||
record,
|
||||
@ -654,9 +638,7 @@ export default defineComponent({
|
||||
selectedRowKeys = selectedRowKeys.filter(i => key !== i);
|
||||
}
|
||||
this.setState({ pivot: realIndex });
|
||||
this.store.setState({
|
||||
selectionDirty: true,
|
||||
});
|
||||
this.store.selectionDirty = true;
|
||||
this.setSelectedRowKeys(selectedRowKeys, {
|
||||
selectWay: 'onSelect',
|
||||
record,
|
||||
@ -672,9 +654,7 @@ export default defineComponent({
|
||||
const nativeEvent = e.nativeEvent;
|
||||
const key = this.getRecordKey(record, rowIndex);
|
||||
const selectedRowKeys = [key];
|
||||
this.store.setState({
|
||||
selectionDirty: true,
|
||||
});
|
||||
this.store.selectionDirty = true;
|
||||
this.setSelectedRowKeys(selectedRowKeys, {
|
||||
selectWay: 'onSelect',
|
||||
record,
|
||||
@ -686,10 +666,8 @@ export default defineComponent({
|
||||
|
||||
handleSelectRow(selectionKey, index, onSelectFunc) {
|
||||
const data = this.getFlatCurrentPageData();
|
||||
const defaultSelection = this.store.getState().selectionDirty
|
||||
? []
|
||||
: this.getDefaultSelection();
|
||||
const selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection);
|
||||
const defaultSelection = this.store.selectionDirty ? [] : this.getDefaultSelection();
|
||||
const selectedRowKeys = this.store.selectedRowKeys.concat(defaultSelection);
|
||||
const changeableRowKeys = data
|
||||
.filter((item, i) => !this.getCheckboxPropsByItem(item, i).disabled)
|
||||
.map((item, i) => this.getRecordKey(item, i));
|
||||
@ -733,10 +711,7 @@ export default defineComponent({
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
this.store.setState({
|
||||
selectionDirty: true,
|
||||
});
|
||||
this.store.selectionDirty = true;
|
||||
// when select custom selection, callback selections[n].onSelect
|
||||
const { rowSelection } = this;
|
||||
let customSelectionStartIndex = 2;
|
||||
@ -779,9 +754,7 @@ export default defineComponent({
|
||||
}
|
||||
this.setState(newState, this.scrollToFirstRow);
|
||||
|
||||
this.store.setState({
|
||||
selectionDirty: false,
|
||||
});
|
||||
this.store.selectionDirty = false;
|
||||
this.$emit(
|
||||
'change',
|
||||
...this.prepareParamsArguments({
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import * as Vue from 'vue';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import createStore from '../createStore';
|
||||
import SelectionBox from '../SelectionBox';
|
||||
|
||||
const getDefaultStore = selectedRowKeys => {
|
||||
return createStore({
|
||||
return Vue.reactive({
|
||||
selectedRowKeys: selectedRowKeys || [],
|
||||
selectionDirty: false,
|
||||
});
|
||||
@ -26,7 +25,7 @@ describe('SelectionBox', () => {
|
||||
sync: false,
|
||||
});
|
||||
|
||||
expect(wrapper.vm.$data).toEqual({ checked: false });
|
||||
expect(wrapper.vm.checked).toEqual(false);
|
||||
});
|
||||
|
||||
it('checked by selectedRowKeys ', () => {
|
||||
@ -41,7 +40,7 @@ describe('SelectionBox', () => {
|
||||
sync: false,
|
||||
});
|
||||
|
||||
expect(wrapper.vm.$data).toEqual({ checked: true });
|
||||
expect(wrapper.vm.checked).toEqual(true);
|
||||
});
|
||||
|
||||
it('checked by defaultSelection', () => {
|
||||
@ -55,8 +54,7 @@ describe('SelectionBox', () => {
|
||||
},
|
||||
sync: false,
|
||||
});
|
||||
|
||||
expect(wrapper.vm.$data).toEqual({ checked: true });
|
||||
expect(wrapper.vm.checked).toEqual(true);
|
||||
});
|
||||
|
||||
it('checked when store change', () => {
|
||||
@ -72,12 +70,10 @@ describe('SelectionBox', () => {
|
||||
sync: false,
|
||||
});
|
||||
|
||||
store.setState({
|
||||
selectedRowKeys: ['1'],
|
||||
selectionDirty: true,
|
||||
});
|
||||
store.selectedRowKeys = ['1'];
|
||||
store.selectionDirty = true;
|
||||
|
||||
expect(wrapper.vm.$data).toEqual({ checked: true });
|
||||
expect(wrapper.vm.checked).toEqual(true);
|
||||
});
|
||||
|
||||
it('passes props to Checkbox', done => {
|
||||
|
||||
@ -46,7 +46,7 @@ describe('Table.rowSelection', () => {
|
||||
checkboxAll.element.checked = true;
|
||||
checkboxAll.trigger('change');
|
||||
await asyncExpect(() => {
|
||||
expect(getStore(wrapper).getState()).toEqual({
|
||||
expect(getStore(wrapper)).toEqual({
|
||||
selectedRowKeys: [0, 1, 2, 3],
|
||||
selectionDirty: true,
|
||||
});
|
||||
@ -54,7 +54,7 @@ describe('Table.rowSelection', () => {
|
||||
checkboxes[1].element.checked = false;
|
||||
checkboxes[1].trigger('change');
|
||||
await asyncExpect(() => {
|
||||
expect(getStore(wrapper).getState()).toEqual({
|
||||
expect(getStore(wrapper)).toEqual({
|
||||
selectedRowKeys: [1, 2, 3],
|
||||
selectionDirty: true,
|
||||
});
|
||||
@ -62,7 +62,7 @@ describe('Table.rowSelection', () => {
|
||||
checkboxes[1].element.checked = true;
|
||||
checkboxes[1].trigger('change');
|
||||
await asyncExpect(() => {
|
||||
expect(getStore(wrapper).getState()).toEqual({
|
||||
expect(getStore(wrapper)).toEqual({
|
||||
selectedRowKeys: [1, 2, 3, 0],
|
||||
selectionDirty: true,
|
||||
});
|
||||
@ -77,7 +77,7 @@ describe('Table.rowSelection', () => {
|
||||
radios[0].element.checked = true;
|
||||
radios[0].trigger('change');
|
||||
await asyncExpect(() => {
|
||||
expect(getStore(wrapper).getState()).toEqual({
|
||||
expect(getStore(wrapper)).toEqual({
|
||||
selectedRowKeys: [0],
|
||||
selectionDirty: true,
|
||||
});
|
||||
@ -85,7 +85,7 @@ describe('Table.rowSelection', () => {
|
||||
radios[radios.length - 1].element.checked = true;
|
||||
radios[radios.length - 1].trigger('change');
|
||||
await asyncExpect(() => {
|
||||
expect(getStore(wrapper).getState()).toEqual({
|
||||
expect(getStore(wrapper)).toEqual({
|
||||
selectedRowKeys: [3],
|
||||
selectionDirty: true,
|
||||
});
|
||||
@ -163,14 +163,14 @@ describe('Table.rowSelection', () => {
|
||||
it('can be controlled', async () => {
|
||||
const wrapper = mount(Table, getTableOptions({ rowSelection: { selectedRowKeys: [0] } }));
|
||||
|
||||
expect(getStore(wrapper).getState()).toEqual({
|
||||
expect(getStore(wrapper)).toEqual({
|
||||
selectedRowKeys: [0],
|
||||
selectionDirty: false,
|
||||
});
|
||||
|
||||
wrapper.setProps({ rowSelection: { selectedRowKeys: [1] } });
|
||||
await asyncExpect(() => {
|
||||
expect(getStore(wrapper).getState()).toEqual({
|
||||
expect(getStore(wrapper)).toEqual({
|
||||
selectedRowKeys: [1],
|
||||
selectionDirty: false,
|
||||
});
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import { defineComponent } from 'vue';
|
||||
import { Store } from './createStore';
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { getSlot } from '../_util/props-util';
|
||||
import omit from 'omit.js';
|
||||
|
||||
const BodyRowProps = {
|
||||
store: Store,
|
||||
store: PropTypes.object,
|
||||
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
prefixCls: PropTypes.string,
|
||||
};
|
||||
@ -15,40 +14,11 @@ export default function createBodyRow(Component = 'tr') {
|
||||
name: 'BodyRow',
|
||||
inheritAttrs: false,
|
||||
props: BodyRowProps,
|
||||
setup() {
|
||||
setup(props) {
|
||||
return {
|
||||
unsubscribe: null,
|
||||
selected: computed(() => props.store?.selectedRowKeys.indexOf(props.rowKey) >= 0),
|
||||
};
|
||||
},
|
||||
data() {
|
||||
const { selectedRowKeys } = this.store.getState();
|
||||
|
||||
return {
|
||||
selected: selectedRowKeys.indexOf(this.rowKey) >= 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.subscribe();
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
subscribe() {
|
||||
const { store, rowKey } = this;
|
||||
this.unsubscribe = store.subscribe(() => {
|
||||
const { selectedRowKeys } = this.store.getState();
|
||||
const selected = selectedRowKeys.indexOf(rowKey) >= 0;
|
||||
if (selected !== this.selected) {
|
||||
this.selected = selected;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const rowProps = omit({ ...this.$props, ...this.$attrs }, [
|
||||
'prefixCls',
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
import PropTypes from '../_util/vue-types';
|
||||
export const Store = PropTypes.shape({
|
||||
setState: PropTypes.func,
|
||||
getState: PropTypes.func,
|
||||
subscribe: PropTypes.func,
|
||||
}).loose;
|
||||
|
||||
import create from '../_util/store/create';
|
||||
const createStore = create;
|
||||
|
||||
export default createStore;
|
||||
@ -1,8 +1,7 @@
|
||||
import { ExtractPropTypes, PropType } from 'vue';
|
||||
import { ExtractPropTypes, PropType, UnwrapRef } from 'vue';
|
||||
import PropTypes, { withUndefined } from '../_util/vue-types';
|
||||
import { PaginationProps as getPaginationProps, PaginationConfig } from '../pagination';
|
||||
import { SpinProps as getSpinProps } from '../spin';
|
||||
import { Store } from './createStore';
|
||||
import { tuple } from '../_util/type';
|
||||
|
||||
const PaginationProps = getPaginationProps();
|
||||
@ -196,10 +195,13 @@ export interface TransformCellTextProps {
|
||||
// text: PropTypes.any,
|
||||
// onSelect: SelectionItemSelectFn;
|
||||
// }
|
||||
|
||||
export type TableStore = UnwrapRef<{
|
||||
selectedRowKeys: any[];
|
||||
selectionDirty: boolean;
|
||||
}>;
|
||||
export const SelectionCheckboxAllProps = {
|
||||
propsSymbol: PropTypes.any,
|
||||
store: Store,
|
||||
store: PropTypes.any,
|
||||
locale: PropTypes.any,
|
||||
disabled: PropTypes.looseBool,
|
||||
getCheckboxPropsByItem: PropTypes.func,
|
||||
@ -218,7 +220,7 @@ export const SelectionCheckboxAllProps = {
|
||||
// }
|
||||
|
||||
export const SelectionBoxProps = {
|
||||
store: Store,
|
||||
store: PropTypes.any,
|
||||
type: RowSelectionType,
|
||||
defaultSelection: PropTypes.array,
|
||||
rowIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
|
||||
@ -5,7 +5,6 @@ import ColGroup from './ColGroup';
|
||||
import TableHeader from './TableHeader';
|
||||
import TableRow from './TableRow';
|
||||
import ExpandableRow from './ExpandableRow';
|
||||
import { connect } from '../../_util/store';
|
||||
function noop() {}
|
||||
const BaseTable = {
|
||||
name: 'BaseTable',
|
||||
@ -16,14 +15,14 @@ const BaseTable = {
|
||||
tableClassName: PropTypes.string.isRequired,
|
||||
hasHead: PropTypes.looseBool.isRequired,
|
||||
hasBody: PropTypes.looseBool.isRequired,
|
||||
store: PropTypes.object.isRequired,
|
||||
expander: PropTypes.object.isRequired,
|
||||
getRowKey: PropTypes.func,
|
||||
isAnyColumnsFixed: PropTypes.looseBool,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
table: inject('table', {}),
|
||||
table: inject('table', () => ({})),
|
||||
store: inject('table-store', () => ({})),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -40,9 +39,7 @@ const BaseTable = {
|
||||
}));
|
||||
},
|
||||
handleRowHover(isHover, key) {
|
||||
this.store.setState({
|
||||
currentHoverKey: isHover ? key : null,
|
||||
});
|
||||
this.store.currentHoverKey = isHover ? key : null;
|
||||
},
|
||||
|
||||
renderRows(renderData, indent, ancestorKeys = []) {
|
||||
@ -180,4 +177,4 @@ const BaseTable = {
|
||||
},
|
||||
};
|
||||
|
||||
export default connect()(BaseTable);
|
||||
export default BaseTable;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import PropTypes, { withUndefined } from '../../_util/vue-types';
|
||||
import ExpandIcon from './ExpandIcon';
|
||||
import BaseMixin from '../../_util/BaseMixin';
|
||||
import { connect } from '../../_util/store';
|
||||
import { getSlot } from '../../_util/props-util';
|
||||
import { computed, inject } from 'vue';
|
||||
|
||||
const ExpandableRow = {
|
||||
mixins: [BaseMixin],
|
||||
@ -16,7 +16,6 @@ const ExpandableRow = {
|
||||
indentSize: PropTypes.number,
|
||||
needIndentSpaced: PropTypes.looseBool.isRequired,
|
||||
expandRowByClick: PropTypes.looseBool,
|
||||
expanded: PropTypes.looseBool.isRequired,
|
||||
expandIconAsCell: PropTypes.looseBool,
|
||||
expandIconColumnIndex: PropTypes.number,
|
||||
childrenColumnName: PropTypes.string,
|
||||
@ -26,6 +25,12 @@ const ExpandableRow = {
|
||||
// onRowClick: PropTypes.func,
|
||||
// children: PropTypes.func.isRequired,
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject('table-store', () => ({}));
|
||||
return {
|
||||
expanded: computed(() => store.expandedRowKeys.includes(props.rowKey)),
|
||||
};
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.handleDestroy();
|
||||
@ -117,6 +122,4 @@ const ExpandableRow = {
|
||||
},
|
||||
};
|
||||
|
||||
export default connect(({ expandedRowKeys }, { rowKey }) => ({
|
||||
expanded: expandedRowKeys.includes(rowKey),
|
||||
}))(ExpandableRow);
|
||||
export default ExpandableRow;
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import PropTypes from '../../_util/vue-types';
|
||||
import BaseMixin from '../../_util/BaseMixin';
|
||||
import { connect } from '../../_util/store';
|
||||
import shallowEqual from '../../_util/shallowequal';
|
||||
import TableRow from './TableRow';
|
||||
import { remove } from './utils';
|
||||
import { initDefaultProps, getOptionProps, getSlot } from '../../_util/props-util';
|
||||
import { inject } from 'vue';
|
||||
|
||||
export const ExpandableTableProps = () => ({
|
||||
expandIconAsCell: PropTypes.looseBool,
|
||||
@ -21,7 +21,6 @@ export const ExpandableTableProps = () => ({
|
||||
// onExpand: PropTypes.func,
|
||||
// onExpandedRowsChange: PropTypes.func,
|
||||
columnManager: PropTypes.object.isRequired,
|
||||
store: PropTypes.object.isRequired,
|
||||
prefixCls: PropTypes.string.isRequired,
|
||||
data: PropTypes.array,
|
||||
getRowKey: PropTypes.func,
|
||||
@ -40,8 +39,8 @@ const ExpandableTable = {
|
||||
childrenColumnName: 'children',
|
||||
indentSize: 15,
|
||||
}),
|
||||
|
||||
data() {
|
||||
setup(props) {
|
||||
const store = inject('table-store', () => ({}));
|
||||
const {
|
||||
data,
|
||||
childrenColumnName,
|
||||
@ -49,7 +48,7 @@ const ExpandableTable = {
|
||||
expandedRowKeys,
|
||||
defaultExpandedRowKeys,
|
||||
getRowKey,
|
||||
} = this;
|
||||
} = props;
|
||||
|
||||
let finalExpandedRowKeys = [];
|
||||
let rows = [...data];
|
||||
@ -63,15 +62,11 @@ const ExpandableTable = {
|
||||
} else {
|
||||
finalExpandedRowKeys = expandedRowKeys || defaultExpandedRowKeys;
|
||||
}
|
||||
|
||||
// this.columnManager = props.columnManager
|
||||
// this.store = props.store
|
||||
|
||||
this.store.setState({
|
||||
Object.assign(store, {
|
||||
expandedRowsHeight: {},
|
||||
expandedRowKeys: finalExpandedRowKeys,
|
||||
});
|
||||
return {};
|
||||
return { store };
|
||||
},
|
||||
mounted() {
|
||||
this.handleUpdated();
|
||||
@ -82,9 +77,7 @@ const ExpandableTable = {
|
||||
watch: {
|
||||
expandedRowKeys(val) {
|
||||
this.$nextTick(() => {
|
||||
this.store.setState({
|
||||
expandedRowKeys: val,
|
||||
});
|
||||
this.store.expandedRowKeys = val;
|
||||
});
|
||||
},
|
||||
},
|
||||
@ -99,7 +92,7 @@ const ExpandableTable = {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
let { expandedRowKeys } = this.store.getState();
|
||||
let { expandedRowKeys } = this.store;
|
||||
|
||||
if (expanded) {
|
||||
// row was expaned
|
||||
@ -113,7 +106,7 @@ const ExpandableTable = {
|
||||
}
|
||||
|
||||
if (!this.expandedRowKeys) {
|
||||
this.store.setState({ expandedRowKeys });
|
||||
this.store.expandedRowKeys = expandedRowKeys;
|
||||
}
|
||||
// De-dup of repeat call
|
||||
if (!this.latestExpandedRows || !shallowEqual(this.latestExpandedRows, expandedRowKeys)) {
|
||||
@ -164,7 +157,7 @@ const ExpandableTable = {
|
||||
{
|
||||
key: 'extra-row',
|
||||
customRender: () => {
|
||||
const { expandedRowKeys } = this.store.getState();
|
||||
const { expandedRowKeys } = this.store;
|
||||
const expanded = expandedRowKeys.includes(parentKey);
|
||||
return {
|
||||
props: { colSpan: colCount },
|
||||
@ -245,4 +238,4 @@ const ExpandableTable = {
|
||||
},
|
||||
};
|
||||
|
||||
export default connect()(ExpandableTable);
|
||||
export default ExpandableTable;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/* eslint-disable camelcase */
|
||||
import { provide, markRaw, defineComponent, nextTick } from 'vue';
|
||||
import { provide, markRaw, defineComponent, nextTick, reactive } from 'vue';
|
||||
import shallowequal from '../../_util/shallowequal';
|
||||
import merge from 'lodash-es/merge';
|
||||
import classes from '../../_util/component-classes';
|
||||
@ -8,7 +8,6 @@ import PropTypes from '../../_util/vue-types';
|
||||
import { debounce, getDataAndAriaProps } from './utils';
|
||||
import warning from '../../_util/warning';
|
||||
import addEventListener from '../../vc-util/Dom/addEventListener';
|
||||
import { Provider, create } from '../../_util/store';
|
||||
import ColumnManager from './ColumnManager';
|
||||
import HeadTable from './HeadTable';
|
||||
import BodyTable from './BodyTable';
|
||||
@ -85,6 +84,19 @@ export default defineComponent({
|
||||
customHeaderRow: () => {},
|
||||
},
|
||||
),
|
||||
setup() {
|
||||
const store = reactive({
|
||||
currentHoverKey: null,
|
||||
fixedColumnsHeadRowsHeight: [],
|
||||
fixedColumnsBodyRowsHeight: {},
|
||||
expandedRowsHeight: {},
|
||||
expandedRowKeys: [],
|
||||
});
|
||||
provide('table-store', store);
|
||||
return {
|
||||
store,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
this.preData = [...this.data];
|
||||
return {
|
||||
@ -146,11 +158,6 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
// static childContextTypes = {
|
||||
// table: PropTypes.any,
|
||||
// components: PropTypes.any,
|
||||
// },
|
||||
created() {
|
||||
provide('table', this);
|
||||
// ['rowClick', 'rowDoubleclick', 'rowContextmenu', 'rowMouseenter', 'rowMouseleave'].forEach(
|
||||
@ -169,12 +176,6 @@ export default defineComponent({
|
||||
|
||||
// this.columnManager = new ColumnManager(this.columns, this.$slots.default)
|
||||
|
||||
this.store = create({
|
||||
currentHoverKey: null,
|
||||
fixedColumnsHeadRowsHeight: [],
|
||||
fixedColumnsBodyRowsHeight: {},
|
||||
});
|
||||
|
||||
this.setScrollPosition('left');
|
||||
|
||||
this.debouncedWindowResize = debounce(this.handleWindowResize, 150);
|
||||
@ -299,10 +300,12 @@ export default defineComponent({
|
||||
? this.ref_headTable.querySelectorAll('thead')
|
||||
: this.ref_bodyTable.querySelectorAll('thead');
|
||||
const bodyRows = this.ref_bodyTable.querySelectorAll(`.${prefixCls}-row`) || [];
|
||||
const fixedColumnsHeadRowsHeight = [].map.call(headRows, row =>
|
||||
row.getBoundingClientRect().height ? row.getBoundingClientRect().height - 0.5 : 'auto',
|
||||
);
|
||||
const state = this.store.getState();
|
||||
const fixedColumnsHeadRowsHeight = [].map.call(headRows, row => {
|
||||
return row.getBoundingClientRect().height
|
||||
? row.getBoundingClientRect().height - 0.5
|
||||
: 'auto';
|
||||
});
|
||||
const state = this.store;
|
||||
const fixedColumnsBodyRowsHeight = [].reduce.call(
|
||||
bodyRows,
|
||||
(acc, row) => {
|
||||
@ -322,10 +325,8 @@ export default defineComponent({
|
||||
) {
|
||||
return;
|
||||
}
|
||||
this.store.setState({
|
||||
fixedColumnsHeadRowsHeight,
|
||||
fixedColumnsBodyRowsHeight,
|
||||
});
|
||||
this.store.fixedColumnsHeadRowsHeight = fixedColumnsHeadRowsHeight;
|
||||
this.store.fixedColumnsBodyRowsHeight = fixedColumnsBodyRowsHeight;
|
||||
},
|
||||
|
||||
resetScrollX() {
|
||||
@ -343,10 +344,6 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
handleBodyScrollLeft(e) {
|
||||
// Fix https://github.com/ant-design/ant-design/issues/7635
|
||||
if (e.currentTarget !== e.target) {
|
||||
return;
|
||||
}
|
||||
const target = e.target;
|
||||
const { scroll = {} } = this;
|
||||
const { ref_headTable, ref_bodyTable } = this;
|
||||
@ -566,32 +563,30 @@ export default defineComponent({
|
||||
getRowKey,
|
||||
};
|
||||
return (
|
||||
<Provider store={this.store}>
|
||||
<ExpandableTable
|
||||
{...expandableTableProps}
|
||||
v-slots={{
|
||||
default: expander => {
|
||||
this.expander = expander;
|
||||
return (
|
||||
<div
|
||||
ref={this.saveTableNodeRef}
|
||||
class={tableClassName}
|
||||
style={props.style}
|
||||
id={props.id}
|
||||
{...dataAndAriaProps}
|
||||
>
|
||||
{this.renderTitle()}
|
||||
<div class={`${prefixCls}-content`}>
|
||||
{this.renderMainTable()}
|
||||
{hasLeftFixed && this.renderLeftFixedTable()}
|
||||
{hasRightFixed && this.renderRightFixedTable()}
|
||||
</div>
|
||||
<ExpandableTable
|
||||
{...expandableTableProps}
|
||||
v-slots={{
|
||||
default: expander => {
|
||||
this.expander = expander;
|
||||
return (
|
||||
<div
|
||||
ref={this.saveTableNodeRef}
|
||||
class={tableClassName}
|
||||
style={props.style}
|
||||
id={props.id}
|
||||
{...dataAndAriaProps}
|
||||
>
|
||||
{this.renderTitle()}
|
||||
<div class={`${prefixCls}-content`}>
|
||||
{this.renderMainTable()}
|
||||
{hasLeftFixed && this.renderLeftFixedTable()}
|
||||
{hasRightFixed && this.renderRightFixedTable()}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Provider>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import classNames from '../../_util/classNames';
|
||||
import PropTypes from '../../_util/vue-types';
|
||||
import { connect } from '../../_util/store';
|
||||
import { computed, inject } from 'vue';
|
||||
|
||||
const TableHeaderRow = {
|
||||
name: 'TableHeaderRow',
|
||||
@ -12,10 +12,31 @@ const TableHeaderRow = {
|
||||
rows: PropTypes.array,
|
||||
row: PropTypes.array,
|
||||
components: PropTypes.object,
|
||||
height: PropTypes.any,
|
||||
customHeaderRow: PropTypes.func,
|
||||
prefixCls: PropTypes.prefixCls,
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject('table-store', () => ({}));
|
||||
return {
|
||||
height: computed(() => {
|
||||
const { fixedColumnsHeadRowsHeight } = store;
|
||||
const { columns, rows, fixed } = props;
|
||||
const headerHeight = fixedColumnsHeadRowsHeight[0];
|
||||
|
||||
if (!fixed) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (headerHeight && columns) {
|
||||
if (headerHeight === 'auto') {
|
||||
return 'auto';
|
||||
}
|
||||
return `${headerHeight / rows.length}px`;
|
||||
}
|
||||
return null;
|
||||
}),
|
||||
};
|
||||
},
|
||||
render() {
|
||||
const { row, index, height, components, customHeaderRow, prefixCls } = this;
|
||||
const HeaderRow = components.header.row;
|
||||
@ -67,26 +88,4 @@ const TableHeaderRow = {
|
||||
},
|
||||
};
|
||||
|
||||
function getRowHeight(state, props) {
|
||||
const { fixedColumnsHeadRowsHeight } = state;
|
||||
const { columns, rows, fixed } = props;
|
||||
const headerHeight = fixedColumnsHeadRowsHeight[0];
|
||||
|
||||
if (!fixed) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (headerHeight && columns) {
|
||||
if (headerHeight === 'auto') {
|
||||
return 'auto';
|
||||
}
|
||||
return `${headerHeight / rows.length}px`;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export default connect((state, props) => {
|
||||
return {
|
||||
height: getRowHeight(state, props),
|
||||
};
|
||||
})(TableHeaderRow);
|
||||
export default TableHeaderRow;
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import classNames from '../../_util/classNames';
|
||||
import PropTypes, { withUndefined } from '../../_util/vue-types';
|
||||
import { connect } from '../../_util/store';
|
||||
import TableCell from './TableCell';
|
||||
import { initDefaultProps, findDOMNode } from '../../_util/props-util';
|
||||
import BaseMixin from '../../_util/BaseMixin';
|
||||
import warning from '../../_util/warning';
|
||||
import { computed, inject } from 'vue';
|
||||
function noop() {}
|
||||
const TableRow = {
|
||||
name: 'TableRow',
|
||||
@ -22,16 +22,12 @@ const TableRow = {
|
||||
prefixCls: PropTypes.string,
|
||||
// onHover: PropTypes.func,
|
||||
columns: PropTypes.array,
|
||||
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
index: PropTypes.number,
|
||||
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
||||
className: PropTypes.string,
|
||||
indent: PropTypes.number,
|
||||
indentSize: PropTypes.number,
|
||||
hasExpandIcon: PropTypes.func,
|
||||
hovered: PropTypes.looseBool.isRequired,
|
||||
visible: PropTypes.looseBool.isRequired,
|
||||
store: PropTypes.object.isRequired,
|
||||
fixed: withUndefined(PropTypes.oneOfType([PropTypes.string, PropTypes.looseBool])),
|
||||
renderExpandIcon: PropTypes.func,
|
||||
renderExpandIconCell: PropTypes.func,
|
||||
@ -54,8 +50,45 @@ const TableRow = {
|
||||
},
|
||||
),
|
||||
|
||||
setup(props) {
|
||||
const store = inject('table-store', () => ({}));
|
||||
const visible = computed(() => {
|
||||
const { expandedRowKeys } = store;
|
||||
const { ancestorKeys } = props;
|
||||
return !!(ancestorKeys.length === 0 || ancestorKeys.every(k => expandedRowKeys.includes(k)));
|
||||
});
|
||||
const height = computed(() => {
|
||||
const { expandedRowsHeight, fixedColumnsBodyRowsHeight } = store;
|
||||
const { fixed, rowKey } = props;
|
||||
|
||||
if (!fixed) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (expandedRowsHeight[rowKey]) {
|
||||
return expandedRowsHeight[rowKey];
|
||||
}
|
||||
|
||||
if (fixedColumnsBodyRowsHeight[rowKey]) {
|
||||
return fixedColumnsBodyRowsHeight[rowKey];
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
const hovered = computed(() => {
|
||||
const { currentHoverKey } = store;
|
||||
const { rowKey } = props;
|
||||
return currentHoverKey === rowKey;
|
||||
});
|
||||
return {
|
||||
store,
|
||||
visible,
|
||||
hovered,
|
||||
height,
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
// this.shouldRender = this.visible
|
||||
this.rowRef = null;
|
||||
return {
|
||||
shouldRender: this.visible,
|
||||
@ -119,25 +152,23 @@ const TableRow = {
|
||||
|
||||
setExpandedRowHeight() {
|
||||
const { store, rowKey } = this;
|
||||
let { expandedRowsHeight } = store.getState();
|
||||
let { expandedRowsHeight } = store;
|
||||
const height = this.rowRef.getBoundingClientRect().height;
|
||||
expandedRowsHeight = {
|
||||
...expandedRowsHeight,
|
||||
[rowKey]: height,
|
||||
};
|
||||
store.setState({ expandedRowsHeight });
|
||||
store.expandedRowsHeight = expandedRowsHeight;
|
||||
},
|
||||
|
||||
setRowHeight() {
|
||||
const { store, rowKey } = this;
|
||||
const { fixedColumnsBodyRowsHeight } = store.getState();
|
||||
const { fixedColumnsBodyRowsHeight } = store;
|
||||
const height = this.rowRef.getBoundingClientRect().height;
|
||||
store.setState({
|
||||
fixedColumnsBodyRowsHeight: {
|
||||
...fixedColumnsBodyRowsHeight,
|
||||
[rowKey]: height,
|
||||
},
|
||||
});
|
||||
store.fixedColumnsBodyRowsHeight = {
|
||||
...fixedColumnsBodyRowsHeight,
|
||||
[rowKey]: height,
|
||||
};
|
||||
},
|
||||
|
||||
getStyle() {
|
||||
@ -269,33 +300,4 @@ const TableRow = {
|
||||
},
|
||||
};
|
||||
|
||||
function getRowHeight(state, props) {
|
||||
const { expandedRowsHeight, fixedColumnsBodyRowsHeight } = state;
|
||||
const { fixed, rowKey } = props;
|
||||
|
||||
if (!fixed) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (expandedRowsHeight[rowKey]) {
|
||||
return expandedRowsHeight[rowKey];
|
||||
}
|
||||
|
||||
if (fixedColumnsBodyRowsHeight[rowKey]) {
|
||||
return fixedColumnsBodyRowsHeight[rowKey];
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export default connect((state, props) => {
|
||||
const { currentHoverKey, expandedRowKeys } = state;
|
||||
const { rowKey, ancestorKeys } = props;
|
||||
const visible = ancestorKeys.length === 0 || ancestorKeys.every(k => expandedRowKeys.includes(k));
|
||||
|
||||
return {
|
||||
visible,
|
||||
hovered: currentHoverKey === rowKey,
|
||||
height: getRowHeight(state, props),
|
||||
};
|
||||
})(TableRow);
|
||||
export default TableRow;
|
||||
|
||||
@ -157,7 +157,7 @@
|
||||
"pretty-quick": "^2.0.0",
|
||||
"prismjs": "^1.20.0",
|
||||
"querystring": "^0.2.0",
|
||||
"raw-loader": "^4.0.1",
|
||||
"raw-loader": "^4.0.2",
|
||||
"reqwest": "^2.0.5",
|
||||
"rimraf": "^3.0.0",
|
||||
"rucksack-css": "^1.0.2",
|
||||
@ -187,6 +187,7 @@
|
||||
"vue-infinite-scroll": "^2.0.2",
|
||||
"vue-jest": "^5.0.0-alpha.3",
|
||||
"vue-loader": "^16.1.1",
|
||||
"vue-request": "^1.0.2",
|
||||
"vue-router": "^4.0.0",
|
||||
"vue-server-renderer": "^2.6.11",
|
||||
"vue-style-loader": "^4.1.2",
|
||||
|
||||
2
v2-doc
2
v2-doc
@ -1 +1 @@
|
||||
Subproject commit 93f8ec64f669520f7bdd060206422719631220b3
|
||||
Subproject commit 0468ad3010f71ad6b267c66c4f5e28c89c19d83e
|
||||
@ -51,16 +51,15 @@ module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(vue|md)$/,
|
||||
test: /\.md$/,
|
||||
loader: 'raw-loader',
|
||||
},
|
||||
{
|
||||
test: /\.(vue)$/,
|
||||
loader: 'vue-loader',
|
||||
exclude: /\.(en-US.md|zh-CN.md)$/,
|
||||
},
|
||||
{
|
||||
test: /\.(en-US.md|zh-CN.md)$/,
|
||||
use: [{ loader: 'vue-loader' }, { loader: './loader.js' }],
|
||||
},
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
test: /\.(ts|tsx)?$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
@ -68,6 +67,11 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
loader: 'ts-loader',
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
appendTsSuffixTo: ['\\.vue$'],
|
||||
happyPackMode: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
exclude: /node_modules/,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user