@economic/taco 2.44.5-create.8 → 2.44.5-create.9
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js +11 -6
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js.map +1 -1
- package/dist/taco.cjs.development.js +11 -6
- 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 +1 -1
package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js
CHANGED
@@ -32,20 +32,25 @@ function EditingControlCell(props) {
|
|
32
32
|
const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
|
33
33
|
const type = (_columnMeta$control = columnMeta.control) !== null && _columnMeta$control !== void 0 ? _columnMeta$control : 'input';
|
34
34
|
const handleFocus = useEditingCellAutofocus(props);
|
35
|
+
const value = cell.getValue();
|
35
36
|
// some controls, like select2, should trigger cell changed (validation, updates) as the value changes
|
36
37
|
const hasNonTextControl = React__default.useMemo(() => {
|
37
38
|
var _cellRef$current;
|
38
39
|
return typeof type === 'function' && !!((_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.querySelector('[data-taco="Select2"],[data-taco="switch"],[data-taco="checkbox"]'));
|
39
40
|
}, [cellRef.current]);
|
40
|
-
const handleChange =
|
41
|
-
|
42
|
-
|
43
|
-
|
41
|
+
const handleChange = nextValue => {
|
42
|
+
if (nextValue !== value) {
|
43
|
+
tableMeta.editing.setCellValue(cell, nextValue);
|
44
|
+
if (hasNonTextControl) {
|
45
|
+
tableMeta.editing.onCellChanged(cell, rowIndex);
|
46
|
+
}
|
44
47
|
}
|
45
48
|
};
|
46
49
|
const handleBlur = () => {
|
47
50
|
tableMeta.editing.toggleDetailedMode(false);
|
48
|
-
tableMeta.editing.
|
51
|
+
if (!hasNonTextControl && tableMeta.editing.getCellValue(cell) !== undefined) {
|
52
|
+
tableMeta.editing.onCellChanged(cell, rowIndex);
|
53
|
+
}
|
49
54
|
};
|
50
55
|
// ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)
|
51
56
|
React__default.useEffect(() => {
|
@@ -71,7 +76,7 @@ function EditingControlCell(props) {
|
|
71
76
|
tabIndex: isActiveRow ? 0 : -1,
|
72
77
|
toggleDetailedMode: tableMeta.editing.toggleDetailedMode,
|
73
78
|
type,
|
74
|
-
value
|
79
|
+
value
|
75
80
|
};
|
76
81
|
const cellAttributes = {
|
77
82
|
...getCellAttributes(cell, index, isHighlighted),
|
@@ -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 * as date 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 { table } = cell.getContext();\n const tableMeta = 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 const type = columnMeta.control ?? 'input';\n const handleFocus = useEditingCellAutofocus<TType>(props);\n\n // some controls, like select2, should trigger cell changed (validation, updates) as the value changes\n const hasNonTextControl = React.useMemo(() => {\n return (\n typeof type === 'function' &&\n !!cellRef.current?.querySelector('[data-taco=\"Select2\"],[data-taco=\"switch\"],[data-taco=\"checkbox\"]')\n );\n }, [cellRef.current]);\n\n const handleChange = (value: unknown) => {\n tableMeta.editing.setCellValue(cell, value);\n\n if (hasNonTextControl) {\n tableMeta.editing.onCellChanged(cell, rowIndex);\n }\n };\n\n const handleBlur = () => {\n tableMeta.editing.toggleDetailedMode(false);\n tableMeta.editing.onCellChanged(cell, rowIndex);\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: handleChange,\n row: cell.row.original,\n rowPendingChanges: tableMeta.editing.getRowValue(cell.row.id),\n tabIndex: isActiveRow ? 0 : -1,\n toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n type,\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 rowPendingChanges: Partial<TType> | undefined;\n tabIndex?: number;\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 rowPendingChanges,\n tabIndex = -1,\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\n return type(controlFnProps, { ...row, ...rowPendingChanges });\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 if (isDetailedMode) {\n event.preventDefault();\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 }\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 valueAsDate = date.parse(value as Date | string | undefined);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const newDate = (event as any).detail as Date;\n\n if (!valueAsDate || !newDate || (isDate(valueAsDate) && isDate(newDate) && !date.isWeakEqual(valueAsDate, newDate))) {\n props.onChange(newDate);\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={valueAsDate}\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","table","getContext","tableMeta","options","meta","columnMeta","column","columnDef","isActiveRow","rowActive","rowActiveIndex","type","_columnMeta$control","control","handleFocus","useEditingCellAutofocus","hasNonTextControl","useMemo","_cellRef$current","current","querySelector","handleChange","value","editing","setCellValue","onCellChanged","handleBlur","toggleDetailedMode","useEffect","ref","document","activeElement","isElementInsideOrTriggeredFromContainer","error","getCellError","controlProps","dataType","fontSize","size","id","invalid","isDetailedMode","isTruncated","enableTruncate","onBlur","onChange","row","original","rowPendingChanges","getRowValue","tabIndex","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","valueAsDate","date","newDate","detail","isDate","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 * as date 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 { table } = cell.getContext();\n const tableMeta = 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 const type = columnMeta.control ?? 'input';\n const handleFocus = useEditingCellAutofocus<TType>(props);\n const value = cell.getValue();\n\n // some controls, like select2, should trigger cell changed (validation, updates) as the value changes\n const hasNonTextControl = React.useMemo(() => {\n return (\n typeof type === 'function' &&\n !!cellRef.current?.querySelector('[data-taco=\"Select2\"],[data-taco=\"switch\"],[data-taco=\"checkbox\"]')\n );\n }, [cellRef.current]);\n\n const handleChange = (nextValue: unknown) => {\n if (nextValue !== value) {\n tableMeta.editing.setCellValue(cell, nextValue);\n\n if (hasNonTextControl) {\n tableMeta.editing.onCellChanged(cell, rowIndex);\n }\n }\n };\n\n const handleBlur = () => {\n tableMeta.editing.toggleDetailedMode(false);\n\n if (!hasNonTextControl && tableMeta.editing.getCellValue(cell) !== undefined) {\n tableMeta.editing.onCellChanged(cell, rowIndex);\n }\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: handleChange,\n row: cell.row.original,\n rowPendingChanges: tableMeta.editing.getRowValue(cell.row.id),\n tabIndex: isActiveRow ? 0 : -1,\n toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n type,\n value,\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 rowPendingChanges: Partial<TType> | undefined;\n tabIndex?: number;\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 rowPendingChanges,\n tabIndex = -1,\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\n return type(controlFnProps, { ...row, ...rowPendingChanges });\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 if (isDetailedMode) {\n event.preventDefault();\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 }\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 valueAsDate = date.parse(value as Date | string | undefined);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const newDate = (event as any).detail as Date;\n\n if (!valueAsDate || !newDate || (isDate(valueAsDate) && isDate(newDate) && !date.isWeakEqual(valueAsDate, newDate))) {\n props.onChange(newDate);\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={valueAsDate}\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","table","getContext","tableMeta","options","meta","columnMeta","column","columnDef","isActiveRow","rowActive","rowActiveIndex","type","_columnMeta$control","control","handleFocus","useEditingCellAutofocus","value","getValue","hasNonTextControl","useMemo","_cellRef$current","current","querySelector","handleChange","nextValue","editing","setCellValue","onCellChanged","handleBlur","toggleDetailedMode","getCellValue","undefined","useEffect","ref","document","activeElement","isElementInsideOrTriggeredFromContainer","error","getCellError","controlProps","dataType","fontSize","size","id","invalid","isDetailedMode","isTruncated","enableTruncate","onBlur","onChange","row","original","rowPendingChanges","getRowValue","tabIndex","cellAttributes","getCellAttributes","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","valueAsDate","date","newDate","detail","isDate","Datepicker","onKeyDown","TextareaWithAutosizing","String","Number","parseInt","Input"],"mappings":"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"}
|
@@ -19297,20 +19297,25 @@ function EditingControlCell(props) {
|
|
19297
19297
|
const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
|
19298
19298
|
const type = (_columnMeta$control = columnMeta.control) !== null && _columnMeta$control !== void 0 ? _columnMeta$control : 'input';
|
19299
19299
|
const handleFocus = useEditingCellAutofocus(props);
|
19300
|
+
const value = cell.getValue();
|
19300
19301
|
// some controls, like select2, should trigger cell changed (validation, updates) as the value changes
|
19301
19302
|
const hasNonTextControl = React__default.useMemo(() => {
|
19302
19303
|
var _cellRef$current;
|
19303
19304
|
return typeof type === 'function' && !!((_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.querySelector('[data-taco="Select2"],[data-taco="switch"],[data-taco="checkbox"]'));
|
19304
19305
|
}, [cellRef.current]);
|
19305
|
-
const handleChange =
|
19306
|
-
|
19307
|
-
|
19308
|
-
|
19306
|
+
const handleChange = nextValue => {
|
19307
|
+
if (nextValue !== value) {
|
19308
|
+
tableMeta.editing.setCellValue(cell, nextValue);
|
19309
|
+
if (hasNonTextControl) {
|
19310
|
+
tableMeta.editing.onCellChanged(cell, rowIndex);
|
19311
|
+
}
|
19309
19312
|
}
|
19310
19313
|
};
|
19311
19314
|
const handleBlur = () => {
|
19312
19315
|
tableMeta.editing.toggleDetailedMode(false);
|
19313
|
-
tableMeta.editing.
|
19316
|
+
if (!hasNonTextControl && tableMeta.editing.getCellValue(cell) !== undefined) {
|
19317
|
+
tableMeta.editing.onCellChanged(cell, rowIndex);
|
19318
|
+
}
|
19314
19319
|
};
|
19315
19320
|
// ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)
|
19316
19321
|
React__default.useEffect(() => {
|
@@ -19336,7 +19341,7 @@ function EditingControlCell(props) {
|
|
19336
19341
|
tabIndex: isActiveRow ? 0 : -1,
|
19337
19342
|
toggleDetailedMode: tableMeta.editing.toggleDetailedMode,
|
19338
19343
|
type,
|
19339
|
-
value
|
19344
|
+
value
|
19340
19345
|
};
|
19341
19346
|
const cellAttributes = {
|
19342
19347
|
...getCellAttributes(cell, index, isHighlighted),
|