@economic/taco 2.36.3 → 2.37.0
Sign up to get free protection for your applications and to get access to all the features.
- 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 {
|