yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added transitions for search

Browse Source
This commit is contained in:
Jori Lallo
2017-07-01 17:16:18 -07:00
parent c17dccef01
commit fdd787d49c
1 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/scenes/Search/Search.js
View File

@@ -28,12 +28,17 @@ const Container = styled(CenteredContent)`
const ResultsWrapper = styled(Flex)` const ResultsWrapper = styled(Flex)`
position: absolute; position: absolute;
transition: all 200ms ease-in-out; transition: all 300ms cubic-bezier(0.65, 0.05, 0.36, 1);
top: ${props => (props.pinToTop ? '0%' : '50%')}; top: ${props => (props.pinToTop ? '0%' : '50%')};
margin-top: ${props => (props.pinToTop ? '40px' : '-75px')}; margin-top: ${props => (props.pinToTop ? '40px' : '-75px')};
width: 100%; width: 100%;
`; `;
const ResultList = styled(Flex)`
opacity: ${props => (props.visible ? '1' : '0')};
transition: all 400ms cubic-bezier(0.65, 0.05, 0.36, 1);
`;
@observer class Search extends React.Component { @observer class Search extends React.Component {
firstDocument: HTMLElement; firstDocument: HTMLElement;
props: Props; props: Props;
@@ -100,19 +105,21 @@ const ResultsWrapper = styled(Flex)`
onChange={this.updateQuery} onChange={this.updateQuery}
value={query || ''} value={query || ''}
/> />
<ArrowKeyNavigation <ResultList visible={hasResults}>
mode={ArrowKeyNavigation.mode.VERTICAL} <ArrowKeyNavigation
defaultActiveChildIndex={0} mode={ArrowKeyNavigation.mode.VERTICAL}
> defaultActiveChildIndex={0}
{this.store.documents.map((document, index) => ( >
<DocumentPreview {this.store.documents.map((document, index) => (
innerRef={ref => index === 0 && this.setFirstDocumentRef(ref)} <DocumentPreview
key={document.id} innerRef={ref => index === 0 && this.setFirstDocumentRef(ref)}
document={document} key={document.id}
highlight={this.store.searchTerm} document={document}
/> highlight={this.store.searchTerm}
))} />
</ArrowKeyNavigation> ))}
</ArrowKeyNavigation>
</ResultList>
</ResultsWrapper> </ResultsWrapper>
</Container> </Container>
); );