From 255fae3a9010e5aabb89b4557a2d29b922db0af7 Mon Sep 17 00:00:00 2001 From: Alexis Svinartchouk Date: Tue, 7 Jan 2020 13:46:03 +0100 Subject: [PATCH] Convert middle-ellipsis.js to typescript Change-type: patch --- .../drive-selector/target-selector.jsx | 2 +- .../image-selector/image-selector.jsx | 2 +- lib/gui/app/pages/main/MainPage.tsx | 2 +- lib/gui/app/utils/middle-ellipsis.js | 68 ------------------- lib/gui/app/utils/middle-ellipsis.ts | 51 ++++++++++++++ tests/gui/utils/middle-ellipsis.spec.js | 4 +- 6 files changed, 56 insertions(+), 73 deletions(-) delete mode 100644 lib/gui/app/utils/middle-ellipsis.js create mode 100644 lib/gui/app/utils/middle-ellipsis.ts diff --git a/lib/gui/app/components/drive-selector/target-selector.jsx b/lib/gui/app/components/drive-selector/target-selector.jsx index 83e564a1..9598b36c 100644 --- a/lib/gui/app/components/drive-selector/target-selector.jsx +++ b/lib/gui/app/components/drive-selector/target-selector.jsx @@ -29,7 +29,7 @@ const { StepNameButton } = require('./../../styled-components') const { Txt } = require('rendition') -const middleEllipsis = require('./../../utils/middle-ellipsis') +const { middleEllipsis } = require('./../../utils/middle-ellipsis') const { bytesToClosestUnit } = require('./../../../../shared/units') const TargetDetail = styled((props) => ( diff --git a/lib/gui/app/components/image-selector/image-selector.jsx b/lib/gui/app/components/image-selector/image-selector.jsx index a190eb80..421d9b9e 100644 --- a/lib/gui/app/components/image-selector/image-selector.jsx +++ b/lib/gui/app/components/image-selector/image-selector.jsx @@ -45,7 +45,7 @@ const { const { Modal } = require('rendition') -const middleEllipsis = require('../../utils/middle-ellipsis') +const { middleEllipsis } = require('../../utils/middle-ellipsis') const SVGIcon = require('../svg-icon/svg-icon.jsx') const { default: styled } = require('styled-components') diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx index 513252f3..90008e8d 100644 --- a/lib/gui/app/pages/main/MainPage.tsx +++ b/lib/gui/app/pages/main/MainPage.tsx @@ -34,7 +34,7 @@ import * as store from '../../models/store'; import { open as openExternal } from '../../os/open-external/services/open-external'; import { ThemedProvider } from '../../styled-components'; import { colors } from '../../theme'; -import * as middleEllipsis from '../../utils/middle-ellipsis'; +import { middleEllipsis } from '../../utils/middle-ellipsis'; import { bytesToClosestUnit } from '../../../../shared/units'; diff --git a/lib/gui/app/utils/middle-ellipsis.js b/lib/gui/app/utils/middle-ellipsis.js deleted file mode 100644 index 84aa053f..00000000 --- a/lib/gui/app/utils/middle-ellipsis.js +++ /dev/null @@ -1,68 +0,0 @@ -/* - * Copyright 2016 Juan Cruz Viotti. https://github.com/jviotti - * Copyright 2018 balena.io - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -'use strict' - -/** - * @summary Truncate text from the middle with an ellipsis - * @public - * @function - * - * @param {String} input - input string - * @param {Number} limit - output limit - * @returns {String} truncated string - * - * @throws Will throw if `limit` < 3 - * - * @example - * middleEllipsis('MyVeryLongString', 5) - * > 'My\u2026ng' - */ -module.exports = (input, limit) => { - const MIDDLE_ELLIPSIS_CHARACTER = '\u2026' - const MINIMUM_LENGTH = 3 - - // We can't provide a 100% expected result if the limit is less than 3. For example: - // - // If the limit == 2: - // Should we display the first at last character without an ellipses in the middle? - // Should we display just one character and an ellipses before or after? - // Should we display nothing at all? - // - // If the limit == 1: - // Should we display just one character? - // Should we display just an ellipses? - // Should we display nothing at all? - // - // Etc. - if (limit < MINIMUM_LENGTH) { - throw new Error('middleEllipsis: Limit should be at least 3') - } - - // Do nothing, the string doesn't need truncation. - if (input.length <= limit) { - return input - } - - /* eslint-disable no-magic-numbers */ - const lengthOfTheSidesAfterTruncation = Math.floor((limit - 1) / 2) - const finalLeftPart = input.slice(0, lengthOfTheSidesAfterTruncation) - const finalRightPart = input.slice(input.length - lengthOfTheSidesAfterTruncation) - /* eslint-enable no-magic-numbers */ - - return finalLeftPart + MIDDLE_ELLIPSIS_CHARACTER + finalRightPart -} diff --git a/lib/gui/app/utils/middle-ellipsis.ts b/lib/gui/app/utils/middle-ellipsis.ts new file mode 100644 index 00000000..b4a9266b --- /dev/null +++ b/lib/gui/app/utils/middle-ellipsis.ts @@ -0,0 +1,51 @@ +/* + * Copyright 2016 Juan Cruz Viotti. https://github.com/jviotti + * Copyright 2018 balena.io + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * @summary Truncate text from the middle with an ellipsis + */ +export function middleEllipsis(input: string, limit: number): string { + // We can't provide a 100% expected result if the limit is less than 3. For example: + // + // If the limit == 2: + // Should we display the first at last character without an ellipses in the middle? + // Should we display just one character and an ellipses before or after? + // Should we display nothing at all? + // + // If the limit == 1: + // Should we display just one character? + // Should we display just an ellipses? + // Should we display nothing at all? + // + // Etc. + if (limit < 3) { + throw new Error('middleEllipsis: Limit should be at least 3'); + } + + // Do nothing, the string doesn't need truncation. + if (input.length <= limit) { + return input; + } + + const lengthOfTheSidesAfterTruncation = Math.floor((limit - 1) / 2); + const finalLeftPart = input.slice(0, lengthOfTheSidesAfterTruncation); + const finalRightPart = input.slice( + input.length - lengthOfTheSidesAfterTruncation, + ); + + return finalLeftPart + '…' + finalRightPart; +} diff --git a/tests/gui/utils/middle-ellipsis.spec.js b/tests/gui/utils/middle-ellipsis.spec.js index cec6f7d2..50cedc04 100644 --- a/tests/gui/utils/middle-ellipsis.spec.js +++ b/tests/gui/utils/middle-ellipsis.spec.js @@ -18,8 +18,8 @@ 'use strict' const m = require('mochainon') -const middleEllipsis = require('../../../lib/gui/app/utils/middle-ellipsis') -console.log(middleEllipsis) +// eslint-disable-next-line node/no-missing-require +const { middleEllipsis } = require('../../../lib/gui/app/utils/middle-ellipsis') describe('Browser: MiddleEllipsis', function () { describe('.middleEllipsis()', function () {