|
|
@ -76,6 +76,7 @@ export default function useSelection<RecordType>( |
|
|
|
type: selectionType, |
|
|
|
selections, |
|
|
|
fixed, |
|
|
|
renderCell: customizeRenderCell, |
|
|
|
} = rowSelection || {}; |
|
|
|
|
|
|
|
const { locale = defaultLocale } = React.useContext(ConfigContext); |
|
|
@ -305,111 +306,132 @@ export default function useSelection<RecordType>( |
|
|
|
} |
|
|
|
|
|
|
|
// Body Cell
|
|
|
|
let renderCell: (_: RecordType, record: RecordType, index: number) => React.ReactNode; |
|
|
|
let renderCell: ( |
|
|
|
_: RecordType, |
|
|
|
record: RecordType, |
|
|
|
index: number, |
|
|
|
) => { node: React.ReactNode; checked: boolean }; |
|
|
|
if (selectionType === 'radio') { |
|
|
|
renderCell = (_, record, index) => { |
|
|
|
const key = getRowKey(record, index); |
|
|
|
|
|
|
|
return ( |
|
|
|
<Radio |
|
|
|
{...checkboxPropsMap.get(key)} |
|
|
|
checked={keySet.has(key)} |
|
|
|
onChange={event => { |
|
|
|
if (!keySet.has(key)) { |
|
|
|
triggerSingleSelection(key, true, [key], event.nativeEvent); |
|
|
|
} |
|
|
|
}} |
|
|
|
/> |
|
|
|
); |
|
|
|
const checked = keySet.has(key); |
|
|
|
|
|
|
|
return { |
|
|
|
node: ( |
|
|
|
<Radio |
|
|
|
{...checkboxPropsMap.get(key)} |
|
|
|
checked={checked} |
|
|
|
onChange={event => { |
|
|
|
if (!keySet.has(key)) { |
|
|
|
triggerSingleSelection(key, true, [key], event.nativeEvent); |
|
|
|
} |
|
|
|
}} |
|
|
|
/> |
|
|
|
), |
|
|
|
checked, |
|
|
|
}; |
|
|
|
}; |
|
|
|
} else { |
|
|
|
renderCell = (_, record, index) => { |
|
|
|
const key = getRowKey(record, index); |
|
|
|
const hasKey = keySet.has(key); |
|
|
|
const checked = keySet.has(key); |
|
|
|
|
|
|
|
// Record checked
|
|
|
|
return ( |
|
|
|
<Checkbox |
|
|
|
{...checkboxPropsMap.get(key)} |
|
|
|
checked={hasKey} |
|
|
|
onChange={({ nativeEvent }) => { |
|
|
|
const { shiftKey } = nativeEvent; |
|
|
|
|
|
|
|
let startIndex: number = -1; |
|
|
|
let endIndex: number = -1; |
|
|
|
|
|
|
|
// Get range of this
|
|
|
|
if (shiftKey) { |
|
|
|
const pointKeys = new Set([lastSelectedKey, key]); |
|
|
|
|
|
|
|
recordKeys.some((recordKey, recordIndex) => { |
|
|
|
if (pointKeys.has(recordKey)) { |
|
|
|
if (startIndex === -1) { |
|
|
|
startIndex = recordIndex; |
|
|
|
} else { |
|
|
|
endIndex = recordIndex; |
|
|
|
return true; |
|
|
|
return { |
|
|
|
node: ( |
|
|
|
<Checkbox |
|
|
|
{...checkboxPropsMap.get(key)} |
|
|
|
checked={checked} |
|
|
|
onChange={({ nativeEvent }) => { |
|
|
|
const { shiftKey } = nativeEvent; |
|
|
|
|
|
|
|
let startIndex: number = -1; |
|
|
|
let endIndex: number = -1; |
|
|
|
|
|
|
|
// Get range of this
|
|
|
|
if (shiftKey) { |
|
|
|
const pointKeys = new Set([lastSelectedKey, key]); |
|
|
|
|
|
|
|
recordKeys.some((recordKey, recordIndex) => { |
|
|
|
if (pointKeys.has(recordKey)) { |
|
|
|
if (startIndex === -1) { |
|
|
|
startIndex = recordIndex; |
|
|
|
} else { |
|
|
|
endIndex = recordIndex; |
|
|
|
return true; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return false; |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
if (endIndex !== -1 && startIndex !== endIndex) { |
|
|
|
// Batch update selections
|
|
|
|
const rangeKeys = recordKeys.slice(startIndex, endIndex + 1); |
|
|
|
const changedKeys: Key[] = []; |
|
|
|
|
|
|
|
if (hasKey) { |
|
|
|
rangeKeys.forEach(recordKey => { |
|
|
|
if (keySet.has(recordKey)) { |
|
|
|
changedKeys.push(recordKey); |
|
|
|
keySet.delete(recordKey); |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
rangeKeys.forEach(recordKey => { |
|
|
|
if (!keySet.has(recordKey)) { |
|
|
|
changedKeys.push(recordKey); |
|
|
|
keySet.add(recordKey); |
|
|
|
} |
|
|
|
return false; |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
const keys = Array.from(keySet); |
|
|
|
setSelectedKeys(keys); |
|
|
|
if (onSelectMultiple) { |
|
|
|
onSelectMultiple( |
|
|
|
!hasKey, |
|
|
|
keys.map(recordKey => getRecordByKey(recordKey)), |
|
|
|
changedKeys.map(recordKey => getRecordByKey(recordKey)), |
|
|
|
); |
|
|
|
} |
|
|
|
} else { |
|
|
|
// Single record selected
|
|
|
|
if (hasKey) { |
|
|
|
keySet.delete(key); |
|
|
|
if (endIndex !== -1 && startIndex !== endIndex) { |
|
|
|
// Batch update selections
|
|
|
|
const rangeKeys = recordKeys.slice(startIndex, endIndex + 1); |
|
|
|
const changedKeys: Key[] = []; |
|
|
|
|
|
|
|
if (checked) { |
|
|
|
rangeKeys.forEach(recordKey => { |
|
|
|
if (keySet.has(recordKey)) { |
|
|
|
changedKeys.push(recordKey); |
|
|
|
keySet.delete(recordKey); |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
rangeKeys.forEach(recordKey => { |
|
|
|
if (!keySet.has(recordKey)) { |
|
|
|
changedKeys.push(recordKey); |
|
|
|
keySet.add(recordKey); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
const keys = Array.from(keySet); |
|
|
|
setSelectedKeys(keys); |
|
|
|
if (onSelectMultiple) { |
|
|
|
onSelectMultiple( |
|
|
|
!checked, |
|
|
|
keys.map(recordKey => getRecordByKey(recordKey)), |
|
|
|
changedKeys.map(recordKey => getRecordByKey(recordKey)), |
|
|
|
); |
|
|
|
} |
|
|
|
} else { |
|
|
|
keySet.add(key); |
|
|
|
} |
|
|
|
// Single record selected
|
|
|
|
if (checked) { |
|
|
|
keySet.delete(key); |
|
|
|
} else { |
|
|
|
keySet.add(key); |
|
|
|
} |
|
|
|
|
|
|
|
triggerSingleSelection(key, !hasKey, Array.from(keySet), nativeEvent); |
|
|
|
} |
|
|
|
triggerSingleSelection(key, !checked, Array.from(keySet), nativeEvent); |
|
|
|
} |
|
|
|
|
|
|
|
setLastSelectedKey(key); |
|
|
|
}} |
|
|
|
/> |
|
|
|
); |
|
|
|
setLastSelectedKey(key); |
|
|
|
}} |
|
|
|
/> |
|
|
|
), |
|
|
|
checked, |
|
|
|
}; |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
const renderSelectionCell = (_: any, record: RecordType, index: number) => { |
|
|
|
const { node, checked } = renderCell(_, record, index); |
|
|
|
|
|
|
|
if (customizeRenderCell) { |
|
|
|
return customizeRenderCell(checked, record, index, node); |
|
|
|
} |
|
|
|
|
|
|
|
return node; |
|
|
|
}; |
|
|
|
|
|
|
|
// Columns
|
|
|
|
const selectionColumn = { |
|
|
|
width: selectionColWidth, |
|
|
|
className: `${prefixCls}-selection-column`, |
|
|
|
title: rowSelection.columnTitle || title, |
|
|
|
render: renderCell, |
|
|
|
render: renderSelectionCell, |
|
|
|
}; |
|
|
|
|
|
|
|
if (expandType === 'row' && columns.length) { |
|
|
|