mirror of
https://github.com/balena-io/etcher.git
synced 2025-07-15 23:36:32 +00:00
refactor: inline middle-ellipsis package as util
We remove our dependency on the `middle-ellipses` package and include and expose the function in `lib/shared/utils`, alongside the regular Angular filter it exposes. This allows use of the middle ellipsis method in React. Change-Type: patch Changelog-Entry: Inline middle-ellipsis package as util.
This commit is contained in:
parent
e41d4dad3c
commit
57c4a285d8
@ -31,7 +31,6 @@ const MainPage = angular.module(MODULE_NAME, [
|
|||||||
'angularMoment',
|
'angularMoment',
|
||||||
|
|
||||||
require('angular-ui-router'),
|
require('angular-ui-router'),
|
||||||
require('angular-middle-ellipses'),
|
|
||||||
require('angular-seconds-to-date'),
|
require('angular-seconds-to-date'),
|
||||||
|
|
||||||
require('../../components/drive-selector/drive-selector'),
|
require('../../components/drive-selector/drive-selector'),
|
||||||
@ -42,7 +41,8 @@ const MainPage = angular.module(MODULE_NAME, [
|
|||||||
require('../../os/open-external/open-external'),
|
require('../../os/open-external/open-external'),
|
||||||
require('../../os/dropzone/dropzone'),
|
require('../../os/dropzone/dropzone'),
|
||||||
|
|
||||||
require('../../utils/byte-size/byte-size')
|
require('../../utils/byte-size/byte-size'),
|
||||||
|
require('../../utils/middle-ellipsis/filter')
|
||||||
])
|
])
|
||||||
|
|
||||||
MainPage.controller('MainController', require('./controllers/main'))
|
MainPage.controller('MainController', require('./controllers/main'))
|
||||||
|
@ -24,7 +24,7 @@
|
|||||||
<span
|
<span
|
||||||
ng-click="main.showSelectedImageDetails()"
|
ng-click="main.showSelectedImageDetails()"
|
||||||
class="step-image step-name"
|
class="step-image step-name"
|
||||||
ng-bind="main.selection.getImageName() || image.getImageBasename() | middleEllipses:20"
|
ng-bind="main.selection.getImageName() || image.getImageBasename() | middleEllipsis:20"
|
||||||
uib-tooltip="{{ image.getImageBasename() }}"></span>
|
uib-tooltip="{{ image.getImageBasename() }}"></span>
|
||||||
<span class="step-image step-size">{{ main.selection.getImageSize() | closestUnit }}</span>
|
<span class="step-image step-size">{{ main.selection.getImageSize() | closestUnit }}</span>
|
||||||
</div>
|
</div>
|
||||||
@ -67,8 +67,8 @@
|
|||||||
}">
|
}">
|
||||||
<span class="drive-step step-name"
|
<span class="drive-step step-name"
|
||||||
uib-tooltip="{{ drive.getDriveListLabel() }}">
|
uib-tooltip="{{ drive.getDriveListLabel() }}">
|
||||||
<!-- middleEllipses errors on undefined, therefore fallback to empty string -->
|
<!-- middleEllipsis errors on undefined, therefore fallback to empty string -->
|
||||||
{{ drive.getDrivesTitle() | middleEllipses:20 }}
|
{{ drive.getDrivesTitle() | middleEllipsis:20 }}
|
||||||
</span>
|
</span>
|
||||||
<span class="step-drive step-size">{{ main.selection.getCurrentDrive().size | closestUnit }}</span>
|
<span class="step-drive step-size">{{ main.selection.getCurrentDrive().size | closestUnit }}</span>
|
||||||
<span class="step-drive step-warning glyphicon glyphicon-exclamation-sign"
|
<span class="step-drive step-warning glyphicon glyphicon-exclamation-sign"
|
||||||
|
67
lib/gui/app/utils/middle-ellipsis.js
Normal file
67
lib/gui/app/utils/middle-ellipsis.js
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
/*
|
||||||
|
* Copyright 2018 resin.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
|
||||||
|
}
|
39
lib/gui/app/utils/middle-ellipsis/filter.js
Normal file
39
lib/gui/app/utils/middle-ellipsis/filter.js
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
/*
|
||||||
|
* Copyright 2018 resin.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'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The purpose of this module is to provide utilities
|
||||||
|
* to work with sizes in bytes.
|
||||||
|
*
|
||||||
|
* @module Etcher.Utils.MiddleEllipsis
|
||||||
|
*/
|
||||||
|
|
||||||
|
const _ = require('lodash')
|
||||||
|
const angular = require('angular')
|
||||||
|
const middleEllipsis = require('../middle-ellipsis')
|
||||||
|
|
||||||
|
const MODULE_NAME = 'Etcher.Utils.MiddleEllipsis'
|
||||||
|
const MiddleEllipsis = angular.module(MODULE_NAME, [])
|
||||||
|
|
||||||
|
/* eslint-disable lodash/prefer-lodash-method */
|
||||||
|
|
||||||
|
MiddleEllipsis.filter('middleEllipsis', _.constant(middleEllipsis))
|
||||||
|
|
||||||
|
/* eslint-enable lodash/prefer-lodash-method */
|
||||||
|
|
||||||
|
module.exports = MODULE_NAME
|
4
npm-shrinkwrap.json
generated
4
npm-shrinkwrap.json
generated
@ -120,10 +120,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"angular-middle-ellipses": {
|
|
||||||
"version": "1.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/angular-middle-ellipses/-/angular-middle-ellipses-1.0.0.tgz"
|
|
||||||
},
|
|
||||||
"angular-mocks": {
|
"angular-mocks": {
|
||||||
"version": "1.6.3",
|
"version": "1.6.3",
|
||||||
"resolved": "https://registry.npmjs.org/angular-mocks/-/angular-mocks-1.6.3.tgz",
|
"resolved": "https://registry.npmjs.org/angular-mocks/-/angular-mocks-1.6.3.tgz",
|
||||||
|
@ -40,7 +40,6 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"angular": "1.6.3",
|
"angular": "1.6.3",
|
||||||
"angular-if-state": "1.0.0",
|
"angular-if-state": "1.0.0",
|
||||||
"angular-middle-ellipses": "1.0.0",
|
|
||||||
"angular-moment": "1.0.1",
|
"angular-moment": "1.0.1",
|
||||||
"angular-seconds-to-date": "1.0.0",
|
"angular-seconds-to-date": "1.0.0",
|
||||||
"angular-ui-bootstrap": "2.5.0",
|
"angular-ui-bootstrap": "2.5.0",
|
||||||
|
46
tests/gui/utils/middle-ellipsis.spec.js
Normal file
46
tests/gui/utils/middle-ellipsis.spec.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
|
||||||
|
/*
|
||||||
|
* Copyright 2018 resin.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'
|
||||||
|
|
||||||
|
const m = require('mochainon')
|
||||||
|
const middleEllipsis = require('../../../lib/gui/app/utils/middle-ellipsis')
|
||||||
|
console.log(middleEllipsis)
|
||||||
|
|
||||||
|
describe('Browser: MiddleEllipsis', function () {
|
||||||
|
describe('.middleEllipsis()', function () {
|
||||||
|
it('should throw error if limit < 3', function () {
|
||||||
|
m.chai.expect(() => {
|
||||||
|
middleEllipsis('No', 2)
|
||||||
|
}).to.throw('middleEllipsis: Limit should be at least 3')
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('given the input length is greater than the limit', function () {
|
||||||
|
it('should always truncate input to an odd length', function () {
|
||||||
|
const alphabet = 'abcdefghijklmnopqrstuvwxyz'
|
||||||
|
m.chai.expect(middleEllipsis(alphabet, 3)).to.have.a.lengthOf(3)
|
||||||
|
m.chai.expect(middleEllipsis(alphabet, 4)).to.have.a.lengthOf(3)
|
||||||
|
m.chai.expect(middleEllipsis(alphabet, 5)).to.have.a.lengthOf(5)
|
||||||
|
m.chai.expect(middleEllipsis(alphabet, 6)).to.have.a.lengthOf(5)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should return the input if it is within the bounds of limit', function () {
|
||||||
|
m.chai.expect(middleEllipsis('Hello', 10)).to.equal('Hello')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
Loading…
x
Reference in New Issue
Block a user