@24i/bigscreen-sdk 1.0.4-alpha.2098 → 1.0.4-alpha.2109

package/packages/rnv-build-engine/dist/templates/platforms/_shared/webpack.base.js

@@ -0,0 +1,234 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateConfig = void 0;
+const html_webpack_harddisk_plugin_1 = __importDefault(require("html-webpack-harddisk-plugin"));
+const webpack_1 = __importDefault(require("webpack"));
+const path_1 = __importDefault(require("path"));
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const filemanager_webpack_plugin_1 = __importDefault(require("filemanager-webpack-plugin"));
+const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
+const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
+const smartapps_bigscreen_rnv_build_engine_1 = require("@24i/smartapps-bigscreen-rnv-build-engine");
+const extendSass_1 = require("./utils/extendSass");
+const getAnimationType = (isAnimated = false) => (isAnimated ? 'animated' : 'basic');
+const generateFlavourJSExtensions = ({ resolution: { height }, animated, extensions }) => {
+    const flavouredExtensions = [];
+    const animationType = getAnimationType(animated);
+    extensions.forEach((extension) => {
+        flavouredExtensions.push(`.${animationType}.${height}.${extension}`, `.${height}.${extension}`, `.${animationType}.${extension}`, `.${extension}`);
+    });
+    return flavouredExtensions;
+};
+const generateFlavourSCSSExtensions = ({ resolution: { height }, animated }) => {
+    const animationType = getAnimationType(animated);
+    return [
+        `.${animationType}.${height}.scss`,
+        `.${animationType}.${height}.css`,
+        `.${height}.scss`,
+        `.${height}.css`,
+        `.${animationType}.scss`,
+        `.${animationType}.css`,
+        '.scss',
+        '.css',
+    ];
+};
+const getResolutionString = ({ resolution: { height, width } }) => (height && width ? `${width}x${height}` : '');
+const getAppContentPath = (baseUrl, isBuildHosted = false) => {
+    const isBuildHostedAndHasBaseUrl = isBuildHosted && !!baseUrl;
+    const relativePath = path_1.default.join(isBuildHostedAndHasBaseUrl ? 'public/' : '', 'content');
+    return isBuildHostedAndHasBaseUrl
+        ? `${baseUrl}/${relativePath}`
+        : `./${relativePath}`;
+};
+const makeRules = (config, projectDir, isDevServer) => ({
+    babel: {
+        test: /\.[tj]sx?$/,
+        exclude: (config.typescript?.exclude ?? []).map((exclusion) => (path_1.default.resolve(projectDir, exclusion))),
+        use: [
+            {
+                loader: 'ts-loader',
+                options: {
+                    transpileOnly: true,
+                    allowTsInNodeModules: true,
+                },
+            },
+        ],
+    },
+    css: {
+        test: /\.s?css$/,
+        use: [
+            isDevServer ? 'css-hot-loader' : null,
+            mini_css_extract_plugin_1.default.loader,
+            'css-loader',
+            {
+                loader: 'sass-loader',
+                options: {
+                    sourceMap: false,
+                    additionalData: (0, extendSass_1.extendSass)(config),
+                },
+            },
+        ].filter(Boolean),
+    },
+    image: {
+        test: /\.(gif|jpe?g|png|svg)$/,
+        use: {
+            loader: 'file-loader',
+            options: {
+                outputPath: 'content/assets/',
+                publicPath: '../assets/',
+            },
+        },
+    },
+    fonts: {
+        test: /\.(woff|woff2|eot|ttf|otf)(\?[\s\S]+)?$/,
+        use: {
+            loader: 'file-loader',
+            options: {
+                outputPath: 'content/fonts',
+                publicPath: '../fonts/',
+            },
+        },
+    },
+    sourcemap: {
+        test: /\.[tj]sx$/,
+        use: ['source-map-loader'],
+        enforce: 'pre',
+        exclude: [/node_modules/, /build/, /__tests__/],
+    },
+});
+const makeAliases = (config, projectDir) => {
+    const aliases = {
+        '@24i/smartapps-bigscreen-device': config.environment === 'production'
+            ? '@24i/smartapps-bigscreen-device'
+            : '@24i/smartapps-bigscreen-device/resolver',
+    };
+    const { moduleAliases } = config;
+    if (moduleAliases) {
+        Object.keys(moduleAliases).forEach((key) => {
+            if (typeof moduleAliases[key] === 'string') {
+                aliases[key] = moduleAliases[key];
+            }
+            else if (moduleAliases[key].projectPath) {
+                aliases[key] = path_1.default.resolve(projectDir, moduleAliases[key].projectPath);
+            }
+        });
+    }
+    return aliases;
+};
+function generateConfig(config) {
+    const projectDir = path_1.default.resolve(config.currentDir, '../../');
+    const platformBuildsDir = path_1.default.resolve(config.currentDir, '../');
+    const appBuildDir = path_1.default.resolve(config.currentDir);
+    const appBuildEngineProjectDir = path_1.default.resolve(config.currentDir, config.buildFolder);
+    const appBuildEngineProjectPublicDir = path_1.default.resolve(appBuildEngineProjectDir, 'public');
+    const platformSchemeAppIdObj = {
+        platform: config.platform,
+        scheme: config.scheme,
+        flavour: config.appConfigId,
+    };
+    const { buildConfig } = smartapps_bigscreen_rnv_build_engine_1.Resolvers.getBaseConfig();
+    const buildVersion = smartapps_bigscreen_rnv_build_engine_1.Resolvers.resolveBuildVersion(platformSchemeAppIdObj);
+    const baseUrl = smartapps_bigscreen_rnv_build_engine_1.Resolvers.resolveBaseUrl(platformSchemeAppIdObj);
+    const devServerHost = config.devServerHost || '0.0.0.0';
+    const isDevServer = appBuildEngineProjectDir.endsWith('/server');
+    const { PLATFORM } = process.env;
+    const isBuildHosted = config.isBuildHosted || false;
+    const appContentPath = getAppContentPath(baseUrl, isBuildHosted);
+    const copiedDirWithPublicContentPath = path_1.default.join(appBuildDir, `../${path_1.default.parse(appBuildDir).name}-public`);
+    const plugins = {
+        forkTsChecker: new fork_ts_checker_webpack_plugin_1.default({
+            typescript: {
+                enabled: true,
+                memoryLimit: 4096,
+            },
+        }),
+        webpack: new webpack_1.default.DefinePlugin({
+            WEBPACK_INJECTION_APP_NAME: JSON.stringify(buildConfig.common.appName || ''),
+            WEBPACK_INJECTION_APP_CONFIG_ID: JSON.stringify(config.appConfigId || ''),
+            WEBPACK_INJECTION_APP_CREATED: JSON.stringify(new Date().toISOString()),
+            WEBPACK_INJECTION_APP_SCHEME: JSON.stringify(config.scheme || ''),
+            WEBPACK_INJECTION_APP_RESOLUTION: JSON.stringify(getResolutionString(config)),
+            WEBPACK_INJECTION_APP_VERSION: JSON.stringify(buildVersion || ''),
+            WEBPACK_INJECTION_APP_ENVIRONMENT: JSON.stringify(config.environment || ''),
+            WEBPACK_INJECTION_APP_PLATFORM: JSON.stringify(PLATFORM || ''),
+            WEBPACK_INJECTION_APP_CONTENT_PATH: JSON.stringify(appContentPath),
+        }),
+        html: new html_webpack_plugin_1.default({
+            alwaysWriteToDisk: true,
+            filename: path_1.default.resolve(appBuildEngineProjectPublicDir, './index.html'),
+            template: path_1.default.resolve(appBuildDir, './template.js'),
+            minify: false,
+            templateParameters: {
+                ...config,
+                debug: process.env.DEBUG,
+                debugIp: process.env.DEBUG_IP,
+                platform: PLATFORM,
+                environment: config.environment,
+                baseUrl,
+            },
+            xhtml: PLATFORM === smartapps_bigscreen_rnv_build_engine_1.Constants.Platforms.HBBTV,
+        }),
+        harddisk: new html_webpack_harddisk_plugin_1.default(),
+        css: new mini_css_extract_plugin_1.default({
+            filename: 'content/css/[name].css',
+        }),
+        fileManager: new filemanager_webpack_plugin_1.default({
+            events: {
+                onStart: [
+                    {
+                        delete: [
+                            copiedDirWithPublicContentPath,
+                        ],
+                    },
+                ],
+                onEnd: [
+                    isDevServer ? {
+                        move: [
+                            {
+                                source: path_1.default.join(appBuildDir, 'project', 'public', 'content'),
+                                destination: path_1.default.join(appBuildEngineProjectDir, 'content'),
+                            },
+                        ],
+                    } : null,
+                    isBuildHosted ? {
+                        copy: [
+                            {
+                                source: appBuildEngineProjectPublicDir,
+                                destination: path_1.default.join(copiedDirWithPublicContentPath, 'project', 'public'),
+                            },
+                        ],
+                        delete: [
+                            path_1.default.join(appBuildEngineProjectPublicDir, 'content'),
+                        ],
+                    } : null,
+                ].filter(Boolean),
+            },
+        }),
+    };
+    return {
+        Rules: makeRules(config, projectDir, isDevServer),
+        extensions: [
+            ...generateFlavourJSExtensions(config),
+            ...generateFlavourSCSSExtensions(config),
+        ],
+        aliases: makeAliases(config, projectDir),
+        entry: {
+            polyfill: path_1.default.resolve(projectDir, 'polyfill/index.ts'),
+            bundle: path_1.default.resolve(projectDir, `${config.entryFile}.js`),
+        },
+        devServer: { host: devServerHost },
+        output: {
+            filename: 'content/js/[name].js',
+            publicPath: isBuildHosted ? `${baseUrl}/public` : '',
+            path: appBuildEngineProjectPublicDir,
+        },
+        Plugins: plugins,
+        projectDir,
+        platformBuildsDir,
+        appBuildDir,
+    };
+}
+exports.generateConfig = generateConfig;

