292efb0bb3
Summary: Moved Flow types into their own file. I will be adding more types as part of the auto complete for the navigation bar and this is to keep the code more organized. Reviewed By: danielbuechele Differential Revision: D16540279 fbshipit-source-id: d69ac0d05f91e9d92fcda37325c791ddc83a52c9
81 lines
1.9 KiB
JavaScript
81 lines
1.9 KiB
JavaScript
/**
|
|
* Copyright 2018-present Facebook.
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
* @format
|
|
* @flow strict-local
|
|
*/
|
|
|
|
import {DetailSidebar, FlexCenter, styled, colors} from 'flipper';
|
|
|
|
import type {Bookmark} from '../flow-types';
|
|
|
|
type Props = {|
|
|
bookmarks: Map<string, Bookmark>,
|
|
onNavigate: string => void,
|
|
|};
|
|
|
|
const NoData = styled(FlexCenter)({
|
|
fontSize: 18,
|
|
color: colors.macOSTitleBarIcon,
|
|
});
|
|
|
|
const BookmarksList = styled('div')({
|
|
color: colors.macOSTitleBarIcon,
|
|
overflowY: 'scroll',
|
|
overflowX: 'hidden',
|
|
height: '100%',
|
|
'.bookmark-container': {
|
|
width: '100%',
|
|
padding: '5px 10px',
|
|
cursor: 'pointer',
|
|
},
|
|
'.bookmark-container:hover': {
|
|
backgroundColor: 'rgba(155, 155, 155, 0.2)',
|
|
},
|
|
'.bookmark-container:active': {
|
|
backgroundColor: '#4d84f5',
|
|
color: '#FFF',
|
|
},
|
|
'.bookmark-common-name': {
|
|
fontSize: 14,
|
|
overflowX: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
textOverflow: 'ellipsis',
|
|
lineHeight: 1.2,
|
|
},
|
|
'.bookmark-uri': {
|
|
fontSize: 10,
|
|
overflowX: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
textOverflow: 'ellipsis',
|
|
lineHeight: 1.2,
|
|
},
|
|
});
|
|
|
|
export default (props: Props) => {
|
|
const {bookmarks, onNavigate} = props;
|
|
return (
|
|
<DetailSidebar>
|
|
{bookmarks.size === 0 ? (
|
|
<NoData grow>No Bookmarks</NoData>
|
|
) : (
|
|
<BookmarksList>
|
|
{[...bookmarks.values()].map(bookmark => (
|
|
<div
|
|
className="bookmark-container"
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={() => {
|
|
onNavigate(bookmark.uri);
|
|
}}>
|
|
<div className="bookmark-common-name">{bookmark.commonName}</div>
|
|
<div className="bookmark-uri">{bookmark.uri}</div>
|
|
</div>
|
|
))}
|
|
</BookmarksList>
|
|
)}
|
|
</DetailSidebar>
|
|
);
|
|
};
|