Skip to content

Commit

Permalink
Refactor #1484 - Improve InputNumber implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertsincan
mertsincan committed Aug 11, 2020
1 parent 5a0fbbe commit 14d68bd
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 47 deletions.
43 changes: 21 additions & 22 deletions src/components/inputnumber/InputNumber.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,49 +2,47 @@
display: inline-flex;
}

.p-inputnumber-button-up,
.p-inputnumber-button-down {
.p-inputnumber-button {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}

.p-inputnumber-input {
flex: 1 1 auto;
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label {
display: none;
}

.p-inputnumber-buttons-stacked .p-inputnumber-button-up {
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 0;
}

.p-inputnumber-buttons-stacked .p-inputnumber-input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.p-inputnumber-buttons-stacked .p-inputnumber-button-down {
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
padding: 0;
}

.p-inputnumber-buttons-stacked .p-inputnumber-button-group {
display: flex;
flex-direction: column;
}

.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-inputnumber-button {
.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {
flex: 1 1 auto;
}

.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-inputnumber-button .p-inputnumber-button-icon {
font-size: inherit;
}

.p-inputnumber-buttons-horizontal .p-inputnumber-button-up {
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {
order: 3;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
Expand All @@ -55,7 +53,7 @@
border-radius: 0;
}

.p-inputnumber-buttons-horizontal .p-inputnumber-button-down {
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {
order: 1;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
Expand All @@ -65,12 +63,11 @@
flex-direction: column;
}

.p-inputnumber-buttons-vertical .p-inputnumber-button-up {
.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up {
order: 1;
flex: 1 1 auto;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
width: auto;
width: 100%;
}

.p-inputnumber-buttons-vertical .p-inputnumber-input {
Expand All @@ -79,12 +76,15 @@
text-align: center;
}

.p-inputnumber-buttons-vertical .p-inputnumber-button-down {
.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down {
order: 3;
flex: 1 1 auto;
border-top-left-radius: 0;
border-top-right-radius: 0;
width: auto;
width: 100%;
}

.p-inputnumber-input {
flex: 1 1 auto;
}

.p-fluid .p-inputnumber {
Expand All @@ -95,7 +95,6 @@
width: 1%;
}

.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input,
.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-button {
.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
width: 100%;
}
}
56 changes: 31 additions & 25 deletions src/components/inputnumber/InputNumber.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ export class InputNumber extends Component {
buttonLayout: 'stacked',
incrementButtonClassName: null,
decrementButtonClassName: null,
incrementButtonIcon: 'pi pi-caret-up',
decrementButtonIcon: 'pi pi-caret-down',
incrementButtonIcon: 'pi pi-angle-up',
decrementButtonIcon: 'pi pi-angle-down',
locale: undefined,
localeMatcher: undefined,
mode: 'decimal',
Expand Down Expand Up @@ -104,6 +104,10 @@ export class InputNumber extends Component {
constructor(props) {
super(props);

this.state = {
focused: false
};

this.constructParser();

this.onInput = this.onInput.bind(this);
Expand Down Expand Up @@ -711,23 +715,25 @@ export class InputNumber extends Component {
}

onInputFocus(event) {
this.focus = true;

if (this.props.onFocus) {
this.props.onFocus(event);
}
event.persist();
this.setState({ focused: true }, () => {
if (this.props.onFocus) {
this.props.onFocus(event);
}
});
}

onInputBlur(event) {
this.focus = false;

let newValue = this.validateValue(this.parseValue(this.inputEl.value));
this.updateInputValue(newValue);
this.updateModel(event, newValue);
event.persist();
this.setState({ focused: false }, () => {
let newValue = this.validateValue(this.parseValue(this.inputEl.value));
this.updateInputValue(newValue);
this.updateModel(event, newValue);

if (this.props.onBlur) {
this.props.onBlur(event);
}
if (this.props.onBlur) {
this.props.onBlur(event);
}
});
}

clearTimer() {
Expand Down Expand Up @@ -812,10 +818,10 @@ export class InputNumber extends Component {
}

renderUpButton() {
const className = classNames("p-inputnumber-button p-inputnumber-button-up p-button p-button-icon-only p-component", this.props.incrementButtonClassName, {
const className = classNames('p-inputnumber-button p-inputnumber-button-up p-button p-button-icon-only p-component', {
'p-disabled': this.props.disabled
});
const icon = classNames('p-inputnumber-button-icon', this.props.incrementButtonIcon);
}, this.props.incrementButtonClassName);
const icon = classNames('p-button-icon', this.props.incrementButtonIcon);

return (
<button type="button" className={className} onMouseLeave={this.onUpButtonMouseLeave} onMouseDown={this.onUpButtonMouseDown} onMouseUp={this.onUpButtonMouseUp}
Expand All @@ -826,10 +832,10 @@ export class InputNumber extends Component {
}

renderDownButton() {
const className = classNames("p-inputnumber-button p-inputnumber-button-down p-button p-button-icon-only p-component", this.props.decrementButtonClassName, {
const className = classNames('p-inputnumber-button p-inputnumber-button-down p-button p-button-icon-only p-component', {
'p-disabled': this.props.disabled
});
const icon = classNames('p-inputnumber-button-icon', this.props.decrementButtonIcon);
}, this.props.decrementButtonClassName);
const icon = classNames('p-button-icon', this.props.decrementButtonIcon);

return (
<button type="button" className={className} onMouseLeave={this.onDownButtonMouseLeave} onMouseDown={this.onDownButtonMouseDown} onMouseUp={this.onDownButtonMouseUp}
Expand All @@ -853,17 +859,17 @@ export class InputNumber extends Component {
}

return (
<React.Fragment>
<>
{upButton}
{downButton}
</React.Fragment>
</>
)
}

render() {
const className = classNames('p-inputnumber p-component', this.props.className, {
'p-inputwrapper-filled': this.props.value != null,
'p-inputwrapper-focus': this.focus,
'p-inputwrapper-filled': this.props.value != null && this.props.value.toString().length > 0,
'p-inputwrapper-focus': this.state.focused,
'p-inputnumber-buttons-stacked': this.isStacked(),
'p-inputnumber-buttons-horizontal': this.isHorizontal(),
'p-inputnumber-buttons-vertical': this.isVertical()
Expand Down

0 comments on commit 14d68bd

Please sign in to comment.