package/packages/rnv-build-engine/dist/templates/platforms/_shared/webpack.config.dev.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const webpackPlatformProps_1 = require("./webpackPlatformProps");
+const webpackConfigAdapter_1 = require("./webpackConfigAdapter");
+const webpackConfig = (0, webpackConfigAdapter_1.generateWebpackDevConfig)(webpackPlatformProps_1.webpackPlatformProps);
+exports.default = webpackConfig;

package/packages/rnv-build-engine/dist/templates/platforms/_shared/webpack.config.prod.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const webpackPlatformProps_1 = require("./webpackPlatformProps");
+const webpackConfigAdapter_1 = require("./webpackConfigAdapter");
+const webpackConfig = (0, webpackConfigAdapter_1.generateWebpackProdConfig)(webpackPlatformProps_1.webpackPlatformProps);
+exports.default = webpackConfig;

package/packages/rnv-build-engine/dist/templates/platforms/_shared/webpack.extend.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolution = void 0;
+const resolution = {
+    width: 1280,
+    height: 720,
+};
+exports.resolution = resolution;

package/packages/rnv-build-engine/dist/templates/platforms/_shared/webpackConfigAdapter.js

@@ -0,0 +1,100 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateWebpackProdConfig = exports.generateWebpackDevConfig = void 0;
+const webpack_base_1 = require("./webpack.base");
+const Extend = __importStar(require("./webpack.extend"));
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const composeCommonConfig = (config) => {
+    const composedConfig = {
+        ...config,
+        ...Extend,
+        currentDir: __dirname,
+    };
+    const { metaTags } = composedConfig;
+    if (metaTags) {
+        composedConfig.metaTags = metaTags.replace('<meta name="viewport" content="width={{APP_WIDTH}}', `<meta name="viewport" content="width=${Extend.resolution.width}`);
+    }
+    return composedConfig;
+};
+const withDevInputConfig = (config) => ({
+    ...config,
+    environment: 'development',
+    devServerHost: '0.0.0.0',
+    enableHotReload: true,
+});
+const withProdInputConfig = (config) => ({
+    ...config,
+    environment: 'production',
+});
+const makeCommonOutput = (config, C) => ({
+    entry: C.entry,
+    devServer: C.devServer,
+    output: C.output,
+    module: {
+        rules: [
+            C.Rules.babel,
+            C.Rules.css,
+            C.Rules.image,
+            C.Rules.fonts,
+            C.Rules.sourcemap,
+        ].filter(Boolean),
+    },
+    plugins: [
+        C.Plugins.forkTsChecker,
+        C.Plugins.webpack,
+        C.Plugins.html,
+        C.Plugins.harddisk,
+        C.Plugins.css,
+        C.Plugins.fileManager,
+    ].filter(Boolean),
+    resolve: {
+        symlinks: true,
+        extensions: C.extensions,
+        alias: C.aliases,
+    },
+    ...config.extend || {},
+});
+const generateWebpackDevConfig = (webpackPlatformProps) => {
+    const config = composeCommonConfig(webpackPlatformProps);
+    const devInputConfig = withDevInputConfig(config);
+    const C = (0, webpack_base_1.generateConfig)(devInputConfig);
+    const commonOutput = makeCommonOutput(devInputConfig, C);
+    commonOutput.plugins.push(new BundleAnalyzerPlugin());
+    return {
+        ...commonOutput,
+        optimization: {
+            minimize: false,
+        },
+    };
+};
+exports.generateWebpackDevConfig = generateWebpackDevConfig;
+const generateWebpackProdConfig = (webpackPlatformProps) => {
+    const config = composeCommonConfig(webpackPlatformProps);
+    const prodInputConfig = withProdInputConfig(config);
+    const C = (0, webpack_base_1.generateConfig)(prodInputConfig);
+    const commonOutput = makeCommonOutput(prodInputConfig, C);
+    commonOutput.plugins.push(new BundleAnalyzerPlugin());
+    return {
+        ...commonOutput,
+    };
+};
+exports.generateWebpackProdConfig = generateWebpackProdConfig;

