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 121 122 123 124 125 126 127 128 | 5x 5x 5x 5x 5x 5x 5x 5x 80x 80x 80x 5x 5x 5x 5x 5x | import _ from 'lodash'; import React from 'react'; import PropTypes from 'prop-types'; import { lucidClassNames } from '../../util/style-helpers'; import { StandardProps, findTypes } from '../../util/component-types'; import RadioButton, { IRadioButtonProps, defaultProps as radioButtonDefaultProps, } from '../RadioButton/RadioButton'; const cx = lucidClassNames.bind('&-RadioButtonLabeled'); const { any, object, string } = PropTypes; export interface IRadioButtonLabeledLabelProps extends StandardProps, React.DetailedHTMLProps< React.HTMLAttributes<HTMLDivElement>, HTMLDivElement > { description?: string; } const RadioButtonLabeledLabel = (_props: IRadioButtonLabeledLabelProps): null => null; RadioButtonLabeledLabel.displayName = 'RadioButtonLabeled.Label'; RadioButtonLabeledLabel.peek = { description: `Used to identify the purpose of this radio button to the user -- can be any renderable content.`, }; RadioButtonLabeledLabel.propName = 'Label'; /** TODO: Remove nonPassThroughs when the component is converted to a functional component */ const nonPassThroughs = ['className', 'style', 'Label']; export interface IRadioButtonLabeledProps extends IRadioButtonProps { /** Child element whose children are used to identify the purpose of this radio button to the user. */ Label?: string | (React.ReactNode & { props: IRadioButtonLabeledLabelProps }); } export const RadioButtonLabeled = ( props: IRadioButtonLabeledProps ): React.ReactElement => { const { className, isDisabled, isSelected, onSelect, style, ...passThroughs } = props; const labelChildProps = _.first( _.map(findTypes(props, RadioButtonLabeled.Label), 'props') ); return ( <label className={cx( '&', { '&-is-disabled': isDisabled, '&-is-selected': isSelected, }, className )} style={style} > <RadioButton className={className} isDisabled={isDisabled} isSelected={isSelected} onSelect={onSelect} {..._.omit(passThroughs as any, nonPassThroughs)} /> <div {...labelChildProps} className={cx('&-label')} /> </label> ); }; RadioButtonLabeled.displayName = 'RadioButtonLabeled'; RadioButtonLabeled.defaultProps = radioButtonDefaultProps; RadioButtonLabeled.peek = { description: `A composite of the \`RadioButton\` component and the native \`label\` element.`, notes: { overview: ` A round two-state toggle with a label that explains the action or selection. This is a composite of \`RadioButton\` and the native \`label\` element. `, intendedUse: ` - Use radio button to allow users to select one item. Commonly used to select filters or settings. For interactions where users can select mutiple options, use \`CheckboxLabeled\`. - Use radio buttons for 2-3 options where you want to expose all options. - Use \`SingleSelect\` for 3-10 options where it is not a priority to expose all options. - Use \`RadioButtonLabeled\` for vertical lists of options. Use \`RadioGroup\` for horizontal lists of options. `, technicalRecommendations: ` - Use the styles on the parent container of \`RadioButtonLabeled\` to ensure only the radio buttons and their labels are clickable. - Any props that are not explicitly defined in \`propTypes\` are passed to the native radio button control. `, }, categories: ['controls', 'toggles'], extend: 'RadioButton', madeFrom: ['RadioButton'], }; RadioButtonLabeled.propTypes = { ...RadioButton.propTypes, /** Appended to the component-specific class names set on the root element. */ className: string, /** Passed through to the root element. */ style: object, /** Child element whose children are used to identify the purpose of this radio button to the user. */ Label: any, }; RadioButtonLabeled.Label = RadioButtonLabeledLabel; export default RadioButtonLabeled; |