lole-ui
Version:
React UI Component which like a love letter
87 lines (86 loc) • 3.89 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { useRef, useState } from "react";
import classNames from 'classnames';
var InputNumber = function (props) {
var _a;
var value = props.value, className = props.className, disabled = props.disabled, defaultValue = props.defaultValue, onChange = props.onChange, _b = props.min, min = _b === void 0 ? 0 : _b, _c = props.max, max = _c === void 0 ? 100 : _c, _d = props.step, step = _d === void 0 ? 1 : _d, bordered = props.bordered, addAfter = props.addAfter, addBefore = props.addBefore, height = props.height, status = props.status, onClickAdd = props.onClickAdd, onClickSub = props.onClickSub, restProps = __rest(props, ["value", "className", "disabled", "defaultValue", "onChange", "min", "max", "step", "bordered", "addAfter", "addBefore", "height", "status", "onClickAdd", "onClickSub"]);
var inputNumberRef = useRef(null);
//const tp = defaultValue as number;
var tp = function () {
var temp = defaultValue;
if (temp > max)
temp = max;
else if (temp < min)
temp = min;
return temp;
};
var _e = useState(tp), count = _e[0], setCount = _e[1];
var _f = useState(min), preCount = _f[0], setPreCount = _f[1];
var add = function (e) {
setPreCount(count);
var at = count + step;
var num = at > max ? max : at;
setCount(num);
if (onClickAdd) {
onClickAdd(e, num);
}
};
var sub = function (e) {
setPreCount(count);
var st = count - step;
var num = st < min ? min : st;
setCount(num);
if (onClickSub) {
onClickSub(e, num);
}
};
var changeHandle = function (e) {
setPreCount(count);
var ct = parseInt(e.target.value);
if (isNaN(ct)) {
ct = preCount;
}
if (ct < min)
setCount(min);
else if (ct > max)
setCount(max);
else
setCount(ct);
if (onChange) {
onChange(e);
}
};
var classes = classNames('input-number', className, (_a = {
'is-disabled': disabled,
'is-bordered': !bordered
},
_a["input-".concat(height)] = height,
_a["input-theme-".concat(status)] = status,
_a));
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: classes },
React.createElement("button", { className: 'input-number-down', disabled: disabled, onClick: sub, value: count }, "-"),
React.createElement("div", { className: 'inner-wrapper' },
React.createElement("div", { className: 'input-number-addBefore' }, addBefore),
React.createElement("input", { placeholder: String(defaultValue), disabled: disabled, className: 'input-number-input-wrap', value: count, onChange: changeHandle, ref: inputNumberRef }),
React.createElement("div", { className: 'input-number-addAfter' }, addAfter)),
React.createElement("button", { className: 'input-number-up', disabled: disabled, onClick: add, value: count }, "+"))));
};
InputNumber.defaultProps = {
defaultValue: 0,
disabled: false,
bordered: true,
height: 'normal',
status: 'default',
};
export default InputNumber;