package/packages/rnv-build-engine/dist/templates/platforms/_shared/webpackPlatformProps.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.webpackPlatformProps = void 0;
+exports.webpackPlatformProps = {
+    metaTags: `
+        <meta name="viewport" content="width={{APP_WIDTH}}, user-scalable=no" />
+    `,
+};

package/packages/rnv-build-engine/dist/templates/platforms/hbbtv/webpackPlatformProps.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.webpackPlatformProps = void 0;
+const objStyle = 'style="position: absolute; left: 0; top: 0; width: 0; height: 0;"';
+exports.webpackPlatformProps = {
+    docType: `
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "http://www.hbbtv.org/dtd/HbbTV-1.1.1.dtd">
+    `,
+    htmlTag: '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">',
+    metaTags: `
+        <meta http-equiv="content-type" content="application/vnd.hbbtv.xhtml+xml" charset="UTF-8" />
+        <meta http-equiv="cache-control" content="max-age=0" />
+        <meta http-equiv="cache-control" content="no-cache" />
+        <meta http-equiv="expires" content="0" />
+        <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
+        <meta http-equiv="pragma" content="no-cache" />
+    `,
+    bodyPrepend: [
+        `<object id="oipfCap" type="application/oipfCapabilities" ${objStyle}></object>`,
+        `<object id="oipfAppMan" type="application/oipfApplicationManager" ${objStyle}></object>`,
+        `<object id="oipfConfig" type="application/oipfConfiguration" ${objStyle}></object>`,
+    ],
+};

