styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
81 lines (80 loc) • 3.67 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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NumericUpDown = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const grommet_1 = require("grommet");
const react_1 = require("react");
const numeric_box_1 = require("../numeric-box");
const grommet_icons_1 = require("grommet-icons");
const long_press_button_1 = require("../long-press-button");
const UpDownButton = (_a) => {
var { icon, onClick, changeTreshold } = _a, rest = __rest(_a, ["icon", "onClick", "changeTreshold"]);
return (jsx_runtime_1.jsx(long_press_button_1.LongPressButton, Object.assign({ plain: true, primary: true }, rest, { whilePress: onClick, onClick: onClick, pressCallbackTreshold: changeTreshold }, { children: jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ direction: "row", justify: "center", pad: "xxsmall" }, { children: icon }), void 0) }), void 0));
};
const NumericUpDown = (props) => {
let { onChange, changeTreshold = 100, minValue, maxValue, value: initialValue, } = props;
let [value, setValue] = react_1.useState(1);
react_1.useEffect(() => {
setValue(initialValue !== null && initialValue !== void 0 ? initialValue : 0);
}, [initialValue]);
const notifyValue = (val) => {
onChange && onChange(val);
};
const handleUp = () => {
setValue((v) => {
if (maxValue !== undefined && v >= maxValue) {
notifyValue(v);
return v;
}
v++;
notifyValue(v);
return v;
});
};
const handleDown = () => {
setValue((v) => {
if (minValue !== undefined && v <= minValue) {
notifyValue(v);
return v;
}
v--;
notifyValue(v);
return v;
});
};
const handleInputChage = (valStr) => {
let val = 0;
if (!valStr) {
val = 0;
}
else {
val = parseInt(valStr);
if ((minValue !== undefined && val < minValue) ||
(maxValue !== undefined && val > maxValue)) {
val =
Math.abs(minValue - val) < Math.abs(maxValue - val)
? minValue
: maxValue;
}
}
setValue(val);
notifyValue(val);
};
return (jsx_runtime_1.jsxs(grommet_1.Box, Object.assign({ align: "center" }, { children: [jsx_runtime_1.jsx(grommet_1.Box, { children: jsx_runtime_1.jsx(UpDownButton, { icon: jsx_runtime_1.jsx(grommet_icons_1.FormUp, { color: "light-1" }, void 0), onClick: handleUp, changeTreshold: changeTreshold }, void 0) }, void 0),
jsx_runtime_1.jsx(numeric_box_1.NumericBox, { value: value,
//@ts-ignore
onChange: handleInputChage, textAlign: "center" }, void 0),
jsx_runtime_1.jsx(grommet_1.Box, { children: jsx_runtime_1.jsx(UpDownButton, { icon: jsx_runtime_1.jsx(grommet_icons_1.FormDown, { color: "light-1" }, void 0), onClick: handleDown, changeTreshold: changeTreshold }, void 0) }, void 0)] }), void 0));
};
exports.NumericUpDown = NumericUpDown;