@economic/taco 2.15.0 → 2.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Drawer/Drawer.d.ts +5 -1
- package/dist/components/Provider/Localization.d.ts +19 -0
- package/dist/components/SearchInput2/SearchInput2.d.ts +1 -0
- package/dist/components/Table3/components/alert/ErrorAlert.d.ts +10 -0
- package/dist/components/Table3/components/columns/cell/DisplayCell.d.ts +5 -2
- package/dist/components/Table3/components/columns/cell/EditingCell.d.ts +3 -0
- package/dist/components/Table3/components/columns/cell/Highlight.d.ts +2 -0
- package/dist/components/Table3/components/columns/internal/EditingActions.d.ts +1 -1
- package/dist/components/Table3/components/rows/Row.d.ts +2 -0
- package/dist/components/Table3/components/rows/RowContext.d.ts +1 -0
- package/dist/components/Table3/hooks/features/useEditing.d.ts +12 -11
- package/dist/components/Table3/hooks/features/usePauseShortcuts.d.ts +5 -0
- package/dist/components/Table3/hooks/features/useSearch.d.ts +2 -0
- package/dist/components/Table3/hooks/features/useValidation.d.ts +13 -0
- package/dist/components/Table3/hooks/useTable.d.ts +4 -0
- package/dist/components/Table3/types.d.ts +26 -1
- package/dist/components/Table3/util/editing.d.ts +6 -0
- package/dist/esm/index.css +108 -33
- package/dist/esm/packages/taco/src/components/Drawer/Drawer.js +7 -2
- package/dist/esm/packages/taco/src/components/Drawer/Drawer.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Provider/Localization.js +19 -0
- package/dist/esm/packages/taco/src/components/Provider/Localization.js.map +1 -1
- package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js +4 -0
- package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/Table3.js +7 -1
- package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/alert/ErrorAlert.js +154 -0
- package/dist/esm/packages/taco/src/components/Table3/components/alert/ErrorAlert.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Cell.js +51 -6
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Cell.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js +7 -55
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingCell.js +69 -37
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingCell.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js +17 -17
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Highlight.js +41 -0
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Highlight.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js +21 -12
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Footer.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Footer.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/EditingActions.js +57 -17
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/EditingActions.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js +39 -31
- package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/rows/RowContext.js +2 -1
- package/dist/esm/packages/taco/src/components/Table3/components/rows/RowContext.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/Filters.js +8 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/Filters.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js +48 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useEditing.js +185 -101
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useEditing.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/usePauseShortcuts.js +12 -0
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/usePauseShortcuts.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useSearch.js +4 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useSearch.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useValidation.js +178 -0
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useValidation.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js +8 -2
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/strategies/virtualised.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/types.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/util/editing.js +21 -1
- package/dist/esm/packages/taco/src/components/Table3/util/editing.js.map +1 -1
- package/dist/index.css +108 -33
- package/dist/taco.cjs.development.js +2605 -1970
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
- package/types.json +10973 -7880
package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingCell.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"EditingCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport _ from 'lodash';\nimport { TableMeta, CellContext, ColumnMeta, Cell as RTCell, Table as RTTable } from '@tanstack/react-table';\nimport { Indicator, IndicatorReason } from './Indicator';\nimport { columnFilterFn, globalFilterFn } from '../../../util/filtering';\nimport { Table3FilterValue } from '../../../types';\nimport { hasChanged, willRowMoveAfterSorting } from '../../../util/editing';\nimport { getCurrentRowCellElement } from '../../../util/columns';\nimport { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions';\nimport { EditingControl } from './EditingControl';\nimport { useRowContext } from '../../rows/RowContext';\n\nexport type EditingCellProps<TType = unknown> = CellContext<TType, unknown> & {\n children?: string | JSX.Element;\n};\n\nexport function EditingCell<TType = unknown>(props: EditingCellProps<TType>) {\n const { isHovered } = useRowContext();\n // Need to explicitly pass tableMeta, because just passing the table object will not trigger editing change since table object is not mutatable.\n const tableMeta = props.table.options.meta as TableMeta<TType>;\n return <MemoedEditingCell<TType> {...props} isHovered={isHovered} tableMeta={tableMeta} />;\n}\n\n// Memoization\nexport type MemoedEditingCellProps<TType = unknown> = EditingCellProps<TType> & {\n isHovered: boolean;\n tableMeta: TableMeta<TType>;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n const { cell, column, index, getValue, table, tableRef, row, isHovered, tableMeta } = props;\n const columnMeta = column.columnDef.meta as ColumnMeta<TType, unknown>;\n\n const cellRef = React.useRef<HTMLDivElement>(null);\n const controlRef = React.useRef<HTMLElement>(null);\n\n const handleChange = (value: unknown) => tableMeta.editing.setCellValue(cell, value);\n const value = tableMeta.editing.getCellValue(cell) ?? getValue();\n\n const handleFocus = event => {\n // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.\n const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;\n const tableElement = tableRef.current;\n\n if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {\n const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);\n const cellRect = cellRef.current?.getBoundingClientRect();\n const lastFrozenRect = lastFrozenColumnElement?.getBoundingClientRect();\n const tableRect = tableElement.getBoundingClientRect();\n\n // Check for pinned columns overlap\n if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {\n const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;\n tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);\n // Check for editing actions overlap\n } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {\n const spaceBetweenCellAndEditingActions = 10;\n tableElement.scrollTo(\n // Need to take into account if table has been already scrolled.\n tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions,\n tableElement.scrollTop\n );\n }\n }\n\n if (event.target?.select) {\n requestAnimationFrame(() => {\n event.target.select();\n });\n }\n };\n\n const handleBlur = () => {\n tableMeta.editing.setDetailModeEditing(false);\n };\n\n // row move indicator\n const moveReason = tableMeta.editing.rowMoveReason[cell.column.id] ?? null;\n const rows = table.getRowModel().rows;\n const currentRowIndex = tableMeta.currentRow.currentRowIndex;\n const isCurrentRow = currentRowIndex !== undefined && rows[currentRowIndex]?.id === row.id;\n const mountNode = React.useMemo(() => {\n if (moveReason) {\n return cellRef.current?.parentElement?.firstChild as Element | null;\n }\n return null;\n }, [moveReason, cellRef]);\n\n const removeMoveReason = () => {\n tableMeta.editing.removeRowMoveReason(cell.column.id);\n };\n\n React.useEffect(() => {\n // To avoid reseting move reason on another row hover,\n // we need to check for changes only if value got changed in the current row.\n if (!isCurrentRow) {\n return;\n }\n\n if (hasChanged(getValue(), value)) {\n const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);\n tableMeta.editing.setRowMoveReason({ [cell.column.id]: moveReason });\n } else {\n removeMoveReason();\n }\n return removeMoveReason;\n }, [value]);\n\n const controlRenderer = column.columnDef.meta?.control;\n\n const className = cn(\n 'py-[calc(var(--table3-cell-padding-y)_-_0.06rem)]',\n {\n relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',\n // Need to set higher z-index, so that the current row textarea (in expanded state, when positioned absolute) overlaps rows below,\n // but at the same time it should not overlap the table headers which has z-10.\n 'z-[9]': isCurrentRow && controlRenderer === 'textarea',\n },\n\n // component overrides - grayscale for editing hover\n '[[role=\"row\"][data-current=\"false\"]:hover_&>*]:!grayscale [[role=\"row\"][data-current=\"false\"]:hover_&_.bg-white]:!bg-grey-100',\n typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className\n );\n\n return (\n <>\n {moveReason !== null && mountNode && (\n <Indicator\n reason={moveReason}\n columnName={String(cell.column.columnDef.header)}\n mountNode={mountNode}\n validationErrors={[]}\n />\n )}\n <div\n className={className}\n data-align={columnMeta.align}\n data-column-index={index}\n data-editable\n role=\"cell\"\n ref={cellRef}>\n <EditingControl\n align={columnMeta.align}\n column={cell.column}\n data={cell.row.original}\n initialValue={getValue()}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onChange={handleChange}\n ref={controlRef}\n table={table}\n tableRef={tableRef}\n value={value}\n cell={cell}\n isCurrentRow={isCurrentRow}\n />\n </div>\n </>\n );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n\nfunction getRowMoveReason<TType>(\n table: RTTable<any>,\n rowIndex: number,\n rowValues: TType,\n cell: RTCell<any, unknown>,\n newValue: any\n) {\n let rowMoveReason: IndicatorReason | null = null;\n const { globalFilter } = table.getState();\n\n const isFilteredByGlobalFilter = Object.values<unknown>({ ...rowValues, [cell.id]: newValue }).some(cellValue =>\n // Global filter can be undefined when there is no text being searched so we pass an empty string to\n // globalFilterFn as query in that case.\n globalFilterFn(String(cellValue), globalFilter ? String(globalFilter) : '')\n );\n\n if (!isFilteredByGlobalFilter) {\n rowMoveReason = IndicatorReason.SEARCH;\n } else if (cell.column.getIsFiltered() && !columnFilterFn(newValue, cell.column.getFilterValue() as Table3FilterValue)) {\n rowMoveReason = IndicatorReason.FILTER;\n } else if (\n !rowMoveReason &&\n cell.column.getIsSorted() &&\n willRowMoveAfterSorting(\n newValue,\n cell,\n rowIndex,\n table.getRowModel().rows,\n !!table.getState().sorting.find(s => s.id === cell.column.id)?.desc\n )\n ) {\n rowMoveReason = IndicatorReason.SORTING;\n }\n\n return rowMoveReason;\n}\n"],"names":["EditingCell","props","isHovered","useRowContext","tableMeta","table","options","meta","React","MemoedEditingCell","memo","cell","column","index","getValue","tableRef","row","columnMeta","columnDef","cellRef","useRef","controlRef","handleChange","value","editing","setCellValue","_tableMeta$editing$ge","getCellValue","handleFocus","event","frozenColumnIndex","columnFreezing","tableElement","current","undefined","_cellRef$current","lastFrozenColumnElement","getCurrentRowCellElement","cellRect","getBoundingClientRect","lastFrozenRect","tableRect","left","width","pinnedColumnsWidth","scrollTo","scrollTop","right","EDITING_ACTIONS_WIDTH","spaceBetweenCellAndEditingActions","scrollLeft","_event$target","target","select","requestAnimationFrame","handleBlur","setDetailModeEditing","moveReason","_tableMeta$editing$ro","rowMoveReason","id","rows","getRowModel","currentRowIndex","currentRow","isCurrentRow","_rows$currentRowIndex","mountNode","useMemo","_cellRef$current2","_cellRef$current2$par","parentElement","firstChild","removeMoveReason","removeRowMoveReason","useEffect","hasChanged","getRowMoveReason","original","setRowMoveReason","controlRenderer","_column$columnDef$met","control","className","cn","relative","Indicator","reason","columnName","String","header","validationErrors","align","role","ref","EditingControl","data","initialValue","onBlur","onFocus","onChange","rowIndex","rowValues","newValue","globalFilter","getState","isFilteredByGlobalFilter","Object","values","some","cellValue","globalFilterFn","IndicatorReason","SEARCH","getIsFiltered","columnFilterFn","getFilterValue","FILTER","getIsSorted","willRowMoveAfterSorting","_table$getState$sorti","sorting","find","s","desc","SORTING"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"EditingCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport _ from 'lodash';\nimport { TableMeta, CellContext, ColumnMeta, Cell as RTCell, Table as RTTable } from '@tanstack/react-table';\nimport { Indicator, IndicatorReason } from './Indicator';\nimport { columnFilterFn, globalFilterFn } from '../../../util/filtering';\nimport { Table3ColumnControlRenderer, Table3FilterValue } from '../../../types';\nimport { hasChanged, willRowMoveAfterSorting } from '../../../util/editing';\nimport { getCurrentRowCellElement } from '../../../util/columns';\nimport { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions';\nimport { EditingControl } from './EditingControl';\nimport { useRowContext } from '../../rows/RowContext';\nimport { Field } from '../../../../Field/Field';\nimport { Highlight } from './Highlight';\n\nexport type EditingCellProps<TType = unknown> = CellContext<TType, unknown> & {\n highlighted?: boolean;\n highlightedAsCurrent?: boolean;\n children?: string | JSX.Element;\n};\n\nexport function EditingCell<TType = unknown>(props: EditingCellProps<TType>) {\n const { cell, table } = props;\n const { isHovered } = useRowContext();\n // Need to explicitly pass tableMeta, because just passing the table object will not trigger editing change since table object is not mutatable.\n const tableMeta = table.options.meta as TableMeta<TType>;\n const error = tableMeta.validation.getCellError(cell);\n return <MemoedEditingCell<TType> {...props} error={error} isHovered={isHovered} tableMeta={tableMeta} />;\n}\n\n// Memoization\nexport type MemoedEditingCellProps<TType = unknown> = EditingCellProps<TType> & {\n isHovered: boolean;\n tableMeta: TableMeta<TType>;\n error?: string;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n const { cell, column, index, getValue, table, tableRef, row, tableMeta, error, highlighted, highlightedAsCurrent } = props;\n\n const columnMeta = column.columnDef.meta as ColumnMeta<TType, unknown>;\n\n const cellRef = React.useRef<HTMLDivElement>(null);\n const controlRef = React.useRef<HTMLElement>(null);\n\n const handleChange = (value: unknown) => tableMeta.editing.setCellValue(cell, value);\n const value = tableMeta.editing.getCellValue(cell) ?? getValue();\n\n const handleFocus = event => {\n // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.\n const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;\n const tableElement = tableRef.current;\n\n if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {\n const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);\n const cellRect = cellRef.current?.getBoundingClientRect();\n const lastFrozenRect = lastFrozenColumnElement?.getBoundingClientRect();\n const tableRect = tableElement.getBoundingClientRect();\n\n // Check for pinned columns overlap\n if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {\n const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;\n tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);\n // Check for editing actions overlap\n } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {\n const spaceBetweenCellAndEditingActions = 10;\n tableElement.scrollTo(\n // Need to take into account if table has been already scrolled.\n tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions,\n tableElement.scrollTop\n );\n }\n }\n\n if (event.target?.select) {\n requestAnimationFrame(() => {\n event.target.select();\n });\n }\n };\n\n const handleBlur = () => {\n tableMeta.editing.setDetailModeEditing(false);\n if (tableMeta.editing.changes?.[cell.row.id]) {\n tableMeta.validation.validate(cell.row.id, tableMeta.editing.changes[cell.row.id] as TType, cell.column.id);\n }\n };\n\n // row move indicator\n const moveReason = tableMeta.editing.rowMoveReason?.[cell.column.id] || null;\n const rows = table.getRowModel().rows;\n const currentRowIndex = tableMeta.currentRow.currentRowIndex;\n const isCurrentRow = currentRowIndex !== undefined && rows[currentRowIndex]?.id === row.id;\n const mountNode = React.useMemo(() => {\n if (moveReason !== null && isCurrentRow && !error) {\n return cellRef.current?.parentElement?.firstChild as Element | null;\n }\n return null;\n }, [moveReason, isCurrentRow, error, cellRef]);\n\n const removeMoveReason = () => {\n tableMeta.editing.removeRowMoveReason();\n };\n\n React.useEffect(() => {\n // To avoid reseting move reason on another row hover,\n // we need to check for changes only if value got changed in the current row.\n if (!isCurrentRow || error) {\n if (tableMeta.editing.rowMoveReason) {\n removeMoveReason();\n }\n return;\n }\n\n if (hasChanged(getValue(), value)) {\n const moveReason = getRowMoveReason(\n table,\n row.index,\n row.original,\n cell,\n value,\n tableMeta.search.excludeUnmatchedResults\n );\n tableMeta.editing.setRowMoveReason({ [cell.column.id]: moveReason });\n } else {\n removeMoveReason();\n }\n return removeMoveReason;\n }, [value, tableMeta.currentRow.currentRowIndex, tableMeta.search.excludeUnmatchedResults, error]);\n\n const controlRenderer = column.columnDef.meta?.control as Table3ColumnControlRenderer;\n\n const className = cn(\n 'py-[calc(var(--table3-cell-padding-y)_-_0.06rem)]',\n {\n // Textarea control is positioned absolute, when column is in enableTruncate mode, so the cell need to be positioned relative\n relative: controlRenderer === 'textarea' && columnMeta.enableTruncate,\n },\n typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className\n );\n\n const fieldClassName = cn('!min-h-0 w-full !pb-0', {\n '!pb-3': !!error,\n });\n\n const content = (\n <Field message={error} invalid={!!error} className={fieldClassName}>\n <EditingControl\n align={columnMeta.align}\n column={cell.column}\n data={cell.row.original}\n initialValue={getValue()}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onChange={handleChange}\n ref={controlRef}\n table={table}\n tableRef={tableRef}\n value={value}\n cell={cell}\n error={error}\n tabIndex={isCurrentRow ? 0 : -1}\n isCurrentRow={isCurrentRow}\n />\n </Field>\n );\n\n return (\n <>\n {moveReason !== null && mountNode && !error ? (\n <Indicator\n reason={moveReason}\n columnName={String(cell.column.columnDef.header)}\n mountNode={mountNode}\n validationErrors={[]}\n />\n ) : null}\n <div\n className={!highlighted ? className : undefined}\n data-align={columnMeta.align}\n data-column-index={index}\n role=\"cell\"\n data-editable\n ref={cellRef}\n data-invalid={!!error}\n data-highlighted={highlighted}>\n {highlighted ? (\n <Highlight\n current={highlightedAsCurrent}\n className={className}\n frozenColumnIndex={tableMeta.columnFreezing.frozenColumnIndex}\n index={index}\n tableRef={tableRef}>\n {content}\n </Highlight>\n ) : (\n content\n )}\n </div>\n </>\n );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n\nfunction getRowMoveReason<TType>(\n table: RTTable<any>,\n rowIndex: number,\n rowValues: TType,\n cell: RTCell<any, unknown>,\n newValue: any,\n excludeUnmatchedResults: boolean\n) {\n let rowMoveReason: IndicatorReason | null = null;\n const { globalFilter } = table.getState();\n\n const isFilteredByGlobalFilter = excludeUnmatchedResults\n ? Object.values<unknown>({ ...rowValues, [cell.id]: newValue }).some(() => {\n // Global filter can be undefined when there is no text being searched so we pass an empty string to\n // globalFilterFn as query in that case.\n return globalFilterFn(String(newValue), globalFilter ? String(globalFilter) : '');\n })\n : true;\n\n if (!isFilteredByGlobalFilter) {\n rowMoveReason = IndicatorReason.SEARCH;\n } else if (cell.column.getIsFiltered() && !columnFilterFn(newValue, cell.column.getFilterValue() as Table3FilterValue)) {\n rowMoveReason = IndicatorReason.FILTER;\n } else if (\n !rowMoveReason &&\n cell.column.getIsSorted() &&\n willRowMoveAfterSorting(\n newValue,\n cell,\n rowIndex,\n table.getRowModel().rows,\n !!table.getState().sorting.find(s => s.id === cell.column.id)?.desc\n )\n ) {\n rowMoveReason = IndicatorReason.SORTING;\n }\n\n return rowMoveReason;\n}\n"],"names":["EditingCell","props","cell","table","isHovered","useRowContext","tableMeta","options","meta","error","validation","getCellError","React","MemoedEditingCell","memo","column","index","getValue","tableRef","row","highlighted","highlightedAsCurrent","columnMeta","columnDef","cellRef","useRef","controlRef","handleChange","value","editing","setCellValue","_tableMeta$editing$ge","getCellValue","handleFocus","event","frozenColumnIndex","columnFreezing","tableElement","current","undefined","_cellRef$current","lastFrozenColumnElement","getCurrentRowCellElement","cellRect","getBoundingClientRect","lastFrozenRect","tableRect","left","width","pinnedColumnsWidth","scrollTo","scrollTop","right","EDITING_ACTIONS_WIDTH","spaceBetweenCellAndEditingActions","scrollLeft","_event$target","target","select","requestAnimationFrame","handleBlur","setDetailModeEditing","_tableMeta$editing$ch","changes","id","validate","moveReason","_tableMeta$editing$ro","rowMoveReason","rows","getRowModel","currentRowIndex","currentRow","isCurrentRow","_rows$currentRowIndex","mountNode","useMemo","_cellRef$current2","_cellRef$current2$par","parentElement","firstChild","removeMoveReason","removeRowMoveReason","useEffect","hasChanged","getRowMoveReason","original","search","excludeUnmatchedResults","setRowMoveReason","controlRenderer","_column$columnDef$met","control","className","cn","relative","enableTruncate","fieldClassName","content","Field","message","invalid","EditingControl","align","data","initialValue","onBlur","onFocus","onChange","ref","tabIndex","Indicator","reason","columnName","String","header","validationErrors","role","Highlight","rowIndex","rowValues","newValue","globalFilter","getState","isFilteredByGlobalFilter","Object","values","some","globalFilterFn","IndicatorReason","SEARCH","getIsFiltered","columnFilterFn","getFilterValue","FILTER","getIsSorted","willRowMoveAfterSorting","_table$getState$sorti","sorting","find","s","desc","SORTING"],"mappings":"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"}
|
package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js
CHANGED
@@ -23,6 +23,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
|
|
23
23
|
tableRef,
|
24
24
|
value,
|
25
25
|
cell,
|
26
|
+
error,
|
26
27
|
isCurrentRow,
|
27
28
|
...attributes
|
28
29
|
} = props;
|
@@ -32,6 +33,8 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
|
|
32
33
|
const columnMeta = column.columnDef.meta;
|
33
34
|
const controlRenderer = columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.control;
|
34
35
|
const isCellInDetailMode = tableMeta.editing.detailModeEditing && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(document.activeElement));
|
36
|
+
const originalRow = cell.row.original;
|
37
|
+
// Revert to initial value if escape was pressed
|
35
38
|
const handleKeyDown = event => {
|
36
39
|
// For some reason keydown event handler is not propogated to the table when input or other control element is
|
37
40
|
// in focus so we need to check for shortcut that toggles the editing.
|
@@ -91,7 +94,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
|
|
91
94
|
return;
|
92
95
|
}
|
93
96
|
};
|
94
|
-
const isNumber =
|
97
|
+
const isNumber = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.dataType) === 'number';
|
95
98
|
const handleInputKeyDown = event => {
|
96
99
|
handleKeyDown(event);
|
97
100
|
// Switching to editing mode, when key pressed any alphabetical character or number
|
@@ -99,19 +102,11 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
|
|
99
102
|
tableMeta.editing.setDetailModeEditing(true);
|
100
103
|
}
|
101
104
|
};
|
102
|
-
const handleDatepickerChange = event => {
|
103
|
-
// When datepicker looses focus, it triggers change event, even if date wasn't changed,
|
104
|
-
// so adding additional check here to prevent adding change to the edititng state.
|
105
|
-
const originalDate = cell.row.original[cell.column.id];
|
106
|
-
const changedDate = event.detail;
|
107
|
-
if (hasChanged(originalDate, changedDate)) {
|
108
|
-
handleChange(changedDate);
|
109
|
-
}
|
110
|
-
};
|
111
105
|
if (typeof controlRenderer === 'function') {
|
112
106
|
return controlRenderer({
|
113
107
|
...attributes,
|
114
|
-
ref:
|
108
|
+
ref: refCallback,
|
109
|
+
invalid: !!error,
|
115
110
|
setValue: nextValue => {
|
116
111
|
if (nextValue !== value) {
|
117
112
|
handleChange(nextValue);
|
@@ -120,19 +115,22 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
|
|
120
115
|
value
|
121
116
|
}, data);
|
122
117
|
} else if (controlRenderer === 'datepicker') {
|
123
|
-
const
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
118
|
+
const handleDatepickerChange = event => {
|
119
|
+
// When datepicker looses focus, it triggers change event, even if date wasn't changed,
|
120
|
+
// so adding additional check here to prevent adding change to the edititng state.
|
121
|
+
const originalDate = originalRow[cell.column.id];
|
122
|
+
const changedDate = event.detail;
|
123
|
+
if (hasChanged(originalDate, changedDate)) {
|
124
|
+
handleChange(changedDate);
|
128
125
|
}
|
129
126
|
};
|
130
127
|
return /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, attributes, {
|
128
|
+
invalid: !!error,
|
131
129
|
className: cn({
|
132
130
|
'[&_input]:!yt-focus-dark': isCellInDetailMode
|
133
131
|
}),
|
134
132
|
onChange: handleDatepickerChange,
|
135
|
-
onKeyDown:
|
133
|
+
onKeyDown: handleInputKeyDown,
|
136
134
|
ref: refCallback,
|
137
135
|
value: value
|
138
136
|
}));
|
@@ -144,6 +142,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
|
|
144
142
|
}));
|
145
143
|
} else if (controlRenderer === 'textarea') {
|
146
144
|
return /*#__PURE__*/React__default.createElement(TextareaControl, Object.assign({}, props, {
|
145
|
+
invalid: !!error,
|
147
146
|
isCellInDetailMode: isCellInDetailMode,
|
148
147
|
onKeyDown: handleInputKeyDown,
|
149
148
|
ref: refCallback,
|
@@ -151,6 +150,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
|
|
151
150
|
}));
|
152
151
|
}
|
153
152
|
return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
|
153
|
+
invalid: !!error,
|
154
154
|
className: cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {
|
155
155
|
'!yt-focus-dark': isCellInDetailMode
|
156
156
|
}),
|
package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"EditingControl.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Cell as RTCell, Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport _ from 'lodash';\n\nimport { deselectInputValue } from '../../../../../utils/input';\nimport { hasChanged } from '../../../util/editing';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { getCellAlignmentClasses, getInputAppearanceClassnames } from '../styles';\nimport { mergeRefs } from '../../../../../utils/mergeRefs';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { TextareaControl } from './controls/TextareaControl';\nimport { shouldTriggerShortcut } from '../../../../../utils/keyboard';\n\nexport type EditingControlProps<TType = unknown> = {\n align?: Table3ColumnAlignment;\n column: RTColumn<TType, unknown>;\n data: TType;\n initialValue: any;\n value: any;\n onBlur: (event: React.FocusEvent) => void;\n onFocus: (event: React.FocusEvent) => void;\n onChange: (value: any) => void;\n ref: React.Ref<HTMLElement>;\n table: RTTable<TType>;\n tableRef: React.RefObject<HTMLDivElement>;\n cell: RTCell<TType, unknown>;\n error?: string;\n tabIndex?: number;\n isCurrentRow?: boolean;\n};\n\nexport const EditingControl = React.forwardRef<HTMLElement, any>(function Control<TType = unknown>(\n props: EditingControlProps<TType>,\n externalRef: React.Ref<HTMLElement>\n) {\n const {\n align,\n column,\n data,\n initialValue,\n onChange: handleChange,\n table,\n tableRef,\n value,\n cell,\n isCurrentRow,\n ...attributes\n } = props;\n\n const tableMeta = table.options.meta as TableMeta<unknown>;\n\n const ref = React.useRef<HTMLElement>();\n const refCallback = mergeRefs([ref, externalRef]);\n\n const columnMeta = column.columnDef.meta;\n const controlRenderer = columnMeta?.control;\n\n const isCellInDetailMode =\n tableMeta.editing.detailModeEditing && (ref as React.RefObject<HTMLElement>)?.current?.contains(document.activeElement);\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n // For some reason keydown event handler is not propogated to the table when input or other control element is\n // in focus so we need to check for shortcut that toggles the editing.\n if (shouldTriggerShortcut(event, { key: 'e', meta: true, shift: false })) {\n tableMeta.editing.toggleEditing(false);\n return;\n }\n\n const target = event.target as HTMLInputElement;\n\n if (target.readOnly) {\n return;\n }\n\n // Prevent row arrow shortcuts triggering when in detail mode\n if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\n event.stopPropagation();\n }\n\n // Revert to initial value if escape was pressed\n if (event.key === 'Escape') {\n event.preventDefault();\n\n if (tableMeta.editing.detailModeEditing) {\n tableMeta.editing.setDetailModeEditing(false);\n\n if (value !== initialValue) {\n // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,\n // and in this case we need to completely remove row from editing state to avoid saving the same data as original.\n const changedRow: any = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};\n const rowEdtitingDataWithInitialValue = { ...changedRow, [cell.column.id]: initialValue };\n if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {\n tableMeta.editing.resetChange(cell.row.id);\n } else {\n handleChange(initialValue);\n }\n }\n } else {\n tableMeta.editing.toggleEditing(false);\n tableRef.current?.focus();\n }\n\n return;\n }\n\n // Should enable/disable editing mode if Enter was clicked\n if (event.key === 'Enter') {\n event.preventDefault();\n\n if (!tableMeta.editing.detailModeEditing) {\n deselectInputValue(target);\n } else {\n target?.select?.();\n }\n\n // Ketydown \"Enter\" should toggle edititng mode\n tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);\n\n return;\n }\n };\n\n const isNumber = typeof value === 'number';\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n handleKeyDown(event);\n\n // Switching to editing mode, when key pressed any alphabetical character or number\n if (/^[a-z0-9]$/i.test(event.key)) {\n tableMeta.editing.setDetailModeEditing(true);\n }\n };\n\n const handleDatepickerChange = event => {\n // When datepicker looses focus, it triggers change event, even if date wasn't changed,\n // so adding additional check here to prevent adding change to the edititng state.\n const originalDate = cell.row.original[cell.column.id];\n const changedDate = (event as any).detail;\n if (hasChanged(originalDate, changedDate)) {\n handleChange(changedDate);\n }\n };\n\n if (typeof controlRenderer === 'function') {\n return controlRenderer(\n {\n ...attributes,\n ref: ref as React.RefObject<HTMLElement>,\n setValue: nextValue => {\n if (nextValue !== value) {\n handleChange(nextValue);\n }\n },\n value,\n },\n data\n );\n } else if (controlRenderer === 'datepicker') {\n const handleDatepickerKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n handleKeyDown(event);\n\n if (/^[a-z0-9]$/i.test(event.key)) {\n tableMeta.editing.setDetailModeEditing(true);\n return;\n }\n };\n\n return (\n <Datepicker\n {...attributes}\n className={cn({\n '[&_input]:!yt-focus-dark': isCellInDetailMode,\n })}\n onChange={handleDatepickerChange}\n onKeyDown={handleDatepickerKeyDown}\n ref={refCallback}\n value={value as Date}\n />\n );\n } else if (controlRenderer === 'switch') {\n return <Switch {...attributes} checked={Boolean(value)} onChange={handleChange} ref={refCallback} />;\n } else if (controlRenderer === 'textarea') {\n return (\n <TextareaControl\n {...props}\n isCellInDetailMode={isCellInDetailMode}\n onKeyDown={handleInputKeyDown}\n ref={refCallback}\n fontSize={tableMeta.fontSize.size}\n />\n );\n }\n\n return (\n <Input\n {...attributes}\n className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n '!yt-focus-dark': isCellInDetailMode,\n })}\n onChange={event => {\n handleChange(event.target.value);\n }}\n onKeyDown={handleInputKeyDown}\n ref={refCallback}\n type={isNumber ? 'number' : undefined}\n value={isNumber ? value : String(value ?? '')}\n />\n );\n});\n"],"names":["EditingControl","React","forwardRef","Control","props","externalRef","align","column","data","initialValue","onChange","handleChange","table","tableRef","value","cell","isCurrentRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","handleKeyDown","event","shouldTriggerShortcut","key","shift","toggleEditing","target","readOnly","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","row","id","rowEdtitingDataWithInitialValue","_","isEqual","original","resetChange","_tableRef$current","focus","deselectInputValue","_target$select","select","call","isNumber","handleInputKeyDown","test","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","setValue","nextValue","handleDatepickerKeyDown","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextareaControl","fontSize","size","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","undefined","String"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"EditingControl.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Cell as RTCell, Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport _ from 'lodash';\n\nimport { deselectInputValue } from '../../../../../utils/input';\nimport { hasChanged } from '../../../util/editing';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { getCellAlignmentClasses, getInputAppearanceClassnames } from '../styles';\nimport { mergeRefs } from '../../../../../utils/mergeRefs';\nimport { Table3ColumnAlignment, Table3ColumnDataType } from '../../../types';\nimport { TextareaControl } from './controls/TextareaControl';\nimport { shouldTriggerShortcut } from '../../../../../utils/keyboard';\n\nexport type EditingControlProps<TType = unknown> = {\n align?: Table3ColumnAlignment;\n column: RTColumn<TType, unknown>;\n data: TType;\n initialValue: any;\n value: any;\n onBlur: (event: React.FocusEvent) => void;\n onFocus: (event: React.FocusEvent) => void;\n onChange: (value: any) => void;\n ref: React.Ref<HTMLElement>;\n table: RTTable<TType>;\n tableRef: React.RefObject<HTMLDivElement>;\n cell: RTCell<TType, unknown>;\n error?: string;\n tabIndex?: number;\n isCurrentRow?: boolean;\n};\n\nexport const EditingControl = React.forwardRef<HTMLElement, any>(function Control<TType = unknown>(\n props: EditingControlProps<TType>,\n externalRef: React.Ref<HTMLElement>\n) {\n const {\n align,\n column,\n data,\n initialValue,\n onChange: handleChange,\n table,\n tableRef,\n value,\n cell,\n error,\n isCurrentRow,\n ...attributes\n } = props;\n\n const tableMeta = table.options.meta as TableMeta<unknown>;\n const ref = React.useRef<HTMLElement>();\n const refCallback = mergeRefs([ref, externalRef]);\n\n const columnMeta = column.columnDef.meta;\n const controlRenderer = columnMeta?.control;\n\n const isCellInDetailMode =\n tableMeta.editing.detailModeEditing && (ref as React.RefObject<HTMLElement>)?.current?.contains(document.activeElement);\n\n const originalRow = cell.row.original as TType;\n\n // Revert to initial value if escape was pressed\n const handleKeyDown = (event: React.KeyboardEvent) => {\n // For some reason keydown event handler is not propogated to the table when input or other control element is\n // in focus so we need to check for shortcut that toggles the editing.\n if (shouldTriggerShortcut(event, { key: 'e', meta: true, shift: false })) {\n tableMeta.editing.toggleEditing(false);\n return;\n }\n\n const target = event.target as HTMLInputElement;\n\n if (target.readOnly) {\n return;\n }\n\n // Prevent row arrow shortcuts triggering when in detail mode\n if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\n event.stopPropagation();\n }\n\n // Revert to initial value if escape was pressed\n if (event.key === 'Escape') {\n event.preventDefault();\n\n if (tableMeta.editing.detailModeEditing) {\n tableMeta.editing.setDetailModeEditing(false);\n\n if (value !== initialValue) {\n // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,\n // and in this case we need to completely remove row from editing state to avoid saving the same data as original.\n const changedRow: any = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};\n const rowEdtitingDataWithInitialValue = { ...changedRow, [cell.column.id]: initialValue };\n if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {\n tableMeta.editing.resetChange(cell.row.id);\n } else {\n handleChange(initialValue);\n }\n }\n } else {\n tableMeta.editing.toggleEditing(false);\n tableRef.current?.focus();\n }\n\n return;\n }\n\n // Should enable/disable editing mode if Enter was clicked\n if (event.key === 'Enter') {\n event.preventDefault();\n\n if (!tableMeta.editing.detailModeEditing) {\n deselectInputValue(target);\n } else {\n target?.select?.();\n }\n\n // Ketydown \"Enter\" should toggle edititng mode\n tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);\n\n return;\n }\n };\n\n const isNumber = columnMeta?.dataType === ('number' as Table3ColumnDataType);\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n handleKeyDown(event);\n\n // Switching to editing mode, when key pressed any alphabetical character or number\n if (/^[a-z0-9]$/i.test(event.key)) {\n tableMeta.editing.setDetailModeEditing(true);\n }\n };\n\n if (typeof controlRenderer === 'function') {\n return controlRenderer(\n {\n ...attributes,\n ref: refCallback,\n invalid: !!error,\n setValue: nextValue => {\n if (nextValue !== value) {\n handleChange(nextValue);\n }\n },\n value,\n },\n data\n );\n } else if (controlRenderer === 'datepicker') {\n const handleDatepickerChange = event => {\n // When datepicker looses focus, it triggers change event, even if date wasn't changed,\n // so adding additional check here to prevent adding change to the edititng state.\n const originalDate = originalRow[cell.column.id];\n const changedDate = (event as any).detail;\n if (hasChanged(originalDate, changedDate)) {\n handleChange(changedDate);\n }\n };\n\n return (\n <Datepicker\n {...attributes}\n invalid={!!error}\n className={cn({\n '[&_input]:!yt-focus-dark': isCellInDetailMode,\n })}\n onChange={handleDatepickerChange}\n onKeyDown={handleInputKeyDown}\n ref={refCallback}\n value={value as Date}\n />\n );\n } else if (controlRenderer === 'switch') {\n return <Switch {...attributes} checked={Boolean(value)} onChange={handleChange} ref={refCallback} />;\n } else if (controlRenderer === 'textarea') {\n return (\n <TextareaControl\n {...props}\n invalid={!!error}\n isCellInDetailMode={isCellInDetailMode}\n onKeyDown={handleInputKeyDown}\n ref={refCallback}\n fontSize={tableMeta.fontSize.size}\n />\n );\n }\n\n return (\n <Input\n {...attributes}\n invalid={!!error}\n className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n '!yt-focus-dark': isCellInDetailMode,\n })}\n onChange={event => {\n handleChange(event.target.value);\n }}\n onKeyDown={handleInputKeyDown}\n ref={refCallback}\n type={isNumber ? 'number' : undefined}\n value={isNumber ? value : String(value ?? '')}\n />\n );\n});\n"],"names":["EditingControl","React","forwardRef","Control","props","externalRef","align","column","data","initialValue","onChange","handleChange","table","tableRef","value","cell","error","isCurrentRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","originalRow","row","original","handleKeyDown","event","shouldTriggerShortcut","key","shift","toggleEditing","target","readOnly","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","id","rowEdtitingDataWithInitialValue","_","isEqual","resetChange","_tableRef$current","focus","deselectInputValue","_target$select","select","call","isNumber","dataType","handleInputKeyDown","test","invalid","setValue","nextValue","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextareaControl","fontSize","size","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","undefined","String"],"mappings":"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"}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
import React__default from 'react';
|
2
|
+
import cn from 'classnames';
|
3
|
+
import { useRowContext } from '../../rows/RowContext.js';
|
4
|
+
import { scrollColumnIntoView } from '../../../util/columns.js';
|
5
|
+
|
6
|
+
const Highlight = props => {
|
7
|
+
const {
|
8
|
+
current,
|
9
|
+
frozenColumnIndex,
|
10
|
+
index,
|
11
|
+
tableRef,
|
12
|
+
...attributes
|
13
|
+
} = props;
|
14
|
+
const {
|
15
|
+
hasError: rowHasError
|
16
|
+
} = useRowContext();
|
17
|
+
const ref = React__default.useRef(null);
|
18
|
+
const className = cn('h-full flex [justify-content:inherit] [text-align:inherit]', props.className, {
|
19
|
+
// normal row
|
20
|
+
'bg-blue-200/25': !current && !rowHasError,
|
21
|
+
// current row
|
22
|
+
'bg-blue-200/75': current && !rowHasError,
|
23
|
+
// normal row with error
|
24
|
+
'bg-[#eaeaf5]': !current && rowHasError,
|
25
|
+
// current with error
|
26
|
+
'bg-[#dadaf5]': current && rowHasError
|
27
|
+
});
|
28
|
+
React__default.useEffect(() => {
|
29
|
+
if (ref.current && current) {
|
30
|
+
scrollColumnIntoView(index, frozenColumnIndex, ref.current, tableRef.current);
|
31
|
+
}
|
32
|
+
}, [current]);
|
33
|
+
return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
|
34
|
+
"data-taco": 'highlight',
|
35
|
+
className: className,
|
36
|
+
ref: ref
|
37
|
+
}));
|
38
|
+
};
|
39
|
+
|
40
|
+
export { Highlight };
|
41
|
+
//# sourceMappingURL=Highlight.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Highlight.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/Highlight.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { scrollColumnIntoView } from '../../../util/columns';\nimport { useRowContext } from '../../rows/RowContext';\n\nexport const Highlight = props => {\n const { current, frozenColumnIndex, index, tableRef, ...attributes } = props;\n const { hasError: rowHasError } = useRowContext();\n\n const ref = React.useRef<HTMLDivElement | null>(null);\n const className = cn('h-full flex [justify-content:inherit] [text-align:inherit]', props.className, {\n // normal row\n 'bg-blue-200/25': !current && !rowHasError,\n // current row\n 'bg-blue-200/75': current && !rowHasError,\n // normal row with error\n 'bg-[#eaeaf5]': !current && rowHasError,\n // current with error\n 'bg-[#dadaf5]': current && rowHasError,\n });\n\n React.useEffect(() => {\n if (ref.current && current) {\n scrollColumnIntoView(index, frozenColumnIndex, ref.current, tableRef.current);\n }\n }, [current]);\n\n return <div {...attributes} data-taco='highlight' className={className} ref={ref} />;\n};\n"],"names":["Highlight","props","current","frozenColumnIndex","index","tableRef","attributes","hasError","rowHasError","useRowContext","ref","React","useRef","className","cn","useEffect","scrollColumnIntoView"],"mappings":";;;;;MAKaA,SAAS,GAAGC,KAAK;EAC1B,MAAM;IAAEC,OAAO;IAAEC,iBAAiB;IAAEC,KAAK;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAC5E,MAAM;IAAEM,QAAQ,EAAEC;GAAa,GAAGC,aAAa,EAAE;EAEjD,MAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAwB,IAAI,CAAC;EACrD,MAAMC,SAAS,GAAGC,EAAE,CAAC,4DAA4D,EAAEb,KAAK,CAACY,SAAS,EAAE;;IAEhG,gBAAgB,EAAE,CAACX,OAAO,IAAI,CAACM,WAAW;;IAE1C,gBAAgB,EAAEN,OAAO,IAAI,CAACM,WAAW;;IAEzC,cAAc,EAAE,CAACN,OAAO,IAAIM,WAAW;;IAEvC,cAAc,EAAEN,OAAO,IAAIM;GAC9B,CAAC;EAEFG,cAAK,CAACI,SAAS,CAAC;IACZ,IAAIL,GAAG,CAACR,OAAO,IAAIA,OAAO,EAAE;MACxBc,oBAAoB,CAACZ,KAAK,EAAED,iBAAiB,EAAEO,GAAG,CAACR,OAAO,EAAEG,QAAQ,CAACH,OAAO,CAAC;;GAEpF,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,oBAAOS,sDAASL,UAAU;iBAAY,WAAW;IAACO,SAAS,EAAEA,SAAS;IAAEH,GAAG,EAAEA;KAAO;AACxF;;;;"}
|
@@ -12,7 +12,7 @@ const heights = {
|
|
12
12
|
max: 86
|
13
13
|
},
|
14
14
|
medium: {
|
15
|
-
min:
|
15
|
+
min: 32,
|
16
16
|
max: 100
|
17
17
|
},
|
18
18
|
large: {
|
@@ -24,6 +24,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
|
|
24
24
|
const {
|
25
25
|
onKeyDown: handleKeyDown,
|
26
26
|
onChange: handleChange,
|
27
|
+
onBlur,
|
27
28
|
column,
|
28
29
|
isCellInDetailMode,
|
29
30
|
align,
|
@@ -79,7 +80,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
|
|
79
80
|
resizeTextArea(e.target);
|
80
81
|
};
|
81
82
|
const textareaContainerClassName = cn('w-full', {
|
82
|
-
'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-
|
83
|
+
'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-[9]': columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate
|
83
84
|
});
|
84
85
|
const handleTextareaKeyDown = event => {
|
85
86
|
// By default Shift + Enter in textarea makes a new line, we want to keep this behaviour
|
@@ -89,9 +90,23 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
|
|
89
90
|
handleKeyDown(event);
|
90
91
|
}
|
91
92
|
};
|
93
|
+
const handleBlur = event => {
|
94
|
+
// If truncation is enabled, then textarea should shring back to min height, when loosing focus.
|
95
|
+
if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
|
96
|
+
const textareaElement = event.currentTarget;
|
97
|
+
textareaElement.style.height = `${minMaxHeight.min}px`;
|
98
|
+
}
|
99
|
+
onBlur(event);
|
100
|
+
};
|
92
101
|
return /*#__PURE__*/React__default.createElement("div", {
|
93
|
-
className: textareaContainerClassName,
|
94
102
|
"data-taco": "input-container"
|
103
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
104
|
+
style: {
|
105
|
+
minHeight: `${minMaxHeight.min}px`
|
106
|
+
},
|
107
|
+
className: "relative"
|
108
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
109
|
+
className: textareaContainerClassName
|
95
110
|
}, /*#__PURE__*/React__default.createElement(Textarea, Object.assign({}, attributes, {
|
96
111
|
onChange: event => {
|
97
112
|
handleChange(event.target.value);
|
@@ -101,14 +116,8 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
|
|
101
116
|
onKeyDown: e => {
|
102
117
|
handleTextareaKeyDown(e);
|
103
118
|
},
|
104
|
-
onBlur:
|
105
|
-
|
106
|
-
if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
|
107
|
-
const textareaElement = event.currentTarget;
|
108
|
-
textareaElement.style.height = `${minMaxHeight.min}px`;
|
109
|
-
}
|
110
|
-
},
|
111
|
-
className: cn(getCellAlignmentClasses(align), `z-20 h-fit resize-none`, {
|
119
|
+
onBlur: handleBlur,
|
120
|
+
className: cn(getCellAlignmentClasses(align), `h-fit resize-none`, {
|
112
121
|
[`!min-h-[${minMaxHeight.min}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
|
113
122
|
'!yt-focus-dark': isCellInDetailMode,
|
114
123
|
[`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
|
@@ -117,7 +126,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
|
|
117
126
|
}),
|
118
127
|
ref: ref,
|
119
128
|
value: String(value !== null && value !== void 0 ? value : '')
|
120
|
-
})));
|
129
|
+
})))));
|
121
130
|
});
|
122
131
|
|
123
132
|
export { TextareaControl };
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextareaControl.js","sources":["../../../../../../../../../../../src/components/Table3/components/columns/cell/controls/TextareaControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Textarea } from '../../../../../Textarea/Textarea';\nimport { EditingControlProps } from '../EditingControl';\nimport { getCellAlignmentClasses } from '../../styles';\nimport { useMergedRef } from '../../../../../../hooks/useMergedRef';\nimport { Table3FontSize } from '../../../../types';\n\ntype TextareaHeight = {\n min: number;\n max: number;\n};\n// By UX design, textarea should fold to min size when blured and extend to max 5 lines height when edited in enableTruncate mode,\n// for this reason we need to set min/max height limits for each font size value.\nconst heights: Record<Table3FontSize, TextareaHeight> = {\n small: {\n min: 24,\n max: 86,\n },\n medium: {\n min: 34,\n max: 100,\n },\n large: {\n min: 40,\n max: 140,\n },\n};\n\ntype TextareaControlProps<TType = unknown> = EditingControlProps<TType> & {\n onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n fontSize: Table3FontSize;\n isCellInDetailMode?: boolean;\n};\n\nexport const TextareaControl = React.forwardRef<HTMLElement, any>(function TextareaControl<TType = unknown>(\n props: TextareaControlProps<TType>,\n externalRef: React.Ref<HTMLElement>\n) {\n const {\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n column,\n isCellInDetailMode,\n align,\n isCurrentRow,\n value,\n fontSize,\n ...attributes\n } = props;\n\n const minMaxHeight = heights[fontSize];\n\n const columnMeta = column.columnDef.meta;\n\n const ref = useMergedRef<HTMLTextAreaElement>(externalRef);\n\n React.useEffect(() => {\n if (ref?.current) {\n // Need to reset textarea to min height when font size got changed and if column in enable truncate mode.\n if (columnMeta?.enableTruncate) {\n const textareaElement = ref?.current as HTMLTextAreaElement;\n textareaElement.style.height = `${minMaxHeight.min}px`;\n\n // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized or fonsSize got changed.\n } else {\n const textareaElement = ref?.current as HTMLTextAreaElement;\n resizeTextArea(textareaElement);\n }\n }\n }, [fontSize]);\n\n React.useEffect(() => {\n // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.\n // Otherwise it should collapse to minimal height.\n if (ref?.current && columnMeta?.enableTruncate) {\n const textareaElement = ref?.current as HTMLTextAreaElement;\n\n if (isCellInDetailMode) {\n resizeTextArea(textareaElement);\n } else {\n textareaElement.style.height = `${minMaxHeight.min}px`;\n }\n }\n }, [isCellInDetailMode]);\n\n const resizeTextArea = (textareaElement: HTMLTextAreaElement) => {\n // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,\n // depending on text inside.\n const textareaRect = textareaElement.getBoundingClientRect();\n const prevHeight = textareaRect.height;\n if (columnMeta?.enableTruncate) {\n if (prevHeight < minMaxHeight.max) {\n textareaElement.style.height = 'inherit';\n textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, minMaxHeight.max)}px`;\n }\n } else {\n textareaElement.style.height = 'inherit';\n textareaElement.style.height = `${textareaElement.scrollHeight}px`;\n }\n };\n\n const handleTextareaChange = e => {\n resizeTextArea(e.target);\n };\n\n const textareaContainerClassName = cn('w-full', {\n 'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-20 focus-within:px-[var(--table3-cell-padding-x)] focus-within:pt-[var(--table3-cell-padding-y)]':\n columnMeta?.enableTruncate,\n });\n const handleTextareaKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour\n if (event.shiftKey && event.key === 'Enter') {\n return;\n } else {\n handleKeyDown(event);\n }\n };\n\n return (\n <div className={textareaContainerClassName} data-taco=\"input-container\">\n <Textarea\n {...attributes}\n onChange={event => {\n handleChange(event.target.value);\n handleTextareaChange(event);\n }}\n rows={1}\n onKeyDown={e => {\n handleTextareaKeyDown(e);\n }}\n onBlur={event => {\n // If truncation is enabled, then textarea should shring back to min height, when loosing focus.\n if (columnMeta?.enableTruncate) {\n const textareaElement = event.currentTarget;\n textareaElement.style.height = `${minMaxHeight.min}px`;\n }\n }}\n className={cn(getCellAlignmentClasses(align), `z-20 h-fit resize-none`, {\n [`!min-h-[${minMaxHeight.min}px]`]: columnMeta?.enableTruncate,\n '!yt-focus-dark': isCellInDetailMode,\n [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && columnMeta?.enableTruncate,\n // Only allow resizing when focused and truncation enabled\n 'focus:resize-y': isCurrentRow && columnMeta?.enableTruncate,\n })}\n ref={ref}\n value={String(value ?? '')}\n />\n </div>\n );\n});\n"],"names":["heights","small","min","max","medium","large","TextareaControl","React","forwardRef","props","externalRef","onKeyDown","handleKeyDown","onChange","handleChange","column","isCellInDetailMode","align","isCurrentRow","value","fontSize","attributes","minMaxHeight","columnMeta","columnDef","meta","ref","useMergedRef","useEffect","current","enableTruncate","textareaElement","style","height","resizeTextArea","textareaRect","getBoundingClientRect","prevHeight","Math","scrollHeight","handleTextareaChange","e","target","textareaContainerClassName","cn","handleTextareaKeyDown","event","shiftKey","key","className","Textarea","rows","onBlur","currentTarget","getCellAlignmentClasses","String"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"TextareaControl.js","sources":["../../../../../../../../../../../src/components/Table3/components/columns/cell/controls/TextareaControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Textarea } from '../../../../../Textarea/Textarea';\nimport { EditingControlProps } from '../EditingControl';\nimport { getCellAlignmentClasses } from '../../styles';\nimport { useMergedRef } from '../../../../../../hooks/useMergedRef';\nimport { Table3FontSize } from '../../../../types';\n\ntype TextareaHeight = {\n min: number;\n max: number;\n};\n// By UX design, textarea should fold to min size when blured and extend to max 5 lines height when edited in enableTruncate mode,\n// for this reason we need to set min/max height limits for each font size value.\nconst heights: Record<Table3FontSize, TextareaHeight> = {\n small: {\n min: 24,\n max: 86,\n },\n medium: {\n min: 32,\n max: 100,\n },\n large: {\n min: 40,\n max: 140,\n },\n};\n\ntype TextareaControlProps<TType = unknown> = EditingControlProps<TType> & {\n onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n fontSize: Table3FontSize;\n invalid: boolean;\n isCellInDetailMode?: boolean;\n};\n\nexport const TextareaControl = React.forwardRef<HTMLElement, any>(function TextareaControl<TType = unknown>(\n props: TextareaControlProps<TType>,\n externalRef: React.Ref<HTMLElement>\n) {\n const {\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n onBlur,\n column,\n isCellInDetailMode,\n align,\n isCurrentRow,\n value,\n fontSize,\n ...attributes\n } = props;\n\n const minMaxHeight = heights[fontSize];\n\n const columnMeta = column.columnDef.meta;\n\n const ref = useMergedRef<HTMLTextAreaElement>(externalRef);\n\n React.useEffect(() => {\n if (ref?.current) {\n // Need to reset textarea to min height when font size got changed and if column in enable truncate mode.\n if (columnMeta?.enableTruncate) {\n const textareaElement = ref?.current as HTMLTextAreaElement;\n textareaElement.style.height = `${minMaxHeight.min}px`;\n\n // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized or fonsSize got changed.\n } else {\n const textareaElement = ref?.current as HTMLTextAreaElement;\n resizeTextArea(textareaElement);\n }\n }\n }, [fontSize]);\n\n React.useEffect(() => {\n // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.\n // Otherwise it should collapse to minimal height.\n if (ref?.current && columnMeta?.enableTruncate) {\n const textareaElement = ref?.current as HTMLTextAreaElement;\n\n if (isCellInDetailMode) {\n resizeTextArea(textareaElement);\n } else {\n textareaElement.style.height = `${minMaxHeight.min}px`;\n }\n }\n }, [isCellInDetailMode]);\n\n const resizeTextArea = (textareaElement: HTMLTextAreaElement) => {\n // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,\n // depending on text inside.\n const textareaRect = textareaElement.getBoundingClientRect();\n const prevHeight = textareaRect.height;\n if (columnMeta?.enableTruncate) {\n if (prevHeight < minMaxHeight.max) {\n textareaElement.style.height = 'inherit';\n textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, minMaxHeight.max)}px`;\n }\n } else {\n textareaElement.style.height = 'inherit';\n textareaElement.style.height = `${textareaElement.scrollHeight}px`;\n }\n };\n\n const handleTextareaChange = e => {\n resizeTextArea(e.target);\n };\n\n const textareaContainerClassName = cn('w-full', {\n 'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-[9]':\n columnMeta?.enableTruncate,\n });\n const handleTextareaKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour\n if (event.shiftKey && event.key === 'Enter') {\n return;\n } else {\n handleKeyDown(event);\n }\n };\n\n const handleBlur = event => {\n // If truncation is enabled, then textarea should shring back to min height, when loosing focus.\n if (columnMeta?.enableTruncate) {\n const textareaElement = event.currentTarget;\n textareaElement.style.height = `${minMaxHeight.min}px`;\n }\n onBlur(event);\n };\n\n return (\n <div data-taco=\"input-container\">\n {/**\n * Textarea should have min height placeholder, because it becomes absolute positioned when focused,\n * which leads to overlapping of validation message rendered bellow.\n * Somehow tailwind cannot dynamically assign min height when arbitary value has been used(in this particular case),\n * so assigning it through style prop here\n **/}\n <div style={{ minHeight: `${minMaxHeight.min}px` }} className=\"relative\">\n <div className={textareaContainerClassName}>\n <Textarea\n {...attributes}\n onChange={event => {\n handleChange(event.target.value);\n handleTextareaChange(event);\n }}\n rows={1}\n onKeyDown={e => {\n handleTextareaKeyDown(e);\n }}\n onBlur={handleBlur}\n className={cn(getCellAlignmentClasses(align), `h-fit resize-none`, {\n [`!min-h-[${minMaxHeight.min}px]`]: columnMeta?.enableTruncate,\n '!yt-focus-dark': isCellInDetailMode,\n [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && columnMeta?.enableTruncate,\n // Only allow resizing when focused and truncation enabled\n 'focus:resize-y': isCurrentRow && columnMeta?.enableTruncate,\n })}\n ref={ref}\n value={String(value ?? '')}\n />\n </div>\n </div>\n </div>\n );\n});\n"],"names":["heights","small","min","max","medium","large","TextareaControl","React","forwardRef","props","externalRef","onKeyDown","handleKeyDown","onChange","handleChange","onBlur","column","isCellInDetailMode","align","isCurrentRow","value","fontSize","attributes","minMaxHeight","columnMeta","columnDef","meta","ref","useMergedRef","useEffect","current","enableTruncate","textareaElement","style","height","resizeTextArea","textareaRect","getBoundingClientRect","prevHeight","Math","scrollHeight","handleTextareaChange","e","target","textareaContainerClassName","cn","handleTextareaKeyDown","event","shiftKey","key","handleBlur","currentTarget","minHeight","className","Textarea","rows","getCellAlignmentClasses","String"],"mappings":"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"}
|
@@ -30,7 +30,7 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
|
|
30
30
|
meta,
|
31
31
|
table
|
32
32
|
} = props;
|
33
|
-
const className = cn('sticky bottom-0 border-t-2 font-bold h-10 box-content items-center group/column relative', {
|
33
|
+
const className = cn('sticky bottom-0 border-t-2 font-bold h-10 box-content items-center group/column relative z-10', {
|
34
34
|
'z-30': isFrozen
|
35
35
|
});
|
36
36
|
if (table.options.debugAll) {
|
package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Footer.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Footer.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { ColumnMeta, HeaderContext } from '@tanstack/react-table';\nimport { isFrozenColumn } from '../../../util/columns';\nimport { Table3ColumnAlignment, Table3ColumnFooterRenderer } from '../../../types';\n\nexport type FooterProps<TType = unknown> = HeaderContext<TType, unknown> & {\n renderer?: Table3ColumnFooterRenderer<TType>;\n};\n\nexport function Footer<TType = unknown>(props: FooterProps<TType>) {\n const { column, header, table } = props;\n const meta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n\n // Footers are heavily memoized because performance in our table is critical\n // be careful and selective about props that you pass to the Footer\n const memoedProps = {\n align: meta.align,\n id: header.id,\n index: header.index,\n isFrozen: isFrozenColumn(header, table),\n meta,\n table,\n };\n\n return <MemoedFooter<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedFooterProps<TType = unknown> = Omit<FooterProps<TType>, 'header' | 'column' | 'scrollToIndex'> & {\n align?: Table3ColumnAlignment;\n id: string;\n index: number;\n isFrozen: boolean;\n meta: ColumnMeta<TType, unknown>;\n};\n\nconst MemoedFooter = React.memo(function MemoedFooter<TType = unknown>(props: MemoedFooterProps<TType>) {\n const { align, id, index, isFrozen, meta, table } = props;\n\n const className = cn('sticky bottom-0 border-t-2 font-bold h-10 box-content items-center group/column relative', {\n 'z-30': isFrozen,\n });\n\n if (table.options.debugAll) {\n console.log('footer render', id);\n }\n\n return (\n <div className={className} data-align={align} data-column-index={index} role=\"columnheader\">\n {typeof meta.footer === 'function' ? (\n <span className=\"flex-grow truncate\">{meta.footer(table.getRowModel().rows.map(row => row.original[id]))}</span>\n ) : null}\n </div>\n );\n}) as <TType = unknown>(props: MemoedFooterProps<TType>) => JSX.Element;\n"],"names":["Footer","props","column","header","table","meta","React","useMemo","columnDef","memoedProps","align","id","index","isFrozen","isFrozenColumn","MemoedFooter","memo","className","cn","options","debugAll","console","log","role","footer","getRowModel","rows","map","row","original"],"mappings":";;;;SAUgBA,MAAMA,CAAkBC,KAAyB;EAC7D,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC;GAAO,GAAGH,KAAK;EACvC,MAAMI,IAAI,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAML,MAAM,CAACM,SAAS,CAACH,IAAI,EAAE,EAAE,CAA+B;;;EAIzF,MAAMI,WAAW,GAAG;IAChBC,KAAK,EAAEL,IAAI,CAACK,KAAK;IACjBC,EAAE,EAAER,MAAM,CAACQ,EAAE;IACbC,KAAK,EAAET,MAAM,CAACS,KAAK;IACnBC,QAAQ,EAAEC,cAAc,CAACX,MAAM,EAAEC,KAAK,CAAC;IACvCC,IAAI;IACJD;GACH;EAED,oBAAOE,6BAACS,YAAY,oBAAYN,WAAW,EAAI;AACnD;AAWA,MAAMM,YAAY,gBAAGT,cAAK,CAACU,IAAI,CAAC,SAASD,YAAYA,CAAkBd,KAA+B;EAClG,MAAM;IAAES,KAAK;IAAEC,EAAE;IAAEC,KAAK;IAAEC,QAAQ;IAAER,IAAI;IAAED;GAAO,GAAGH,KAAK;EAEzD,MAAMgB,SAAS,GAAGC,EAAE,CAAC,
|
1
|
+
{"version":3,"file":"Footer.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { ColumnMeta, HeaderContext } from '@tanstack/react-table';\nimport { isFrozenColumn } from '../../../util/columns';\nimport { Table3ColumnAlignment, Table3ColumnFooterRenderer } from '../../../types';\n\nexport type FooterProps<TType = unknown> = HeaderContext<TType, unknown> & {\n renderer?: Table3ColumnFooterRenderer<TType>;\n};\n\nexport function Footer<TType = unknown>(props: FooterProps<TType>) {\n const { column, header, table } = props;\n const meta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n\n // Footers are heavily memoized because performance in our table is critical\n // be careful and selective about props that you pass to the Footer\n const memoedProps = {\n align: meta.align,\n id: header.id,\n index: header.index,\n isFrozen: isFrozenColumn(header, table),\n meta,\n table,\n };\n\n return <MemoedFooter<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedFooterProps<TType = unknown> = Omit<FooterProps<TType>, 'header' | 'column' | 'scrollToIndex'> & {\n align?: Table3ColumnAlignment;\n id: string;\n index: number;\n isFrozen: boolean;\n meta: ColumnMeta<TType, unknown>;\n};\n\nconst MemoedFooter = React.memo(function MemoedFooter<TType = unknown>(props: MemoedFooterProps<TType>) {\n const { align, id, index, isFrozen, meta, table } = props;\n\n const className = cn('sticky bottom-0 border-t-2 font-bold h-10 box-content items-center group/column relative z-10', {\n 'z-30': isFrozen,\n });\n\n if (table.options.debugAll) {\n console.log('footer render', id);\n }\n\n return (\n <div className={className} data-align={align} data-column-index={index} role=\"columnheader\">\n {typeof meta.footer === 'function' ? (\n <span className=\"flex-grow truncate\">{meta.footer(table.getRowModel().rows.map(row => row.original[id]))}</span>\n ) : null}\n </div>\n );\n}) as <TType = unknown>(props: MemoedFooterProps<TType>) => JSX.Element;\n"],"names":["Footer","props","column","header","table","meta","React","useMemo","columnDef","memoedProps","align","id","index","isFrozen","isFrozenColumn","MemoedFooter","memo","className","cn","options","debugAll","console","log","role","footer","getRowModel","rows","map","row","original"],"mappings":";;;;SAUgBA,MAAMA,CAAkBC,KAAyB;EAC7D,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC;GAAO,GAAGH,KAAK;EACvC,MAAMI,IAAI,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAML,MAAM,CAACM,SAAS,CAACH,IAAI,EAAE,EAAE,CAA+B;;;EAIzF,MAAMI,WAAW,GAAG;IAChBC,KAAK,EAAEL,IAAI,CAACK,KAAK;IACjBC,EAAE,EAAER,MAAM,CAACQ,EAAE;IACbC,KAAK,EAAET,MAAM,CAACS,KAAK;IACnBC,QAAQ,EAAEC,cAAc,CAACX,MAAM,EAAEC,KAAK,CAAC;IACvCC,IAAI;IACJD;GACH;EAED,oBAAOE,6BAACS,YAAY,oBAAYN,WAAW,EAAI;AACnD;AAWA,MAAMM,YAAY,gBAAGT,cAAK,CAACU,IAAI,CAAC,SAASD,YAAYA,CAAkBd,KAA+B;EAClG,MAAM;IAAES,KAAK;IAAEC,EAAE;IAAEC,KAAK;IAAEC,QAAQ;IAAER,IAAI;IAAED;GAAO,GAAGH,KAAK;EAEzD,MAAMgB,SAAS,GAAGC,EAAE,CAAC,+FAA+F,EAAE;IAClH,MAAM,EAAEL;GACX,CAAC;EAEF,IAAIT,KAAK,CAACe,OAAO,CAACC,QAAQ,EAAE;IACxBC,OAAO,CAACC,GAAG,CAAC,eAAe,EAAEX,EAAE,CAAC;;EAGpC,oBACIL;IAAKW,SAAS,EAAEA,SAAS;kBAAcP,KAAK;yBAAqBE,KAAK;IAAEW,IAAI,EAAC;KACxE,OAAOlB,IAAI,CAACmB,MAAM,KAAK,UAAU,gBAC9BlB;IAAMW,SAAS,EAAC;KAAsBZ,IAAI,CAACmB,MAAM,CAACpB,KAAK,CAACqB,WAAW,EAAE,CAACC,IAAI,CAACC,GAAG,CAACC,GAAG,IAAIA,GAAG,CAACC,QAAQ,CAAClB,EAAE,CAAC,CAAC,CAAC,CAAQ,GAChH,IAAI,CACN;AAEd,CAAC,CAAsE;;;;"}
|
package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/EditingActions.js
CHANGED
@@ -4,45 +4,60 @@ import { Icon } from '../../../../Icon/Icon.js';
|
|
4
4
|
import { Tooltip } from '../../../../Tooltip/Tooltip.js';
|
5
5
|
import { IconButton } from '../../../../IconButton/IconButton.js';
|
6
6
|
import { useLocalization } from '../../../../Provider/Localization.js';
|
7
|
+
import { Button } from '../../../../Button/Button.js';
|
7
8
|
import { Spinner } from '../../../../Spinner/Spinner.js';
|
9
|
+
import { Dialog } from '../../../../Dialog/Dialog.js';
|
10
|
+
import { Group } from '../../../../Group/Group.js';
|
8
11
|
import useTimer from '../../../../../utils/hooks/useTimer.js';
|
9
12
|
import { Menu } from '../../../../Menu/Menu.js';
|
10
13
|
import { Header } from '../header/Header.js';
|
11
14
|
import { RowContext } from '../../rows/RowContext.js';
|
12
15
|
import { DisplayCell } from '../cell/DisplayCell.js';
|
13
16
|
import { Footer } from '../footer/Footer.js';
|
14
|
-
import {
|
17
|
+
import { getColumnIndex } from '../../../util/editing.js';
|
18
|
+
import { lastCellIndex } from '../../rows/Row.js';
|
19
|
+
import { SavingStatusValue } from '../../../hooks/features/useEditing.js';
|
15
20
|
|
16
21
|
const savingIndicatorHideDelay = 3000;
|
17
22
|
const COLUMN_ID = '__editing_actions';
|
18
23
|
const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
|
24
|
+
var _column$columnDef$met;
|
19
25
|
const {
|
20
26
|
hasChanges,
|
21
27
|
isCurrentRow,
|
22
|
-
isEditing,
|
23
28
|
row,
|
29
|
+
editing,
|
30
|
+
rowIdentifier,
|
24
31
|
table
|
25
32
|
} = props;
|
26
|
-
const
|
27
|
-
const savingState = tableMeta.editing.savingStates && tableMeta.editing.savingStates[row.id];
|
33
|
+
const savingStatus = editing.getSavingStatus(row.id);
|
28
34
|
const [isSavedIndicatorVisible, setIsSavingIndicatorVisible] = React__default.useState(false);
|
29
35
|
const {
|
30
36
|
texts
|
31
37
|
} = useLocalization();
|
38
|
+
const [clearConfirmationOpen, setClearConfirmationOpen] = React__default.useState(false);
|
39
|
+
const columns = table.getAllFlatColumns();
|
40
|
+
const column = columns.find(column => column.id === rowIdentifier);
|
41
|
+
const rowIdentifierHeader = column === null || column === void 0 ? void 0 : (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header;
|
42
|
+
const edititngActionsRef = React__default.useRef(null);
|
43
|
+
const tableMeta = table.options.meta;
|
32
44
|
const handleSaved = () => {
|
33
45
|
setIsSavingIndicatorVisible(false);
|
34
|
-
|
46
|
+
editing.resetSavingStatus(row.id);
|
35
47
|
};
|
36
48
|
const timer = useTimer(savingIndicatorHideDelay, handleSaved);
|
37
49
|
React__default.useEffect(() => {
|
38
|
-
if (
|
50
|
+
if (savingStatus && savingStatus === SavingStatusValue.Saved && !isSavedIndicatorVisible) {
|
39
51
|
setIsSavingIndicatorVisible(true);
|
40
52
|
timer.start();
|
41
53
|
}
|
42
|
-
}, [
|
54
|
+
}, [savingStatus]);
|
55
|
+
React__default.useEffect(() => {
|
56
|
+
tableMeta.shortcutsState.pause(clearConfirmationOpen);
|
57
|
+
}, [clearConfirmationOpen]);
|
43
58
|
let content;
|
44
|
-
if (
|
45
|
-
if (
|
59
|
+
if (savingStatus) {
|
60
|
+
if (savingStatus === SavingStatusValue.Saving) {
|
46
61
|
content = /*#__PURE__*/React__default.createElement(Tooltip, {
|
47
62
|
title: texts.table3.editing.saving.progress
|
48
63
|
}, /*#__PURE__*/React__default.createElement(Spinner, {
|
@@ -58,25 +73,48 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
|
|
58
73
|
}));
|
59
74
|
}
|
60
75
|
}
|
61
|
-
if (isEditing && isCurrentRow) {
|
76
|
+
if (editing.isEditing && isCurrentRow) {
|
62
77
|
content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content, /*#__PURE__*/React__default.createElement(IconButton, {
|
78
|
+
ref: edititngActionsRef,
|
63
79
|
appearance: "transparent",
|
64
80
|
"aria-label": texts.table3.editing.actions.tooltip,
|
65
81
|
icon: "more",
|
66
82
|
menu: menuProps => /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, /*#__PURE__*/React__default.createElement(Menu.Item, {
|
67
83
|
icon: "tick",
|
68
84
|
disabled: !hasChanges,
|
69
|
-
onClick: () =>
|
85
|
+
onClick: () => editing.saveChangesIfNeeded()
|
70
86
|
}, texts.table3.editing.actions.save), /*#__PURE__*/React__default.createElement(Menu.Item, {
|
71
87
|
icon: "close",
|
72
88
|
disabled: !hasChanges,
|
73
|
-
onClick: () =>
|
89
|
+
onClick: () => setClearConfirmationOpen(true)
|
74
90
|
}, texts.table3.editing.actions.clear), /*#__PURE__*/React__default.createElement(Menu.Item, {
|
75
91
|
icon: "undo",
|
76
|
-
onClick: () =>
|
92
|
+
onClick: () => editing.toggleEditing(false)
|
77
93
|
}, texts.table3.editing.actions.exit))),
|
78
94
|
tabIndex: isCurrentRow ? 0 : -1
|
79
|
-
})
|
95
|
+
}), /*#__PURE__*/React__default.createElement(Dialog, {
|
96
|
+
size: "xs",
|
97
|
+
open: clearConfirmationOpen,
|
98
|
+
onClose: () => {
|
99
|
+
setClearConfirmationOpen(false);
|
100
|
+
requestAnimationFrame(() => {
|
101
|
+
if (edititngActionsRef.current) {
|
102
|
+
edititngActionsRef.current.focus();
|
103
|
+
// When table looses focus, we need to re-set the last column index
|
104
|
+
lastCellIndex.value = getColumnIndex(edititngActionsRef.current);
|
105
|
+
}
|
106
|
+
});
|
107
|
+
}
|
108
|
+
}, /*#__PURE__*/React__default.createElement(Dialog.Content, {
|
109
|
+
"aria-label": texts.table3.editing.clearChangesConfirmationDialog.title
|
110
|
+
}, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description.replace('[ROW_IDENTIFIER]', rowIdentifier && rowIdentifierHeader ? rowIdentifierHeader : texts.table3.validation.index).replace('[ROW_IDENTIFIER_VALUE]', rowIdentifier && rowIdentifierHeader ? row.original[rowIdentifier] : row.index)), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
|
111
|
+
tabIndex: 0
|
112
|
+
}, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
|
113
|
+
tabIndex: 0,
|
114
|
+
appearance: "primary",
|
115
|
+
autoFocus: true,
|
116
|
+
onClick: () => editing.resetChange(row.id)
|
117
|
+
}, texts.table3.editing.clearChangesConfirmationDialog.confirm)))))));
|
80
118
|
}
|
81
119
|
const contentClassName = cn('flex items-center justify-end text-right', {
|
82
120
|
'-mb-2 -mt-2': isCurrentRow
|
@@ -98,15 +136,17 @@ function Cell(props) {
|
|
98
136
|
return /*#__PURE__*/React__default.createElement(MemoedCell, Object.assign({}, props, {
|
99
137
|
hasChanges: changeset.indexOf(props.row.id) >= 0,
|
100
138
|
isCurrentRow: tableMeta.currentRow.currentRowIndex === rowIndex,
|
101
|
-
|
139
|
+
editing: tableMeta.editing
|
102
140
|
}));
|
103
141
|
}
|
104
142
|
const EDITING_ACTIONS_WIDTH = 60;
|
105
|
-
function createRowEditingActionsColumn() {
|
143
|
+
function createRowEditingActionsColumn(rowIdentifier) {
|
106
144
|
return {
|
107
145
|
id: COLUMN_ID,
|
108
146
|
header: Header,
|
109
|
-
cell: Cell,
|
147
|
+
cell: context => /*#__PURE__*/React__default.createElement(Cell, Object.assign({}, context, {
|
148
|
+
rowIdentifier: rowIdentifier
|
149
|
+
})),
|
110
150
|
footer: Footer,
|
111
151
|
meta: {
|
112
152
|
align: 'right',
|