@economic/taco 2.34.0 → 2.34.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/Icon/components/DocumentSigned.d.ts +3 -0
- package/dist/components/Icon/components/Home2.d.ts +3 -0
- package/dist/components/Icon/components/Id.d.ts +3 -0
- package/dist/components/Icon/components/MastercardOs.d.ts +3 -0
- package/dist/components/Icon/components/NovemberFirst.d.ts +3 -0
- package/dist/components/Icon/components/index.d.ts +1 -1
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Menu/components/Item.d.ts +1 -1
- package/dist/components/Menu/components/Link.d.ts +1 -1
- package/dist/components/Navigation2/components/Link.d.ts +1 -1
- package/dist/components/Select2/components/Option.d.ts +2 -2
- package/dist/components/Select2/components/Search.d.ts +1 -1
- package/dist/components/Table3/components/Columns/Internal/EditingActionsMenu.d.ts +1 -0
- package/dist/components/Table3/features/useTableEditing.d.ts +0 -1
- package/dist/components/Table3/listeners/useTableEditingListener.d.ts +3 -1
- package/dist/components/Tag/Tag.d.ts +1 -1
- package/dist/esm/packages/taco/src/components/Icon/components/DocumentSigned.js +19 -0
- package/dist/esm/packages/taco/src/components/Icon/components/DocumentSigned.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/Home2.js +19 -0
- package/dist/esm/packages/taco/src/components/Icon/components/Home2.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/Id.js +19 -0
- package/dist/esm/packages/taco/src/components/Icon/components/Id.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/MastercardOs.js +23 -0
- package/dist/esm/packages/taco/src/components/Icon/components/MastercardOs.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/NovemberFirst.js +20 -0
- package/dist/esm/packages/taco/src/components/Icon/components/NovemberFirst.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/index.js +10 -0
- package/dist/esm/packages/taco/src/components/Icon/components/index.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Input/Input.js +5 -0
- package/dist/esm/packages/taco/src/components/Input/Input.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/Table3.js +1 -7
- package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js +1 -0
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Internal/EditingActionsMenu.js +9 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Internal/EditingActionsMenu.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js +1 -12
- package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js +16 -1
- package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/useTable3.js +3 -2
- package/dist/esm/packages/taco/src/components/Table3/useTable3.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/Table.js +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/Table.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js +1 -2
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js.map +1 -1
- package/dist/taco.cjs.development.js +123 -25
- 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
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RowMoveIndicator.js","sources":["../../../../../../../../../../../src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { Cell as ReactTableCell, TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { Tooltip } from '../../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../../Provider/Localization';\nimport { Icon } from '../../../../../Icon/Icon';\n\ntype TableRowMoveIndicatorProps<TType = unknown> = {\n cell: ReactTableCell<TType, unknown>;\n cellRef: React.RefObject<HTMLTableCellElement>;\n isActiveRow: boolean;\n};\n\nexport function RowMoveIndicator<TType = unknown>(props: TableRowMoveIndicatorProps<TType>) {\n const { cell, cellRef, isActiveRow } = props;\n const { texts } = useLocalization();\n const [show, setShow] = React.useState(false);\n const tableMeta = cell.getContext().table.options.meta as ReactTableMeta<TType>;\n const columnMeta = (cell.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n const moveReason = tableMeta.editing.getRowMoveReason(cell.row.id);\n\n React.useEffect(() => {\n if (cellRef.current) {\n if (isActiveRow && !!moveReason) {\n const firstChild = cellRef.current.parentElement?.querySelector(
|
1
|
+
{"version":3,"file":"RowMoveIndicator.js","sources":["../../../../../../../../../../../src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { Cell as ReactTableCell, TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { Tooltip } from '../../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../../Provider/Localization';\nimport { Icon } from '../../../../../Icon/Icon';\n\ntype TableRowMoveIndicatorProps<TType = unknown> = {\n cell: ReactTableCell<TType, unknown>;\n cellRef: React.RefObject<HTMLTableCellElement>;\n isActiveRow: boolean;\n};\n\nexport function RowMoveIndicator<TType = unknown>(props: TableRowMoveIndicatorProps<TType>) {\n const { cell, cellRef, isActiveRow } = props;\n const { texts } = useLocalization();\n const [show, setShow] = React.useState(false);\n const tableMeta = cell.getContext().table.options.meta as ReactTableMeta<TType>;\n const columnMeta = (cell.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n const moveReason = tableMeta.editing.getRowMoveReason(cell.row.id);\n\n React.useEffect(() => {\n if (cellRef.current) {\n if (isActiveRow && !!moveReason) {\n const firstChild = cellRef.current.parentElement?.querySelector(`td[data-taco=\"cell-control\"]`);\n\n if (cellRef.current === firstChild) {\n setShow(true);\n cellRef.current.parentElement?.setAttribute('data-row-editing-move', 'true');\n }\n } else {\n setShow(false);\n cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n }\n }\n\n return () => {\n if (cellRef.current) {\n cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n }\n };\n }, [cellRef, isActiveRow, moveReason]);\n\n if (!show) {\n return null;\n }\n\n const className =\n 'wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap rounded-b-md px-1 py-1 text-xs font-bold z-10';\n\n const { title, description } = getMessageFromReason(texts, moveReason);\n\n return (\n <Tooltip placement=\"bottom\" title={description.replace('[COLUMN]', columnMeta.header)}>\n <span className={className}>\n <Icon name=\"info\" className=\"-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n {title}\n </span>\n </Tooltip>\n );\n}\n\nfunction getMessageFromReason(texts, reason) {\n let title = '';\n let description = '';\n\n switch (reason) {\n case 'filter':\n title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;\n break;\n\n case 'search':\n title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;\n break;\n\n case 'sorting':\n title = texts.table3.editing.rowIndicator.rowWillMove;\n description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;\n break;\n }\n\n return { title, description };\n}\n"],"names":["RowMoveIndicator","props","cell","cellRef","isActiveRow","texts","useLocalization","show","setShow","React","useState","tableMeta","getContext","table","options","meta","columnMeta","_cell$column$columnDe","column","columnDef","moveReason","editing","getRowMoveReason","row","id","useEffect","current","_cellRef$current$pare","firstChild","parentElement","querySelector","_cellRef$current$pare2","setAttribute","_cellRef$current$pare3","removeAttribute","_cellRef$current$pare4","className","title","description","getMessageFromReason","Tooltip","placement","replace","header","Icon","name","reason","table3","rowIndicator","rowWillBeHidden","rowWillMoveReasonFilter","rowWillMoveReasonSearch","rowWillMove","rowWillMoveReasonSorting"],"mappings":"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"}
|
package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js
CHANGED
@@ -61,6 +61,7 @@ function EditingControlCell(props) {
|
|
61
61
|
const cellAttributes = {
|
62
62
|
...getCellAttributes(cell, index, isHighlighted),
|
63
63
|
'data-cell-editing-invalid': error ? true : undefined,
|
64
|
+
'data-taco': 'cell-control',
|
64
65
|
onFocus: handleFocus,
|
65
66
|
ref: cellRef,
|
66
67
|
tabIndex: -1
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"EditingControlCell.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Cell/EditingControlCell.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { isDate } from 'date-fns';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { TableColumnDataType, TableColumnRendererControl, TableFontSize } from '../../../../../primitives/Table/types';\nimport { isWeakEqual as isWeakEqualDate } from '../../../../../utils/date';\nimport { RowMoveIndicator } from './Editing/RowMoveIndicator';\nimport { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing';\nimport { Field } from '../../../../Field/Field';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../../../utils/dom';\nimport { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\nimport { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext';\nimport { getCellAttributes } from '../../../../../primitives/Table/Core/components/Columns/Cell/util';\nimport { useEditingCellAutofocus } from './util';\nimport { isPressingMetaKey } from '../../../../../utils/keyboard';\n\nexport function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n const { cell, cellRef, isHighlighted, index } = props;\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = cell.getContext().table.options.meta as ReactTableMeta<TType>;\n const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n\n const handleFocus = useEditingCellAutofocus<TType>(props);\n\n const handleBlur = () => {\n tableMeta.editing.toggleDetailedMode(false);\n tableMeta.editing.validateCell(cell);\n };\n\n // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)\n React.useEffect(() => {\n const ref = cellRef.current;\n\n return () => {\n if (document.activeElement === ref || isElementInsideOrTriggeredFromContainer(document.activeElement, ref)) {\n handleBlur();\n }\n };\n }, []);\n\n const error = tableMeta.editing.getCellError<TType>(cell);\n\n const controlProps = {\n dataType: columnMeta.dataType,\n fontSize: tableMeta.fontSize.size,\n id: cell.column.id,\n invalid: !!error,\n isDetailedMode: tableMeta.editing.isDetailedMode,\n isTruncated: !!columnMeta.enableTruncate,\n onBlur: handleBlur,\n onChange: (value: unknown) => tableMeta.editing.setCellValue(cell, value, rowIndex),\n row: cell.row.original,\n tabIndex: isActiveRow ? 0 : -1,\n toggleEditing: tableMeta.editing.toggleEditing,\n toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n type: columnMeta.control ?? 'input',\n value: cell.getValue(),\n };\n\n const cellAttributes = {\n ...getCellAttributes(cell, index, isHighlighted),\n 'data-cell-editing-invalid': error ? true : undefined,\n onFocus: handleFocus,\n ref: cellRef,\n tabIndex: -1,\n };\n\n return (\n <td {...cellAttributes}>\n <Field invalid={!!error} message={error}>\n <MemoedEditingCell<TType> {...controlProps} />\n </Field>\n {\n // we show row move indicator here within the cell rather than the row because it is\n // an editing only feature, and we don't want to leak editing into the shared row component\n }\n <RowMoveIndicator cell={cell} cellRef={cellRef} isActiveRow={isActiveRow} />\n </td>\n );\n}\n\ntype MemoedEditingCellProps<TType = unknown, TValue = unknown> = {\n dataType?: TableColumnDataType;\n fontSize: TableFontSize;\n id: string;\n invalid: boolean;\n isDetailedMode: boolean;\n isTruncated: boolean;\n onBlur: () => void;\n onChange: (value: TValue) => void;\n row: TType;\n tabIndex?: number;\n toggleEditing: (editing: React.SetStateAction<boolean>) => void;\n toggleDetailedMode: (detailed: React.SetStateAction<boolean>) => void;\n type: TableColumnRendererControl<TType>;\n value: TValue;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n const {\n dataType,\n fontSize,\n id,\n invalid,\n isDetailedMode,\n isTruncated,\n onBlur,\n onChange,\n row,\n tabIndex = -1,\n toggleEditing,\n toggleDetailedMode,\n type = 'input',\n value,\n } = props;\n const controlRef = React.useRef<HTMLElement>(null);\n const currentValue = row[id];\n const commonProps = {\n onBlur,\n ref: controlRef,\n tabIndex,\n };\n\n if (typeof type === 'function') {\n const controlFnProps = {\n ...commonProps,\n invalid,\n setValue: onChange,\n value,\n };\n return type(controlFnProps, row);\n }\n\n if (type === 'switch') {\n return (\n <Switch\n {...commonProps}\n checked={Boolean(value)}\n onChange={onChange}\n ref={controlRef as React.RefObject<HTMLButtonElement>}\n />\n );\n }\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n if (target.readOnly) {\n return;\n }\n\n // prevent active row navigation while in detailed mode\n if (\n isDetailedMode &&\n (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')\n ) {\n event.stopPropagation();\n }\n\n // enter or exit detail mode when pressing enter\n if (event.key === 'Enter') {\n // textareas support shift and enter, don't prevent default in that case\n if (event.shiftKey && isDetailedMode) {\n return;\n }\n\n event.preventDefault();\n\n if (isDetailedMode) {\n target.select?.();\n } else {\n target.setSelectionRange?.(target.value?.length, target.value?.length);\n }\n\n toggleDetailedMode(editing => !editing);\n return;\n }\n\n // reset the value, or exit edit mode when pressing escape\n if (event.key === 'Escape') {\n event.preventDefault();\n\n if (isDetailedMode) {\n toggleDetailedMode(false);\n\n if (value !== currentValue) {\n props.onChange(currentValue);\n }\n\n // have to let onChange run before selecting, otherwise the value changes\n requestAnimationFrame(() => target.select?.());\n } else {\n toggleEditing(false);\n }\n\n return;\n }\n\n // toggle into detailed mode when actually inputting something\n if (!isPressingMetaKey(event) && (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace')) {\n toggleDetailedMode(true);\n }\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n if (!isDetailedMode) {\n event.target.select();\n }\n };\n\n if (type === 'datepicker') {\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const newDate = (event as any).detail;\n\n if (!value || !newDate || (isDate(value) && isDate(newDate) && !isWeakEqualDate(value as Date, newDate as Date))) {\n props.onChange((event as any).detail);\n }\n };\n\n return (\n <Datepicker\n {...commonProps}\n invalid={invalid}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLInputElement>}\n value={value as Date}\n />\n );\n }\n\n if (type === 'textarea') {\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n onChange(event.target.value);\n };\n\n return (\n <TextareaWithAutosizing\n {...commonProps}\n fontSize={fontSize}\n invalid={invalid}\n isTruncated={isTruncated}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLTextAreaElement>}\n value={String(value ?? '')}\n />\n );\n }\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange(dataType === 'number' && event.target.value ? Number.parseInt(event.target.value) : event.target.value);\n };\n\n return (\n <Input\n {...commonProps}\n invalid={invalid}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLInputElement>}\n type={dataType === 'number' ? 'number' : undefined}\n value={dataType === 'number' ? (value as number) : String(value ?? '')}\n />\n );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n"],"names":["EditingControlCell","props","cell","cellRef","isHighlighted","index","rowIndex","React","useContext","RowContext","tableMeta","getContext","table","options","meta","columnMeta","column","columnDef","isActiveRow","rowActive","rowActiveIndex","handleFocus","useEditingCellAutofocus","handleBlur","editing","toggleDetailedMode","validateCell","useEffect","ref","current","document","activeElement","isElementInsideOrTriggeredFromContainer","error","getCellError","controlProps","dataType","fontSize","size","id","invalid","isDetailedMode","isTruncated","enableTruncate","onBlur","onChange","value","setCellValue","row","original","tabIndex","toggleEditing","type","_columnMeta$control","control","getValue","cellAttributes","getCellAttributes","undefined","onFocus","Field","message","MemoedEditingCell","RowMoveIndicator","memo","controlRef","useRef","currentValue","commonProps","controlFnProps","setValue","Switch","checked","Boolean","handleInputKeyDown","event","target","readOnly","key","stopPropagation","shiftKey","preventDefault","_target$select","select","call","_target$setSelectionR","_target$value","_target$value2","setSelectionRange","length","requestAnimationFrame","_target$select2","isPressingMetaKey","test","handleChange","newDate","detail","isDate","isWeakEqualDate","Datepicker","onKeyDown","TextareaWithAutosizing","String","Number","parseInt","Input"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"EditingControlCell.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Cell/EditingControlCell.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { isDate } from 'date-fns';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { TableColumnDataType, TableColumnRendererControl, TableFontSize } from '../../../../../primitives/Table/types';\nimport { isWeakEqual as isWeakEqualDate } from '../../../../../utils/date';\nimport { RowMoveIndicator } from './Editing/RowMoveIndicator';\nimport { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing';\nimport { Field } from '../../../../Field/Field';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../../../utils/dom';\nimport { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\nimport { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext';\nimport { getCellAttributes } from '../../../../../primitives/Table/Core/components/Columns/Cell/util';\nimport { useEditingCellAutofocus } from './util';\nimport { isPressingMetaKey } from '../../../../../utils/keyboard';\n\nexport function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n const { cell, cellRef, isHighlighted, index } = props;\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = cell.getContext().table.options.meta as ReactTableMeta<TType>;\n const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n\n const handleFocus = useEditingCellAutofocus<TType>(props);\n\n const handleBlur = () => {\n tableMeta.editing.toggleDetailedMode(false);\n tableMeta.editing.validateCell(cell);\n };\n\n // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)\n React.useEffect(() => {\n const ref = cellRef.current;\n\n return () => {\n if (document.activeElement === ref || isElementInsideOrTriggeredFromContainer(document.activeElement, ref)) {\n handleBlur();\n }\n };\n }, []);\n\n const error = tableMeta.editing.getCellError<TType>(cell);\n\n const controlProps = {\n dataType: columnMeta.dataType,\n fontSize: tableMeta.fontSize.size,\n id: cell.column.id,\n invalid: !!error,\n isDetailedMode: tableMeta.editing.isDetailedMode,\n isTruncated: !!columnMeta.enableTruncate,\n onBlur: handleBlur,\n onChange: (value: unknown) => tableMeta.editing.setCellValue(cell, value, rowIndex),\n row: cell.row.original,\n tabIndex: isActiveRow ? 0 : -1,\n toggleEditing: tableMeta.editing.toggleEditing,\n toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n type: columnMeta.control ?? 'input',\n value: cell.getValue(),\n };\n\n const cellAttributes = {\n ...getCellAttributes(cell, index, isHighlighted),\n 'data-cell-editing-invalid': error ? true : undefined,\n 'data-taco': 'cell-control',\n onFocus: handleFocus,\n ref: cellRef,\n tabIndex: -1,\n };\n\n return (\n <td {...cellAttributes}>\n <Field invalid={!!error} message={error}>\n <MemoedEditingCell<TType> {...controlProps} />\n </Field>\n {\n // we show row move indicator here within the cell rather than the row because it is\n // an editing only feature, and we don't want to leak editing into the shared row component\n }\n <RowMoveIndicator cell={cell} cellRef={cellRef} isActiveRow={isActiveRow} />\n </td>\n );\n}\n\ntype MemoedEditingCellProps<TType = unknown, TValue = unknown> = {\n dataType?: TableColumnDataType;\n fontSize: TableFontSize;\n id: string;\n invalid: boolean;\n isDetailedMode: boolean;\n isTruncated: boolean;\n onBlur: () => void;\n onChange: (value: TValue) => void;\n row: TType;\n tabIndex?: number;\n toggleEditing: (editing: React.SetStateAction<boolean>) => void;\n toggleDetailedMode: (detailed: React.SetStateAction<boolean>) => void;\n type: TableColumnRendererControl<TType>;\n value: TValue;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n const {\n dataType,\n fontSize,\n id,\n invalid,\n isDetailedMode,\n isTruncated,\n onBlur,\n onChange,\n row,\n tabIndex = -1,\n toggleEditing,\n toggleDetailedMode,\n type = 'input',\n value,\n } = props;\n const controlRef = React.useRef<HTMLElement>(null);\n const currentValue = row[id];\n const commonProps = {\n onBlur,\n ref: controlRef,\n tabIndex,\n };\n\n if (typeof type === 'function') {\n const controlFnProps = {\n ...commonProps,\n invalid,\n setValue: onChange,\n value,\n };\n return type(controlFnProps, row);\n }\n\n if (type === 'switch') {\n return (\n <Switch\n {...commonProps}\n checked={Boolean(value)}\n onChange={onChange}\n ref={controlRef as React.RefObject<HTMLButtonElement>}\n />\n );\n }\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n if (target.readOnly) {\n return;\n }\n\n // prevent active row navigation while in detailed mode\n if (\n isDetailedMode &&\n (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')\n ) {\n event.stopPropagation();\n }\n\n // enter or exit detail mode when pressing enter\n if (event.key === 'Enter') {\n // textareas support shift and enter, don't prevent default in that case\n if (event.shiftKey && isDetailedMode) {\n return;\n }\n\n event.preventDefault();\n\n if (isDetailedMode) {\n target.select?.();\n } else {\n target.setSelectionRange?.(target.value?.length, target.value?.length);\n }\n\n toggleDetailedMode(editing => !editing);\n return;\n }\n\n // reset the value, or exit edit mode when pressing escape\n if (event.key === 'Escape') {\n event.preventDefault();\n\n if (isDetailedMode) {\n toggleDetailedMode(false);\n\n if (value !== currentValue) {\n props.onChange(currentValue);\n }\n\n // have to let onChange run before selecting, otherwise the value changes\n requestAnimationFrame(() => target.select?.());\n } else {\n toggleEditing(false);\n }\n\n return;\n }\n\n // toggle into detailed mode when actually inputting something\n if (!isPressingMetaKey(event) && (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace')) {\n toggleDetailedMode(true);\n }\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n if (!isDetailedMode) {\n event.target.select();\n }\n };\n\n if (type === 'datepicker') {\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const newDate = (event as any).detail;\n\n if (!value || !newDate || (isDate(value) && isDate(newDate) && !isWeakEqualDate(value as Date, newDate as Date))) {\n props.onChange((event as any).detail);\n }\n };\n\n return (\n <Datepicker\n {...commonProps}\n invalid={invalid}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLInputElement>}\n value={value as Date}\n />\n );\n }\n\n if (type === 'textarea') {\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n onChange(event.target.value);\n };\n\n return (\n <TextareaWithAutosizing\n {...commonProps}\n fontSize={fontSize}\n invalid={invalid}\n isTruncated={isTruncated}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLTextAreaElement>}\n value={String(value ?? '')}\n />\n );\n }\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange(dataType === 'number' && event.target.value ? Number.parseInt(event.target.value) : event.target.value);\n };\n\n return (\n <Input\n {...commonProps}\n invalid={invalid}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={controlRef as React.RefObject<HTMLInputElement>}\n type={dataType === 'number' ? 'number' : undefined}\n value={dataType === 'number' ? (value as number) : String(value ?? '')}\n />\n );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n"],"names":["EditingControlCell","props","cell","cellRef","isHighlighted","index","rowIndex","React","useContext","RowContext","tableMeta","getContext","table","options","meta","columnMeta","column","columnDef","isActiveRow","rowActive","rowActiveIndex","handleFocus","useEditingCellAutofocus","handleBlur","editing","toggleDetailedMode","validateCell","useEffect","ref","current","document","activeElement","isElementInsideOrTriggeredFromContainer","error","getCellError","controlProps","dataType","fontSize","size","id","invalid","isDetailedMode","isTruncated","enableTruncate","onBlur","onChange","value","setCellValue","row","original","tabIndex","toggleEditing","type","_columnMeta$control","control","getValue","cellAttributes","getCellAttributes","undefined","onFocus","Field","message","MemoedEditingCell","RowMoveIndicator","memo","controlRef","useRef","currentValue","commonProps","controlFnProps","setValue","Switch","checked","Boolean","handleInputKeyDown","event","target","readOnly","key","stopPropagation","shiftKey","preventDefault","_target$select","select","call","_target$setSelectionR","_target$value","_target$value2","setSelectionRange","length","requestAnimationFrame","_target$select2","isPressingMetaKey","test","handleChange","newDate","detail","isDate","isWeakEqualDate","Datepicker","onKeyDown","TextareaWithAutosizing","String","Number","parseInt","Input"],"mappings":"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"}
|
@@ -12,16 +12,24 @@ function EditingActionMenu(props) {
|
|
12
12
|
hasErrors,
|
13
13
|
onClear: handleClear,
|
14
14
|
onExit: handleExit,
|
15
|
-
onSave: handleSave
|
15
|
+
onSave: handleSave,
|
16
|
+
isLastRow
|
16
17
|
} = props;
|
17
18
|
const {
|
18
19
|
texts
|
19
20
|
} = useLocalization();
|
21
|
+
const handleKeyDown = event => {
|
22
|
+
// normally we handle this on change of active row, but when tabbing out of the last row the active row state stays on the last one.
|
23
|
+
if (isLastRow && hasChanges && event.key === 'Tab') {
|
24
|
+
handleSave();
|
25
|
+
}
|
26
|
+
};
|
20
27
|
return /*#__PURE__*/React__default.createElement(IconButton, {
|
21
28
|
appearance: "transparent",
|
22
29
|
"aria-label": texts.table3.editing.actions.tooltip,
|
23
30
|
className: "group-[[data-row-editing-status]]/row:hidden",
|
24
31
|
icon: "more",
|
32
|
+
onKeyDown: handleKeyDown,
|
25
33
|
menu: menuProps => ( /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, /*#__PURE__*/React__default.createElement(Menu.Item, {
|
26
34
|
icon: "tick",
|
27
35
|
disabled: !hasChanges || hasErrors,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"EditingActionsMenu.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Internal/EditingActionsMenu.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Menu } from '../../../../Menu/Menu';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Dialog, DialogProps } from '../../../../Dialog/Dialog';\nimport { Group } from '../../../../Group/Group';\nimport { Button } from '../../../../Button/Button';\n\ntype EditingActionMenuProps = {\n hasChanges: boolean;\n hasErrors: boolean;\n onClear: () => void;\n onExit: () => void;\n onSave: () => Promise<void>;\n};\n\nexport function EditingActionMenu(props: EditingActionMenuProps) {\n const { hasChanges, hasErrors, onClear: handleClear, onExit: handleExit, onSave: handleSave } = props;\n const { texts } = useLocalization();\n\n return (\n <IconButton\n appearance=\"transparent\"\n aria-label={texts.table3.editing.actions.tooltip}\n className=\"group-[[data-row-editing-status]]/row:hidden\"\n icon=\"more\"\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content>\n <Menu.Item icon=\"tick\" disabled={!hasChanges || hasErrors} onClick={handleSave}>\n {texts.table3.editing.actions.save}\n </Menu.Item>\n <Menu.Item\n icon=\"close\"\n disabled={!hasChanges}\n dialog={props => <ConfirmClearChangesDialog {...props} onClear={handleClear} />}>\n {texts.table3.editing.actions.clear}\n </Menu.Item>\n <Menu.Item icon=\"undo\" onClick={handleExit}>\n {texts.table3.editing.actions.exit}\n </Menu.Item>\n </Menu.Content>\n </Menu>\n )}\n />\n );\n}\n\ntype ConfirmClearChangesDialogProps = Partial<DialogProps> & {\n onClear: () => void;\n};\n\nfunction ConfirmClearChangesDialog(props: ConfirmClearChangesDialogProps) {\n const { onClear: handleClear, ...dialogProps } = props;\n const { texts } = useLocalization();\n\n return (\n <Dialog {...dialogProps}>\n <Dialog.Content aria-label={texts.table3.editing.clearChangesConfirmationDialog.title}>\n <Dialog.Title>{texts.table3.editing.clearChangesConfirmationDialog.title}</Dialog.Title>\n\n <p>{texts.table3.editing.clearChangesConfirmationDialog.description}</p>\n\n <Dialog.Footer>\n <Group>\n <Dialog.Close>\n <Button tabIndex={0}>{texts.table3.editing.clearChangesConfirmationDialog.cancel}</Button>\n </Dialog.Close>\n <Dialog.Close>\n <Button tabIndex={0} appearance=\"primary\" autoFocus onClick={handleClear}>\n {texts.table3.editing.clearChangesConfirmationDialog.confirm}\n </Button>\n </Dialog.Close>\n </Group>\n </Dialog.Footer>\n </Dialog.Content>\n </Dialog>\n );\n}\n"],"names":["EditingActionMenu","props","hasChanges","hasErrors","onClear","handleClear","onExit","handleExit","onSave","handleSave","texts","useLocalization","React","IconButton","appearance","table3","editing","actions","tooltip","className","icon","menu","menuProps","Menu","Content","Item","disabled","onClick","save","dialog","ConfirmClearChangesDialog","clear","exit","dialogProps","Dialog","clearChangesConfirmationDialog","title","Title","description","Footer","Group","Close","Button","tabIndex","cancel","autoFocus","confirm"],"mappings":";;;;;;;;
|
1
|
+
{"version":3,"file":"EditingActionsMenu.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Internal/EditingActionsMenu.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Menu } from '../../../../Menu/Menu';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Dialog, DialogProps } from '../../../../Dialog/Dialog';\nimport { Group } from '../../../../Group/Group';\nimport { Button } from '../../../../Button/Button';\n\ntype EditingActionMenuProps = {\n hasChanges: boolean;\n hasErrors: boolean;\n onClear: () => void;\n onExit: () => void;\n onSave: () => Promise<void>;\n isLastRow: boolean;\n};\n\nexport function EditingActionMenu(props: EditingActionMenuProps) {\n const { hasChanges, hasErrors, onClear: handleClear, onExit: handleExit, onSave: handleSave, isLastRow } = props;\n const { texts } = useLocalization();\n\n const handleKeyDown = event => {\n // normally we handle this on change of active row, but when tabbing out of the last row the active row state stays on the last one.\n if (isLastRow && hasChanges && event.key === 'Tab') {\n handleSave();\n }\n };\n\n return (\n <IconButton\n appearance=\"transparent\"\n aria-label={texts.table3.editing.actions.tooltip}\n className=\"group-[[data-row-editing-status]]/row:hidden\"\n icon=\"more\"\n onKeyDown={handleKeyDown}\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content>\n <Menu.Item icon=\"tick\" disabled={!hasChanges || hasErrors} onClick={handleSave}>\n {texts.table3.editing.actions.save}\n </Menu.Item>\n <Menu.Item\n icon=\"close\"\n disabled={!hasChanges}\n dialog={props => <ConfirmClearChangesDialog {...props} onClear={handleClear} />}>\n {texts.table3.editing.actions.clear}\n </Menu.Item>\n <Menu.Item icon=\"undo\" onClick={handleExit}>\n {texts.table3.editing.actions.exit}\n </Menu.Item>\n </Menu.Content>\n </Menu>\n )}\n />\n );\n}\n\ntype ConfirmClearChangesDialogProps = Partial<DialogProps> & {\n onClear: () => void;\n};\n\nfunction ConfirmClearChangesDialog(props: ConfirmClearChangesDialogProps) {\n const { onClear: handleClear, ...dialogProps } = props;\n const { texts } = useLocalization();\n\n return (\n <Dialog {...dialogProps}>\n <Dialog.Content aria-label={texts.table3.editing.clearChangesConfirmationDialog.title}>\n <Dialog.Title>{texts.table3.editing.clearChangesConfirmationDialog.title}</Dialog.Title>\n\n <p>{texts.table3.editing.clearChangesConfirmationDialog.description}</p>\n\n <Dialog.Footer>\n <Group>\n <Dialog.Close>\n <Button tabIndex={0}>{texts.table3.editing.clearChangesConfirmationDialog.cancel}</Button>\n </Dialog.Close>\n <Dialog.Close>\n <Button tabIndex={0} appearance=\"primary\" autoFocus onClick={handleClear}>\n {texts.table3.editing.clearChangesConfirmationDialog.confirm}\n </Button>\n </Dialog.Close>\n </Group>\n </Dialog.Footer>\n </Dialog.Content>\n </Dialog>\n );\n}\n"],"names":["EditingActionMenu","props","hasChanges","hasErrors","onClear","handleClear","onExit","handleExit","onSave","handleSave","isLastRow","texts","useLocalization","handleKeyDown","event","key","React","IconButton","appearance","table3","editing","actions","tooltip","className","icon","onKeyDown","menu","menuProps","Menu","Content","Item","disabled","onClick","save","dialog","ConfirmClearChangesDialog","clear","exit","dialogProps","Dialog","clearChangesConfirmationDialog","title","Title","description","Footer","Group","Close","Button","tabIndex","cancel","autoFocus","confirm"],"mappings":";;;;;;;;SAiBgBA,iBAAiBA,CAACC,KAA6B;EAC3D,MAAM;IAAEC,UAAU;IAAEC,SAAS;IAAEC,OAAO,EAAEC,WAAW;IAAEC,MAAM,EAAEC,UAAU;IAAEC,MAAM,EAAEC,UAAU;IAAEC;GAAW,GAAGT,KAAK;EAChH,MAAM;IAAEU;GAAO,GAAGC,eAAe,EAAE;EAEnC,MAAMC,aAAa,GAAGC,KAAK;;IAEvB,IAAIJ,SAAS,IAAIR,UAAU,IAAIY,KAAK,CAACC,GAAG,KAAK,KAAK,EAAE;MAChDN,UAAU,EAAE;;GAEnB;EAED,oBACIO,6BAACC,UAAU;IACPC,UAAU,EAAC,aAAa;kBACZP,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,OAAO,CAACC,OAAO;IAChDC,SAAS,EAAC,8CAA8C;IACxDC,IAAI,EAAC,MAAM;IACXC,SAAS,EAAEZ,aAAa;IACxBa,IAAI,EAAEC,SAAS,mBACXX,6BAACY,IAAI,oBAAKD,SAAS,gBACfX,6BAACY,IAAI,CAACC,OAAO,qBACTb,6BAACY,IAAI,CAACE,IAAI;MAACN,IAAI,EAAC,MAAM;MAACO,QAAQ,EAAE,CAAC7B,UAAU,IAAIC,SAAS;MAAE6B,OAAO,EAAEvB;OAC/DE,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,OAAO,CAACY,IAAI,CAC1B,eACZjB,6BAACY,IAAI,CAACE,IAAI;MACNN,IAAI,EAAC,OAAO;MACZO,QAAQ,EAAE,CAAC7B,UAAU;MACrBgC,MAAM,EAAEjC,KAAK,iBAAIe,6BAACmB,yBAAyB,oBAAKlC,KAAK;QAAEG,OAAO,EAAEC;;OAC/DM,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,OAAO,CAACe,KAAK,CAC3B,eACZpB,6BAACY,IAAI,CAACE,IAAI;MAACN,IAAI,EAAC,MAAM;MAACQ,OAAO,EAAEzB;OAC3BI,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACC,OAAO,CAACgB,IAAI,CAC1B,CACD,CACZ;IAEb;AAEV;AAMA,SAASF,yBAAyBA,CAAClC,KAAqC;EACpE,MAAM;IAAEG,OAAO,EAAEC,WAAW;IAAE,GAAGiC;GAAa,GAAGrC,KAAK;EACtD,MAAM;IAAEU;GAAO,GAAGC,eAAe,EAAE;EAEnC,oBACII,6BAACuB,MAAM,oBAAKD,WAAW,gBACnBtB,6BAACuB,MAAM,CAACV,OAAO;kBAAalB,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACoB,8BAA8B,CAACC;kBAC5EzB,6BAACuB,MAAM,CAACG,KAAK,QAAE/B,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACoB,8BAA8B,CAACC,KAAK,CAAgB,eAExFzB,wCAAIL,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACoB,8BAA8B,CAACG,WAAW,CAAK,eAExE3B,6BAACuB,MAAM,CAACK,MAAM,qBACV5B,6BAAC6B,KAAK,qBACF7B,6BAACuB,MAAM,CAACO,KAAK,qBACT9B,6BAAC+B,MAAM;IAACC,QAAQ,EAAE;KAAIrC,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACoB,8BAA8B,CAACS,MAAM,CAAU,CAC/E,eACfjC,6BAACuB,MAAM,CAACO,KAAK,qBACT9B,6BAAC+B,MAAM;IAACC,QAAQ,EAAE,CAAC;IAAE9B,UAAU,EAAC,SAAS;IAACgC,SAAS;IAAClB,OAAO,EAAE3B;KACxDM,KAAK,CAACQ,MAAM,CAACC,OAAO,CAACoB,8BAA8B,CAACW,OAAO,CACvD,CACE,CACX,CACI,CACH,CACZ;AAEjB;;;;"}
|
@@ -1,7 +1,5 @@
|
|
1
1
|
import React__default from 'react';
|
2
|
-
import { isElementInsideOrTriggeredFromContainer } from '../../../utils/dom.js';
|
3
2
|
import { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown.js';
|
4
|
-
import { isDate } from 'date-fns';
|
5
3
|
import { _catch } from '../../../../../../node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js';
|
6
4
|
import { willRowMove } from '../util/editing.js';
|
7
5
|
|
@@ -16,14 +14,6 @@ function useTableEditing(isEnabled = false, handleSave, validator) {
|
|
16
14
|
// changes are saved as soon as the active row changes, so in most cases this will only contain the active row's changes
|
17
15
|
// but not always - if validation or server requests fail when saving, those rows remain until the failure is resolved
|
18
16
|
const pendingChangesFns = usePendingChanges(isEnabled, handleSave, validator);
|
19
|
-
// if focus leaves the table in any way, trigger a save
|
20
|
-
const handleBlur = React__default.useCallback(event => {
|
21
|
-
// custom event from datepicker, and it doesn't have the relatedTarget property set.
|
22
|
-
const isClosingDatepicker = isDate(event.detail);
|
23
|
-
if (event.relatedTarget !== event.currentTarget && !isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget) && !isClosingDatepicker) {
|
24
|
-
pendingChangesFns.saveChanges();
|
25
|
-
}
|
26
|
-
}, [pendingChangesFns.saveChanges]);
|
27
17
|
useGlobalKeyDown(isEnabled && isEditing ? {
|
28
18
|
key: 's',
|
29
19
|
meta: true,
|
@@ -40,8 +30,7 @@ function useTableEditing(isEnabled = false, handleSave, validator) {
|
|
40
30
|
toggleEditing: isEnabled ? toggleEditing : () => undefined,
|
41
31
|
lastFocusedCellIndex,
|
42
32
|
setLastFocusedCellIndex,
|
43
|
-
...pendingChangesFns
|
44
|
-
handleBlur: isEnabled && isEditing ? handleBlur : () => undefined
|
33
|
+
...pendingChangesFns
|
45
34
|
};
|
46
35
|
}
|
47
36
|
function usePendingChanges(isEnabled, handleSave, validator) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useTableEditing.js","sources":["../../../../../../../../src/components/Table3/features/useTableEditing.ts"],"sourcesContent":["import React from 'react';\nimport { Cell as ReactTableCell, Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../utils/dom';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\nimport { willRowMove } from '../util/editing';\nimport { TableRef } from '../../../primitives/Table/types';\nimport { isDate } from 'date-fns';\n\nexport function useTableEditing<TType = unknown>(\n isEnabled = false,\n handleSave: Table3EditingSaveHandler<TType> | undefined,\n validator: Table3EditingValidatorFn<TType> | undefined\n) {\n // used to switch the table into editing mode\n const [isEditing, toggleEditing] = React.useState(false);\n\n // used to switch the editing between \"detailed\" mode\n const [isDetailedMode, toggleDetailedMode] = React.useState(false);\n\n // store the last focused cell, so that up/down arrow key navigation remains in the same column\n const [lastFocusedCellIndex, setLastFocusedCellIndex] = useLastFocusedCellIndex();\n\n // store pending changes for each row\n // changes are saved as soon as the active row changes, so in most cases this will only contain the active row's changes\n // but not always - if validation or server requests fail when saving, those rows remain until the failure is resolved\n const pendingChangesFns = usePendingChanges<TType>(isEnabled, handleSave, validator);\n\n // if focus leaves the table in any way, trigger a save\n const handleBlur = React.useCallback(\n (event: React.FocusEvent<HTMLTableElement>) => {\n // custom event from datepicker, and it doesn't have the relatedTarget property set.\n const isClosingDatepicker = isDate((event as any).detail);\n\n if (\n event.relatedTarget !== event.currentTarget &&\n !isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget) &&\n !isClosingDatepicker\n ) {\n pendingChangesFns.saveChanges();\n }\n },\n [pendingChangesFns.saveChanges]\n );\n\n useGlobalKeyDown(isEnabled && isEditing ? { key: 's', meta: true, shift: false } : undefined, event => {\n event.preventDefault();\n pendingChangesFns.saveChanges();\n });\n\n return {\n isEnabled,\n isEditing,\n isDetailedMode,\n toggleDetailedMode: isEnabled ? toggleDetailedMode : () => undefined,\n toggleEditing: isEnabled ? toggleEditing : () => undefined,\n lastFocusedCellIndex,\n setLastFocusedCellIndex,\n ...pendingChangesFns,\n handleBlur: isEnabled && isEditing ? handleBlur : () => undefined,\n };\n}\n\ntype SaveState = 'pending' | 'complete';\ntype PendingChange<TType = unknown> = Partial<TType> & {\n _meta: {\n original: TType;\n moveReason: Record<string, 'search' | 'sorting' | 'filter'>;\n errors: {\n row: string;\n cells: Record<string, string>;\n hasShownErrorAlert: boolean;\n };\n status?: SaveState;\n };\n};\n\nfunction usePendingChanges<TType = unknown>(\n isEnabled: boolean,\n handleSave: Table3EditingSaveHandler<TType> | undefined,\n validator: Table3EditingValidatorFn<TType> | undefined\n) {\n const [pendingChanges, setPendingChanges] = React.useState<Record<string, PendingChange<TType>>>({});\n // we maintain save status as separate state because 'complete' needs to briefly show after pendingChanges are deleted\n const [saveStates, setSaveState] = React.useState<Record<string, SaveState>>({});\n\n function getCellValue<T extends TType>(cell: ReactTableCell<T, unknown>): unknown | undefined {\n return pendingChanges[cell.row.id]?.[cell.column.id];\n }\n\n function getCellError<T extends TType>(cell: ReactTableCell<T, unknown>): string | undefined {\n return pendingChanges[cell.row.id]?._meta.errors?.cells?.[cell.column.id];\n }\n\n const setCellValue = React.useCallback(function <T extends TType>(\n cell: ReactTableCell<T, unknown>,\n change: unknown,\n rowIndex: number\n ) {\n setPendingChanges(currentChanges => {\n const nextChanges = { ...currentChanges };\n const rowChanges = {\n ...currentChanges[cell.row.id],\n _meta: {\n ...currentChanges[cell.row.id]?._meta,\n original: cell.row.original,\n moveReason: {\n ...currentChanges[cell.row.id]?._meta.moveReason,\n },\n errors: {\n ...currentChanges[cell.row.id]?._meta.errors,\n },\n },\n } as PendingChange<T>;\n\n // update if the change is different to the original (saved) value,\n // otherwise remove any change - no point saving the same value\n if (change !== cell.row.original[cell.column.id]) {\n rowChanges[cell.column.id] = change;\n\n // determine if the row will move position based on this change, and save why it will move\n const reason = willRowMove(cell, change, rowIndex);\n\n if (reason) {\n rowChanges._meta.moveReason[cell.column.id] = reason;\n } else {\n delete rowChanges._meta.moveReason[cell.column.id];\n }\n } else {\n delete rowChanges[cell.column.id];\n }\n\n // set the changes for the row...\n // or delete if there are no changes left, so that we don't store changes with unchanged data\n if (Object.keys(rowChanges).filter(k => k !== '_meta').length) {\n nextChanges[cell.row.id] = rowChanges;\n } else {\n delete nextChanges[cell.row.id];\n }\n\n return nextChanges;\n });\n },\n []);\n\n async function validateCell<T extends TType>(cell: ReactTableCell<T, unknown>) {\n if (!validator || !isEnabled) {\n return;\n }\n\n const changeSet = getChangesetFromChanges(pendingChanges[cell.row.id]);\n\n // only validate if the cell being blurred actually has any changes\n if (cell.column.id in changeSet) {\n const errors = ((await validator(changeSet)) ?? {}) as Record<string, string>;\n\n setPendingChanges(currentChanges => {\n const nextChanges = { ...currentChanges };\n nextChanges[cell.row.id]._meta = {\n ...nextChanges[cell.row.id]._meta,\n errors: {\n ...nextChanges[cell.row.id]._meta.errors,\n cells: errors,\n hasShownErrorAlert:\n Object.keys(errors).length && !nextChanges[cell.row.id]._meta.errors.hasShownErrorAlert\n ? false\n : nextChanges[cell.row.id]._meta.errors.hasShownErrorAlert,\n },\n };\n return nextChanges;\n });\n }\n }\n\n function hasRowErrors(rowId: string) {\n if (!isEnabled) {\n return false;\n }\n\n return (\n !!pendingChanges[rowId]?._meta.errors?.row || !!Object.keys(pendingChanges[rowId]?._meta.errors?.cells ?? {}).length\n );\n }\n\n function hasRowErrorsSeen(rowId: string) {\n if (!isEnabled) {\n return false;\n }\n\n return hasRowErrors(rowId) && !!pendingChanges[rowId]._meta.errors?.hasShownErrorAlert;\n }\n\n function setRowErrorsSeen(rowId: string) {\n if (pendingChanges[rowId]._meta.errors?.hasShownErrorAlert === false) {\n setPendingChanges(currentChanges => {\n const nextChanges = { ...currentChanges };\n nextChanges[rowId]._meta.errors = {\n ...nextChanges[rowId]._meta.errors,\n hasShownErrorAlert: true,\n };\n return nextChanges;\n });\n }\n }\n\n function getRowSaveStatus(rowId: string) {\n if (!isEnabled) {\n return false;\n }\n\n return saveStates[rowId];\n }\n\n function setRowSaveStatus(rowId: string, status: 'pending' | 'complete' | undefined) {\n setSaveState(currentStates => {\n const nextStates = { ...currentStates };\n\n if (status) {\n nextStates[rowId] = status;\n } else {\n delete nextStates[rowId];\n }\n\n return nextStates;\n });\n }\n\n function getRowMoveReason(rowId: string) {\n return pendingChanges[rowId]?._meta.moveReason ? Object.values(pendingChanges[rowId]._meta.moveReason)[0] : undefined;\n }\n\n function hasChanges(rowId?: string) {\n if (!isEnabled) {\n return false;\n }\n\n return rowId ? !!pendingChanges[rowId] : !!Object.keys(pendingChanges).length;\n }\n\n function hasErrors<T extends TType>(table: ReactTable<T>, tableRef: React.RefObject<TableRef>) {\n if (!isEnabled) {\n return false;\n }\n\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const focusIsInsideTable = tableRef.current?.contains(document.activeElement);\n\n let activeRow;\n\n if (tableMeta.rowActive.rowActiveIndex !== undefined) {\n activeRow = table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex];\n }\n\n return Object.keys(\n getErrors().filter(error => {\n if (activeRow?.id && focusIsInsideTable) {\n return error.rowId === activeRow?.id ? error.pendingChange._meta.errors.hasShownErrorAlert : true;\n }\n\n return true;\n })\n ).length;\n }\n\n function getErrors<T extends TType>() {\n return Object.keys(pendingChanges)\n .filter(hasRowErrors)\n .map(rowId => ({ rowId, pendingChange: pendingChanges[rowId] as PendingChange<T> }));\n }\n\n function resetChanges(rowId: string) {\n setPendingChanges(currentChanges => {\n const nextChanges = { ...currentChanges };\n delete nextChanges[rowId];\n return nextChanges;\n });\n }\n\n async function saveChanges(rowId: string | undefined = undefined) {\n if (!handleSave) {\n console.warn('Tried to save, but Table has no onSave handler');\n return;\n }\n\n // we save back to pendingChanges, so make a copy of it's state when save was triggered\n const changesToSave = rowId ? { [rowId]: pendingChanges[rowId] } : { ...pendingChanges };\n const changes = Object.keys(changesToSave);\n\n if (changes.length) {\n changes.map(async rowId => {\n const pendingChange = changesToSave[rowId];\n\n const changeSet = getChangesetFromChanges(pendingChange);\n\n try {\n // set saving = true\n setRowSaveStatus(rowId, 'pending');\n\n // re-run validation, maybe a cell is already invalid but has never been blurred\n if (validator) {\n const errors = await validator(changeSet);\n\n if (errors && Object.keys(errors).length) {\n throw errors;\n }\n }\n\n // send new data to the server\n await handleSave(changeSet);\n\n // cleanup changes, we don't need them after saving\n resetChanges(rowId);\n setRowSaveStatus(rowId, 'complete');\n } catch (error) {\n // the onSave handler should throw errors when something fails, e.g. validation, network errors etc\n // this code handles those errors and maps them either to row errors or cell specific errors\n let rowError;\n let cellErrors;\n\n if (typeof error === 'string') {\n rowError = error;\n } else if (error instanceof Error) {\n rowError = error.message;\n\n // most of our apis return error objects within this shape\n if (typeof (error as any).response?.data === 'object') {\n cellErrors = (error as any).response?.data;\n }\n } else if (typeof error === 'object') {\n cellErrors = error;\n }\n\n if (rowError || cellErrors) {\n setPendingChanges(currentChanges => {\n const nextChanges = { ...currentChanges };\n nextChanges[rowId]._meta.errors = {\n row: rowError,\n cells: cellErrors,\n hasShownErrorAlert: nextChanges[rowId]._meta.errors?.hasShownErrorAlert ?? false,\n };\n return nextChanges;\n });\n }\n\n setRowSaveStatus(rowId, undefined);\n }\n });\n }\n }\n\n return {\n getCellValue,\n getCellError,\n setCellValue,\n validateCell,\n hasChanges,\n hasErrors,\n getErrors,\n saveChanges,\n resetChanges,\n hasRowErrors,\n hasRowErrorsSeen,\n setRowErrorsSeen,\n getRowSaveStatus,\n setRowSaveStatus,\n getRowMoveReason,\n };\n}\n\nfunction useLastFocusedCellIndex(): [number | undefined, (index: number | undefined) => void] {\n // store the last focused cell, so that up/down arrow key navigation remains in the same column\n const lastFocusedCellIndexRef = React.useRef<number | undefined>(undefined);\n const setLastFocusedCellIndex = React.useCallback((index: number | undefined) => {\n lastFocusedCellIndexRef.current = index;\n }, []);\n\n return [lastFocusedCellIndexRef.current, setLastFocusedCellIndex];\n}\n\nfunction getChangesetFromChanges<TType = unknown>(changes: PendingChange<TType>): TType {\n // extract the original data from the row changes\n const { _meta, ...changeset } = changes ?? {};\n // and mix them in with the changes, ready to send to the server\n return { ..._meta?.original, ...changeset };\n}\n"],"names":["useTableEditing","isEnabled","handleSave","validator","isEditing","toggleEditing","React","useState","isDetailedMode","toggleDetailedMode","lastFocusedCellIndex","setLastFocusedCellIndex","useLastFocusedCellIndex","pendingChangesFns","usePendingChanges","handleBlur","useCallback","event","isClosingDatepicker","isDate","detail","relatedTarget","currentTarget","isElementInsideOrTriggeredFromContainer","saveChanges","useGlobalKeyDown","key","meta","shift","undefined","preventDefault","rowId","console","warn","Promise","resolve","changesToSave","pendingChanges","changes","Object","keys","length","map","pendingChange","changeSet","getChangesetFromChanges","_catch","_temp3","_result","_exit","then","resetChanges","setRowSaveStatus","_temp2","errors","error","rowError","cellErrors","Error","_error$response","message","response","data","_error$response2","setPendingChanges","currentChanges","nextChanges","_meta","row","cells","hasShownErrorAlert","_nextChanges$rowId$_m","_nextChanges$rowId$_m2","e","reject","validateCell","cell","id","_temp","column","saveStates","setSaveState","getCellValue","_pendingChanges$cell$","getCellError","_pendingChanges$cell$2","_pendingChanges$cell$3","_pendingChanges$cell$4","setCellValue","change","rowIndex","rowChanges","_currentChanges$cell$","original","moveReason","_currentChanges$cell$2","_currentChanges$cell$3","reason","willRowMove","filter","k","hasRowErrors","_pendingChanges$rowId","_pendingChanges$rowId2","_pendingChanges$rowId3","_pendingChanges$rowId4","_pendingChanges$rowId5","hasRowErrorsSeen","_pendingChanges$rowId6","setRowErrorsSeen","_pendingChanges$rowId7","getRowSaveStatus","status","currentStates","nextStates","getRowMoveReason","_pendingChanges$rowId8","values","hasChanges","hasErrors","table","tableRef","tableMeta","options","focusIsInsideTable","_tableRef$current","current","contains","document","activeElement","activeRow","rowActive","rowActiveIndex","getRowModel","rows","getErrors","_activeRow","_activeRow2","lastFocusedCellIndexRef","useRef","index","changeset"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"useTableEditing.js","sources":["../../../../../../../../src/components/Table3/features/useTableEditing.ts"],"sourcesContent":["import React from 'react';\nimport { Cell as ReactTableCell, Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\nimport { willRowMove } from '../util/editing';\nimport { TableRef } from '../../../primitives/Table/types';\n\nexport function useTableEditing<TType = unknown>(\n isEnabled = false,\n handleSave: Table3EditingSaveHandler<TType> | undefined,\n validator: Table3EditingValidatorFn<TType> | undefined\n) {\n // used to switch the table into editing mode\n const [isEditing, toggleEditing] = React.useState(false);\n\n // used to switch the editing between \"detailed\" mode\n const [isDetailedMode, toggleDetailedMode] = React.useState(false);\n\n // store the last focused cell, so that up/down arrow key navigation remains in the same column\n const [lastFocusedCellIndex, setLastFocusedCellIndex] = useLastFocusedCellIndex();\n\n // store pending changes for each row\n // changes are saved as soon as the active row changes, so in most cases this will only contain the active row's changes\n // but not always - if validation or server requests fail when saving, those rows remain until the failure is resolved\n const pendingChangesFns = usePendingChanges<TType>(isEnabled, handleSave, validator);\n\n useGlobalKeyDown(isEnabled && isEditing ? { key: 's', meta: true, shift: false } : undefined, event => {\n event.preventDefault();\n pendingChangesFns.saveChanges();\n });\n\n return {\n isEnabled,\n isEditing,\n isDetailedMode,\n toggleDetailedMode: isEnabled ? toggleDetailedMode : () => undefined,\n toggleEditing: isEnabled ? toggleEditing : () => undefined,\n lastFocusedCellIndex,\n setLastFocusedCellIndex,\n ...pendingChangesFns,\n };\n}\n\ntype SaveState = 'pending' | 'complete';\ntype PendingChange<TType = unknown> = Partial<TType> & {\n _meta: {\n original: TType;\n moveReason: Record<string, 'search' | 'sorting' | 'filter'>;\n errors: {\n row: string;\n cells: Record<string, string>;\n hasShownErrorAlert: boolean;\n };\n status?: SaveState;\n };\n};\n\nfunction usePendingChanges<TType = unknown>(\n isEnabled: boolean,\n handleSave: Table3EditingSaveHandler<TType> | undefined,\n validator: Table3EditingValidatorFn<TType> | undefined\n) {\n const [pendingChanges, setPendingChanges] = React.useState<Record<string, PendingChange<TType>>>({});\n // we maintain save status as separate state because 'complete' needs to briefly show after pendingChanges are deleted\n const [saveStates, setSaveState] = React.useState<Record<string, SaveState>>({});\n\n function getCellValue<T extends TType>(cell: ReactTableCell<T, unknown>): unknown | undefined {\n return pendingChanges[cell.row.id]?.[cell.column.id];\n }\n\n function getCellError<T extends TType>(cell: ReactTableCell<T, unknown>): string | undefined {\n return pendingChanges[cell.row.id]?._meta.errors?.cells?.[cell.column.id];\n }\n\n const setCellValue = React.useCallback(function <T extends TType>(\n cell: ReactTableCell<T, unknown>,\n change: unknown,\n rowIndex: number\n ) {\n setPendingChanges(currentChanges => {\n const nextChanges = { ...currentChanges };\n const rowChanges = {\n ...currentChanges[cell.row.id],\n _meta: {\n ...currentChanges[cell.row.id]?._meta,\n original: cell.row.original,\n moveReason: {\n ...currentChanges[cell.row.id]?._meta.moveReason,\n },\n errors: {\n ...currentChanges[cell.row.id]?._meta.errors,\n },\n },\n } as PendingChange<T>;\n\n // update if the change is different to the original (saved) value,\n // otherwise remove any change - no point saving the same value\n if (change !== cell.row.original[cell.column.id]) {\n rowChanges[cell.column.id] = change;\n\n // determine if the row will move position based on this change, and save why it will move\n const reason = willRowMove(cell, change, rowIndex);\n\n if (reason) {\n rowChanges._meta.moveReason[cell.column.id] = reason;\n } else {\n delete rowChanges._meta.moveReason[cell.column.id];\n }\n } else {\n delete rowChanges[cell.column.id];\n }\n\n // set the changes for the row...\n // or delete if there are no changes left, so that we don't store changes with unchanged data\n if (Object.keys(rowChanges).filter(k => k !== '_meta').length) {\n nextChanges[cell.row.id] = rowChanges;\n } else {\n delete nextChanges[cell.row.id];\n }\n\n return nextChanges;\n });\n },\n []);\n\n async function validateCell<T extends TType>(cell: ReactTableCell<T, unknown>) {\n if (!validator || !isEnabled) {\n return;\n }\n\n const changeSet = getChangesetFromChanges(pendingChanges[cell.row.id]);\n\n // only validate if the cell being blurred actually has any changes\n if (cell.column.id in changeSet) {\n const errors = ((await validator(changeSet)) ?? {}) as Record<string, string>;\n\n setPendingChanges(currentChanges => {\n const nextChanges = { ...currentChanges };\n nextChanges[cell.row.id]._meta = {\n ...nextChanges[cell.row.id]._meta,\n errors: {\n ...nextChanges[cell.row.id]._meta.errors,\n cells: errors,\n hasShownErrorAlert:\n Object.keys(errors).length && !nextChanges[cell.row.id]._meta.errors.hasShownErrorAlert\n ? false\n : nextChanges[cell.row.id]._meta.errors.hasShownErrorAlert,\n },\n };\n return nextChanges;\n });\n }\n }\n\n function hasRowErrors(rowId: string) {\n if (!isEnabled) {\n return false;\n }\n\n return (\n !!pendingChanges[rowId]?._meta.errors?.row || !!Object.keys(pendingChanges[rowId]?._meta.errors?.cells ?? {}).length\n );\n }\n\n function hasRowErrorsSeen(rowId: string) {\n if (!isEnabled) {\n return false;\n }\n\n return hasRowErrors(rowId) && !!pendingChanges[rowId]._meta.errors?.hasShownErrorAlert;\n }\n\n function setRowErrorsSeen(rowId: string) {\n if (pendingChanges[rowId]._meta.errors?.hasShownErrorAlert === false) {\n setPendingChanges(currentChanges => {\n const nextChanges = { ...currentChanges };\n nextChanges[rowId]._meta.errors = {\n ...nextChanges[rowId]._meta.errors,\n hasShownErrorAlert: true,\n };\n return nextChanges;\n });\n }\n }\n\n function getRowSaveStatus(rowId: string) {\n if (!isEnabled) {\n return false;\n }\n\n return saveStates[rowId];\n }\n\n function setRowSaveStatus(rowId: string, status: 'pending' | 'complete' | undefined) {\n setSaveState(currentStates => {\n const nextStates = { ...currentStates };\n\n if (status) {\n nextStates[rowId] = status;\n } else {\n delete nextStates[rowId];\n }\n\n return nextStates;\n });\n }\n\n function getRowMoveReason(rowId: string) {\n return pendingChanges[rowId]?._meta.moveReason ? Object.values(pendingChanges[rowId]._meta.moveReason)[0] : undefined;\n }\n\n function hasChanges(rowId?: string) {\n if (!isEnabled) {\n return false;\n }\n\n return rowId ? !!pendingChanges[rowId] : !!Object.keys(pendingChanges).length;\n }\n\n function hasErrors<T extends TType>(table: ReactTable<T>, tableRef: React.RefObject<TableRef>) {\n if (!isEnabled) {\n return false;\n }\n\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const focusIsInsideTable = tableRef.current?.contains(document.activeElement);\n\n let activeRow;\n\n if (tableMeta.rowActive.rowActiveIndex !== undefined) {\n activeRow = table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex];\n }\n\n return Object.keys(\n getErrors().filter(error => {\n if (activeRow?.id && focusIsInsideTable) {\n return error.rowId === activeRow?.id ? error.pendingChange._meta.errors.hasShownErrorAlert : true;\n }\n\n return true;\n })\n ).length;\n }\n\n function getErrors<T extends TType>() {\n return Object.keys(pendingChanges)\n .filter(hasRowErrors)\n .map(rowId => ({ rowId, pendingChange: pendingChanges[rowId] as PendingChange<T> }));\n }\n\n function resetChanges(rowId: string) {\n setPendingChanges(currentChanges => {\n const nextChanges = { ...currentChanges };\n delete nextChanges[rowId];\n return nextChanges;\n });\n }\n\n async function saveChanges(rowId: string | undefined = undefined) {\n if (!handleSave) {\n console.warn('Tried to save, but Table has no onSave handler');\n return;\n }\n\n // we save back to pendingChanges, so make a copy of it's state when save was triggered\n const changesToSave = rowId ? { [rowId]: pendingChanges[rowId] } : { ...pendingChanges };\n const changes = Object.keys(changesToSave);\n\n if (changes.length) {\n changes.map(async rowId => {\n const pendingChange = changesToSave[rowId];\n\n const changeSet = getChangesetFromChanges(pendingChange);\n\n try {\n // set saving = true\n setRowSaveStatus(rowId, 'pending');\n\n // re-run validation, maybe a cell is already invalid but has never been blurred\n if (validator) {\n const errors = await validator(changeSet);\n\n if (errors && Object.keys(errors).length) {\n throw errors;\n }\n }\n\n // send new data to the server\n await handleSave(changeSet);\n\n // cleanup changes, we don't need them after saving\n resetChanges(rowId);\n setRowSaveStatus(rowId, 'complete');\n } catch (error) {\n // the onSave handler should throw errors when something fails, e.g. validation, network errors etc\n // this code handles those errors and maps them either to row errors or cell specific errors\n let rowError;\n let cellErrors;\n\n if (typeof error === 'string') {\n rowError = error;\n } else if (error instanceof Error) {\n rowError = error.message;\n\n // most of our apis return error objects within this shape\n if (typeof (error as any).response?.data === 'object') {\n cellErrors = (error as any).response?.data;\n }\n } else if (typeof error === 'object') {\n cellErrors = error;\n }\n\n if (rowError || cellErrors) {\n setPendingChanges(currentChanges => {\n const nextChanges = { ...currentChanges };\n nextChanges[rowId]._meta.errors = {\n row: rowError,\n cells: cellErrors,\n hasShownErrorAlert: nextChanges[rowId]._meta.errors?.hasShownErrorAlert ?? false,\n };\n return nextChanges;\n });\n }\n\n setRowSaveStatus(rowId, undefined);\n }\n });\n }\n }\n\n return {\n getCellValue,\n getCellError,\n setCellValue,\n validateCell,\n hasChanges,\n hasErrors,\n getErrors,\n saveChanges,\n resetChanges,\n hasRowErrors,\n hasRowErrorsSeen,\n setRowErrorsSeen,\n getRowSaveStatus,\n setRowSaveStatus,\n getRowMoveReason,\n };\n}\n\nfunction useLastFocusedCellIndex(): [number | undefined, (index: number | undefined) => void] {\n // store the last focused cell, so that up/down arrow key navigation remains in the same column\n const lastFocusedCellIndexRef = React.useRef<number | undefined>(undefined);\n const setLastFocusedCellIndex = React.useCallback((index: number | undefined) => {\n lastFocusedCellIndexRef.current = index;\n }, []);\n\n return [lastFocusedCellIndexRef.current, setLastFocusedCellIndex];\n}\n\nfunction getChangesetFromChanges<TType = unknown>(changes: PendingChange<TType>): TType {\n // extract the original data from the row changes\n const { _meta, ...changeset } = changes ?? {};\n // and mix them in with the changes, ready to send to the server\n return { ..._meta?.original, ...changeset };\n}\n"],"names":["useTableEditing","isEnabled","handleSave","validator","isEditing","toggleEditing","React","useState","isDetailedMode","toggleDetailedMode","lastFocusedCellIndex","setLastFocusedCellIndex","useLastFocusedCellIndex","pendingChangesFns","usePendingChanges","useGlobalKeyDown","key","meta","shift","undefined","event","preventDefault","saveChanges","rowId","console","warn","Promise","resolve","changesToSave","pendingChanges","changes","Object","keys","length","map","pendingChange","changeSet","getChangesetFromChanges","_catch","_temp3","_result","_exit","then","resetChanges","setRowSaveStatus","_temp2","errors","error","rowError","cellErrors","Error","_error$response","message","response","data","_error$response2","setPendingChanges","currentChanges","nextChanges","_meta","row","cells","hasShownErrorAlert","_nextChanges$rowId$_m","_nextChanges$rowId$_m2","e","reject","validateCell","cell","id","_temp","column","saveStates","setSaveState","getCellValue","_pendingChanges$cell$","getCellError","_pendingChanges$cell$2","_pendingChanges$cell$3","_pendingChanges$cell$4","setCellValue","useCallback","change","rowIndex","rowChanges","_currentChanges$cell$","original","moveReason","_currentChanges$cell$2","_currentChanges$cell$3","reason","willRowMove","filter","k","hasRowErrors","_pendingChanges$rowId","_pendingChanges$rowId2","_pendingChanges$rowId3","_pendingChanges$rowId4","_pendingChanges$rowId5","hasRowErrorsSeen","_pendingChanges$rowId6","setRowErrorsSeen","_pendingChanges$rowId7","getRowSaveStatus","status","currentStates","nextStates","getRowMoveReason","_pendingChanges$rowId8","values","hasChanges","hasErrors","table","tableRef","tableMeta","options","focusIsInsideTable","_tableRef$current","current","contains","document","activeElement","activeRow","rowActive","rowActiveIndex","getRowModel","rows","getErrors","_activeRow","_activeRow2","lastFocusedCellIndexRef","useRef","index","changeset"],"mappings":"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"}
|
@@ -1,7 +1,8 @@
|
|
1
1
|
import React__default from 'react';
|
2
|
+
import { isElementInsideOrTriggeredFromContainer } from '../../../utils/dom.js';
|
2
3
|
import { useLazyEffect } from '../../../hooks/useLazyEffect.js';
|
3
4
|
|
4
|
-
function useTableEditingListener(table) {
|
5
|
+
function useTableEditingListener(table, tableRef) {
|
5
6
|
const tableMeta = table.options.meta;
|
6
7
|
const saveChanges = () => {
|
7
8
|
requestAnimationFrame(() => {
|
@@ -43,6 +44,20 @@ function useTableEditingListener(table) {
|
|
43
44
|
window.removeEventListener('beforeunload', showUnsavedChangesWarning);
|
44
45
|
};
|
45
46
|
}, [tableMeta.editing.isEditing, hasChanges]);
|
47
|
+
React__default.useEffect(() => {
|
48
|
+
const onClickOutside = event => {
|
49
|
+
if (tableMeta.editing.isEditing) {
|
50
|
+
var _event$target$getAttr, _event$target;
|
51
|
+
const element = (_event$target$getAttr = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.getAttribute('data-taco')) !== null && _event$target$getAttr !== void 0 ? _event$target$getAttr : '';
|
52
|
+
const insideTable = isElementInsideOrTriggeredFromContainer(event.target, tableRef.current) || element === 'backdrop';
|
53
|
+
if (!insideTable) {
|
54
|
+
saveChanges();
|
55
|
+
}
|
56
|
+
}
|
57
|
+
};
|
58
|
+
document.addEventListener('click', onClickOutside);
|
59
|
+
return () => document.removeEventListener('click', onClickOutside);
|
60
|
+
}, [saveChanges, tableMeta.editing.isEditing]);
|
46
61
|
}
|
47
62
|
|
48
63
|
export { useTableEditingListener };
|
package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useTableEditingListener.js","sources":["../../../../../../../../src/components/Table3/listeners/useTableEditingListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useLazyEffect } from '../../../hooks/useLazyEffect';\n\nexport function useTableEditingListener<TType = unknown>(table: ReactTable<TType>) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n const saveChanges = () => {\n requestAnimationFrame(() => {\n tableMeta.editing.saveChanges();\n });\n };\n\n // save when the row changes\n useLazyEffect(() => {\n if (tableMeta.editing.isEditing) {\n saveChanges();\n }\n }, [tableMeta.rowActive.rowActiveIndex]);\n\n useLazyEffect(() => {\n if (tableMeta.editing.isEditing) {\n if (tableMeta.rowActive.rowActiveIndex === undefined) {\n tableMeta.rowActive.setRowActiveIndex(0);\n }\n } else {\n // save\n saveChanges();\n // reset detailed mode\n tableMeta.editing.toggleDetailedMode(false);\n // reset the last index back to the first focusable element, when editing gets turned off\n tableMeta.editing.setLastFocusedCellIndex(undefined);\n }\n }, [tableMeta.editing.isEditing]);\n\n // show a warning if the user navigates away without triggering save, such as using the browser back/forward button\n const hasChanges = tableMeta.editing.hasChanges();\n\n React.useEffect(() => {\n function showUnsavedChangesWarning(event: BeforeUnloadEvent) {\n if (tableMeta.editing.isEditing && hasChanges) {\n event.returnValue = true;\n return true;\n }\n\n return false;\n }\n\n window.addEventListener('beforeunload', showUnsavedChangesWarning);\n\n return () => {\n window.removeEventListener('beforeunload', showUnsavedChangesWarning);\n };\n }, [tableMeta.editing.isEditing, hasChanges]);\n}\n"],"names":["useTableEditingListener","table","tableMeta","options","meta","saveChanges","requestAnimationFrame","editing","useLazyEffect","isEditing","rowActive","rowActiveIndex","undefined","setRowActiveIndex","toggleDetailedMode","setLastFocusedCellIndex","hasChanges","React","useEffect","showUnsavedChangesWarning","event","returnValue","window","addEventListener","removeEventListener"],"mappings":"
|
1
|
+
{"version":3,"file":"useTableEditingListener.js","sources":["../../../../../../../../src/components/Table3/listeners/useTableEditingListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useLazyEffect } from '../../../hooks/useLazyEffect';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../utils/dom';\nimport { TableRef } from '../../../primitives/Table/types';\n\nexport function useTableEditingListener<TType = unknown>(table: ReactTable<TType>, tableRef: React.RefObject<TableRef>) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n const saveChanges = () => {\n requestAnimationFrame(() => {\n tableMeta.editing.saveChanges();\n });\n };\n\n // save when the row changes\n useLazyEffect(() => {\n if (tableMeta.editing.isEditing) {\n saveChanges();\n }\n }, [tableMeta.rowActive.rowActiveIndex]);\n\n useLazyEffect(() => {\n if (tableMeta.editing.isEditing) {\n if (tableMeta.rowActive.rowActiveIndex === undefined) {\n tableMeta.rowActive.setRowActiveIndex(0);\n }\n } else {\n // save\n saveChanges();\n // reset detailed mode\n tableMeta.editing.toggleDetailedMode(false);\n // reset the last index back to the first focusable element, when editing gets turned off\n tableMeta.editing.setLastFocusedCellIndex(undefined);\n }\n }, [tableMeta.editing.isEditing]);\n\n // show a warning if the user navigates away without triggering save, such as using the browser back/forward button\n const hasChanges = tableMeta.editing.hasChanges();\n\n React.useEffect(() => {\n function showUnsavedChangesWarning(event: BeforeUnloadEvent) {\n if (tableMeta.editing.isEditing && hasChanges) {\n event.returnValue = true;\n return true;\n }\n\n return false;\n }\n\n window.addEventListener('beforeunload', showUnsavedChangesWarning);\n\n return () => {\n window.removeEventListener('beforeunload', showUnsavedChangesWarning);\n };\n }, [tableMeta.editing.isEditing, hasChanges]);\n\n React.useEffect(() => {\n const onClickOutside = (event: MouseEvent) => {\n if (tableMeta.editing.isEditing) {\n const element = (event.target as Element)?.getAttribute('data-taco') ?? '';\n\n const insideTable =\n isElementInsideOrTriggeredFromContainer(event.target as Element, tableRef.current) || element === 'backdrop';\n\n if (!insideTable) {\n saveChanges();\n }\n }\n };\n\n document.addEventListener('click', onClickOutside);\n\n return () => document.removeEventListener('click', onClickOutside);\n }, [saveChanges, tableMeta.editing.isEditing]);\n}\n"],"names":["useTableEditingListener","table","tableRef","tableMeta","options","meta","saveChanges","requestAnimationFrame","editing","useLazyEffect","isEditing","rowActive","rowActiveIndex","undefined","setRowActiveIndex","toggleDetailedMode","setLastFocusedCellIndex","hasChanges","React","useEffect","showUnsavedChangesWarning","event","returnValue","window","addEventListener","removeEventListener","onClickOutside","_event$target$getAttr","_event$target","element","target","getAttribute","insideTable","isElementInsideOrTriggeredFromContainer","current","document"],"mappings":";;;;SAMgBA,uBAAuBA,CAAkBC,KAAwB,EAAEC,QAAmC;EAClH,MAAMC,SAAS,GAAGF,KAAK,CAACG,OAAO,CAACC,IAA6B;EAE7D,MAAMC,WAAW,GAAGA;IAChBC,qBAAqB,CAAC;MAClBJ,SAAS,CAACK,OAAO,CAACF,WAAW,EAAE;KAClC,CAAC;GACL;;EAGDG,aAAa,CAAC;IACV,IAAIN,SAAS,CAACK,OAAO,CAACE,SAAS,EAAE;MAC7BJ,WAAW,EAAE;;GAEpB,EAAE,CAACH,SAAS,CAACQ,SAAS,CAACC,cAAc,CAAC,CAAC;EAExCH,aAAa,CAAC;IACV,IAAIN,SAAS,CAACK,OAAO,CAACE,SAAS,EAAE;MAC7B,IAAIP,SAAS,CAACQ,SAAS,CAACC,cAAc,KAAKC,SAAS,EAAE;QAClDV,SAAS,CAACQ,SAAS,CAACG,iBAAiB,CAAC,CAAC,CAAC;;KAE/C,MAAM;;MAEHR,WAAW,EAAE;;MAEbH,SAAS,CAACK,OAAO,CAACO,kBAAkB,CAAC,KAAK,CAAC;;MAE3CZ,SAAS,CAACK,OAAO,CAACQ,uBAAuB,CAACH,SAAS,CAAC;;GAE3D,EAAE,CAACV,SAAS,CAACK,OAAO,CAACE,SAAS,CAAC,CAAC;;EAGjC,MAAMO,UAAU,GAAGd,SAAS,CAACK,OAAO,CAACS,UAAU,EAAE;EAEjDC,cAAK,CAACC,SAAS,CAAC;IACZ,SAASC,yBAAyBA,CAACC,KAAwB;MACvD,IAAIlB,SAAS,CAACK,OAAO,CAACE,SAAS,IAAIO,UAAU,EAAE;QAC3CI,KAAK,CAACC,WAAW,GAAG,IAAI;QACxB,OAAO,IAAI;;MAGf,OAAO,KAAK;;IAGhBC,MAAM,CAACC,gBAAgB,CAAC,cAAc,EAAEJ,yBAAyB,CAAC;IAElE,OAAO;MACHG,MAAM,CAACE,mBAAmB,CAAC,cAAc,EAAEL,yBAAyB,CAAC;KACxE;GACJ,EAAE,CAACjB,SAAS,CAACK,OAAO,CAACE,SAAS,EAAEO,UAAU,CAAC,CAAC;EAE7CC,cAAK,CAACC,SAAS,CAAC;IACZ,MAAMO,cAAc,GAAIL,KAAiB;MACrC,IAAIlB,SAAS,CAACK,OAAO,CAACE,SAAS,EAAE;QAAA,IAAAiB,qBAAA,EAAAC,aAAA;QAC7B,MAAMC,OAAO,IAAAF,qBAAA,IAAAC,aAAA,GAAIP,KAAK,CAACS,MAAkB,cAAAF,aAAA,uBAAxBA,aAAA,CAA0BG,YAAY,CAAC,WAAW,CAAC,cAAAJ,qBAAA,cAAAA,qBAAA,GAAI,EAAE;QAE1E,MAAMK,WAAW,GACbC,uCAAuC,CAACZ,KAAK,CAACS,MAAiB,EAAE5B,QAAQ,CAACgC,OAAO,CAAC,IAAIL,OAAO,KAAK,UAAU;QAEhH,IAAI,CAACG,WAAW,EAAE;UACd1B,WAAW,EAAE;;;KAGxB;IAED6B,QAAQ,CAACX,gBAAgB,CAAC,OAAO,EAAEE,cAAc,CAAC;IAElD,OAAO,MAAMS,QAAQ,CAACV,mBAAmB,CAAC,OAAO,EAAEC,cAAc,CAAC;GACrE,EAAE,CAACpB,WAAW,EAAEH,SAAS,CAACK,OAAO,CAACE,SAAS,CAAC,CAAC;AAClD;;;;"}
|
@@ -20,7 +20,8 @@ function useTable3(props, ref) {
|
|
20
20
|
hasErrors: editing.hasRowErrors(rowId),
|
21
21
|
onClear: () => editing.resetChanges(rowId),
|
22
22
|
onSave: () => editing.saveChanges(rowId),
|
23
|
-
onExit: () => editing.toggleEditing(false)
|
23
|
+
onExit: () => editing.toggleEditing(false),
|
24
|
+
isLastRow: table.meta.rowActive.rowActiveIndex === table.meta.length - 1
|
24
25
|
}))] : props.rowActions
|
25
26
|
};
|
26
27
|
const meta = {
|
@@ -28,7 +29,7 @@ function useTable3(props, ref) {
|
|
28
29
|
};
|
29
30
|
const table = useTable(extendedProps, ref, RENDERERS, meta);
|
30
31
|
// listeners
|
31
|
-
useTableEditingListener(table.instance);
|
32
|
+
useTableEditingListener(table.instance, table.ref);
|
32
33
|
React__default.useEffect(() => {
|
33
34
|
if (table.ref.current) {
|
34
35
|
table.ref.current.instance.toggleEditing = enabled => table.meta.editing.toggleEditing(enabled !== null && enabled !== void 0 ? enabled : editing => !editing);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useTable3.js","sources":["../../../../../../../src/components/Table3/useTable3.tsx"],"sourcesContent":["import React from 'react';\nimport { RowData } from '@tanstack/react-table';\nimport { useTable } from '../../primitives/Table/Core/useTable';\nimport { useTableEditingListener } from './listeners/useTableEditingListener';\nimport { useTableEditing } from './features/useTableEditing';\nimport { Table3Props, Table3Ref } from './types';\nimport { TableRowActionRenderer } from '../../primitives/Table/types';\nimport { Cell } from './components/Columns/Cell/Cell';\nimport { EditingActionMenu } from './components/Columns/Internal/EditingActionsMenu';\nimport { Row } from './components/Row/Row';\n\nconst RENDERERS = {\n row: Row,\n cell: Cell,\n};\n\ndeclare module '@tanstack/table-core' {\n interface TableMeta<TData extends RowData> {\n editing: ReturnType<typeof useTableEditing>;\n }\n}\n\ntype Table3Meta = {\n editing: ReturnType<typeof useTableEditing>;\n};\n\nexport function useTable3<TType>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const editing = useTableEditing(props.enableEditing, props.onSave, props.validator);\n const extendedProps: Table3Props<TType> = {\n ...props,\n enableRowActions: editing.isEditing ? true : props.enableRowActions,\n rowActions: editing.isEditing\n ? ([\n (_, rowId) => (\n <EditingActionMenu\n hasChanges={editing.hasChanges(rowId)}\n hasErrors={editing.hasRowErrors(rowId)}\n onClear={() => editing.resetChanges(rowId)}\n onSave={() => editing.saveChanges(rowId)}\n onExit={() => editing.toggleEditing(false)}\n />\n ),\n ] as TableRowActionRenderer<TType>[])\n : props.rowActions,\n };\n const meta = { editing };\n const table = useTable<TType, Table3Meta>(extendedProps, ref, RENDERERS, meta);\n\n // listeners\n useTableEditingListener<TType>(table.instance);\n\n React.useEffect(() => {\n if (table.ref.current) {\n (table.ref.current as Table3Ref).instance.toggleEditing = (enabled: boolean | undefined) =>\n table.meta.editing.toggleEditing(enabled ?? (editing => !editing));\n }\n }, [table.ref.current]);\n\n return table;\n}\n"],"names":["RENDERERS","row","Row","cell","Cell","useTable3","props","ref","editing","useTableEditing","enableEditing","onSave","validator","extendedProps","enableRowActions","isEditing","rowActions","_","rowId","React","EditingActionMenu","hasChanges","hasErrors","hasRowErrors","onClear","resetChanges","saveChanges","onExit","toggleEditing","
|
1
|
+
{"version":3,"file":"useTable3.js","sources":["../../../../../../../src/components/Table3/useTable3.tsx"],"sourcesContent":["import React from 'react';\nimport { RowData } from '@tanstack/react-table';\nimport { useTable } from '../../primitives/Table/Core/useTable';\nimport { useTableEditingListener } from './listeners/useTableEditingListener';\nimport { useTableEditing } from './features/useTableEditing';\nimport { Table3Props, Table3Ref } from './types';\nimport { TableRowActionRenderer } from '../../primitives/Table/types';\nimport { Cell } from './components/Columns/Cell/Cell';\nimport { EditingActionMenu } from './components/Columns/Internal/EditingActionsMenu';\nimport { Row } from './components/Row/Row';\n\nconst RENDERERS = {\n row: Row,\n cell: Cell,\n};\n\ndeclare module '@tanstack/table-core' {\n interface TableMeta<TData extends RowData> {\n editing: ReturnType<typeof useTableEditing>;\n }\n}\n\ntype Table3Meta = {\n editing: ReturnType<typeof useTableEditing>;\n};\n\nexport function useTable3<TType>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const editing = useTableEditing(props.enableEditing, props.onSave, props.validator);\n const extendedProps: Table3Props<TType> = {\n ...props,\n enableRowActions: editing.isEditing ? true : props.enableRowActions,\n rowActions: editing.isEditing\n ? ([\n (_, rowId) => (\n <EditingActionMenu\n hasChanges={editing.hasChanges(rowId)}\n hasErrors={editing.hasRowErrors(rowId)}\n onClear={() => editing.resetChanges(rowId)}\n onSave={() => editing.saveChanges(rowId)}\n onExit={() => editing.toggleEditing(false)}\n isLastRow={table.meta.rowActive.rowActiveIndex === table.meta.length - 1}\n />\n ),\n ] as TableRowActionRenderer<TType>[])\n : props.rowActions,\n };\n const meta = { editing };\n const table = useTable<TType, Table3Meta>(extendedProps, ref, RENDERERS, meta);\n\n // listeners\n useTableEditingListener<TType>(table.instance, table.ref);\n\n React.useEffect(() => {\n if (table.ref.current) {\n (table.ref.current as Table3Ref).instance.toggleEditing = (enabled: boolean | undefined) =>\n table.meta.editing.toggleEditing(enabled ?? (editing => !editing));\n }\n }, [table.ref.current]);\n\n return table;\n}\n"],"names":["RENDERERS","row","Row","cell","Cell","useTable3","props","ref","editing","useTableEditing","enableEditing","onSave","validator","extendedProps","enableRowActions","isEditing","rowActions","_","rowId","React","EditingActionMenu","hasChanges","hasErrors","hasRowErrors","onClear","resetChanges","saveChanges","onExit","toggleEditing","isLastRow","table","meta","rowActive","rowActiveIndex","length","useTable","useTableEditingListener","instance","useEffect","current","enabled"],"mappings":";;;;;;;;AAWA,MAAMA,SAAS,GAAG;EACdC,GAAG,EAAEC,GAAG;EACRC,IAAI,EAAEC;CACT;SAYeC,SAASA,CAAQC,KAAyB,EAAEC,GAAyB;EACjF,MAAMC,OAAO,GAAGC,eAAe,CAACH,KAAK,CAACI,aAAa,EAAEJ,KAAK,CAACK,MAAM,EAAEL,KAAK,CAACM,SAAS,CAAC;EACnF,MAAMC,aAAa,GAAuB;IACtC,GAAGP,KAAK;IACRQ,gBAAgB,EAAEN,OAAO,CAACO,SAAS,GAAG,IAAI,GAAGT,KAAK,CAACQ,gBAAgB;IACnEE,UAAU,EAAER,OAAO,CAACO,SAAS,GACtB,CACG,CAACE,CAAC,EAAEC,KAAK,oBACLC,6BAACC,iBAAiB;MACdC,UAAU,EAAEb,OAAO,CAACa,UAAU,CAACH,KAAK,CAAC;MACrCI,SAAS,EAAEd,OAAO,CAACe,YAAY,CAACL,KAAK,CAAC;MACtCM,OAAO,EAAEA,MAAMhB,OAAO,CAACiB,YAAY,CAACP,KAAK,CAAC;MAC1CP,MAAM,EAAEA,MAAMH,OAAO,CAACkB,WAAW,CAACR,KAAK,CAAC;MACxCS,MAAM,EAAEA,MAAMnB,OAAO,CAACoB,aAAa,CAAC,KAAK,CAAC;MAC1CC,SAAS,EAAEC,KAAK,CAACC,IAAI,CAACC,SAAS,CAACC,cAAc,KAAKH,KAAK,CAACC,IAAI,CAACG,MAAM,GAAG;MACzE,CACL,CACgC,GACrC5B,KAAK,CAACU;GACf;EACD,MAAMe,IAAI,GAAG;IAAEvB;GAAS;EACxB,MAAMsB,KAAK,GAAGK,QAAQ,CAAoBtB,aAAa,EAAEN,GAAG,EAAEP,SAAS,EAAE+B,IAAI,CAAC;;EAG9EK,uBAAuB,CAAQN,KAAK,CAACO,QAAQ,EAAEP,KAAK,CAACvB,GAAG,CAAC;EAEzDY,cAAK,CAACmB,SAAS,CAAC;IACZ,IAAIR,KAAK,CAACvB,GAAG,CAACgC,OAAO,EAAE;MAClBT,KAAK,CAACvB,GAAG,CAACgC,OAAqB,CAACF,QAAQ,CAACT,aAAa,GAAIY,OAA4B,IACnFV,KAAK,CAACC,IAAI,CAACvB,OAAO,CAACoB,aAAa,CAACY,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAKhC,OAAO,IAAI,CAACA,OAAQ,CAAC;;GAE7E,EAAE,CAACsB,KAAK,CAACvB,GAAG,CAACgC,OAAO,CAAC,CAAC;EAEvB,OAAOT,KAAK;AAChB;;;;"}
|
@@ -41,7 +41,7 @@ function TableGrid(props) {
|
|
41
41
|
key: props.id,
|
42
42
|
header: props,
|
43
43
|
scrollToIndex: table.renderer.scrollToIndex
|
44
|
-
}))))))), table.instance.
|
44
|
+
}))))))), table.instance.getCoreRowModel().rows.length ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Body, {
|
45
45
|
enableHorizontalArrowKeyNavigation: enableHorizontalArrowKeyNavigation,
|
46
46
|
table: table.instance,
|
47
47
|
tableElement: table.ref.current,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../../../../../../../../src/primitives/Table/Core/Table.tsx"],"sourcesContent":["import React from 'react';\nimport { FocusScope } from '@react-aria/focus';\nimport { Header } from './components/Header/Header';\nimport { Body } from './components/Body/Body';\nimport { Foot } from './components/Footer/Footer';\nimport { EmptyStateBody } from './components/Body/EmptyStateBody';\nimport { useTableReturnValue } from './useTable';\nimport { TableToolbar } from './components/Toolbar/Toolbar';\nimport './style.css';\n\ntype TableProps = {\n children: JSX.Element | Array<JSX.Element | null>;\n};\n\nexport function Table(props: TableProps) {\n return <>{props.children}</>;\n}\nTable.Toolbar = TableToolbar;\nTable.Grid = TableGrid;\n\nexport type TableGridProps<TType = unknown> = React.TableHTMLAttributes<HTMLTableElement> & {\n 'data-taco': string;\n enableHorizontalArrowKeyNavigation?: boolean;\n table: useTableReturnValue<TType>;\n};\n\nexport function TableGrid<TType = unknown>(props: TableGridProps<TType>) {\n const { enableHorizontalArrowKeyNavigation, table, ...attributes } = props;\n const handleFocus =\n table.meta.rowActive.rowActiveIndex === undefined\n ? (event: React.FocusEvent) => {\n table.meta.rowActive.handleFocus(event, table.meta.length, table.renderer.scrollToIndex);\n }\n : undefined;\n\n return (\n <>\n <style>{table.stylesheet}</style>\n <FocusScope>\n <table\n {...attributes}\n id={table.id}\n data-table-font-size={table.meta.fontSize.size}\n data-table-grouped={!!table.state.grouping?.length}\n data-table-horizontally-scrolled={table.meta.columnFreezing.isHorizontallyScrolled ? true : undefined}\n data-table-status={table.meta.server.isEnabled ? (table.meta.server.isReady ? 'ready' : undefined) : 'ready'}\n data-table-pause-hover={table.meta.rowActive.isHoverStatePaused ? true : undefined}\n data-table-resizing={table.state.columnSizingInfo.isResizingColumn ? true : undefined}\n data-table-row-height={table.meta.rowHeight.height}\n onFocus={handleFocus}\n onScroll={table.meta.columnFreezing.handleScroll}\n ref={table.ref}\n style={table.style}\n tabIndex={-1}>\n <thead>\n {table.instance.getHeaderGroups().map(headerGroup => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map(props => (\n <Header key={props.id} header={props} scrollToIndex={table.renderer.scrollToIndex} />\n ))}\n </tr>\n ))}\n </thead>\n {table.instance.
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../../../../../../../src/primitives/Table/Core/Table.tsx"],"sourcesContent":["import React from 'react';\nimport { FocusScope } from '@react-aria/focus';\nimport { Header } from './components/Header/Header';\nimport { Body } from './components/Body/Body';\nimport { Foot } from './components/Footer/Footer';\nimport { EmptyStateBody } from './components/Body/EmptyStateBody';\nimport { useTableReturnValue } from './useTable';\nimport { TableToolbar } from './components/Toolbar/Toolbar';\nimport './style.css';\n\ntype TableProps = {\n children: JSX.Element | Array<JSX.Element | null>;\n};\n\nexport function Table(props: TableProps) {\n return <>{props.children}</>;\n}\nTable.Toolbar = TableToolbar;\nTable.Grid = TableGrid;\n\nexport type TableGridProps<TType = unknown> = React.TableHTMLAttributes<HTMLTableElement> & {\n 'data-taco': string;\n enableHorizontalArrowKeyNavigation?: boolean;\n table: useTableReturnValue<TType>;\n};\n\nexport function TableGrid<TType = unknown>(props: TableGridProps<TType>) {\n const { enableHorizontalArrowKeyNavigation, table, ...attributes } = props;\n const handleFocus =\n table.meta.rowActive.rowActiveIndex === undefined\n ? (event: React.FocusEvent) => {\n table.meta.rowActive.handleFocus(event, table.meta.length, table.renderer.scrollToIndex);\n }\n : undefined;\n\n return (\n <>\n <style>{table.stylesheet}</style>\n <FocusScope>\n <table\n {...attributes}\n id={table.id}\n data-table-font-size={table.meta.fontSize.size}\n data-table-grouped={!!table.state.grouping?.length}\n data-table-horizontally-scrolled={table.meta.columnFreezing.isHorizontallyScrolled ? true : undefined}\n data-table-status={table.meta.server.isEnabled ? (table.meta.server.isReady ? 'ready' : undefined) : 'ready'}\n data-table-pause-hover={table.meta.rowActive.isHoverStatePaused ? true : undefined}\n data-table-resizing={table.state.columnSizingInfo.isResizingColumn ? true : undefined}\n data-table-row-height={table.meta.rowHeight.height}\n onFocus={handleFocus}\n onScroll={table.meta.columnFreezing.handleScroll}\n ref={table.ref}\n style={table.style}\n tabIndex={-1}>\n <thead>\n {table.instance.getHeaderGroups().map(headerGroup => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map(props => (\n <Header key={props.id} header={props} scrollToIndex={table.renderer.scrollToIndex} />\n ))}\n </tr>\n ))}\n </thead>\n {table.instance.getCoreRowModel().rows.length ? (\n <>\n <Body\n enableHorizontalArrowKeyNavigation={enableHorizontalArrowKeyNavigation}\n table={table.instance}\n tableElement={table.ref.current}\n scrollToIndex={table.renderer.scrollToIndex}\n style={table.renderer.style}>\n {table.renderer.rows}\n </Body>\n {table.meta.footer.isEnabled ? <Foot table={table.instance} /> : null}\n </>\n ) : (\n <EmptyStateBody emptyState={table.props.emptyState} />\n )}\n </table>\n </FocusScope>\n </>\n );\n}\n"],"names":["Table","props","React","children","Toolbar","TableToolbar","Grid","TableGrid","enableHorizontalArrowKeyNavigation","table","attributes","handleFocus","meta","rowActive","rowActiveIndex","undefined","event","length","renderer","scrollToIndex","stylesheet","FocusScope","id","fontSize","size","_table$state$grouping","state","grouping","columnFreezing","isHorizontallyScrolled","server","isEnabled","isReady","isHoverStatePaused","columnSizingInfo","isResizingColumn","rowHeight","height","onFocus","onScroll","handleScroll","ref","style","tabIndex","instance","getHeaderGroups","map","headerGroup","key","headers","Header","header","getCoreRowModel","rows","Body","tableElement","current","footer","Foot","EmptyStateBody","emptyState"],"mappings":"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"}
|
package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js
CHANGED
@@ -32,7 +32,7 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
|
|
32
32
|
const handleClickCapture = React__default.useCallback(() => {
|
33
33
|
// do this in the next frame, otherwise it remounts the row and prevents row actions on hover from being clickable
|
34
34
|
requestAnimationFrame(() => tableMeta.rowActive.setRowActiveIndex(index));
|
35
|
-
}, []);
|
35
|
+
}, [index]);
|
36
36
|
// row active
|
37
37
|
if (tableMeta.rowActive.isEnabled) {
|
38
38
|
attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;
|
@@ -45,7 +45,6 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
|
|
45
45
|
}
|
46
46
|
// row drag
|
47
47
|
if (tableMeta.rowDrag.isEnabled) {
|
48
|
-
attributes.draggable = true;
|
49
48
|
attributes['aria-grabbed'] = !!tableMeta.rowDrag.dragging[row.id];
|
50
49
|
}
|
51
50
|
// row drop
|