matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Filter bar animation

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2022-01-04 22:53:15 +01:00
parent cd4e33a8ed
commit b06596bbb6
6 changed files with 293 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app/soapbox/features/compose/components/search_results.js
View File

@ -2,18 +2,26 @@ import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl } from 'react-intl';
import AccountContainer from '../../../containers/account_container';
import StatusContainer from '../../../containers/status_container';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Hashtag from '../../../components/hashtag';
import FilterBar from '../../search/components/filter_bar';
import ScrollableList from 'soapbox/components/scrollable_list';
import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder_account';
import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder_hashtag';
import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
import Pullable from 'soapbox/components/pullable';
import FilterBar from 'soapbox/components/filter_bar';
export default class SearchResults extends ImmutablePureComponent {
const messages = defineMessages({
accounts: { id: 'search_results.accounts', defaultMessage: 'People' },
statuses: { id: 'search_results.statuses', defaultMessage: 'Posts' },
hashtags: { id: 'search_results.hashtags', defaultMessage: 'Hashtags' },
});
export default @injectIntl
class SearchResults extends ImmutablePureComponent {
static propTypes = {
value: PropTypes.string,
@ -25,12 +33,37 @@ export default class SearchResults extends ImmutablePureComponent {
features: PropTypes.object.isRequired,
suggestions: ImmutablePropTypes.list,
trends: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired,
};
handleLoadMore = () => this.props.expandSearch(this.props.selectedFilter);
handleSelectFilter = newActiveFilter => this.props.selectFilter(newActiveFilter);
renderFilterBar() {
const { intl, selectedFilter } = this.props;
const items = [
{
text: intl.formatMessage(messages.accounts),
action: () => this.handleSelectFilter('accounts'),
name: 'accounts',
},
{
text: intl.formatMessage(messages.statuses),
action: () => this.handleSelectFilter('statuses'),
name: 'statuses',
},
{
text: intl.formatMessage(messages.hashtags),
action: () => this.handleSelectFilter('hashtags'),
name: 'hashtags',
},
];
return <FilterBar className='search__filter-bar' items={items} active={selectedFilter} />;
}
render() {
const { value, results, submitted, selectedFilter, suggestions, trends } = this.props;
@ -105,7 +138,7 @@ export default class SearchResults extends ImmutablePureComponent {
return (
<>
<FilterBar selectedFilter={selectedFilter} selectFilter={this.handleSelectFilter} />
{this.renderFilterBar()}
{noResultsMessage || (
<Pullable>