{"_id":"@dooboo-ui/pinch-zoom-slider-modal","_rev":"5-f51f384930716dd64cafa6985bac64f9","name":"@dooboo-ui/pinch-zoom-slider-modal","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@dooboo-ui/pinch-zoom-slider-modal","main":"lib/index.js","types":"lib/index.d.ts","version":"0.0.1","license":"MIT","postinstall":"tsc","scripts":{"build":"rm -rf ./lib && tsc","watch":"tsc -w"},"repository":{"type":"git","url":"git+https://github.com/dooboolab/dooboo-ui.git","directory":"src/components/shared/PinchZoomSliderModal"},"bugs":{"url":"https://github.com/dooboolab/dooboo-ui/issues"},"homepage":"https://github.com/dooboolab/dooboo-ui#readme","dependencies":{"@react-native-community/viewpager":"^3.3.0","dooboolab-welcome":"^1.1.1","react-native-image-pan-zoom":"^2.1.11"},"devDependencies":{"styled-components":"^5.0.0","typescript":"^3.7.5"},"peerDependencies":{"react":">=16.8","react-native":">=0.59","styled-components":">=4.4.0"},"publishConfig":{"access":"public"},"keywords":["search-input","react-hook","react-native","dooboo-ui/native","dooboolab"],"description":"> [PinchZoomSliderModal] is a image swiper with pinch zoom functionality.","_id":"@dooboo-ui/pinch-zoom-slider-modal@0.0.1","_nodeVersion":"12.14.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-iXFgIM0MU4+bhqNpwMk9P088Bp/RFzawmiUUnjbJNz3c0ir4rFhvYSYvgWlk7kf2700l2CnaeVaDE02nM0yvXQ==","shasum":"98ee710b4c341e6e017fa3193216f48238e87420","tarball":"https://registry.npmjs.org/@dooboo-ui/pinch-zoom-slider-modal/-/pinch-zoom-slider-modal-0.0.1.tgz","fileCount":8,"unpackedSize":503669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6tYeCRA9TVsSAnZWagAAZqYP/0G1xGBKwLiEL6wpefv2\nohJowGgQhnHFUBO+KepA/51kZsFsJN9ky9o3cwph2k0EOLECMWbJ/Fdv5yvt\n9tqRcyZHs7zVt81yX5Q16QetUSlF6f9AdTlKyi1TqA/oX5eRKoiRUQy3f4cC\nHzx1E4E6YC2uDuGHVNnMxGgDblyn1QHyGXqEI0Bfnc1Afm3CfE/JTuZkesIk\nbsBbyoVoNnfH8YqNJBvnXL9UAynJnRBAHXRRi5HgMsRQGfGdWI7aNZA3VJpx\nGwfDjpIulMujHaoZzDVQy1xE/kTufPluXQ6STKylZUrpiZbrjCpwWtdtxDXa\n5+bOOw5cqmqc8HNf/ApYfxED/CYwQ1xourxTmezL5pAyPc5KbP245sCuFkOr\nDqqIpmdoJZyqlTHO4cxTnLFz3VK8fu/oLP8lQ7L/HiSptAnWmsxihkeWcf3p\nQ/QqptYqsnIczf6JzQG9RHO5WX5/uaAcEaMvYLpM2xSnrWDcRpE93P0XyA+K\n+/nfh/yD1DxTnxLoG7ccOiLgg9n9hEzwevZkQtkwNJ8RasroMw/JmrqFVjmR\nhIeNnNinWLfUms1GuSqVfZQS1LU89cSbohbCHzU3r0Lc8j3186630ih8HSXT\ncJVqz5+Ll7H4rgnw8WNIcdWtGsxc2OI0Ss6NPUN2LvDLev2s4qaaqwjJmpEG\nIkmj\r\n=g3V4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdWozrmuQFmCp/ZQx9eeFCp4rjll/nEKA0fBPFqJL50gIgK+Pwy4imGN9olddPfJAYCSZkCaKF54FVkU/ikCT1oow="}]},"maintainers":[{"name":"dooboolab","email":"dooboolab@gmail.com"}],"_npmUser":{"name":"dooboolab","email":"dooboolab@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pinch-zoom-slider-modal_0.0.1_1592448541730_0.008642243337978694"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-18T02:49:01.208Z","0.0.1":"2020-06-18T02:49:01.915Z","modified":"2022-04-05T05:16:09.797Z"},"maintainers":[{"email":"lastchoice86@naver.com","name":"jongtaek"},{"email":"do02reen24@gmail.com","name":"do02reen24"},{"email":"dooboolab@gmail.com","name":"dooboolab"}],"description":"> [PinchZoomSliderModal] is a image swiper with pinch zoom functionality.","homepage":"https://github.com/dooboolab/dooboo-ui#readme","keywords":["search-input","react-hook","react-native","dooboo-ui/native","dooboolab"],"repository":{"type":"git","url":"git+https://github.com/dooboolab/dooboo-ui.git","directory":"src/components/shared/PinchZoomSliderModal"},"bugs":{"url":"https://github.com/dooboolab/dooboo-ui/issues"},"license":"MIT","readme":"# PinchZoomSliderModal\n\n> [PinchZoomSliderModal] is a image swiper with pinch zoom functionality.\n\n![pinchzoom](https://user-images.githubusercontent.com/27461460/73713538-22345700-4751-11ea-9a8c-aaca24d0b360.gif)\n\n\n## Props\n\n|                | necessary | types                | default |\n| -------------- | --------- | -------------------- | ------- |\n| containerStyle |           | ViewStyle            |         |\n| visible        |           | boolean              | true    |\n| renderCloseElement      |  | () => ReactElement   | null    |\n| renderIndicator|           | () => ReactElement   | null    |\n| onClose        |           | () => void           |         |\n| onPageChanged  |           | (page: number) => void  |      |\n| images         |           | ImageSourcePropType[]| []      |\n| defaultImageSource |       | ImageURISource       | null    |\n\n## Installation\n\n```sh\nyarn add @dooboo-ui/core\n```\n\n## Getting started\n> Note that this ui element does not exist in `@dooboo-ui/core` itself. Please install below package.\n\n  ```sh\n  yarn add @dooboo-ui/pinch-zoom-slider-modal\n  ```\n\n- Import\n  ```ts\n  import PinchZoomSliderModal from '@dooboo-ui/pinch-zoom-slider-modal';\n  ```\n\n- Example\n\n  ```tsx\n  import React, { ReactElement, useState } from 'react';\n  import { Text, TouchableOpacity, View } from 'react-native';\n\n  import { ContainerDeco } from '../decorators';\n  import PinchZoomSliderModal from '../../lib/package/PinchZoomSliderModal';\n  import { storiesOf } from '@storybook/react-native';\n  import styled from 'styled-components/native';\n\n  storiesOf('PinchZoomSliderModal', module)\n    .addDecorator(ContainerDeco)\n    .add('default', () => (\n      <>\n        <Default />\n      </>\n    ));\n\n  const Container = styled.View`\n    flex: 1;\n    background-color: transparent;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n  `;\n\n  const images = [\n    // IC_LOGO,\n    { uri: 'https://images.unsplash.com/photo-1519335337423-a3357c2cd12e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2168&q=80' },\n    { uri: 'https://www.housingwire.com/wp-content/uploads/2019/09/Purple-technology-data-internet-3.jpg' },\n    { uri: 'https://images.unsplash.com/photo-1543007354-0bc99b7d096b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80' },\n    { uri: 'https://p.bigstockphoto.com/eIdTXLbqQilMs9xbjvcs_bigstock-Aerial-View-Of-Sandy-Beach-Wit-256330393.jpg' },\n    { uri: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460' },\n  ];\n\n  function Default(): ReactElement {\n    const [visible, setVisible] = useState<boolean>(false);\n    const [pageNum, setPageNum] = useState<number>(0);\n\n    return (\n      <Container>\n        <TouchableOpacity\n          onPress={(): void => setVisible(true)}\n        >\n          <Text\n            style={{\n              fontSize: 24,\n              color: 'blue',\n            }}\n          >Open PinchZoomSliderModal!</Text>\n        </TouchableOpacity>\n        <PinchZoomSliderModal\n          renderCloseElement={\n            (): ReactElement =>\n              <Text\n                style={{\n                  fontSize: 24,\n                  color: 'blue',\n                }}\n              >Close</Text>\n          }\n          images={images}\n          visible={visible}\n          onClose={(): void => setVisible(false)}\n          onPageChanged={(page: number): void => setPageNum(page)}\n          renderIndicator={(): ReactElement => <View style={[\n            {\n              position: 'absolute',\n              bottom: 80,\n            },\n          ]}>\n            <Text>{pageNum + 1} / {images.length}</Text>\n          </View>}\n        />\n      </Container>\n    );\n  }\n  ```\n","readmeFilename":"README.md"}