mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-11 19:44:15 +00:00
improve searcher
This commit is contained in:
parent
749dd4fc48
commit
4c901e0e13
@ -2,7 +2,7 @@ import React from "react"
|
|||||||
import { Skeleton } from "antd"
|
import { Skeleton } from "antd"
|
||||||
import { Icons } from "components/Icons"
|
import { Icons } from "components/Icons"
|
||||||
|
|
||||||
import { PostsList } from "components"
|
import { PostsList, Searcher } from "components"
|
||||||
import Post from "models/post"
|
import Post from "models/post"
|
||||||
|
|
||||||
import "./index.less"
|
import "./index.less"
|
||||||
@ -13,6 +13,8 @@ export default class ExplorePosts extends React.Component {
|
|||||||
initialLoading: true,
|
initialLoading: true,
|
||||||
hasMorePosts: true,
|
hasMorePosts: true,
|
||||||
posts: [],
|
posts: [],
|
||||||
|
focusedSearcher: false,
|
||||||
|
filledSearcher: false,
|
||||||
}
|
}
|
||||||
|
|
||||||
wsEvents = {
|
wsEvents = {
|
||||||
@ -70,6 +72,22 @@ export default class ExplorePosts extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggleFocusSearcher = (to) => {
|
||||||
|
to = to ?? !this.state.focusedSearcher
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
focusedSearcher: to
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleState = (key, to) => {
|
||||||
|
to = to ?? !this.state[key]
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
[key]: to
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
componentDidMount = async () => {
|
componentDidMount = async () => {
|
||||||
await this.loadPosts()
|
await this.loadPosts()
|
||||||
|
|
||||||
@ -87,12 +105,16 @@ export default class ExplorePosts extends React.Component {
|
|||||||
render() {
|
render() {
|
||||||
return <div className="postsExplore">
|
return <div className="postsExplore">
|
||||||
<div className="postsExplore_header">
|
<div className="postsExplore_header">
|
||||||
<h1>
|
<Searcher
|
||||||
<Icons.Search /> Explore
|
autoFocus={false}
|
||||||
</h1>
|
onFocus={() => this.toggleState("focusedSearcher", true)}
|
||||||
|
onUnfocus={() => this.toggleState("focusedSearcher", false)}
|
||||||
|
onFilled={() => this.toggleState("filledSearcher", true)}
|
||||||
|
onEmpty={() => this.toggleState("filledSearcher", false)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
{
|
{
|
||||||
this.state.initialLoading ? <Skeleton active /> : <PostsList
|
this.state.focusedSearcher || this.state.filledSearcher ? null : this.state.initialLoading ? <Skeleton active /> : <PostsList
|
||||||
loading={this.state.loading}
|
loading={this.state.loading}
|
||||||
hasMorePosts={this.state.hasMorePosts}
|
hasMorePosts={this.state.hasMorePosts}
|
||||||
onLoadMore={this.loadPosts}
|
onLoadMore={this.loadPosts}
|
||||||
|
@ -3,5 +3,6 @@
|
|||||||
|
|
||||||
.postsExplore_header {
|
.postsExplore_header {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user