README

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 5 redux prop actions that this component have. Top 2 of that are mandatory to be applied tp make apps works well.
- Action to close Screen Saver (ScreenSaverActions.screenSaverClose)
- Action to restart the timer (mainly used to on main app div onClick) (ScreenSaverActions.appClick)
- Additional Custom Function you want when Screen Saver Close and Open (ScreenSaverActions.customCloseFunction) and (ScreenSaverActions.customOpenFunction)
- Action to force open Screen Saver usually useful when using screensaver as homepage (can run customopenfunction too) (ScreenSaverActions.forceOpenScreenSaver)
- Action to force close Screen Saver (can run customclosefunction too) (ScreenSaverActions.forceCloseScreenSaver)
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 Usually function screensaverclose is placed here 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

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 tag that will be called after screensaver's timer time out

customCloseFunction - a serial custom function to attach when Screen Saver close

customOpenFunction - a serial custom function to attach when Screen Saver open

forceOpenScreenSaver - to activate force open screensaver or not (boolean)

forceCloseScreenSaver - to activate force close screensaver or not (boolean)

type OwnPropsType = {|
    inactivityTimer: number,
    openFirst: boolean,
    children: Element<any>
    customCloseFunction: *,
    customOpenFunction: *,
|};

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

type MappedDispatchPropsType = {|
    appClick: (value: ?boolean) => void,
    screenSaverClose: (value: ?boolean) => void,
    forceOpenScreenSaver: (value: ?boolean) => void,
    forceCloseScreenSaver: (value: ?boolean) => void,
|};

Copy component inside your project src folder

Less only

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

Full copy

`npx @adactive/adsum-screensaver copy`

Usage no npm install needed!