Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: event description improved #581

Merged
merged 1 commit into from
Sep 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/svelte
36 changes: 18 additions & 18 deletions src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1079,14 +1079,14 @@ declare global {
"setedit": BeforeEdit;
"beforeapplyrange": FocusRenderEvent;
"beforesetrange": any;
"beforeeditrender": FocusRenderEvent;
"setrange": RangeArea & { type: MultiDimensionType };
"beforeeditrender": FocusRenderEvent;
"selectall": any;
"canceledit": any;
"settemprange": Nullable<TempRange> | null;
"beforesettemprange": { tempRange: Nullable<TempRange> | null } & EventData & AllDimensionType;
"applyfocus": FocusRenderEvent;
"focuscell": ApplyFocusEvent;
"focuscell": ApplyFocusEvent & FocusRenderEvent;
"beforerangedataapply": FocusRenderEvent;
"selectionchangeinit": ChangedRange;
"beforerangecopyapply": ChangedRange;
Expand Down Expand Up @@ -1344,11 +1344,11 @@ declare namespace LocalJSX {
order: Record<ColumnProp, 'asc' | 'desc' | undefined>;
}>) => void;
/**
* Triggered after data applied or range changed.
* After data applied or range changed.
*/
"onAfteredit"?: (event: RevoGridCustomEvent<AfterEditEvent>) => void;
/**
* Triggered after focus render finished. Can be used to access a focus element through `event.target`. This is just a duplicate of `afterfocus` from `revogr-focus.tsx`.
* After focus render finished. Can be used to access a focus element through `event.target`. This is just a duplicate of `afterfocus` from `revogr-focus.tsx`.
*/
"onAfterfocus"?: (event: RevoGridCustomEvent<FocusAfterRenderEvent>) => void;
/**
Expand Down Expand Up @@ -1382,11 +1382,11 @@ declare namespace LocalJSX {
source: DataType[];
}>) => void;
/**
* This event is triggered before autofill is applied. To prevent the default behavior of applying the edit data, you can call `e.preventDefault()`.
* Before autofill is applied. To prevent the default behavior of applying the edit data, you can call `e.preventDefault()`.
*/
"onBeforeautofill"?: (event: RevoGridCustomEvent<ChangedRange>) => void;
/**
* This event is triggered before the cell focus is changed. To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
* Before the cell focus is changed. To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
*/
"onBeforecellfocus"?: (event: RevoGridCustomEvent<BeforeSaveDataDetails>) => void;
/**
Expand All @@ -1398,7 +1398,7 @@ declare namespace LocalJSX {
*/
"onBeforecolumnsset"?: (event: RevoGridCustomEvent<ColumnCollection>) => void;
/**
* This event is triggered before the data is edited. To prevent the default behavior of editing data and use your own implementation, call `e.preventDefault()`. To override the edit result with your own value, set the `e.val` property to your desired value.
* Before the data is edited. To prevent the default behavior of editing data and use your own implementation, call `e.preventDefault()`. To override the edit result with your own value, set the `e.val` property to your desired value.
*/
"onBeforeedit"?: (event: RevoGridCustomEvent<BeforeSaveDataDetails>) => void;
/**
Expand All @@ -1421,35 +1421,35 @@ declare namespace LocalJSX {
itemsToFilter: Record<number, boolean>;
}>) => void;
/**
* This event is triggered before the grid focus is lost. To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
* Before the grid focus is lost. To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
*/
"onBeforefocuslost"?: (event: RevoGridCustomEvent<FocusedData | null>) => void;
/**
* Emmited before the grid is rendered.
*/
"onBeforegridrender"?: (event: RevoGridCustomEvent<any>) => void;
/**
* Triggered before range applied. Use e.preventDefault() to prevent range.
* Before autofill is applied. Runs before beforeautofill event. Use e.preventDefault() to prevent range.
*/
"onBeforerange"?: (event: RevoGridCustomEvent<ChangedRange>) => void;
/**
* This event is triggered before applying range data, specifically when a range selection occurs. To customize the data and prevent the default edit data from being set, you can call `e.preventDefault()`.
* Before applying range data, specifically when a range selection occurs. To customize the data and prevent the default edit data from being set, you can call `e.preventDefault()`.
*/
"onBeforerangeedit"?: (event: RevoGridCustomEvent<BeforeRangeSaveDataDetails>) => void;
/**
* Emitted before the row definition is applied. Useful for modifying or preventing the default row definition behavior.
*/
"onBeforerowdefinition"?: (event: RevoGridCustomEvent<{ vals: any; oldVals: any }>) => void;
/**
* Triggered by sorting.plugin.ts Before sorting event. Initial sorting triggered, if this event stops no other event called. Use e.preventDefault() to prevent sorting.
* By sorting.plugin.ts Before sorting event. Initial sorting triggered, if this event stops no other event called. Use e.preventDefault() to prevent sorting.
*/
"onBeforesorting"?: (event: RevoGridCustomEvent<{
column: ColumnRegular;
order: 'desc' | 'asc';
additive: boolean;
}>) => void;
/**
* Triggered by sorting.plugin.ts Before sorting apply. Use e.preventDefault() to prevent sorting data change.
* By sorting.plugin.ts Before sorting apply. Use e.preventDefault() to prevent sorting data change.
*/
"onBeforesortingapply"?: (event: RevoGridCustomEvent<{
column: ColumnRegular;
Expand Down Expand Up @@ -1495,7 +1495,7 @@ declare namespace LocalJSX {
*/
"onRowheaderschanged"?: (event: RevoGridCustomEvent<any>) => void;
/**
* This event is triggered before the order of `rgRow` is applied. To prevent the default behavior of changing the order of `rgRow`, you can call `e.preventDefault()`.
* Before the order of `rgRow` is applied. To prevent the default behavior of changing the order of `rgRow`, you can call `e.preventDefault()`.
*/
"onRoworderchanged"?: (event: RevoGridCustomEvent<{ from: number; to: number }>) => void;
/**
Expand Down Expand Up @@ -2053,7 +2053,7 @@ declare namespace LocalJSX {
*/
"onBeforesettemprange"?: (event: RevogrOverlaySelectionCustomEvent<{ tempRange: Nullable<TempRange> | null } & EventData & AllDimensionType>) => void;
/**
* Used for editors support when editor close requested.
* Cancel edit. Used for editors support when editor close requested.
*/
"onCanceledit"?: (event: RevogrOverlaySelectionCustomEvent<any>) => void;
/**
Expand All @@ -2071,25 +2071,25 @@ declare namespace LocalJSX {
/**
* Cell get focused. To prevent the default behavior of applying the edit data, you can call `e.preventDefault()`.
*/
"onFocuscell"?: (event: RevogrOverlaySelectionCustomEvent<ApplyFocusEvent>) => void;
"onFocuscell"?: (event: RevogrOverlaySelectionCustomEvent<ApplyFocusEvent & FocusRenderEvent>) => void;
/**
* Range data apply. Triggers datasource edit on the root level.
*/
"onRangeeditapply"?: (event: RevogrOverlaySelectionCustomEvent<BeforeRangeSaveDataDetails>) => void;
/**
* Select all.
* Select all cells from keyboard.
*/
"onSelectall"?: (event: RevogrOverlaySelectionCustomEvent<any>) => void;
/**
* Selection range changed.
* Autofill data in range. First step in applyRangeWithData
*/
"onSelectionchangeinit"?: (event: RevogrOverlaySelectionCustomEvent<ChangedRange>) => void;
/**
* Set edit cell.
*/
"onSetedit"?: (event: RevogrOverlaySelectionCustomEvent<BeforeEdit>) => void;
/**
* Set range.
* Set range. Third step in triggerRangeEvent.
*/
"onSetrange"?: (event: RevogrOverlaySelectionCustomEvent<RangeArea & { type: MultiDimensionType }>) => void;
/**
Expand Down
39 changes: 27 additions & 12 deletions src/components/overlay/revogr-overlay-selection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -171,32 +171,36 @@ export class OverlaySelection {
@Event({ eventName: 'setedit' }) setEdit: EventEmitter<BeforeEdit>;

/**
* Before range applied. First step in triggerRangeEvent.
* Before range applied.
* First step in triggerRangeEvent.
*/
@Event({ eventName: 'beforeapplyrange' })
beforeApplyRange: EventEmitter<FocusRenderEvent>;
/**
* Before range selection applied. Second step in triggerRangeEvent.
* Before range selection applied.
* Second step in triggerRangeEvent.
*/
@Event({ eventName: 'beforesetrange' }) beforeSetRange: EventEmitter;

/**
* Before editor render.
*/
@Event({ eventName: 'beforeeditrender' })
beforeEditRender: EventEmitter<FocusRenderEvent>;

/**
* Set range.
* Third step in triggerRangeEvent.
*/
@Event({ eventName: 'setrange' }) setRange: EventEmitter<
RangeArea & { type: MultiDimensionType }
>;

/** Select all. */
/**
* Before editor render.
*/
@Event({ eventName: 'beforeeditrender' })
beforeEditRender: EventEmitter<FocusRenderEvent>;


/** Select all cells from keyboard. */
@Event({ eventName: 'selectall' }) selectAll: EventEmitter;
/**
* Used for editors support when editor close requested.
* Cancel edit. Used for editors support when editor close requested.
*/
@Event({ eventName: 'canceledit' }) cancelEdit: EventEmitter;

Expand Down Expand Up @@ -225,11 +229,11 @@ export class OverlaySelection {
* Cell get focused.
* To prevent the default behavior of applying the edit data, you can call `e.preventDefault()`.
*/
@Event({ eventName: 'focuscell' }) focusCell: EventEmitter<ApplyFocusEvent>;
@Event({ eventName: 'focuscell' }) focusCell: EventEmitter<ApplyFocusEvent & FocusRenderEvent>;
/** Range data apply. */
@Event({ eventName: 'beforerangedataapply' })
beforeRangeDataApply: EventEmitter<FocusRenderEvent>;
/** Selection range changed. */
/** Autofill data in range. First step in applyRangeWithData */
@Event({ eventName: 'selectionchangeinit', cancelable: true })
selectionChange: EventEmitter<ChangedRange>;
/** Before range copy. */
Expand Down Expand Up @@ -622,6 +626,7 @@ export class OverlaySelection {
* Executes the focus operation on the specified range of cells.
*/
private doFocus(focus: Cell, end: Cell, changes?: Partial<Cell>) {
// 1. Trigger beforeFocus event
const { defaultPrevented } = this.beforeFocusCell.emit(
this.columnService.getSaveData(focus.y, focus.x),
);
Expand All @@ -639,11 +644,15 @@ export class OverlaySelection {
rowDimension: { ...this.dimensionRow.state },
colDimension: { ...this.dimensionCol.state },
};

// 2. Trigger apply focus event
const applyEvent = this.applyFocus.emit(evData);
if (applyEvent.defaultPrevented) {
return false;
}
const { range } = applyEvent.detail;

// 3. Trigger focus event
return !this.focusCell.emit({
focus: {
x: range.x,
Expand All @@ -659,6 +668,7 @@ export class OverlaySelection {

private triggerRangeEvent(range: RangeArea) {
const type = this.types.rowType;
// 1. Apply range
const applyEvent = this.beforeApplyRange.emit({
range: { ...range },
...this.types,
Expand All @@ -672,7 +682,12 @@ export class OverlaySelection {
applyEvent.detail.range,
this.dataStore,
);
// 2. Before set range
let e = this.beforeSetRange.emit(data);
if (e.defaultPrevented) {
return false;
}
// 3. Set range
e = this.setRange.emit({ ...applyEvent.detail.range, type });
if (e.defaultPrevented) {
return false;
Expand Down
22 changes: 11 additions & 11 deletions src/components/revoGrid/revo-grid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -308,50 +308,50 @@ export class RevoGridComponent {
@Event() contentsizechanged: EventEmitter<MultiDimensionType>;

/**
* This event is triggered before the data is edited.
* Before the data is edited.
* To prevent the default behavior of editing data and use your own implementation, call `e.preventDefault()`.
* To override the edit result with your own value, set the `e.val` property to your desired value.
*/
@Event() beforeedit: EventEmitter<BeforeSaveDataDetails>;

/**
* This event is triggered before applying range data, specifically when a range selection occurs.
* Before applying range data, specifically when a range selection occurs.
* To customize the data and prevent the default edit data from being set, you can call `e.preventDefault()`.
*/
@Event() beforerangeedit: EventEmitter<BeforeRangeSaveDataDetails>;

/**
* Triggered after data applied or range changed.
* After data applied or range changed.
*/
@Event() afteredit: EventEmitter<AfterEditEvent>;

/**
* This event is triggered before autofill is applied.
* Before autofill is applied.
* To prevent the default behavior of applying the edit data, you can call `e.preventDefault()`.
*/
@Event() beforeautofill: EventEmitter<ChangedRange>;

/**
* Triggered before range applied.
* Before autofill is applied. Runs before beforeautofill event.
* Use e.preventDefault() to prevent range.
*/
@Event() beforerange: EventEmitter<ChangedRange>;

/**
* Triggered after focus render finished.
* After focus render finished.
* Can be used to access a focus element through `event.target`.
* This is just a duplicate of `afterfocus` from `revogr-focus.tsx`.
*/
@Event() afterfocus: EventEmitter<FocusAfterRenderEvent>;

/**
* This event is triggered before the order of `rgRow` is applied.
* Before the order of `rgRow` is applied.
* To prevent the default behavior of changing the order of `rgRow`, you can call `e.preventDefault()`.
*/
@Event() roworderchanged: EventEmitter<{ from: number; to: number }>;

/**
* Triggered by sorting.plugin.ts
* By sorting.plugin.ts
* Before sorting apply.
* Use e.preventDefault() to prevent sorting data change.
*/
Expand All @@ -362,7 +362,7 @@ export class RevoGridComponent {
}>;

/**
* Triggered by sorting.plugin.ts
* By sorting.plugin.ts
* Before sorting event.
* Initial sorting triggered, if this event stops no other event called.
* Use e.preventDefault() to prevent sorting.
Expand All @@ -389,13 +389,13 @@ export class RevoGridComponent {
@Event() headerclick: EventEmitter<ColumnRegular>;

/**
* This event is triggered before the cell focus is changed.
* Before the cell focus is changed.
* To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
*/
@Event() beforecellfocus: EventEmitter<BeforeSaveDataDetails>;

/**
* This event is triggered before the grid focus is lost.
* Before the grid focus is lost.
* To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
*/
@Event() beforefocuslost: EventEmitter<FocusedData | null>;
Expand Down
4 changes: 2 additions & 2 deletions src/types/events.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@ export type RevogridEvents = 'contentsizechanged'|
'setedit'|
'beforeapplyrange'|
'beforesetrange'|
'beforeeditrender'|
'setrange'|
'beforeeditrender'|
'selectall'|
'canceledit'|
'settemprange'|
Expand Down Expand Up @@ -181,8 +181,8 @@ export const REVOGRID_EVENTS = new Map<RevogridEvents, RevogridEvents>([
['setedit', 'setedit'],
['beforeapplyrange', 'beforeapplyrange'],
['beforesetrange', 'beforesetrange'],
['beforeeditrender', 'beforeeditrender'],
['setrange', 'setrange'],
['beforeeditrender', 'beforeeditrender'],
['selectall', 'selectall'],
['canceledit', 'canceledit'],
['settemprange', 'settemprange'],
Expand Down