Skip to content

Commit

Permalink
feat: switch toggle label (#19324)
Browse files Browse the repository at this point in the history 
* feat: switch toggle label

* snapshots
  • Loading branch information
@pauldambra
pauldambra authored Dec 14, 2023
1 parent f0aa25c commit 6255c7f
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 43 deletions.
52 changes: 26 additions & 26 deletions ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -802,12 +802,12 @@ exports[`replay/transform transform inputs input - checkbox - $value 1`] = `
"type": 2,
},
{
"id": 134,
"id": 133,
"textContent": "first",
"type": 3,
},
],
"id": 133,
"id": 134,
"tagName": "label",
"type": 2,
},
Expand Down Expand Up @@ -888,12 +888,12 @@ exports[`replay/transform transform inputs input - checkbox - $value 2`] = `
"type": 2,
},
{
"id": 137,
"id": 136,
"textContent": "second",
"type": 3,
},
],
"id": 136,
"id": 137,
"tagName": "label",
"type": 2,
},
Expand Down Expand Up @@ -976,12 +976,12 @@ exports[`replay/transform transform inputs input - checkbox - $value 3`] = `
"type": 2,
},
{
"id": 140,
"id": 139,
"textContent": "third",
"type": 3,
},
],
"id": 139,
"id": 140,
"tagName": "label",
"type": 2,
},
Expand Down Expand Up @@ -2188,6 +2188,11 @@ exports[`replay/transform transform inputs input - toggle - $value 1`] = `
"style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
},
"childNodes": [
{
"id": 146,
"textContent": "first",
"type": 3,
},
{
"attributes": {
"style": "height:100%;flex:1",
Expand Down Expand Up @@ -2228,13 +2233,8 @@ exports[`replay/transform transform inputs input - toggle - $value 1`] = `
"tagName": "div",
"type": 2,
},
{
"id": 147,
"textContent": "first",
"type": 3,
},
],
"id": 146,
"id": 147,
"tagName": "label",
"type": 2,
},
Expand Down Expand Up @@ -2304,6 +2304,11 @@ exports[`replay/transform transform inputs input - toggle - $value 2`] = `
"style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
},
"childNodes": [
{
"id": 152,
"textContent": "second",
"type": 3,
},
{
"attributes": {
"style": "height:100%;flex:1",
Expand Down Expand Up @@ -2344,13 +2349,8 @@ exports[`replay/transform transform inputs input - toggle - $value 2`] = `
"tagName": "div",
"type": 2,
},
{
"id": 153,
"textContent": "second",
"type": 3,
},
],
"id": 152,
"id": 153,
"tagName": "label",
"type": 2,
},
Expand Down Expand Up @@ -2420,6 +2420,11 @@ exports[`replay/transform transform inputs input - toggle - $value 3`] = `
"style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
},
"childNodes": [
{
"id": 158,
"textContent": "third",
"type": 3,
},
{
"attributes": {
"style": "height:100%;flex:1",
Expand Down Expand Up @@ -2460,13 +2465,8 @@ exports[`replay/transform transform inputs input - toggle - $value 3`] = `
"tagName": "div",
"type": 2,
},
{
"id": 159,
"textContent": "third",
"type": 3,
},
],
"id": 158,
"id": 159,
"tagName": "label",
"type": 2,
},
Expand Down Expand Up @@ -3208,12 +3208,12 @@ exports[`replay/transform transform inputs wrapping with labels 1`] = `
"type": 2,
},
{
"id": 117,
"id": 116,
"textContent": "i will wrap the checkbox",
"type": 3,
},
],
"id": 116,
"id": 117,
"tagName": "label",
"type": 2,
},
Expand Down
45 changes: 28 additions & 17 deletions ee/frontend/mobile-replay/transformers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,13 @@ import {
textNode,
wireframe,
wireframeButton,
wireframeCheckBox,
wireframeDiv,
wireframeImage,
wireframeInputComponent,
wireframePlaceholder,
wireframeProgress,
wireframeRadio,
wireframeRadioGroup,
wireframeRectangle,
wireframeSelect,
Expand Down Expand Up @@ -527,6 +529,29 @@ function makeToggleElement(wireframe: wireframeToggle): (elementNode & { id: num
}
}

function makeLabelledInput(
wireframe: wireframeCheckBox | wireframeRadio | wireframeToggle,
theInputElement: serializedNodeWithId
): serializedNodeWithId {
const theLabel: serializedNodeWithId = {
type: NodeType.Text,
textContent: wireframe.label || '',
id: idSequence.next().value,
}

const orderedChildren = wireframe.inputType === 'toggle' ? [theLabel, theInputElement] : [theInputElement, theLabel]

return {
type: NodeType.Element,
tagName: 'label',
attributes: {
style: makeStylesString(wireframe),
},
id: idSequence.next().value,
childNodes: orderedChildren,
}
}

function makeInputElement(
wireframe: wireframeInputComponent,
children: serializedNodeWithId[]
Expand All @@ -547,7 +572,7 @@ function makeInputElement(
return makeProgressElement(wireframe, children)
}

const theInputElement: (elementNode & { id: number }) | null =
const theInputElement: serializedNodeWithId | null =
wireframe.inputType === 'toggle'
? makeToggleElement(wireframe)
: {
Expand All @@ -557,27 +582,13 @@ function makeInputElement(
id: wireframe.id,
childNodes: children,
}

if (!theInputElement) {
return null
}

if ('label' in wireframe) {
return {
type: NodeType.Element,
tagName: 'label',
attributes: {
style: makeStylesString(wireframe),
},
id: idSequence.next().value,
childNodes: [
theInputElement,
{
type: NodeType.Text,
textContent: wireframe.label || '',
id: idSequence.next().value,
},
],
}
return makeLabelledInput(wireframe, theInputElement)
} else {
return {
...theInputElement,
Expand Down

0 comments on commit 6255c7f

Please sign in to comment.