give
/
src
/
DonationForms
/
resources
/
registrars
/
templates
/
fields
/
Amount
/
CustomAmount.tsx
CurrencySwitcher.tsx
2 years ago
CustomAmount.tsx
2 years ago
DonationAmountCurrency.tsx
2 years ago
DonationAmountLevels.tsx
2 years ago
getAmountLevelsWithCurrencySettings.tsx
2 years ago
index.tsx
2 years ago
CustomAmount.tsx
46 lines
| 1 | import classNames from 'classnames'; |
| 2 | import {__} from '@wordpress/i18n'; |
| 3 | import CurrencyInput from 'react-currency-input-field'; |
| 4 | import { CurrencyInputOnChangeValues } from "react-currency-input-field/dist/components/CurrencyInputProps"; |
| 5 | |
| 6 | /** |
| 7 | * @since 3.0.0 |
| 8 | */ |
| 9 | type CustomAmountProps = { |
| 10 | fieldError?: string; |
| 11 | currency?: string; |
| 12 | currencySymbol?: string; |
| 13 | defaultValue?: string; |
| 14 | value?: string; |
| 15 | onValueChange?: (value: string, name?: string, values?: CurrencyInputOnChangeValues) => void; |
| 16 | }; |
| 17 | |
| 18 | /** |
| 19 | * @since 3.0.0 |
| 20 | */ |
| 21 | const CustomAmount = ( |
| 22 | {defaultValue, fieldError, currency, value, onValueChange}: CustomAmountProps |
| 23 | ) => { |
| 24 | return ( |
| 25 | <div className={classNames('givewp-fields-amount__input-container', {invalid: fieldError})}> |
| 26 | <CurrencyInput |
| 27 | intlConfig={{ |
| 28 | locale: navigator.language, |
| 29 | currency, |
| 30 | }} |
| 31 | className="givewp-fields-amount__input givewp-fields-amount__input-custom" |
| 32 | aria-invalid={fieldError ? 'true' : 'false'} |
| 33 | id="amount-custom" |
| 34 | name="amount-custom" |
| 35 | placeholder={__('Enter custom amount', 'give')} |
| 36 | defaultValue={defaultValue} |
| 37 | value={value} |
| 38 | decimalsLimit={2} |
| 39 | onValueChange={(value) => onValueChange(value !== undefined ? value : '')} |
| 40 | /> |
| 41 | </div> |
| 42 | ); |
| 43 | }; |
| 44 | |
| 45 | export default CustomAmount; |
| 46 |