package/packages/rnv-build-engine/dist/templates/platforms/tizen/project/.project

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>{{configProps.appName}}</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>json.validation.builder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.tizen.web.project.builder.WebBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>json.validation.nature</nature>
+		<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
+		<nature>org.tizen.web.project.builder.WebNature</nature>
+	</natures>
+</projectDescription>

package/packages/rnv-build-engine/dist/templates/platforms/tizen/project/.tproject

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<tproject xmlns="http://www.tizen.org/tproject">
+    <platforms>
+        <platform>
+            <name>tv-samsung-4.0</name>
+        </platform>
+    </platforms>
+    <package>
+        <blacklist/>
+        <resFallback autoGen="true"/>
+    </package>
+</tproject>

package/packages/rnv-build-engine/dist/templates/platforms/tizen/project/config.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="https://24i.com/apps/smartapps/bigscreen/{{configProps.id}}" version="{{APP_VERSION}}" viewmodes="maximized">
+    <tizen:application id="{{configProps.id}}" package="{{configProps.package}}" required_version="2.3"/>
+    <name>{{configProps.appName}}</name>
+    <content src="public/index.html"/>
+    <icon src="app_icon_512x512.png"/>
+    <access origin="*" subdomains="true"></access>
+    <feature name="http://tizen.org/feature/screen.size.normal.{{configProps.webpackConfig.resolution.width}}.{{configProps.webpackConfig.resolution.height}}"/>
+    <feature name="http://tizen.org/feature/network.internet"/>
+    <feature name="http://tizen.org/api/tizen" required="true"/>
+    <tizen:profile name="tv-samsung"/>
+    <tizen:privilege name="http://developer.samsung.com/privilege/network.public"/>
+    <tizen:privilege name="http://developer.samsung.com/privilege/productinfo"/>
+    <tizen:privilege name="http://tizen.org/privilege/internet"/>
+    <tizen:privilege name="http://tizen.org/privilege/tv.inputdevice"/>
+    <tizen:setting screen-orientation="landscape" context-menu="enable" background-support="disable" encryption="disable" install-location="auto" hwkey-event="enable"/>
+</widget>

