{"_id":"@adactiveasia/adasia-modal","_rev":"1-ab1eb7e7f9a0fee15147f42e8962384e","name":"@adactiveasia/adasia-modal","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@adactiveasia/adasia-modal","version":"0.0.1","description":"Adsum Modal Component","main":"index.js","author":{"name":"Erlanda Zakaria","email":"erlandazakaria@gmail.com"},"license":"UNLISENCED","dependencies":{"chalk":"^1.1.3","commander":"^2.9.0"},"devDependencies":{"react":"^16.3.2","react-redux":"^5.0.7","redux-saga":"^0.16.0"},"peerDependencies":{"react":"^16.3.2","react-redux":"^5.0.7","redux-saga":"^0.16.0"},"repository":{"type":"git","url":"git://github.com/adactiveasia/adsum-react-components.git"},"bugs":{"url":"https://github.com/adactiveasia/adsum-react-components.git/issues"},"scripts":{},"publishConfig":{"access":"public"},"keywords":["adsum","react","redux","modal"],"gitHead":"2121186bd4ef7818108a494d1da8bb7abe7ef99f","homepage":"https://github.com/adactiveasia/adsum-react-components#readme","_id":"@adactiveasia/adasia-modal@0.0.1","_npmVersion":"6.4.1","_nodeVersion":"8.16.0","_npmUser":{"name":"devadactiveasia","email":"dev@adactive.asia"},"dist":{"integrity":"sha512-mWfRgRtBrUQJTR4CbSQVfB7Ik0Nx1Ayd7l9E3ggReUAUXQqD7GH7jiBccitX8N6pgVd88Y2HmSC41iBz8IEhIw==","shasum":"eadd7e857febb990c225cfdd0dc8c33fd78b23c7","tarball":"https://registry.npmjs.org/@adactiveasia/adasia-modal/-/adasia-modal-0.0.1.tgz","fileCount":12,"unpackedSize":20340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjDudCRA9TVsSAnZWagAAuBAQAJrMkR4zn9U49veA+hv7\nvUthAkxF+cjJziX1JEPKTJ+Ou2We9therQmCYOaUbqT0wDrc0jojucNAYyfW\nVsh2ri2mNpzCj2VsodwM4RLAsAAfAd9AAX1qvTmafH4v9+uM4Z3y1mShQGTh\nCZTV1abIIUrXuaBlvQUM1TX7G6xBGDhqclNpxjTNuUD6nNWOlb+kAqpCks6Z\nstxncoOJYnpCo6IsiiOwH0gu9fpZj2Rlsym5z1hnLFZYm/MBrBbm0PYL2eAj\n5Gt/T7e8rzvobzHN+uE7Yxaug44o44B53d+RF0dAhIWh8Js9CrGyIP4+Lv08\niJLcok2WkHlvKTw1kw5Vv9ocUx3Cdd2C54O5xCQdyEJ39YvKcKshMIdj2mji\nQkGw7Ps8/QdckqtRhByMCVzI6Nw0eCYw5hCDyxU19e7XZ4367CZiWOE5FSY5\nA0hKx+sblK5IuXoQKxoCcGlCc+g6mFtg8WhGVKB9l6PJP7v5YSc+Ckqgm42D\n1Jy+dzwfkctbwiMVGEuVs+/yO8Q20SVSzmXpL5jXi/rmRpFn+aa8EjeR2lgW\nxM3HWOUUfhDtsE78s3n03W9rv5cWhOO+tOKWiCwnTsFaZ8X5vh+uYeG3IWf9\nHWYUdAg6bwle+iKCMctJXZt3rmXs48YVlEuxpuaYGwT/4cyfGk52weZ+1Sdw\nB9rQ\r\n=IOQv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBphNXscS7wOUrMJU5ogejO5zlEMg0OabSTO77QHfySoAiBqInOSI4rtxu5wtRUbxZtDFyi5xdAKVvO0TFWog40kXg=="}]},"maintainers":[{"name":"devadactiveasia","email":"dev@adactive.asia"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/adasia-modal_0.0.1_1569471389159_0.3137327492333959"},"_hasShrinkwrap":false}},"time":{"created":"2019-09-26T04:16:28.943Z","0.0.1":"2019-09-26T04:16:29.320Z","modified":"2022-04-04T11:22:40.215Z"},"maintainers":[{"name":"devadactiveasia","email":"dev@adactive.asia"}],"description":"Adsum Modal Component","homepage":"https://github.com/adactiveasia/adsum-react-components#readme","keywords":["adsum","react","redux","modal"],"repository":{"type":"git","url":"git://github.com/adactiveasia/adsum-react-components.git"},"author":{"name":"Erlanda Zakaria","email":"erlandazakaria@gmail.com"},"bugs":{"url":"https://github.com/adactiveasia/adsum-react-components.git/issues"},"license":"UNLISENCED","readme":"# Carousel component\n\n![image](https://user-images.githubusercontent.com/5297278/40351912-38f849c8-5db6-11e8-8690-8198ca33bad4.pnghttps://user-images.githubusercontent.com/5297278/40352018-82424548-5db6-11e8-838b-a0b4e64bc921.png)\n\n## Getting started\n\n1. Install this component using\n    yarn add adsum-modal-asia\n2. Setting Redux Reducers\n    typically located on your_project_folder/src/rootReducer.js\n    - import the reducer : \n    ```import { ModalReducers } from '@adactive/adsum-modal-asia';```\n    - add ModalReducers on your root reducer, for example:\n    ```\n        const appState: AppStateType = {\n        routing: routerReducer,\n        map,\n        loadingScreen,\n        modal: ModalReducers\n        };\n    ```\n3. Setting Redux Actions in your Apps\n    First thing to do is to import the action to file which you need the actions, for example app.js\n    ```import { ModalActions } from '@adactive/adsum-modal-asia';```\n\n    There is 5 redux prop actions that this component have:\n\n    The first action is ***ONLY*** required if a function want to open children of current modal but we need to save the poi for back button. Usually it used on children that want to call grandchildren\n        - Action to save the poi in the structure for nested\n        **(ModalActions.setPoiStructure)**\n    This Following Two Actions is required to show modal\n        - Action to set which modal will appear\n        **(ModalActions.setModal)**\n        - Action to open the modal\n        **(ModalActions.openModal)**\n    The Following Two Actions is required when a function is opening a child of nested modal\n        - Action to set which modal is the parent of will be opened modal\n        **(ModalActions.setModalStructure)**\n        - Action to save the poi of current modal\n        **(ModalActions.setPoi)**\n\n    Put these to actions on the **mapDispatchToProps**  \n    For Example:\n    \n    ```\n    const mapDispatchToProps = (dispatch: *): MappedDispatchPropsType => ({\n        openModal: (abc) => {\n            dispatch(ModalActions.openModal(abc));\n        },\n        setModal: (name) => {\n            dispatch(ModalActions.setModal(name));\n        },\n        setModalStructure: (name) => {\n            dispatch(ModalActions.setModalStructure(name));\n        },\n        setPoi: (item) => {\n            dispatch(ModalActions.setPoi(item));\n        },\n        setPoiStructure: (item) => {\n            dispatch(ModalActions.setPoiStructure(item));\n        }\n    });\n    ```\n\n4. Attach ScreenSaver Component\n    for example:\n    ```javascript\n    <Modal  \n        backImage={backImage}\n        closeImage={closeImage}\n        modalWidth={\"100px\"}\n        modalHeight={\"100px\"}\n        modalPosition={{\n            top: '0',\n            left: '200px'\n        }}\n        modalColor={\"blue\"}\n        overlayOpen={true}\n        overlayWidth={\"400px\"}\n        overlayHeight={\"400px\"}\n        overlayColor={\"green\"}\n        overlayOpacity={\"1.0\"}\n        overlayPosition={{\n            top: '0',\n            left: '200px',\n        }}\n    >\n        <div style={{backgroundColor: \"pink\", fontSize: \"36px\"}}>MODAL THREE</div>\n    </Modal>\n```\n\n### Props\n\n**backButton** - Back Icon, if not provided, will be no back button on Modal\n\n**modalPosition** - modal Position in object contains top, right, bottom, and left\n\n**modalWidth** - modal width in string\n**modalHeight** - modal height in string\n**modalColor** - modal color in string\n\n**overlayOpen** - overlay open or not in boolean\n\n**overlayWidth** - overlay width in string\n**overlayHeight** - overlay height in string\n**overlayColor** - overlay color in string\n\n**overlayOpacity**: overlay opacity in string, in default will be set 0.0 or transparent,\n\n**overlayPosition**: overlay Position in object contains top, right, bottom, and left,\n \n```javascript\ntype OwnPropsType = {|\n    backButton: string,\n    modalPosition: object,\n    modalWidth: string,\n    modalHeight: string,\n    modalColor: string,\n    overlayOpen: boolean,\n    overlayWidth: string,\n    overlayHeight: string,\n    overlayColor: string,\n    overlayOpacity: string,\n    overlayPosition: array,\n|};\n\nstatic defaultProps = {\n        backButton: null,\n        modalPosition: {\n            top: 0,\n            right: null,\n            bottom: null,\n            left: 0,\n        },\n        modalWidth: \"100%\",\n        modalHeight: \"100%\",\n        modalColor: \"white\",\n        overlayOpen: true,\n        overlayWidth: \"100%\",\n        overlayHeight: \"100%\",\n        overlayColor: \"white\",\n        overlayOpacity: \"0.0\",\n        overlayPosition: {\n            top: 0,\n            right: null,\n            bottom: null,\n            left: 0,\n        },\n    }\n```\n\n\n## Copy component inside your project src folder  \n\n### Less only\n    `npx @adactive/adsum-modal-asia copy --less-only`\n    \n### Full copy\n    `npx @adactive/adsum-modal-asia copy`\n","readmeFilename":"README.md"}