Skip to content

Commit

Permalink
Fixed #228, Fixed #229
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici committed Dec 6, 2017
1 parent 0e1a367 commit b44d0ef
Showing 1 changed file with 89 additions and 34 deletions.
123 changes: 89 additions & 34 deletions src/components/spinner/Spinner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,23 @@ export class Spinner extends Component {
if (Math.floor(this.props.step) === 0) {
this.precision = this.props.step.toString().split(/[,]|[.]/)[1].length;
}

this.onInputKeyUp = this.onInputKeyUp.bind(this);
this.onInputKeyDown = this.onInputKeyDown.bind(this);
this.onInputKeyPress = this.onInputKeyPress.bind(this);
this.onChange = this.onChange.bind(this);

this.onUpButtonMouseLeave = this.onUpButtonMouseLeave.bind(this);
this.onUpButtonMouseDown = this.onUpButtonMouseDown.bind(this);
this.onUpButtonMouseUp = this.onUpButtonMouseUp.bind(this);
this.onUpButtonKeyDown = this.onUpButtonKeyDown.bind(this);
this.onUpButtonKeyUp = this.onUpButtonKeyUp.bind(this);

this.onDownButtonMouseLeave = this.onDownButtonMouseLeave.bind(this);
this.onDownButtonMouseDown = this.onDownButtonMouseDown.bind(this);
this.onDownButtonMouseUp = this.onDownButtonMouseUp.bind(this);
this.onDownButtonKeyDown = this.onDownButtonKeyDown.bind(this);
this.onDownButtonKeyUp = this.onDownButtonKeyUp.bind(this);
}

