Skip to content

Commit

Permalink
fix: convert events to concrete event classes
Browse files Browse the repository at this point in the history
  • Loading branch information
@hossein-nas
hossein-nas committed Oct 14, 2024
1 parent fe44902 commit a41d080
Show file tree
Hide file tree
Showing 12 changed files with 327 additions and 117 deletions.
5 changes: 5 additions & 0 deletions src/pin-input-cell/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export const PIN_INPUT_CELL_FILLED_TYPE = 'cell-filled';
export const PIN_INPUT_CELL_CLEARED_TYPE = 'cell-cleared';
export const PIN_INPUT_CELL_CLEARED_ALL_TYPE = 'cell-cleared-all-with-meta-key';
export const PIN_INPUT_CELL_ARROW_KEY_PRESSED_TYPE = 'arrow-key-pressed';
export const PIN_INPUT_CELL_OVERFLOW_VALUE_TYPE = 'overflow-value';
122 changes: 122 additions & 0 deletions src/pin-input-cell/events.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
import {
PIN_INPUT_CELL_ARROW_KEY_PRESSED_TYPE,
PIN_INPUT_CELL_CLEARED_ALL_TYPE,
PIN_INPUT_CELL_CLEARED_TYPE,
PIN_INPUT_CELL_FILLED_TYPE,
PIN_INPUT_CELL_OVERFLOW_VALUE_TYPE,
} from './constants';
import { ValueChangedEventParams } from './types';

export class PinInputCellFilled extends Event {
public message: string;
public details: ValueChangedEventParams;

constructor(
message: string,
details: ValueChangedEventParams,
eventInitDict: EventInit = {},
) {
const _eventInitDict = {
bubbles: true,
composed: false,
...eventInitDict,
};
const type = PIN_INPUT_CELL_FILLED_TYPE;
super(type, _eventInitDict);

this.details = details;
this.message = message;
}
}

export class PinInputCellCleared extends Event {
public message: string;
public details: ValueChangedEventParams;

constructor(
message: string,
details: ValueChangedEventParams,
eventInitDict: EventInit = {},
) {
const _eventInitDict = {
bubbles: true,
composed: false,
...eventInitDict,
};

const type = PIN_INPUT_CELL_CLEARED_TYPE;
super(type, _eventInitDict);

this.details = details;
this.message = message;
}
}

export class PinInputCellClearedAll extends Event {
public message: string;
public details: ValueChangedEventParams;

constructor(
message: string,
details: ValueChangedEventParams,
eventInitDict: EventInit = {},
) {
const _eventInitDict = {
bubbles: true,
composed: false,
...eventInitDict,
};

const type = PIN_INPUT_CELL_CLEARED_ALL_TYPE;
super(type, _eventInitDict);

this.details = details;
this.message = message;
}
}

export class PinInputCellArrowKeyPressed<T = 'left' | 'right'> extends Event {
public message: string;
public details: ValueChangedEventParams<T>;

constructor(
message: string,
details: ValueChangedEventParams<T>,
eventInitDict: EventInit = {},
) {
const _eventInitDict = {
bubbles: true,
composed: false,
...eventInitDict,
};

const type = PIN_INPUT_CELL_ARROW_KEY_PRESSED_TYPE;
super(type, _eventInitDict);

this.details = details;
this.message = message;
}
}

export class PinInputCellOverflowValue extends Event {
public message: string;
public details: ValueChangedEventParams;

constructor(
message: string,
details: ValueChangedEventParams,
eventInitDict: EventInit = {},
) {
const _eventInitDict = {
bubbles: true,
composed: false,
...eventInitDict,
};

const type = PIN_INPUT_CELL_OVERFLOW_VALUE_TYPE;
super(type, _eventInitDict);

this.details = details;
this.message = message;
}
}
2 changes: 2 additions & 0 deletions src/pin-input-cell/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { customElement } from 'lit/decorators.js';
import { PinInputCell } from './pin-input-cell.js';
import styles from './pin-input-cell.style.js';
export * from './events.js';
export * from './constants.js';

