@ -1,206 +1,151 @@
// import {Input, View, Text, PageContainer, Image} from "@tarojs/components";
// import {FC, useEffect, useMemo, useState} from "react";
// import styles from './index.module.scss'
// import Taro from "@tarojs/taro";
// import {useDidShow} from '@tarojs/taro'
// import SearchList from './components/list'
// import NavigationBar from "@/components/navigationBar/navigationBar";
// import search from '@/static/img/search.png'
// import del from '@/static/img/del.png'
//
//
// const Search: FC = () => {
// const [value, setValue] = useState('')
// const [recentSearch, setRecentSearch] = useState<string[]>([])
// const [hotSearch] = useState<any[]>([])
// const [show, setShow] = useState(false)
// const [focus, setFocus] = useState(false)
//
//
// useDidShow(getRecentSearch)
//
// useEffect(() => {
// !show && getRecentSearch()
// }, [show])
//
// function inpFn(e) {
// setValue(e.detail.value)
// }
//
// function clearSearch() {
// Taro.removeStorageSync('recentSearch')
// getRecentSearch()
// Taro.showToast({title: '删除成功'})
// }
//
// function getRecentSearch() {
// setRecentSearch(Taro.getStorageSync('recentSearch'))
// }
//
// function getSearchItem(value) {
// setValue(value)
// setShow(true)
// }
//
// function searchInput() {
// if (value === "") return;
// getSearchItem(value)
// //记录最近搜索
// let recentSearch = Taro.getStorageSync('recentSearch') || [];
// recentSearch.unshift(value);
// Taro.setStorageSync('recentSearch', [...new Set(recentSearch)])
// }
//
// function cancelSearch(){
// setValue('')
// setShow(false)
// setFocus(false)
// Taro.navigateBack()
// }
//
//
// const searchStyles = useMemo((): React.CSSProperties | undefined => {
// if (focus || show) {
// return {
// // transform: "translateY(-43px)",
// // width: "100%",
// }
// }
// }, [focus, show])
//
//
// return (
// <View className="flex flex-column">
// <NavigationBar cancelBack={true} backgroundColor={'#F2F8F6'} text='搜索'/>
// <View className={styles.searchHeader} style={searchStyles}>
// <View className={styles.searchBox}>
// <Image src={search} style={{width: '32rpx', height: '32rpx'}} mode='widthFix'/>
// <Input
// onFocus={() => setFocus(true)}
// onBlur={() => setFocus(false)}
// className={styles.input}
// placeholder={(focus || show) ? '' : "输入关键字搜索"}
// type='text'
// value={value}
// confirmType='search'
// onInput={inpFn}
// onConfirm={searchInput}/>
//
// </View>
// <View className='px-2 text-dark' onClick={cancelSearch}>取消</View>
// {/*{focus || show ? <View className='px-2 text-dark' onClick={cancelSearch}>取消</View> : null}*/}
// </View>
//
//
// {
// recentSearch.length >= 1 && !show &&
// <View className='px-2'>
// <View className={styles.titleBox}>
// <Text className={styles.title}>最近搜索</Text>
// <Image
// src={del}
// mode='widthFix'
// style={{width: '16px', height: '16px', padding: '0 20rpx'}}
// onClick={clearSearch}/>
// </View>
// <View className={styles.contentBox}>
// {
// recentSearch.length > 0 &&
// recentSearch?.map(d =>
// <View className={styles.items}>
// <View onClick={() => getSearchItem(d)} className="font-28">{d}</View>
// </View>)
// }
// </View>
// </View>
// }
// {
// hotSearch.length >= 1 && !show &&
// <>
// <View className={`flex justify-between ${styles.titleBox}`}>
//
// <Text className="font-32 fwb">热门搜索</Text>
// </View>
// <View className="wid100 pt-3 pl-3 box-b">
// <View className="wid100 flex flex-wrap">
// {
// hotSearch.length &&
// hotSearch.map(d =>
// <View className="py-1 px-2 rounded-40 mr-2 mb-2 bg-warning text-white">
// <View onClick={() => {
// getSearchItem(d)
// }} className="font-28">{d}</View>
// </View>)
// }
// </View>
// </View>
// </>
// }
//
// <PageContainer
// onBeforeLeave={cancelSearch}
// onClickOverlay={cancelSearch}
// show={show}
// round
// overlay
// overlayStyle={'background:rgba(0,0,0,0)'}>
// {show && <SearchList name={value} clear={show}/>}
// </PageContainer>
// </View>
// )
// }
// export default Search
import { FC , useState , useMemo , memo , useCallback } from "react" ;
import { Button , Text , View } from "@tarojs/components" ;
type Props = {
items : number [ ]
}
const Inner :FC < Props > = memo ( ( { items } ) = >
{
console . log ( '子组件渲染' )
import { Input , View , Text , PageContainer , Image } from "@tarojs/components" ;
import { FC , useEffect , useMemo , useState } from "react" ;
import styles from './index.module.scss'
import Taro from "@tarojs/taro" ;
import { useDidShow } from '@tarojs/taro'
import SearchList from './components/list'
import NavigationBar from "@/components/navigationBar/navigationBar" ;
import search from '@/static/img/search.png'
import del from '@/static/img/del.png'
const Search : FC = ( ) = > {
const [ value , setValue ] = useState ( '' )
const [ recentSearch , setRecentSearch ] = useState < string [ ] > ( [ ] )
const [ hotSearch ] = useState < any [ ] > ( [ ] )
const [ show , setShow ] = useState ( false )
const [ focus , setFocus ] = useState ( false )
useDidShow ( getRecentSearch )
useEffect ( ( ) = > {
! show && getRecentSearch ( )
} , [ show ] )
function inpFn ( e ) {
setValue ( e . detail . value )
}
function clearSearch() {
Taro . removeStorageSync ( 'recentSearch' )
getRecentSearch ( )
Taro . showToast ( { title : '删除成功' } )
}
function getRecentSearch() {
setRecentSearch ( Taro . getStorageSync ( 'recentSearch' ) )
}
function getSearchItem ( value ) {
setValue ( value )
setShow ( true )
}
function searchInput() {
if ( value === "" ) return ;
getSearchItem ( value )
//记录最近搜索
let recentSearch = Taro . getStorageSync ( 'recentSearch' ) || [ ] ;
recentSearch . unshift ( value ) ;
Taro . setStorageSync ( 'recentSearch' , [ . . . new Set ( recentSearch ) ] )
}
function cancelSearch ( ) {
setValue ( '' )
setShow ( false )
setFocus ( false )
Taro . navigateBack ( )
}
const searchStyles = useMemo ( ( ) : React . CSSProperties | undefined = > {
if ( focus || show ) {
return {
// transform: "translateY(-43px)",
// width: "100%",
}
}
} , [ focus , show ] )
return (
< View >
{ items . length &&
items . map ( d = > < Text key = { d } > { d } < / Text > )
< View className = "flex flex-column" >
< NavigationBar cancelBack = { true } backgroundColor = { '#F2F8F6' } text = '搜索' / >
< View className = { styles . searchHeader } style = { searchStyles } >
< View className = { styles . searchBox } >
< Image src = { search } style = { { width : '32rpx' , height : '32rpx' } } mode = 'widthFix' / >
< Input
onFocus = { ( ) = > setFocus ( true ) }
onBlur = { ( ) = > setFocus ( false ) }
className = { styles . input }
placeholder = { ( focus || show ) ? '' : "输入关键字搜索" }
type = 'text'
value = { value }
confirmType = 'search'
onInput = { inpFn }
onConfirm = { searchInput } / >
< / View >
< View className = 'px-2 text-dark' onClick = { cancelSearch } > 取 消 < / View >
{ /*{focus || show ? <View className='px-2 text-dark' onClick={cancelSearch}>取消</View> : null}*/ }
< / View >
{
recentSearch . length >= 1 && ! show &&
< View className = 'px-2' >
< View className = { styles . titleBox } >
< Text className = { styles . title } > 最 近 搜 索 < / Text >
< Image
src = { del }
mode = 'widthFix'
style = { { width : '16px' , height : '16px' , padding : '0 20rpx' } }
onClick = { clearSearch } / >
< / View >
< View className = { styles . contentBox } >
{
recentSearch . length > 0 &&
recentSearch ? . map ( d = >
< View className = { styles . items } >
< View onClick = { ( ) = > getSearchItem ( d ) } className = "font-28" > { d } < / View >
< / View > )
}
< / View >
)
} )
< / View >
}
{
hotSearch . length >= 1 && ! show &&
< >
< View className = { ` flex justify-between ${ styles . titleBox } ` } >
type Props1 = {
change : ( e ) = > void
}
const NewInner :FC < Props1 > = memo ( ( { change } ) = > {
console . log ( '子组件渲染' )
return (
< Button onClick = { ( e ) = > { change ( e ) } } > 1111111 < / Button >
)
} )
< Text className = "font-32 fwb" > 热 门 搜 索 < / Text >
< / View >
< View className = "wid100 pt-3 pl-3 box-b" >
< View className = "wid100 flex flex-wrap" >
{
hotSearch . length &&
hotSearch . map ( d = >
< View className = "py-1 px-2 rounded-40 mr-2 mb-2 bg-warning text-white" >
< View onClick = { ( ) = > {
getSearchItem ( d )
} } className = "font-28" > { d } < / View >
< / View > )
}
< / View >
< / View >
< / >
}
const Search : FC = ( ) = > {
const [ b , setB ] = useState ( 1 )
const [ todos ] = useState ( [ 1 , 2 , 3 , 4 , 5 ] )
const [ tab , setTab ] = useState ( 1 )
console . log ( '父组件渲染' )
const mNum = useMemo ( ( ) = > todos . filter ( d = > d !== tab ) , [ todos , tab ] )
const change = useCallback ( ( e :any ) = > {
console . log ( e )
console . log ( b , 'b' )
setB ( b + 1 )
} , [ b ] )
return (
< View style = { { marginTop : '200px' } } >
< Text > { b } < / Text >
{ /*<Button onClick={()=>{setTab(2);setB(b=> b + 1)}}>==2</Button>*/ }
{ /*<Button onClick={()=>{setTab(3);setB(b=> b + 1)}}>==3</Button>*/ }
{ /*<Button onClick={()=>{setTab(4);setB(b=> b + 1)}}>==4</Button>*/ }
{ /*<Button onClick={()=>{setTab(1);setB(b=> b + 1)}}>==1</Button>*/ }
{ /*<Inner items={mNum}></Inner>*/ }
< NewInner change = { change } > < / NewInner >
< PageContainer
onBeforeLeave = { cancelSearch }
onClickOverlay = { cancelSearch }
show = { show }
round
overlay
overlayStyle = { 'background:rgba(0,0,0,0)' } >
{ show && < SearchList name = { value } clear = { show } / > }
< / PageContainer >
< / View >
)
}
