Dingdong_client/screens/Main/Home/ListTop.jsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Animated, Dimensions } from 'react-native';
import { Div, Button, Text, Icon } from 'react-native-magnus';
import { useBoolean, useCreation } from '@umijs/hooks';
import { useAnimation } from 'react-native-animation-hooks';
import useModel from 'flooks';
import HomeModel from './model';
import { sortMap, filterMap, tagMap } from '../../../Utils/MerchantUtils';
import Filter from './Filter';

export default function ListTop({
  animatedScrollYValue,
  topHeight,
  setscrollEnabled,
}) {
  const SortMenu = useBoolean(false);
  const filterMenu = useBoolean(false);
  const {
    sort,
    changeSort,
    merchantNatureList,
    getNature,
    clearFiliter,
    ChangeFiliter,
    filter,
    tag,
    natureId,
    endAmount,
  } = useModel(HomeModel, [
    'sort',
    'merchantNatureList',
    'filter',
    'tag',
    'natureId',
    'endAmount',
  ]);

  React.useEffect(() => {
    if (merchantNatureList.length === 0) {
      getNature();
      // setscrollEnabled(false);
    }
  }, [merchantNatureList]);

  const top = useCreation(() => {
    return topHeight ? topHeight + 56 : 200;
  }, [topHeight]);

  const translateY = animatedScrollYValue.interpolate({
    inputRange: [-1, 0, top, top + 1],
    outputRange: [0, 0, 0, 1],
  });

  const soltType = useCreation(() => {
    return 'first';
  }, [sort]);

  const sortInfo = useCreation(() => {
    return sortMap.get(sort);
  }, [sort]);

  const SortHeight = useAnimation({
    type: 'timing',
    initialValue: 0,
    duration: 100,
    toValue: SortMenu.state ? 230 : 0,
  });

  return (
    <>
      <Animated.View
        style={{
          zIndex: 100,
          backgroundColor: 'rgba(0,0,0,0)',
          transform: [{ translateY }],
        }}
      >
        <Div row bg="white">
          <Button
            onPress={SortMenu.setTrue}
            bg="hide"
            fontSize="xl"
            px={10}
            color={soltType === 'first' ? 'brand500' : 'gray600'}
          >
            推荐商家
          </Button>
          {/* <View style={{ width: 33 }} /> */}
          <Button
            bg="hide"
            fontSize="xl"
            color="gray600"
            px={10}
            mx={10}
            onPress={() => {}}
          >
            发现美食
          </Button>
        </Div>
        <Div row bg="white" alignItems="center">
          <Button
            onPress={() => {
              SortMenu.toggle();
              filterMenu.setFalse();
            }}
            bg="hide"
            px={10}
          >
            <Text
              fontSize="xs"
              color={
                sort && sortInfo.showType !== 'top' ? 'brand500' : 'gray600'
              }
            >
              {sortInfo.showType !== 'top'
                ? sortInfo.name
                : sortMap.get('').name}
            </Text>
            <Icon
              name="down"
              fontSize="xs"
              color={
                sort && sortInfo.showType !== 'top' ? 'brand500' : 'gray600'
              }
            />
          </Button>

          <Button
            fontSize="xs"
            bg="hide"
            color={sort === '7' ? 'brand500' : 'gray600'}
            px={10}
            onPress={() => {
              changeSort('7');
              SortMenu.setFalse();
              filterMenu.setFalse();
            }}
          >
            距离
          </Button>
          <Button
            fontSize="xs"
            bg="hide"
            color={sort === '8' ? 'brand500' : 'gray600'}
            px={10}
            onPress={() => {
              changeSort('8');
              SortMenu.setFalse();
              filterMenu.setFalse();
            }}
          >
            销量
          </Button>
          <Div flex={1} />
          <Button
            onPress={() => {
              filterMenu.toggle();
              SortMenu.setFalse();
            }}
            bg="hide"
            px={10}
          >
            <Text fontSize="xs" color="gray600">
              筛选
            </Text>
            <Icon
              name="down"
              fontSize="xs"
              color={
                sort && sortInfo.showType !== 'top' ? 'brand500' : 'gray600'
              }
            />
          </Button>
        </Div>
        <Animated.View
          style={{
            height: SortHeight,
            overflow: 'hidden',
            backgroundColor: '#fff',
          }}
        >
          {[...sortMap.keys()].map((item, index) => {
            const info = sortMap.get(item);
            return info.showType !== 'top' ? (
              <Button
                key={index}
                block
                bg="white"
                rounded="none"
                onPress={() => {
                  SortMenu.setFalse();
                  changeSort(item);
                }}
              >
                <Text
                  fontSize="xs"
                  flex={1}
                  color={sort === item ? 'brand500' : 'gray600'}
                >
                  {info.name}
                </Text>
              </Button>
            ) : null;
          })}
        </Animated.View>
        <Filter
          show={filterMenu.state}
          merchantNatureList={merchantNatureList}
          filters={filter}
          tags={tag}
          natureId={natureId}
          endAmount={endAmount}
          clear={() => {
            filterMenu.setFalse();
            clearFiliter();
          }}
          submit={(filter, tag, natureId, endAmount) => {
						filterMenu.setFalse();
						ChangeFiliter(filter, tag, natureId, endAmount);
          }}
        />
      </Animated.View>
      {(SortMenu.state || filterMenu.state) && (
        <Button
          bg="black600"
          position="absolute"
          top={top + 60}
          left={0}
          right={0}
          bottom={0}
          zIndex={2}
          onPress={() => {
            SortMenu.setFalse();
            filterMenu.setFalse();
          }}
        />
      )}
    </>
  );
}