1.0.3 • Published 6 years ago
@adactive/arc-wayfindingcontrols-asia v1.0.3
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]
```
# 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`