@gumigumih/react-calculator-input-form 2.0.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +238 -238
- package/dist/components/atoms/Button.d.ts +0 -0
- package/dist/components/atoms/Icon.d.ts +0 -0
- package/dist/components/molecules/CalculatorDisplay.d.ts +1 -1
- package/dist/components/molecules/CalculatorKeypad.d.ts +0 -0
- package/dist/components/organisms/Calculator.d.ts +0 -0
- package/dist/components/organisms/CalculatorInputForm.d.ts +0 -0
- package/dist/components/organisms/calculatorUtils.d.ts +0 -0
- package/dist/components/organisms/useCalculatorController.d.ts +3 -1
- package/dist/constants/colors.d.ts +0 -0
- package/dist/index.d.ts +0 -0
- package/dist/index.esm.js +61 -19
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +61 -19
- package/dist/index.js.map +1 -1
- package/dist/styles/calculator.css +414 -414
- package/package.json +100 -100
package/README.md
CHANGED
|
@@ -1,190 +1,190 @@
|
|
|
1
|
-
# 🧮 React Calculator Input Form Plugin
|
|
2
|
-
|
|
3
|
-
[](https://badge.fury.io/js/@gumigumih/react-calculator-input-form)
|
|
4
|
-
[](https://opensource.org/licenses/MIT)
|
|
5
|
-
[](https://www.typescriptlang.org/)
|
|
6
|
-
[](https://reactjs.org/)
|
|
7
|
-
[](https://reactjs.org/)
|
|
8
|
-
|
|
9
|
-
> **React専用電卓入力フォームプラグイン** - 税込税抜計算機能付きで、あらゆる金額入力シーンに対応！
|
|
10
|
-
|
|
11
|
-
## ✨ 特徴
|
|
12
|
-
|
|
13
|
-
- ⚛️ **React専用プラグイン**（React 18+完全対応）
|
|
14
|
-
- 🧮 **基本的な電卓機能**（四則演算）
|
|
15
|
-
- 💰 **税込計算**（8%、10%）
|
|
16
|
-
- 📊 **税抜計算**（8%、10%）
|
|
17
|
-
- 🔢 **小数点以下対応**
|
|
18
|
-
- 📈 **3桁区切り表示**
|
|
19
|
-
- 🔗 **react-number-format完全対応**（通貨記号、カスタムフォーマット等）
|
|
20
|
-
- ⌨️ **キーボードショートカット対応**
|
|
1
|
+
# 🧮 React Calculator Input Form Plugin
|
|
2
|
+
|
|
3
|
+
[](https://badge.fury.io/js/@gumigumih/react-calculator-input-form)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
[](https://www.typescriptlang.org/)
|
|
6
|
+
[](https://reactjs.org/)
|
|
7
|
+
[](https://reactjs.org/)
|
|
8
|
+
|
|
9
|
+
> **React専用電卓入力フォームプラグイン** - 税込税抜計算機能付きで、あらゆる金額入力シーンに対応！
|
|
10
|
+
|
|
11
|
+
## ✨ 特徴
|
|
12
|
+
|
|
13
|
+
- ⚛️ **React専用プラグイン**（React 18+完全対応）
|
|
14
|
+
- 🧮 **基本的な電卓機能**（四則演算）
|
|
15
|
+
- 💰 **税込計算**（8%、10%）
|
|
16
|
+
- 📊 **税抜計算**（8%、10%）
|
|
17
|
+
- 🔢 **小数点以下対応**
|
|
18
|
+
- 📈 **3桁区切り表示**
|
|
19
|
+
- 🔗 **react-number-format完全対応**（通貨記号、カスタムフォーマット等）
|
|
20
|
+
- ⌨️ **キーボードショートカット対応**
|
|
21
21
|
- 🔧 **TypeScript対応**
|
|
22
22
|
- ⚙️ **カスタマイズ可能なオプション設定**
|
|
23
23
|
- 🎨 **スタイルの自動読み込み**（別途CSSファイルの読み込み不要）
|
|
24
|
-
|
|
25
|
-
## 🚀 インストール
|
|
26
|
-
|
|
27
|
-
```bash
|
|
24
|
+
|
|
25
|
+
## 🚀 インストール
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
28
|
npm install @gumigumih/react-calculator-input-form
|
|
29
29
|
```
|
|
30
30
|
|
|
31
31
|
あわせて `react`, `react-dom`, `react-number-format` が必要です。
|
|
32
|
-
|
|
33
|
-
```bash
|
|
34
|
-
yarn add @gumigumih/react-calculator-input-form
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
```bash
|
|
38
|
-
pnpm add @gumigumih/react-calculator-input-form
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
## 🎯 クイックスタート
|
|
42
|
-
|
|
43
|
-
### 最も簡単な使用方法（推奨）
|
|
44
|
-
|
|
45
|
-
```tsx
|
|
46
|
-
import { CalculatorInputForm } from '@gumigumih/react-calculator-input-form';
|
|
47
|
-
|
|
48
|
-
function App() {
|
|
49
|
-
const [amount, setAmount] = useState('');
|
|
50
|
-
|
|
51
|
-
return (
|
|
52
|
-
<div>
|
|
53
|
-
<CalculatorInputForm
|
|
54
|
-
value={amount}
|
|
55
|
-
onChange={setAmount}
|
|
56
|
-
title="金額入力"
|
|
57
|
-
description="税込・税抜や小数計算に対応"
|
|
58
|
-
className="w-full px-3 py-2 border border-gray-300 rounded-md"
|
|
59
|
-
placeholder="クリックして金額を入力"
|
|
60
|
-
/>
|
|
61
|
-
<p>金額: {amount}円</p>
|
|
62
|
-
</div>
|
|
63
|
-
);
|
|
64
|
-
}
|
|
65
|
-
```
|
|
66
|
-
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
yarn add @gumigumih/react-calculator-input-form
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
pnpm add @gumigumih/react-calculator-input-form
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## 🎯 クイックスタート
|
|
42
|
+
|
|
43
|
+
### 最も簡単な使用方法（推奨）
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
import { CalculatorInputForm } from '@gumigumih/react-calculator-input-form';
|
|
47
|
+
|
|
48
|
+
function App() {
|
|
49
|
+
const [amount, setAmount] = useState('');
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<div>
|
|
53
|
+
<CalculatorInputForm
|
|
54
|
+
value={amount}
|
|
55
|
+
onChange={setAmount}
|
|
56
|
+
title="金額入力"
|
|
57
|
+
description="税込・税抜や小数計算に対応"
|
|
58
|
+
className="w-full px-3 py-2 border border-gray-300 rounded-md"
|
|
59
|
+
placeholder="クリックして金額を入力"
|
|
60
|
+
/>
|
|
61
|
+
<p>金額: {amount}円</p>
|
|
62
|
+
</div>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
67
|
### 高度な使用方法
|
|
68
|
-
|
|
69
|
-
```tsx
|
|
70
|
-
import { Calculator } from '@gumigumih/react-calculator-input-form';
|
|
71
|
-
|
|
72
|
-
function App() {
|
|
73
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
74
|
-
const [amount, setAmount] = useState('');
|
|
75
|
-
|
|
76
|
-
const handleCalculate = (value: string) => {
|
|
77
|
-
setAmount(value);
|
|
78
|
-
setIsOpen(false);
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
return (
|
|
82
|
-
<div>
|
|
83
|
-
<button onClick={() => setIsOpen(true)}>電卓を開く</button>
|
|
84
|
-
<p>金額: {amount}</p>
|
|
85
|
-
|
|
86
|
-
<Calculator
|
|
87
|
-
isOpen={isOpen}
|
|
88
|
-
onClose={() => setIsOpen(false)}
|
|
89
|
-
onCalculate={handleCalculate}
|
|
90
|
-
initialValue={amount}
|
|
91
|
-
title="金額入力"
|
|
92
|
-
description="税込・税抜や小数計算に対応"
|
|
93
|
-
/>
|
|
94
|
-
</div>
|
|
95
|
-
);
|
|
96
|
-
}
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
## ⚙️ オプション設定
|
|
100
|
-
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
import { Calculator } from '@gumigumih/react-calculator-input-form';
|
|
71
|
+
|
|
72
|
+
function App() {
|
|
73
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
74
|
+
const [amount, setAmount] = useState('');
|
|
75
|
+
|
|
76
|
+
const handleCalculate = (value: string) => {
|
|
77
|
+
setAmount(value);
|
|
78
|
+
setIsOpen(false);
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
return (
|
|
82
|
+
<div>
|
|
83
|
+
<button onClick={() => setIsOpen(true)}>電卓を開く</button>
|
|
84
|
+
<p>金額: {amount}</p>
|
|
85
|
+
|
|
86
|
+
<Calculator
|
|
87
|
+
isOpen={isOpen}
|
|
88
|
+
onClose={() => setIsOpen(false)}
|
|
89
|
+
onCalculate={handleCalculate}
|
|
90
|
+
initialValue={amount}
|
|
91
|
+
title="金額入力"
|
|
92
|
+
description="税込・税抜や小数計算に対応"
|
|
93
|
+
/>
|
|
94
|
+
</div>
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## ⚙️ オプション設定
|
|
100
|
+
|
|
101
101
|
### CalculatorInputForm オプション
|
|
102
|
-
|
|
103
|
-
```tsx
|
|
104
|
-
<CalculatorInputForm
|
|
105
|
-
value={amount}
|
|
106
|
-
onChange={setAmount}
|
|
107
|
-
// 税計算の有効/無効
|
|
108
|
-
enableTaxCalculation={false}
|
|
109
|
-
// 小数点以下の桁数
|
|
110
|
-
decimalPlaces={2}
|
|
111
|
-
// 数値フォーマットオプション
|
|
112
|
-
numberFormatOptions={{
|
|
113
|
-
thousandSeparator: true, // 3桁区切り
|
|
114
|
-
allowNegative: false, // 負の値を許可
|
|
115
|
-
allowLeadingZeros: false, // 先頭の0を許可
|
|
116
|
-
decimalScale: 2, // 小数点以下の最大桁数
|
|
117
|
-
prefix: "¥", // 通貨記号（前）
|
|
118
|
-
suffix: "" // 通貨記号（後）
|
|
119
|
-
}}
|
|
120
|
-
/>
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
## 🔗 react-number-format対応
|
|
124
|
-
|
|
125
|
-
このプラグインは**react-number-format**ライブラリと完全に統合されており、豊富な数値フォーマット機能を提供します。
|
|
126
|
-
|
|
127
|
-
### 主要なフォーマット機能
|
|
128
|
-
|
|
129
|
-
- **通貨記号**: `prefix: "¥"`, `suffix: "$"` など
|
|
130
|
-
- **3桁区切り**: `thousandSeparator: true`
|
|
131
|
-
- **小数点制御**: `decimalScale: 2`, `allowDecimal: true`
|
|
132
|
-
- **負の値制御**: `allowNegative: true/false`
|
|
133
|
-
- **先頭ゼロ制御**: `allowLeadingZeros: true/false`
|
|
134
|
-
- **カスタム区切り文字**: `thousandSeparator: ","`, `decimalSeparator: "."`
|
|
135
|
-
|
|
136
|
-
### 使用例
|
|
137
|
-
|
|
138
|
-
```tsx
|
|
139
|
-
// 日本円フォーマット
|
|
140
|
-
<CalculatorInputForm
|
|
141
|
-
value={amount}
|
|
142
|
-
onChange={setAmount}
|
|
143
|
-
numberFormatOptions={{
|
|
144
|
-
prefix: "¥",
|
|
145
|
-
thousandSeparator: true,
|
|
146
|
-
decimalScale: 0,
|
|
147
|
-
allowNegative: false
|
|
148
|
-
}}
|
|
149
|
-
/>
|
|
150
|
-
|
|
151
|
-
// ドルフォーマット
|
|
152
|
-
<CalculatorInputForm
|
|
153
|
-
value={amount}
|
|
154
|
-
onChange={setAmount}
|
|
155
|
-
numberFormatOptions={{
|
|
156
|
-
prefix: "$",
|
|
157
|
-
thousandSeparator: ",",
|
|
158
|
-
decimalSeparator: ".",
|
|
159
|
-
decimalScale: 2,
|
|
160
|
-
suffix: " USD"
|
|
161
|
-
}}
|
|
162
|
-
/>
|
|
163
|
-
|
|
164
|
-
// パーセントフォーマット
|
|
165
|
-
<CalculatorInputForm
|
|
166
|
-
value={amount}
|
|
167
|
-
onChange={setAmount}
|
|
168
|
-
numberFormatOptions={{
|
|
169
|
-
suffix: "%",
|
|
170
|
-
decimalScale: 2,
|
|
171
|
-
allowNegative: false
|
|
172
|
-
}}
|
|
173
|
-
/>
|
|
174
|
-
```
|
|
175
|
-
|
|
176
|
-
### 利用可能な全オプション
|
|
177
|
-
|
|
178
|
-
react-number-formatの**すべてのプロパティ**が利用可能です。詳細は[公式ドキュメント](https://www.npmjs.com/package/react-number-format)をご覧ください。
|
|
179
|
-
|
|
180
|
-
## 📋 Props
|
|
181
|
-
|
|
182
|
-
| プロパティ | 型 | 必須 | デフォルト | 説明 |
|
|
183
|
-
|------------|----|------|------------|------|
|
|
184
|
-
| `value` | string | ✓ | - | 入力値 |
|
|
185
|
-
| `onChange` | (value: string) => void | ✓ | - | 値変更時のコールバック |
|
|
186
|
-
| `placeholder` | string | | "クリックして金額を入力" | プレースホルダーテキスト |
|
|
187
|
-
| `className` | string | | - | 入力フィールドのCSSクラス |
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
<CalculatorInputForm
|
|
105
|
+
value={amount}
|
|
106
|
+
onChange={setAmount}
|
|
107
|
+
// 税計算の有効/無効
|
|
108
|
+
enableTaxCalculation={false}
|
|
109
|
+
// 小数点以下の桁数
|
|
110
|
+
decimalPlaces={2}
|
|
111
|
+
// 数値フォーマットオプション
|
|
112
|
+
numberFormatOptions={{
|
|
113
|
+
thousandSeparator: true, // 3桁区切り
|
|
114
|
+
allowNegative: false, // 負の値を許可
|
|
115
|
+
allowLeadingZeros: false, // 先頭の0を許可
|
|
116
|
+
decimalScale: 2, // 小数点以下の最大桁数
|
|
117
|
+
prefix: "¥", // 通貨記号（前）
|
|
118
|
+
suffix: "" // 通貨記号（後）
|
|
119
|
+
}}
|
|
120
|
+
/>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
## 🔗 react-number-format対応
|
|
124
|
+
|
|
125
|
+
このプラグインは**react-number-format**ライブラリと完全に統合されており、豊富な数値フォーマット機能を提供します。
|
|
126
|
+
|
|
127
|
+
### 主要なフォーマット機能
|
|
128
|
+
|
|
129
|
+
- **通貨記号**: `prefix: "¥"`, `suffix: "$"` など
|
|
130
|
+
- **3桁区切り**: `thousandSeparator: true`
|
|
131
|
+
- **小数点制御**: `decimalScale: 2`, `allowDecimal: true`
|
|
132
|
+
- **負の値制御**: `allowNegative: true/false`
|
|
133
|
+
- **先頭ゼロ制御**: `allowLeadingZeros: true/false`
|
|
134
|
+
- **カスタム区切り文字**: `thousandSeparator: ","`, `decimalSeparator: "."`
|
|
135
|
+
|
|
136
|
+
### 使用例
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
// 日本円フォーマット
|
|
140
|
+
<CalculatorInputForm
|
|
141
|
+
value={amount}
|
|
142
|
+
onChange={setAmount}
|
|
143
|
+
numberFormatOptions={{
|
|
144
|
+
prefix: "¥",
|
|
145
|
+
thousandSeparator: true,
|
|
146
|
+
decimalScale: 0,
|
|
147
|
+
allowNegative: false
|
|
148
|
+
}}
|
|
149
|
+
/>
|
|
150
|
+
|
|
151
|
+
// ドルフォーマット
|
|
152
|
+
<CalculatorInputForm
|
|
153
|
+
value={amount}
|
|
154
|
+
onChange={setAmount}
|
|
155
|
+
numberFormatOptions={{
|
|
156
|
+
prefix: "$",
|
|
157
|
+
thousandSeparator: ",",
|
|
158
|
+
decimalSeparator: ".",
|
|
159
|
+
decimalScale: 2,
|
|
160
|
+
suffix: " USD"
|
|
161
|
+
}}
|
|
162
|
+
/>
|
|
163
|
+
|
|
164
|
+
// パーセントフォーマット
|
|
165
|
+
<CalculatorInputForm
|
|
166
|
+
value={amount}
|
|
167
|
+
onChange={setAmount}
|
|
168
|
+
numberFormatOptions={{
|
|
169
|
+
suffix: "%",
|
|
170
|
+
decimalScale: 2,
|
|
171
|
+
allowNegative: false
|
|
172
|
+
}}
|
|
173
|
+
/>
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### 利用可能な全オプション
|
|
177
|
+
|
|
178
|
+
react-number-formatの**すべてのプロパティ**が利用可能です。詳細は[公式ドキュメント](https://www.npmjs.com/package/react-number-format)をご覧ください。
|
|
179
|
+
|
|
180
|
+
## 📋 Props
|
|
181
|
+
|
|
182
|
+
| プロパティ | 型 | 必須 | デフォルト | 説明 |
|
|
183
|
+
|------------|----|------|------------|------|
|
|
184
|
+
| `value` | string | ✓ | - | 入力値 |
|
|
185
|
+
| `onChange` | (value: string) => void | ✓ | - | 値変更時のコールバック |
|
|
186
|
+
| `placeholder` | string | | "クリックして金額を入力" | プレースホルダーテキスト |
|
|
187
|
+
| `className` | string | | - | 入力フィールドのCSSクラス |
|
|
188
188
|
| `title` | string | | "金額入力" | モーダルのタイトル |
|
|
189
189
|
| `description` | string | | "税込・税抜や小数計算に対応" | モーダルの説明文 |
|
|
190
190
|
| `enableTaxCalculation` | boolean | | false | 税計算機能の有効/無効 |
|
|
@@ -229,13 +229,13 @@ import '@gumigumih/react-calculator-input-form/styles';
|
|
|
229
229
|
- `CalculatorKeypad`
|
|
230
230
|
|
|
231
231
|
内部実装寄りの `Button` / `Icon` は公開していません。
|
|
232
|
-
|
|
232
|
+
|
|
233
233
|
## ⌨️ キーボードショートカット
|
|
234
|
-
|
|
235
|
-
- `+`, `-`, `*`, `/`: 演算子
|
|
236
|
-
- `Enter`, `=`: 計算実行
|
|
237
|
-
- `Escape`: 電卓を閉じる
|
|
238
|
-
- `C`: クリア
|
|
234
|
+
|
|
235
|
+
- `+`, `-`, `*`, `/`: 演算子
|
|
236
|
+
- `Enter`, `=`: 計算実行
|
|
237
|
+
- `Escape`: 電卓を閉じる
|
|
238
|
+
- `C`: クリア
|
|
239
239
|
- `Backspace`: バックスペース
|
|
240
240
|
- `.`: 小数点入力
|
|
241
241
|
|
|
@@ -245,57 +245,57 @@ import '@gumigumih/react-calculator-input-form/styles';
|
|
|
245
245
|
`1 + 2 × 3` のような式は、数学の優先順位ではなく入力順に処理されます。
|
|
246
246
|
|
|
247
247
|
## 🎨 デモ
|
|
248
|
-
|
|
249
|
-
実際の動作を確認したい場合は、以下のドキュメントページをご覧ください：
|
|
250
|
-
|
|
251
|
-
```bash
|
|
252
|
-
# ルートディレクトリから
|
|
253
|
-
npm run docs:dev
|
|
254
|
-
|
|
255
|
-
# または、docsディレクトリ内で
|
|
256
|
-
cd docs
|
|
257
|
-
npm install
|
|
258
|
-
npm run dev
|
|
259
|
-
```
|
|
260
|
-
|
|
261
|
-
📚 **[詳細なドキュメントとデモはこちら](./docs/)**
|
|
262
|
-
|
|
263
|
-
## 🛠️ 開発
|
|
264
|
-
|
|
265
|
-
```bash
|
|
266
|
-
# 依存関係のインストール
|
|
267
|
-
npm install
|
|
268
|
-
|
|
269
|
-
# 開発モード
|
|
270
|
-
npm run dev
|
|
271
|
-
|
|
272
|
-
# ビルド
|
|
273
|
-
npm run build
|
|
274
|
-
```
|
|
275
|
-
|
|
276
|
-
📖 **[開発ルールとガイドライン](./DEVELOPMENT.md)**
|
|
277
|
-
|
|
278
|
-
### コミットメッセージのルール
|
|
279
|
-
このプロジェクトでは、セマンティックコミットメッセージを使用しています：
|
|
280
|
-
|
|
281
|
-
- `feat:` - 新機能追加
|
|
282
|
-
- `fix:` - バグ修正
|
|
283
|
-
- `docs:` - ドキュメント更新
|
|
284
|
-
- `style:` - コードスタイル変更
|
|
285
|
-
- `refactor:` - リファクタリング
|
|
286
|
-
- `test:` - テスト追加・修正
|
|
287
|
-
- `chore:` - その他の変更
|
|
288
|
-
|
|
289
|
-
詳細は[開発ルール](./DEVELOPMENT.md)をご覧ください。
|
|
290
|
-
|
|
291
|
-
## 📄 ライセンス
|
|
292
|
-
|
|
293
|
-
MIT License - 詳細は [LICENSE](LICENSE) ファイルをご覧ください。
|
|
294
|
-
|
|
295
|
-
## 🤝 コントリビューション
|
|
296
|
-
|
|
297
|
-
バグ報告や機能要望、プルリクエストを歓迎します！
|
|
298
|
-
|
|
299
|
-
---
|
|
300
|
-
|
|
301
|
-
**Made with ❤️ by [gumigumih](https://github.com/gumigumih)**
|
|
248
|
+
|
|
249
|
+
実際の動作を確認したい場合は、以下のドキュメントページをご覧ください：
|
|
250
|
+
|
|
251
|
+
```bash
|
|
252
|
+
# ルートディレクトリから
|
|
253
|
+
npm run docs:dev
|
|
254
|
+
|
|
255
|
+
# または、docsディレクトリ内で
|
|
256
|
+
cd docs
|
|
257
|
+
npm install
|
|
258
|
+
npm run dev
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
📚 **[詳細なドキュメントとデモはこちら](./docs/)**
|
|
262
|
+
|
|
263
|
+
## 🛠️ 開発
|
|
264
|
+
|
|
265
|
+
```bash
|
|
266
|
+
# 依存関係のインストール
|
|
267
|
+
npm install
|
|
268
|
+
|
|
269
|
+
# 開発モード
|
|
270
|
+
npm run dev
|
|
271
|
+
|
|
272
|
+
# ビルド
|
|
273
|
+
npm run build
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
📖 **[開発ルールとガイドライン](./DEVELOPMENT.md)**
|
|
277
|
+
|
|
278
|
+
### コミットメッセージのルール
|
|
279
|
+
このプロジェクトでは、セマンティックコミットメッセージを使用しています：
|
|
280
|
+
|
|
281
|
+
- `feat:` - 新機能追加
|
|
282
|
+
- `fix:` - バグ修正
|
|
283
|
+
- `docs:` - ドキュメント更新
|
|
284
|
+
- `style:` - コードスタイル変更
|
|
285
|
+
- `refactor:` - リファクタリング
|
|
286
|
+
- `test:` - テスト追加・修正
|
|
287
|
+
- `chore:` - その他の変更
|
|
288
|
+
|
|
289
|
+
詳細は[開発ルール](./DEVELOPMENT.md)をご覧ください。
|
|
290
|
+
|
|
291
|
+
## 📄 ライセンス
|
|
292
|
+
|
|
293
|
+
MIT License - 詳細は [LICENSE](LICENSE) ファイルをご覧ください。
|
|
294
|
+
|
|
295
|
+
## 🤝 コントリビューション
|
|
296
|
+
|
|
297
|
+
バグ報告や機能要望、プルリクエストを歓迎します！
|
|
298
|
+
|
|
299
|
+
---
|
|
300
|
+
|
|
301
|
+
**Made with ❤️ by [gumigumih](https://github.com/gumigumih)**
|
|
File without changes
|
|
File without changes
|
|
@@ -3,7 +3,7 @@ import type { NumericFormatProps } from 'react-number-format';
|
|
|
3
3
|
export interface CalculatorDisplayProps {
|
|
4
4
|
value: string;
|
|
5
5
|
error?: string;
|
|
6
|
-
inputRef?: RefObject<
|
|
6
|
+
inputRef?: RefObject<globalThis.HTMLInputElement>;
|
|
7
7
|
editable?: boolean;
|
|
8
8
|
placeholder?: string;
|
|
9
9
|
onChange?: (value: string) => void;
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -5,8 +5,10 @@ type ControllerParams = {
|
|
|
5
5
|
onCalculate: (value: string) => void;
|
|
6
6
|
enableTaxCalculation: boolean;
|
|
7
7
|
decimalPlaces: number;
|
|
8
|
+
getInputValue?: () => string;
|
|
9
|
+
onOperatorInput?: () => void;
|
|
8
10
|
};
|
|
9
|
-
export declare function useCalculatorController({ isOpen, initialValue, onClose, onCalculate, enableTaxCalculation, decimalPlaces, }: ControllerParams): {
|
|
11
|
+
export declare function useCalculatorController({ isOpen, initialValue, onClose, onCalculate, enableTaxCalculation, decimalPlaces, getInputValue, onOperatorInput, }: ControllerParams): {
|
|
10
12
|
mounted: boolean;
|
|
11
13
|
displayValue: string;
|
|
12
14
|
error: string;
|
|
File without changes
|
package/dist/index.d.ts
CHANGED
|
File without changes
|