mirror of
https://github.com/rio-labs/rio.git
synced 2026-01-06 05:09:43 -06:00
fix alignment helper elements not being removed correctly
This commit is contained in:
@@ -134,9 +134,10 @@ export abstract class ComponentBase {
|
||||
if (this.outerAlignElement !== null) {
|
||||
replaceElement(
|
||||
this.outerAlignElement,
|
||||
this.outerAlignElement.firstChild!
|
||||
this.innerAlignElement!.firstChild!
|
||||
);
|
||||
this.outerAlignElement = null;
|
||||
this.innerAlignElement = null;
|
||||
}
|
||||
} else {
|
||||
// Create the alignElement if we don't have one already
|
||||
|
||||
@@ -33,8 +33,6 @@ export class GridComponent extends ComponentBase {
|
||||
): void {
|
||||
super.updateElement(deltaState, latentComponents);
|
||||
|
||||
let element = this.element;
|
||||
|
||||
if (deltaState._children !== undefined) {
|
||||
let childPositions =
|
||||
deltaState._child_positions ?? this.state._child_positions;
|
||||
@@ -65,11 +63,11 @@ export class GridComponent extends ComponentBase {
|
||||
}
|
||||
|
||||
if (deltaState.row_spacing !== undefined) {
|
||||
element.style.rowGap = `${deltaState.row_spacing}rem`;
|
||||
this.element.style.rowGap = `${deltaState.row_spacing}rem`;
|
||||
}
|
||||
|
||||
if (deltaState.column_spacing !== undefined) {
|
||||
element.style.columnGap = `${deltaState.column_spacing}rem`;
|
||||
this.element.style.columnGap = `${deltaState.column_spacing}rem`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -707,8 +707,6 @@ export class KeyEventListenerComponent extends ComponentBase {
|
||||
): void {
|
||||
super.updateElement(deltaState, latentComponents);
|
||||
|
||||
let element = this.element;
|
||||
|
||||
let reportKeyDown =
|
||||
deltaState.reportKeyDown ?? this.state.reportKeyDown;
|
||||
let reportKeyUp = deltaState.reportKeyUp ?? this.state.reportKeyUp;
|
||||
@@ -716,7 +714,7 @@ export class KeyEventListenerComponent extends ComponentBase {
|
||||
deltaState.reportKeyPress ?? this.state.reportKeyPress;
|
||||
|
||||
if (reportKeyDown || reportKeyPress) {
|
||||
element.onkeydown = (e: KeyboardEvent) => {
|
||||
this.element.onkeydown = (e: KeyboardEvent) => {
|
||||
let encodedEvent = encodeEvent(e);
|
||||
|
||||
if (reportKeyPress) {
|
||||
@@ -734,18 +732,18 @@ export class KeyEventListenerComponent extends ComponentBase {
|
||||
}
|
||||
};
|
||||
} else {
|
||||
element.onkeydown = null;
|
||||
this.element.onkeydown = null;
|
||||
}
|
||||
|
||||
if (reportKeyUp) {
|
||||
element.onkeyup = (e: KeyboardEvent) => {
|
||||
this.element.onkeyup = (e: KeyboardEvent) => {
|
||||
this.sendMessageToBackend({
|
||||
type: 'KeyUp',
|
||||
...encodeEvent(e),
|
||||
});
|
||||
};
|
||||
} else {
|
||||
element.onkeyup = null;
|
||||
this.element.onkeyup = null;
|
||||
}
|
||||
|
||||
this.replaceOnlyChild(latentComponents, deltaState.content);
|
||||
|
||||
@@ -36,24 +36,22 @@ export class ProgressBarComponent extends ComponentBase {
|
||||
): void {
|
||||
super.updateElement(deltaState, latentComponents);
|
||||
|
||||
// No progress specified
|
||||
if (deltaState.progress === undefined) {
|
||||
}
|
||||
if (deltaState.progress !== undefined) {
|
||||
// Indeterminate progress
|
||||
if (deltaState.progress === null) {
|
||||
this.element.classList.add('rio-progress-bar-indeterminate');
|
||||
}
|
||||
|
||||
// Indeterminate progress
|
||||
else if (deltaState.progress === null) {
|
||||
this.element.classList.add('rio-progress-bar-indeterminate');
|
||||
}
|
||||
// Known progress
|
||||
else {
|
||||
let progress = Math.max(0, Math.min(1, deltaState.progress));
|
||||
|
||||
// Known progress
|
||||
else {
|
||||
let progress = Math.max(0, Math.min(1, deltaState.progress));
|
||||
|
||||
this.element.style.setProperty(
|
||||
'--rio-progress-bar-fraction',
|
||||
`${progress * 100}%`
|
||||
);
|
||||
this.element.classList.remove('rio-progress-bar-indeterminate');
|
||||
this.element.style.setProperty(
|
||||
'--rio-progress-bar-fraction',
|
||||
`${progress * 100}%`
|
||||
);
|
||||
this.element.classList.remove('rio-progress-bar-indeterminate');
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the color
|
||||
|
||||
Reference in New Issue
Block a user