repeat(interval, dir) {
Expand Down Expand Up @@ -94,50 +111,76 @@ export class Spinner extends Component {
return String(Math.round(value * power) / power);
}

onUpButtonMousedown(event, input) {
onUpButtonMouseDown(event) {
if (!this.props.disabled) {
input.focus();
this.inputEl.focus();
this.repeat(null, 1);
this.updateFilledState();
event.preventDefault();
}
}

onUpButtonMouseup(event) {
onUpButtonMouseUp(event) {
if (!this.props.disabled) {
this.clearTimer();
}
}

onUpButtonMouseLeave(event) {
if (!this.props.disabled) {
this.clearTimer();
}
}

onUpButtonMouseleave(event) {
onUpButtonKeyUp(event) {
if (!this.props.disabled) {
this.clearTimer();
}
}

onDownButtonMousedown(event, input) {
onUpButtonKeyDown(event) {
if (event.which === 32 || event.which === 13) {
this.repeat(null, 1);
this.updateFilledState();
}
}

onDownButtonMouseDown(event, focusInput) {
if (!this.props.disabled) {
input.focus();
this.inputEl.focus();
this.repeat(null, -1);
this.updateFilledState();

event.preventDefault();
}
}

onDownButtonMouseup(event) {
onDownButtonMouseUp(event) {
if (!this.props.disabled) {
this.clearTimer();
}
}

onDownButtonMouseLeave(event) {
if (!this.props.disabled) {
this.clearTimer();
}
}

onDownButtonMouseleave(event) {
onDownButtonKeyUp(event) {
if (!this.props.disabled) {
this.clearTimer();
}
}

onDownButtonKeyDown(event) {
if(event.which === 32 || event.which === 13) {
this.repeat(null, -1);
this.updateFilledState();
}
}

onInputKeydown(event) {
onInputKeyDown(event) {
if (event.which === 38) {
this.spin(1);
event.preventDefault();
Expand All @@ -156,7 +199,8 @@ export class Spinner extends Component {
}
}

onInput(event, inputValue) {
onInputKeyUp(event) {
let inputValue = event.target.value;
this.value = this.parseValue(inputValue);
this.formatValue();
this.inputEl.value = this.valueAsString;
Expand All @@ -170,14 +214,6 @@ export class Spinner extends Component {
this.updateFilledState();
}

onBlur() {
this.focus = false;
}

onFocus() {
this.focus = true;
}

parseValue(val) {
let value;
val = val.split(this.props.thousandSeparator).join('');
Expand Down Expand Up @@ -220,7 +256,7 @@ export class Spinner extends Component {
}
}

handleChange() {
onChange() {
if (this.props.onChange) {
this.props.onChange({
value: this.value
Expand Down Expand Up @@ -248,27 +284,46 @@ export class Spinner extends Component {
this.inputEl.value = this.valueAsString;
}

render() {
renderInputElement() {
return (
<InputText ref={(el) => this.inputEl = ReactDOM.findDOMNode(el)} type="text" className="ui-spinner-input"
size={this.props.size} maxLength={this.props.maxlength} disabled={this.props.disabled} readOnly={this.props.readonly}
onKeyDown={this.onInputKeydown} onKeyUp={this.onInputKeyUp} onKeyPress={this.onInputKeyPress}
onBlur={this.onInputBlur} onChange={this.onChange} onFocus={this.onInputFocus} />
);
}

var className = classNames("ui-spinner ui-widget ui-corner-all"),
upButtonClass = classNames("ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default", {
'ui-state-disabled': this.props.disabled
}),
downButtonClass = classNames("ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default", {
renderUpButton() {
let className = classNames("ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default", {
'ui-state-disabled': this.props.disabled
});

var inputElement = <InputText ref={(el) => this.inputEl = ReactDOM.findDOMNode(el)} type="text" className="ui-spinner-input"
size={this.props.size} maxLength={this.props.maxlength} disabled={this.props.disabled} readOnly={this.props.readonly}
onKeyDown={this.onInputKeydown.bind(this)} onKeyUp={(e) => this.onInput(e, this.inputEl.value)} onKeyPress={this.onInputKeyPress.bind(this)} onBlur={this.onBlur.bind(this)} onChange={this.handleChange.bind(this)} onFocus={this.onFocus.bind(this)} />;
return (
<button type="button" className={className} onMouseLeave={this.onUpButtonMouseLeave} onMouseDown={this.onUpButtonMouseDown} onMouseUp={this.onUpButtonMouseUp}
onKeyDown={this.onUpButtonKeyDown} onKeyUp={this.onUpButtonKeyUp} disabled={this.props.disabled}>
<span className="fa fa-caret-up"></span>
</button>
);
}

var upButton = <button type="button" className={upButtonClass} onMouseLeave={this.onUpButtonMouseleave.bind(this)} onMouseDown={(e) => this.onUpButtonMousedown(e, this.inputEl)} onMouseUp={this.onUpButtonMouseup.bind(this)} disabled={this.props.disabled}>
<span className="fa fa-caret-up"></span>
</button>;
renderDownButton() {
let className = classNames("ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default", {
'ui-state-disabled': this.props.disabled
});

var downButton = <button type="button" className={downButtonClass} onMouseLeave={this.onDownButtonMouseleave.bind(this)} onMouseDown={(e) => this.onDownButtonMousedown(e, this.inputEl)} onMouseUp={this.onDownButtonMouseup.bind(this)} disabled={this.props.disabled}>
<span className="fa fa-caret-down"></span>
</button>;
return (
<button type="button" className={className} onMouseLeave={this.onDownButtonMouseLeave} onMouseDown={this.onDownButtonMouseDown} onMouseUp={this.onDownButtonMouseUp}
onKeyDown={this.onDownButtonKeyDown} onKeyUp={this.onDownButtonKeyUp} disabled={this.props.disabled}>
<span className="fa fa-caret-down"></span>
</button>
);
}

render() {
let className = classNames("ui-spinner ui-widget ui-corner-all");
let inputElement = this.renderInputElement();
let upButton = this.renderUpButton();
let downButton = this.renderDownButton();

return (
<span id={this.props.id} className={className} style={this.props.style}>
Expand Down

0 comments on commit b44d0ef

Please sign in to comment.