Dingdong_client/screens/Main/HomeCategoryScreen.tsx

import { StackScreenProps } from '@react-navigation/stack';
import * as React from 'react';
import { View, Animated, Dimensions } from 'react-native';
import { Div, Button, Image, Text, Avatar, Icon } from 'react-native-magnus';
import { useBoolean, useCreation, useRequest, useMount } from '@umijs/hooks';
import { useTranslation } from 'react-i18next';
import { useAnimation } from 'react-native-animation-hooks';
import { ScrollView } from 'react-native-gesture-handler';
import useModel from 'flooks';
import HomeModel from './Home/model';
import CategoryModel from './Home/CategoryModel';
import { sortMap, filterMap, tagMap } from '../../Utils/MerchantUtils';
import Filter from './Home/Filter';
import Header from '../../components/Header';
import MerchantCom from './Home/MerchantCom';

const { height } = Dimensions.get('window');

export default function HomeCategoryScreen({
  navigation,
  route,
}: StackScreenProps) {
  const { params } = route;
  const { categoryId } = params;
  const { t } = useTranslation();
  const SortMenu = useBoolean(false);
  const filterMenu = useBoolean(false);
  const {
    sort,
    changeSort,
    merchantNatureList,
    getNature,
    clearFiliter,
    ChangeFiliter,
    filter,
    tag,
    natureId,
    endAmount,
    list,
    getData,
  } = useModel(CategoryModel, [
    'sort',
    'merchantNatureList',
    'filter',
    'tag',
    'natureId',
    'endAmount',
    'list',
  ]);
  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,
  });

  const { data } = useRequest(`/category/tree?id=${categoryId}`, {
    refreshDeps: [categoryId],
    initialData: [],
    formatResult: (res) => {
      return [...res];
    },
    onSuccess: (res) => {
      if (res.length > 0) {
        getData(res[0].id);
      }
    },
  });

  const chooseCategory = useRequest(`/category/get/${categoryId}`, {
    refreshDeps: [categoryId],
    initialData: {},
  });

  return (
    <>
      <Header title={chooseCategory.data.name || '分类'} />
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#f2f2f2',
          zIndex: 1,
          position: 'relative',
        }}
        stickyHeaderIndices={[1]}
      >
        <Div py={10} px={15} row>
          <Image flex={1} h={75} source={{ uri: chooseCategory.data.icon }} />
        </Div>
        <Div bg="white">
          <Div row>
            {data.map((item) => {
              return (
                <Button key={item.id} bg="hide" color="black" fontSize="sm">
                  {item.name}
                </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();
              }}
            >
              {t('ju-li')}
            </Button>
            <Button
              fontSize="xs"
              bg="hide"
              color={sort === '8' ? 'brand500' : 'gray600'}
              px={10}
              onPress={() => {
                changeSort('8');
                SortMenu.setFalse();
                filterMenu.setFalse();
              }}
            >
              {t('xiao-liang')}
            </Button>
            <Div flex={1} />
            <Button
              onPress={() => {
                filterMenu.toggle();
                SortMenu.setFalse();
              }}
              bg="hide"
              px={10}
            >
              <Text fontSize="xs" color="gray600">
                {t('shai-xuan')}
              </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>
              ) : (
                <></>
              );
            })}
          </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();
            }}
          />
        </Div>
        {list.length > 0 &&
          list.map((item, index) => {
            return <MerchantCom key={item.id} info={item} />;
          })}

        {(SortMenu.state || filterMenu.state) && (
          <Button
            bg="black600"
            position="absolute"
            top={95}
            left={0}
            right={0}
            bottom={0}
            zIndex={2}
            onPress={() => {
              SortMenu.setFalse();
              filterMenu.setFalse();
            }}
          />
        )}
      </ScrollView>
    </>
  );
}