@customElement('tap-pin-input-cell')
export class TapPinInputCell extends PinInputCell {
Expand Down
60 changes: 46 additions & 14 deletions src/pin-input-cell/pin-input-cell.style.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {css} from 'lit';
import { css } from 'lit';

export default css`
:host {
Expand All @@ -7,30 +7,61 @@ export default css`
--tap-pin-input-cell-max-cell-width-ratio: 1.25;
--tap-pin-input-cell-font-family: var(--tap-sys-font-family);
--tap-pin-input-cell-font-size-small: var(--tap-sys-typography-headline-xs-size, 16px);
--tap-pin-input-cell-font-size-medium: var(--tap-sys-typography-headline-sm-size, 20px);
--tap-pin-input-cell-font-size-large: var(--tap-sys-typography-headline-md-size, 24px);
--tap-pin-input-cell-font-size-small: var(
--tap-sys-typography-headline-xs-size,
16px
);
--tap-pin-input-cell-font-size-medium: var(
--tap-sys-typography-headline-sm-size,
20px
);
--tap-pin-input-cell-font-size-large: var(
--tap-sys-typography-headline-md-size,
24px
);
--tap-pin-input-cell-font-weight-small: var(--tap-sys-typography-headline-xs-weight, 600);
--tap-pin-input-cell-font-weight-medium: var(--tap-sys-typography-headline-sm-weight, 600);
--tap-pin-input-cell-font-weight-large: var(--tap-sys-typography-headline-md-weight, 600);
--tap-pin-input-cell-font-weight-small: var(
--tap-sys-typography-headline-xs-weight,
600
);
--tap-pin-input-cell-font-weight-medium: var(
--tap-sys-typography-headline-sm-weight,
600
);
--tap-pin-input-cell-font-weight-large: var(
--tap-sys-typography-headline-md-weight,
600
);
--tap-pin-input-cell-line-height-small: var(--tap-sys-typography-headline-xs-height, 26px);
--tap-pin-input-cell-line-height-medium: var(--tap-sys-typography-headline-sm-height, 32px);
--tap-pin-input-cell-line-height-large: var(--tap-sys-typography-headline-md-height, 36px);
--tap-pin-input-cell-line-height-small: var(
--tap-sys-typography-headline-xs-height,
26px
);
--tap-pin-input-cell-line-height-medium: var(
--tap-sys-typography-headline-sm-height,
32px
);
--tap-pin-input-cell-line-height-large: var(
--tap-sys-typography-headline-md-height,
36px
);
--tap-pin-input-cell-padding-small: var(--tap-sys-spacing-3, 6px);
--tap-pin-input-cell-padding-medium: var(--tap-sys-spacing-4, 8px);
--tap-pin-input-cell-padding-large: var(--tap-sys-spacing-5, 12px);
--tap-pin-input-cell-bg-color: var(--tap-palette-gray-100);
--tap-pin-input-cell-error-bg-color: var(--tap-palette-red-50);
--tap-pin-input-cell-disabled-bg-color: var(--tap-sys-color-surface-disabled);
--tap-pin-input-cell-disabled-bg-color: var(
--tap-sys-color-surface-disabled
);
--tap-pin-input-cell-color: var(--tap-palette-black);
--tap-pin-input-cell-disabled-color: var(--tap-sys-color-content-disabled);
--tap-pin-input-cell-border-focus-color: var(--tap-sys-color-border-focus);
--tap-pin-input-cell-border-error-color: var(--tap-sys-color-border-negative);
--tap-pin-input-cell-border-error-color: var(
--tap-sys-color-border-negative
);
--tap-pin-input-cell-border-disabled-color: transparent;
--tap-pin-input-cell-border-radius: var(--tap-sys-radius-3);
--tap-pin-input-cell-border-width: var(--tap-sys-stroke-4);
Expand All @@ -53,7 +84,8 @@ export default css`
margin: 0;
background-color: var(--tap-pin-input-cell-bg-color);
color: var(--tap-pin-input-cell-color);
border: var(--tap-pin-input-cell-border-width) solid var(--tap-pin-input-cell-border-default-color);
border: var(--tap-pin-input-cell-border-width) solid
var(--tap-pin-input-cell-border-default-color);
border-radius: var(--tap-pin-input-cell-border-radius);
outline: none;
min-width: 0;
Expand All @@ -62,7 +94,7 @@ export default css`
min-width: var(--tap-pin-input-cell-height);
max-width: calc(
var(--tap-pin-input-cell-height) *
var(--tap-pin-input-cell-max-cell-width-ratio)
var(--tap-pin-input-cell-max-cell-width-ratio)
);
}
Expand Down
90 changes: 44 additions & 46 deletions src/pin-input-cell/pin-input-cell.ts
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,39 @@
import {html, LitElement, PropertyValues} from 'lit';
import {property, query} from 'lit/decorators.js';
import {classMap} from 'lit/directives/class-map.js';
import { html, LitElement, PropertyValues } from 'lit';
import { property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import {
isArrowKeyPressed,
isDeletionKeyPressed,
isDeletionKeyWithCtrlOrMetaPressed,
isValidDigit,
persianToEnglish,
} from './util';
import {ValueChangedEventParams} from './types';
import {
PinInputCellArrowKeyPressed,
PinInputCellCleared,
PinInputCellClearedAll,
PinInputCellFilled,
PinInputCellOverflowValue,
} from './events';

export class PinInputCell extends LitElement {
@query('.cell') _cell!: HTMLInputElement;

@property({type: Boolean, reflect: true}) disabled: boolean = false;
@property({ type: Boolean, reflect: true }) disabled: boolean = false;

@property({attribute: 'auto-focus', type: Boolean}) autoFocus: boolean =
@property({ attribute: 'auto-focus', type: Boolean }) autoFocus: boolean =
false;

@property({reflect: true, type: Boolean, attribute: 'has-error'}) hasError =
@property({ reflect: true, type: Boolean, attribute: 'has-error' }) hasError =
false;

@property({reflect: true, type: String}) value: string = '';
@property({ reflect: true, type: String }) value: string = '';

@property() label = '';

@property() size: 'small' | 'medium' | 'large' = 'medium';

@property({type: Number}) index: number = null!;
@property({ type: Number }) index: number = null!;

protected updated(changed: PropertyValues) {
if (changed.has('value') && !Number.isNaN(this.value)) {
Expand All @@ -37,7 +43,7 @@ export class PinInputCell extends LitElement {

private async updateInputValue(newValue: string) {
this.value = persianToEnglish(newValue);
this._cell.value = (newValue);
this._cell.value = newValue;

if (newValue.length) {
await this.emitValueChanged();
Expand All @@ -50,71 +56,63 @@ export class PinInputCell extends LitElement {

private async emitValueChanged() {
await this.updateComplete;
const event = new CustomEvent('cell-filled', {
bubbles: true,
composed: false,
detail: {
cell: this,
index: this.index,
value: this.value,
} as ValueChangedEventParams,
const event = new PinInputCellFilled('PinInputCell filled', {
cell: this,
index: this.index,
value: this.value,
});

this.dispatchEvent(event);
}

private async emitValueCleared() {
await this.updateComplete;
const event = new CustomEvent('cell-cleared', {
bubbles: true,
composed: false,
detail: {
cell: this,
index: this.index,
value: this.value,
} as ValueChangedEventParams,
const event = new PinInputCellCleared('PinInputCell cleared', {
cell: this,
index: this.index,
value: this.value,
});

this.dispatchEvent(event);
}

private async emitDeletionWithMetaKeys() {
await this.updateComplete;
const event = new CustomEvent('clear-all', {
bubbles: true,
composed: false,
detail: {
cell: this,
index: this.index,
value: this.value,
} as ValueChangedEventParams,
const event = new PinInputCellClearedAll('PinInputCell cleared all', {
cell: this,
index: this.index,
value: this.value,
});

this.dispatchEvent(event);
}

private async emitArrowKeyPressed(key: 'ArrowLeft' | 'ArrowRight') {
await this.updateComplete;
const event = new CustomEvent('arrow-key-pressed', {
bubbles: true,
composed: false,
detail: {

const event = new PinInputCellArrowKeyPressed<'left' | 'right'>(
'PinInputCell arrow key pressed',
{
cell: this,
index: this.index,
value: key === 'ArrowLeft' ? 'left' : 'right',
} as ValueChangedEventParams<'left' | 'right'>,
});
},
);

this.dispatchEvent(event);
}

private async emitOverflowedValue(value: string) {
await this.updateComplete;
const event = new CustomEvent('overflow-value', {
bubbles: true,
composed: false,
detail: {
const event = new PinInputCellOverflowValue(
'PinInputCell Overflowed value',
{
cell: this,
index: this.index,
value: value,
} as ValueChangedEventParams,
});
},
);

this.dispatchEvent(event);
}

Expand Down
1 change: 1 addition & 0 deletions src/pin-input/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const PIN_INPUT_FILLED_TYPE = 'input-filled';
Loading

0 comments on commit a41d080

Please sign in to comment.