@gumigumih/react-calculator-input-form 1.1.2 → 1.1.4

package/dist/index.js

@@ -6381,7 +6381,7 @@ function NumericFormat(props) {
 }
 
 const CalculatorDisplay = ({ value, error, inputRef, editable, placeholder, onChange, numberFormatOptions = {} }) => {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [editable ? (jsxRuntime.jsx(NumericFormat, { className: "calculator-display-input", value: value, onValueChange: (vals) => onChange?.(vals.value), placeholder: placeholder ?? '数値を入力', inputMode: "decimal", ...numberFormatOptions })) : (jsxRuntime.jsx("div", { className: "calculator-display-input", children: jsxRuntime.jsx("div", { ref: inputRef, style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: value ? (jsxRuntime.jsx(NumericFormat, { value: value, displayType: "text", ...numberFormatOptions })) : '' }) })), error && jsxRuntime.jsx("div", { className: "calculator-error", children: error })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [editable ? (jsxRuntime.jsx(NumericFormat, { className: "calculator-display-input", value: value, onValueChange: (vals) => onChange?.(vals.value), placeholder: placeholder ?? '数値を入力', inputMode: "decimal", ...numberFormatOptions })) : (jsxRuntime.jsx("div", { className: "calculator-display-input", children: jsxRuntime.jsx("div", { ref: inputRef, style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: value ? (jsxRuntime.jsx(NumericFormat, { value: value, displayType: "text", ...numberFormatOptions })) : (jsxRuntime.jsx("span", { className: "text-gray-400", children: placeholder ?? '0' })) }) })), error && jsxRuntime.jsx("div", { className: "calculator-error", children: error })] }));
 };
 
 const CalculatorKeypad = ({ onButtonClick, onEqual, onDecide, onTaxInclude, onTaxExclude, enableTaxCalculation = true, decimalPlaces = 6 }) => {
@@ -6448,11 +6448,11 @@ function calculateExpression(expr) {
         return '0';
     }
 }
