Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add delay for range and form controls user event record

Browse Source 
MAILPOET-6365
This commit is contained in:
Oluwaseun Olorunsola
2025-01-09 14:16:17 +01:00
committed by Oluwaseun Olorunsola
parent 2e207efce1
commit 711f410f53
4 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/js/email-editor/src/components/styles-sidebar/panels/dimensions-panel.tsx
View File

@@ -12,7 +12,7 @@ import {
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash';
import { useEmailStyles } from '../../../hooks'; import { useEmailStyles } from '../../../hooks';
import { recordEvent } from '../../../events'; import { recordEvent, debouncedRecordEvent } from '../../../events';
export function DimensionsPanel() { export function DimensionsPanel() {
const [ availableUnits ] = useSettings( 'spacing.units' ) as [ string[] ]; const [ availableUnits ] = useSettings( 'spacing.units' ) as [ string[] ];
@@ -56,7 +56,7 @@ export function DimensionsPanel() {
values={ styles.spacing.padding } values={ styles.spacing.padding }
onChange={ ( value ) => { onChange={ ( value ) => {
updateStyleProp( [ 'spacing', 'padding' ], value ); updateStyleProp( [ 'spacing', 'padding' ], value );
recordEvent( debouncedRecordEvent(
'styles_sidebar_screen_layout_dimensions_padding_updated', 'styles_sidebar_screen_layout_dimensions_padding_updated',
{ value } { value }
); );
@@ -95,7 +95,7 @@ export function DimensionsPanel() {
min={ 0 } min={ 0 }
onChange={ ( value ) => { onChange={ ( value ) => {
updateStyleProp( [ 'spacing', 'blockGap' ], value.top ); updateStyleProp( [ 'spacing', 'blockGap' ], value.top );
recordEvent( debouncedRecordEvent(
'styles_sidebar_screen_layout_dimensions_block_spacing_updated', 'styles_sidebar_screen_layout_dimensions_block_spacing_updated',
{ value } { value }
); );

16
packages/js/email-editor/src/components/styles-sidebar/panels/typography-element-panel.tsx
View File

@@ -24,7 +24,7 @@ import {
} from '@wordpress/components'; } from '@wordpress/components';
import { useEmailStyles } from '../../../hooks'; import { useEmailStyles } from '../../../hooks';
import { getElementStyles } from '../utils'; import { getElementStyles } from '../utils';
import { recordEvent } from '../../../events'; import { recordEvent, debouncedRecordEvent } from '../../../events';
export const DEFAULT_CONTROLS = { export const DEFAULT_CONTROLS = {
fontFamily: true, fontFamily: true,
@@ -112,7 +112,7 @@ export function TypographyElementPanel( {
const setLetterSpacing = ( newValue ) => { const setLetterSpacing = ( newValue ) => {
updateElementStyleProp( [ 'typography', 'letterSpacing' ], newValue ); updateElementStyleProp( [ 'typography', 'letterSpacing' ], newValue );
recordEvent( debouncedRecordEvent(
'styles_sidebar_screen_typography_element_panel_set_letter_spacing', 'styles_sidebar_screen_typography_element_panel_set_letter_spacing',
{ {
element, element,
@@ -124,7 +124,7 @@ export function TypographyElementPanel( {
const setLineHeight = ( newValue ) => { const setLineHeight = ( newValue ) => {
updateElementStyleProp( [ 'typography', 'lineHeight' ], newValue ); updateElementStyleProp( [ 'typography', 'lineHeight' ], newValue );
recordEvent( debouncedRecordEvent(
'styles_sidebar_screen_typography_element_panel_set_line_height', 'styles_sidebar_screen_typography_element_panel_set_line_height',
{ {
element, element,
@@ -136,7 +136,7 @@ export function TypographyElementPanel( {
const setFontSize = ( newValue ) => { const setFontSize = ( newValue ) => {
updateElementStyleProp( [ 'typography', 'fontSize' ], newValue ); updateElementStyleProp( [ 'typography', 'fontSize' ], newValue );
recordEvent( debouncedRecordEvent(
'styles_sidebar_screen_typography_element_panel_set_font_size', 'styles_sidebar_screen_typography_element_panel_set_font_size',
{ {
element, element,
@@ -149,7 +149,7 @@ export function TypographyElementPanel( {
const setFontFamily = ( newValue ) => { const setFontFamily = ( newValue ) => {
updateElementStyleProp( [ 'typography', 'fontFamily' ], newValue ); updateElementStyleProp( [ 'typography', 'fontFamily' ], newValue );
recordEvent( debouncedRecordEvent(
'styles_sidebar_screen_typography_element_panel_set_font_family', 'styles_sidebar_screen_typography_element_panel_set_font_family',
{ {
element, element,
@@ -161,7 +161,7 @@ export function TypographyElementPanel( {
const setTextDecoration = ( newValue ) => { const setTextDecoration = ( newValue ) => {
updateElementStyleProp( [ 'typography', 'textDecoration' ], newValue ); updateElementStyleProp( [ 'typography', 'textDecoration' ], newValue );
recordEvent( debouncedRecordEvent(
'styles_sidebar_screen_typography_element_panel_set_text_decoration', 'styles_sidebar_screen_typography_element_panel_set_text_decoration',
{ {
element, element,
@@ -174,7 +174,7 @@ export function TypographyElementPanel( {
const setTextTransform = ( newValue ) => { const setTextTransform = ( newValue ) => {
updateElementStyleProp( [ 'typography', 'textTransform' ], newValue ); updateElementStyleProp( [ 'typography', 'textTransform' ], newValue );
recordEvent( debouncedRecordEvent(
'styles_sidebar_screen_typography_element_panel_set_text_transform', 'styles_sidebar_screen_typography_element_panel_set_text_transform',
{ {
element, element,
@@ -190,7 +190,7 @@ export function TypographyElementPanel( {
} ) => { } ) => {
updateElementStyleProp( [ 'typography', 'fontStyle' ], newFontStyle ); updateElementStyleProp( [ 'typography', 'fontStyle' ], newFontStyle );
updateElementStyleProp( [ 'typography', 'fontWeight' ], newFontWeight ); updateElementStyleProp( [ 'typography', 'fontWeight' ], newFontWeight );
recordEvent( debouncedRecordEvent(
'styles_sidebar_screen_typography_element_panel_set_font_appearance', 'styles_sidebar_screen_typography_element_panel_set_font_appearance',
{ {
element, element,

4
packages/js/email-editor/src/events/event-pipeline.ts
View File

@@ -1,3 +1,4 @@
import { debounce } from 'lodash';
import { applyFilters } from '@wordpress/hooks'; import { applyFilters } from '@wordpress/hooks';
const isEventTrackingEnabled = applyFilters( const isEventTrackingEnabled = applyFilters(
@@ -52,9 +53,12 @@ const recordEventOnce = ( function () {
}; };
} )(); } )();
const debouncedRecordEvent = debounce( recordEvent, 700 ); // wait 700 milliseconds. The average human reaction speed time is around 250 ms, added some delay for mouse move and keyboard press
export { export {
recordEvent, recordEvent,
recordEventOnce, recordEventOnce,
debouncedRecordEvent,
EMAIL_STRING, EMAIL_STRING,
dispatcher, dispatcher,
isEventTrackingEnabled, isEventTrackingEnabled,

6
packages/js/email-editor/src/events/index.ts
View File

@@ -1,2 +1,6 @@
export { recordEvent, recordEventOnce } from './event-pipeline'; export {
recordEvent,
recordEventOnce,
debouncedRecordEvent,
} from './event-pipeline';
export * from './event-collector'; export * from './event-collector';