Rename stripHTML + cast values to string

This commit is contained in:
Josh Johnson 2018-05-28 15:39:12 +01:00
parent 8214eea7a9
commit 9dbb2e9733
4 changed files with 14 additions and 8 deletions

View file

@ -1,4 +1,4 @@
import { calcWidthOfInput, stripHTML } from '../lib/utils'; import { calcWidthOfInput, escape } from '../lib/utils';
export default class Input { export default class Input {
constructor({ element, type, classNames, placeholderValue }) { constructor({ element, type, classNames, placeholderValue }) {
@ -21,11 +21,11 @@ export default class Input {
} }
set value(value) { set value(value) {
this.element.value = value; this.element.value = `${value}`;
} }
get value() { get value() {
return stripHTML(this.element.value); return escape(this.element.value);
} }
addEventListeners() { addEventListeners() {

View file

@ -336,6 +336,12 @@ describe('components/input', () => {
instance.value = value; instance.value = value;
expect(instance.element.value).to.equal(value); expect(instance.element.value).to.equal(value);
}); });
it('casts value to string', () => {
const value = 1234;
instance.value = value;
expect(instance.element.value).to.equal(`${value}`);
});
}); });
describe('value getter', () => { describe('value getter', () => {

View file

@ -1,4 +1,4 @@
import { stripHTML } from './lib/utils'; import { escape } from './lib/utils';
export const DEFAULT_CLASSNAMES = { export const DEFAULT_CLASSNAMES = {
containerOuter: 'choices', containerOuter: 'choices',
@ -63,7 +63,7 @@ export const DEFAULT_CONFIG = {
noChoicesText: 'No choices to choose from', noChoicesText: 'No choices to choose from',
itemSelectText: 'Press to select', itemSelectText: 'Press to select',
uniqueItemText: 'Only unique values can be added.', uniqueItemText: 'Only unique values can be added.',
addItemText: value => `Press Enter to add <b>"${stripHTML(value)}"</b>`, addItemText: value => `Press Enter to add <b>"${escape(value)}"</b>`,
maxItemText: maxItemCount => `Only ${maxItemCount} values can be added.`, maxItemText: maxItemCount => `Only ${maxItemCount} values can be added.`,
itemComparer: (choice, item) => choice === item, itemComparer: (choice, item) => choice === item,
fuseOptions: { fuseOptions: {

View file

@ -185,11 +185,11 @@ export const isScrolledIntoView = (el, parent, direction = 1) => {
}; };
/** /**
* Escape html in the string * Escapes html in the string
* @param {String} html Initial string/html * @param {String} html Initial string/html
* @return {String} Sanitised string * @return {String} Sanitised string
*/ */
export const stripHTML = html => export const escape = html =>
html.replace(/&/g, '&amp;') html.replace(/&/g, '&amp;')
.replace(/>/g, '&rt;') .replace(/>/g, '&rt;')
.replace(/</g, '&lt;') .replace(/</g, '&lt;')
@ -235,7 +235,7 @@ export const calcWidthOfInput = (input, callback) => {
let width = input.offsetWidth; let width = input.offsetWidth;
if (value) { if (value) {
const testEl = strToEl(`<span>${stripHTML(value)}</span>`); const testEl = strToEl(`<span>${escape(value)}</span>`);
testEl.style.position = 'absolute'; testEl.style.position = 'absolute';
testEl.style.padding = '0'; testEl.style.padding = '0';
testEl.style.top = '-9999px'; testEl.style.top = '-9999px';