Skip to content

Commit

Permalink
[Issue-173] Fix reactjs onBlur, onFocus rawValue issue
Browse files Browse the repository at this point in the history
  • Loading branch information
@nosir
nosir committed Jul 8, 2017
1 parent 5c6e92e commit 0ebfdad
Show file tree
Hide file tree
Showing 7 changed files with 100 additions and 40 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"form",
"input"
],
"version": "0.7.23",
"version": "0.8.0",
"author": {
"name": "Max Huang",
"email": "[email protected]",
Expand Down
2 changes: 1 addition & 1 deletion dist/cleave-angular.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

67 changes: 50 additions & 17 deletions dist/cleave-react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,12 +104,16 @@ return /******/ (function(modules) { // webpackBootstrap
var options = _owner$props.options;
var onKeyDown = _owner$props.onKeyDown;
var onChange = _owner$props.onChange;
var onFocus = _owner$props.onFocus;
var onBlur = _owner$props.onBlur;
var onInit = _owner$props.onInit;


owner.registeredEvents = {
onInit: onInit || Util.noop,
onChange: onChange || Util.noop,
onFocus: onFocus || Util.noop,
onBlur: onBlur || Util.noop,
onKeyDown: onKeyDown || Util.noop
};

Expand Down Expand Up @@ -199,6 +203,24 @@ return /******/ (function(modules) { // webpackBootstrap
owner.onChange({ target: { value: value } });
},

getRawValue: function getRawValue() {
var owner = this,
pps = owner.properties,
rawValue = pps.result;

if (pps.rawValueTrimPrefix) {
rawValue = Util.getPrefixStrippedValue(rawValue, pps.prefix, pps.prefixLength);
}

if (pps.numeral) {
rawValue = pps.numeralFormatter.getRawValue(rawValue);
} else {
rawValue = Util.stripDelimiters(rawValue, pps.delimiter, pps.delimiters);
}

return rawValue;
},

onInit: function onInit(owner) {
return owner;
},
Expand All @@ -218,26 +240,33 @@ return /******/ (function(modules) { // webpackBootstrap
owner.registeredEvents.onKeyDown(event);
},

onChange: function onChange(event) {
onFocus: function onFocus(event) {
var owner = this,
pps = owner.properties,
rawValue;
pps = owner.properties;

owner.onInput(event.target.value);
event.target.rawValue = owner.getRawValue();
event.target.value = pps.result;

rawValue = pps.result;
owner.registeredEvents.onFocus(event);
},

if (pps.rawValueTrimPrefix) {
rawValue = Util.getPrefixStrippedValue(rawValue, pps.prefix, pps.prefixLength);
}
onBlur: function onBlur(event) {
var owner = this,
pps = owner.properties;

if (pps.numeral) {
rawValue = pps.numeralFormatter.getRawValue(rawValue);
} else {
rawValue = Util.stripDelimiters(rawValue, pps.delimiter, pps.delimiters);
}
event.target.rawValue = owner.getRawValue();
event.target.value = pps.result;

owner.registeredEvents.onBlur(event);
},

onChange: function onChange(event) {
var owner = this,
pps = owner.properties;

owner.onInput(event.target.value);

event.target.rawValue = rawValue;
event.target.rawValue = owner.getRawValue();
event.target.value = pps.result;

owner.registeredEvents.onChange(event);
Expand Down Expand Up @@ -368,20 +397,24 @@ return /******/ (function(modules) { // webpackBootstrap
var value = _owner$props2.value;
var options = _owner$props2.options;
var onKeyDown = _owner$props2.onKeyDown;
var onFocus = _owner$props2.onFocus;
var onBlur = _owner$props2.onBlur;
var onChange = _owner$props2.onChange;
var onInit = _owner$props2.onInit;
var htmlRef = _owner$props2.htmlRef;

var propsToTransfer = _objectWithoutProperties(_owner$props2, ['value', 'options', 'onKeyDown', 'onChange', 'onInit', 'htmlRef']);
var propsToTransfer = _objectWithoutProperties(_owner$props2, ['value', 'options', 'onKeyDown', 'onFocus', 'onBlur', 'onChange', 'onInit', 'htmlRef']);

return React.createElement('input', _extends({
type: 'text',
ref: htmlRef,
value: owner.state.value,
onKeyDown: owner.onKeyDown,
onChange: owner.onChange
onChange: owner.onChange,
onFocus: owner.onFocus,
onBlur: owner.onBlur
}, propsToTransfer, {
'data-cleave-ignore': [value, options, onKeyDown, onChange, onInit, htmlRef]
'data-cleave-ignore': [value, options, onFocus, onBlur, onKeyDown, onChange, onInit, htmlRef]
}));
}
});
Expand Down
4 changes: 2 additions & 2 deletions dist/cleave-react.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/cleave.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"form",
"input"
],
"version": "0.7.23",
"version": "0.8.0",
"author": {
"name": "Max Huang",
"url": "http://github.com/nosir",
Expand Down
61 changes: 44 additions & 17 deletions src/Cleave.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,13 @@ var Cleave = CreateReactClass({

getInitialState: function () {
var owner = this,
{ value, options, onKeyDown, onChange, onInit } = owner.props;
{ value, options, onKeyDown, onChange, onFocus, onBlur, onInit } = owner.props;

owner.registeredEvents = {
onInit: onInit || Util.noop,
onChange: onChange || Util.noop,
onFocus: onFocus || Util.noop,
onBlur: onBlur || Util.noop,
onKeyDown: onKeyDown || Util.noop
};

Expand Down Expand Up @@ -143,6 +145,23 @@ var Cleave = CreateReactClass({
owner.onChange({target: {value: value}});
},

getRawValue: function () {
var owner = this, pps = owner.properties,
rawValue = pps.result;

if (pps.rawValueTrimPrefix) {
rawValue = Util.getPrefixStrippedValue(rawValue, pps.prefix, pps.prefixLength);
}

if (pps.numeral) {
rawValue = pps.numeralFormatter.getRawValue(rawValue);
} else {
rawValue = Util.stripDelimiters(rawValue, pps.delimiter, pps.delimiters);
}

return rawValue;
},

onInit: function (owner) {
return owner;
},
Expand All @@ -162,25 +181,31 @@ var Cleave = CreateReactClass({
owner.registeredEvents.onKeyDown(event);
},

onChange: function (event) {
var owner = this, pps = owner.properties,
rawValue;
onFocus: function (event) {
var owner = this, pps = owner.properties;

owner.onInput(event.target.value);
event.target.rawValue = owner.getRawValue();
event.target.value = pps.result;

rawValue = pps.result;
owner.registeredEvents.onFocus(event);
},

if (pps.rawValueTrimPrefix) {
rawValue = Util.getPrefixStrippedValue(rawValue, pps.prefix, pps.prefixLength);
}
onBlur: function (event) {
var owner = this, pps = owner.properties;

if (pps.numeral) {
rawValue = pps.numeralFormatter.getRawValue(rawValue);
} else {
rawValue = Util.stripDelimiters(rawValue, pps.delimiter, pps.delimiters);
}
event.target.rawValue = owner.getRawValue();
event.target.value = pps.result;

owner.registeredEvents.onBlur(event);
},


onChange: function (event) {
var owner = this, pps = owner.properties;

owner.onInput(event.target.value);

event.target.rawValue = rawValue;
event.target.rawValue = owner.getRawValue();
event.target.value = pps.result;

owner.registeredEvents.onChange(event);
Expand Down Expand Up @@ -305,7 +330,7 @@ var Cleave = CreateReactClass({

render: function () {
var owner = this,
{ value, options, onKeyDown, onChange, onInit, htmlRef, ...propsToTransfer } = owner.props;
{ value, options, onKeyDown, onFocus, onBlur, onChange, onInit, htmlRef, ...propsToTransfer } = owner.props;

return (
<input
Expand All @@ -314,8 +339,10 @@ var Cleave = CreateReactClass({
value={owner.state.value}
onKeyDown={owner.onKeyDown}
onChange={owner.onChange}
onFocus={owner.onFocus}
onBlur={owner.onBlur}
{...propsToTransfer}
data-cleave-ignore={[value, options, onKeyDown, onChange, onInit, htmlRef]}
data-cleave-ignore={[value, options, onFocus, onBlur, onKeyDown, onChange, onInit, htmlRef]}
/>
);
}
Expand Down

0 comments on commit 0ebfdad

Please sign in to comment.