[Glitch] Rewrite RadioButton component as FC
Port 76264e3fe8 to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
			
			
This commit is contained in:
		
							parent
							
								
									bd851d3b58
								
							
						
					
					
						commit
						87a704f70b
					
				| 
						 | 
				
			
			@ -1,35 +0,0 @@
 | 
			
		|||
import React from 'react';
 | 
			
		||||
import PropTypes from 'prop-types';
 | 
			
		||||
import classNames from 'classnames';
 | 
			
		||||
 | 
			
		||||
export default class RadioButton extends React.PureComponent {
 | 
			
		||||
 | 
			
		||||
  static propTypes = {
 | 
			
		||||
    value: PropTypes.string.isRequired,
 | 
			
		||||
    checked: PropTypes.bool,
 | 
			
		||||
    name: PropTypes.string.isRequired,
 | 
			
		||||
    onChange: PropTypes.func.isRequired,
 | 
			
		||||
    label: PropTypes.node.isRequired,
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  render () {
 | 
			
		||||
    const { name, value, checked, onChange, label } = this.props;
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
      <label className='radio-button'>
 | 
			
		||||
        <input
 | 
			
		||||
          name={name}
 | 
			
		||||
          type='radio'
 | 
			
		||||
          value={value}
 | 
			
		||||
          checked={checked}
 | 
			
		||||
          onChange={onChange}
 | 
			
		||||
        />
 | 
			
		||||
 | 
			
		||||
        <span className={classNames('radio-button__input', { checked })} />
 | 
			
		||||
 | 
			
		||||
        <span>{label}</span>
 | 
			
		||||
      </label>
 | 
			
		||||
    );
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,30 @@
 | 
			
		|||
import React from 'react';
 | 
			
		||||
import classNames from 'classnames';
 | 
			
		||||
 | 
			
		||||
type Props = {
 | 
			
		||||
  value: string;
 | 
			
		||||
  checked: boolean;
 | 
			
		||||
  name: string;
 | 
			
		||||
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 | 
			
		||||
  label: React.ReactNode;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const RadioButton: React.FC<Props> = ({ name, value, checked, onChange, label }) => {
 | 
			
		||||
  return (
 | 
			
		||||
    <label className='radio-button'>
 | 
			
		||||
      <input
 | 
			
		||||
        name={name}
 | 
			
		||||
        type='radio'
 | 
			
		||||
        value={value}
 | 
			
		||||
        checked={checked}
 | 
			
		||||
        onChange={onChange}
 | 
			
		||||
      />
 | 
			
		||||
 | 
			
		||||
      <span className={classNames('radio-button__input', { checked })} />
 | 
			
		||||
 | 
			
		||||
      <span>{label}</span>
 | 
			
		||||
    </label>
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export default RadioButton;
 | 
			
		||||
		Loading…
	
		Reference in New Issue