Skip to content

Instantly share code, notes, and snippets.

@MonteLogic
Last active January 5, 2023 19:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MonteLogic/e625e71889b9fd4919b0fe77e20a7a78 to your computer and use it in GitHub Desktop.
Save MonteLogic/e625e71889b9fd4919b0fe77e20a7a78 to your computer and use it in GitHub Desktop.
WC Blocks option which contains some state logic related to the props. In studying to make the editor view changable on the shipping options.
/**
* 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;
@MonteLogic
Copy link
Author

Line 13, there is the checked param of the Option, I wonder if that's in the editor view as well.

@MonteLogic
Copy link
Author

MonteLogic commented Jan 5, 2023

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';"

@MonteLogic
Copy link
Author

I am looking at radio-control-accordian

@MonteLogic
Copy link
Author

MonteLogic commented Jan 5, 2023

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';

@MonteLogic
Copy link
Author

RadioControlAccordian is not needed* to render the radio control options to the checkout page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment