mini-check/dist/h5/components/Map/index.js

import Nerv from "nervjs";
import Taro, { chooseLocation as _chooseLocation } from "@tarojs/taro-h5";
import { AtDrawer } from "taro-ui";
import { View, Image, Text } from '@tarojs/components';
import classnames from 'classnames';
import arrowImg from '../../assets/ic_arrow_right.png';
import { ItemExtra, CustomLabel, UnEditeableView } from '../index';
import H5MapContent from "./H5MapContent/index";
import './index.scss';

class CustomMap extends Taro.Component {
  render() {
    const { help, itemExtra, term, onChange, value, name, hidden, editable, required, defaultValue, onView, listItemChildren } = this.props;

    const [isOpened, setIsOpened] = Taro.useState(false);
    // const [env, setEnv] = useState('WEAPP')
    // const showMap = () => {
    //   if (editable) {
    //     return
    //   }
    //   setIsOpened(true)
    //   setEnv(Taro.getEnv())
    // }
    const hideMap = () => {
      setIsOpened(false);
    };
    if (hidden) {
      return null;
    }
    const chooseLocation = () => {
      if (editable) {
        return;
      }
      const env = Taro.getEnv();
      if (env === 'WEAPP') {
        const showValue = value || defaultValue;
        _chooseLocation({
          latitude: showValue && showValue.location.length ? showValue.location[0] : 0,
          longitude: showValue && showValue.location.length ? showValue.location[1] : 0,
          success: res => {
            onChange({
              address: res.address,
              location: [res.longitude, res.latitude]
            });
          },
          fail: res => {
            console.log(`fail: ${res}`);
          }
        });
      } else {
        setIsOpened(true);
      }
    };
    const showValue = value || defaultValue;
    if (editable === false || editable === undefined && onView) {
      return <UnEditeableView term={term} help={help} value={showValue ? showValue.address : ''} listItemChildren={listItemChildren} layout={showValue && showValue.address.length >= 20 ? 'column' : 'row'} />;
    }
    const containerCLs = classnames(['map-container', listItemChildren ? 'item-container' : 'item-container-margin']);
    return <View className={containerCLs}>
      <View className="map-content">
        <CustomLabel help={help} term={term} required={required} />
        <View className="map-content-extra" onClick={chooseLocation}>
          <Text className="map-content-text">{showValue && showValue.address ? showValue.address : ''}</Text>
          <Image className="map-content-arrow" mode="aspectFit" src={arrowImg} />
        </View>
      </View>
      <ItemExtra text={itemExtra} />
      {isOpened && <AtDrawer show={isOpened} mask width="100vw">
        
        <H5MapContent onChange={onChange} value={value} term={term} onCancel={hideMap} name={name} />
      </AtDrawer>}
    </View>;
  }

}

export default CustomMap;