From 9e6b9ef8bf40d5ae9c0de08e645e034dab3ab8dd Mon Sep 17 00:00:00 2001 From: Shayna Hay Date: Mon, 24 Jun 2024 16:38:18 -0400 Subject: [PATCH 1/7] fix(InlineContent): sets height based on maxLines --- .../components/InlineContent/InlineContent.js | 18 +++--- .../src/components/TextBox/TextBox.js | 26 ++++---- .../src/components/TextBox/TextBox.stories.js | 60 +++++++++++++++---- 3 files changed, 74 insertions(+), 30 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js index 0b57cd225..8b8c3bd58 100644 --- a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js +++ b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js @@ -147,30 +147,34 @@ export default class InlineContent extends Base { // perhaps have to wait until Lightning Flexboxes can emit a signal (like textures) when they've finished loading if (this.children.length) { setTimeout(() => { + debugger + this.stage.update() this.multiLineHeight = this.finalH; + if ( this.flex && this.flex._layout && this.flex._layout._lineLayouter && this.flex._layout._lineLayouter._lines ) { + + + // only using this.flex._layout._lineLayouter._lines.length if maxLines is larger than the number of lines so we don't have a height too large + let multiplierLines = this.maxLines > this.flex._layout._lineLayouter._lines.length ? this.flex._layout._lineLayouter._lines.length : this.maxLines; + this.multiLineHeight = - this.style.textStyle.lineHeight * - this.flex._layout._lineLayouter._lines.length; - this.h = this.multiLineHeight; + this.style.textStyle.lineHeight * multiplierLines; if (this._shouldTruncate) { this._renderMaxLines(); } - this._notifyAncestors(); } else { this._contentLoaded(); } }, 10); - } else { - this._notifyAncestors(); - } + } + this._notifyAncestors(); } _renderMaxLines() { diff --git a/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js b/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js index 498deb46a..e12f44077 100644 --- a/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js +++ b/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js @@ -41,10 +41,10 @@ const lightningTextDefaults = Object.entries( }; }, {}); -export default class TextBox extends Base { +export default class TextBox extends InlineContent { static _template() { return { - alpha: 0.001 + alpha: 0.001, }; } @@ -72,6 +72,7 @@ export default class TextBox extends Base { } _setDimensions(w, h) { + debugger let width = w; let height = h; if (!this._isInlineContent) { @@ -144,7 +145,9 @@ export default class TextBox extends Base { } _updateInlineContent() { - this.patch({ Text: undefined }); + this.patch({ Text: undefined}); + + const contentStyle = this._textStyleSet; const inlineContentPatch = InlineContent.properties.reduce( (acc, prop) => { @@ -157,27 +160,28 @@ export default class TextBox extends Base { { style: { ...this.style, - textStyle: this._textStyleSet + textStyle: contentStyle } } ); - if (this._textStyleSet.wordWrapWidth) { - inlineContentPatch.w = this._textStyleSet.wordWrapWidth; + inlineContentPatch.w = this.w; + + if (contentStyle.wordWrapWidth) { + inlineContentPatch.w = contentStyle.wordWrapWidth; inlineContentPatch.rtt = true; } - if (this._textStyleSet.maxLines) { - inlineContentPatch.maxLines = this._textStyleSet.maxLines; + if (contentStyle.maxLines) { + inlineContentPatch.maxLines = contentStyle.maxLines; } - if (this._textStyleSet.maxLinesSuffix) { - inlineContentPatch.maxLinesSuffix = this._textStyleSet.maxLinesSuffix; + if (contentStyle.maxLinesSuffix) { + inlineContentPatch.maxLinesSuffix = contentStyle.maxLinesSuffix; } this.patch({ alpha: 1, InlineContent: { type: InlineContent, - w: this.w, ...inlineContentPatch, signals: { loadedInlineContent: '_setDimensions' diff --git a/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.stories.js b/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.stories.js index 9706a6b6a..980c9a7b2 100644 --- a/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.stories.js +++ b/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.stories.js @@ -32,7 +32,7 @@ const { args: inlineContentArgs, argTypes: inlineContentArgTypes } = const lorum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est eu eleifend interdum. Vivamus egestas maximus elementum. Sed condimentum ligula justo, non sollicitudin lectus rutrum vel. Integer iaculis vitae nisl quis tincidunt. Sed quis dui vehicula, vehicula felis a, tempor leo. Fusce tincidunt, ante eget pretium efficitur, libero elit volutpat quam, sit amet porta tortor odio non ligula. Ut sed dolor eleifend massa auctor porttitor eget ut lectus. Vivamus elementum lorem mauris, eu luctus tortor posuere sit amet. Nunc a interdum metus.'; -export const Basic = () => +export const Basic = (args ) => class Basic extends lng.Component { static _template() { return { @@ -40,7 +40,7 @@ export const Basic = () => type: TextBox, fixed: true, w: 600, - style: { textStyle: { maxLines: 3 } } + style: { textStyle: { maxLines: args.maxLines, contentWrap: args.contentWrap} } } }; } @@ -51,7 +51,9 @@ Basic.args = { marquee: false, fixed: true, hideOnLoad: false, - w: 600 + w: 600, + maxLines: 3, + contentWrap: false }; Basic.argTypes = { @@ -94,10 +96,27 @@ Basic.argTypes = { table: { defaultValue: { summary: 0 } } - } + }, + maxLines: { + control: 'number', + description: 'maximum number of lines to render before truncation', + type: 'number', + table: { + defaultValue: { summary: 'undefined' } + } + }, + contentWrap: { + control: 'boolean', + description: + 'Determines whether the containing flexbox should wrap the content onto the next line', + type: 'boolean', + table: { + defaultValue: { summary: false } + } + }, }; -export const WithInlineContentArray = () => +export const WithInlineContentArray = (args) => class WithInlineContentArray extends lng.Component { static _template() { return { @@ -125,7 +144,14 @@ export const WithInlineContentArray = () => 'for fun', { badge: 'HD', title: 'HD' }, { badge: 'SD', title: 'SD' } - ] + ], + style: { + textStyle: { + maxLines: args.maxLines, + maxLinesSuffix: args.maxLinesSuffix, + contentWrap: args.contentWrap, + } + }, } }; } @@ -134,7 +160,7 @@ export const WithInlineContentArray = () => WithInlineContentArray.args = inlineContentArgs; WithInlineContentArray.argTypes = inlineContentArgTypes; -export const WithInlineContentString = () => +export const WithInlineContentString = (args) => class WithInlineContentArray extends lng.Component { static _template() { return { @@ -149,7 +175,14 @@ export const WithInlineContentString = () => fontStyle: 'italic', textColor: getHexColor('FF6194') } - } + }, + style: { + textStyle: { + maxLines: args.maxLines, + maxLinesSuffix: args.maxLinesSuffix, + contentWrap: args.contentWrap, + } + }, } }; } @@ -158,7 +191,7 @@ export const WithInlineContentString = () => WithInlineContentString.args = inlineContentArgs; WithInlineContentString.argTypes = inlineContentArgTypes; -export const WithInlineContentTruncation = () => +export const WithInlineContentTruncation = (args) => class Basic extends lng.Component { static _template() { return { @@ -167,8 +200,9 @@ export const WithInlineContentTruncation = () => w: 500, style: { textStyle: { - maxLines: 2, - maxLinesSuffix: '...' + maxLines: args.maxLines, + maxLinesSuffix: args.maxLinesSuffix, + contentWrap: args.contentWrap } }, content: [ @@ -193,8 +227,10 @@ export const WithInlineContentTruncation = () => { badge: 'SD', title: 'SD' }, ', and this should truncate before going on to a third line.' ], - contentWrap: true } }; } }; + + WithInlineContentTruncation.args = inlineContentArgs; + WithInlineContentTruncation.argTypes = inlineContentArgTypes; From 9473ad651a5c729f438f35e14c28e4786e072cec Mon Sep 17 00:00:00 2001 From: Shayna Hay Date: Tue, 25 Jun 2024 09:00:44 -0400 Subject: [PATCH 2/7] fix(InlineContent): only notifies ancestors in certain content loading situations --- .../src/components/InlineContent/InlineContent.js | 8 ++++---- .../ui-components/src/components/TextBox/TextBox.js | 8 +++----- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js index 8b8c3bd58..fc164996e 100644 --- a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js +++ b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js @@ -147,8 +147,6 @@ export default class InlineContent extends Base { // perhaps have to wait until Lightning Flexboxes can emit a signal (like textures) when they've finished loading if (this.children.length) { setTimeout(() => { - debugger - this.stage.update() this.multiLineHeight = this.finalH; if ( @@ -168,13 +166,15 @@ export default class InlineContent extends Base { if (this._shouldTruncate) { this._renderMaxLines(); } + this._notifyAncestors(); } else { this._contentLoaded(); } - }, 10); + }, 10); + } else { + this._notifyAncestors(); } - this._notifyAncestors(); } _renderMaxLines() { diff --git a/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js b/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js index e12f44077..543cef46b 100644 --- a/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js +++ b/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js @@ -41,7 +41,7 @@ const lightningTextDefaults = Object.entries( }; }, {}); -export default class TextBox extends InlineContent { +export default class TextBox extends Base { static _template() { return { alpha: 0.001, @@ -72,7 +72,6 @@ export default class TextBox extends InlineContent { } _setDimensions(w, h) { - debugger let width = w; let height = h; if (!this._isInlineContent) { @@ -145,7 +144,7 @@ export default class TextBox extends InlineContent { } _updateInlineContent() { - this.patch({ Text: undefined}); + this.patch({ Text: undefined }); const contentStyle = this._textStyleSet; @@ -165,8 +164,6 @@ export default class TextBox extends InlineContent { } ); - inlineContentPatch.w = this.w; - if (contentStyle.wordWrapWidth) { inlineContentPatch.w = contentStyle.wordWrapWidth; inlineContentPatch.rtt = true; @@ -182,6 +179,7 @@ export default class TextBox extends InlineContent { alpha: 1, InlineContent: { type: InlineContent, + w: this.w, ...inlineContentPatch, signals: { loadedInlineContent: '_setDimensions' From 8c1080634591c599990a0dc80b3639ad7bc7338a Mon Sep 17 00:00:00 2001 From: Shayna Hay Date: Tue, 25 Jun 2024 09:01:39 -0400 Subject: [PATCH 3/7] fix(InlineContent): prettier --- .../src/components/InlineContent/InlineContent.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js index fc164996e..80b09a0e9 100644 --- a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js +++ b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js @@ -155,10 +155,11 @@ export default class InlineContent extends Base { this.flex._layout._lineLayouter && this.flex._layout._lineLayouter._lines ) { - - // only using this.flex._layout._lineLayouter._lines.length if maxLines is larger than the number of lines so we don't have a height too large - let multiplierLines = this.maxLines > this.flex._layout._lineLayouter._lines.length ? this.flex._layout._lineLayouter._lines.length : this.maxLines; + let multiplierLines = + this.maxLines > this.flex._layout._lineLayouter._lines.length + ? this.flex._layout._lineLayouter._lines.length + : this.maxLines; this.multiLineHeight = this.style.textStyle.lineHeight * multiplierLines; @@ -167,14 +168,13 @@ export default class InlineContent extends Base { this._renderMaxLines(); } this._notifyAncestors(); - } else { this._contentLoaded(); } - }, 10); + }, 10); } else { - this._notifyAncestors(); - } + this._notifyAncestors(); + } } _renderMaxLines() { From 3851a383ec7aba04ebc7cf3c5ed045a4a44fef3d Mon Sep 17 00:00:00 2001 From: Shayna Hay Date: Tue, 25 Jun 2024 09:02:38 -0400 Subject: [PATCH 4/7] fix(Textbox): cleansup template comma --- .../ui-components/src/components/TextBox/TextBox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js b/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js index 543cef46b..ad8cc2814 100644 --- a/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js +++ b/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js @@ -44,7 +44,7 @@ const lightningTextDefaults = Object.entries( export default class TextBox extends Base { static _template() { return { - alpha: 0.001, + alpha: 0.001 }; } From 2b53d5f6d1a7978fad8b54203a6c80330614cfbe Mon Sep 17 00:00:00 2001 From: Shayna Hay Date: Tue, 25 Jun 2024 09:35:48 -0400 Subject: [PATCH 5/7] fix(Textbox): lint fixes --- .../components/InlineContent/InlineContent.js | 2 +- .../src/components/TextBox/TextBox.stories.js | 33 +++++++++++-------- 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js index 80b09a0e9..579e917f0 100644 --- a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js +++ b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js @@ -156,7 +156,7 @@ export default class InlineContent extends Base { this.flex._layout._lineLayouter._lines ) { // only using this.flex._layout._lineLayouter._lines.length if maxLines is larger than the number of lines so we don't have a height too large - let multiplierLines = + const multiplierLines = this.maxLines > this.flex._layout._lineLayouter._lines.length ? this.flex._layout._lineLayouter._lines.length : this.maxLines; diff --git a/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.stories.js b/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.stories.js index 980c9a7b2..9d8515854 100644 --- a/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.stories.js +++ b/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.stories.js @@ -32,7 +32,7 @@ const { args: inlineContentArgs, argTypes: inlineContentArgTypes } = const lorum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est eu eleifend interdum. Vivamus egestas maximus elementum. Sed condimentum ligula justo, non sollicitudin lectus rutrum vel. Integer iaculis vitae nisl quis tincidunt. Sed quis dui vehicula, vehicula felis a, tempor leo. Fusce tincidunt, ante eget pretium efficitur, libero elit volutpat quam, sit amet porta tortor odio non ligula. Ut sed dolor eleifend massa auctor porttitor eget ut lectus. Vivamus elementum lorem mauris, eu luctus tortor posuere sit amet. Nunc a interdum metus.'; -export const Basic = (args ) => +export const Basic = args => class Basic extends lng.Component { static _template() { return { @@ -40,7 +40,12 @@ export const Basic = (args ) => type: TextBox, fixed: true, w: 600, - style: { textStyle: { maxLines: args.maxLines, contentWrap: args.contentWrap} } + style: { + textStyle: { + maxLines: args.maxLines, + contentWrap: args.contentWrap + } + } } }; } @@ -53,7 +58,7 @@ Basic.args = { hideOnLoad: false, w: 600, maxLines: 3, - contentWrap: false + contentWrap: false }; Basic.argTypes = { @@ -113,10 +118,10 @@ Basic.argTypes = { table: { defaultValue: { summary: false } } - }, + } }; -export const WithInlineContentArray = (args) => +export const WithInlineContentArray = args => class WithInlineContentArray extends lng.Component { static _template() { return { @@ -149,9 +154,9 @@ export const WithInlineContentArray = (args) => textStyle: { maxLines: args.maxLines, maxLinesSuffix: args.maxLinesSuffix, - contentWrap: args.contentWrap, + contentWrap: args.contentWrap } - }, + } } }; } @@ -160,7 +165,7 @@ export const WithInlineContentArray = (args) => WithInlineContentArray.args = inlineContentArgs; WithInlineContentArray.argTypes = inlineContentArgTypes; -export const WithInlineContentString = (args) => +export const WithInlineContentString = args => class WithInlineContentArray extends lng.Component { static _template() { return { @@ -180,9 +185,9 @@ export const WithInlineContentString = (args) => textStyle: { maxLines: args.maxLines, maxLinesSuffix: args.maxLinesSuffix, - contentWrap: args.contentWrap, + contentWrap: args.contentWrap } - }, + } } }; } @@ -191,7 +196,7 @@ export const WithInlineContentString = (args) => WithInlineContentString.args = inlineContentArgs; WithInlineContentString.argTypes = inlineContentArgTypes; -export const WithInlineContentTruncation = (args) => +export const WithInlineContentTruncation = args => class Basic extends lng.Component { static _template() { return { @@ -226,11 +231,11 @@ export const WithInlineContentTruncation = (args) => { badge: 'HD', title: 'HD' }, { badge: 'SD', title: 'SD' }, ', and this should truncate before going on to a third line.' - ], + ] } }; } }; - WithInlineContentTruncation.args = inlineContentArgs; - WithInlineContentTruncation.argTypes = inlineContentArgTypes; +WithInlineContentTruncation.args = inlineContentArgs; +WithInlineContentTruncation.argTypes = inlineContentArgTypes; From b9743cd9c0a3300f18dbccdf99c01ab6943c5025 Mon Sep 17 00:00:00 2001 From: Shayna Hay Date: Tue, 25 Jun 2024 09:48:21 -0400 Subject: [PATCH 6/7] fix(InlineContent): adds a check for if maxLines is defined --- .../ui-components/src/components/InlineContent/InlineContent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js index 579e917f0..45f3c8e22 100644 --- a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js +++ b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js @@ -157,7 +157,7 @@ export default class InlineContent extends Base { ) { // only using this.flex._layout._lineLayouter._lines.length if maxLines is larger than the number of lines so we don't have a height too large const multiplierLines = - this.maxLines > this.flex._layout._lineLayouter._lines.length + this.maxLines === undefined || this.maxLines > this.flex._layout._lineLayouter._lines.length ? this.flex._layout._lineLayouter._lines.length : this.maxLines; From 55fdd8c95109a1448d037b0c70dbc414effcd356 Mon Sep 17 00:00:00 2001 From: Shayna Hay Date: Tue, 25 Jun 2024 10:00:53 -0400 Subject: [PATCH 7/7] fix(Textbox): lint fixes --- .../src/components/InlineContent/InlineContent.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js index 45f3c8e22..935a789a8 100644 --- a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js +++ b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js @@ -157,7 +157,8 @@ export default class InlineContent extends Base { ) { // only using this.flex._layout._lineLayouter._lines.length if maxLines is larger than the number of lines so we don't have a height too large const multiplierLines = - this.maxLines === undefined || this.maxLines > this.flex._layout._lineLayouter._lines.length + this.maxLines === undefined || + this.maxLines > this.flex._layout._lineLayouter._lines.length ? this.flex._layout._lineLayouter._lines.length : this.maxLines;