51 lines
1.4 KiB
React
51 lines
1.4 KiB
React
|
import React from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import styled from 'styled-components';
|
||
|
|
import { prop } from '../../theme';
|
||
|
|
|
||
|
|
|
||
|
|
const PreferenceTitle = styled.h4.attrs(props => ({ ...props, className: 'preference__title' }))`
|
||
|
|
color: ${prop('primaryTextColor')} !important;
|
||
|
|
`;
|
||
|
|
|
||
|
|
const Selector = ({
|
||
|
|
title, value, onSelect, options,
|
||
|
|
}) => (
|
||
|
|
<div className="preference">
|
||
|
|
{/* <h4 className="preference__title">{title}</h4> */}
|
||
|
|
<PreferenceTitle>{title}</PreferenceTitle>
|
||
|
|
{options.map(option => (
|
||
|
|
<div className="preference__options" key={option.id}>
|
||
|
|
<input
|
||
|
|
type="radio"
|
||
|
|
onChange={() => onSelect(option.value)}
|
||
|
|
aria-label={option.ariaLabel}
|
||
|
|
name={option.name}
|
||
|
|
id={option.id}
|
||
|
|
className="preference__radio-button"
|
||
|
|
value={option.value}
|
||
|
|
checked={value === option.value}
|
||
|
|
/>
|
||
|
|
<label htmlFor={option.id} className="preference__option">{option.label}</label>
|
||
|
|
</div>))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
Selector.defaultProps = {
|
||
|
|
options: []
|
||
|
|
};
|
||
|
|
|
||
|
|
Selector.propTypes = {
|
||
|
|
title: PropTypes.string.isRequired,
|
||
|
|
value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).isRequired,
|
||
|
|
options: PropTypes.arrayOf(PropTypes.shape({
|
||
|
|
id: PropTypes.string,
|
||
|
|
name: PropTypes.string,
|
||
|
|
label: PropTypes.string,
|
||
|
|
ariaLabel: PropTypes.string,
|
||
|
|
})),
|
||
|
|
onSelect: PropTypes.func.isRequired,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Selector;
|