[Amount] Improve formatting capabilities and fix edge cases
Chưa có ai nhận issue này.
Đánh giá
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức phù hợp với người mới
- 45/100
- Loại issue
- Tính năng
- Độ rõ ràng
- Khá rõ ràng
- Mức độ hoạt động
- Đình trệ
- Công nghệ
- react, typescript
- Lĩnh vực
- frontend
Hướng nghiên cứu
Bắt đầu bằng cách xác định component Amount và cách sử dụng Intl.NumberFormat của nó, sau đó kiểm tra các prop currencyDisplay hiện có và các luồng định dạng. Công việc hoàn tất khi các tùy chọn notation, narrowSymbol và signDisplay được hỗ trợ, việc tạo formatter được ghi nhớ hoặc kết hợp, và các giá trị ngắn được định dạng chính xác.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Mô tả
Summary
Improvements to the Amount component to enhance formatting capabilities, fix edge cases, and follow component conventions.
Improvements
2. Add notation prop
No way to get compact formatting like $1.2M or $13K. Intl.NumberFormat supports notation: 'compact' natively. This is useful for dashboards and summary views.
3. Add narrowSymbol to currencyDisplay
Intl.NumberFormat supports 'narrowSymbol' (e.g., $ instead of US$ in non-US locales), but the currencyDisplay prop only allows 'symbol' | 'code' | 'name'.
4. Add signDisplay prop
Intl.NumberFormat supports signDisplay ('auto', 'always', 'exceptZero', 'never') for controlling +/- sign display — useful for showing gains/losses.
5. Memoize formatter instances
getCurrencyDecimals() and isValidCurrency() each create a new Intl.NumberFormat instance on every render. These should be memoized or combined into a single formatter creation.
6. Fix string slicing edge case for short strings
value.slice(0, -decimals) + '.' + value.slice(-decimals) breaks for strings shorter than the decimal count (e.g., value="5" with USD → ".5" instead of "0.05").
Moved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
- Forward HTML attributes (#674)
- TypeScript strictness (#675)
- Ngôn ngữ chính
- TypeScript
- Star
- 70
- Fork
- 13
- Merge trung bình
- 4 ngày 6 giờ
- Pull request đã merge (30 ngày)
- 10
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của raystack/apsara
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 78/100
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 75/100
-
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 75/100
-
Docs: hand-duplicated props tables drift risk, missing a11y sections, no per-component changelog Đang mởenhancement global
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 48/100
-
bug global
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 48/100
Tất cả issue của raystack/apsara
Issue tương tự
-
bug(cli): hapi doctor inline-media prints a fabricated B:\ helper-script path in packaged installs Đang mở
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 70/100
-
Crush Đang mở
Độ khó 1/5 Dưới một giờ Mức phù hợp với người mới 85/100
catppuccin/catppuccin#3125 ·
-
Add a SECURITY.md Đang mở
Độ khó 1/5 Dưới một giờ Mức phù hợp với người mới 90/100
ElementsProject/cln-application#167 · 1 bình luận · 1 reaction ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 75/100
Quantco/pnpm-licenses#17 ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 75/100