Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | 23x 23x 23x 23x 23x 23x 23x 106x 23x 106x 106x 106x 106x 106x 3x 3x 3x 3x 2x 106x 4x 4x 4x 4x 23x 23x 7x 7x 7x 7x 7x 4x 7x 3x 23x 109x 109x 23x | import { Address, CustomerAddress } from '@bigcommerce/checkout-sdk';
import React, { memo, FunctionComponent, PureComponent, ReactNode } from 'react';
import { preventDefault } from '../common/dom';
import { TranslatedString } from '../locale';
import { DropdownTrigger } from '../ui/dropdown';
import isEqualAddress from './isEqualAddress';
import './AddressSelect.scss';
import StaticAddress from './StaticAddress';
export interface AddressSelectProps {
addresses: CustomerAddress[];
selectedAddress?: Address;
onSelectAddress(address: Address): void;
onUseNewAddress(currentAddress?: Address): void;
}
class AddressSelect extends PureComponent<AddressSelectProps> {
render(): ReactNode {
const {
addresses,
selectedAddress,
} = this.props;
return (
<div className="form-field">
<div className="dropdown--select" role="combobox">
<DropdownTrigger
dropdown={
<AddressSelectMenu
addresses={ addresses }
onSelectAddress={ this.handleSelectAddress }
onUseNewAddress={ this.handleUseNewAddress }
selectedAddress={ selectedAddress }
/>
}
>
<AddressSelectButton
addresses={ addresses }
selectedAddress={ selectedAddress }
/>
</DropdownTrigger>
</div>
</div>
);
}
private handleSelectAddress: (newAddress: Address) => void = (newAddress: Address) => {
const {
onSelectAddress,
selectedAddress,
} = this.props;
if (!isEqualAddress(selectedAddress, newAddress)) {
onSelectAddress(newAddress);
}
};
private handleUseNewAddress: () => void = () => {
const {
selectedAddress,
onUseNewAddress,
} = this.props;
onUseNewAddress(selectedAddress);
};
}
const AddressSelectMenu: FunctionComponent<AddressSelectProps> = ({
addresses,
onSelectAddress,
onUseNewAddress,
selectedAddress,
}) => (
<ul
className="dropdown-menu instrumentSelect-dropdownMenu"
id="addressDropdown"
>
<li className="dropdown-menu-item dropdown-menu-item--select">
<a
data-test="add-new-address"
href="#"
onClick={ preventDefault(() => onUseNewAddress(selectedAddress)) }
>
<TranslatedString id="address.enter_address_action" />
</a>
</li>
{ addresses.map(address => (
<li
className="dropdown-menu-item dropdown-menu-item--select"
key={ address.id }
>
<a href="#" onClick={ preventDefault(() => onSelectAddress(address)) }>
<StaticAddress address={ address } />
</a>
</li>
)) }
</ul>
);
type AddressSelectButtonProps = Pick<AddressSelectProps, 'selectedAddress' | 'addresses'>;
const AddressSelectButton: FunctionComponent<AddressSelectButtonProps> = ({
selectedAddress,
}) => (
<a
className="button dropdown-button dropdown-toggle--select"
href="#"
id="addressToggle"
onClick={ preventDefault() }
>
{ selectedAddress ?
<StaticAddress address={ selectedAddress } /> :
<TranslatedString id="address.enter_address_action" /> }
</a>
);
export default memo(AddressSelect);
|