/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import PropTypes from 'prop-types';
import { decodeEntities } from '@wordpress/html-entities';
import { useCallback, useMemo } from '@wordpress/element';
import classnames from 'classnames';
/**
* Internal dependencies
*/
import { ValidatedTextInput } from '../text-input';
import { ValidatedSelect } from '../select';
import './style.scss';
const StateInput = ( {
className,
id,
states,
country,
label,
onChange,
autoComplete = 'off',
value = '',
required = false,
} ) => {
const countryStates = states[ country ];
const options = useMemo(
() =>
countryStates
? Object.keys( countryStates ).map( ( key ) => ( {
key,
name: decodeEntities( countryStates[ key ] ),
} ) )
: [],
[ countryStates ]
);
/**
* Handles state selection onChange events. Finds a matching state by key or value.
*
* @param {Object} event event data.
*/
const onChangeState = useCallback(
( stateValue ) => {
if ( options.length > 0 ) {
const foundOption = options.find(
( option ) =>
option.key === stateValue || option.name === stateValue
);
onChange( foundOption ? foundOption.key : '' );
return;
}
onChange( stateValue );
},
[ onChange, options ]
);
if ( options.length > 0 ) {
return (
<>
<ValidatedSelect
className={ classnames(
className,
'wc-block-components-state-input'
) }
id={ id }
label={ label }
onChange={ onChangeState }
options={ options }
value={ options.find( ( option ) => option.key === value ) }
errorMessage={ __(
'Please select a state.',
'woocommerce'
) }
required={ required }
/>
{ autoComplete !== 'off' && (
<input
type="text"
aria-hidden={ true }
autoComplete={ autoComplete }
value={ value }
onChange={ ( event ) =>
onChangeState( event.target.value )
}
style={ {
minHeight: '0',
height: '0',
border: '0',
padding: '0',
position: 'absolute',
} }
tabIndex={ -1 }
/>
) }
</>
);
}
return (
<ValidatedTextInput
className={ className }
id={ id }
label={ label }
onChange={ onChangeState }
autoComplete={ autoComplete }
value={ value }
required={ required }
/>
);
};
StateInput.propTypes = {
states: PropTypes.objectOf(
PropTypes.oneOfType( [
PropTypes.array,
PropTypes.objectOf( PropTypes.string ),
] )
).isRequired,
onChange: PropTypes.func.isRequired,
autoComplete: PropTypes.string,
id: PropTypes.string,
className: PropTypes.string,
country: PropTypes.string,
label: PropTypes.string,
value: PropTypes.string,
};
export default StateInput;