diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..c0a6300 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,3 @@ +[1.0.0] + +- Initial release diff --git a/README.md b/README.md index 59cddb3..9369612 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,13 @@ # unsplash-image-picker -> Provide component to search and choose image from unsplash images +Provide component to search and choose image from unsplash images [![NPM](https://img.shields.io/npm/v/unsplash-image-picker.svg)](https://www.npmjs.com/package/unsplash-image-picker) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2FTheAlphamerc%2Funsplash-image-picker&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://hits.seeyoufarm.com) +## Live Demo + +[Demo](https://thealphamerc.github.io/unsplash-image-picker/) + ## Install ```bash @@ -12,14 +16,22 @@ npm install --save unsplash-image-picker ## Usage +Package provide 2 component to search and choose image from unsplash images. + +- `UnsplashImagePicker` - search and choose image from unsplash images +- `UnsplashImagePickerModal` - Display modal to search and choose image from unsplash images + +### How to use UnsplashImagePickerModal + ```tsx import React, { Component } from 'react' -import { UnsplashImagePicker } from 'unsplash-image-picker' +import { UnsplashImagePickerModal } from 'unsplash-image-picker' import 'unsplash-image-picker/dist/index.css' const App = () => { const [active, setActive] = React.useState(false) const unsplashAccessKey = 'UNSPLASH_ACCESS_KEY' + const [photos, setActivePhotos] = React.useState<>([]) return (
- { + let list = (photos ?? []) as any[] + list.push(photo) + setActivePhotos(list) + setActive(false) + }} />
) @@ -67,6 +86,8 @@ const App = () => { export default App ``` +> To get UNSPLASH_ACCESS_KEY, you can register at [unsplash.com](https://unsplash.com/join) + ## License MIT © [thealphamerc](https://github.com/thealphamerc) diff --git a/dist/api/unsplash-api.d.ts b/dist/api/unsplash-api.d.ts index 8eed0f1..f1de13b 100644 --- a/dist/api/unsplash-api.d.ts +++ b/dist/api/unsplash-api.d.ts @@ -48,7 +48,7 @@ declare const unsplashApi: (accessKey: string) => { query: string; } & Pick & import("unsplash-js/dist/types/request").OrientationParam & { orderBy?: "relevant" | "latest" | undefined; - color?: "black" | "blue" | "green" | "magenta" | "orange" | "purple" | "red" | "teal" | "white" | "yellow" | "black_and_white" | undefined; + color?: "white" | "black" | "yellow" | "orange" | "red" | "purple" | "magenta" | "green" | "teal" | "blue" | "black_and_white" | undefined; lang?: import("unsplash-js").Language | undefined; contentFilter?: "high" | "low" | undefined; collectionIds?: string[] | undefined; diff --git a/dist/index.modern.js b/dist/index.modern.js index 02e0b1d..901b227 100644 --- a/dist/index.modern.js +++ b/dist/index.modern.js @@ -2,33 +2,52 @@ import React from 'react'; import cx from 'classnames'; import { createApi } from 'unsplash-js'; -function Modal({ - children, - className = '', - width = 540, - padding = true, - active = false, - setActive = function (_e) {}, - ...props -}) { +function _objectWithoutPropertiesLoose(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + return target; +} + +var _excluded = ["children", "className", "width", "padding", "active", "setActive"]; +function Modal(_ref) { + var children = _ref.children, + _ref$width = _ref.width, + width = _ref$width === void 0 ? 540 : _ref$width, + _ref$padding = _ref.padding, + padding = _ref$padding === void 0 ? true : _ref$padding, + _ref$active = _ref.active, + active = _ref$active === void 0 ? false : _ref$active, + _ref$setActive = _ref.setActive, + setActive = _ref$setActive === void 0 ? function (_e) {} : _ref$setActive, + props = _objectWithoutPropertiesLoose(_ref, _excluded); + return React.createElement("div", Object.assign({ - onClick: _e => { + onClick: function onClick(_e) { if (active) { setActive(false); } else { setActive(true); } }, - onKeyUp: e => { + onKeyUp: function onKeyUp(e) { if (e.key === 'Escape') { setActive(false); } }, - className: cx(`Modal`, { + className: cx("Modal", { active: active }) }, props), React.createElement(Card, { - onClick: e => { + onClick: function onClick(e) { if (active) { e.stopPropagation(); } @@ -42,13 +61,14 @@ function Modal({ }, children)); } -function Card({ - children, - padding = true, - className = '', - style = {}, - onClick = _ => {} -}) { +function Card(_ref2) { + var children = _ref2.children, + _ref2$padding = _ref2.padding, + padding = _ref2$padding === void 0 ? true : _ref2$padding, + _ref2$style = _ref2.style, + style = _ref2$style === void 0 ? {} : _ref2$style, + _ref2$onClick = _ref2.onClick, + onClick = _ref2$onClick === void 0 ? function (_) {} : _ref2$onClick; return React.createElement("div", { onClick: onClick, style: style, @@ -58,14 +78,16 @@ function Card({ }, children); } -function UnsplashPhotoCard({ - photo, - onPhotoSelect = _ => {} -}) { +function UnsplashPhotoCard(_ref) { + var photo = _ref.photo, + _ref$onPhotoSelect = _ref.onPhotoSelect, + onPhotoSelect = _ref$onPhotoSelect === void 0 ? function (_) {} : _ref$onPhotoSelect; return React.createElement("div", { className: 'group relative h-60 sm:h-44 md:h-32 w-full place-items-center object-cover cursor-pointer border theme-border-default', key: photo.id, - onClick: () => onPhotoSelect(photo) + onClick: function onClick() { + return onPhotoSelect(photo); + } }, React.createElement("img", { className: 'card-img place-items-center w-full object-cover h-full rounded', src: photo.urls.thumb, @@ -88,24 +110,26 @@ function UnsplashPhotoCard({ }, photo.user.name))))); } -function PhotoList({ - isLoading = false, - isLoadingMore = false, - photoList, - total, - onPhotoSelect, - loadMore -}) { - const listHeight = '700px'; - const ref = React.useMemo(() => React.createRef(), []); - - const onScroll = () => { +function PhotoList(_ref) { + var _ref$isLoading = _ref.isLoading, + isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading, + _ref$isLoadingMore = _ref.isLoadingMore, + isLoadingMore = _ref$isLoadingMore === void 0 ? false : _ref$isLoadingMore, + photoList = _ref.photoList, + total = _ref.total, + onPhotoSelect = _ref.onPhotoSelect, + loadMore = _ref.loadMore; + var listHeight = '700px'; + var ref = React.useMemo(function () { + return React.createRef(); + }, []); + + var onScroll = function onScroll() { if (ref.current) { - const { - scrollTop, - scrollHeight, - clientHeight - } = ref.current; + var _ref$current = ref.current, + scrollTop = _ref$current.scrollTop, + scrollHeight = _ref$current.scrollHeight, + clientHeight = _ref$current.clientHeight; if (scrollHeight - (scrollTop + clientHeight) < 20) { loadMore(); @@ -124,7 +148,7 @@ function PhotoList({ }, ref: ref, onScroll: onScroll - }, photoList.map(photo => { + }, photoList.map(function (photo) { return React.createElement(UnsplashPhotoCard, { key: photo.id, photo: photo, @@ -159,14 +183,19 @@ function Loader() { })); } -function SearchBar({ - setQuery, - query, - onSearch -}) { - const searchPhotos = async e => { - e.preventDefault(); - onSearch(query); +function SearchBar(_ref) { + var setQuery = _ref.setQuery, + query = _ref.query, + onSearch = _ref.onSearch; + + var searchPhotos = function searchPhotos(e) { + try { + e.preventDefault(); + onSearch(query); + return Promise.resolve(); + } catch (e) { + return Promise.reject(e); + } }; return React.createElement("div", null, React.createElement("div", null, React.createElement("form", { @@ -180,35 +209,61 @@ function SearchBar({ type: 'text', name: 'search', value: query, - onChange: e => setQuery(e.target.value) + onChange: function onChange(e) { + return setQuery(e.target.value); + } })), React.createElement("span", null, React.createElement("button", { className: 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md', type: 'submit' }, "Search"))))); } -function ImagePicker({ - unsplashAccessKey, - initialPhotoSearchQuery = '', - onPhotoSelect = _ => {} -}) { - const [pics, setPics] = React.useState([]); - const [total, setTotal] = React.useState(); - const [query, setQuery] = React.useState(''); - const [isLoading, setIsLoading] = React.useState(false); - const [isLoadingMore, setIsLoadingMore] = React.useState(false); - const [page, setPage] = React.useState(1); - const unsplash = createApi({ +function ImagePicker(_ref) { + var unsplashAccessKey = _ref.unsplashAccessKey, + _ref$initialPhotoSear = _ref.initialPhotoSearchQuery, + initialPhotoSearchQuery = _ref$initialPhotoSear === void 0 ? '' : _ref$initialPhotoSear, + _ref$onPhotoSelect = _ref.onPhotoSelect, + _onPhotoSelect = _ref$onPhotoSelect === void 0 ? function (_) {} : _ref$onPhotoSelect; + + var _React$useState = React.useState([]), + pics = _React$useState[0], + setPics = _React$useState[1]; + + var _React$useState2 = React.useState(), + total = _React$useState2[0], + setTotal = _React$useState2[1]; + + var _React$useState3 = React.useState(''), + query = _React$useState3[0], + setQuery = _React$useState3[1]; + + var _React$useState4 = React.useState(false), + isLoading = _React$useState4[0], + setIsLoading = _React$useState4[1]; + + var _React$useState5 = React.useState(false), + isLoadingMore = _React$useState5[0], + setIsLoadingMore = _React$useState5[1]; + + var _React$useState6 = React.useState(1), + page = _React$useState6[0], + setPage = _React$useState6[1]; + + var unsplash = createApi({ accessKey: unsplashAccessKey }); - React.useEffect(() => { + React.useEffect(function () { if (initialPhotoSearchQuery !== '') { setQuery(initialPhotoSearchQuery); fetchPhotos(1, initialPhotoSearchQuery); } }, []); - const fetchPhotos = (page, text, reset = false) => { + var fetchPhotos = function fetchPhotos(page, text, reset) { + if (reset === void 0) { + reset = false; + } + if (isLoading || isLoadingMore) { return; } @@ -225,16 +280,16 @@ function ImagePicker({ perPage: 30, query: text, orientation: 'landscape' - }).then(response => { + }).then(function (response) { var _response$response; - const newPics = response === null || response === void 0 ? void 0 : (_response$response = response.response) === null || _response$response === void 0 ? void 0 : _response$response.results; + var newPics = response === null || response === void 0 ? void 0 : (_response$response = response.response) === null || _response$response === void 0 ? void 0 : _response$response.results; if (newPics) { - let mergedPics = newPics; + var mergedPics = newPics; if (!reset) { - mergedPics = [...pics, ...newPics]; + mergedPics = [].concat(pics, newPics); } setPics(mergedPics); @@ -259,7 +314,7 @@ function ImagePicker({ }, React.createElement("div", { className: '' }, React.createElement(SearchBar, { - onSearch: query => { + onSearch: function onSearch(query) { setPics([]); fetchPhotos(1, query, true); }, @@ -270,28 +325,40 @@ function ImagePicker({ photoList: pics, isLoading: isLoading, isLoadingMore: isLoadingMore, - loadMore: () => { + loadMore: function loadMore() { fetchPhotos(page + 1, query); }, - onPhotoSelect: async photo => { + onPhotoSelect: function (photo) { try { - onPhotoSelect(photo); - } catch (error) { - console.log(error); + try { + _onPhotoSelect(photo); + } catch (error) { + console.log(error); + } + + return Promise.resolve(); + } catch (e) { + return Promise.reject(e); } } })))); } -function ImagePickerModal({ - unsplashAccessKey, - active = false, - initialPhotoSearchQuery = '', - setActive = _ => {}, - onPhotoSelect = _ => {}, - modalWidth = 840, - modalClassName = '' -}) { +function ImagePickerModal(_ref) { + var unsplashAccessKey = _ref.unsplashAccessKey, + _ref$active = _ref.active, + active = _ref$active === void 0 ? false : _ref$active, + _ref$initialPhotoSear = _ref.initialPhotoSearchQuery, + initialPhotoSearchQuery = _ref$initialPhotoSear === void 0 ? '' : _ref$initialPhotoSear, + _ref$setActive = _ref.setActive, + setActive = _ref$setActive === void 0 ? function (_) {} : _ref$setActive, + _ref$onPhotoSelect = _ref.onPhotoSelect, + onPhotoSelect = _ref$onPhotoSelect === void 0 ? function (_) {} : _ref$onPhotoSelect, + _ref$modalWidth = _ref.modalWidth, + modalWidth = _ref$modalWidth === void 0 ? 840 : _ref$modalWidth, + _ref$modalClassName = _ref.modalClassName, + modalClassName = _ref$modalClassName === void 0 ? '' : _ref$modalClassName; + if (!active) { return null; } @@ -301,7 +368,7 @@ function ImagePickerModal({ }, React.createElement(Modal, { active: active, setActive: setActive, - width: `${modalWidth}px`, + width: modalWidth + "px", padding: false, className: modalClassName }, React.createElement(ImagePicker, { diff --git a/dist/index.modern.js.map b/dist/index.modern.js.map index 16f1d66..efbd8f5 100644 --- a/dist/index.modern.js.map +++ b/dist/index.modern.js.map @@ -1 +1 @@ -{"version":3,"file":"index.modern.js","sources":["../src/component/modal.tsx","../src/component/picker/photo-card.tsx","../src/component/picker/photo-list.component.tsx","../src/component/picker/search-bar.component.tsx","../src/component/picker/index.tsx","../src/component/picker-modal/picker-modal.tsx"],"sourcesContent":["import cx from 'classnames'\nimport React from 'react'\n\nexport default function Modal({\n children,\n className = '',\n width = 540,\n padding = true,\n active = false,\n setActive = function (_e: any) {},\n ...props\n}: any): JSX.Element {\n return (\n {\n if (active) {\n setActive(false)\n } else {\n setActive(true)\n }\n }}\n onKeyUp={(e) => {\n if (e.key === 'Escape') {\n setActive(false)\n }\n }}\n className={cx(`Modal`, {\n active: active\n })}\n {...props}\n >\n {\n // stop the card being closed when we click on inner divs\n if (active) {\n e.stopPropagation()\n }\n }}\n padding={padding}\n className='overflow-hidden h-full'\n style={{ maxWidth: width, width: '100%' }}\n >\n {children}\n \n \n )\n}\n\nfunction Card({\n children,\n padding = true,\n className = '',\n style = {},\n onClick = (_: any) => {}\n}: any): JSX.Element {\n return (\n \n {children}\n \n )\n}\n","import React from 'react'\n\n/**\n * @description PhotoCard component for UnsplashImagePicker\n * @param {Object} photo - The photo to display.\n * @param {funtion} onPhotoSelect - Function to call when a photo is selected.\n */\nexport default function UnsplashPhotoCard({\n photo,\n onPhotoSelect = (_: any) => {}\n}: any) {\n return (\n onPhotoSelect(photo)}\n >\n \n \n
\n
\n \n
{photo.user.name}
\n
\n
\n \n \n )\n}\n","import React from 'react'\nimport UnsplashPhotoCard from './photo-card'\n\ninterface Props {\n isLoading?: boolean\n isLoadingMore?: boolean\n photoList: Array\n total?: number | undefined\n onPhotoSelect: (photo: any) => void\n loadMore: () => void\n}\nfunction PhotoList({\n isLoading = false,\n isLoadingMore = false,\n photoList,\n total,\n onPhotoSelect,\n loadMore\n}: Props) {\n const listHeight = '700px' // 'calc(100 - 125px)'\n const ref = React.useMemo(() => React.createRef(), [])\n\n const onScroll = () => {\n if (ref.current) {\n const { scrollTop, scrollHeight, clientHeight } = ref.current\n if (scrollHeight - (scrollTop + clientHeight) < 20) {\n // Contributors list lazy loading you're at the bottom of the page\n // do this when we reach end\n loadMore()\n }\n }\n }\n\n return (\n
\n {isLoading ? (\n
\n \n
\n ) : (\n
\n {Array.isArray(photoList) && photoList.length > 0 && (\n \n {photoList.map((photo: any) => {\n return (\n \n )\n })}\n
\n )}\n {Array.isArray(photoList) &&\n photoList.length === 0 &&\n total === 0 && (\n
\n No photos found\n
\n )}\n {!total && (\n
\n )}\n
\n )}\n {isLoadingMore && (\n
\n \n
\n )}\n
\n )\n}\nfunction Loader() {\n return (\n \n \n \n \n )\n}\nexport default PhotoList\n","import React from 'react'\n\ninterface Props {\n query: string\n setQuery: (query: string) => void\n onSearch: (query: string) => void\n}\nfunction SearchBar({ setQuery, query, onSearch }: Props) {\n const searchPhotos = async (e: any) => {\n e.preventDefault()\n onSearch(query)\n }\n\n return (\n
\n
\n
\n \n \n {/* \n \n
\n
\n
\n )\n}\n\nexport default SearchBar\n","import React from 'react'\nimport { createApi } from 'unsplash-js'\nimport PhotoList from './photo-list.component'\nimport SearchBar from './search-bar.component'\n\ninterface Props {\n unsplashAccessKey: string\n initialPhotoSearchQuery?: string\n onPhotoSelect?: (photo: any) => void\n}\n\n/**\n * @description ImagePicker search image from Unsplash.\n * @param {string} unsplashAccessKey - The unsplash access key.\n * @param {string} initialPhotoSearchQuery - The initial search query.\n * @param {function} onPhotoSelect - Function to call when a photo is selected.\n */\nexport default function ImagePicker({\n unsplashAccessKey,\n initialPhotoSearchQuery = '',\n onPhotoSelect = (_: any) => {}\n}: Props) {\n const [pics, setPics] = React.useState([])\n const [total, setTotal] = React.useState()\n const [query, setQuery] = React.useState('')\n const [isLoading, setIsLoading] = React.useState(false)\n const [isLoadingMore, setIsLoadingMore] = React.useState(false)\n const [page, setPage] = React.useState(1)\n\n const unsplash = createApi({ accessKey: unsplashAccessKey })\n\n React.useEffect(() => {\n if (initialPhotoSearchQuery !== '') {\n setQuery(initialPhotoSearchQuery)\n fetchPhotos(1, initialPhotoSearchQuery)\n }\n }, [])\n\n const fetchPhotos = (page: number, text: string, reset = false) => {\n if (isLoading || isLoadingMore) {\n return\n }\n if (page === 1) {\n setIsLoading(true)\n } else {\n setIsLoadingMore(true)\n }\n setPage(page)\n unsplash.search\n .getPhotos({\n page: page,\n perPage: 30,\n query: text,\n orientation: 'landscape'\n })\n .then((response: any) => {\n const newPics = response?.response?.results\n if (newPics) {\n let mergedPics = newPics\n if (!reset) {\n mergedPics = [...pics, ...newPics]\n }\n setPics(mergedPics)\n setTotal(response.response.total)\n }\n setIsLoading(false)\n setIsLoadingMore(false)\n })\n }\n\n return (\n
\n
\n
\n
\n {' '}\n Search image\n
\n
\n
\n {\n setPics([])\n fetchPhotos(1, query, true)\n }}\n query={query}\n setQuery={setQuery}\n />\n
\n
\n\n {\n fetchPhotos(page + 1, query)\n }}\n onPhotoSelect={async (photo: any) => {\n try {\n // let blob = await fetch(photo.urls.regular).then((r) => r.blob())\n // let image = await URL.createObjectURL(blob)\n onPhotoSelect(photo)\n } catch (error) {\n console.log(error)\n }\n }}\n />\n
\n
\n
\n )\n}\n","import React from 'react'\nimport Modal from '../modal'\nimport ImagePicker from '../picker'\n\ninterface Props {\n unsplashAccessKey: any\n active?: boolean\n modalWidth?: number\n modalClassName?: string\n initialPhotoSearchQuery?: string\n setActive?: (active: boolean) => void\n onPhotoSelect?: (photo: any) => void\n}\n\n/**\n * @description ImagePickerModal search image from Unsplash.\n * @param {string} unsplashAccessKey - The unsplash access key.\n * @param {string} initialPhotoSearchQuery - The initial search query.\n * @param {boolean} active - Whether the image picker is active.\n * @param {function} setActive - Function to set the image picker active.\n * @param {function} onPhotoSelect - Function to call when a photo is selected.\n * @param {number} modalWidth - The width of the modal. Default is 840px.\n * @param {string} modalClassName - The classname for the modal.\n */\nexport default function ImagePickerModal({\n unsplashAccessKey,\n active = false,\n initialPhotoSearchQuery = '',\n setActive = (_: boolean) => {},\n onPhotoSelect = (_: any) => {},\n modalWidth = 840,\n modalClassName = ''\n}: Props) {\n if (!active) {\n return null\n }\n\n return (\n
\n \n \n \n
\n )\n}\n"],"names":["Modal","children","className","width","padding","active","setActive","_e","props","React","onClick","onKeyUp","e","key","cx","Card","stopPropagation","style","maxWidth","_","UnsplashPhotoCard","photo","onPhotoSelect","id","src","urls","thumb","alt","alt_description","color","user","profile_image","small","username","name","PhotoList","isLoading","isLoadingMore","photoList","total","loadMore","listHeight","ref","useMemo","createRef","onScroll","current","scrollTop","scrollHeight","clientHeight","Loader","Array","isArray","length","maxHeight","map","xmlns","fill","viewBox","cy","r","stroke","strokeWidth","d","SearchBar","setQuery","query","onSearch","searchPhotos","preventDefault","onSubmit","placeholder","type","value","onChange","target","ImagePicker","unsplashAccessKey","initialPhotoSearchQuery","pics","setPics","useState","setTotal","setIsLoading","setIsLoadingMore","page","setPage","unsplash","createApi","accessKey","useEffect","fetchPhotos","text","reset","search","getPhotos","perPage","orientation","then","response","newPics","results","mergedPics","error","console","log","ImagePickerModal","modalWidth","modalClassName"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"index.modern.js","sources":["../src/component/modal.tsx","../src/component/picker/photo-card.tsx","../src/component/picker/photo-list.component.tsx","../src/component/picker/search-bar.component.tsx","../src/component/picker/index.tsx","../src/component/picker-modal/picker-modal.tsx"],"sourcesContent":["import cx from 'classnames'\nimport React from 'react'\n\nexport default function Modal({\n children,\n className = '',\n width = 540,\n padding = true,\n active = false,\n setActive = function (_e: any) {},\n ...props\n}: any): JSX.Element {\n return (\n {\n if (active) {\n setActive(false)\n } else {\n setActive(true)\n }\n }}\n onKeyUp={(e) => {\n if (e.key === 'Escape') {\n setActive(false)\n }\n }}\n className={cx(`Modal`, {\n active: active\n })}\n {...props}\n >\n {\n // stop the card being closed when we click on inner divs\n if (active) {\n e.stopPropagation()\n }\n }}\n padding={padding}\n className='overflow-hidden h-full'\n style={{ maxWidth: width, width: '100%' }}\n >\n {children}\n \n \n )\n}\n\nfunction Card({\n children,\n padding = true,\n className = '',\n style = {},\n onClick = (_: any) => {}\n}: any): JSX.Element {\n return (\n \n {children}\n \n )\n}\n","import React from 'react'\n\n/**\n * @description PhotoCard component for UnsplashImagePicker\n * @param {Object} photo - The photo to display.\n * @param {funtion} onPhotoSelect - Function to call when a photo is selected.\n */\nexport default function UnsplashPhotoCard({\n photo,\n onPhotoSelect = (_: any) => {}\n}: any) {\n return (\n onPhotoSelect(photo)}\n >\n \n \n
\n
\n \n
{photo.user.name}
\n
\n
\n \n \n )\n}\n","import React from 'react'\nimport UnsplashPhotoCard from './photo-card'\n\ninterface Props {\n isLoading?: boolean\n isLoadingMore?: boolean\n photoList: Array\n total?: number | undefined\n onPhotoSelect: (photo: any) => void\n loadMore: () => void\n}\nfunction PhotoList({\n isLoading = false,\n isLoadingMore = false,\n photoList,\n total,\n onPhotoSelect,\n loadMore\n}: Props) {\n const listHeight = '700px' // 'calc(100 - 125px)'\n const ref = React.useMemo(() => React.createRef(), [])\n\n const onScroll = () => {\n if (ref.current) {\n const { scrollTop, scrollHeight, clientHeight } = ref.current\n if (scrollHeight - (scrollTop + clientHeight) < 20) {\n // Contributors list lazy loading you're at the bottom of the page\n // do this when we reach end\n loadMore()\n }\n }\n }\n\n return (\n
\n {isLoading ? (\n
\n \n
\n ) : (\n
\n {Array.isArray(photoList) && photoList.length > 0 && (\n \n {photoList.map((photo: any) => {\n return (\n \n )\n })}\n
\n )}\n {Array.isArray(photoList) &&\n photoList.length === 0 &&\n total === 0 && (\n
\n No photos found\n
\n )}\n {!total && (\n
\n )}\n
\n )}\n {isLoadingMore && (\n
\n \n
\n )}\n
\n )\n}\nfunction Loader() {\n return (\n \n \n \n \n )\n}\nexport default PhotoList\n","import React from 'react'\n\ninterface Props {\n query: string\n setQuery: (query: string) => void\n onSearch: (query: string) => void\n}\nfunction SearchBar({ setQuery, query, onSearch }: Props) {\n const searchPhotos = async (e: any) => {\n e.preventDefault()\n onSearch(query)\n }\n\n return (\n
\n
\n
\n \n \n {/* \n \n
\n
\n
\n )\n}\n\nexport default SearchBar\n","import React from 'react'\nimport { createApi } from 'unsplash-js'\nimport PhotoList from './photo-list.component'\nimport SearchBar from './search-bar.component'\n\ninterface Props {\n unsplashAccessKey: string\n initialPhotoSearchQuery?: string\n onPhotoSelect?: (photo: any) => void\n}\n\n/**\n * @description ImagePicker search image from Unsplash.\n * @param {string} unsplashAccessKey - The unsplash access key.\n * @param {string} initialPhotoSearchQuery - The initial search query.\n * @param {function} onPhotoSelect - Function to call when a photo is selected.\n */\nexport default function ImagePicker({\n unsplashAccessKey,\n initialPhotoSearchQuery = '',\n onPhotoSelect = (_: any) => {}\n}: Props) {\n const [pics, setPics] = React.useState([])\n const [total, setTotal] = React.useState()\n const [query, setQuery] = React.useState('')\n const [isLoading, setIsLoading] = React.useState(false)\n const [isLoadingMore, setIsLoadingMore] = React.useState(false)\n const [page, setPage] = React.useState(1)\n\n const unsplash = createApi({ accessKey: unsplashAccessKey })\n\n React.useEffect(() => {\n if (initialPhotoSearchQuery !== '') {\n setQuery(initialPhotoSearchQuery)\n fetchPhotos(1, initialPhotoSearchQuery)\n }\n }, [])\n\n const fetchPhotos = (page: number, text: string, reset = false) => {\n if (isLoading || isLoadingMore) {\n return\n }\n if (page === 1) {\n setIsLoading(true)\n } else {\n setIsLoadingMore(true)\n }\n setPage(page)\n unsplash.search\n .getPhotos({\n page: page,\n perPage: 30,\n query: text,\n orientation: 'landscape'\n })\n .then((response: any) => {\n const newPics = response?.response?.results\n if (newPics) {\n let mergedPics = newPics\n if (!reset) {\n mergedPics = [...pics, ...newPics]\n }\n setPics(mergedPics)\n setTotal(response.response.total)\n }\n setIsLoading(false)\n setIsLoadingMore(false)\n })\n }\n\n return (\n
\n
\n
\n
\n {' '}\n Search image\n
\n
\n
\n {\n setPics([])\n fetchPhotos(1, query, true)\n }}\n query={query}\n setQuery={setQuery}\n />\n
\n
\n\n {\n fetchPhotos(page + 1, query)\n }}\n onPhotoSelect={async (photo: any) => {\n try {\n // let blob = await fetch(photo.urls.regular).then((r) => r.blob())\n // let image = await URL.createObjectURL(blob)\n onPhotoSelect(photo)\n } catch (error) {\n console.log(error)\n }\n }}\n />\n
\n
\n
\n )\n}\n","import React from 'react'\nimport Modal from '../modal'\nimport ImagePicker from '../picker'\n\ninterface Props {\n unsplashAccessKey: any\n active?: boolean\n modalWidth?: number\n modalClassName?: string\n initialPhotoSearchQuery?: string\n setActive?: (active: boolean) => void\n onPhotoSelect?: (photo: any) => void\n}\n\n/**\n * @description ImagePickerModal search image from Unsplash.\n * @param {string} unsplashAccessKey - The unsplash access key.\n * @param {string} initialPhotoSearchQuery - The initial search query.\n * @param {boolean} active - Whether the image picker is active.\n * @param {function} setActive - Function to set the image picker active.\n * @param {function} onPhotoSelect - Function to call when a photo is selected.\n * @param {number} modalWidth - The width of the modal. Default is 840px.\n * @param {string} modalClassName - The classname for the modal.\n */\nexport default function ImagePickerModal({\n unsplashAccessKey,\n active = false,\n initialPhotoSearchQuery = '',\n setActive = (_: boolean) => {},\n onPhotoSelect = (_: any) => {},\n modalWidth = 840,\n modalClassName = ''\n}: Props) {\n if (!active) {\n return null\n }\n\n return (\n
\n \n \n \n
\n )\n}\n"],"names":["Modal","children","width","padding","active","setActive","_e","props","React","onClick","onKeyUp","e","key","className","cx","Card","stopPropagation","style","maxWidth","_","UnsplashPhotoCard","photo","onPhotoSelect","id","src","urls","thumb","alt","alt_description","color","user","profile_image","small","username","name","PhotoList","isLoading","isLoadingMore","photoList","total","loadMore","listHeight","ref","useMemo","createRef","onScroll","current","scrollTop","scrollHeight","clientHeight","Loader","Array","isArray","length","maxHeight","map","xmlns","fill","viewBox","cy","r","stroke","strokeWidth","d","SearchBar","setQuery","query","onSearch","searchPhotos","preventDefault","onSubmit","placeholder","type","value","onChange","target","ImagePicker","unsplashAccessKey","initialPhotoSearchQuery","useState","pics","setPics","setTotal","setIsLoading","setIsLoadingMore","page","setPage","unsplash","createApi","accessKey","useEffect","fetchPhotos","text","reset","search","getPhotos","perPage","orientation","then","response","newPics","results","mergedPics","error","console","log","ImagePickerModal","modalWidth","modalClassName"],"mappings":";;;;;;;;;;;;;;;;;;;;SAGwBA;MACtBC,gBAAAA;wBAEAC;MAAAA,gCAAQ;0BACRC;MAAAA,oCAAU;yBACVC;MAAAA,kCAAS;4BACTC;MAAAA,wCAAY,UAAUC,EAAV;MACTC;;EAEH,OACEC,mBAAA,MAAA;IACEC,OAAO,EAAE,iBAACH,EAAD;MACP,IAAIF,MAAJ,EAAY;QACVC,SAAS,CAAC,KAAD,CAAT;OADF,MAEO;QACLA,SAAS,CAAC,IAAD,CAAT;;;IAGJK,OAAO,EAAE,iBAACC,CAAD;MACP,IAAIA,CAAC,CAACC,GAAF,KAAU,QAAd,EAAwB;QACtBP,SAAS,CAAC,KAAD,CAAT;;;IAGJQ,SAAS,EAAEC,EAAE,UAAU;MACrBV,MAAM,EAAEA;KADG;KAGTG,MAhBN,EAkBEC,mBAAA,CAACO,IAAD;IACEN,OAAO,EAAE,iBAACE,CAAD;MAEP,IAAIP,MAAJ,EAAY;QACVO,CAAC,CAACK,eAAF;;;IAGJb,OAAO,EAAEA;IACTU,SAAS,EAAC;IACVI,KAAK,EAAE;MAAEC,QAAQ,EAAEhB,KAAZ;MAAmBA,KAAK,EAAE;;GATnC,EAWGD,QAXH,CAlBF,CADF;AAkCD;;AAED,SAASc,IAAT;MACEd,iBAAAA;4BACAE;MAAAA,qCAAU;0BAEVc;MAAAA,iCAAQ;4BACRR;MAAAA,qCAAU,UAACU,CAAD;EAEV,OACEX,mBAAA,MAAA;IACEC,OAAO,EAAEA;IACTQ,KAAK,EAAEA;IACPJ,SAAS,EAAEC,EAAE,CAAC,8CAAD,EAAiD;MAC5D,OAAOX;KADI;GAHf,EAOGF,QAPH,CADF;AAWD;;SC3DuBmB;MACtBC,aAAAA;gCACAC;MAAAA,gDAAgB,UAACH,CAAD;EAEhB,OACEX,mBAAA,MAAA;IACEK,SAAS,EAAC;IACVD,GAAG,EAAES,KAAK,CAACE;IACXd,OAAO,EAAE;MAAA,OAAMa,aAAa,CAACD,KAAD,CAAnB;;GAHX,EAKEb,mBAAA,MAAA;IACEK,SAAS,EAAC;IACVW,GAAG,EAAEH,KAAK,CAACI,IAAN,CAAWC;IAChBC,GAAG,EAAEN,KAAK,CAACO;GAHb,CALF,EAUEpB,mBAAA,MAAA;IACEK,SAAS,EAAC;IACVI,KAAK,EAAE;MAAEY,KAAK,EAAE;;GAFlB,EAIErB,mBAAA,MAAA;IAAKK,SAAS,EAAC;GAAf,EACEL,mBAAA,MAAA;IAAKK,SAAS,EAAC;GAAf,EACEL,mBAAA,MAAA;IACEK,SAAS,EAAC;IACVW,GAAG,EAAEH,KAAK,CAACS,IAAN,CAAWC,aAAX,CAAyBC;IAC9BL,GAAG,EAAEN,KAAK,CAACS,IAAN,CAAWG;GAHlB,CADF,EAMEzB,mBAAA,KAAA;IAAIK,SAAS,EAAC;GAAd,EAAsCQ,KAAK,CAACS,IAAN,CAAWI,IAAjD,CANF,CADF,CAJF,CAVF,CADF;AA4BD;;AC5BD,SAASC,SAAT;4BACEC;MAAAA,wCAAY;gCACZC;MAAAA,gDAAgB;MAChBC,iBAAAA;MACAC,aAAAA;MACAjB,qBAAAA;MACAkB,gBAAAA;EAEA,IAAMC,UAAU,GAAG,OAAnB;EACA,IAAMC,GAAG,GAAGlC,KAAK,CAACmC,OAAN,CAAc;IAAA,OAAMnC,KAAK,CAACoC,SAAN,EAAN;GAAd,EAAuD,EAAvD,CAAZ;;EAEA,IAAMC,QAAQ,GAAG,SAAXA,QAAW;IACf,IAAIH,GAAG,CAACI,OAAR,EAAiB;MACf,mBAAkDJ,GAAG,CAACI,OAAtD;UAAQC,SAAR,gBAAQA,SAAR;UAAmBC,YAAnB,gBAAmBA,YAAnB;UAAiCC,YAAjC,gBAAiCA,YAAjC;;MACA,IAAID,YAAY,IAAID,SAAS,GAAGE,YAAhB,CAAZ,GAA4C,EAAhD,EAAoD;QAGlDT,QAAQ;;;GANd;;EAWA,OACEhC,mBAAA,MAAA;IAAKK,SAAS,EAAC;GAAf,EACGuB,SAAS,GACR5B,mBAAA,MAAA;IAAKK,SAAS,EAAC;GAAf,EACEL,mBAAA,CAAC0C,MAAD,MAAA,CADF,CADQ,GAKR1C,mBAAA,MAAA,MAAA,EACG2C,KAAK,CAACC,OAAN,CAAcd,SAAd,KAA4BA,SAAS,CAACe,MAAV,GAAmB,CAA/C,IACC7C,mBAAA,MAAA;IACEK,SAAS,EAAC;IACVI,KAAK,EAAE;MAAEqC,SAAS,EAAEb;;IACpBC,GAAG,EAAEA;IACLG,QAAQ,EAAEA;GAJZ,EAMGP,SAAS,CAACiB,GAAV,CAAc,UAAClC,KAAD;IACb,OACEb,mBAAA,CAACY,iBAAD;MACER,GAAG,EAAES,KAAK,CAACE;MACXF,KAAK,EAAEA;MACPC,aAAa,EAAEA;KAHjB,CADF;GADD,CANH,CAFJ,EAmBG6B,KAAK,CAACC,OAAN,CAAcd,SAAd,KACCA,SAAS,CAACe,MAAV,KAAqB,CADtB,IAECd,KAAK,KAAK,CAFX,IAGG/B,mBAAA,MAAA;IAAKK,SAAS,EAAC;GAAf,mBAAA,CAtBN,EA0BG,CAAC0B,KAAD,IACC/B,mBAAA,MAAA;IAAKK,SAAS,EAAC;GAAf,CA3BJ,CANJ,EAqCGwB,aAAa,IACZ7B,mBAAA,MAAA;IAAKK,SAAS,EAAC;GAAf,EACEL,mBAAA,CAAC0C,MAAD,MAAA,CADF,CAtCJ,CADF;AA6CD;;AACD,SAASA,MAAT;EACE,OACE1C,mBAAA,MAAA;IACEK,SAAS,EAAC;IACV2C,KAAK,EAAC;IACNC,IAAI,EAAC;IACLC,OAAO,EAAC;GAJV,EAMElD,mBAAA,SAAA;IACEK,SAAS,EAAC;IACVC,EAAE,EAAC;IACH6C,EAAE,EAAC;IACHC,CAAC,EAAC;IACFC,MAAM,EAAC;IACPC,WAAW,EAAC;GANd,CANF,EAcEtD,mBAAA,OAAA;IACEK,SAAS,EAAC;IACV4C,IAAI,EAAC;IACLM,CAAC,EAAC;GAHJ,CAdF,CADF;AAsBD;;AC/FD,SAASC,SAAT;MAAqBC,gBAAAA;MAAUC,aAAAA;MAAOC,gBAAAA;;EACpC,IAAMC,YAAY,YAAZA,YAAY,CAAUzD,CAAV;IAAA;MAChBA,CAAC,CAAC0D,cAAF;MACAF,QAAQ,CAACD,KAAD,CAAR;;KAFgB;MAAA;;GAAlB;;EAKA,OACE1D,mBAAA,MAAA,MAAA,EACEA,mBAAA,MAAA,MAAA,EACEA,mBAAA,OAAA;IAAM8D,QAAQ,EAAEF;IAAcvD,SAAS,EAAC;GAAxC,EACEL,mBAAA,QAAA;IAAOK,SAAS,EAAC;GAAjB,EACEL,mBAAA,QAAA;IACEK,SAAS,EAAC;IACV0D,WAAW,EAAC;IACZC,IAAI,EAAC;IACLtC,IAAI,EAAC;IACLuC,KAAK,EAAEP;IACPQ,QAAQ,EAAE,kBAAC/D,CAAD;MAAA,OAAOsD,QAAQ,CAACtD,CAAC,CAACgE,MAAF,CAASF,KAAV,CAAf;;GANZ,CADF,CADF,EAWEjE,mBAAA,OAAA,MAAA,EAEEA,mBAAA,SAAA;IACEK,SAAS,EAAC;IACV2D,IAAI,EAAC;GAFP,UAAA,CAFF,CAXF,CADF,CADF,CADF;AA2BD;;SCvBuBI;MACtBC,yBAAAA;mCACAC;MAAAA,6DAA0B;gCAC1BxD;MAAAA,iDAAgB,UAACH,CAAD;;EAEhB,sBAAwBX,KAAK,CAACuE,QAAN,CAAsB,EAAtB,CAAxB;MAAOC,IAAP;MAAaC,OAAb;;EACA,uBAA0BzE,KAAK,CAACuE,QAAN,EAA1B;MAAOxC,KAAP;MAAc2C,QAAd;;EACA,uBAA0B1E,KAAK,CAACuE,QAAN,CAAe,EAAf,CAA1B;MAAOb,KAAP;MAAcD,QAAd;;EACA,uBAAkCzD,KAAK,CAACuE,QAAN,CAAe,KAAf,CAAlC;MAAO3C,SAAP;MAAkB+C,YAAlB;;EACA,uBAA0C3E,KAAK,CAACuE,QAAN,CAAe,KAAf,CAA1C;MAAO1C,aAAP;MAAsB+C,gBAAtB;;EACA,uBAAwB5E,KAAK,CAACuE,QAAN,CAAe,CAAf,CAAxB;MAAOM,IAAP;MAAaC,OAAb;;EAEA,IAAMC,QAAQ,GAAGC,SAAS,CAAC;IAAEC,SAAS,EAAEZ;GAAd,CAA1B;EAEArE,KAAK,CAACkF,SAAN,CAAgB;IACd,IAAIZ,uBAAuB,KAAK,EAAhC,EAAoC;MAClCb,QAAQ,CAACa,uBAAD,CAAR;MACAa,WAAW,CAAC,CAAD,EAAIb,uBAAJ,CAAX;;GAHJ,EAKG,EALH;;EAOA,IAAMa,WAAW,GAAG,SAAdA,WAAc,CAACN,IAAD,EAAeO,IAAf,EAA6BC,KAA7B;QAA6BA;MAAAA,QAAQ;;;IACvD,IAAIzD,SAAS,IAAIC,aAAjB,EAAgC;MAC9B;;;IAEF,IAAIgD,IAAI,KAAK,CAAb,EAAgB;MACdF,YAAY,CAAC,IAAD,CAAZ;KADF,MAEO;MACLC,gBAAgB,CAAC,IAAD,CAAhB;;;IAEFE,OAAO,CAACD,IAAD,CAAP;IACAE,QAAQ,CAACO,MAAT,CACGC,SADH,CACa;MACTV,IAAI,EAAEA,IADG;MAETW,OAAO,EAAE,EAFA;MAGT9B,KAAK,EAAE0B,IAHE;MAITK,WAAW,EAAE;KALjB,EAOGC,IAPH,CAOQ,UAACC,QAAD;;;MACJ,IAAMC,OAAO,GAAGD,QAAH,aAAGA,QAAH,6CAAGA,QAAQ,CAAEA,QAAb,uDAAG,mBAAoBE,OAApC;;MACA,IAAID,OAAJ,EAAa;QACX,IAAIE,UAAU,GAAGF,OAAjB;;QACA,IAAI,CAACP,KAAL,EAAY;UACVS,UAAU,aAAOtB,IAAP,EAAgBoB,OAAhB,CAAV;;;QAEFnB,OAAO,CAACqB,UAAD,CAAP;QACApB,QAAQ,CAACiB,QAAQ,CAACA,QAAT,CAAkB5D,KAAnB,CAAR;;;MAEF4C,YAAY,CAAC,KAAD,CAAZ;MACAC,gBAAgB,CAAC,KAAD,CAAhB;KAlBJ;GAVF;;EAgCA,OACE5E,mBAAA,MAAA;IAAKK,SAAS,EAAC;GAAf,EACEL,mBAAA,MAAA;IAAKK,SAAS,EAAC;GAAf,EACEL,mBAAA,MAAA;IAAKK,SAAS,EAAC;GAAf,EACEL,mBAAA,MAAA;IAAKK,SAAS,EAAC;GAAf,EACG,GADH,gBAAA,CADF,EAKEL,mBAAA,MAAA;IAAKK,SAAS,EAAC;GAAf,EACEL,mBAAA,MAAA;IAAKK,SAAS,EAAC;GAAf,EACEL,mBAAA,CAACwD,SAAD;IACEG,QAAQ,EAAE,kBAACD,KAAD;MACRe,OAAO,CAAC,EAAD,CAAP;MACAU,WAAW,CAAC,CAAD,EAAIzB,KAAJ,EAAW,IAAX,CAAX;;IAEFA,KAAK,EAAEA;IACPD,QAAQ,EAAEA;GANZ,CADF,CADF,CALF,EAkBEzD,mBAAA,CAAC2B,SAAD;IACEI,KAAK,EAAEA;IACPD,SAAS,EAAE0C;IACX5C,SAAS,EAAEA;IACXC,aAAa,EAAEA;IACfG,QAAQ,EAAE;MACRmD,WAAW,CAACN,IAAI,GAAG,CAAR,EAAWnB,KAAX,CAAX;;IAEF5C,aAAa,YAASD,KAAT;MAAA;QACX,IAAI;UAGFC,cAAa,CAACD,KAAD,CAAb;SAHF,CAIE,OAAOkF,KAAP,EAAc;UACdC,OAAO,CAACC,GAAR,CAAYF,KAAZ;;;;OANS;QAAA;;;GARf,CAlBF,CADF,CADF,CADF;AA2CD;;SCzFuBG;MACtB7B,yBAAAA;yBACAzE;MAAAA,kCAAS;mCACT0E;MAAAA,6DAA0B;4BAC1BzE;MAAAA,wCAAY,UAACc,CAAD;gCACZG;MAAAA,gDAAgB,UAACH,CAAD;6BAChBwF;MAAAA,0CAAa;iCACbC;MAAAA,kDAAiB;;EAEjB,IAAI,CAACxG,MAAL,EAAa;IACX,OAAO,IAAP;;;EAGF,OACEI,mBAAA,MAAA;IAAKK,SAAS,EAAC;GAAf,EACEL,mBAAA,CAACR,KAAD;IACEI,MAAM,EAAEA;IACRC,SAAS,EAAEA;IACXH,KAAK,EAAKyG,UAAL;IACLxG,OAAO,EAAE;IACTU,SAAS,EAAE+F;GALb,EAOEpG,mBAAA,CAACoE,WAAD;IACEC,iBAAiB,EAAEA;IACnBC,uBAAuB,EAAEA;IACzBxD,aAAa,EAAEA;GAHjB,CAPF,CADF,CADF;AAiBD;;;;;"} \ No newline at end of file diff --git a/package.json b/package.json index cfbab30..3c5dd49 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "node": ">=10" }, "scripts": { - "build": "microbundle-crl --no-compress --format modern,cjs && npm run build:css && npm run export:assets", + "build": "microbundle-crl --no-compress --format modern,cjs && npm run build:css", "start": "microbundle-crl watch --no-compress --format modern,cjs", "build:css": "npm run tailwind:build && npm run css:build:custom && npm run sass && npm run css:build:cleanup", "tailwind:build": "npx tailwindcss -i ./src/styles/tailwind.scss --config tailwind.config.js -o ./src/styles/tailwind.style.scss",