@join-x5/react-data-grid 1.1.4-nightly → 1.2.0

package/dist/TableRow/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../src/TableRow/index.tsx"],"sourcesContent":["'use client';\n\nimport styled from '@emotion/styled';\n\nimport {forwardRef} from '@join-x5/react-theme';\n\nimport {getDataGridTableCell} from 'TableCell';\n\nimport type {FRC} from '@join-x5/react-theme';\nimport type {Row} from '@tanstack/react-table';\nimport type {GetDataGridTableRow} from '../types';\nimport type {TableRowProps} from './types';\n\nconst Container = styled.tr`\n  :hover [data-cell] {\n    :not([data-focused], [data-active], [data-disabled]) [data-edit-icon] {\n      visibility: visible;\n    }\n\n    :not([data-focused], [data-active]):not(:focus) {\n      ${props => ({\n        '--background-color': props.theme.colors.grey[10],\n        '--border-color': props.theme.colors.grey[20],\n      })}\n    }\n  }\n`;\n\nexport const TableRow: FRC<HTMLTableRowElement, TableRowProps> = forwardRef((props, ref) => {\n  return <Container ref={ref} {...props} />;\n});\n\ntype DataGridTableRowProps = {row: Row<unknown>} & TableRowProps;\n\nconst DataGridTableRow: React.FC<DataGridTableRowProps> = props => {\n  const {row, ...rest} = props;\n\n  const content = row.getVisibleCells().map(getDataGridTableCell);\n\n  return <TableRow {...rest}>{content}</TableRow>;\n};\n\nexport const getDataGridTableRow: GetDataGridTableRow = row => {\n  return <DataGridTableRow key={row.id} row={row} />;\n};\n"],"names":["row","rest"],"mappings":";;;;;AAaA;AAAe;AAAA;AAAA;AAAA;AAAA;AAOG;AACsC;AAElD;AAYE;AAAA;AAACA;AAAQC;AAIf;AACF;;;;;"}
+{"version":3,"file":"index.es.js","sources":["../../src/TableRow/index.tsx"],"sourcesContent":["'use client';\n\nimport styled from '@emotion/styled';\n\nimport {forwardRef} from '@join-x5/react-theme';\n\nimport {getDataGridTableCell} from 'TableCell';\n\nimport type {FRC} from '@join-x5/react-theme';\nimport type {Row} from '@tanstack/react-table';\nimport type {GetDataGridTableRow} from '../types';\nimport type {TableRowProps} from './types';\n\nconst Container = styled.tr`\n  :hover [data-cell] {\n    :not([data-focused], [data-active], [data-disabled]) [data-edit-icon] {\n      visibility: visible;\n    }\n\n    :not([data-focused], [data-active]):not(:focus) {\n      ${props => ({\n        '--background-color': props.theme.colors.grey[10],\n        '--border-color': props.theme.colors.grey[20],\n      })}\n    }\n  }\n`;\n\nexport const TableRow: FRC<HTMLTableRowElement, TableRowProps> = forwardRef((props, ref) => {\n  return <Container ref={ref} {...props} />;\n});\n\ntype DataGridTableRowProps = {row: Row<unknown>} & TableRowProps;\n\nconst DataGridTableRow: React.FC<DataGridTableRowProps> = props => {\n  const {row, ...rest} = props;\n\n  const content = row.getVisibleCells().map(getDataGridTableCell);\n\n  return <TableRow {...rest}>{content}</TableRow>;\n};\n\nexport const getDataGridTableRow: GetDataGridTableRow = row => {\n  return <DataGridTableRow key={row.id} row={row} />;\n};\n"],"names":["row","rest"],"mappings":";;;;;AAaA;AAAe;AAAA;AAAA;AAAA;AAAA;AAOG;AACsC;AAElD;AAYJ;AAAM;AAACA;AAAQC;AAIf;AACF;;;;;"}

