p5.js-web-editor/client/components/mobile/PreferencePicker.jsx

68 lines
1.9 KiB
React
Raw Normal View History

2020-06-23 21:18:34 +02:00
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
2020-07-01 22:20:32 +02:00
import { prop, remSize } from '../../theme';
2020-06-23 21:18:34 +02:00
const PreferenceTitle = styled.h4.attrs(props => ({ ...props, className: 'preference__title' }))`
color: ${prop('primaryTextColor')};
2020-06-23 21:18:34 +02:00
`;
2020-06-23 21:45:35 +02:00
const Preference = styled.div.attrs(props => ({ ...props, className: 'preference' }))`
flex-wrap: nowrap !important;
align-items: baseline !important;
2020-07-01 22:20:32 +02:00
justify-items: space-between;
2020-06-23 21:45:35 +02:00
`;
2020-07-01 22:20:32 +02:00
const OptionLabel = styled.label.attrs({ className: 'preference__option' })`
font-size: ${remSize(14)} !important;
`;
2020-06-23 21:45:35 +02:00
2020-07-01 22:36:25 +02:00
const PreferencePicker = ({
2020-06-23 21:18:34 +02:00
title, value, onSelect, options,
}) => (
2020-06-23 21:45:35 +02:00
<Preference>
2020-06-23 21:18:34 +02:00
<PreferenceTitle>{title}</PreferenceTitle>
2020-06-23 21:45:35 +02:00
<div className="preference__options">
{options.map(option => (
2020-07-01 22:36:25 +02:00
<React.Fragment key={`${option.name}-${option.id}`} >
<input
type="radio"
onChange={() => onSelect(option.value)}
aria-label={option.ariaLabel}
name={option.name}
key={`${option.name}-${option.id}-input`}
id={option.id}
className="preference__radio-button"
value={option.value}
checked={value === option.value}
/>
<OptionLabel
key={`${option.name}-${option.id}-label`}
htmlFor={option.id}
>
{option.label}
</OptionLabel>
2020-06-23 21:45:35 +02:00
</React.Fragment>))}
</div>
</Preference>
2020-06-23 21:18:34 +02:00
);
2020-07-01 22:36:25 +02:00
PreferencePicker.defaultProps = {
2020-06-23 21:18:34 +02:00
options: []
};
2020-07-01 22:36:25 +02:00
PreferencePicker.propTypes = {
2020-06-23 21:18:34 +02:00
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,
};
2020-07-01 22:36:25 +02:00
export default PreferencePicker;