preview.js
46 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | |
| 3 | export default function PhoneFieldVisualPreview({ |
| 4 | separateDialCode = true, |
| 5 | separateDialCodeClass = 'separate-dial-code', |
| 6 | dialCode = '+1', |
| 7 | placeholder = '201-231-2312', |
| 8 | value = '', |
| 9 | globeIcon, |
| 10 | }) { |
| 11 | return ( |
| 12 | <div> |
| 13 | <div className={`jet-form-builder__field-wrap phone-field-wrap phone-field-preview ${separateDialCode ? separateDialCodeClass: ''}`}> |
| 14 | <div className='iti iti--allow-dropdown iti--show-flags iti--inline-dropdown'> |
| 15 | <div className='iti__country-container' aria-hidden="true"> |
| 16 | <div className='iti__selected-country'> |
| 17 | <div className="iti__selected-country-primary"> |
| 18 | <div |
| 19 | className="iti__flag iti__globe" |
| 20 | style={{ |
| 21 | backgroundImage: globeIcon ? `url(${globeIcon})` : 'none', |
| 22 | }} |
| 23 | ></div> |
| 24 | <div className="iti__arrow"></div> |
| 25 | </div> |
| 26 | { separateDialCode && |
| 27 | <div className="iti__selected-dial-code">{dialCode}</div> |
| 28 | } |
| 29 | </div> |
| 30 | </div> |
| 31 | |
| 32 | <input |
| 33 | type="tel" |
| 34 | className='jet-form-builder__field phone-field-intl iti__tel-input' |
| 35 | disabled |
| 36 | readOnly |
| 37 | value={value} |
| 38 | placeholder={placeholder.length > 0 ? placeholder : '201-231-2312'} |
| 39 | onChange={() => {}} |
| 40 | aria-label={__( 'Phone number', 'jet-form-builder' )} |
| 41 | /> |
| 42 | </div> |
| 43 | </div> |
| 44 | </div> |
| 45 | ); |
| 46 | } |