Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

input-format

Package Overview
Dependencies
Maintainers
1
Versions
44
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

input-format - npm Package Compare versions

Comparing version 0.1.10 to 0.1.11

196

build/input controller.js

@@ -35,2 +35,4 @@ 'use strict';

_initialiseProps.call(this);
if (typeof get_input_element !== 'function') {

@@ -49,8 +51,2 @@ (function () {

this.on_change = on_change;
this.onCut = this.onCut.bind(this);
this.onPaste = this.onPaste.bind(this);
this.onChange = this.onChange.bind(this);
this.onKeyDown = this.onKeyDown.bind(this);
this.format_input_text = this.format_input_text.bind(this);
}

@@ -62,66 +58,13 @@

(0, _createClass3.default)(Input_controller, [{
key: 'onCut',
value: function onCut(event) {
setTimeout(this.format_input_text, 0);
}
}, {
key: 'onPaste',
value: function onPaste(event) {
var input = this.get_input_element();
// Intercepts "Delete" and "Backspace" keys
// (hitting "Delete" or "Backspace"
// at any caret position should always result in
// erasing a digit)
var selection = (0, _dom.getSelection)(input);
// If selection is made,
// just erase the selected text
// prior to pasting
if (selection) {
this.erase_selection(input, selection);
}
(0, _createClass3.default)(Input_controller, [{
key: 'erase_selection',
this.format_input_text();
}
}, {
key: 'onChange',
value: function onChange(event) {
this.format_input_text();
}
// Intercepts "Delete" and "Backspace" keys
// (hitting "Delete" or "Backspace"
// at any caret position should always result in
// erasing a digit)
}, {
key: 'onKeyDown',
value: function onKeyDown(event) {
var operation = (0, _dom.getOperation)(event);
switch (operation) {
case 'Delete':
case 'Backspace':
// Intercept this operation and perform it manually.
event.preventDefault();
var input = this.get_input_element();
var selection = (0, _dom.getSelection)(input);
// If selection is made,
// just erase the selected text,
// and don't apply any more operations to it.
if (selection) {
this.erase_selection(input, selection);
return this.format_input_text();
}
// Else, perform the (character erasing) operation manually
return this.format_input_text(operation);
}
}
// Erases the selected text inside an `<input/>`
}, {
key: 'erase_selection',
value: function erase_selection(input, selection) {

@@ -140,56 +83,109 @@ var text = input.value;

}, {
key: 'format_input_text',
value: function format_input_text(operation) {
key: 'getParsedValue',
// Parses `<input/>` text
value: function getParsedValue() {
// <input/> DOM element
var input = this.get_input_element();
var _parse = (0, _parse3.default)(input.value, (0, _dom.getCaretPosition)(input), this.parse),
value = _parse.value,
caret = _parse.caret;
return (0, _parse3.default)(input.value, undefined, this.parse);
}
}]);
return Input_controller;
}();
// Apply the pending operation to the <input/> textual value (if any)
var _initialiseProps = function _initialiseProps() {
var _this = this;
this.onCut = function (event) {
setTimeout(_this.format_input_text, 0);
};
if (operation) {
var edit_result = (0, _edit2.default)(value, caret, operation);
this.onPaste = function (event) {
var input = _this.get_input_element();
value = edit_result.value;
caret = edit_result.caret;
}
var selection = (0, _dom.getSelection)(input);
// Format the <input/> textual value as a phone number
// (and reposition the caret accordingly)
// If selection is made,
// just erase the selected text
// prior to pasting
if (selection) {
_this.erase_selection(input, selection);
}
var format_result = (0, _format2.default)(value, caret, this.format);
_this.format_input_text();
};
var text = format_result.text;
caret = format_result.caret;
this.onChange = function (event) {
_this.format_input_text();
};
// Set <input/> textual value manually to also set caret position
// and prevent React from resetting the caret position later
// inside subsequent `render()`.
input.value = text;
// Set caret position (with the neccessary adjustments)
(0, _dom.setCaretPosition)(input, caret);
this.onKeyDown = function (event) {
var operation = (0, _dom.getOperation)(event);
// <input/> textual value may have been changed,
// so `value` may have been changed too.
this.on_change(value);
switch (operation) {
case 'Delete':
case 'Backspace':
// Intercept this operation and perform it manually.
event.preventDefault();
var input = _this.get_input_element();
var selection = (0, _dom.getSelection)(input);
// If selection is made,
// just erase the selected text,
// and don't apply any more operations to it.
if (selection) {
_this.erase_selection(input, selection);
return _this.format_input_text();
}
// Else, perform the (character erasing) operation manually
return _this.format_input_text(operation);
}
};
// Parses `<input/>` text
this.format_input_text = function (operation) {
// <input/> DOM element
var input = _this.get_input_element();
}, {
key: 'getParsedValue',
value: function getParsedValue() {
// <input/> DOM element
var input = this.get_input_element();
var _parse = (0, _parse3.default)(input.value, (0, _dom.getCaretPosition)(input), _this.parse),
value = _parse.value,
caret = _parse.caret;
return (0, _parse3.default)(input.value, undefined, this.parse);
// Apply the pending operation to the <input/> textual value (if any)
if (operation) {
var edit_result = (0, _edit2.default)(value, caret, operation);
value = edit_result.value;
caret = edit_result.caret;
}
}]);
return Input_controller;
}();
// Format the <input/> textual value as a phone number
// (and reposition the caret accordingly)
var format_result = (0, _format2.default)(value, caret, _this.format);
var text = format_result.text;
caret = format_result.caret;
// Set <input/> textual value manually to also set caret position
// and prevent React from resetting the caret position later
// inside subsequent `render()`.
// Doesn't work for custom `inputComponent`s for some reason.
input.value = text;
// Set caret position (with the neccessary adjustments)
(0, _dom.setCaretPosition)(input, caret);
// <input/> textual value may have been changed,
// so `value` may have been changed too.
_this.on_change(value);
};
};
exports.default = Input_controller;
//# sourceMappingURL=input controller.js.map

119

build/react input.js

@@ -7,2 +7,6 @@ 'use strict';

var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

@@ -12,6 +16,2 @@

var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

@@ -71,44 +71,4 @@

_this.store_instance = function (instance) {
_this.input = instance;
};
_initialiseProps.call(_this);
_this.get_input_element = function () {
return _reactDom2.default.findDOMNode(_this.input);
};
_this.on_blur = function (event) {
var onBlur = _this.props.onBlur;
// This `onBlur` interceptor is a workaround for `redux-form`,
// so that it gets the right (parsed, not the formatted one)
// `event.target.value` in its `onBlur` handler.
if (onBlur) {
var _event = (0, _extends3.default)({}, event, {
target: (0, _extends3.default)({}, event.target, {
value: _this.input_controller.getParsedValue().value
})
});
// For `redux-form` event detection.
// https://github.com/erikras/redux-form/blob/v5/src/events/isEvent.js
_event.stopPropagation = event.stopPropagation;
_event.preventDefault = event.preventDefault;
onBlur(_event);
}
};
_this.on_key_down = function (event) {
var onKeyDown = _this.props.onKeyDown;
if (onKeyDown) {
onKeyDown(event);
}
_this.input_controller.onKeyDown(event);
};
var _this$props = _this.props,

@@ -134,4 +94,11 @@ parse = _this$props.parse,

// `React.createElement()` would work in this case
// but it would also introduce a caret reset bug:
// the caret position would reset on each input.
// The origins of this bug are unknown, they may be
// somehow related to the `ref` property and that's why
// `inputComponent` is called here as a function
// so that the `ref` property is not intercepted by React.
return _react2.default.createElement(inputComponent, (0, _extends3.default)({}, rest, {
return inputComponent((0, _extends3.default)({}, rest, {
ref: this.store_instance,

@@ -168,4 +135,9 @@ value: format(is_empty(value) ? '' : value).text,

// Custom `<input/>` may be supplied
inputComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]).isRequired,
// Custom `<input/>` may be supplied.
// Must be a React stateless functional component
// (i.e. must be a function of `props` returning a React element).
// Such custom component must also make sure that
// the `ref` property passed as part of `props`
// is landed on the actual `<input/>` component.
inputComponent: _propTypes2.default.func.isRequired,

@@ -191,3 +163,5 @@ // `<input/>` `type` attribute

// Render basic `<input/>` component by default
inputComponent: 'input',
inputComponent: function inputComponent(props) {
return _react2.default.createElement('input', props);
},

@@ -197,2 +171,49 @@ // `<input/>` `type` attribute

};
var _initialiseProps = function _initialiseProps() {
var _this2 = this;
this.store_instance = function (instance) {
_this2.input = instance;
};
this.get_input_element = function () {
return _reactDom2.default.findDOMNode(_this2.input);
};
this.on_blur = function (event) {
var onBlur = _this2.props.onBlur;
// This `onBlur` interceptor is a workaround for `redux-form`,
// so that it gets the right (parsed, not the formatted one)
// `event.target.value` in its `onBlur` handler.
if (onBlur) {
var _event = (0, _extends3.default)({}, event, {
target: (0, _extends3.default)({}, event.target, {
value: _this2.input_controller.getParsedValue().value
})
});
// For `redux-form` event detection.
// https://github.com/erikras/redux-form/blob/v5/src/events/isEvent.js
_event.stopPropagation = event.stopPropagation;
_event.preventDefault = event.preventDefault;
onBlur(_event);
}
};
this.on_key_down = function (event) {
var onKeyDown = _this2.props.onKeyDown;
if (onKeyDown) {
onKeyDown(event);
}
_this2.input_controller.onKeyDown(event);
};
};
exports.default = ReactInput;

@@ -199,0 +220,0 @@

196

es6/input controller.js

@@ -13,2 +13,4 @@ import _classCallCheck from 'babel-runtime/helpers/classCallCheck';

_initialiseProps.call(this);
if (typeof get_input_element !== 'function') {

@@ -27,8 +29,2 @@ (function () {

this.on_change = on_change;
this.onCut = this.onCut.bind(this);
this.onPaste = this.onPaste.bind(this);
this.onChange = this.onChange.bind(this);
this.onKeyDown = this.onKeyDown.bind(this);
this.format_input_text = this.format_input_text.bind(this);
}

@@ -40,66 +36,13 @@

_createClass(Input_controller, [{
key: 'onCut',
value: function onCut(event) {
setTimeout(this.format_input_text, 0);
}
}, {
key: 'onPaste',
value: function onPaste(event) {
var input = this.get_input_element();
// Intercepts "Delete" and "Backspace" keys
// (hitting "Delete" or "Backspace"
// at any caret position should always result in
// erasing a digit)
var selection = getSelection(input);
// If selection is made,
// just erase the selected text
// prior to pasting
if (selection) {
this.erase_selection(input, selection);
}
_createClass(Input_controller, [{
key: 'erase_selection',
this.format_input_text();
}
}, {
key: 'onChange',
value: function onChange(event) {
this.format_input_text();
}
// Intercepts "Delete" and "Backspace" keys
// (hitting "Delete" or "Backspace"
// at any caret position should always result in
// erasing a digit)
}, {
key: 'onKeyDown',
value: function onKeyDown(event) {
var operation = getOperation(event);
switch (operation) {
case 'Delete':
case 'Backspace':
// Intercept this operation and perform it manually.
event.preventDefault();
var input = this.get_input_element();
var selection = getSelection(input);
// If selection is made,
// just erase the selected text,
// and don't apply any more operations to it.
if (selection) {
this.erase_selection(input, selection);
return this.format_input_text();
}
// Else, perform the (character erasing) operation manually
return this.format_input_text(operation);
}
}
// Erases the selected text inside an `<input/>`
}, {
key: 'erase_selection',
value: function erase_selection(input, selection) {

@@ -118,57 +61,110 @@ var text = input.value;

}, {
key: 'format_input_text',
value: function format_input_text(operation) {
key: 'getParsedValue',
// Parses `<input/>` text
value: function getParsedValue() {
// <input/> DOM element
var input = this.get_input_element();
var _parse = parse(input.value, getCaretPosition(input), this.parse),
value = _parse.value,
caret = _parse.caret;
return parse(input.value, undefined, this.parse);
}
}]);
// Apply the pending operation to the <input/> textual value (if any)
return Input_controller;
}();
var _initialiseProps = function _initialiseProps() {
var _this = this;
if (operation) {
var edit_result = edit(value, caret, operation);
this.onCut = function (event) {
setTimeout(_this.format_input_text, 0);
};
value = edit_result.value;
caret = edit_result.caret;
}
this.onPaste = function (event) {
var input = _this.get_input_element();
// Format the <input/> textual value as a phone number
// (and reposition the caret accordingly)
var selection = getSelection(input);
var format_result = format(value, caret, this.format);
// If selection is made,
// just erase the selected text
// prior to pasting
if (selection) {
_this.erase_selection(input, selection);
}
var text = format_result.text;
caret = format_result.caret;
_this.format_input_text();
};
// Set <input/> textual value manually to also set caret position
// and prevent React from resetting the caret position later
// inside subsequent `render()`.
input.value = text;
// Set caret position (with the neccessary adjustments)
setCaretPosition(input, caret);
this.onChange = function (event) {
_this.format_input_text();
};
// <input/> textual value may have been changed,
// so `value` may have been changed too.
this.on_change(value);
this.onKeyDown = function (event) {
var operation = getOperation(event);
switch (operation) {
case 'Delete':
case 'Backspace':
// Intercept this operation and perform it manually.
event.preventDefault();
var input = _this.get_input_element();
var selection = getSelection(input);
// If selection is made,
// just erase the selected text,
// and don't apply any more operations to it.
if (selection) {
_this.erase_selection(input, selection);
return _this.format_input_text();
}
// Else, perform the (character erasing) operation manually
return _this.format_input_text(operation);
}
};
// Parses `<input/>` text
this.format_input_text = function (operation) {
// <input/> DOM element
var input = _this.get_input_element();
}, {
key: 'getParsedValue',
value: function getParsedValue() {
// <input/> DOM element
var input = this.get_input_element();
var _parse = parse(input.value, getCaretPosition(input), _this.parse),
value = _parse.value,
caret = _parse.caret;
return parse(input.value, undefined, this.parse);
// Apply the pending operation to the <input/> textual value (if any)
if (operation) {
var edit_result = edit(value, caret, operation);
value = edit_result.value;
caret = edit_result.caret;
}
}]);
return Input_controller;
}();
// Format the <input/> textual value as a phone number
// (and reposition the caret accordingly)
var format_result = format(value, caret, _this.format);
var text = format_result.text;
caret = format_result.caret;
// Set <input/> textual value manually to also set caret position
// and prevent React from resetting the caret position later
// inside subsequent `render()`.
// Doesn't work for custom `inputComponent`s for some reason.
input.value = text;
// Set caret position (with the neccessary adjustments)
setCaretPosition(input, caret);
// <input/> textual value may have been changed,
// so `value` may have been changed too.
_this.on_change(value);
};
};
export default Input_controller;
//# sourceMappingURL=input controller.js.map

115

es6/react input.js

@@ -0,3 +1,3 @@

import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _extends from 'babel-runtime/helpers/extends';
import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';

@@ -31,44 +31,4 @@ import _classCallCheck from 'babel-runtime/helpers/classCallCheck';

_this.store_instance = function (instance) {
_this.input = instance;
};
_initialiseProps.call(_this);
_this.get_input_element = function () {
return ReactDOM.findDOMNode(_this.input);
};
_this.on_blur = function (event) {
var onBlur = _this.props.onBlur;
// This `onBlur` interceptor is a workaround for `redux-form`,
// so that it gets the right (parsed, not the formatted one)
// `event.target.value` in its `onBlur` handler.
if (onBlur) {
var _event = _extends({}, event, {
target: _extends({}, event.target, {
value: _this.input_controller.getParsedValue().value
})
});
// For `redux-form` event detection.
// https://github.com/erikras/redux-form/blob/v5/src/events/isEvent.js
_event.stopPropagation = event.stopPropagation;
_event.preventDefault = event.preventDefault;
onBlur(_event);
}
};
_this.on_key_down = function (event) {
var onKeyDown = _this.props.onKeyDown;
if (onKeyDown) {
onKeyDown(event);
}
_this.input_controller.onKeyDown(event);
};
var _this$props = _this.props,

@@ -94,3 +54,12 @@ parse = _this$props.parse,

return React.createElement(inputComponent, _extends({}, rest, {
// `React.createElement()` would work in this case
// but it would also introduce a caret reset bug:
// the caret position would reset on each input.
// The origins of this bug are unknown, they may be
// somehow related to the `ref` property and that's why
// `inputComponent` is called here as a function
// so that the `ref` property is not intercepted by React.
return inputComponent(_extends({}, rest, {
ref: this.store_instance,

@@ -128,4 +97,9 @@ value: format(is_empty(value) ? '' : value).text,

// Custom `<input/>` may be supplied
inputComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
// Custom `<input/>` may be supplied.
// Must be a React stateless functional component
// (i.e. must be a function of `props` returning a React element).
// Such custom component must also make sure that
// the `ref` property passed as part of `props`
// is landed on the actual `<input/>` component.
inputComponent: PropTypes.func.isRequired,

@@ -151,3 +125,5 @@ // `<input/>` `type` attribute

// Render basic `<input/>` component by default
inputComponent: 'input',
inputComponent: function inputComponent(props) {
return React.createElement('input', props);
},

@@ -157,2 +133,49 @@ // `<input/>` `type` attribute

};
var _initialiseProps = function _initialiseProps() {
var _this2 = this;
this.store_instance = function (instance) {
_this2.input = instance;
};
this.get_input_element = function () {
return ReactDOM.findDOMNode(_this2.input);
};
this.on_blur = function (event) {
var onBlur = _this2.props.onBlur;
// This `onBlur` interceptor is a workaround for `redux-form`,
// so that it gets the right (parsed, not the formatted one)
// `event.target.value` in its `onBlur` handler.
if (onBlur) {
var _event = _extends({}, event, {
target: _extends({}, event.target, {
value: _this2.input_controller.getParsedValue().value
})
});
// For `redux-form` event detection.
// https://github.com/erikras/redux-form/blob/v5/src/events/isEvent.js
_event.stopPropagation = event.stopPropagation;
_event.preventDefault = event.preventDefault;
onBlur(_event);
}
};
this.on_key_down = function (event) {
var onKeyDown = _this2.props.onKeyDown;
if (onKeyDown) {
onKeyDown(event);
}
_this2.input_controller.onKeyDown(event);
};
};
export default ReactInput;

@@ -159,0 +182,0 @@

2

package.json
{
"name": "input-format",
"version": "0.1.10",
"version": "0.1.11",
"description": "Formatting user's text input on-the-fly",

@@ -5,0 +5,0 @@ "main": "index.common.js",

build/input controller.js.map

Sorry, the diff of this file is not supported yet

build/react input.js.map

Sorry, the diff of this file is not supported yet

es6/input controller.js.map

Sorry, the diff of this file is not supported yet

es6/react input.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc