{"_id":"@alliance-software-development/react-search-module","_rev":"6-846b89255023ca20ba2117d6fb105546","name":"@alliance-software-development/react-search-module","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@alliance-software-development/react-search-module","version":"1.0.0","description":"A cross platform ASD React Native Search module","main":"dist/rn-search-module.js","module":"dist/rn-search-module.m.js","scripts":{"build":"npm run clean && npx rollup -c","clean":"rm -rf dist/*"},"repository":{"type":"git","url":"git+https://github.com/imaginationeverywhere/asd-search-module.git"},"keywords":[],"author":{"name":"ASD Developer","email":"dev@imaginationeverywhere.info"},"license":"ISC","bugs":{"url":"https://github.com/imaginationeverywhere/asd-search-module/issues"},"homepage":"https://github.com/imaginationeverywhere/asd-search-module#readme","dependencies":{},"peerDependencies":{"prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.2.2","@babel/runtime":"^7.3.1","@rollup/plugin-commonjs":"^11.0.2","@rollup/plugin-node-resolve":"^7.1.1","react-dom":"17.0.2","react":"17.0.2","react-native":"0.66.4","react-native-web":"^0.11.7","rollup-plugin-babel":"^4.3.3"},"gitHead":"b949fa1f826c9007cc3496c80a58acc6e183bb67","_id":"@alliance-software-development/react-search-module@1.0.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-ZMe52kM+NV7/0NlE/TyrrZQrW0mZz2px5jOVNkksoePI0suWPC0WMC1tBa31X5af6XZp+G8e5ZwKF0+849maaw==","shasum":"664c457f91c214c091e3f9c495c922d1f95d53f6","tarball":"https://registry.npmjs.org/@alliance-software-development/react-search-module/-/react-search-module-1.0.0.tgz","fileCount":4,"unpackedSize":30306,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwMAoCRA9TVsSAnZWagAAxz4P+QHDUcHkq27pBtYumTxb\niyXmOFhrWV7UnV0sXRONf6DcwPbXpYPsUIsZIW1S4zswrk7CEudprGZs+hQJ\n1hwe+vxZLBAfzhG8MVCiB2OFKbF+QRYY9nMwF84ZjzwaOPOR7IluIKz9x/0j\nnFSDLYRpDiOlpRd95RiypZrz0DOSuW/vU+QgnwBdcBdRAjorg1EAnKOQwKrk\nq0ymcJBPgcgOkseROVHsGlZzCOnpX67I9bxJ2s6ZW3MSH+KGBQMXUepVx1Yc\n6J6LZDwguf9RU5f6NJ/ES/uZYtXCTJ5QaYjOyI/od4+WaX8GGjIAXxcqmmDp\n+OPpajO4aXlcmbSVJDb5rvvE9TkpRDuafnhUUHiWfW6Yewt5IL6g5bYG9uzx\ndHpIVzdLpRXa3FSJITHZWcnDuerUoPs1JbDjqBNylfFhib0mtqJdgQVomS4p\nT7/N8j0MEPoNlHc9ZdLWhh3gRp+NhDjOHQt2ZsLUoZnQLPZbUp5m4km5FG6d\ntfXkrLuTST+N1wGJkvSitllb3PWRtNENv3masdl5nDZtzvOrG5ghyRj6cpN7\n83iE6ayYWrmMRzKJJ0DPBCd2TQkh4LnhuUPfGLgxb+ldS6S9oYqXfNyhVCwb\ndAzU2W2X1z69eDqXH0a0s7EavcA4Ns445Tq2DV+FCZZujvefTkQJL0LhJ82H\n4ITi\r\n=yWeY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbbmqDu8udVGD+vL9G2xzywIr33iK83wyWiJDarLP94QIgJzvpBefrjxgBhMfZapXIa/EpGJyWlIwv0wb6UU+dfv8="}]},"_npmUser":{"name":"abdulsamadola","email":"360campstore@gmail.com"},"directories":{},"maintainers":[{"name":"kelvin_img","email":"kevin@imaginationeverywhere.info"},{"name":"abdulsamadola","email":"360campstore@gmail.com"},{"name":"gabrielquiksession","email":"gabriel@quiksession.com"},{"name":"asddev","email":"development@alliancesoftwaredevelopment.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-search-module_1.0.0_1640022056054_0.16145438659357292"},"_hasShrinkwrap":false},"1.0.1":{"name":"@alliance-software-development/react-search-module","version":"1.0.1","description":"A cross platform ASD React Search module","main":"dist/react-search-module.js","module":"dist/react-search-module.m.js","scripts":{"build":"npm run clean && npx rollup -c","clean":"rm -rf dist/*"},"repository":{"type":"git","url":"git+https://github.com/imaginationeverywhere/asd-search-module.git"},"keywords":[],"author":{"name":"ASD Developer","email":"dev@imaginationeverywhere.info"},"license":"ISC","bugs":{"url":"https://github.com/imaginationeverywhere/asd-search-module/issues"},"homepage":"https://github.com/imaginationeverywhere/asd-search-module#readme","dependencies":{},"peerDependencies":{"prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.2.2","@babel/runtime":"^7.3.1","@rollup/plugin-commonjs":"^11.0.2","@rollup/plugin-node-resolve":"^7.1.1","react-dom":"17.0.2","react":"17.0.2","react-native":"0.66.4","react-native-web":"^0.11.7","rollup-plugin-babel":"^4.3.3"},"gitHead":"3891e648f09ba1dd10a3c8ce764d57821923a1a8","_id":"@alliance-software-development/react-search-module@1.0.1","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-W2sdrC64ekS/GUMUf3Cpi2P16WqitlMieZZTnGWMsz5YYVL1Viyav9P0WL3IDX8B7Lra5GJkil/xJRNxdJQv1A==","shasum":"e3412851628c11058cd921d48ef9b712ac608a77","tarball":"https://registry.npmjs.org/@alliance-software-development/react-search-module/-/react-search-module-1.0.1.tgz","fileCount":4,"unpackedSize":30323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwkNSCRA9TVsSAnZWagAAS2IP/0cRCyTijGDRATJ5hBQ5\nJWN7ELXRzW+kZg9hUSiBI5q/BBugUg6ijM8nT7d2n0U2pqniygOMqmwizLHD\n79nXksCaNqvOB4mjXmU1glHQzxnFHvROEofcl9u4LNewpNSqPxzTUrrvCcV9\nuVcPGjOw0OE6OzYCK7IUV6yz9aC7K96/NSIyr/b44wHkb6CimPFfcZL9qpEu\nfSTxUNHRpfPwNMPanRhYDVofIR59dkHxuIoqVumATxBcVARfDxH2R4tBVM6k\nTd439b1OUsa1TeIgYL2IomzGF4CvwABlSdThAVKlqgMEIU2foEE8hIfRxJBn\nrtMv2nRyiCruApiajFjq42hOsLBNLBfu62XqNj0rhYCEt+jdwrTSoVptVdFh\n0WIRtBEpGP6zmTUVaGQsfjAeINp06qBYTzrZ/bGqPnxVeQACvye/WJAG33Pr\n0hKS1enDMHY6n7rj2YtI6He6owcPPaPb52zfrC0Lg2nRTYWDBxmvG/6f0Q3o\nFxg+KRMZX5v0R0pJvcyuVA1kmdifL6Y4b+51JygbQCI79a9+VC0MaXnMFJnU\nIkrA7QgpeNGo41nLZ/hMIMrpbNy6hP/8ynTLwT/qMNtcjYsW8PLjcKf3mMp4\nc/gghi9zSVFPgXHvVZZJtYzaeFAT5JDBOisIZPv+NVTdqXiNM+ZeFNr8DCIf\nH0FT\r\n=jCk4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAVmtFvYPfWKmFMp92Aw2eatAcTT+etWkQiiVjl1+sKXAiAY5X/IGKTn6whKxJWB22/asj2hMHTQ7mkh0S2IbwTLEw=="}]},"_npmUser":{"name":"abdulsamadola","email":"360campstore@gmail.com"},"directories":{},"maintainers":[{"name":"kelvin_img","email":"kevin@imaginationeverywhere.info"},{"name":"abdulsamadola","email":"360campstore@gmail.com"},{"name":"gabrielquiksession","email":"gabriel@quiksession.com"},{"name":"asddev","email":"development@alliancesoftwaredevelopment.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-search-module_1.0.1_1640121170817_0.6228829537133638"},"_hasShrinkwrap":false}},"time":{"created":"2021-12-20T17:40:56.053Z","1.0.0":"2021-12-20T17:40:56.211Z","modified":"2022-10-17T08:25:21.311Z","1.0.1":"2021-12-21T21:12:50.972Z"},"maintainers":[{"email":"jjchinosoviolet@gmail.com","name":"cvjude"},{"email":"abudusamuelbiodun@gmail.com","name":"blvckleumas"},{"email":"kevin@imaginationeverywhere.info","name":"kelvin_img"},{"email":"360campstore@gmail.com","name":"abdulsamadola"},{"email":"development@alliancesoftwaredevelopment.com","name":"asddev"}],"description":"A cross platform ASD React Search module","homepage":"https://github.com/imaginationeverywhere/asd-search-module#readme","keywords":[],"repository":{"type":"git","url":"git+https://github.com/imaginationeverywhere/asd-search-module.git"},"author":{"name":"ASD Developer","email":"dev@imaginationeverywhere.info"},"bugs":{"url":"https://github.com/imaginationeverywhere/asd-search-module/issues"},"license":"ISC","readme":"# @alliance-software-development/react-search-module\n \n\nA React component for search.\n\n\n\n## Installation\n\nFor Native this module depends on nothing means `no dependency require` so, just 1 below step require to install it.\n\nNote: to use this module on web, you have to install `react-native-web`\n\n```sh\nnpm install @alliance-software-development/react-search-module\n```\n\nor\n\n```sh\nyarn add @alliance-software-development/react-search-module\n```\n\n## Usage\n\n```js\nimport ASDSearch from '@alliance-software-development/react-search-module';\n```\n\n## For Native\n\n```js\nimport React from 'react';\nimport {Dimensions, SafeAreaView, StyleSheet, Text, View} from 'react-native';\n\nimport ASDSearch from '@alliance-software-development/react-search-module';\n\nconst data = [\n {\n studioType: 'music',\n zipCode: '74886',\n thresholdDays: 2,\n name: 'music pool',\n phoneNumber: 7036979103,\n address: '707 Continental Cir, Mountain View, CA 94040, USA',\n service: {\n serviceName: 'pool sounds',\n price: 100,\n },\n },\n {\n studioType: 'music',\n zipCode: '122',\n thresholdDays: 2,\n name: 'music ranty',\n phoneNumber: 7036979103,\n address: '707 Mac Book, Mountain View, CA 94040, USA',\n service: {\n serviceName: 'pool sounds',\n price: 100,\n },\n },\n {\n studioType: 'photo',\n thresholdDays: 2,\n name: 'photo iconic',\n phoneNumber: 7036979103,\n address: '500 Phot Bum str, Mountain View, CA 94040, USA',\n service: {\n serviceName: 'pool sounds',\n price: 10,\n },\n },\n {\n studioType: 'video',\n thresholdDays: 2,\n name: 'videp pool',\n phoneNumber: 7036979103,\n address: '300 Lam Sink, Mountain View, CA 94040, USA',\n service: {\n serviceName: 'pool sounds',\n price: 50,\n },\n },\n];\n\nconst App = () => {\n const dataView = ({item, index}) => {\n return (\n \n \n {item.name}\n \n Starting @ ${item.service.price}/hr\n \n \n {item.address}\n \n \n \n \n );\n };\n\n const renderSearchHeader = searchCount => {\n return (\n \n \n Quick Search Result {searchCount}\n \n \n );\n };\n return (\n \n \n \n );\n};\n\nconst styles = StyleSheet.create({\n center: {\n justifyContent: 'center',\n alignItems: 'center',\n marginBottom: 10,\n },\n searchInputStyle: {\n alignSelf: 'center',\n backgroundColor: 'lightgray',\n height: 45,\n borderRadius: 10,\n borderWidth: 0,\n marginBottom: 20,\n },\n dataViewStyle: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n paddingHorizontal: 15,\n minHeight: 100,\n minWidth: Dimensions.get('window').width - 25,\n margin: 10,\n borderRadius: 10,\n backgroundColor: '#fff',\n },\n dataViewContainerStyle: {\n flex: 1,\n flexDirection: 'column',\n },\n title: {\n fontSize: 18,\n fontWeight: '500',\n textTransform: 'capitalize',\n },\n subtitle: {\n fontSize: 15,\n fontWeight: '500',\n },\n desc: {\n fontSize: 14,\n fontWeight: '300',\n color: 'gray',\n letterSpacing: 1,\n marginTop: 20,\n width: 210,\n },\n sectionContainer: {\n marginTop: 32,\n paddingHorizontal: 24,\n },\n box: {\n backgroundColor: 'gray',\n height: 70,\n width: 70,\n borderRadius: 8,\n alignSelf: 'center',\n },\n shadowProp: {\n shadowColor: '#171717',\n shadowOffset: {width: -2, height: 4},\n shadowOpacity: 0.2,\n shadowRadius: 3,\n },\n elevation: {\n elevation: 20,\n shadowColor: '#52006A',\n },\n});\n\nexport default App;\n\n```\n\n## Usage on Web\n\n```js\nimport React from 'react';\n\nimport ASDSearch from '@alliance-software-development/react-search-module';\n\nconst data = [\n {\n studioType: 'music',\n zipCode: '74886',\n thresholdDays: 2,\n name: 'music pool',\n phoneNumber: 7036979103,\n address: '707 Continental Cir, Mountain View, CA 94040, USA',\n service: {\n serviceName: 'pool sounds',\n price: 100,\n },\n },\n {\n studioType: 'music',\n zipCode: '122',\n thresholdDays: 2,\n name: 'music ranty',\n phoneNumber: 7036979103,\n address: '707 Mac Book, Mountain View, CA 94040, USA',\n service: {\n serviceName: 'pool sounds',\n price: 100,\n },\n },\n {\n studioType: 'photo',\n thresholdDays: 2,\n name: 'photo iconic',\n phoneNumber: 7036979103,\n address: '500 Phot Bum str, Mountain View, CA 94040, USA',\n service: {\n serviceName: 'pool sounds',\n price: 10,\n },\n },\n {\n studioType: 'video',\n thresholdDays: 2,\n name: 'videp pool',\n phoneNumber: 7036979103,\n address: '300 Lam Sink, Mountain View, CA 94040, USA',\n service: {\n serviceName: 'pool sounds',\n price: 50,\n },\n },\n];\n\nconst styles = {\n center: {\n justifyContent: 'center',\n alignItems: 'center',\n marginBottom: 10,\n },\n searchInputStyle: {\n alignSelf: 'center',\n backgroundColor: 'lightgray',\n height: 45,\n borderRadius: 10,\n borderWidth: 0,\n marginBottom: 20,\n },\n dataViewStyle: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n paddingHorizontal: 15,\n minHeight: 100,\n minWidth: 300,\n margin: 10,\n borderRadius: 10,\n backgroundColor: '#fff',\n },\n dataViewContainerStyle: {\n flex: 1,\n flexDirection: 'column',\n },\n title: {\n fontSize: 18,\n fontWeight: '500',\n textTransform: 'capitalize',\n },\n subtitle: {\n fontSize: 15,\n fontWeight: '500',\n },\n desc: {\n fontSize: 14,\n fontWeight: '300',\n color: 'gray',\n letterSpacing: 1,\n marginTop: 20,\n width: 210,\n },\n sectionContainer: {\n marginTop: 32,\n paddingHorizontal: 24,\n },\n box: {\n backgroundColor: 'gray',\n height: 70,\n width: 70,\n borderRadius: 8,\n alignSelf: 'center',\n },\n shadowProp: {\n shadowColor: '#171717',\n shadowOffset: {width: -2, height: 4},\n shadowOpacity: 0.2,\n shadowRadius: 3,\n },\n}\n\nconst App = () => {\n const dataView = ({item, index}) => {\n return (\n
\n
\n

{item.name}

\n

\n Starting @ ${item.service.price}/hr\n

\n \n {item.address}\n \n
\n
\n
\n );\n };\n\n const renderSearchHeader = searchCount => {\n return (\n
\n

\n Quick Search Result {searchCount}\n

\n
\n );\n };\n return (\n
\n \n
\n );\n};\n\n\nexport default App;\n\n```\n\n\n## Props\n\nASDSearch component accepts following props.\n\nName | Type| Default | Is Require \n--- | --- | --- | ---\ndata | [] of {} | - | Yes \nsearchBy | [] of Strings | - | Yes \ndataView | Func | - | Yes\nrenderSearchHeader | Func | - | No\nsearchInputProps | {} | - | No\ndataViewContainerStyle | {} | - | No\nsearchInputStyle | {} | - | No\n\n\n## Props Explanation\n\n`Data` *List of Objects*\n\nData must be List of Objects where each object will represent a View.\n\n```js\n \n //List of Objects\n [{\n studioType: 'video',\n thresholdDays: 2,\n }, ...]\n \n //For Example\n data={[{\n studioType: 'video',\n thresholdDays: 2,\n name: 'videp pool',\n phoneNumber: 7036979103,\n address: '300 Lam Sink, Mountain View, CA 94040, USA',\n service: {\n serviceName: 'pool sounds',\n price: 50,\n },\n }, ... ]}\n \n```\n`searchBy` *List of Strings*\n\nBy Default ASDSearch searches by all the Data props.\n\n```js\n \n //List of Strings\n ['city', 'zipcode', 'name', 'price']\n \n //Note\n //Data prop must have Object keys same/match the Data item. \n \n```\n\n`dataView` *Function*\nASDSearch passes each item with its index in Object in which can display, with full flexibity.\n\nBelow is the shape of Objects.\n\n```js\n//Function Shape\nconst dataView = ({item, index}) => {\n return (\n \n \n {item.name}\n \n Starting @ ${item.service.price}/hr\n \n \n {item.address}\n \n \n \n \n );\n };\n \n```\n\n`renderSearchHeader` *Function*\nASDSearch passes search result count.\n\nBelow is the shape of Objects.\n\n```js\n//Function Shape\n const renderSearchHeader = searchCount => {\n return (\n \n \n Quick Search Result {searchCount}\n \n \n );\n };\n```\n\n\n`searchInputProps` *Object*\n\nSearch input props, just a wrapper around react native TextInput\n\n```js\ne.g. \n{\n placeholder: 'Search by name, zipcode...',\n onTextChange: ()=>{}\n\n}\n\n```\n`dataViewContainerStyle` *Object*\n\n dataView container styles\n ```js\n e.g. \n{\n flex: 1,\n flexDirection: 'column',\n},\n\n ```\n\n`searchInputStyle` *Object*\n\n Search input styles\n```js\ne.g.\n{\n alignSelf: 'center',\n backgroundColor: 'lightgray',\n height: 45,\n borderRadius: 10,\n borderWidth: 0,\n marginBottom: 20,\n }\n\n ```","readmeFilename":"README.md"}