README

Carousel component

Getting started

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

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
};

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

reset: needed to activate the resetMapAndWayFinding itself
resetMap: needed if you want to resetMap
resetMapOption: option to make the resetMap animated or not
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
        ));
    },
});

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]
```

**This WayFinding Have FOUR OPTIONAL PROPS**
1. destinationLabelText, it is Destination Label Text, the default was "You Reached (Shop)"
2. icLabelText, it is InterChange Label Text, the default was "Head Down/Up (Floor)"
3. arrivalLabelStyle, it is Destination Label Styling and Offset, the structure should be the same as the default which can see below (props Detail)
4. interchangeLabelStyle, it is Interchange Label Styling and Offset, the structure should be the same as the default which can see below (props Detail)

Props Detail

type OwnPropsType = {|
    //props needed when call this component
    awm: *,
    kioskPlace: object,
    //optional props
    destinationLabelText: string,
    icLabelText: string,
    arrivalLabelStyle: object,
    interchangeLabelStyle: object,
|};

static defaultProps = {
        destinationLabelText: "You reached ",
        icLabelText: "Head ",
        arrivalLabelStyle: {
                offset: {
                    x: 0,
                    y: 0,
                    z: 15,
                },
                style: {
                    backgroundColor: '#00437a',
                    backgroundOpacity: 0.9,
                    backgroundRadius: 3,
                    color: '#ffffff',
                    size: 4,
                },
        },
        interchangeLabelStyle: {
            offset: {
                x: 0,
                y: 0,
                z: 15,
            },
            style: {
                backgroundColor: '#00437a',
                backgroundOpacity: 0.9,
                backgroundRadius: 3,
                color: '#ffffff',
                size: 4,
            },
        },
    }

***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`

Usage no npm install needed!