@adactive/adsum-wayfindingcontrols-asia

Carousel component

Getting started

1. Install this component using yarn add @adactive/adsum-wayfindingcontrols-asia

2. Setting Redux Reducers typically located on your_project_folder/src/rootReducer.js

   • import the reducer :

   import { WayFindingControlsReducers } from '@adactive/adsum-wayfindingcontrols-asia';
   

   • add WayFindingControlsReducers on your root reducer, for example:

   const appState: AppStateType = {
       routing: routerReducer,
       map,
       loadingScreen,
       WayFindingControls: WayFindingControlsReducers
   };
   

3. Setting Redux Actions in your Apps First thing to do is to import the action to file which you need the actions, for example app.js

   import { WayFindingControlsActions } from '@adactive/adsum-wayfindingcontrols-asia';
   

   There is 2 redux prop actions that this component have:

   • Action to go to Shop

   (WayFindingControlsActions.tmtt(poi, poiPlace))
   

   • Action to reset map and Wayfinding)

   (resetMapAndWayFinding(true, true, true, true);)
   

   there are 4 parameter in resetMapAndWayFinding

   1. reset: needed to activate the resetMapAndWayFinding itself
   2. resetMap: needed if you want to resetMap
   3. resetMapOption: option to make the resetMap animated or not
   4. resetWayfinding: needed if you want to clear label and wayfinding path

   Put these to actions on the mapDispatchToProps
   For Example:

   const mapDispatchToProps = (dispatch: *): MappedDispatchPropsType => ({
       tmtt: (poi, poiPlace) => {
           WayFindingControlsActions.tmtt(poi, poiPlace));
       },
       resetMapAndWayFinding: (reset, resetMap, resetMapAnimatedOption, resetWayfinding) => {
       dispatch(WayFindingControlsActions.resetMapAndWayFinding(
           reset,
           resetMap,
           resetMapAnimatedOption, 
           resetWayfinding
           ));
       },
   });
   

4. Attach Wayfinding Component inside your Map Component for example:

   <Map
           backgroundImage={MapBackground}
           store={store}
           awm={this.awm}
           isOpen={this.isMapOpen()}
           className="app-map-container"
           onClick={this.onMapClicked}
           userObjectLabel={this.userObjectLabel}
           getDrawPathSectionOptions={this.getDrawPathSectionOptions}
           zoom={{
               min: 20,
               max: 600,
           }}
       >
           <WayFindingControls
               awm={this.awm}
               kioskPlace={currentFloorFull}
           />
           <div id="adsum-web-map-container" ref={this.awmContainerRef}>
               <MapControls awm={this.awm} />
           </div>
   </Map>
   

###Props

    **This WayFinding Required TWO PROPS which are awm and kioskPlace**

    awm is AdsumWebMap

    kioskPlace is 

    ```javascript
        getCurrentFloorFull() {
            return this.awm.defaultFloor;
        }
    ```

    **If you want to take the POI destination or destination floor name u can get it on:**
    set connect and mapStateToProps
    ```javascript
        import { connect } from 'react-redux';
        const mapStateToProps = (state: AppStateType): MappedStatePropsType => ({
            wayFindingControlsState: state.wayFindingControls,
        });
    ```
    then call it on 
    ```javascript
        const { wayFindingControlsState } = this.props;
        {wayFindingControlsState
                && wayFindingControlsState.placeDestination 
                && wayFindingControlsState.placeDestination.name
                && `Your Destination is at 
                ${wayFindingControlsState.placeDestination.name.replace('_', ' ')}`}
    ```
    or get the POI destination
    ```javascript
        const { wayFindingControlsState } = this.props;
        wayFindingControlsState.destination[0]
    ```

# Props Detail
 
```javascript
    type OwnPropsType = {|
    //props needed when call this component
    awm: *,
    kioskPlace: object,
    //optional props
    destinationLabelText: string,
    icLabelText: string,
|};

static defaultProps = {
        destinationLabelText: "You reached ",
        icLabelText: "Head ",
    }

***You can Edit sentence to use

Copy component inside your project src folder

Less only

`npx @adactive/adsum-wayfindingcontrols copy --less-only`

Full copy

`npx @adactive/adsum-wayfindingcontrols copy`