ChargEco/Strides-APP/app/pages/home/maps/SearchTool.js

/**
 * 首页地图工具和搜索框组件
 * @邠心vbe on 2022/12/20
 */
import React, { Component } from 'react';
import { View, StyleSheet, Text, Pressable } from 'react-native';
import BottomModal from '../../../components/BottomModal';
import Filter from './Filter';
import { PageList } from '../../Router';
 
export default class SearchTool extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showFilter: false,
      filterIndex: {},
      filterTotal: 0,
    };
  }

  componentDidUpdate() {
    if (this.props.count != this.state.filterTotal) {
      this.setState({
        filterTotal: this.props.count
      })
    }
  }

  findFilter(data, index) {
    this.setState({
      filterIndex: index
    });
    this.hideFilter();
    if (this.props.onFilter) {
      this.props.onFilter(data);
    }
  }

  showFilter() {
    this.setState({
      showFilter: true
    });
  }

  hideFilter() {
    this.setState({
      showFilter: false
    });
  }

  /*getNearestStation() {
    navigator.geolocation.getCurrentPosition(location => {
      let params = {
        lat: location.coords.latitude,
        lng: location.coords.longitude
      }
      Dialog.showProgressDialog();
      apiStation.getNearestSite(params).then(res => {
        Dialog.dismissLoading();
        if (res.data.sitePk) {
          var station = {
            id: res.data.sitePk,
            name: res.data.siteName,
            address: res.data.address,
            latitude: res.data.locationLatitude,
            longitude: res.data.locationLongitude,
          }
          setTimeout(() => {
            utils.directMaps(station.latitude, station.longitude, station.address);
          }, 500);
        } else {
          toastShort("您附近没有充电桩");
        }
      }).catch(err => {
        toastShort(err);
        Dialog.dismissLoading();
      });
    });
  }*/

  render() {
    return (
      <View>
        <View style={styles.searchView}>
          <View style={styles.searchInput}>
            <Feather
              name={'search'}
              size={24}
              color={'#444'}/>
            <Text
              style={styles.searchText}
              onPress={() => {
                startPage(PageList.search);
              }}>
              Search
            </Text>
          </View>
          { this.props.mapReady &&
            <Pressable
              style={styles.mapIcon}
              android_ripple={rippleLess}
              onPress={() => this.showFilter()}>
              <FontAwesome
                name='filter'
                size={26}
                color={colorPrimary}/>
            </Pressable>
          }
          { this.props.mapReady &&
            <Pressable
              style={styles.mapIcon}
              android_ripple={rippleLess}
              onPress={() => this.props.onLocation()}>
              <MaterialIcons
                name='my-location'
                size={26}
                color={colorPrimary}/>
            </Pressable>
          }
          {/* <View style={styles.mapToolView}>
            <TouchableOpacity
              style={styles.mapIcon}
              activeOpacity={0.7}
              onPress={() => {
                startPage(PageList.scanqr, {actionDetail: true});
              }}>
              <FontAwesome
                name='qrcode'
                size={25}
                color={colorPrimary}/>
            </TouchableOpacity>
          </View> */}
        </View>
        <BottomModal
          visible={this.state.showFilter}
          onHide={() => {
            this.hideFilter()
          }}>
          <Filter
            index={this.state.filterIndex}
            count={this.state.filterTotal}
            onDone={(data, index) => this.findFilter(data, index)}
            onHide={() => this.hideFilter()}/>
        </BottomModal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  searchView: {
    alignItems: 'center',
    flexDirection: 'row',
    ...$padding(8, 16, 16),
    backgroundColor: colorThemes
  },
  searchInput: {
    flex: 1,
    alignItems: 'center',
    borderWidth: 1,
    borderStyle: 'solid',
    borderRadius: 60,
    borderColor: '#CCD0E7',
    flexDirection: 'row',
    paddingLeft: 16,
    paddingRight: 16,
    backgroundColor: 'rgba(255, 255, 255, 0.5)'
  },
  searchText: {
    flex: 1,
    color: '#444',
    padding: 8,
    fontSize: 15
  },
  mapIcon: {
    width: 32,
    height: 32,
    marginLeft: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  mapToolView: {
    right: 24,
    zIndex: 10,
    bottom: 112,
    width: 56,
    position: 'absolute',
    alignItems: 'center'
  },
  bottomView: {
    left: 0,
    right: 0,
    bottom: 32,
    zIndex: 210,
    alignItems: 'center',
    position: 'absolute',
  },
  bottomButton: {
    elevation: 1.5,
    paddingLeft: 32,
    paddingRight: 32,
    borderRadius: 54,
    overflow: 'hidden',
    justifyContent: 'center'
  }
})