-const Calculator = ({ isOpen, onClose, onCalculate, initialValue = '', title, description, enableTaxCalculation = false, decimalPlaces = 6, numberFormatOptions = {},
-// placeholder removed - not used
- }) => {
-    const [input, setInput] = React.useState(initialValue || '');
+const Calculator = ({ isOpen, onClose, onCalculate, initialValue = '', title, description, enableTaxCalculation = false, decimalPlaces = 6, numberFormatOptions = {}, placeholder, }) => {
+    const [expression, setExpression] = React.useState(initialValue || '');
+    const [displayValue, setDisplayValue] = React.useState(initialValue || '');
     const [error, setError] = React.useState('');
+    const [isWaitingForOperand, setIsWaitingForOperand] = React.useState(false);
     const [mounted, setMounted] = React.useState(false);
     const inputRef = React.useRef(null);
     // DOM要素の存在確認
@@ -6462,7 +6462,9 @@ const Calculator = ({ isOpen, onClose, onCalculate, initialValue = '', title, de
     }, []);
     React.useEffect(() => {
         if (isOpen) {
-            setInput(initialValue || '');
+            setExpression(initialValue || '');
+            setDisplayValue(initialValue || '');
+            setIsWaitingForOperand(false);
             setError('');
         }
     }, [isOpen, initialValue]);
@@ -6506,84 +6508,136 @@ const Calculator = ({ isOpen, onClose, onCalculate, initialValue = '', title, de
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [isOpen, input]);
+    }, [isOpen, expression, displayValue]);
+    const handleDisplayChange = (newValue) => {
+        setError('');
+        setDisplayValue(newValue);
+        if (isWaitingForOperand) {
+            // 演算子入力後の直接入力の場合、式を更新しない
+            // If an operator was just entered, and user types directly,
+            // the new value is the start of the next operand.
+            // Append it to the expression.
+            setExpression(expression + newValue);
+            setIsWaitingForOperand(false); // No longer waiting for operand
+        }
+        else {
+            // 既存の式の最後の数値を置き換える
+            const newExpression = expression.replace(/[\d.]+$/, newValue);
+            setExpression(newExpression);
+        }
+    };
     const handleButtonClick = (val) => {
         setError('');
         if (val === 'C') {
-            setInput('');
+            setExpression('');
+            setDisplayValue('');
+            setIsWaitingForOperand(false);
         }
         else if (val === '←') {
-            setInput((prev) => prev.slice(0, -1));
+            if (displayValue.length > 0) {
+                const newDisplayValue = displayValue.slice(0, -1);
+                setDisplayValue(newDisplayValue);
+                setExpression((prev) => prev.slice(0, -1));
+            }
         }
         else if (val === '.') {
-            setInput((prev) => {
-                if (!prev)
-                    return '0.';
-                const lastSegment = prev.split(/[+\-×÷]/).pop() || '';
-                if (lastSegment.includes('.'))
-                    return prev;
-                return prev + '.';
-            });
+            if (!displayValue.includes('.')) {
+                const newDisplayValue = displayValue ? displayValue + '.' : '0.';
+                setDisplayValue(newDisplayValue);
+                if (isWaitingForOperand) {
+                    setExpression(expression + newDisplayValue);
+                    setIsWaitingForOperand(false);
+                }
+                else {
+                    setExpression(expression + (displayValue ? '.' : '0.'));
+                    // Append decimal to the last number in the expression
+                    const lastNumberRegex = /([\d.]+)$/;
+                    setExpression(expression.replace(lastNumberRegex, (match) => match + '.'));
+                }
+            }
         }
         else if (['+', '-', '×', '÷'].includes(val)) {
-            if (!input || /[+\-×÷]$/.test(input))
-                return;
-            setInput((prev) => prev + val);
+            if (expression) {
+                if (/[+\-×÷]$/.test(expression)) {
+                    setExpression(expression.slice(0, -1) + val);
+                }
+                else {
+                    const result = calculateExpression(expression);
+                    setExpression(result + val);
+                    setDisplayValue(result);
+                }
+                setIsWaitingForOperand(true);
+            }
         }
         else {
-            setInput((prev) => (prev === '0' ? val : prev + val));
+            if (isWaitingForOperand) {
+                setDisplayValue(val);
+                setExpression(expression + val);
+                setIsWaitingForOperand(false);
+            }
+            else {
+                const newDisplayValue = displayValue === '0' ? val : displayValue + val;
+                setDisplayValue(newDisplayValue);
+                setExpression(expression === '0' ? val : expression + val);
+            }
         }
     };
     const handleEqual = () => {
-        if (!input)
+        if (!expression)
             return;
-        const result = calculateExpression(input);
-        setInput(result);
+        const result = calculateExpression(expression);
+        setExpression(result);
+        setDisplayValue(result);
+        setIsWaitingForOperand(false);
     };
     const handleDecide = () => {
-        if (!input) {
+        if (!expression) {
             setError('金額を入力してください');
             return;
         }
-        const result = calculateExpression(input);
+        const result = calculateExpression(expression);
         onCalculate(result);
         onClose();
     };
     const handleTaxInclude = (rate) => {
         if (!enableTaxCalculation)
             return;
-        if (!input) {
+        if (!expression) {
             setError('金額を入力してください');
             return;
         }
-        const currentValue = parseFloat(calculateExpression(input));
+        const currentValue = parseFloat(calculateExpression(expression));
         if (isNaN(currentValue)) {
             setError('有効な金額を入力してください');
             return;
         }
         const taxIncluded = currentValue * (1 + rate);
-        setInput(normalizeNumberString(taxIncluded, decimalPlaces));
+        const result = normalizeNumberString(taxIncluded, decimalPlaces);
+        setExpression(result);
+        setDisplayValue(result);
         setError('');
     };
     const handleTaxExclude = (rate) => {
         if (!enableTaxCalculation)
             return;
-        if (!input) {
+        if (!expression) {
             setError('金額を入力してください');
             return;
         }
-        const currentValue = parseFloat(calculateExpression(input));
+        const currentValue = parseFloat(calculateExpression(expression));
         if (isNaN(currentValue)) {
             setError('有効な金額を入力してください');
             return;
         }
         const taxExcluded = currentValue / (1 + rate);
-        setInput(normalizeNumberString(taxExcluded, decimalPlaces));
+        const result = normalizeNumberString(taxExcluded, decimalPlaces);
+        setExpression(result);
+        setDisplayValue(result);
         setError('');
     };
     if (!isOpen || !mounted)
         return null;
-    const modal = (jsxRuntime.jsx("div", { className: "calculator-overlay", children: jsxRuntime.jsxs("div", { className: "calculator-modal", children: [title || description ? (jsxRuntime.jsxs("div", { className: "calculator-header", children: [jsxRuntime.jsxs("div", { children: [title && jsxRuntime.jsx("h2", { className: "calculator-title", children: title }), description && jsxRuntime.jsx("p", { className: "calculator-subtitle", children: description })] }), jsxRuntime.jsx("button", { onClick: onClose, className: "calculator-close-button", "aria-label": "\u9589\u3058\u308B", children: jsxRuntime.jsx(Icon, { icon: faTimes, className: "w-5 h-5" }) })] })) : (jsxRuntime.jsxs("div", { className: "calculator-header", children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx("button", { onClick: onClose, className: "calculator-close-button", "aria-label": "\u9589\u3058\u308B", children: jsxRuntime.jsx(Icon, { icon: faTimes, className: "w-5 h-5" }) })] })), jsxRuntime.jsx("div", { className: "calculator-display", children: jsxRuntime.jsx(CalculatorDisplay, { value: input, error: error, inputRef: inputRef, editable: true, onChange: (v) => setInput(v), numberFormatOptions: numberFormatOptions }) }), jsxRuntime.jsx(CalculatorKeypad, { onButtonClick: handleButtonClick, onEqual: handleEqual, onDecide: handleDecide, onTaxInclude: handleTaxInclude, onTaxExclude: handleTaxExclude, enableTaxCalculation: enableTaxCalculation, decimalPlaces: decimalPlaces })] }) }));
+    const modal = (jsxRuntime.jsx("div", { className: "calculator-overlay", children: jsxRuntime.jsxs("div", { className: "calculator-modal", children: [title || description ? (jsxRuntime.jsxs("div", { className: "calculator-header", children: [jsxRuntime.jsxs("div", { children: [title && jsxRuntime.jsx("h2", { className: "calculator-title", children: title }), description && jsxRuntime.jsx("p", { className: "calculator-subtitle", children: description })] }), jsxRuntime.jsx("button", { onClick: onClose, className: "calculator-close-button", "aria-label": "\u9589\u3058\u308B", children: jsxRuntime.jsx(Icon, { icon: faTimes, className: "w-5 h-5" }) })] })) : (jsxRuntime.jsxs("div", { className: "calculator-header", children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx("button", { onClick: onClose, className: "calculator-close-button", "aria-label": "\u9589\u3058\u308B", children: jsxRuntime.jsx(Icon, { icon: faTimes, className: "w-5 h-5" }) })] })), jsxRuntime.jsx("div", { className: "calculator-display", children: jsxRuntime.jsx(CalculatorDisplay, { value: displayValue, error: error, inputRef: inputRef, editable: true, onChange: handleDisplayChange, numberFormatOptions: numberFormatOptions, placeholder: placeholder }) }), jsxRuntime.jsx(CalculatorKeypad, { onButtonClick: handleButtonClick, onEqual: handleEqual, onDecide: handleDecide, onTaxInclude: handleTaxInclude, onTaxExclude: handleTaxExclude, enableTaxCalculation: enableTaxCalculation, decimalPlaces: decimalPlaces })] }) }));
     // DOM要素の存在確認を行ってからポータルを作成
     if (typeof document !== 'undefined' && document.body) {
         return reactDom.createPortal(modal, document.body);