Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. Jsmyth
    J
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    Jsmyth

    @Jsmyth

    0
    Reputation
    1
    Posts
    363
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    Jsmyth Follow

    Posts made by Jsmyth

    • <ActionSheet/> not working like it should

      I can’t seem to get the ActionSheet component to show up like it should.

      this is my ActionModal.js component that houses the Sheet.

      import React from 'react';
      import { ActionSheet, AlertDialog } from 'react-onsenui';
      import conveyances from '../markers/conveyance.png';
      import travellers from '../markers/travellers.png';
      import 'onsenui/css/onsenui.css';
      import 'onsenui/css/onsen-css-components.css'
      
      const ActionModal = (props) => {
      
          console.log(props.name);
          return (
              <ActionSheet isOpen={true} >
                  <p>{props.name}</p>
                  <img src={travellers}/>
                  <img src={conveyances}/>
              </ActionSheet>
          )
          
      }
      
      export default ActionModal
      

      This is my App.js container where I render the ActionModal component.

      import React, { Component } from 'react';
      import MapView from './containers/MapView';
      import TitleBar from './components/TitleBar';
      import {Marker} from 'react-map-gl';
      import ActionModal from './components/ActionModal';
      
      import carIcon from './markers/car2.png';
      import planeIcon from './markers/plane2.png';
      import shipIcon from './markers/boat2.png';
      import bcIcon from './markers/british-columbia.png';
      
      import './App.css';
      import 'onsenui/css/onsenui.css';
      import 'onsenui/css/onsen-css-components.css'
      class App extends Component {
        state = {
          viewport: {
            width: '100vw',
            height: '100vh',
            latitude: 49.288826,
            longitude: -123.111122,
            zoom: 8
          },
          isModalOpen: false,
          currentSelectedRegion: {
            name: null
          }
        };
      
        
      
        _modalHandler = (name) => {
              const isOpen = this.state.isModalOpen;
              const currentName = name;
              console.log(currentName);
              this.setState({isModalOpen: !isOpen,
                currentSelectedRegion: {
                  name: currentName
                }});
              // setTimeout(() => {
              //   console.log('after setSate' + this.state.isModalOpen);
              // }, 3000); 
            }
      
        _iconHandler = (icon) => {
          switch (icon) {
            case "carIcon":
              return carIcon;
            case "planeIcon":
              return planeIcon;
            case "shipIcon":
              return shipIcon;
            case "bcIcon":
              return bcIcon;
            default:
              break;
          }
        }
      
        _renderMarkers = (marker, i) => {
          const {name, coordinates, icon} = marker;
          console.log(name);
          return (
            <Marker key={i} longitude={coordinates[0]} latitude={coordinates[1]} >
              <div onClick={() => this._modalHandler(name)}>
              <img src={this._iconHandler(icon)}/>
              </div>
            </Marker>
          );
        }
      
        _handleViewportChange = (viewport) => {
          this.setState({viewport})
        }
      
        render() {
          return (
            <div>
              <TitleBar/>    
              <MapView viewport = {this.state.viewport} renderMarkers = {this._renderMarkers} handleViewportChange = {this._handleViewportChange}/>
              <ActionModal isOpen = {this.state.isModalOpen} name = {this.state.currentSelectedRegion.name}/>
            </div>
          );
        }
      }
      
      export default App;
      
      

      The I am trying to get the component to show on top of a Map View page (a ReactMapGL map) when a Marker is tapped on.
      This is that MapView code

      import React, { Component } from 'react';
      import ReactMapGL, {Marker} from 'react-map-gl';
      import SegmentBar from '../components/SegmentBar';
      import App from '../App';
      import markerJson from '../data/markerJson';
      import 'onsenui/css/onsenui.css';
      import 'onsenui/css/onsen-css-components.css'
      
      const accessToken = 'pk.eyJ1IjoiamFzb25zbXl0aCIsImEiOiJjanA0Mm8wd3Ewb2h4M2txcnNqcHNvaG4wIn0.EWZeuDd8KwPHC6IjhE2fdg';
      const mapboxStyle = 'mapbox://styles/jasonsmyth/cjp46uagu0mtj2spdtwgced8c';
      
      const MapView = (props) => {
        return (
          <ReactMapGL
              {...props.viewport}
              onViewportChange={(viewport) => props.handleViewportChange(viewport)}
              mapboxApiAccessToken={accessToken}
              mapStyle= {mapboxStyle} style={{'zIndex': 0}}>
                { markerJson.map(props.renderMarkers) }
                <SegmentBar/>
            </ReactMapGL> 
        )
      }
          
          
      export default MapView;
      

      I can see what I put inside the ActionSheet fine and it opens and closes (with the mask overlay) just fine. It just doesn’t seem to be getting any styling at all.
      all I see is two icons and a line of text, no cancel button or box surround them.

      posted in Onsen UI
      J
      Jsmyth