@adactive/arc-wayfindingcontrols-asia
Adsum Way Finding Controls Component
Last updated a year ago by clientadactive .
UNLISENCED · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @adactive/arc-wayfindingcontrols-asia 
SYNC missed versions from official npm registry.

Carousel component

image

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`

Current Tags

  • 1.0.3                                ...           latest (a year ago)

4 Versions

  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Downloads
Today 0
This Week 0
This Month 8
Last Day 0
Last Week 0
Last Month 4
Dependencies (2)
Dev Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |