-
-
Save MonteLogic/e625e71889b9fd4919b0fe77e20a7a78 to your computer and use it in GitHub Desktop.
/** | |
* External dependencies | |
*/ | |
import classnames from 'classnames'; | |
/** | |
* Internal dependencies | |
*/ | |
import OptionLayout from './option-layout'; | |
import type { RadioControlOptionProps } from './types'; | |
const Option = ( { | |
checked, | |
name, | |
onChange, | |
option, | |
}: RadioControlOptionProps ): JSX.Element => { | |
const { value, label, description, secondaryLabel, secondaryDescription } = | |
option; | |
const onChangeValue = ( event: React.ChangeEvent< HTMLInputElement > ) => | |
onChange( event.target.value ); | |
return ( | |
<label | |
className={ classnames( | |
'wc-block-components-radio-control__option', | |
{ | |
'wc-block-components-radio-control__option-checked': | |
checked, | |
} | |
) } | |
htmlFor={ `${ name }-${ value }` } | |
> | |
<input | |
id={ `${ name }-${ value }` } | |
className="wc-block-components-radio-control__input" | |
type="radio" | |
name={ name } | |
value={ value } | |
onChange={ onChangeValue } | |
checked={ checked } | |
aria-describedby={ classnames( { | |
[ `${ name }-${ value }__label` ]: label, | |
[ `${ name }-${ value }__secondary-label` ]: secondaryLabel, | |
[ `${ name }-${ value }__description` ]: description, | |
[ `${ name }-${ value }__secondary-description` ]: | |
secondaryDescription, | |
} ) } | |
/> | |
<OptionLayout | |
id={ `${ name }-${ value }` } | |
label={ label } | |
secondaryLabel={ secondaryLabel } | |
description={ description } | |
secondaryDescription={ secondaryDescription } | |
/> | |
</label> | |
); | |
}; | |
export default Option; |
This file is is then imported into 'assets/js/base/components/radio-control/index.tsx' as "import RadioControlOption from './option';"
and then changed again at the end of the file to "export { default as RadioControlOption } from './option';"
I am looking at radio-control-accordian
Okay, so I am checking the aliased statement of "base-components/radio". It's used in, "assets/js/base/components/cart-checkout/shipping-rates-control-package/package-rates.tsx" as:
<RadioControl className={ className } onChange={ ( value: string ) => { setSelectedOption( value ); onSelectRate( value ); } } selected={ selectedOption } options={ rates.map( renderOption ) } />
See:
import RadioControl, {
RadioControlOptionLayout,
} from '@woocommerce/base-components/radio-control';
RadioControlAccordian is not needed* to render the radio control options to the checkout page.
Line 13, there is the checked param of the Option, I wonder if that's in the editor view as well.