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

package/README.md

@@ -118,29 +118,6 @@ function App() {
 />
 ```
 
-### Calculator オプション
-
-```tsx
-<Calculator
-  isOpen={isOpen}
-  onClose={() => setIsOpen(false)}
-  onCalculate={handleCalculate}
-  // 税計算の有効/無効
-  enableTaxCalculation={false}
-  // 小数点以下の桁数
-  decimalPlaces={2}
-  // 数値フォーマットオプション
-  numberFormatOptions={{
-    thousandSeparator: true,
-    allowNegative: false,
-    allowLeadingZeros: false,
-    decimalScale: 2,
-    prefix: "¥",
-    suffix: ""
-  }}
-/>
-```
-
 ## 🔗 react-number-format対応
 
 このプラグインは**react-number-format**ライブラリと完全に統合されており、豊富な数値フォーマット機能を提供します。
@@ -200,8 +177,6 @@ react-number-formatの**すべてのプロパティ**が利用可能です。詳
 
 ## 📋 Props
 
-### CalculatorInputForm Props
-
 | プロパティ | 型 | 必須 | デフォルト | 説明 |
 |------------|----|------|------------|------|
 | `value` | string | ✓ | - | 入力値 |
@@ -214,23 +189,8 @@ react-number-formatの**すべてのプロパティ**が利用可能です。詳
 | `decimalPlaces` | number | | 6 | 小数点以下の最大桁数 |
 | `numberFormatOptions` | object | | {} | 数値フォーマットの詳細設定 |
 
-### Calculator Props
-
-| プロパティ | 型 | 必須 | デフォルト | 説明 |
-|------------|----|------|------------|------|
-| `isOpen` | boolean | ✓ | - | 電卓の表示/非表示 |
-| `onClose` | () => void | ✓ | - | 電卓を閉じる時のコールバック |
-| `onCalculate` | (value: string) => void | ✓ | - | 計算完了時のコールバック |
-| `initialValue` | string | | "" | 初期値 |
-| `title` | string | | "金額入力" | モーダルのタイトル |
-| `description` | string | | "税込・税抜や小数計算に対応" | モーダルの説明文 |
-| `enableTaxCalculation` | boolean | | true | 税計算機能の有効/無効 |
-| `decimalPlaces` | number | | 6 | 小数点以下の最大桁数 |
-| `numberFormatOptions` | object | | {} | 数値フォーマットの詳細設定（react-number-formatの全オプションが利用可能） |
-
 ## ⌨️ キーボードショートカット
 
-- `0-9`: 数字入力
 - `+`, `-`, `*`, `/`: 演算子
 - `Enter`, `=`: 計算実行
 - `Escape`: 電卓を閉じる

package/dist/components/organisms/Calculator.d.ts

@@ -10,4 +10,4 @@ export interface CalculatorProps {
     numberFormatOptions?: any;
     placeholder?: string;
 }
-export declare const Calculator: ({ isOpen, onClose, onCalculate, initialValue, title, description, enableTaxCalculation, decimalPlaces, numberFormatOptions, }: CalculatorProps) => import("react").ReactPortal | null;
+export declare const Calculator: ({ isOpen, onClose, onCalculate, initialValue, title, description, enableTaxCalculation, decimalPlaces, numberFormatOptions, placeholder, }: CalculatorProps) => import("react").ReactPortal | null;

package/dist/index.esm.js

@@ -6379,7 +6379,7 @@ function NumericFormat(props) {
 }
 
 const CalculatorDisplay = ({ value, error, inputRef, editable, placeholder, onChange, numberFormatOptions = {} }) => {
-    return (jsxs(Fragment, { children: [editable ? (jsx(NumericFormat, { className: "calculator-display-input", value: value, onValueChange: (vals) => onChange?.(vals.value), placeholder: placeholder ?? '数値を入力', inputMode: "decimal", ...numberFormatOptions })) : (jsx("div", { className: "calculator-display-input", children: jsx("div", { ref: inputRef, style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: value ? (jsx(NumericFormat, { value: value, displayType: "text", ...numberFormatOptions })) : '' }) })), error && jsx("div", { className: "calculator-error", children: error })] }));
+    return (jsxs(Fragment, { children: [editable ? (jsx(NumericFormat, { className: "calculator-display-input", value: value, onValueChange: (vals) => onChange?.(vals.value), placeholder: placeholder ?? '数値を入力', inputMode: "decimal", ...numberFormatOptions })) : (jsx("div", { className: "calculator-display-input", children: jsx("div", { ref: inputRef, style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: value ? (jsx(NumericFormat, { value: value, displayType: "text", ...numberFormatOptions })) : (jsx("span", { className: "text-gray-400", children: placeholder ?? '0' })) }) })), error && jsx("div", { className: "calculator-error", children: error })] }));
 };
 
 const CalculatorKeypad = ({ onButtonClick, onEqual, onDecide, onTaxInclude, onTaxExclude, enableTaxCalculation = true, decimalPlaces = 6 }) => {
@@ -6446,11 +6446,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] = useState(initialValue || '');
+const Calculator = ({ isOpen, onClose, onCalculate, initialValue = '', title, description, enableTaxCalculation = false, decimalPlaces = 6, numberFormatOptions = {}, placeholder, }) => {
+    const [expression, setExpression] = useState(initialValue || '');
+    const [displayValue, setDisplayValue] = useState(initialValue || '');
     const [error, setError] = useState('');
+    const [isWaitingForOperand, setIsWaitingForOperand] = useState(false);
     const [mounted, setMounted] = useState(false);
     const inputRef = useRef(null);
     // DOM要素の存在確認
@@ -6460,7 +6460,9 @@ const Calculator = ({ isOpen, onClose, onCalculate, initialValue = '', title, de
     }, []);
     useEffect(() => {
         if (isOpen) {
-            setInput(initialValue || '');
+            setExpression(initialValue || '');
+            setDisplayValue(initialValue || '');
+            setIsWaitingForOperand(false);
             setError('');
         }
     }, [isOpen, initialValue]);
@@ -6504,84 +6506,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 = (jsx("div", { className: "calculator-overlay", children: jsxs("div", { className: "calculator-modal", children: [title || description ? (jsxs("div", { className: "calculator-header", children: [jsxs("div", { children: [title && jsx("h2", { className: "calculator-title", children: title }), description && jsx("p", { className: "calculator-subtitle", children: description })] }), jsx("button", { onClick: onClose, className: "calculator-close-button", "aria-label": "\u9589\u3058\u308B", children: jsx(Icon, { icon: faTimes, className: "w-5 h-5" }) })] })) : (jsxs("div", { className: "calculator-header", children: [jsx("div", {}), jsx("button", { onClick: onClose, className: "calculator-close-button", "aria-label": "\u9589\u3058\u308B", children: jsx(Icon, { icon: faTimes, className: "w-5 h-5" }) })] })), jsx("div", { className: "calculator-display", children: jsx(CalculatorDisplay, { value: input, error: error, inputRef: inputRef, editable: true, onChange: (v) => setInput(v), numberFormatOptions: numberFormatOptions }) }), jsx(CalculatorKeypad, { onButtonClick: handleButtonClick, onEqual: handleEqual, onDecide: handleDecide, onTaxInclude: handleTaxInclude, onTaxExclude: handleTaxExclude, enableTaxCalculation: enableTaxCalculation, decimalPlaces: decimalPlaces })] }) }));
+    const modal = (jsx("div", { className: "calculator-overlay", children: jsxs("div", { className: "calculator-modal", children: [title || description ? (jsxs("div", { className: "calculator-header", children: [jsxs("div", { children: [title && jsx("h2", { className: "calculator-title", children: title }), description && jsx("p", { className: "calculator-subtitle", children: description })] }), jsx("button", { onClick: onClose, className: "calculator-close-button", "aria-label": "\u9589\u3058\u308B", children: jsx(Icon, { icon: faTimes, className: "w-5 h-5" }) })] })) : (jsxs("div", { className: "calculator-header", children: [jsx("div", {}), jsx("button", { onClick: onClose, className: "calculator-close-button", "aria-label": "\u9589\u3058\u308B", children: jsx(Icon, { icon: faTimes, className: "w-5 h-5" }) })] })), jsx("div", { className: "calculator-display", children: jsx(CalculatorDisplay, { value: displayValue, error: error, inputRef: inputRef, editable: true, onChange: handleDisplayChange, numberFormatOptions: numberFormatOptions, placeholder: placeholder }) }), jsx(CalculatorKeypad, { onButtonClick: handleButtonClick, onEqual: handleEqual, onDecide: handleDecide, onTaxInclude: handleTaxInclude, onTaxExclude: handleTaxExclude, enableTaxCalculation: enableTaxCalculation, decimalPlaces: decimalPlaces })] }) }));
     // DOM要素の存在確認を行ってからポータルを作成
     if (typeof document !== 'undefined' && document.body) {
         return createPortal(modal, document.body);