quantumai-design-system
Version:
퀀텀에이아이의 디자인 시스템
52 lines (51 loc) • 5.19 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
import { forwardRef, useEffect, useState } from 'react';
import InputBasic from './InputBasic';
import styled from '@emotion/styled';
import Icons from '../../../Base/Icon/Icons';
import { COLORS } from '../../../../styles/theme';
var InputNumber = forwardRef(function (_a, ref) {
var _b;
var onChange = _a.onChange, onBlur = _a.onBlur, value = _a.value, _c = _a.max, max = _c === void 0 ? Infinity : _c, _d = _a.min, min = _d === void 0 ? -Infinity : _d, _e = _a.step, step = _e === void 0 ? 1 : _e, props = __rest(_a, ["onChange", "onBlur", "value", "max", "min", "step"]);
var _f = useState((_b = Number(value)) !== null && _b !== void 0 ? _b : min), numberValue = _f[0], setNumberValue = _f[1];
var numberToRange = function (value) { return Math.max(Math.min(value, +max), +min); };
var handleMinusClick = function () { return setNumberValue(function (prev) { return numberToRange(prev - +step); }); };
var handlePlusClick = function () { return setNumberValue(function (prev) { return numberToRange(prev + +step); }); };
var inputChange = function (e) {
setNumberValue(Number(e.target.value));
onChange === null || onChange === void 0 ? void 0 : onChange(e);
};
useEffect(function () {
setNumberValue(numberToRange(Number(numberValue)));
}, [numberValue]);
return (_jsxs(_Fragment, { children: [_jsx(InputNumberCustom, __assign({ type: "number", ref: ref, value: String(numberValue), onChange: inputChange, max: max, min: min, step: step, handleChangeValue: function (callbackFn) { return callbackFn(isNaN(numberValue) ? '' : numberValue); } }, props)), _jsxs("div", { className: "button-group", children: [_jsx("button", { type: "button", onClick: handleMinusClick, children: _jsx(Icons, { name: "minus" }) }), _jsx("button", { type: "button", onClick: handlePlusClick, children: _jsx(Icons, { name: "plus" }) })] })] }));
});
export default InputNumber;
var InputNumberCustom = styled(InputBasic)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n padding-right: 65px;\n\n & + .button-group {\n display: inline-flex;\n gap: 1px;\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n border-radius: 4px;\n overflow: hidden;\n\n svg {\n fill: ", ";\n }\n\n button {\n padding: 0 10px;\n /* outline: none; */\n\n &:not(:last-of-type) {\n position: relative;\n\n &::after {\n content: '';\n position: absolute;\n right: -1px;\n top: 50%;\n transform: translateY(-50%);\n width: 1px;\n height: 100%;\n max-height: 20px;\n background-color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n }\n }\n"], ["\n ::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n padding-right: 65px;\n\n & + .button-group {\n display: inline-flex;\n gap: 1px;\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n border-radius: 4px;\n overflow: hidden;\n\n svg {\n fill: ", ";\n }\n\n button {\n padding: 0 10px;\n /* outline: none; */\n\n &:not(:last-of-type) {\n position: relative;\n\n &::after {\n content: '';\n position: absolute;\n right: -1px;\n top: 50%;\n transform: translateY(-50%);\n width: 1px;\n height: 100%;\n max-height: 20px;\n background-color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n }\n }\n"])), COLORS.coolgrey4, COLORS.grey5, COLORS.grey2, COLORS.grey3);
var templateObject_1;