@adactive/adsum-screensaver-asia

Carousel component

Getting started

• Install this component using yarn add adsum-screensaver-asia

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

  • import the reducer : import { ScreenSaverReducers } from '@adactive/adsum-screensaver-asia';
  • add ScreenSaverReducers on your root reducer, for example: const appState: AppStateType = { routing: routerReducer, map, loadingScreen, screenSaver: ScreenSaverReducers };

• 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 { ScreenSaverActions } from '@adactive/adsum-screensaver-asia';

  There is 2 redux prop actions that this component have:

  • Action to close Screen Saver (ScreenSaverActions.screenSaverClose)
  • Action to restart the timer (mainly used to on main app div onClick) (ScreenSaverActions.appClick)

  Put these to actions on the mapDispatchToProps
  For Example:

  const mapDispatchToProps = (dispatch: *): MappedDispatchPropsType => ({ appClick: (value: ?boolean) => { dispatch(ScreenSaverActions.appClick(value)); }, screenSaverClose: (value: ?boolean) => { dispatch(ScreenSaverActions.screenSaverClose(value)); } });

  You can call function props appClick(true) to reset screensaver timer or screenSaverClose(true) to close screensaver in that file.

• Attach ScreenSaver Component for example:

  <ScreenSaver openFirst={true} inactivityTimer={2000}>**
              <div onClick={this.onScreenSaverClosed}>CLOSE</div>
                  <AdsumCarousel 
                      isOpen
                      medias={mediasList}
                      carouselOptions={{
                          dragging: true,
                          slidesToShow: 1,
                          slidesToScroll: 1,
                          // adaptiveHeight: true,
                          wrapAround: true,
                          autoplayInterval: 1000,
                      }}
                      onMediaTouch={() => {}} // fix a bug inside AdsumCarousel
                      style={{ width: '1080px', height: '700px' }}
                      autoSlide={true}
                      autoSlideInterval={5000}
                  />
  </ScreenSaver>
  

    the Children (html elements or components inside <ScreenSaver> tag) will be called after screensaver's timer time out

5. Attach App Click on Your App(main) Component
    ```onClick={() => this.props.appClick(true)}```


### Props

**inactivityTimer** - time in ms, which should pass without any clicks inside the app for screensaver to appear

**openFirst** - a boolean to decide if screensaver open first as the app launched or not

**children** - html elements or components inside <ScreenSaver> tag that will be called after screensaver's timer time out
 
```javascript
type OwnPropsType = {|
    inactivityTimer: number,
    openFirst: boolean,
    children: Element<any>
|};

static defaultProps = {
    inactivityTimer: 10000,
    openFirst: true,
};

Copy component inside your project src folder

Less only

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

Full copy

`npx @adactive/adsum-screensaver copy`