mirror of
https://github.com/responsively-org/responsively-app
synced 2024-09-20 14:21:54 +00:00
43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
import React, {useMemo} from 'react';
|
|
import {useTheme} from '@material-ui/core/styles';
|
|
import LayoutIcon from '../icons/Layout';
|
|
import {
|
|
HORIZONTAL_LAYOUT,
|
|
FLEXIGRID_LAYOUT,
|
|
INDIVIDUAL_LAYOUT,
|
|
} from '../../constants/previewerLayouts';
|
|
import Select from '../Select';
|
|
import useCommonStyles from '../useCommonStyles';
|
|
|
|
function PreviewerLayoutSelector(props) {
|
|
const theme = useTheme();
|
|
const commonClasses = useCommonStyles();
|
|
const selectedOption = useMemo(
|
|
() => options.find(option => option.value === props.value),
|
|
[props.value]
|
|
);
|
|
|
|
return (
|
|
<div className={commonClasses.sidebarContentSection}>
|
|
<div className={commonClasses.sidebarContentSectionTitleBar}>
|
|
<LayoutIcon height={18} margin={6} color={theme.palette.text.primary} />
|
|
Layout
|
|
</div>
|
|
<div className={commonClasses.sidebarContentSectionContainer}>
|
|
<Select
|
|
options={options}
|
|
value={selectedOption}
|
|
onChange={props.onChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const options = [
|
|
{value: HORIZONTAL_LAYOUT, label: 'Horizontal'},
|
|
{value: FLEXIGRID_LAYOUT, label: 'FlexiGrid'},
|
|
{value: INDIVIDUAL_LAYOUT, label: 'Individual'},
|
|
];
|
|
|
|
export default PreviewerLayoutSelector;
|