package/dist/hook.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"hook.es.js","sources":["../src/hook.ts"],"sourcesContent":["'use client';\n\nimport {useMemo, useState} from 'react';\n\nimport {useUpdateEffect} from '@join-x5/react-theme';\nimport {ColumnArea} from '@join-x5/react-data-grid-settings';\n\nimport type {ColumnOrderState, ColumnPinningState, TableState, VisibilityState} from '@tanstack/react-table';\nimport type {ColumnItem} from '@join-x5/react-data-grid-settings';\nimport type {DataGridProps} from 'types';\n\nconst convertVisibility = (settings?: ColumnItem[]): VisibilityState => {\n  if (!settings || !settings.length) {\n    return {};\n  }\n\n  return settings.reduce((acc, item) => {\n    acc[item.id] = item.isVisible;\n    return acc;\n  }, {} as VisibilityState);\n};\n\nconst convertOrder = (settings?: ColumnItem[]): ColumnOrderState => {\n  if (!settings || !settings.length) {\n    return [];\n  }\n\n  return settings.sort((a, b) => a.sort - b.sort).map(item => String(item.id));\n};\n\nconst convertPinning = (settings?: ColumnItem[]): ColumnPinningState => {\n  if (!settings || !settings.length) {\n    return {};\n  }\n\n  return settings.reduce((acc, item) => {\n    if (item.area === ColumnArea.FixedLeft) {\n      acc.left ??= [];\n      acc.left?.push(String(item.id));\n    } else if (item.area === ColumnArea.FixedRight) {\n      acc.right ??= [];\n      acc.right?.push(String(item.id));\n    }\n\n    return acc;\n  }, {} as ColumnPinningState);\n};\n\nexport const useDataGridColumnSettings = (\n  settings?: DataGridProps['columnSettings'],\n  tableProps?: DataGridProps['tableProps']\n) => {\n  const [columnVisibility, onColumnVisibilityChange] = useState<VisibilityState>(convertVisibility(settings));\n  const [columnOrder, onColumnOrderChange] = useState<ColumnOrderState>(convertOrder(settings));\n  const [columnPinning, onColumnPinningChange] = useState<ColumnPinningState>(convertPinning(settings));\n\n  const externalState = tableProps?.state;\n\n  const state = useMemo((): Partial<TableState> => {\n    return {columnVisibility, columnOrder, columnPinning, ...externalState};\n  }, [externalState, columnVisibility, columnOrder, columnPinning]);\n\n  useUpdateEffect(() => {\n    const newVisibility = convertVisibility(settings);\n    const newOrder = convertOrder(settings);\n    const newPinning = convertPinning(settings);\n\n    onColumnVisibilityChange(oldState =>\n      JSON.stringify(oldState) === JSON.stringify(newVisibility) ? oldState : newVisibility\n    );\n\n    onColumnOrderChange(oldState => (JSON.stringify(oldState) === JSON.stringify(newOrder) ? oldState : newOrder));\n\n    onColumnPinningChange(oldState =>\n      JSON.stringify(oldState) === JSON.stringify(newPinning) ? oldState : newPinning\n    );\n  }, [settings]);\n\n  return state;\n};\n"],"names":["item","columnVisibility","columnOrder","columnPinning","externalState","useUpdateEffect","newVisibility","oldState"],"mappings":";;;;AAWA;;AAyBQA;AASN;AAOA;AAOS;AAACC;AAAkBC;AAAaC;AAAkBC;AAG3DC;AACQC;AAImBC;AAQzB;AAIJ;;;;"}
+{"version":3,"file":"hook.es.js","sources":["../src/hook.ts"],"sourcesContent":["'use client';\n\nimport {useMemo, useState} from 'react';\n\nimport {useUpdateEffect} from '@join-x5/react-theme';\nimport {ColumnArea} from '@join-x5/react-data-grid-settings';\n\nimport type {ColumnOrderState, ColumnPinningState, TableState, VisibilityState} from '@tanstack/react-table';\nimport type {ColumnItem} from '@join-x5/react-data-grid-settings';\nimport type {DataGridProps} from 'types';\n\nconst convertVisibility = (settings?: ColumnItem[]): VisibilityState => {\n  if (!settings || !settings.length) {\n    return {};\n  }\n\n  return settings.reduce((acc, item) => {\n    acc[item.id] = item.isVisible;\n    return acc;\n  }, {} as VisibilityState);\n};\n\nconst convertOrder = (settings?: ColumnItem[]): ColumnOrderState => {\n  if (!settings || !settings.length) {\n    return [];\n  }\n\n  return settings.sort((a, b) => a.sort - b.sort).map(item => String(item.id));\n};\n\nconst convertPinning = (settings?: ColumnItem[]): ColumnPinningState => {\n  if (!settings || !settings.length) {\n    return {};\n  }\n\n  return settings.reduce((acc, item) => {\n    if (item.area === ColumnArea.FixedLeft) {\n      acc.left ??= [];\n      acc.left?.push(String(item.id));\n    } else if (item.area === ColumnArea.FixedRight) {\n      acc.right ??= [];\n      acc.right?.push(String(item.id));\n    }\n\n    return acc;\n  }, {} as ColumnPinningState);\n};\n\nexport const useDataGridColumnSettings = (\n  settings?: DataGridProps['columnSettings'],\n  tableProps?: DataGridProps['tableProps']\n) => {\n  const [columnVisibility, onColumnVisibilityChange] = useState<VisibilityState>(convertVisibility(settings));\n  const [columnOrder, onColumnOrderChange] = useState<ColumnOrderState>(convertOrder(settings));\n  const [columnPinning, onColumnPinningChange] = useState<ColumnPinningState>(convertPinning(settings));\n\n  const externalState = tableProps?.state;\n\n  const state = useMemo((): Partial<TableState> => {\n    return {columnVisibility, columnOrder, columnPinning, ...externalState};\n  }, [externalState, columnVisibility, columnOrder, columnPinning]);\n\n  useUpdateEffect(() => {\n    const newVisibility = convertVisibility(settings);\n    const newOrder = convertOrder(settings);\n    const newPinning = convertPinning(settings);\n\n    onColumnVisibilityChange(oldState =>\n      JSON.stringify(oldState) === JSON.stringify(newVisibility) ? oldState : newVisibility\n    );\n\n    onColumnOrderChange(oldState => (JSON.stringify(oldState) === JSON.stringify(newOrder) ? oldState : newOrder));\n\n    onColumnPinningChange(oldState =>\n      JSON.stringify(oldState) === JSON.stringify(newPinning) ? oldState : newPinning\n    );\n  }, [settings]);\n\n  return state;\n};\n"],"names":["columnVisibility","columnOrder","columnPinning","externalState","useUpdateEffect","onColumnVisibilityChange"],"mappings":";;;;AAWA;;AAyBI;AASF;AAOA;AAOS;AAACA;AAAkBC;AAAaC;AAAkBC;AAG3DC;AACE;AAIAC;AAQA;AAIJ;;;;"}