package/packages/rnv-build-engine/dist/templates/platforms/webos/project/.project

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>{{configProps.title}}</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.wst.common.project.facet.core.builder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>com.webos.ide.nature.WebOSBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.wst.validation.validationbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>com.webos.ide.project.nature</nature>
+		<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
+		<nature>org.eclipse.wst.common.project.facet.core.nature</nature>
+		<nature>org.eclipse.wst.common.modulecore.ModuleCoreNature</nature>
+	</natures>
+</projectDescription>

package/packages/rnv-build-engine/dist/templates/platforms/webos/project/appinfo.json

@@ -0,0 +1,19 @@
+{
+    "icon": "app_icon_80x80.png",
+    "id": "{{configProps.id}}",
+    "largeIcon": "app_icon_130x130.png",
+    "main": "public/index.html",
+    "splashBackground": "splash_background_1920x1080.png",
+    "title": "{{configProps.title}}",
+    "type": "web",
+    "vendor": "{{configProps.author.name}}",
+    "version": "{{configProps.packageVersion}}",
+    "appDescription": "{{configProps.description}}",
+    "bgColor": "{{configProps.backgroundColor}}",
+    "bgImage": "{{configProps.appinfo.bgImage}}",
+    "disableBackHistoryAPI": true,
+    "handlesRelaunch": "{{configProps.appinfo.handlesRelaunch}}",
+    "iconColor": "{{configProps.appinfo.iconColor}}",
+    "resolution": "{{configProps.webpackConfig.resolution.width}}x{{configProps.webpackConfig.resolution.height}}",
+    "transparent": "{{configProps.appinfo.transparent}}"
+}

package/packages/rnv-build-engine/dist/templates/platforms/webos/webpackPlatformProps.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.webpackPlatformProps = void 0;
+exports.webpackPlatformProps = {
+    metaTags: `
+        <meta name="viewport" content="width={{APP_WIDTH}}, initial-scale=1, shrink-to-fit=no" />
+    `,
+};

package/packages/types-bigscreen-jsx/index.d.ts

@@ -98,7 +98,7 @@ declare namespace React {
      * - React stateless functional components that forward a `ref` will give you the `ElementRef` of the forwarded
      *   to component.
      *
-     * `C` must be the type _of_ a React component so you need to use typeof as in React.ElementRef<typeof MyComponent>.
+     * `C` must be the type _of_ a React component so you need to use typeof as in `React.ElementRef<typeof MyComponent>`.
      *
      * @todo In Flow, this works a little different with forwarded refs and the `AbstractComponent` that
      *       `React.forwardRef()` returns.

package/packages/utils/src/textUtils.ts

@@ -1,12 +1,12 @@
 const ELLIPSIS = '...';
 
-export const trimWithLeadingEllipsis = (row: HTMLSpanElement) => {
+export const trimWithLeadingEllipsis = (row: HTMLSpanElement, requestedNumberOfLines: number) => {
     if (row && row.textContent != null) {
         row.style.visibility = 'hidden';
         const lineHeightString = window.getComputedStyle(row, null).getPropertyValue('line-height');
         const lineHeight = parseInt(lineHeightString, 10);
         let numberOfLines = row.offsetHeight / lineHeight;
-        if (numberOfLines > 2) {
+        if (numberOfLines > requestedNumberOfLines) {
             const originalTextContent = row.textContent;
             row.textContent = ELLIPSIS;
             let stringBuffer = '';
@@ -17,9 +17,9 @@ export const trimWithLeadingEllipsis = (row: HTMLSpanElement) => {
                 row.textContent = `${ELLIPSIS}${stringBuffer}`;
                 currentPosition -= 1;
                 numberOfLines = Math.floor(row.offsetHeight / lineHeight);
-            } while (numberOfLines <= 2 && currentPosition >= 0);
+            } while (numberOfLines <= requestedNumberOfLines && currentPosition >= 0);
             row.textContent = `${ELLIPSIS}${stringBuffer.substring(1)}`;
         }
-        row.style.visibility = 'visible';
+        row.style.visibility = '';
     }
 };