Skip to content

Rwg add row column header #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Rwg add row column header #4

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4c607d5
RWG: Add column header for row headers
May 4, 2020
333b8d4
RWG: Conditionally render rowColumnHeader
May 4, 2020
c00884f
RWG: Update test snapshot
May 4, 2020
aa1f7ce
RWG: Clean up formatting
May 4, 2020
ba5c633
RWG: Remove formatting from ide formatter
May 4, 2020
fd16da6
RWG: Update test description
May 4, 2020
875d7b1
RWG: Upgrade version
May 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .size-snapshot.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,10 @@
"bundled": 5241,
"minified": 5198,
"gzipped": 2290
},
"dist\\react-window-grid.min.js": {
"bundled": 5330,
"minified": 5287,
"gzipped": 2304
}
}
69 changes: 41 additions & 28 deletions src/ReactWindowGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import scrollbarSize from 'dom-helpers/scrollbarSize'

const absolute = 'absolute'

const getText = value => String(value === undefined ? '' : value)
const getText = (value) => String(value === undefined ? '' : value)

const renderColumnHeader = params => {
const renderColumnHeader = (params) => {
const {
index,
style,
data: {columns, render}
data: {columns, render},
} = params
return render ? (
render({columnIndex: index, style})
Expand All @@ -20,28 +20,28 @@ const renderColumnHeader = params => {
)
}

const renderRowHeader = params => {
const renderRowHeader = (params) => {
const {
index,
style,
data: {render}
data: {render},
} = params
return render ? (
render({
rowIndex: index,
style
style,
})
) : (
<div style={style}>{index + 1}</div>
)
}

const renderCell = params => {
const renderCell = (params) => {
let {
columnIndex,
rowIndex,
style,
data: {recordset, footerIndex, width, columns, Footer, render}
data: {recordset, footerIndex, width, columns, Footer, render},
} = params
if (footerIndex === rowIndex) {
if (columnIndex === 0) {
Expand All @@ -58,7 +58,7 @@ const renderCell = params => {
return render({
rowIndex,
columnIndex,
style
style,
})
} else {
const record = recordset[rowIndex]
Expand All @@ -74,7 +74,7 @@ const calcColumnSize = ({
lineHeight,
columnHorizontalPadding,
columnVerticalPadding,
textContext
textContext,
}) => {
let columnHeight = column.height
let columnWidth = column.width
Expand All @@ -93,7 +93,7 @@ const calcColumnSize = ({
if (typeof value !== 'string') {
return [
lineHeight + columnVerticalPadding,
column.width || (columnWidth || valueWidth) + columnHorizontalPadding
column.width || (columnWidth || valueWidth) + columnHorizontalPadding,
]
}
if (!columnWidth) {
Expand All @@ -104,24 +104,24 @@ const calcColumnSize = ({
if (columnWidth >= valueWidth + columnVerticalPadding) {
return [
lineHeight + columnVerticalPadding,
(column.width || valueWidth) + columnHorizontalPadding
(column.width || valueWidth) + columnHorizontalPadding,
]
}
const lines = Math.ceil(valueWidth / columnWidth)
columnHeight = lines * lineHeight
if (column.maxHeight && columnHeight > column.maxHeight) {
return [
column.maxHeight,
(column.width || columnWidth) + columnHorizontalPadding
(column.width || columnWidth) + columnHorizontalPadding,
]
}
return [
columnHeight + columnVerticalPadding,
(column.width || columnWidth) + columnHorizontalPadding
(column.width || columnWidth) + columnHorizontalPadding,
]
}

const ReactWindowGrid = props => {
const ReactWindowGrid = (props) => {
// console.log('ReactWindowGrid', props)
let {
height,
Expand All @@ -145,6 +145,7 @@ const ReactWindowGrid = props => {
columnHorizontalPadding,
columnVerticalPadding,
verticalPadding,
rowColumnHeader,
...rest
} = props

Expand Down Expand Up @@ -173,7 +174,7 @@ const ReactWindowGrid = props => {
const rowHeights = []
const columnWidths = []
let totalHeight = 0
const calcColumnsSize = record => {
const calcColumnsSize = (record) => {
let recordRowHeight = 0
let i = 0
for (const column of columns) {
Expand All @@ -184,7 +185,7 @@ const ReactWindowGrid = props => {
lineHeight,
columnHorizontalPadding,
columnVerticalPadding,
textContext
textContext,
})
if (columnHeight > recordRowHeight) {
recordRowHeight = columnHeight
Expand All @@ -209,10 +210,10 @@ const ReactWindowGrid = props => {
lineHeight,
columnHorizontalPadding,
columnVerticalPadding,
textContext
textContext,
])

const getRowHeight = i => rowHeights[i] || 0
const getRowHeight = (i) => rowHeights[i] || 0
const mayBeRef = useRef(null)
if (!gridRef) {
gridRef = mayBeRef
Expand All @@ -221,7 +222,7 @@ const ReactWindowGrid = props => {
const headerRef = useRef(null)
const rowHeaderRef = useRef(null)

const onScroll = params => {
const onScroll = (params) => {
const {scrollLeft, scrollTop} = params
headerRef.current.scrollTo(scrollLeft)
if (rowHeaderRef.current) {
Expand Down Expand Up @@ -273,14 +274,25 @@ const ReactWindowGrid = props => {
headerRef.current.resetAfterIndex(0)
gridRef.current.resetAfterColumnIndex(0)
}, [columns, rowHeights, columnWidths, gridRef])
const getColumnWidth = i => columnWidths[i] || 0
const getColumnWidth = (i) => columnWidths[i] || 0
const headerMarginRight = heightIsNotEnough ? scrollbarSize() : 0
const columnHeaderMarginBottom = widthIsNotEnough ? scrollbarSize() : 0
return (
<div
{...rest}
style={{...(style || {}), width, position: 'relative', height}}
>
<div
style={{
position: absolute,
top: 0,
left: 0,
height: columnHeaderHeight,
width: rowHeaderWidth,
}}
>
{rowColumnHeader}
</div>
<div style={{position: absolute, top: 0, left: rowHeaderWidth}}>
<VariableSizeList
ref={headerRef}
Expand All @@ -293,7 +305,7 @@ const ReactWindowGrid = props => {
itemData={{columns, render: columnHeaderRenderer}}
style={{
overflow: 'hidden',
...((columnHeaderProps && columnHeaderProps.style) || {})
...((columnHeaderProps && columnHeaderProps.style) || {}),
}}
>
{renderColumnHeader}
Expand All @@ -311,7 +323,7 @@ const ReactWindowGrid = props => {
itemData={{render: rowHeaderRenderer}}
style={{
overflow: 'hidden',
...((rowHeaderProps && rowHeaderProps.style) || {})
...((rowHeaderProps && rowHeaderProps.style) || {}),
}}
>
{renderRowHeader}
Expand All @@ -322,7 +334,7 @@ const ReactWindowGrid = props => {
style={{
position: absolute,
left: rowHeaderWidth,
top: columnHeaderHeight
top: columnHeaderHeight,
}}
>
<VariableSizeGrid
Expand All @@ -341,7 +353,7 @@ const ReactWindowGrid = props => {
width: width - headerMarginRight,
columns,
Footer,
render: cellRenderer
render: cellRenderer,
}}
{...bodyProps}
>
Expand All @@ -362,7 +374,7 @@ ReactWindowGrid.propTypes = {
label: PropTypes.string,
height: PropTypes.number,
maxHeight: PropTypes.number,
width: PropTypes.number
width: PropTypes.number,
}).isRequired
).isRequired,
recordset: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
Expand All @@ -382,13 +394,14 @@ ReactWindowGrid.propTypes = {
gridRef: PropTypes.object,
style: PropTypes.object,
className: PropTypes.string,
scrollToTopOnNewRecordset: PropTypes.bool
scrollToTopOnNewRecordset: PropTypes.bool,
rowColumnHeader: PropTypes.object,
}

ReactWindowGrid.defaultProps = {
columnHorizontalPadding: 0,
columnVerticalPadding: 0,
verticalPadding: 0
verticalPadding: 0,
}

export default ReactWindowGrid
Loading