{"_id":"@adactiveasia/adsign-loading-screen","name":"@adactiveasia/adsign-loading-screen","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@adactiveasia/adsign-loading-screen","version":"0.0.1","description":"Adsign Loading Screen Component","main":"index.js","author":{"name":"Aditya Hadiwijaya","email":"aditya@adactive.asia"},"license":"UNLISENCED","repository":{"type":"git","url":"git://github.com/adactiveasia/adsum-react-components.git"},"bugs":{"url":"https://github.com/adactiveasia/adsum-react-components.git/issues"},"scripts":{},"dependencies":{"chalk":"^1.1.3","commander":"^2.9.0","prex-es5":"^0.4.2"},"devDependencies":{"prop-types":"^15.6.1","react":"^18.2.0","react-redux":"^5.0.7","redux":"^3.7.2"},"publishConfig":{"access":"public"},"bin":{"arc-loading-screen":"cli.js"},"homepage":"https://github.com/adactiveasia/adsum-react-components#readme","_id":"@adactiveasia/adsign-loading-screen@0.0.1","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-7MSxYQH1KwRm3sZUqTMdCo7O00vAYOeTegY7xbXsvICwRl12s132wyYsYjn6Ku3sHIAWG5jnumj2VDUnjAq5LQ==","shasum":"3d9a6e88bf63e6bc110c8ca612e502fd7f441062","tarball":"https://registry.npmjs.org/@adactiveasia/adsign-loading-screen/-/adsign-loading-screen-0.0.1.tgz","fileCount":11,"unpackedSize":15174,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBWu19qIDbbKZ0npNH916Y18rUcSb/SFamGRgfO4cEVbAiEArfQcG6TSxy4FCWdoEZs7t0t6KEbybMUSaP9TWIBZtmU="}]},"_npmUser":{"name":"devadactiveasia","email":"dev@adactive.asia"},"directories":{},"maintainers":[{"name":"devadactiveasia","email":"dev@adactive.asia"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/adsign-loading-screen_0.0.1_1686633489207_0.6083212076338558"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-13T05:18:09.104Z","0.0.1":"2023-06-13T05:18:09.365Z","modified":"2023-06-13T05:18:09.545Z"},"maintainers":[{"name":"devadactiveasia","email":"dev@adactive.asia"}],"description":"Adsign Loading Screen Component","homepage":"https://github.com/adactiveasia/adsum-react-components#readme","repository":{"type":"git","url":"git://github.com/adactiveasia/adsum-react-components.git"},"author":{"name":"Aditya Hadiwijaya","email":"aditya@adactive.asia"},"bugs":{"url":"https://github.com/adactiveasia/adsum-react-components.git/issues"},"license":"UNLISENCED","readme":"![react-badge](https://img.shields.io/badge/react-js-53c1de.svg?style=flat)\n![touch-badge](https://img.shields.io/badge/for-touch--screen-ff69b4.svg?style=flat)\n\n# Loading Screen\n\n![Screenshot of LoadingScreen component](https://user-images.githubusercontent.com/24209524/49127057-e443d380-f300-11e8-95e2-86531a0353fd.png)\n\n## Getting started\n\n    npm i --save @adactive/arc-loading-screen\n\nOR\n\n    yarn add @adactive/arc-loading-screen\n\n\n## How to use\n\nJust add the component as below:\n\n```javascript\n\nimport * as React from 'react';\n\n/*...*/\n\n// import LoadingScreen component and Actions\nimport LoadingScreen, { LoadingScreenActions } from '@adactive/arc-loading-screen';\n\nimport ACA from '@adactive/adsum-utils/services/ClientAPI';\nimport deviceConfig from './services/Config';\n\n/*...*/\n\nclass App extends React.Component<PropsType, StateType> {\n    state = {\n        configLoaded: false,\n        mapLoaded: false,\n    };\n\n    /*...*/\n\n    componentDidMount() {\n        // use setPercentage to dispatch LoadingScreen action\n        const { setPercentage } = this.props;\n\n        deviceConfig.init()\n            // 10 %\n            .then((): void => setPercentage(10))\n            .then((): void => ACA.init(deviceConfig.config.api))\n            // 25 %\n            .then((): void => setPercentage(25))\n            .then((): void => ACA.load())\n            // 75 %\n            .then((): void => setPercentage(75))\n            .then(() => {\n                this.awm = new AdsumWebMap({/*...*/});\n\n                // 90 %\n                setPercentage(90);\n                this.setState({ configLoaded: true });\n            });\n    }\n\n    componentDidUpdate() {\n        // use setPercentage to dispatch LoadingScreen action\n        const { mapState, setPercentage } = this.props;\n        const { mapLoaded, configLoaded } = this.state;\n\n        if (configLoaded && !mapLoaded && mapState === 'idle') {\n            // 100 %, because app will be ready when mapLoaded set to true\n            setPercentage(100);\n            this.setState({ mapLoaded: true });\n        }\n    }\n\n    renderMap = () => {/*...*/};\n\n    render(): Element<'div'> {\n        return (\n            <div className=\"App\">\n                <LoadingScreen />\n\n                <Header logo={logo} />\n\n                { this.renderMap() }\n            </div>\n        );\n    }\n}\n    \nconst mapStateToProps = (state: AppStateType): MappedStatePropsType => ({\n    mapState: state.map.state,\n    /*...*/\n});\n\nconst mapDispatchToProps = (dispatch: *): MappedDispatchPropsType => ({\n    // allow us to dispatch LoadingScreen setPercentage action\n    setPercentage: (percentage: ?number): void => {\n        dispatch(LoadingScreenActions.setPercentage(percentage));\n    },\n    /*...*/\n});\n\nexport default connect(\n    mapStateToProps,\n    mapDispatchToProps,\n)(App);\n\n```\n\nDo not forget to link the reducer to your app root reducer in **rootReducer.js**:\n\n```javascript\n\nimport { combineReducers } from 'redux';\nimport { routerReducer } from 'react-router-redux';\n \n/*...*/\n\n// import LoadingScreen reducer\nimport loadingScreen from '@adactive/arc-loading-screen/src/LoadingScreenReducer';\n// import LoadingScreen reducer type\nimport type { LoadingScreenReducerType } from '@adactive/arc-loading-screen/src/LoadingScreenReducer';\n\nexport type AppStateType = {|\n    /*...*/\n    loadingScreen: LoadingScreenReducerType,\n|};\n\nconst appState: AppStateType = {\n    /*...*/\n    loadingScreen,\n};\n\nexport default combineReducers(appState);\n\n```\n\n>Be sure to have **adsum-logo.png** in your **public/assets/img/** folder\nif you want the default logo\n\n## Optional props\n\n```javascript\n\ntype OwnPropsType = {|\n    open?: boolean,\n    hideLogo?: boolean,\n    hidePercentage?: boolean,\n    hideBar?: boolean,\n    transition?: ?string,\n    minPercentage?: ?number,\n    mainColor?: string,\n    barColor?: string,\n    logo?: Object | string,\n|};\n\n```\n\n#### open\nControl the opening of the loading screen.\nNote that **Loading Screen closes automatically when it reaches 100%**,\nso NO NEED to link ```mapLoaded``` to ```open``` prop as below if you set percentage to 100%\nat some point in your code:\n\n```javascript\n\n<LoadingScreen\n    open={!mapLoaded} // not needed\n/>\n\n```\n\n#### hideLogo\nHide Logo in the Loading Screen when set to ```true```.\n\n#### hidePercentage\nHide Percentage number in the Loading Screen when set to ```true```.\n\n#### hideBar\nHide Loading Bar in the Loading Screen when set to ```true```.\n\n#### transition\nSet transition of the Loading Bar width.\nCan be useful to adjust transition duration: if Loading Screen is going to be displayed for a long\ntime, we have enough time to set a bigger transition duration for a prettier design.\nOn the contrary, timing needs to be low when Loading Bar loads quickly.\n\n#### minPercentage\nSet minPercentage. Set percentage in redux store is used only when greater than minPercentage.\nThis is a sort of design workaround for the rounded radius and padding getting messed up when\nLoading Bar is too small.\n\n#### mainColor\nSet Loading Screen background color.\n\n#### barColor\nSet Loading Bar & percentage color.\n\n#### logo\nSet displayed logo. Better effect with a PNG file with transparent background.\n\n## Redux\n\n```javascript\n\ntype LoadingScreenReducerStateType = {|\n    percentage: ?number,\n|};\n\n```\n\n>The only value in the Loading Screen redux store is ```percentage```.\n\n\n2 actions are available:\n- **setPercentage**: set percentage to the given value.\n    \n```javascript\n\n    LoadingScreenActions.setPercentage(80); // set percentage to 80 %\n\n```\n    \n- **addPercentage**: add the given value to the current percentage.\n\n```javascript\n\n    LoadingScreenActions.setPercentage(10); // set percentage to 10 %\n\n    /*...*/\n\n    LoadingScreenActions.addPercentage(20); // percentage is now 30 %\n\n```\n\n## Default props\n\n```javascript\n\nstatic defaultProps = {\n    open: true,\n    hideLogo: false,\n    hidePercentage: false,\n    hideBar: false,\n    transition: 'width .1s ease-in-out',\n    minPercentage: 10,\n    mainColor: '#6EC8F1', // same blue color as splashscreen in Adsum AdLoader\n    barColor: 'white',\n    logo: '/assets/img/adsum-logo.png',\n};\n\n```\n\n## Copy component inside your project src folder  \n\nIt will copy the component inside your project, in **src/components/adsum-loading-screen/**.\n\n    npx @adactive/arc-loading-screen copy\n","readmeFilename":"README.md"}