@economic/taco 2.36.3 → 2.37.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Table3/Table3.d.ts +6 -6
- package/dist/components/Table3/components/Columns/Internal/EditingActionsMenu.d.ts +1 -1
- package/dist/components/Table3/components/Row/Editing/CreateRowButton.d.ts +1 -1
- package/dist/components/Table3/features/useTableEditing.d.ts +3 -3
- package/dist/components/Table3/types.d.ts +5 -3
- package/dist/esm/packages/taco/src/components/Table3/Table3.js +2 -2
- package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Internal/EditingActionsMenu.js +1 -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/components/Row/Editing/CreateRowButton.js +4 -4
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateRowButton.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js +108 -52
- package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/useTable3.js +3 -3
- package/dist/esm/packages/taco/src/components/Table3/useTable3.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/util/editing.js +15 -2
- package/dist/esm/packages/taco/src/components/Table3/util/editing.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/Table.js +19 -4
- package/dist/esm/packages/taco/src/primitives/Table/Core/Table.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Body/EmptyStateBody.js +5 -2
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Body/EmptyStateBody.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/types.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/setup.js +3 -2
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/setup.js.map +1 -1
- package/dist/esm/packages/taco/src/types.js.map +1 -1
- package/dist/primitives/Table/Core/components/Body/EmptyStateBody.d.ts +2 -1
- package/dist/primitives/Table/types.d.ts +6 -3
- package/dist/taco.cjs.development.js +160 -72
- 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/dist/types.d.ts +1 -0
- package/package.json +2 -2
@@ -11,15 +11,15 @@ declare namespace Group {
|
|
11
11
|
}
|
12
12
|
export declare const Table3: (<TType = unknown>(props: (import("../..").TableClientProps<TType> & {
|
13
13
|
enableEditing?: boolean | undefined;
|
14
|
-
|
15
|
-
|
16
|
-
|
14
|
+
onEditingChange?: import("./types").Table3EditingChangeHandler<TType> | undefined;
|
15
|
+
onEditingCreate?: import("./types").Table3EditingCreateHandler<TType> | undefined;
|
16
|
+
onEditingSave?: import("./types").Table3EditingSaveHandler<TType> | undefined;
|
17
17
|
validator?: import("./types").Table3EditingValidatorFn<TType> | undefined;
|
18
18
|
} & React.RefAttributes<Table3Ref>) | (import("../..").TableServerProps<TType> & {
|
19
19
|
enableEditing?: boolean | undefined;
|
20
|
-
|
21
|
-
|
22
|
-
|
20
|
+
onEditingChange?: import("./types").Table3EditingChangeHandler<TType> | undefined;
|
21
|
+
onEditingCreate?: import("./types").Table3EditingCreateHandler<TType> | undefined;
|
22
|
+
onEditingSave?: import("./types").Table3EditingSaveHandler<TType> | undefined;
|
23
23
|
validator?: import("./types").Table3EditingValidatorFn<TType> | undefined;
|
24
24
|
} & React.RefAttributes<Table3Ref>)) => JSX.Element) & {
|
25
25
|
Column: typeof Column;
|
@@ -4,7 +4,7 @@ declare type EditingActionMenuProps = {
|
|
4
4
|
hasErrors: boolean;
|
5
5
|
onClear: () => void;
|
6
6
|
onExit: () => void;
|
7
|
-
|
7
|
+
onEditingSave: () => Promise<void>;
|
8
8
|
isLastRow: boolean;
|
9
9
|
};
|
10
10
|
export declare function EditingActionMenu(props: EditingActionMenuProps): JSX.Element;
|
@@ -4,7 +4,7 @@ import { ScrollToOptions } from '@tanstack/react-virtual';
|
|
4
4
|
declare type Props<TType = unknown> = {
|
5
5
|
table: ReactTable<TType>;
|
6
6
|
tableMeta: ReactTableMeta<TType>;
|
7
|
-
|
7
|
+
onEditingCreate: (() => (row: Partial<TType>) => boolean) | undefined;
|
8
8
|
scrollToIndex: (index: number, options?: ScrollToOptions) => void;
|
9
9
|
};
|
10
10
|
export default function CreateNewRowButton<TType = unknown>(props: Props<TType>): JSX.Element;
|
@@ -1,11 +1,11 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { Cell as ReactTableCell, Table as ReactTable } from '@tanstack/react-table';
|
3
|
-
import { Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';
|
3
|
+
import { Table3EditingChangeHandler, Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';
|
4
4
|
import { TableRef } from '../../../primitives/Table/types';
|
5
|
-
export declare function useTableEditing<TType = unknown>(isEnabled: boolean | undefined, handleSave: Table3EditingSaveHandler<TType> | undefined, validator: Table3EditingValidatorFn<TType> | undefined): {
|
5
|
+
export declare function useTableEditing<TType = unknown>(isEnabled: boolean | undefined, handleSave: Table3EditingSaveHandler<TType> | undefined, handleChange: Table3EditingChangeHandler<TType> | undefined, validator: Table3EditingValidatorFn<TType> | undefined): {
|
6
6
|
getCellValue: <T extends TType>(cell: ReactTableCell<T, unknown>) => unknown;
|
7
7
|
getCellError: <T_1 extends TType>(cell: ReactTableCell<T_1, unknown>) => string | undefined;
|
8
|
-
setCellValue: <T_2 extends TType>(cell: ReactTableCell<T_2, unknown>, change: unknown, rowIndex: number) => void
|
8
|
+
setCellValue: <T_2 extends TType>(cell: ReactTableCell<T_2, unknown>, change: unknown, rowIndex: number) => Promise<void>;
|
9
9
|
validateCell: <T_3 extends TType>(cell: ReactTableCell<T_3, unknown>) => Promise<void>;
|
10
10
|
addCreatedRowChangeset: (row: any) => Promise<void>;
|
11
11
|
hasChanges: (rowId?: string | undefined) => boolean;
|
@@ -4,6 +4,8 @@ export declare type Table3Ref = TableRef & {
|
|
4
4
|
toggleEditing: (enabled: boolean | undefined) => void;
|
5
5
|
};
|
6
6
|
};
|
7
|
+
export declare type Table3EditingChangeHandler<TType = unknown> = (accessor: string, value: unknown, row: TType, prevRow: TType) => Promise<Partial<TType>> | undefined;
|
8
|
+
export declare type Table3EditingCreateHandler<TType = unknown> = () => (row: Partial<TType>) => boolean;
|
7
9
|
export declare type Table3EditingSaveHandler<TType = unknown> = (row: TType) => Promise<void>;
|
8
10
|
export declare type Table3EditingValidatorFn<TType = unknown> = (row: TType) => Promise<Partial<Record<keyof TType, string>> | undefined> | Partial<Record<keyof TType, string>> | undefined;
|
9
11
|
export declare type Table3FeatureProps = TableFeatureProps & {
|
@@ -11,9 +13,9 @@ export declare type Table3FeatureProps = TableFeatureProps & {
|
|
11
13
|
};
|
12
14
|
export declare type Table3Props<TType = unknown> = TableProps<TType> & {
|
13
15
|
enableEditing?: boolean;
|
14
|
-
|
15
|
-
|
16
|
-
|
16
|
+
onEditingChange?: Table3EditingChangeHandler<TType>;
|
17
|
+
onEditingCreate?: Table3EditingCreateHandler<TType>;
|
18
|
+
onEditingSave?: Table3EditingSaveHandler<TType>;
|
17
19
|
validator?: Table3EditingValidatorFn<TType>;
|
18
20
|
};
|
19
21
|
export declare type Table3ColumnProps<TType = unknown> = TableColumnProps<TType>;
|
@@ -22,7 +22,7 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
|
|
22
22
|
enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing
|
23
23
|
};
|
24
24
|
const hasValidationErrors = table3.meta.editing.hasErrors(table3.instance, table3.ref);
|
25
|
-
const showCreateRowButton = table3.meta.editing.isEnabled && props.
|
25
|
+
const showCreateRowButton = table3.meta.editing.isEnabled && props.onEditingCreate;
|
26
26
|
return /*#__PURE__*/React__default.createElement(Table, null, /*#__PURE__*/React__default.createElement(Table.Toolbar, {
|
27
27
|
table: table3
|
28
28
|
}, table3.meta.editing.isEnabled ? ( /*#__PURE__*/React__default.createElement(Editing, {
|
@@ -39,7 +39,7 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
|
|
39
39
|
}), showCreateRowButton && ( /*#__PURE__*/React__default.createElement(CreateNewRowButton, {
|
40
40
|
table: table3.instance,
|
41
41
|
tableMeta: table3.meta,
|
42
|
-
|
42
|
+
onEditingCreate: props.onEditingCreate,
|
43
43
|
scrollToIndex: table3.renderer.scrollToIndex
|
44
44
|
}))));
|
45
45
|
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport { fixedForwardRef } from '../../types';\nimport { useTable3 } from './useTable3';\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { Alert } from './components/Editing/Alert';\nimport CreateNewRowButton from './components/Row/Editing/CreateRowButton';\nimport { Table3Props, Table3Ref, Table3ColumnProps, Table3GroupProps } from './types';\nimport { Editing } from './components/Toolbar/Editing/Editing';\nimport './style.css';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n return null;\n}\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: Table3GroupProps) {\n return null;\n}\nGroup.displayName = 'Table3Group';\n\nconst BaseTable3 = fixedForwardRef(function BaseTable3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const table3 = useTable3<TType>(props, ref);\n\n const gridAttributes = {\n 'data-table-editing-mode': table3.meta.editing?.isEditing\n ? table3.meta.editing?.isDetailedMode\n ? 'detailed'\n : 'normal'\n : undefined,\n enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing,\n };\n\n const hasValidationErrors = table3.meta.editing.hasErrors(table3.instance, table3.ref);\n const showCreateRowButton = table3.meta.editing.isEnabled && props.
|
1
|
+
{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport { fixedForwardRef } from '../../types';\nimport { useTable3 } from './useTable3';\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { Alert } from './components/Editing/Alert';\nimport CreateNewRowButton from './components/Row/Editing/CreateRowButton';\nimport { Table3Props, Table3Ref, Table3ColumnProps, Table3GroupProps } from './types';\nimport { Editing } from './components/Toolbar/Editing/Editing';\nimport './style.css';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n return null;\n}\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: Table3GroupProps) {\n return null;\n}\nGroup.displayName = 'Table3Group';\n\nconst BaseTable3 = fixedForwardRef(function BaseTable3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const table3 = useTable3<TType>(props, ref);\n\n const gridAttributes = {\n 'data-table-editing-mode': table3.meta.editing?.isEditing\n ? table3.meta.editing?.isDetailedMode\n ? 'detailed'\n : 'normal'\n : undefined,\n enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing,\n };\n\n const hasValidationErrors = table3.meta.editing.hasErrors(table3.instance, table3.ref);\n const showCreateRowButton = table3.meta.editing.isEnabled && props.onEditingCreate;\n\n return (\n <Table>\n <Table.Toolbar<TType> table={table3}>\n {table3.meta.editing.isEnabled ? (\n <Editing scrollToIndex={table3.renderer.scrollToIndex} table={table3.instance} />\n ) : null}\n </Table.Toolbar>\n {hasValidationErrors ? (\n <Alert\n className=\"mb-4\"\n scrollToIndex={table3.renderer.scrollToIndex}\n table={table3.instance}\n tableRef={table3.ref}\n />\n ) : null}\n <Table.Grid<TType> {...gridAttributes} data-taco=\"table3\" table={table3}>\n {showCreateRowButton && (\n <CreateNewRowButton\n table={table3.instance}\n tableMeta={table3.meta}\n onEditingCreate={props.onEditingCreate}\n scrollToIndex={table3.renderer.scrollToIndex}\n />\n )}\n </Table.Grid>\n </Table>\n );\n});\n\nexport const Table3 = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const stringifiedChildren = String(props.children);\n // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n // this is cheaper from a complexity perspective, and probably performance wise as well\n const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n return <BaseTable3<TType> {...props} key={key} ref={ref} />;\n}) as (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {\n Column: typeof Column;\n Group: typeof Group;\n};\nTable3.Column = Column;\nTable3.Group = Group;\n\nexport type {\n Table3Props,\n Table3Ref,\n Table3ColumnProps,\n Table3GroupProps,\n Table3EditingSaveHandler,\n Table3EditingValidatorFn,\n Table3FeatureProps,\n Table3Texts,\n} from './types';\n"],"names":["Column","_","displayName","Group","BaseTable3","fixedForwardRef","props","ref","table3","useTable3","gridAttributes","_table3$meta$editing","meta","editing","isEditing","_table3$meta$editing2","isDetailedMode","undefined","enableHorizontalArrowKeyNavigation","hasValidationErrors","hasErrors","instance","showCreateRowButton","isEnabled","onEditingCreate","React","Table","Toolbar","table","Editing","scrollToIndex","renderer","Alert","className","tableRef","Grid","CreateNewRowButton","tableMeta","Table3","stringifiedChildren","String","children","key","useMemo"],"mappings":";;;;;;;;AAUA,SAASA,MAAMA,CAAkBC,CAA2B;EACxD,OAAO,IAAI;AACf;AACAD,MAAM,CAACE,WAAW,GAAG,cAAc;AAEnC,SAASC,KAAKA,CAACF,CAAmB;EAC9B,OAAO,IAAI;AACf;AACAE,KAAK,CAACD,WAAW,GAAG,aAAa;AAEjC,MAAME,UAAU,gBAAGC,eAAe,CAAC,SAASD,UAAUA,CAAkBE,KAAyB,EAAEC,GAAyB;;EACxH,MAAMC,MAAM,GAAGC,SAAS,CAAQH,KAAK,EAAEC,GAAG,CAAC;EAE3C,MAAMG,cAAc,GAAG;IACnB,yBAAyB,EAAE,CAAAC,oBAAA,GAAAH,MAAM,CAACI,IAAI,CAACC,OAAO,cAAAF,oBAAA,eAAnBA,oBAAA,CAAqBG,SAAS,GACnD,CAAAC,qBAAA,GAAAP,MAAM,CAACI,IAAI,CAACC,OAAO,cAAAE,qBAAA,eAAnBA,qBAAA,CAAqBC,cAAc,GAC/B,UAAU,GACV,QAAQ,GACZC,SAAS;IACfC,kCAAkC,EAAEV,MAAM,CAACI,IAAI,CAACC,OAAO,CAACC;GAC3D;EAED,MAAMK,mBAAmB,GAAGX,MAAM,CAACI,IAAI,CAACC,OAAO,CAACO,SAAS,CAACZ,MAAM,CAACa,QAAQ,EAAEb,MAAM,CAACD,GAAG,CAAC;EACtF,MAAMe,mBAAmB,GAAGd,MAAM,CAACI,IAAI,CAACC,OAAO,CAACU,SAAS,IAAIjB,KAAK,CAACkB,eAAe;EAElF,oBACIC,6BAACC,KAAK,qBACFD,6BAACC,KAAK,CAACC,OAAO;IAAQC,KAAK,EAAEpB;KACxBA,MAAM,CAACI,IAAI,CAACC,OAAO,CAACU,SAAS,kBAC1BE,6BAACI,OAAO;IAACC,aAAa,EAAEtB,MAAM,CAACuB,QAAQ,CAACD,aAAa;IAAEF,KAAK,EAAEpB,MAAM,CAACa;IAAY,IACjF,IAAI,CACI,EACfF,mBAAmB,kBAChBM,6BAACO,KAAK;IACFC,SAAS,EAAC,MAAM;IAChBH,aAAa,EAAEtB,MAAM,CAACuB,QAAQ,CAACD,aAAa;IAC5CF,KAAK,EAAEpB,MAAM,CAACa,QAAQ;IACtBa,QAAQ,EAAE1B,MAAM,CAACD;IACnB,IACF,IAAI,eACRkB,6BAACC,KAAK,CAACS,IAAI,oBAAYzB,cAAc;iBAAY,QAAQ;IAACkB,KAAK,EAAEpB;MAC5Dc,mBAAmB,mBAChBG,6BAACW,kBAAkB;IACfR,KAAK,EAAEpB,MAAM,CAACa,QAAQ;IACtBgB,SAAS,EAAE7B,MAAM,CAACI,IAAI;IACtBY,eAAe,EAAElB,KAAK,CAACkB,eAAe;IACtCM,aAAa,EAAEtB,MAAM,CAACuB,QAAQ,CAACD;IACjC,CACL,CACQ,CACT;AAEhB,CAAC,CAAC;MAEWQ,MAAM,gBAAGjC,eAAe,CAAC,SAASiC,MAAMA,CAAkBhC,KAAyB,EAAEC,GAAyB;EACvH,MAAMgC,mBAAmB,GAAGC,MAAM,CAAClC,KAAK,CAACmC,QAAQ,CAAC;;;EAGlD,MAAMC,GAAG,GAAGjB,cAAK,CAACkB,OAAO,CAAC,MAAMH,MAAM,CAAC,WAAW,GAAGD,mBAAmB,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EACjG,oBAAOd,6BAACrB,UAAU,oBAAYE,KAAK;IAAEoC,GAAG,EAAEA,GAAG;IAAEnC,GAAG,EAAEA;KAAO;AAC/D,CAAC;AAID+B,MAAM,CAACtC,MAAM,GAAGA,MAAM;AACtBsC,MAAM,CAACnC,KAAK,GAAGA,KAAK;;;;"}
|
@@ -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
|
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 onEditingSave: () => Promise<void>;\n isLastRow: boolean;\n};\n\nexport function EditingActionMenu(props: EditingActionMenuProps) {\n const { hasChanges, hasErrors, onClear: handleClear, onExit: handleExit, onEditingSave: 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","onEditingSave","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,aAAa,EAAEC,UAAU;IAAEC;GAAW,GAAGT,KAAK;EACvH,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;;;;"}
|
package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateRowButton.js
CHANGED
@@ -5,7 +5,7 @@ import { animateCreateRow } from '../../../util/editing.js';
|
|
5
5
|
|
6
6
|
function CreateNewRowButton(props) {
|
7
7
|
const {
|
8
|
-
|
8
|
+
onEditingCreate,
|
9
9
|
scrollToIndex,
|
10
10
|
table,
|
11
11
|
tableMeta
|
@@ -24,7 +24,7 @@ function CreateNewRowButton(props) {
|
|
24
24
|
};
|
25
25
|
const handleCreate = function () {
|
26
26
|
try {
|
27
|
-
if (!
|
27
|
+
if (!onEditingCreate) {
|
28
28
|
return Promise.resolve();
|
29
29
|
}
|
30
30
|
const createdRow = rows.find(row => {
|
@@ -35,14 +35,14 @@ function CreateNewRowButton(props) {
|
|
35
35
|
if (createdRow) {
|
36
36
|
return Promise.resolve(tableMeta.editing.saveChanges()).then(function () {
|
37
37
|
if (!tableMeta.editing.hasRowErrors(createdRow.id)) {
|
38
|
-
const rowFinder =
|
38
|
+
const rowFinder = onEditingCreate();
|
39
39
|
setRowCreated({
|
40
40
|
rowFinder
|
41
41
|
});
|
42
42
|
}
|
43
43
|
});
|
44
44
|
} else {
|
45
|
-
const rowFinder =
|
45
|
+
const rowFinder = onEditingCreate();
|
46
46
|
setRowCreated({
|
47
47
|
rowFinder
|
48
48
|
});
|
package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateRowButton.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CreateRowButton.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/CreateRowButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { ScrollToOptions } from '@tanstack/react-virtual';\nimport { Button } from '../../../../Button/Button';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { animateCreateRow } from '../../../util/editing';\n\ntype Props<TType = unknown> = {\n table: ReactTable<TType>;\n tableMeta: ReactTableMeta<TType>;\n
|
1
|
+
{"version":3,"file":"CreateRowButton.js","sources":["../../../../../../../../../../src/components/Table3/components/Row/Editing/CreateRowButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { ScrollToOptions } from '@tanstack/react-virtual';\nimport { Button } from '../../../../Button/Button';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { animateCreateRow } from '../../../util/editing';\n\ntype Props<TType = unknown> = {\n table: ReactTable<TType>;\n tableMeta: ReactTableMeta<TType>;\n onEditingCreate: (() => (row: Partial<TType>) => boolean) | undefined;\n scrollToIndex: (index: number, options?: ScrollToOptions) => void;\n};\n\nexport default function CreateNewRowButton<TType = unknown>(props: Props<TType>) {\n const { onEditingCreate, scrollToIndex, table, tableMeta } = props;\n const { texts } = useLocalization();\n const rows = table.getCoreRowModel().rows;\n const [rowCreated, setRowCreated] = React.useState<{ rowFinder: ((row: Partial<TType>) => boolean) | undefined }>({\n rowFinder: undefined,\n });\n\n const handleKeyDown = event => {\n if (!tableMeta.editing.hasChanges() && event.key === 'Tab') {\n !tableMeta.editing.saveChanges();\n }\n };\n\n const handleCreate = async () => {\n if (!onEditingCreate) {\n return;\n }\n const createdRow = rows.find(row => rowCreated?.rowFinder?.(row.original));\n\n if (createdRow) {\n await tableMeta.editing.saveChanges();\n\n if (!tableMeta.editing.hasRowErrors(createdRow.id)) {\n const rowFinder = onEditingCreate();\n\n setRowCreated({ rowFinder });\n }\n } else {\n const rowFinder = onEditingCreate();\n setRowCreated({ rowFinder });\n }\n };\n\n React.useEffect(() => {\n if (typeof rowCreated?.rowFinder === 'function') {\n const createdRow = rows.find(row => rowCreated?.rowFinder?.(row.original));\n\n if (createdRow) {\n const rowInTable = table.getRowModel().rows.find(row => rowCreated?.rowFinder?.(row.original));\n if (rowInTable) {\n tableMeta.editing.toggleEditing(true);\n tableMeta.rowActive.setRowActiveIndex(createdRow.index);\n scrollToIndex(createdRow.index);\n requestAnimationFrame(() => animateCreateRow(createdRow.id));\n }\n requestAnimationFrame(() => tableMeta.editing.addCreatedRowChangeset(createdRow));\n }\n }\n }, [rowCreated]);\n\n return (\n <tr\n onClick={handleCreate}\n className=\"border-grey-300 hover:bg-grey-100 group !sticky bottom-10 left-0 z-[21] !block cursor-pointer border-t\">\n <td className=\"!border-t-0 !bg-transparent\">\n <Button onKeyDown={handleKeyDown} className=\"group-hover:bg-grey-200 sticky left-0\" appearance=\"transparent\">\n + {texts.table3.editing.buttons.create.label}\n </Button>\n </td>\n </tr>\n );\n}\n"],"names":["CreateNewRowButton","props","onEditingCreate","scrollToIndex","table","tableMeta","texts","useLocalization","rows","getCoreRowModel","rowCreated","setRowCreated","React","useState","rowFinder","undefined","handleKeyDown","event","editing","hasChanges","key","saveChanges","handleCreate","Promise","resolve","createdRow","find","row","_rowCreated$rowFinder","call","original","_temp","then","hasRowErrors","id","e","reject","useEffect","_rowCreated$rowFinder2","rowInTable","getRowModel","_rowCreated$rowFinder3","toggleEditing","rowActive","setRowActiveIndex","index","requestAnimationFrame","animateCreateRow","addCreatedRowChangeset","onClick","className","Button","onKeyDown","appearance","table3","buttons","create","label"],"mappings":"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"}
|
@@ -2,8 +2,9 @@ import React__default from 'react';
|
|
2
2
|
import { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown.js';
|
3
3
|
import { _forOf, _catch } from '../../../../../../node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js';
|
4
4
|
import { willRowMove } from '../util/editing.js';
|
5
|
+
import { debounce } from 'lodash-es';
|
5
6
|
|
6
|
-
function useTableEditing(isEnabled = false, handleSave, validator) {
|
7
|
+
function useTableEditing(isEnabled = false, handleSave, handleChange, validator) {
|
7
8
|
// used to switch the table into editing mode
|
8
9
|
const [isEditing, toggleEditing] = React__default.useState(false);
|
9
10
|
// used to switch the editing between "detailed" mode
|
@@ -13,7 +14,7 @@ function useTableEditing(isEnabled = false, handleSave, validator) {
|
|
13
14
|
// store pending changes for each row
|
14
15
|
// changes are saved as soon as the active row changes, so in most cases this will only contain the active row's changes
|
15
16
|
// but not always - if validation or server requests fail when saving, those rows remain until the failure is resolved
|
16
|
-
const pendingChangesFns = usePendingChanges(isEnabled, handleSave, validator);
|
17
|
+
const pendingChangesFns = usePendingChanges(isEnabled, handleSave, handleChange, validator);
|
17
18
|
useGlobalKeyDown(isEnabled && isEditing ? {
|
18
19
|
key: 's',
|
19
20
|
meta: true,
|
@@ -33,12 +34,12 @@ function useTableEditing(isEnabled = false, handleSave, validator) {
|
|
33
34
|
...pendingChangesFns
|
34
35
|
};
|
35
36
|
}
|
36
|
-
function usePendingChanges(isEnabled, handleSave, validator) {
|
37
|
+
function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
|
37
38
|
const saveChanges = function (rowId = undefined) {
|
38
39
|
try {
|
39
40
|
let _exit = false;
|
40
41
|
if (!handleSave) {
|
41
|
-
console.warn('Tried to save, but Table has no
|
42
|
+
console.warn('Tried to save, but Table has no onEditingSave handler');
|
42
43
|
return Promise.resolve();
|
43
44
|
}
|
44
45
|
// we save back to pendingChanges, so make a copy of it's state when save was triggered
|
@@ -79,7 +80,7 @@ function usePendingChanges(isEnabled, handleSave, validator) {
|
|
79
80
|
}();
|
80
81
|
return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2); // send new data to the server
|
81
82
|
}, function (error) {
|
82
|
-
// the
|
83
|
+
// the onEditingSave handler should throw errors when something fails, e.g. validation, network errors etc
|
83
84
|
// this code handles those errors and maps them either to row errors or cell specific errors
|
84
85
|
let rowError;
|
85
86
|
let cellErrors;
|
@@ -153,26 +154,42 @@ function usePendingChanges(isEnabled, handleSave, validator) {
|
|
153
154
|
return Promise.reject(e);
|
154
155
|
}
|
155
156
|
};
|
157
|
+
const setCellValue = function (cell, change, rowIndex) {
|
158
|
+
try {
|
159
|
+
const changes = {
|
160
|
+
[cell.column.id]: change
|
161
|
+
};
|
162
|
+
setPendingChanges(currentChanges => {
|
163
|
+
const nextChanges = createPendingChangesSetter(currentChanges, cell.row, rowIndex, changes);
|
164
|
+
pendingChangesUpdater.syncCellChanges(nextChanges);
|
165
|
+
return nextChanges;
|
166
|
+
});
|
167
|
+
pendingChangesUpdater.runCellUpdates(changes, cell, rowIndex);
|
168
|
+
return Promise.resolve();
|
169
|
+
} catch (e) {
|
170
|
+
return Promise.reject(e);
|
171
|
+
}
|
172
|
+
};
|
156
173
|
const addCreatedRowChangeset = function (row) {
|
157
174
|
try {
|
158
175
|
const cells = row.getAllCells();
|
159
176
|
setPendingChanges(currentChanges => {
|
160
177
|
return cells.reduce((changes, cell) => {
|
161
178
|
if (cell.getValue()) {
|
162
|
-
var _currentChanges$cell
|
179
|
+
var _currentChanges$cell$, _currentChanges$cell$2, _currentChanges$cell$3;
|
163
180
|
return {
|
164
181
|
...changes,
|
165
182
|
[cell.row.id]: {
|
166
183
|
...changes[cell.row.id],
|
167
184
|
[cell.column.id]: cell.getValue(),
|
168
185
|
_meta: {
|
169
|
-
...((_currentChanges$cell$
|
186
|
+
...((_currentChanges$cell$ = currentChanges[cell.row.id]) === null || _currentChanges$cell$ === void 0 ? void 0 : _currentChanges$cell$._meta),
|
170
187
|
original: cell.row.original,
|
171
188
|
moveReason: {
|
172
|
-
...((_currentChanges$cell$
|
189
|
+
...((_currentChanges$cell$2 = currentChanges[cell.row.id]) === null || _currentChanges$cell$2 === void 0 ? void 0 : _currentChanges$cell$2._meta.moveReason)
|
173
190
|
},
|
174
191
|
errors: {
|
175
|
-
...((_currentChanges$cell$
|
192
|
+
...((_currentChanges$cell$3 = currentChanges[cell.row.id]) === null || _currentChanges$cell$3 === void 0 ? void 0 : _currentChanges$cell$3._meta.errors)
|
176
193
|
}
|
177
194
|
}
|
178
195
|
}
|
@@ -198,49 +215,7 @@ function usePendingChanges(isEnabled, handleSave, validator) {
|
|
198
215
|
var _pendingChanges$cell$2, _pendingChanges$cell$3, _pendingChanges$cell$4;
|
199
216
|
return (_pendingChanges$cell$2 = pendingChanges[cell.row.id]) === null || _pendingChanges$cell$2 === void 0 ? void 0 : (_pendingChanges$cell$3 = _pendingChanges$cell$2._meta.errors) === null || _pendingChanges$cell$3 === void 0 ? void 0 : (_pendingChanges$cell$4 = _pendingChanges$cell$3.cells) === null || _pendingChanges$cell$4 === void 0 ? void 0 : _pendingChanges$cell$4[cell.column.id];
|
200
217
|
}
|
201
|
-
const
|
202
|
-
setPendingChanges(currentChanges => {
|
203
|
-
var _currentChanges$cell$, _currentChanges$cell$2, _currentChanges$cell$3;
|
204
|
-
const nextChanges = {
|
205
|
-
...currentChanges
|
206
|
-
};
|
207
|
-
const rowChanges = {
|
208
|
-
...currentChanges[cell.row.id],
|
209
|
-
_meta: {
|
210
|
-
...((_currentChanges$cell$ = currentChanges[cell.row.id]) === null || _currentChanges$cell$ === void 0 ? void 0 : _currentChanges$cell$._meta),
|
211
|
-
original: cell.row.original,
|
212
|
-
moveReason: {
|
213
|
-
...((_currentChanges$cell$2 = currentChanges[cell.row.id]) === null || _currentChanges$cell$2 === void 0 ? void 0 : _currentChanges$cell$2._meta.moveReason)
|
214
|
-
},
|
215
|
-
errors: {
|
216
|
-
...((_currentChanges$cell$3 = currentChanges[cell.row.id]) === null || _currentChanges$cell$3 === void 0 ? void 0 : _currentChanges$cell$3._meta.errors)
|
217
|
-
}
|
218
|
-
}
|
219
|
-
};
|
220
|
-
// update if the change is different to the original (saved) value,
|
221
|
-
// otherwise remove any change - no point saving the same value
|
222
|
-
if (change !== cell.row.original[cell.column.id]) {
|
223
|
-
rowChanges[cell.column.id] = change;
|
224
|
-
// determine if the row will move position based on this change, and save why it will move
|
225
|
-
const reason = willRowMove(cell, change, rowIndex);
|
226
|
-
if (reason) {
|
227
|
-
rowChanges._meta.moveReason[cell.column.id] = reason;
|
228
|
-
} else {
|
229
|
-
delete rowChanges._meta.moveReason[cell.column.id];
|
230
|
-
}
|
231
|
-
} else {
|
232
|
-
delete rowChanges[cell.column.id];
|
233
|
-
}
|
234
|
-
// set the changes for the row...
|
235
|
-
// or delete if there are no changes left, so that we don't store changes with unchanged data
|
236
|
-
if (Object.keys(rowChanges).filter(k => k !== '_meta').length) {
|
237
|
-
nextChanges[cell.row.id] = rowChanges;
|
238
|
-
} else {
|
239
|
-
delete nextChanges[cell.row.id];
|
240
|
-
}
|
241
|
-
return nextChanges;
|
242
|
-
});
|
243
|
-
}, []);
|
218
|
+
const pendingChangesUpdater = usePendingChangesUpdater(handleChange, setPendingChanges);
|
244
219
|
function hasRowErrors(rowId) {
|
245
220
|
var _pendingChanges$rowId, _pendingChanges$rowId2, _pendingChanges$rowId3, _pendingChanges$rowId4, _pendingChanges$rowId5;
|
246
221
|
if (!isEnabled) {
|
@@ -361,6 +336,87 @@ function useLastFocusedCellIndex() {
|
|
361
336
|
}, []);
|
362
337
|
return [lastFocusedCellIndexRef.current, setLastFocusedCellIndex];
|
363
338
|
}
|
339
|
+
function usePendingChangesUpdater(handleChange, setPendingChanges) {
|
340
|
+
const updatersRef = React__default.useRef({});
|
341
|
+
const runCellUpdates = React__default.useCallback(debounce(function (changes, cell, rowIndex) {
|
342
|
+
try {
|
343
|
+
const _temp4 = function () {
|
344
|
+
if (typeof handleChange === 'function') {
|
345
|
+
const previousValues = {
|
346
|
+
...cell.row.original,
|
347
|
+
...getChangesetFromChanges(updatersRef.current[cell.row.id])
|
348
|
+
};
|
349
|
+
const nextValues = {
|
350
|
+
...previousValues,
|
351
|
+
...changes
|
352
|
+
};
|
353
|
+
return Promise.resolve(handleChange(cell.column.id, changes[cell.column.id], nextValues, previousValues)).then(function (updates) {
|
354
|
+
if (updates && Object.keys(updates).length) {
|
355
|
+
setPendingChanges(currentChanges => createPendingChangesSetter(currentChanges, cell.row, rowIndex, updates));
|
356
|
+
}
|
357
|
+
});
|
358
|
+
}
|
359
|
+
}();
|
360
|
+
return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
|
361
|
+
} catch (e) {
|
362
|
+
return Promise.reject(e);
|
363
|
+
}
|
364
|
+
}, 250), []);
|
365
|
+
function syncCellChanges(changes) {
|
366
|
+
updatersRef.current = changes;
|
367
|
+
}
|
368
|
+
return {
|
369
|
+
syncCellChanges,
|
370
|
+
runCellUpdates
|
371
|
+
};
|
372
|
+
}
|
373
|
+
function createPendingChangesSetter(currentChanges, row, rowIndex, changes) {
|
374
|
+
var _currentChanges$row$i, _currentChanges$row$i2, _currentChanges$row$i3;
|
375
|
+
// prepare
|
376
|
+
const nextChanges = {
|
377
|
+
...currentChanges
|
378
|
+
};
|
379
|
+
const rowChanges = {
|
380
|
+
...currentChanges[row.id],
|
381
|
+
_meta: {
|
382
|
+
...((_currentChanges$row$i = currentChanges[row.id]) === null || _currentChanges$row$i === void 0 ? void 0 : _currentChanges$row$i._meta),
|
383
|
+
original: row.original,
|
384
|
+
moveReason: {
|
385
|
+
...((_currentChanges$row$i2 = currentChanges[row.id]) === null || _currentChanges$row$i2 === void 0 ? void 0 : _currentChanges$row$i2._meta.moveReason)
|
386
|
+
},
|
387
|
+
errors: {
|
388
|
+
...((_currentChanges$row$i3 = currentChanges[row.id]) === null || _currentChanges$row$i3 === void 0 ? void 0 : _currentChanges$row$i3._meta.errors)
|
389
|
+
}
|
390
|
+
}
|
391
|
+
};
|
392
|
+
// run changes
|
393
|
+
const cells = row._getAllCellsByColumnId();
|
394
|
+
for (const [accessor, change] of Object.entries(changes)) {
|
395
|
+
// update if the change is different to the original (saved) value,
|
396
|
+
// otherwise remove any change - no point saving the same value
|
397
|
+
if (change !== row.original[accessor]) {
|
398
|
+
rowChanges[accessor] = change;
|
399
|
+
// determine if the row will move position based on this change, and save why it will move
|
400
|
+
const reason = willRowMove(cells[accessor], change, rowIndex);
|
401
|
+
if (reason) {
|
402
|
+
rowChanges._meta.moveReason[accessor] = reason;
|
403
|
+
} else {
|
404
|
+
delete rowChanges._meta.moveReason[accessor];
|
405
|
+
}
|
406
|
+
} else {
|
407
|
+
delete rowChanges[accessor];
|
408
|
+
delete rowChanges._meta.moveReason[accessor];
|
409
|
+
}
|
410
|
+
}
|
411
|
+
// set changes
|
412
|
+
// or delete if there are no changes left, so that we don't store changes with unchanged data
|
413
|
+
if (Object.keys(rowChanges).filter(k => k !== '_meta').length) {
|
414
|
+
nextChanges[row.id] = rowChanges;
|
415
|
+
} else {
|
416
|
+
delete nextChanges[row.id];
|
417
|
+
}
|
418
|
+
return nextChanges;
|
419
|
+
}
|
364
420
|
function getChangesetFromChanges(changes) {
|
365
421
|
// extract the original data from the row changes
|
366
422
|
const {
|