You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.2 KiB
101 lines
2.2 KiB
/**
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @emails react-core
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import {colors, media} from 'theme';
|
|
import isItemActive from 'utils/isItemActive';
|
|
import MetaTitle from '../MetaTitle';
|
|
import ChevronSvg from '../ChevronSvg';
|
|
|
|
const Section = ({
|
|
activeItemId,
|
|
createLink,
|
|
isActive,
|
|
isScrollSync,
|
|
location,
|
|
onLinkClick,
|
|
onSectionTitleClick,
|
|
section,
|
|
}) => (
|
|
<div>
|
|
<MetaTitle
|
|
onClick={onSectionTitleClick}
|
|
cssProps={{
|
|
marginTop: 10,
|
|
|
|
[media.greaterThan('small')]: {
|
|
color: isActive ? colors.text : colors.subtle,
|
|
|
|
':hover': {
|
|
color: colors.text,
|
|
},
|
|
},
|
|
}}>
|
|
{section.title}
|
|
<ChevronSvg
|
|
cssProps={{
|
|
marginLeft: 7,
|
|
transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
|
|
transition: 'transform 0.2s ease',
|
|
|
|
[media.lessThan('small')]: {
|
|
display: 'none',
|
|
},
|
|
}}
|
|
/>
|
|
</MetaTitle>
|
|
<ul
|
|
css={{
|
|
marginBottom: 10,
|
|
|
|
[media.greaterThan('small')]: {
|
|
display: isActive ? 'block' : 'none',
|
|
},
|
|
}}>
|
|
{section.items.map(item => (
|
|
<li
|
|
key={item.id}
|
|
css={{
|
|
marginTop: 5,
|
|
}}>
|
|
{createLink({
|
|
isActive: isScrollSync
|
|
? activeItemId === item.id
|
|
: isItemActive(location, item),
|
|
item,
|
|
location,
|
|
onLinkClick,
|
|
section,
|
|
})}
|
|
|
|
{item.subitems && (
|
|
<ul css={{marginLeft: 20}}>
|
|
{item.subitems.map(subitem => (
|
|
<li key={subitem.id}>
|
|
{createLink({
|
|
isActive: isScrollSync
|
|
? activeItemId === subitem.id
|
|
: isItemActive(location, subitem),
|
|
item: subitem,
|
|
location,
|
|
onLinkClick,
|
|
section,
|
|
})}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
|
|
export default Section;
|
|
|